feat: ColorPicker component (#486)

* wip: color picker

* wip: color picker update defaultvalue

* feat: colorpicker component

* feat: color-picker doc

Author: rohanchkrabrty

apps/www/package.json

@@ -37,4 +37,4 @@
     "eslint-config-next": "14",
     "typescript": "^5.7.3"
   }
-}
+}

apps/www/src/components/demo/demo.tsx

@@ -6,6 +6,7 @@ import NextLink from 'next/link';
 import { Suspense } from 'react';
 import DataTableDemo from '../datatable-demo';
 import LinearDropdownDemo from '../linear-dropdown-demo';
+import PopoverColorPicker from '../popover-color-picker';
 import DemoPlayground from './demo-playground';
 import DemoPreview from './demo-preview';
 import { DemoProps } from './types';
@@ -17,6 +18,7 @@ export default function Demo(props: DemoProps) {
       ...Apsara,
       DataTableDemo,
       LinearDropdownDemo,
+      PopoverColorPicker,
       Info,
       X,
       Home,

apps/www/src/components/popover-color-picker.tsx

@@ -0,0 +1,39 @@
+import { Button, Flex, Popover } from '@raystack/apsara';
+import { ColorPicker } from '@raystack/apsara';
+import { useState } from 'react';
+
+export default function PopoverColorPicker() {
+  const [color, setColor] = useState('#DA2929');
+
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          style={{
+            width: 60,
+            height: 60,
+            background: color
+          }}
+        />
+      </Popover.Trigger>
+      <Popover.Content>
+        <ColorPicker
+          value={color}
+          onValueChange={setColor}
+          style={{
+            width: '100%',
+            height: '320px'
+          }}
+        >
+          <ColorPicker.Area />
+          <ColorPicker.Hue />
+          <ColorPicker.Alpha />
+          <Flex direction='row' gap={2}>
+            <ColorPicker.Mode />
+            <ColorPicker.Input />
+          </Flex>
+        </ColorPicker>
+      </Popover.Content>
+    </Popover>
+  );
+}

apps/www/src/content/docs/components/color-picker/demo.ts

@@ -0,0 +1,83 @@
+'use client';
+
+export const preview = {
+  type: 'code',
+  code: `<ColorPicker
+defaultValue='#DA2929'
+style={{
+  width: '240px',
+  height: '320px',
+  padding: 20,
+  background: 'white'
+}}
+>
+<ColorPicker.Area />
+<ColorPicker.Hue />
+<ColorPicker.Alpha />
+<Flex direction="row" gap={2}>
+  <ColorPicker.Mode />
+  <ColorPicker.Input />
+</Flex>
+</ColorPicker>`
+};
+
+export const basicDemo = {
+  type: 'code',
+  code: `
+<ColorPicker defaultValue="#00bcd4" style={{
+  width: '240px',
+  height: '220px',
+  padding: 20,
+  background: 'white'
+}}>
+  <ColorPicker.Area/>
+  <ColorPicker.Hue />
+</ColorPicker>
+`
+};
+
+export const popoverDemo = {
+  type: 'code',
+  previewCode: false,
+  code: `<PopoverColorPicker />`,
+  codePreview: [
+    {
+      label: 'index.tsx',
+      code: `function PopoverColorPicker() {
+  const [color, setColor] = useState('#DA2929');
+
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          style={{
+            width: 60,
+            height: 60,
+            background: color
+          }}
+        />
+      </Popover.Trigger>
+      <Popover.Content>
+        <ColorPicker
+          value={color}
+          onValueChange={setColor}
+          style={{
+            width: '100%',
+            height: '320px'
+          }}
+        >
+          <ColorPicker.Area />
+          <ColorPicker.Hue />
+          <ColorPicker.Alpha />
+          <Flex direction='row' gap={2}>
+            <ColorPicker.Mode />
+            <ColorPicker.Input />
+          </Flex>
+        </ColorPicker>
+      </Popover.Content>
+    </Popover>
+  );
+}`
+    }
+  ]
+};

apps/www/src/content/docs/components/color-picker/index.mdx

