@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/Card/CardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardActions.js","sources":["../../../../../src/ui/components/Card/CardActions.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface CardActionsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * CardActions — wrapper that hosts consumer-supplied action buttons\n * within a `Card.Header`.\n *\n * The `data-card-actions` attribute is the structural marker `CardHeader`\n * uses (via Tailwind v4 `:has()` selectors) to switch its grid layout\n * from a single column to `[1fr auto]` when actions are present, so\n * Title/Subtitle stack in column 1 and the action row spans both rows\n * in column 2. Consumers should not override this attribute.\n *\n * This component is presentational: it emits no handlers on the DOM\n * itself. The action elements (typically `<Button>`) are consumer-supplied\n * and React's RSC boundary keeps them as client references — the\n * wrapper stays server-safe.\n */\nexport function CardActions({\n  children,\n  className,\n  ...props\n}: CardActionsProps) {\n  return (\n    <div\n      data-card-actions=\"\"\n      className={cn(\n        \"flex items-center self-start\",\n        getSpacingClass(\"sm\", \"gap\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default CardActions;\n"],"names":["CardActions","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","cn","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAASA,EAAYC,GAIP;AAJO,MAAAC,IAAAD,GAC1B;AAAA,cAAAE;AAAA,IACA,WAAAC;AAAA,MAF0BF,GAGvBG,IAAAC,EAHuBJ,GAGvB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,qBAAkB;AAAA,MAClB,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,MAAM,KAAK;AAAA,QAC3BP;AAAA,MAAA;AAAA,OAEEC,IAPL;AAAA,MASE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Card/CardBody.js

