feat(color-picker): 🎨 add color picker component and integrate with forms

apps/api/src/locales/@vitnode/core/en.json

@@ -103,6 +103,7 @@
       "select_option": "Select an option",
       "select_options": "Select options",
       "select_language": "Select language",
+      "pick_color": "Pick a color",
       "go_to_prev_page": "Go to previous page",
       "go_to_next_page": "Go to next page",
       "errors": {

apps/docs/content/docs/ui/color.mdx

@@ -0,0 +1,97 @@
+---
+title: Color
+description: Color picker field built on react-colorful that outputs an HSL string.
+---
+
+## Preview
+
+<Preview name="color" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+```ts
+import { z } from "zod";
+import { AutoForm } from "@vitnode/core/components/form/auto-form";
+import { AutoFormColor } from "@vitnode/core/components/form/fields/color";
+```
+
+```ts
+const formSchema = z.object({
+  color: z.string().default("hsl(240, 80%, 60%)"),
+});
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: "color",
+      component: props => <AutoFormColor {...props} label="Color" />,
+    },
+  ]}
+/>
+```
+
+  </Tab>
+
+  <Tab value="Manual">
+```ts
+import { ColorPicker } from "@vitnode/core/components/ui/color-picker";
+```
+
+The `ColorPicker` is controlled - pass the current `value` (an HSL string) and
+handle `onChange`, which receives the new HSL string:
+
+```tsx
+const [color, setColor] = useState("hsl(240, 80%, 60%)");
+
+<ColorPicker value={color} onChange={setColor} />;
+```
+
+  </Tab>
+</Tabs>
+
+<Callout type="info" title="Output format">
+  Dragging the picker produces an HSL string such as `hsl(240, 80%, 60%)`. Below
+  the picker is a text field where you can paste or type a color in any CSS
+  format - hex (`#22c55e`), `rgb(...)`, `hsl(...)`, or a named color - so the
+  stored value is whatever you enter. The picker is powered by
+  [react-colorful](https://github.com/omgovich/react-colorful) and is
+  lazy-loaded, so its bundle only ships once the popover is opened.
+</Callout>
+
+## Props
+
+import { TypeTable } from "fumadocs-ui/components/type-table";
+
+<TypeTable
+  type={{
+    label: {
+      description: "The label displayed above the field.",
+      type: "string",
+      default: "",
+    },
+    description: {
+      description: "A short description displayed below the field.",
+      type: "string",
+      default: "",
+    },
+    placeholder: {
+      description:
+        "Text shown on the trigger button when no color is selected.",
+      type: "string",
+      default: "",
+    },
+    allowRemoveColor: {
+      description:
+        "Show a 'Remove' button in the picker to clear the value back to an empty string.",
+      type: "boolean",
+      default: "false",
+    },
+  }}
+/>

apps/docs/content/docs/ui/meta.json

@@ -15,6 +15,7 @@
     "---Forms---",
     "auto-form",
     "checkbox",
+    "color",
     "combobox",
     "editor",
     "input",

apps/docs/migrations/0009_modern_eternals.sql

@@ -0,0 +1 @@
+ALTER TABLE "core_roles" ALTER COLUMN "color" SET DATA TYPE varchar(50);