## Feature Examples

### Colors
- description: Specify a list of colors to show as swatches. Accepts HEX, RGB, HSL and string values.
- example:
```jsx
<StorybookComponents.Stack>
  <Swatches
    colors={[
      '#3370fb',
      '#17b0e2',
      '#c53e99',
      'rgb(200,250,0)',
      'hsl(10,100%,50%)',
      'teal',
    ]}
  />
</StorybookComponents.Stack>;
```

### Columns
- description: Define the number of columns in a single row with the \`columns\` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    6 columns:
    <Swatches
      columns={6}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    3 columns:
    <Swatches
      columns={3}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Gap
- description: Define the gap between color swatches using the \`gap\` prop. It supports pixel units.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    12px gap:
    <Swatches
      gap={12}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    24px gap:
    <Swatches
      gap={24}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Clear color
- description: Allows user to select a 'Clear color' option. This option is added as a first item on the list using the \`showClear\` prop. Provide an explanatory message with the \`showClearMessage\` prop.
- example:
```jsx
<StorybookComponents.Stack>
  <Swatches
    showClear
    showClearMessage="Clear color"
    colors={[
      '#3370fb',
      '#7852d2',
      '#17b0e2',
      '#c53e99',
      '#fdb10c',
      '#3d9fa1',
      '#2bc759',
      '#ff0165',
    ]}
  />
</StorybookComponents.Stack>;
```

### Add button
- description: Add a new color swatch using the:\ - \`showAddButton\` - specify whether to add button is visible\ - \`addButtonIconSize\` - control the plus icon size within the button\ - \`showAddButtonMessage\` - show action description in a tooltip\ - \`onAdd\` - calls assigned function\ - \`popoverProps\` - control the color picker popover by passing props
- example:
```jsx
<StorybookComponents.Stack>
  <Swatches
    showAddButton
    addButtonIconSize="small"
    addButtonMessage="Message explaining add action"
    onAdd={() => {}}
    colors={['#3370fb', '#7852d2', '#17b0e2', '#c53e99', '#fdb10c']}
  />
</StorybookComponents.Stack>;
```

### ColorPicker customization
- description: Customize the ColorPicker by using \`renderColorPicker\` prop. This render prop provides full control over the color picker UI. Use it to configure the default ColorPicker with custom props like \`showInput\` and \`showConverter\`.
- example:
```jsx
<StorybookComponents.Stack>
  <Swatches
    showAddButton
    addButtonIconSize="small"
    addButtonMessage="Add color with input"
    renderColorPicker={({ cancel, confirm, setColor, currentColor }) => (
      <ColorPicker
        value={currentColor}
        showInput={true}
        showConverter={true}
        onCancel={cancel}
        onConfirm={confirm}
        onChange={setColor}
      />
    )}
    onAdd={() => {}}
    colors={['#3370fb', '#7852d2', '#17b0e2', '#c53e99', '#fdb10c']}
  />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Inside Color Picker
- description: Use swatches in composer panels to let users create color palettes for their product.
- example:
```jsx
() => {
  const [value, setValue] = React.useState(null);
  const [colors, setColors] = React.useState([
    '#3370fb',
    '#7852d2',
    '#17b0e2',
    '#c53e99',
    '#fdb10c',
    '#3d9fa1',
    '#2bc759',
    '#ff0165',
  ]);

  return (
    <FormField label="Fill">
      <Box>
        <Swatches
          showAddButton
          addButtonIconSize="small"
          addButtonMessage="Add color"
          onAdd={(color) => setColors([...colors, color])}
          showClear
          showClearMessage="Clear color"
          colors={colors}
          onClick={setValue}
          selected={value}
        />
      </Box>
    </FormField>
  );
};
```