@@ -0,0 +1,32 @@
+"use client";
+var p = Object.defineProperty, u = Object.defineProperties;
+var l = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+var n = (r, o, t) => o in r ? p(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, a = (r, o) => {
+  for (var t in o || (o = {}))
+    c.call(o, t) && n(r, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      s.call(o, t) && n(r, t, o[t]);
+  return r;
+}, d = (r, o) => u(r, l(o));
+var f = (r, o) => {
+  var t = {};
+  for (var e in r)
+    c.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && i)
+    for (var e of i(r))
+      o.indexOf(e) < 0 && s.call(r, e) && (t[e] = r[e]);
+  return t;
+};
+import { jsx as x } from "react/jsx-runtime";
+import { cn as j } from "../../utils/cn.js";
+function C(e) {
+  var m = e, { children: r, className: o } = m, t = f(m, ["children", "className"]);
+  return /* @__PURE__ */ x("div", d(a({ className: j(o) }, t), { children: r }));
+}
+export {
+  C as CardBody
+};
+//# sourceMappingURL=CardBody.js.map

package/dist/granular/ui/components/Card/CardBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardBody.js","sources":["../../../../../src/ui/components/Card/CardBody.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function CardBody({ children, className, ...props }: CardBodyProps) {\n  return (\n    <div className={cn(className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport default CardBody;\n"],"names":["CardBody","_a","_b","children","className","props","__objRest","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOO,SAASA,EAASC,GAAkD;AAAlD,MAAAC,IAAAD,GAAE,YAAAE,GAAU,WAAAC,MAAZF,GAA0BG,IAAAC,EAA1BJ,GAA0B,CAAxB,YAAU;AACnC,SACE,gBAAAK,EAAC,aAAI,WAAWC,EAAGJ,CAAS,KAAOC,MAChC,UAAAF,IACH;AAEJ;"}

package/dist/granular/ui/components/Card/CardHeader.js

@@ -0,0 +1,47 @@
+"use client";
+var l = Object.defineProperty, g = Object.defineProperties;
+var u = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, e = Object.prototype.propertyIsEnumerable;
+var c = (a, r, t) => r in a ? l(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t, n = (a, r) => {
+  for (var t in r || (r = {}))
+    d.call(r, t) && c(a, t, r[t]);
+  if (o)
+    for (var t of o(r))
+      e.call(r, t) && c(a, t, r[t]);
+  return a;
+}, m = (a, r) => g(a, u(r));
+var p = (a, r) => {
+  var t = {};
+  for (var s in a)
+    d.call(a, s) && r.indexOf(s) < 0 && (t[s] = a[s]);
+  if (a != null && o)
+    for (var s of o(a))
+      r.indexOf(s) < 0 && e.call(a, s) && (t[s] = a[s]);
+  return t;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { getSpacingClass as f } from "../../tokens/spacing.js";
+import { cn as h } from "../../utils/cn.js";
+function w(s) {
+  var i = s, { children: a, className: r } = i, t = p(i, ["children", "className"]);
+  return /* @__PURE__ */ b(
+    "div",
+    m(n({
+      className: h(
+        "grid items-start",
+        f("1.5", "gap"),
+        f("base", "mb"),
+        "[&:has([data-card-actions])]:grid-cols-[1fr_auto]",
+        "[&:has([data-card-actions])>[data-card-actions]]:row-span-full",
+        r
+      )
+    }, t), {
+      children: a
+    })
+  );
+}
+export {
+  w as CardHeader
+};
+//# sourceMappingURL=CardHeader.js.map

package/dist/granular/ui/components/Card/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sources":["../../../../../src/ui/components/Card/CardHeader.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function CardHeader({ children, className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"grid items-start\",\n        getSpacingClass(\"1.5\", \"gap\"),\n        getSpacingClass(\"base\", \"mb\"),\n        \"[&:has([data-card-actions])]:grid-cols-[1fr_auto]\",\n        \"[&:has([data-card-actions])>[data-card-actions]]:row-span-full\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default CardHeader;\n"],"names":["CardHeader","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","cn","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAASA,EAAWC,GAAoD;AAApD,MAAAC,IAAAD,GAAE,YAAAE,GAAU,WAAAC,MAAZF,GAA0BG,IAAAC,EAA1BJ,GAA0B,CAAxB,YAAU;AACrC,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,OAAO,KAAK;AAAA,QAC5BA,EAAgB,QAAQ,IAAI;AAAA,QAC5B;AAAA,QACA;AAAA,QACAP;AAAA,MAAA;AAAA,OAEEC,IATL;AAAA,MAWE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Card/CardSubtitle.js

@@ -0,0 +1,38 @@
+"use client";
+var u = Object.defineProperty, x = Object.defineProperties;
+var l = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, i = Object.prototype.propertyIsEnumerable;
+var s = (t, e, r) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, a = (t, e) => {
+  for (var r in e || (e = {}))
+    c.call(e, r) && s(t, r, e[r]);
+  if (m)
+    for (var r of m(e))
+      i.call(e, r) && s(t, r, e[r]);
+  return t;
+}, f = (t, e) => x(t, l(e));
+var p = (t, e) => {
+  var r = {};
+  for (var o in t)
+    c.call(t, o) && e.indexOf(o) < 0 && (r[o] = t[o]);
+  if (t != null && m)
+    for (var o of m(t))
+      e.indexOf(o) < 0 && i.call(t, o) && (r[o] = t[o]);
+  return r;
+};
+import { jsx as d } from "react/jsx-runtime";
+import { cn as b } from "../../utils/cn.js";
+function C(o) {
+  var n = o, {
+    children: t,
+    className: e
+  } = n, r = p(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ d("p", f(a({ className: b("text-sm text-fg-secondary", e) }, r), { children: t }));
+}
+export {
+  C as CardSubtitle
+};
+//# sourceMappingURL=CardSubtitle.js.map

package/dist/granular/ui/components/Card/CardSubtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSubtitle.js","sources":["../../../../../src/ui/components/Card/CardSubtitle.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface CardSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\nexport function CardSubtitle({\n  children,\n  className,\n  ...props\n}: CardSubtitleProps) {\n  return (\n    <p className={cn(\"text-sm text-fg-secondary\", className)} {...props}>\n      {children}\n    </p>\n  );\n}\n\nexport default CardSubtitle;\n"],"names":["CardSubtitle","_a","_b","children","className","props","__objRest","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOO,SAASA,EAAaC,GAIP;AAJO,MAAAC,IAAAD,GAC3B;AAAA,cAAAE;AAAA,IACA,WAAAC;AAAA,MAF2BF,GAGxBG,IAAAC,EAHwBJ,GAGxB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK,EAAC,WAAE,WAAWC,EAAG,6BAA6BJ,CAAS,KAAOC,MAC3D,UAAAF,IACH;AAEJ;"}

package/dist/granular/ui/components/Card/CardTitle.js

@@ -0,0 +1,61 @@
+"use client";
+var u = Object.defineProperty, d = Object.defineProperties;
+var g = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var a = (e, s, n) => s in e ? u(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n, p = (e, s) => {
+  for (var n in s || (s = {}))
+    m.call(s, n) && a(e, n, s[n]);
+  if (i)
+    for (var n of i(s))
+      c.call(s, n) && a(e, n, s[n]);
+  return e;
+}, f = (e, s) => d(e, g(s));
+var o = (e, s) => {
+  var n = {};
+  for (var l in e)
+    m.call(e, l) && s.indexOf(l) < 0 && (n[l] = e[l]);
+  if (e != null && i)
+    for (var l of i(e))
+      s.indexOf(l) < 0 && c.call(e, l) && (n[l] = e[l]);
+  return n;
+};
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { getSpacingClass as j } from "../../tokens/spacing.js";
+import { cn as C } from "../../utils/cn.js";
+function q(b) {
+  var t = b, {
+    children: e,
+    icon: s,
+    badge: n,
+    as: l = "h2",
+    className: x
+  } = t, h = o(t, [
+    "children",
+    "icon",
+    "badge",
+    "as",
+    "className"
+  ]);
+  return /* @__PURE__ */ N(
+    l,
+    f(p({
+      className: C(
+        "text-base font-semibold text-fg-primary",
+        "flex items-center",
+        j("sm", "gap"),
+        x
+      )
+    }, h), {
+      children: [
+        s ? /* @__PURE__ */ r("span", { className: "shrink-0 inline-flex", children: s }) : null,
+        /* @__PURE__ */ r("span", { children: e }),
+        n ? /* @__PURE__ */ r("span", { className: "inline-flex", children: n }) : null
+      ]
+    })
+  );
+}
+export {
+  q as CardTitle
+};
+//# sourceMappingURL=CardTitle.js.map

package/dist/granular/ui/components/Card/CardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTitle.js","sources":["../../../../../src/ui/components/Card/CardTitle.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type CardTitleAs = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  children: ReactNode;\n  /**\n   * Optional icon rendered before the title text.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional badge rendered after the title text.\n   */\n  badge?: ReactNode;\n  /**\n   * Heading level. Default `h2` — the typical depth for a card title\n   * inside a page that already has an `h1`. Use `h3` (or deeper) when\n   * the card sits inside a nested section.\n   * @default 'h2'\n   */\n  as?: CardTitleAs;\n}\n\nexport function CardTitle({\n  children,\n  icon,\n  badge,\n  as: As = \"h2\",\n  className,\n  ...props\n}: CardTitleProps) {\n  return (\n    <As\n      className={cn(\n        \"text-base font-semibold text-fg-primary\",\n        \"flex items-center\",\n        getSpacingClass(\"sm\", \"gap\"),\n        className,\n      )}\n      {...props}\n    >\n      {icon ? <span className=\"shrink-0 inline-flex\">{icon}</span> : null}\n      <span>{children}</span>\n      {badge ? <span className=\"inline-flex\">{badge}</span> : null}\n    </As>\n  );\n}\n\nexport default CardTitle;\n"],"names":["CardTitle","_a","_b","children","icon","badge","As","className","props","__objRest","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAASA,EAAUC,GAOP;AAPO,MAAAC,IAAAD,GACxB;AAAA,cAAAE;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,IAAIC,IAAK;AAAA,IACT,WAAAC;AAAA,MALwBL,GAMrBM,IAAAC,EANqBP,GAMrB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAQ;AAAA,IAACJ;AAAA,IAAAK,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAC,EAAgB,MAAM,KAAK;AAAA,QAC3BP;AAAA,MAAA;AAAA,OAEEC,IAPL;AAAA,MASE,UAAA;AAAA,QAAAJ,IAAO,gBAAAW,EAAC,QAAA,EAAK,WAAU,wBAAwB,aAAK,IAAU;AAAA,QAC/D,gBAAAA,EAAC,UAAM,UAAAZ,GAAS;AAAA,QACfE,IAAQ,gBAAAU,EAAC,QAAA,EAAK,WAAU,eAAe,aAAM,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/granular/ui/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,250 @@
+"use client";
+var A = Object.defineProperty, E = Object.defineProperties;
+var F = Object.getOwnPropertyDescriptors;
+var C = Object.getOwnPropertySymbols;
+var G = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var I = (a, r, l) => r in a ? A(a, r, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[r] = l, R = (a, r) => {
+  for (var l in r || (r = {}))
+    G.call(r, l) && I(a, l, r[l]);
+  if (C)
+    for (var l of C(r))
+      _.call(r, l) && I(a, l, r[l]);
+  return a;
+}, S = (a, r) => E(a, F(r));
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { useState as j, useEffect as q } from "react";
+import { getRadiusClass as $ } from "../../tokens/radius.js";
+import { getShadowClass as N } from "../../tokens/shadows.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import H from "../../primitives/Input/Input.js";
+import z from "../Popover/Popover.js";
+function Z({
+  value: a,
+  defaultValue: r = "#000000",
+  format: l = "hex",
+  onChange: c,
+  presets: V,
+  showInput: y = !0,
+  disabled: i = !1,
+  label: w,
+  className: B = ""
+}) {
+  const [L, p] = j(r), [f, u] = j({ r: 0, g: 0, b: 0 }), b = a !== void 0, m = b ? a : L, x = (e) => {
+    const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+    return t ? {
+      r: parseInt(t[1], 16),
+      g: parseInt(t[2], 16),
+      b: parseInt(t[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+  }, M = (e, t, d) => "#" + [e, t, d].map((g) => {
+    const v = g.toString(16);
+    return v.length === 1 ? "0" + v : v;
+  }).join("");
+  q(() => {
+    if (m) {
+      const e = x(m);
+      u(e);
+    }
+  }, [m]);
+  const k = (e) => {
+    const t = e.target.value;
+    (/^#[0-9A-F]{6}$/i.test(t) || t === "") && (b || p(t), c == null || c(t), t && u(x(t)));
+  }, h = (e, t) => {
+    const d = S(R({}, f), { [e]: Math.max(0, Math.min(255, t)) });
+    u(d);
+    const g = M(d.r, d.g, d.b);
+    b || p(g), c == null || c(g);
+  }, P = V || [
+    "#000000",
+    "#ffffff",
+    "#ff0000",
+    "#00ff00",
+    "#0000ff",
+    "#ffff00",
+    "#ff00ff",
+    "#00ffff",
+    "#808080",
+    "#ffa500"
+  ], T = /* @__PURE__ */ n("div", { className: `${o("base", "p")} min-w-[280px]`, children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: `
+          w-full
+          h-32
+          ${$("md")}
+          ${N("sm")}
+          ${o("base", "mb")}
+          border
+          border-line-default
+        `,
+        style: { backgroundColor: m }
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: `${o("md", "space-y")} ${o("base", "mb")}`,
+        children: [
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ n(
+              "label",
+              {
+                className: `block text-xs font-medium text-fg-secondary ${o("xs", "mb")}`,
+                children: [
+                  "Red: ",
+                  f.r
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "255",
+                value: f.r,
+                onChange: (e) => h("r", parseInt(e.target.value)),
+                disabled: i,
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ n(
+              "label",
+              {
+                className: `block text-xs font-medium text-fg-secondary ${o("xs", "mb")}`,
+                children: [
+                  "Green: ",
+                  f.g
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "255",
+                value: f.g,
+                onChange: (e) => h("g", parseInt(e.target.value)),
+                disabled: i,
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ n(
+              "label",
+              {
+                className: `block text-xs font-medium text-fg-secondary ${o("xs", "mb")}`,
+                children: [
+                  "Blue: ",
+                  f.b
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "255",
+                value: f.b,
+                onChange: (e) => h("b", parseInt(e.target.value)),
+                disabled: i,
+                className: "w-full"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    y && /* @__PURE__ */ s("div", { className: o("base", "mb"), children: /* @__PURE__ */ s(
+      H,
+      {
+        label: "Hex",
+        value: m,
+        onChange: k,
+        disabled: i,
+        placeholder: "#000000",
+        className: "font-mono"
+      }
+    ) }),
+    P.length > 0 && /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ s(
+        "label",
+        {
+          className: `block text-xs font-medium text-fg-secondary ${o("sm", "mb")}`,
+          children: "Presets"
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: `grid grid-cols-10 ${o("xs", "gap")}`, children: P.map((e, t) => /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            i || (b || p(e), c == null || c(e), u(x(e)));
+          },
+          disabled: i,
+          className: `
+                  w-6
+                  h-6
+                  ${$("sm")}
+                  border
+                  border-line-emphasis
+                  hover:scale-110
+                  ${N("sm")}
+                  ${m.toLowerCase() === e.toLowerCase() ? "ring-2 ring-offset-1 ring-line-brand" : ""}
+                `,
+          style: { backgroundColor: e },
+          "aria-label": `Select color ${e}`
+        },
+        t
+      )) })
+    ] })
+  ] });
+  return /* @__PURE__ */ s("div", { className: B, children: /* @__PURE__ */ s(
+    z,
+    {
+      trigger: /* @__PURE__ */ n("div", { className: `flex items-center ${o("sm", "gap")}`, children: [
+        w && /* @__PURE__ */ s("label", { className: "text-sm font-medium text-fg-secondary", children: w }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: `
+                w-10
+                h-10
+                ${$("md")}
+                border
+                border-line-emphasis
+                ${N("sm")}
+                cursor-pointer
+                ${i ? "opacity-50 cursor-not-allowed" : ""}
+              `,
+            style: { backgroundColor: m }
+          }
+        ),
+        y && /* @__PURE__ */ s(
+          H,
+          {
+            value: m,
+            onChange: k,
+            disabled: i,
+            placeholder: "#000000",
+            className: "w-24 font-mono"
+          }
+        )
+      ] }),
+      placement: "bottom-start",
+      showCloseButton: !0,
+      title: "Pick a Color",
+      children: T
+    }
+  ) });
+}
+export {
+  Z as default
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/granular/ui/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../../../src/ui/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, type ChangeEvent } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport Input from \"../../primitives/Input/Input\";\nimport Popover from \"../Popover/Popover\";\n\nexport type ColorFormat = \"hex\" | \"rgb\" | \"hsl\";\n\nexport interface ColorPickerProps {\n  value?: string; // Hex color (e.g., \"#ff0000\")\n  defaultValue?: string;\n  format?: ColorFormat;\n  onChange?: (value: string) => void;\n  presets?: string[];\n  showInput?: boolean;\n  disabled?: boolean;\n  label?: string;\n  className?: string;\n}\n\n/**\n * ColorPicker Component\n *\n * A color picker component for selecting colors.\n * Supports hex, rgb, and hsl formats with presets.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <ColorPicker\n *   value=\"#ff0000\"\n *   onChange={(color) => console.log(color)}\n * />\n * ```\n */\nexport default function ColorPicker({\n  value: controlledValue,\n  defaultValue = \"#000000\",\n  format: _format = \"hex\",\n  onChange,\n  presets,\n  showInput = true,\n  disabled = false,\n  label,\n  className = \"\",\n}: ColorPickerProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [rgb, setRgb] = useState({ r: 0, g: 0, b: 0 });\n\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  // Convert hex to RGB\n  const hexToRgb = (hex: string) => {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result\n      ? {\n          r: parseInt(result[1], 16),\n          g: parseInt(result[2], 16),\n          b: parseInt(result[3], 16),\n        }\n      : { r: 0, g: 0, b: 0 };\n  };\n\n  // Convert RGB to hex\n  const rgbToHex = (r: number, g: number, b: number) => {\n    return (\n      \"#\" +\n      [r, g, b]\n        .map((x) => {\n          const hex = x.toString(16);\n          return hex.length === 1 ? \"0\" + hex : hex;\n        })\n        .join(\"\")\n    );\n  };\n\n  // Update RGB when value changes\n  useEffect(() => {\n    if (currentValue) {\n      const rgbValue = hexToRgb(currentValue);\n      setRgb(rgbValue);\n    }\n  }, [currentValue]);\n\n  const handleHexChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const hex = e.target.value;\n    if (/^#[0-9A-F]{6}$/i.test(hex) || hex === \"\") {\n      if (!isControlled) {\n        setInternalValue(hex);\n      }\n      onChange?.(hex);\n      if (hex) {\n        setRgb(hexToRgb(hex));\n      }\n    }\n  };\n\n  const handleRgbChange = (component: \"r\" | \"g\" | \"b\", val: number) => {\n    const newRgb = { ...rgb, [component]: Math.max(0, Math.min(255, val)) };\n    setRgb(newRgb);\n    const hex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);\n    if (!isControlled) {\n      setInternalValue(hex);\n    }\n    onChange?.(hex);\n  };\n\n  const defaultPresets = [\n    \"#000000\",\n    \"#ffffff\",\n    \"#ff0000\",\n    \"#00ff00\",\n    \"#0000ff\",\n    \"#ffff00\",\n    \"#ff00ff\",\n    \"#00ffff\",\n    \"#808080\",\n    \"#ffa500\",\n  ];\n\n  const colorPresets = presets || defaultPresets;\n\n  const colorPickerContent = (\n    <div className={`${getSpacingClass(\"base\", \"p\")} min-w-[280px]`}>\n      {/* Color Preview */}\n      <div\n        className={`\n          w-full\n          h-32\n          ${getRadiusClass(\"md\")}\n          ${getShadowClass(\"sm\")}\n          ${getSpacingClass(\"base\", \"mb\")}\n          border\n          border-line-default\n        `}\n        style={{ backgroundColor: currentValue }}\n      />\n\n      {/* RGB Sliders */}\n      <div\n        className={`${getSpacingClass(\"md\", \"space-y\")} ${getSpacingClass(\"base\", \"mb\")}`}\n      >\n        <div>\n          <label\n            className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n          >\n            Red: {rgb.r}\n          </label>\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"255\"\n            value={rgb.r}\n            onChange={(e) => handleRgbChange(\"r\", parseInt(e.target.value))}\n            disabled={disabled}\n            className=\"w-full\"\n          />\n        </div>\n        <div>\n          <label\n            className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n          >\n            Green: {rgb.g}\n          </label>\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"255\"\n            value={rgb.g}\n            onChange={(e) => handleRgbChange(\"g\", parseInt(e.target.value))}\n            disabled={disabled}\n            className=\"w-full\"\n          />\n        </div>\n        <div>\n          <label\n            className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n          >\n            Blue: {rgb.b}\n          </label>\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"255\"\n            value={rgb.b}\n            onChange={(e) => handleRgbChange(\"b\", parseInt(e.target.value))}\n            disabled={disabled}\n            className=\"w-full\"\n          />\n        </div>\n      </div>\n\n      {/* Hex Input */}\n      {showInput && (\n        <div className={getSpacingClass(\"base\", \"mb\")}>\n          <Input\n            label=\"Hex\"\n            value={currentValue}\n            onChange={handleHexChange}\n            disabled={disabled}\n            placeholder=\"#000000\"\n            className=\"font-mono\"\n          />\n        </div>\n      )}\n\n      {/* Color Presets */}\n      {colorPresets.length > 0 && (\n        <div>\n          <label\n            className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"sm\", \"mb\")}`}\n          >\n            Presets\n          </label>\n          <div className={`grid grid-cols-10 ${getSpacingClass(\"xs\", \"gap\")}`}>\n            {colorPresets.map((color, index) => (\n              <button\n                key={index}\n                type=\"button\"\n                onClick={() => {\n                  if (!disabled) {\n                    if (!isControlled) {\n                      setInternalValue(color);\n                    }\n                    onChange?.(color);\n                    setRgb(hexToRgb(color));\n                  }\n                }}\n                disabled={disabled}\n                className={`\n                  w-6\n                  h-6\n                  ${getRadiusClass(\"sm\")}\n                  border\n                  border-line-emphasis\n                  hover:scale-110\n                  ${getShadowClass(\"sm\")}\n                  ${currentValue.toLowerCase() === color.toLowerCase() ? \"ring-2 ring-offset-1 ring-line-brand\" : \"\"}\n                `}\n                style={{ backgroundColor: color }}\n                aria-label={`Select color ${color}`}\n              />\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={className}>\n      <Popover\n        trigger={\n          <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n            {label && (\n              <label className=\"text-sm font-medium text-fg-secondary\">\n                {label}\n              </label>\n            )}\n            <div\n              className={`\n                w-10\n                h-10\n                ${getRadiusClass(\"md\")}\n                border\n                border-line-emphasis\n                ${getShadowClass(\"sm\")}\n                cursor-pointer\n                ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}\n              `}\n              style={{ backgroundColor: currentValue }}\n            />\n            {showInput && (\n              <Input\n                value={currentValue}\n                onChange={handleHexChange}\n                disabled={disabled}\n                placeholder=\"#000000\"\n                className=\"w-24 font-mono\"\n              />\n            )}\n          </div>\n        }\n        placement=\"bottom-start\"\n        showCloseButton\n        title=\"Pick a Color\"\n      >\n        {colorPickerContent}\n      </Popover>\n    </div>\n  );\n}\n"],"names":["ColorPicker","controlledValue","defaultValue","_format","onChange","presets","showInput","disabled","label","className","internalValue","setInternalValue","useState","rgb","setRgb","isControlled","currentValue","hexToRgb","hex","result","rgbToHex","r","g","b","x","useEffect","rgbValue","handleHexChange","handleRgbChange","component","val","newRgb","__spreadProps","__spreadValues","colorPresets","colorPickerContent","getSpacingClass","jsx","getRadiusClass","getShadowClass","jsxs","Input","color","index","Popover"],"mappings":"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"}