@@ -0,0 +1,83 @@
+---
+title: Color Picker
+description: A composable color picker component supporting multiple color models, alpha channel, and customizable UI.
+tag: new
+---
+
+import {
+  preview,
+  basicDemo,
+  popoverDemo,
+} from "./demo.ts";
+
+<Demo data={preview} />
+
+## Overview
+
+The `ColorPicker` component offers a flexible and composable solution for selecting colors in various formats, including HEX, RGB, and HSL. It supports optional alpha channel (transparency) and is designed for easy integration and customization within your application.
+
+## Getting Started
+
+To use the `ColorPicker`, import it from `@raystack/apsara` and compose its subcomponents as needed. Below is a basic example:
+
+```tsx
+import { ColorPicker } from "@raystack/apsara";
+
+<ColorPicker
+  defaultValue="#DA2929"
+  style={{
+    width: '240px',
+    height: '320px',
+    padding: 20,
+    background: 'white'
+  }}
+>
+  <ColorPicker.Area />
+  <ColorPicker.Hue />
+  <ColorPicker.Alpha />
+  <Flex direction="row" gap={2}>
+    <ColorPicker.Mode />
+    <ColorPicker.Input />
+  </Flex>
+</ColorPicker>
+```
+
+## ColorPicker Props
+
+The `ColorPicker` is composed of several subcomponents, each responsible for a specific aspect of color selection. The root component acts as a data provider for its children.
+
+<auto-type-table path="./props.ts" name="ColorPickerProps" />
+
+### ColorPicker.Area
+
+Enables users to select a color from a palette. Typically used for choosing saturation and brightness.
+
+### ColorPicker.Hue
+
+Provides a slider for selecting the hue value of the color.
+
+### ColorPicker.Alpha
+
+Provides a slider for selecting the alpha value of the color.
+
+### ColorPicker.Mode
+
+Lets users switch between different color models (e.g., HEX, RGB, HSL) via a dropdown menu.
+
+<auto-type-table path="./props.ts" name="ColorPickerModeProps" />
+
+### ColorPicker.Input
+
+Displays the current color value in the selected color model and allows direct text input.
+
+## Examples
+
+### Basic Usage
+
+<Demo data={basicDemo} />
+
+### Popover Integration
+
+The `ColorPicker` can be embedded within a `Popover` component to create a more interactive and space-efficient color selection experience.
+
+<Demo data={popoverDemo} />

apps/www/src/content/docs/components/color-picker/props.ts

@@ -0,0 +1,42 @@
+/**
+ * Props for the root ColorPicker component.
+ */
+export interface ColorPickerProps {
+  /**
+   * The controlled color value. Accepts hex, rgb, hsl, etc.
+   */
+  value?: string;
+  /**
+   * The default color value.
+   * @default '#ffffff'
+   */
+  defaultValue?: string;
+  /**
+   * Callback fired when the color value changes.
+   */
+  onValueChange?: (value: string, mode: string) => void;
+  /**
+   * The initial color mode (hex, rgb, hsl).
+   * @default 'hex'
+   */
+  defaultMode?: 'hex' | 'rgb' | 'hsl';
+  /**
+   * The controlled color mode.
+   */
+  mode?: 'hex' | 'rgb' | 'hsl';
+  /**
+   * Callback fired when the color mode changes.
+   */
+  onModeChange?: (mode: string) => void;
+}
+
+/**
+ * Props for the ColorPicker.Mode subcomponent.
+ */
+export interface ColorPickerModeProps {
+  /**
+   * Supported color modes for the picker.
+   * @default ['hex', 'rgb', 'hsl']
+   */
+  options?: Array<'hex' | 'rgb' | 'hsl'>;
+}

packages/raystack/components/color-picker/color-picker-alpha.tsx

@@ -0,0 +1,30 @@
+import { cx } from 'class-variance-authority';
+import { Slider } from 'radix-ui';
+import { type ComponentProps } from 'react';
+import { useColorPicker } from './color-picker-root';
+import styles from './color-picker.module.css';
+
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerAlpha = ({
+  className,
+  ...props
+}: ColorPickerAlphaProps) => {
+  const { alpha = 1, setColor } = useColorPicker();
+  return (
+    <Slider.Root
+      className={cx(styles.sliderRoot, className)}
+      max={100}
+      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}
+      step={1}
+      value={[alpha * 100]}
+      {...props}
+    >
+      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>
+        <div className={styles.alphaTrackGradient} />
+        <Slider.Range className={styles.sliderRange} />
+      </Slider.Track>
+      <Slider.Thumb className={styles.sliderThumb} />
+    </Slider.Root>
+  );
+};