### Install ink-color-pipe using npm

Source: https://github.com/litomore/ink-color-pipe/blob/main/README.md

Install the ink-color-pipe package using npm. This is the first step to using the component in your Ink application.

```shell
npm i ink-color-pipe
```

--------------------------------

### Using Built-in Chalk and chalk-pipe Exports

Source: https://github.com/litomore/ink-color-pipe/blob/main/README.md

Shows how to access and use the underlying Chalk instance, Chark constructor, and chalkPipe function provided by ink-color-pipe for more direct styling control.

```javascript
import { Chalk, chalk, chalkPipe } from "ink-color-pipe";

const customChalk = new Chalk({ level: 0 });

console.log(chalk.blue("Hello"));
console.log(customChalk.green("World"));

console.log(chalkPipe("blue.bgGreen.italic")("Hello World"));

```

--------------------------------

### Basic Usage of Color Component in Ink

Source: https://github.com/litomore/ink-color-pipe/blob/main/README.md

Demonstrates how to use the `<Color>` component to apply styles like 'blue.underline' and 'bgRed.white' to text within an Ink application. It imports necessary components from 'ink' and 'ink-color-pipe'.

```javascript
import React from "react";
import { render, Text } from "ink";
import Color from "ink-color-pipe";

const link = "blue.underline";
const error = "bgRed.white";

render(
	<Text>
		<Color styles={link}>Unicorn</Color>
		<Color styles={error}>{" Error "}</Color>
	</Text>,
);

```

--------------------------------

### Chalk and Chalk-pipe Exports for Advanced Styling (TypeScript)

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Demonstrates re-exporting the complete Chalk library and chalk-pipe utilities for full access to the underlying styling engine. It shows usage of default and custom Chalk instances, color disabling, and integration with Ink components.

```typescript
import { Chalk, chalk } from 'ink-color-pipe';

// Use default chalk instance
console.log(chalk.blue('Blue text'));
console.log(chalk.bgRed.white('White on red'));
console.log(chalk.bold.italic.green('Multiple styles'));

// Create custom Chalk instances with specific color levels
const customChalk = new Chalk({ level: 3 }); // TrueColor support
console.log(customChalk.hex('#DEADED')('Hex color text'));
console.log(customChalk.rgb(255, 136, 0)('RGB color text'));

// Disable colors for specific instance
const noColorChalk = new Chalk({ level: 0 });
console.log(noColorChalk.red('This appears without color'));

// Combine with Ink components
import React from 'react';
import { render, Text } from 'ink';
import Color, { chalk } from 'ink-color-pipe';

const App = () => {
  // Pre-process some text with chalk
  const processedText = chalk.dim('(optional)');

  return (
    <Text>
      <Color styles="blue.bold">Enter your name</Color>
      {' '}
      {processedText}
    </Text>
  );
};

render(<App />);
```

--------------------------------

### Style String Composition for Reusable UI Elements (TypeScript)

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Presents a pattern for building complex, reusable style combinations using dot-notation chaining of modifiers, colors, and backgrounds. This promotes consistency and maintainability in UI development.

```tsx
import React from 'react';
import { render, Box, Text } from 'ink';
import Color from 'ink-color-pipe';

// Define style constants for consistency
const STYLES = {
  // Text emphasis
  heading: 'cyan.bold.underline',
  subheading: 'white.bold',
  emphasis: 'yellow.italic',

  // Status indicators
  error: 'bgRed.white.bold',
  warning: 'bgYellow.black.bold',
  success: 'bgGreen.white.bold',
  info: 'bgBlue.white',

  // UI elements
  link: 'blue.underline',
  code: 'gray.dim',
  highlight: 'bgWhite.black',

  // Custom combinations
  brand: '#6C5CE7.bold',
  muted: 'gray.dim.italic'
};

const StyledInterface = () => {
  return (
    <Box flexDirection="column" padding={1}>
      <Text>
        <Color styles={STYLES.heading}>Application Dashboard</Color>
      </Text>

      <Text>
        <Color styles={STYLES.subheading}>System Status</Color>
      </Text>

      <Box flexDirection="column" marginTop={1}>
        <Text>
          <Color styles={STYLES.success}> OK </Color>
          {' Database connection active'}
        </Text>
        <Text>
          <Color styles={STYLES.warning}> WARN </Color>
          {' High memory usage detected'}
        </Text>
        <Text>
          <Color styles={STYLES.info}> INFO </Color>
          {' 5 background tasks running'}
        </Text>
      </Box>

      <Text marginTop={1}>
        {'Visit '}
        <Color styles={STYLES.link}>https://docs.example.com</Color>
        {' for more info'}
      </Text>

      <Text>
        <Color styles={STYLES.muted}>Last updated: 2 minutes ago</Color>
      </Text>
    </Box>
  );
};

render(<StyledInterface />);
```

--------------------------------

### Hex and CSS Color Support with Ink (TypeScript)

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Illustrates how to use hex triplet notation and CSS color keywords for precise color control within Ink components. This allows for a wider range of color specifications beyond basic named colors.

