feat(components): add ColorPicker component

apps/v4/content/docs/components/base/color-picker.mdx

@@ -0,0 +1,94 @@
+---
+title: Color Picker
+description: A hue-and-shade color picker built on react-color-strip.
+base: base
+component: true
+links:
+  doc: https://www.npmjs.com/package/react-color-strip
+  api: https://github.com/aviralj02/react-color-strip#readme
+---
+
+<ComponentPreview styleName="base-nova" name="color-picker" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add color-picker
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-color-strip
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="color-picker"
+  title="components/ui/color-picker.tsx"
+  styleName="base-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { ColorPicker } from "@/components/ui/color-picker"
+```
+
+```tsx showLineNumbers
+const [color, setColor] = React.useState("#ef4444")
+
+return (
+  <ColorPicker
+    value={color}
+    onChange={setColor}
+    showShade
+    className="w-64"
+  />
+)
+```
+
+## Props
+
+| Prop               | Type                      | Default     | Description                               |
+| ------------------ | ------------------------- | ----------- | ----------------------------------------- |
+| `value`            | `string`                  | —           | Controlled hex color value.               |
+| `defaultValue`     | `string`                  | `"#ef4444"` | Initial color for uncontrolled usage.     |
+| `onChange`         | `(value: string) => void` | —           | Fires on every drag move.                 |
+| `onChangeComplete` | `(value: string) => void` | —           | Fires on pointer release.                 |
+| `showShade`        | `boolean`                 | `false`     | Show the shade strip below the hue strip. |
+| `disabled`         | `boolean`                 | `false`     | Disables all interaction.                 |
+| `className`        | `string`                  | —           | Additional class names on the wrapper.    |
+
+## About
+
+The `ColorPicker` component is built on top of [react-color-strip](https://www.npmjs.com/package/react-color-strip). It renders two strips — a hue selector and an optional shade strip (enabled via `showShade`).
+
+The component is **fully controlled or uncontrolled**. Pass `value` + `onChange` for controlled usage, or just `defaultValue` for uncontrolled.
+
+## API Reference
+
+See the [react-color-strip](https://github.com/aviralj02/react-color-strip#readme) documentation for the underlying strip primitives and pointer customization options.

apps/v4/content/docs/components/base/meta.json

@@ -16,6 +16,7 @@
     "chart",
     "checkbox",
     "collapsible",
+    "color-picker",
     "combobox",
     "command",
     "context-menu",

apps/v4/content/docs/components/radix/color-picker.mdx

@@ -0,0 +1,94 @@
+---
+title: Color Picker
+description: A hue-and-shade color picker built on react-color-strip.
+base: radix
+component: true
+links:
+  doc: https://www.npmjs.com/package/react-color-strip
+  api: https://github.com/aviralj02/react-color-strip#readme
+---
+
+<ComponentPreview styleName="radix-nova" name="color-picker" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add color-picker
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-color-strip
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="color-picker"
+  title="components/ui/color-picker.tsx"
+  styleName="radix-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { ColorPicker } from "@/components/ui/color-picker"
+```
+
+```tsx showLineNumbers
+const [color, setColor] = React.useState("#ef4444")
+
+return (
+  <ColorPicker
+    value={color}
+    onChange={setColor}
+    showShade
+    className="w-64"
+  />
+)
+```
+
+## Props
+
+| Prop               | Type                      | Default     | Description                               |
+| ------------------ | ------------------------- | ----------- | ----------------------------------------- |
+| `value`            | `string`                  | —           | Controlled hex color value.               |
+| `defaultValue`     | `string`                  | `"#ef4444"` | Initial color for uncontrolled usage.     |
+| `onChange`         | `(value: string) => void` | —           | Fires on every drag move.                 |
+| `onChangeComplete` | `(value: string) => void` | —           | Fires on pointer release.                 |
+| `showShade`        | `boolean`                 | `false`     | Show the shade strip below the hue strip. |
+| `disabled`         | `boolean`                 | `false`     | Disables all interaction.                 |
+| `className`        | `string`                  | —           | Additional class names on the wrapper.    |
+
+## About
+
+The `ColorPicker` component is built on top of [react-color-strip](https://www.npmjs.com/package/react-color-strip). It renders two strips — a hue selector and an optional shade strip (enabled via `showShade`).
+
+The component is **fully controlled or uncontrolled**. Pass `value` + `onChange` for controlled usage, or just `defaultValue` for uncontrolled.
+
+## API Reference
+
+See the [react-color-strip](https://github.com/aviralj02/react-color-strip#readme) documentation for the underlying strip primitives and pointer customization options.

apps/v4/content/docs/components/radix/meta.json

@@ -16,6 +16,7 @@
     "chart",
     "checkbox",
     "collapsible",
+    "color-picker",
     "combobox",
     "command",
     "context-menu",

apps/v4/examples/__index__.tsx

@@ -1552,6 +1552,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "color-picker": {
+      name: "color-picker",
+      filePath: "examples/radix/color-picker.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/color-picker")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "color-picker"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-auto-highlight": {
       name: "combobox-auto-highlight",
       filePath: "examples/radix/combobox-auto-highlight.tsx",
@@ -7183,6 +7196,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "color-picker": {
+      name: "color-picker",
+      filePath: "examples/base/color-picker.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/color-picker")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "color-picker"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-auto-highlight": {
       name: "combobox-auto-highlight",
       filePath: "examples/base/combobox-auto-highlight.tsx",

apps/v4/examples/base/color-picker.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useState } from "react"
+
+import { ColorPicker } from "@/styles/base-nova/ui/color-picker"
+
+export function ColorPickerDemo() {
+  const [color, setColor] = useState("#ef4444")
+
+  return (
+    <div className="flex w-full max-w-xs flex-col items-center gap-6">
+      <ColorPicker value={color} onChange={setColor} showShade />
+      <div className="flex items-center gap-3">
+        <div
+          className="h-8 w-8 rounded-full border border-border shadow-sm transition-colors"
+          style={{ backgroundColor: color }}
+        />
+        <span className="font-mono text-sm text-muted-foreground">{color}</span>
+      </div>
+    </div>
+  )
+}

apps/v4/examples/radix/color-picker.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useState } from "react"
+
+import { ColorPicker } from "@/styles/radix-nova/ui/color-picker"
+
+export function ColorPickerDemo() {
+  const [color, setColor] = useState("#ef4444")
+
+  return (
+    <div className="flex w-full max-w-xs flex-col items-center gap-6">
+      <ColorPicker value={color} onChange={setColor} showShade />
+      <div className="flex items-center gap-3">
+        <div
+          className="h-8 w-8 rounded-full border border-border shadow-sm transition-colors"
+          style={{ backgroundColor: color }}
+        />
+        <span className="font-mono text-sm text-muted-foreground">{color}</span>
+      </div>
+    </div>
+  )
+}

apps/v4/package.json

@@ -66,6 +66,7 @@
     "postcss": "^8.5.1",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
+    "react-color-strip": "^2.0.1",
     "react-day-picker": "^9.7.0",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.62.0",

apps/v4/registry/__index__.tsx

@@ -380,6 +380,31 @@ export const Index: Record<string, Record<string, any>> = {
       categories: undefined,
       meta: undefined,
     },
+    "color-picker": {
+      name: "color-picker",
+      title: "undefined",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [
+        {
+          path: "registry/new-york-v4/ui/color-picker.tsx",
+          type: "registry:ui",
+          target: "",
+        },
+      ],
+      component: React.lazy(async () => {
+        const mod = await import("@/registry/new-york-v4/ui/color-picker")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "color-picker"
+        return { default: mod.default || mod[exportName] }
+      }),
+      categories: undefined,
+      meta: undefined,
+    },
     combobox: {
       name: "combobox",
       title: "undefined",