# ColorPicker

A UI component for selecting colors from a palette, with options for custom input and recent selections.

### **Import**
```tsx
import { ColorPicker } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { ColorPicker } from '../ColorPicker';

export const DefaultColorPicker = () => (
  <ColorPicker
    label="Choose a color"
    placeholder="Select a color"
    onChange={(color) => console.log('Selected color:', color)}
  />
);
```

### **Controlled**

```tsx
import React, { useState } from 'react';
import { Vertical, Horizontal } from 'app-studio';
import { ColorPicker } from '../ColorPicker';
import { Button } from '../../Button/Button';
import { Text } from 'app-studio';

export const ControlledColorPicker = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedColor, setSelectedColor] = useState('color-purple-500');

  return (
    <Vertical gap={16}>
      <Text fontWeight="bold">Controlled ColorPicker</Text>

      <ColorPicker
        label="Controlled Color Picker"
        value={selectedColor}
        isOpen={isOpen}
        onChange={setSelectedColor}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        closeOnSelect={false}
        placeholder="Controlled picker"
      />

      <Horizontal gap={8}>
        <Button variant="outline" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? 'Close' : 'Open'} Picker
        </Button>

        <Button
          variant="outline"
          onClick={() => setSelectedColor('color-red-500')}
        >
          Set Red
        </Button>

        <Button
          variant="outline"
          onClick={() => setSelectedColor('color-green-500')}
        >
          Set Green
        </Button>
      </Horizontal>

      <Text fontSize="14px" color="color-gray-600">
        Selected color: {selectedColor}
      </Text>
    </Vertical>
  );
};
```

### **CustomColors**

```tsx
import React from 'react';
import { ColorPicker } from '../ColorPicker';

export const CustomColorsColorPicker = () => (
  <ColorPicker
    label="Custom color palette"
    predefinedColors={[
      { name: 'Brand Primary', value: '#3B82F6', category: 'brand' },
      { name: 'Brand Secondary', value: '#8B5CF6', category: 'brand' },
      { name: 'Success', value: '#10B981', category: 'status' },
      { name: 'Warning', value: '#F59E0B', category: 'status' },
      { name: 'Error', value: '#EF4444', category: 'status' },
      { name: 'Info', value: '#06B6D4', category: 'status' },
    ]}
    showCustomInput={true}
    showRecentColors={true}
    placeholder="Choose from custom palette"
    onChange={(color) => console.log('Selected custom color:', color)}
  />
);
```

### **FormIntegration**

```tsx
import React, { useState } from 'react';
import { Vertical, Horizontal } from 'app-studio';
import { ColorPicker } from '../ColorPicker';
import { Button } from '../../Button/Button';
import { Text } from 'app-studio';

export const FormIntegrationColorPicker = () => {
  const [backgroundColor, setBackgroundColor] = useState('color-blue-500');
  const [textColor, setTextColor] = useState('color-white');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert(`Background: ${backgroundColor}, Text: ${textColor}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={16} width="300px">
        <ColorPicker
          label="Background Color"
          value={backgroundColor}
          onChange={setBackgroundColor}
          helperText="Choose the background color for your theme"
        />

        <ColorPicker
          label="Text Color"
          value={textColor}
          onChange={setTextColor}
          helperText="Choose the text color for your theme"
        />

        {/* Preview */}
        <Vertical
          gap={8}
          padding="16px"
          borderRadius="8px"
          backgroundColor={backgroundColor}
          color={textColor}
        >
          <Text fontWeight="bold">Preview</Text>
          <Text>This is how your theme will look</Text>
        </Vertical>

        <Horizontal gap={8}>
          <Button type="submit" variant="filled">
            Apply Theme
          </Button>
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              setBackgroundColor('color-blue-500');
              setTextColor('color-white');
            }}
          >
            Reset
          </Button>
        </Horizontal>
      </Vertical>
    </form>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './variants';
export * from './sizes';
export * from './shapes';
export * from './customColors';
export * from './formIntegration';
export * from './controlled';
```

### **Shapes**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { ColorPicker } from '../ColorPicker';

export const ColorPickerShapes = () => (
  <Vertical gap={16}>
    <ColorPicker
      label="Default shape"
      shape="default"
      placeholder="Default corners"
    />
    <ColorPicker
      label="square shape"
      shape="square"
      placeholder="square corners"
    />
    <ColorPicker
      label="Rounded shape"
      shape="rounded"
      placeholder="Rounded corners"
    />
    <ColorPicker label="Pill shaped" shape="pill" placeholder="Pill shaped" />
  </Vertical>
);
```

### **Sizes**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { ColorPicker } from '../ColorPicker';

export const ColorPickerSizes = () => (
  <Vertical gap={16}>
    <ColorPicker label="Extra small" size="xs" placeholder="XS size" />
    <ColorPicker label="Small" size="sm" placeholder="SM size" />
    <ColorPicker label="Medium" size="md" placeholder="MD size" />
    <ColorPicker label="Large" size="lg" placeholder="LG size" />
    <ColorPicker label="Extra large" size="xl" placeholder="XL size" />
  </Vertical>
);
```

### **Variants**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { ColorPicker } from '../ColorPicker';

export const ColorPickerVariants = () => (
  <Vertical gap={16}>
    <ColorPicker
      label="Default variant"
      variant="default"
      placeholder="Default style"
    />
    <ColorPicker
      label="Outline variant"
      variant="outline"
      placeholder="Outline style"
    />
    <ColorPicker
      label="Filled variant"
      variant="filled"
      placeholder="Filled style"
    />
  </Vertical>
);
```