```tsx
import React from 'react';
import { render, Box, Text } from 'ink';
import Color from 'ink-color-pipe';

const ColorPalette = () => {
  return (
    <Box flexDirection="column">
      {/* Hex colors */}
      <Text>
        <Color styles="#FF6B6B.bold">Coral Red (#FF6B6B)</Color>
      </Text>
      <Text>
        <Color styles="#4ECDC4.bold">Turquoise (#4ECDC4)</Color>
      </Text>
      <Text>
        <Color styles="#FFE66D.bold">Yellow (#FFE66D)</Color>
      </Text>

      {/* CSS keywords */}
      <Text>
        <Color styles="crimson.bold">Crimson (CSS keyword)</Color>
      </Text>
      <Text>
        <Color styles="skyblue.italic">Sky Blue (CSS keyword)</Color>
      </Text>
      <Text>
        <Color styles="mediumseagreen.underline">Medium Sea Green</Color>
      </Text>

      {/* Combined with backgrounds */}
      <Text>
        <Color styles="bg#2C3E50.#ECF0F1.bold"> Custom theme colors </Color>
      </Text>
    </Box>
  );
};

render(<ColorPalette />);
```

--------------------------------

### Render Styled Text with <Color> Component in Ink

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Demonstrates how to use the `<Color>` React component to apply various text styles, including basic colors, multiple modifiers, background colors, and complex combinations, within an Ink application. This component internally uses Ink's `<Transform>` and `chalk-pipe` for styling.

```tsx
import React from 'react';
import { render, Text } from 'ink';
import Color from 'ink-color-pipe';

// Basic color styling
render(
  <Text>
    <Color styles="blue">This is blue text</Color>
  </Text>
);

// Multiple styles combined
render(
  <Text>
    <Color styles="blue.bold.underline">Bold blue underlined text</Color>
  </Text>
);

// Background colors and foreground colors
render(
  <Text>
    <Color styles="bgRed.white">White text on red background</Color>
  </Text>
);

// Complex styling with multiple properties
const link = "blue.underline";
const error = "bgRed.white";
const warning = "yellow.bold";
const success = "green.bold";

render(
  <Text>
    <Color styles={link}>https://example.com</Color>
    {'/n'}
    <Color styles={error}> Error </Color>
    {' Something went wrong!'}
    {'/n'}
    <Color styles={warning}>⚠ Warning: </Color>
    {'Check your configuration'}
    {'/n'}
    <Color styles={success}>✓ Success: </Color>
    {'Operation completed'}
  </Text>
);
```

--------------------------------

### Programmatic Styling with chalkPipe Export

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Shows how to use the `chalkPipe` function exported by `ink-color-pipe` for applying styles programmatically outside of React components. This function takes a style string and returns a function that applies the specified styles to any given string, supporting hex colors and CSS keywords.

```typescript
import { chalkPipe } from 'ink-color-pipe';

// Create style functions
const errorStyle = chalkPipe('bgRed.white.bold');
const linkStyle = chalkPipe('blue.underline');
const successStyle = chalkPipe('green.bold');

// Apply styles to strings
console.log(errorStyle('Error: File not found'));
console.log(linkStyle('https://github.com'));
console.log(successStyle('✓ Build completed'));

// Use with hex colors
const customColor = chalkPipe('#FF6B6B.bold');
console.log(customColor('Custom hex color'));

// Use with CSS keywords
const infoStyle = chalkPipe('skyblue.italic');
console.log(infoStyle('Information message'));

// Combine multiple styling approaches
const styles = {
  error: chalkPipe('bgRed.white'),
  warning: chalkPipe('yellow.bold'),
  info: chalkPipe('blue'),
  success: chalkPipe('green')
};

const messages = [
  { type: 'error', text: 'Failed to connect' },
  { type: 'warning', text: 'Deprecated API usage' },
  { type: 'info', text: 'Processing request' },
  { type: 'success', text: 'Task completed' }
];

messages.forEach(msg => {
  console.log(styles[msg.type](msg.text));
});
```

--------------------------------

### TypeScript ColorProps Interface for Ink-Color-Pipe

Source: https://context7.com/litomore/ink-color-pipe/llms.txt

Illustrates the usage of the `ColorProps` TypeScript interface from `ink-color-pipe` to ensure type safety when defining and using the `<Color>` component's props. This promotes robust component development by enforcing correct prop types for `styles` and `children`.

```tsx
import React from 'react';
import Color, { type ColorProps } from 'ink-color-pipe';
import { render, Text } from 'ink';

// Define reusable styled components with proper types
const StyledText: React.FC<ColorProps> = ({ styles, children }) => {
  return <Color styles={styles}>{children}</Color>;
};

// Use with explicit types
const MyComponent: React.FC = () => {
  const props: ColorProps = {
    styles: 'cyan.bold',
    children: 'Typed styled text'
  };

  return (
    <Text>
      <Color {...props} />
    </Text>
  );
};

render(<MyComponent />);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.