@devalok/shilp-sutra 0.27.2 → 0.28.0

package/dist/ui/dropdown-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import * as t from "react";
-import { W as f, X as b, Y as y, Z as w, _ as g, $ as v, a0 as h, a1 as x, a2 as N, a3 as M, a4 as P, a5 as _, a6 as j, a7 as G, a8 as T } from "../_chunks/primitives.js";
+import { X as f, Y as b, Z as y, _ as w, $ as g, a0 as v, a1 as h, a2 as x, a3 as N, a4 as M, a5 as P, a6 as _, a7 as j, a8 as G, a9 as T } from "../_chunks/primitives.js";
 import { IconChevronRight as z, IconCheck as A, IconCircle as L } from "@tabler/icons-react";
 import { cn as d } from "./lib/utils.js";
 import { tweens as D, springs as C } from "./lib/motion.js";
@@ -21,7 +21,7 @@ const I = t.createContext(!1), k = t.createContext(!1), U = ({
   return /* @__PURE__ */ a(I.Provider, { value: l, children: /* @__PURE__ */ a(_, { open: l, onOpenChange: p, ...r }) });
 };
 U.displayName = "DropdownMenu";
-const se = P, ae = j, oe = y, W = ({
+const se = P, ae = j, oe = y, X = ({
   open: s,
   defaultOpen: o = !1,
   onOpenChange: e,
@@ -35,8 +35,8 @@ const se = P, ae = j, oe = y, W = ({
   );
   return /* @__PURE__ */ a(k.Provider, { value: l, children: /* @__PURE__ */ a(T, { open: l, onOpenChange: p, ...r }) });
 };
-W.displayName = "DropdownMenuSub";
-const re = G, X = t.forwardRef(({ className: s, inset: o, children: e, ...r }, n) => /* @__PURE__ */ m(
+X.displayName = "DropdownMenuSub";
+const re = G, Y = t.forwardRef(({ className: s, inset: o, children: e, ...r }, n) => /* @__PURE__ */ m(
   f,
   {
     ref: n,
@@ -52,8 +52,8 @@ const re = G, X = t.forwardRef(({ className: s, inset: o, children: e, ...r }, n
     ]
   }
 ));
-X.displayName = f.displayName;
-const Y = t.forwardRef(({ className: s, children: o, ...e }, r) => {
+Y.displayName = f.displayName;
+const Z = t.forwardRef(({ className: s, children: o, ...e }, r) => {
   const n = t.useContext(k);
   return /* @__PURE__ */ a(R, { children: n && /* @__PURE__ */ a(
     b,
@@ -79,8 +79,8 @@ const Y = t.forwardRef(({ className: s, children: o, ...e }, r) => {
     }
   ) });
 });
-Y.displayName = b.displayName;
-const Z = t.forwardRef(({ className: s, sideOffset: o = 4, children: e, ...r }, n) => {
+Z.displayName = b.displayName;
+const $ = t.forwardRef(({ className: s, sideOffset: o = 4, children: e, ...r }, n) => {
   const c = t.useContext(I);
   return /* @__PURE__ */ a(R, { children: c && /* @__PURE__ */ a(y, { forceMount: !0, children: /* @__PURE__ */ a(
     w,
@@ -107,8 +107,8 @@ const Z = t.forwardRef(({ className: s, sideOffset: o = 4, children: e, ...r },
     }
   ) }) });
 });
-Z.displayName = w.displayName;
-const $ = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
+$.displayName = w.displayName;
+const q = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
   g,
   {
     ref: r,
@@ -120,8 +120,8 @@ const $ = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */
     ...e
   }
 ));
-$.displayName = g.displayName;
-const q = t.forwardRef(({ className: s, children: o, checked: e, ...r }, n) => /* @__PURE__ */ m(
+q.displayName = g.displayName;
+const B = t.forwardRef(({ className: s, children: o, checked: e, ...r }, n) => /* @__PURE__ */ m(
   v,
   {
     ref: n,
@@ -137,8 +137,8 @@ const q = t.forwardRef(({ className: s, children: o, checked: e, ...r }, n) => /
     ]
   }
 ));
-q.displayName = v.displayName;
-const B = t.forwardRef(({ className: s, children: o, ...e }, r) => /* @__PURE__ */ m(
+B.displayName = v.displayName;
+const E = t.forwardRef(({ className: s, children: o, ...e }, r) => /* @__PURE__ */ m(
   x,
   {
     ref: r,
@@ -153,8 +153,8 @@ const B = t.forwardRef(({ className: s, children: o, ...e }, r) => /* @__PURE__
     ]
   }
 ));
-B.displayName = x.displayName;
-const E = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
+E.displayName = x.displayName;
+const F = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
   N,
   {
     ref: r,
@@ -166,8 +166,8 @@ const E = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */
     ...e
   }
 ));
-E.displayName = N.displayName;
-const F = t.forwardRef(({ className: s, ...o }, e) => /* @__PURE__ */ a(
+F.displayName = N.displayName;
+const H = t.forwardRef(({ className: s, ...o }, e) => /* @__PURE__ */ a(
   M,
   {
     ref: e,
@@ -175,8 +175,8 @@ const F = t.forwardRef(({ className: s, ...o }, e) => /* @__PURE__ */ a(
     ...o
   }
 ));
-F.displayName = M.displayName;
-const H = ({
+H.displayName = M.displayName;
+const J = ({
   className: s,
   ...o
 }) => /* @__PURE__ */ a(
@@ -186,21 +186,21 @@ const H = ({
     ...o
   }
 );
-H.displayName = "DropdownMenuShortcut";
+J.displayName = "DropdownMenuShortcut";
 export {
   U as DropdownMenu,
-  q as DropdownMenuCheckboxItem,
-  Z as DropdownMenuContent,
+  B as DropdownMenuCheckboxItem,
+  $ as DropdownMenuContent,
   ae as DropdownMenuGroup,
-  $ as DropdownMenuItem,
-  E as DropdownMenuLabel,
+  q as DropdownMenuItem,
+  F as DropdownMenuLabel,
   oe as DropdownMenuPortal,
   re as DropdownMenuRadioGroup,
-  B as DropdownMenuRadioItem,
-  F as DropdownMenuSeparator,
-  H as DropdownMenuShortcut,
-  W as DropdownMenuSub,
-  Y as DropdownMenuSubContent,
-  X as DropdownMenuSubTrigger,
+  E as DropdownMenuRadioItem,
+  H as DropdownMenuSeparator,
+  J as DropdownMenuShortcut,
+  X as DropdownMenuSub,
+  Z as DropdownMenuSubContent,
+  Y as DropdownMenuSubTrigger,
   se as DropdownMenuTrigger
 };

package/dist/ui/label.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as i, jsx as d } from "react/jsx-runtime";
 import * as n from "react";
-import { ah as a } from "../_chunks/primitives.js";
+import { ai as a } from "../_chunks/primitives.js";
 import { cn as m } from "./lib/utils.js";
 const c = n.forwardRef(({ className: e, required: t, children: r, ...s }, o) => /* @__PURE__ */ i(
   a,

package/dist/ui/popover.js

@@ -1,32 +1,32 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
 import * as t from "react";
-import { P as u, d, c as v, b as P, aP as y } from "../_chunks/primitives.js";
+import { P as u, d, c as v, b as P, W as y } from "../_chunks/primitives.js";
 import { cn as g } from "./lib/utils.js";
 import { tweens as x, springs as b } from "./lib/motion.js";
 import { A as h, m as C } from "../_chunks/framer.js";
 const m = t.createContext(!1), w = ({
   open: s,
-  defaultOpen: a = !1,
+  defaultOpen: n = !1,
   onOpenChange: o,
-  ...n
+  ...a
 }) => {
-  const [c, i] = t.useState(a), r = s !== void 0, p = r ? s : c, f = t.useCallback(
+  const [c, i] = t.useState(n), r = s !== void 0, p = r ? s : c, f = t.useCallback(
     (l) => {
       r || i(l), o == null || o(l);
     },
     [r, o]
   );
-  return /* @__PURE__ */ e(m.Provider, { value: p, children: /* @__PURE__ */ e(P, { open: p, onOpenChange: f, ...n }) });
+  return /* @__PURE__ */ e(m.Provider, { value: p, children: /* @__PURE__ */ e(P, { open: p, onOpenChange: f, ...a }) });
 };
 w.displayName = "Popover";
-const k = v, z = y, A = t.forwardRef(({ className: s, align: a = "center", sideOffset: o = 4, children: n, ...c }, i) => {
+const k = v, z = y, A = t.forwardRef(({ className: s, align: n = "center", sideOffset: o = 4, children: a, ...c }, i) => {
   const r = t.useContext(m);
   return /* @__PURE__ */ e(h, { children: r && /* @__PURE__ */ e(u, { forceMount: !0, children: /* @__PURE__ */ e(
     d,
     {
       ref: i,
-      align: a,
+      align: n,
       sideOffset: o,
       forceMount: !0,
       asChild: !0,
@@ -42,7 +42,7 @@ const k = v, z = y, A = t.forwardRef(({ className: s, align: a = "center", sideO
             "z-popover w-72 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-none",
             s
           ),
-          children: n
+          children: a
         }
       )
     }

package/dist/ui/radio.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { aj as o, ak as i, al as n } from "../_chunks/primitives.js";
+import { ak as o, al as i, am as n } from "../_chunks/primitives.js";
 import { IconCircle as d } from "@tabler/icons-react";
 import * as t from "react";
 import { springs as l } from "./lib/motion.js";

package/dist/ui/select.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as o from "react";
-import { ao as c, ap as g, aq as n, ar as m, as as w, at as p, au as N, av as f, aw as u, ax as v, ay as S, az as h, aA as I, aB as R, aC as C } from "../_chunks/primitives.js";
+import { ap as c, aq as g, ar as n, as as m, at as w, au as p, av as N, aw as f, ax as u, ay as v, az as S, aA as h, aB as I, aC as R, aD as C } from "../_chunks/primitives.js";
 import { IconChevronDown as y, IconChevronUp as j, IconCheck as B } from "@tabler/icons-react";
 import { c as V } from "../_chunks/vendor-utils.js";
 import { cn as r } from "./lib/utils.js";
-import { tweens as z, springs as T } from "./lib/motion.js";
-import { m as D } from "../_chunks/framer.js";
+import { tweens as z, springs as D } from "./lib/motion.js";
+import { m as T } from "../_chunks/framer.js";
 const O = I, Q = C, W = R, U = V(
   "flex w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-raised-hover placeholder:text-surface-fg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1",
   {
@@ -67,11 +67,11 @@ const L = o.forwardRef(({ className: a, children: t, position: s = "popper", ...
     asChild: !0,
     ...d,
     children: /* @__PURE__ */ l(
-      D.div,
+      T.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
-        transition: { ...T.snappy, opacity: z.fade },
+        transition: { ...D.snappy, opacity: z.fade },
         className: r(
           "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating",
           s === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",

package/dist/ui/separator.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as g } from "react/jsx-runtime";
-import * as i from "react";
-import { ai as e } from "../_chunks/primitives.js";
-import { cn as d } from "./lib/utils.js";
-const l = i.forwardRef(
+import * as d from "react";
+import { aj as e } from "../_chunks/primitives.js";
+import { cn as i } from "./lib/utils.js";
+const l = d.forwardRef(
   ({ className: t, orientation: a = "horizontal", decorative: o = !0, variant: r = "default", ...n }, s) => /* @__PURE__ */ g(
     e,
     {
       ref: s,
       decorative: o,
       orientation: a,
-      className: d(
+      className: i(
         "shrink-0",
         r === "gradient" ? "bg-transparent bg-[image:linear-gradient(90deg,transparent,var(--color-surface-border)_15%,var(--color-surface-border)_85%,transparent)]" : r === "gradient-left" ? "bg-transparent bg-[image:linear-gradient(90deg,transparent,var(--color-surface-border)_30%)]" : r === "gradient-right" ? "bg-transparent bg-[image:linear-gradient(90deg,var(--color-surface-border)_70%,transparent)]" : "bg-surface-border",
         a === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",

package/dist/ui/sheet.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as o from "react";
-import { a9 as h, aa as R, ab as u, ac as x, ad as b, ae as y, af as P, ag as j } from "../_chunks/primitives.js";
+import { aa as h, ab as R, ac as u, ad as x, ae as b, af as y, ag as P, ah as j } from "../_chunks/primitives.js";
 import { c as T } from "../_chunks/vendor-utils.js";
 import { IconX as A } from "@tabler/icons-react";
 import { cn as a } from "./lib/utils.js";

package/dist/ui/slider.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import * as f from "react";
-import { aD as r, aE as m, aF as b, aG as u } from "../_chunks/primitives.js";
+import { aE as r, aF as m, aG as b, aH as u } from "../_chunks/primitives.js";
 import { cn as h } from "./lib/utils.js";
 const v = f.forwardRef(({ className: i, "aria-label": l, value: a, defaultValue: o, ...n }, t) => {
   const s = (a ?? o ?? [0]).length;

package/dist/ui/switch.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
 import * as a from "react";
-import { am as i, an as p } from "../_chunks/primitives.js";
+import { an as i, ao as p } from "../_chunks/primitives.js";
 import { springs as h } from "./lib/motion.js";
 import { cn as g } from "./lib/utils.js";
 import { m as v } from "../_chunks/framer.js";
-const w = a.forwardRef(({ className: n, error: d, checked: r, defaultChecked: t, onCheckedChange: e, ...c }, l) => {
-  const [m, f] = a.useState(t ?? !1), b = r !== void 0 ? r : m, u = a.useCallback(
-    (o) => {
-      r === void 0 && f(o), e == null || e(o);
+const w = a.forwardRef(({ className: n, error: d, checked: r, defaultChecked: o, onCheckedChange: e, ...c }, l) => {
+  const [f, m] = a.useState(o ?? !1), b = r !== void 0 ? r : f, u = a.useCallback(
+    (t) => {
+      r === void 0 && m(t), e == null || e(t);
     },
     [r, e]
   );
@@ -21,7 +21,7 @@ const w = a.forwardRef(({ className: n, error: d, checked: r, defaultChecked: t,
         n
       ),
       checked: r,
-      defaultChecked: t,
+      defaultChecked: o,
       onCheckedChange: u,
       ...c,
       ref: l,

package/dist/ui/toggle-group.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
 import * as e from "react";
-import { aI as i, aJ as l } from "../_chunks/primitives.js";
+import { aJ as i, aK as l } from "../_chunks/primitives.js";
 import { cn as c } from "./lib/utils.js";
 import { toggleVariants as f } from "./toggle.js";
 const p = e.createContext({

package/dist/ui/toggle.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
 import * as n from "react";
-import { aH as e } from "../_chunks/primitives.js";
+import { aI as e } from "../_chunks/primitives.js";
 import { c as d } from "../_chunks/vendor-utils.js";
 import { springs as m, motionProps as c } from "./lib/motion.js";
 import { cn as f } from "./lib/utils.js";

package/dist/ui/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as t, Fragment as y } from "react/jsx-runtime";
 import * as o from "react";
-import { aK as h, aL as p, aM as P, aN as u, aO as T } from "../_chunks/primitives.js";
+import { aL as P, aM as p, aN as h, aO as u, aP as T } from "../_chunks/primitives.js";
 import { cn as C } from "./lib/utils.js";
 import { tweens as g, springs as N } from "./lib/motion.js";
 import { A as b, m as w } from "../_chunks/framer.js";
@@ -27,14 +27,14 @@ const m = o.createContext({ open: !1 }), A = ({
   return /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(m.Provider, { value: x, children: /* @__PURE__ */ t(T, { open: s, onOpenChange: v, ...n }) }) });
 };
 A.displayName = "Tooltip";
-const K = P, R = {
+const L = h, R = {
   top: { y: 4 },
   bottom: { y: -4 },
   left: { x: 4 },
   right: { x: -4 }
 }, I = o.forwardRef(({ className: e, sideOffset: i = 4, side: r = "top", children: n, ...l }, c) => {
   const { open: a } = o.useContext(m), s = R[r] ?? {};
-  return /* @__PURE__ */ t(b, { children: a && /* @__PURE__ */ t(h, { forceMount: !0, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(b, { children: a && /* @__PURE__ */ t(P, { forceMount: !0, children: /* @__PURE__ */ t(
     p,
     {
       ref: c,
@@ -65,5 +65,5 @@ export {
   A as Tooltip,
   I as TooltipContent,
   F as TooltipProvider,
-  K as TooltipTrigger
+  L as TooltipTrigger
 };

package/docs/components/ui/color-input.md

@@ -3,30 +3,84 @@
 - Import: @devalok/shilp-sutra/ui/color-input
 - Server-safe: No
 - Category: ui
+- Dependency: react-colorful (bundled, 2.8KB gzipped)
 
 ## Props
     value: string (hex color, e.g. "#d33163")
     onChange: (value: string) => void
-    presets: string[] (optional preset color swatches)
+    presets: { hex: string; label: string }[] | string[] | false (default: 10 named colors. Pass false to hide.)
+    variant: "default" | "inline" (default: "default")
+    showPicker: boolean (default: true — set false for swatches-only mode)
+    defaultFormat: "hex" | "rgb" | "hsl" (default: "hex")
+    align: "start" | "center" | "end" (popover alignment, default: "start")
     disabled: boolean
     className: string
 
 ## Defaults
-    value="#000000", disabled=false
+    value="#000000", variant="default", showPicker=true, defaultFormat="hex", align="start", disabled=false
+
+## Variants
+
+**default** — Gradient swatch on left edge fading into surface background, hex text on right. Popover opens on click.
+
+**inline** — Entire trigger IS the selected color. Hex text overlaid with contrast-aware color (white on dark, dark on light). Great for color tags, labels, and compact UIs.
+
+## Popover Contents
+
+1. Interactive gradient picker (saturation/brightness square + hue slider)
+2. Format switcher (HEX / RGB / HSL) with animated sliding pill
+3. Format-specific input fields (all editable, auto-converting)
+4. Preset color swatches (10 named defaults, customizable)
+5. Reset/Undo footer (appears when color has changed)
 
 ## Example
 ```jsx
 <ColorInput
   value={color}
   onChange={setColor}
-  presets={['#d33163', '#2563eb', '#16a34a']}
 />
+
+// Inline variant
+<ColorInput
+  value={color}
+  onChange={setColor}
+  variant="inline"
+/>
+
+// Custom presets
+<ColorInput
+  value={color}
+  onChange={setColor}
+  presets={[
+    { hex: '#EF4444', label: 'Danger' },
+    { hex: '#10B981', label: 'Success' },
+  ]}
+/>
+
+// Swatches only (no picker)
+<ColorInput value={color} onChange={setColor} showPicker={false} />
 ```
 
 ## Gotchas
-- Uses native color picker under the hood; value must be a valid hex string
+- Value must be a 6-character hex string (e.g. "#d33163")
+- Presets accept both `string[]` (backward-compatible) and `{ hex, label }[]` (recommended for accessibility)
+- The interactive picker (react-colorful) is pointer-based — keyboard users can edit colors via the HEX/RGB/HSL format inputs
+- Multiple ColorInput instances on the same page work correctly (unique layoutId per instance)
+- Undo tracks discrete changes (preset clicks, field edits), not continuous picker drag — dragging pushes one undo entry
 
 ## Changes
+
+### v0.28.0
+- **Changed** Full redesign: replaced native `<input type="color">` with react-colorful interactive picker in a Popover
+- **Added** `variant` prop: `"default"` (gradient trigger) and `"inline"` (color-as-background trigger)
+- **Added** Multi-format input fields (HEX / RGB / HSL) with animated format switcher
+- **Added** `showPicker`, `defaultFormat`, `align` props
+- **Added** Reset/Undo functionality with footer UI
+- **Added** Framer Motion animations throughout (triggers, format swap, presets)
+- **Added** Internal state management — works both controlled and uncontrolled
+- **Changed** `presets` prop now accepts `{ hex, label }[]` or `false` in addition to `string[]`
+- **Fixed** Accessibility: label/input association, ARIA labels, input clamping
+
 ### v0.15.0
 - **Changed** `md` size font standardized to `text-ds-md` (14px) from mixed values
 

package/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.27.2
+> Version: 0.28.0
 
 ---
 
@@ -839,30 +839,84 @@ import { BarChart } from '@devalok/shilp-sutra/ui/charts'
 - Import: @devalok/shilp-sutra/ui/color-input
 - Server-safe: No
 - Category: ui
+- Dependency: react-colorful (bundled, 2.8KB gzipped)
 
 ## Props
     value: string (hex color, e.g. "#d33163")
     onChange: (value: string) => void
-    presets: string[] (optional preset color swatches)
+    presets: { hex: string; label: string }[] | string[] | false (default: 10 named colors. Pass false to hide.)
+    variant: "default" | "inline" (default: "default")
+    showPicker: boolean (default: true — set false for swatches-only mode)
+    defaultFormat: "hex" | "rgb" | "hsl" (default: "hex")
+    align: "start" | "center" | "end" (popover alignment, default: "start")
     disabled: boolean
     className: string
 
 ## Defaults
-    value="#000000", disabled=false
+    value="#000000", variant="default", showPicker=true, defaultFormat="hex", align="start", disabled=false
+
+## Variants
+
+**default** — Gradient swatch on left edge fading into surface background, hex text on right. Popover opens on click.
+
+**inline** — Entire trigger IS the selected color. Hex text overlaid with contrast-aware color (white on dark, dark on light). Great for color tags, labels, and compact UIs.
+
+## Popover Contents
+
+1. Interactive gradient picker (saturation/brightness square + hue slider)
+2. Format switcher (HEX / RGB / HSL) with animated sliding pill
+3. Format-specific input fields (all editable, auto-converting)
+4. Preset color swatches (10 named defaults, customizable)
+5. Reset/Undo footer (appears when color has changed)
 
 ## Example
 ```jsx
 <ColorInput
   value={color}
   onChange={setColor}
-  presets={['#d33163', '#2563eb', '#16a34a']}
 />
+
+// Inline variant
+<ColorInput
+  value={color}
+  onChange={setColor}
+  variant="inline"
+/>
+
+// Custom presets
+<ColorInput
+  value={color}
+  onChange={setColor}
+  presets={[
+    { hex: '#EF4444', label: 'Danger' },
+    { hex: '#10B981', label: 'Success' },
+  ]}
+/>
+
+// Swatches only (no picker)
+<ColorInput value={color} onChange={setColor} showPicker={false} />
 ```
 
 ## Gotchas
-- Uses native color picker under the hood; value must be a valid hex string
+- Value must be a 6-character hex string (e.g. "#d33163")
+- Presets accept both `string[]` (backward-compatible) and `{ hex, label }[]` (recommended for accessibility)
+- The interactive picker (react-colorful) is pointer-based — keyboard users can edit colors via the HEX/RGB/HSL format inputs
+- Multiple ColorInput instances on the same page work correctly (unique layoutId per instance)
+- Undo tracks discrete changes (preset clicks, field edits), not continuous picker drag — dragging pushes one undo entry
 
 ## Changes
+
+### v0.28.0
+- **Changed** Full redesign: replaced native `<input type="color">` with react-colorful interactive picker in a Popover
+- **Added** `variant` prop: `"default"` (gradient trigger) and `"inline"` (color-as-background trigger)
+- **Added** Multi-format input fields (HEX / RGB / HSL) with animated format switcher
+- **Added** `showPicker`, `defaultFormat`, `align` props
+- **Added** Reset/Undo functionality with footer UI
+- **Added** Framer Motion animations throughout (triggers, format swap, presets)
+- **Added** Internal state management — works both controlled and uncontrolled
+- **Changed** `presets` prop now accepts `{ hex, label }[]` or `false` in addition to `string[]`
+- **Fixed** Accessibility: label/input association, ARIA labels, input clamping
+
 ### v0.15.0
 - **Changed** `md` size font standardized to `text-ds-md` (14px) from mixed values
 

package/llms.txt

@@ -308,7 +308,7 @@ Components with two-axis system: Button, Badge, Alert, Chip, Banner, Progress, S
 - SearchInput: size(xs|sm|md|lg) + loading, onClear
 - NumberInput: value + onValueChange, min, max, step (controlled only)
 - Textarea: size(xs|sm|md|lg) state(default|error|warning|success)
-- ColorInput: value(hex string) onChange(value) presets(string[]) disabled
+- ColorInput: value(hex string) onChange(value) presets({hex,label}[]|string[]|false, default: 10 named colors) variant('default'|'inline') showPicker(boolean, default:true) defaultFormat('hex'|'rgb'|'hsl') align('start'|'center'|'end') disabled. Popover trigger opens interactive picker (react-colorful) + format switcher + preset swatches + undo/reset. Inline variant renders entire trigger as the color with contrast-aware text.
 - Checkbox: checked, onCheckedChange, error(boolean), indeterminate(boolean)
 - Switch: checked, onCheckedChange, error(boolean)
 - RadioGroup > RadioGroupItem(value)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.27.2",
+  "version": "0.28.0",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -804,6 +804,7 @@
     "esbuild": "^0.27.4",
     "framer-motion": "^12.36.0",
     "input-otp": "^1.4.2",
+    "react-colorful": "^5.6.1",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
     "react-remove-scroll": "^2.6.3",