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

package/dist/granular/ui/primitives/Slider/Slider.js

@@ -0,0 +1,291 @@
+"use client";
+var fe = Object.defineProperty, ge = Object.defineProperties;
+var pe = Object.getOwnPropertyDescriptors;
+var S = Object.getOwnPropertySymbols;
+var Z = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var Y = (a, r, s) => r in a ? fe(a, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[r] = s, C = (a, r) => {
+  for (var s in r || (r = {}))
+    Z.call(r, s) && Y(a, s, r[s]);
+  if (S)
+    for (var s of S(r))
+      _.call(r, s) && Y(a, s, r[s]);
+  return a;
+}, ee = (a, r) => ge(a, pe(r));
+var ae = (a, r) => {
+  var s = {};
+  for (var e in a)
+    Z.call(a, e) && r.indexOf(e) < 0 && (s[e] = a[e]);
+  if (a != null && S)
+    for (var e of S(a))
+      r.indexOf(e) < 0 && _.call(a, e) && (s[e] = a[e]);
+  return s;
+};
+import { jsxs as w, jsx as c, Fragment as re } from "react/jsx-runtime";
+import { forwardRef as ve, useRef as be, useId as E, useState as L } from "react";
+import { getAnimationClass as te } from "../../tokens/animations.js";
+import { getRadiusClass as h } from "../../tokens/radius.js";
+import { getShadowClass as ye } from "../../tokens/shadows.js";
+import { getSpacingClass as V } from "../../tokens/spacing.js";
+import { getTypographyWeight as we, getTypographySize as se } from "../../tokens/typography.js";
+import { cva as le } from "../../utils/cva.js";
+import { cn as i } from "../../utils/cn.js";
+const he = ve(function(xe, ce) {
+  var X = xe, {
+    value: r,
+    defaultValue: s,
+    min: e = 0,
+    max: u = 100,
+    step: j = 1,
+    variant: l = "single",
+    size: v = "md",
+    disabled: x = !1,
+    showValue: F = !1,
+    marks: ie = [],
+    onChange: g,
+    onValueChange: p,
+    label: Q,
+    className: ne = ""
+  } = X, oe = ae(X, [
+    "value",
+    "defaultValue",
+    "min",
+    "max",
+    "step",
+    "variant",
+    "size",
+    "disabled",
+    "showValue",
+    "marks",
+    "onChange",
+    "onValueChange",
+    "label",
+    "className"
+  ]);
+  const M = be(null), N = E(), z = E(), B = E(), [de, U] = L(
+    s || (l === "range" ? [e, u] : e)
+  ), [W, q] = L(!1), [G, H] = L(null), D = r !== void 0, d = D ? r : de, T = (t) => (t - e) / (u - e) * 100, J = (t) => {
+    if (!M.current) return e;
+    const n = M.current.getBoundingClientRect(), o = Math.max(
+      0,
+      Math.min(1, (t - n.left) / n.width)
+    ), m = e + o * (u - e);
+    return Math.round(m / j) * j;
+  }, I = (t, n = "min") => {
+    if (x) return;
+    t.preventDefault(), q(!0), H(n);
+    const o = (A) => {
+      if (!M.current) return;
+      const f = J(A.clientX);
+      K(f, n);
+    }, m = () => {
+      q(!1), H(null), document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", m);
+    };
+    document.addEventListener("mousemove", o), document.addEventListener("mouseup", m);
+  }, K = (t, n = "min") => {
+    const o = Math.max(e, Math.min(u, t));
+    if (l === "range") {
+      const [m, A] = Array.isArray(d) ? d : [e, u];
+      let f;
+      n === "min" ? f = [Math.min(o, A), A] : f = [m, Math.max(o, m)], D || U(f), g == null || g(f), p == null || p(f);
+    } else
+      D || U(o), g == null || g(o), p == null || p(o);
+  }, ue = (t) => {
+    if (x || W) return;
+    const n = J(t.clientX);
+    K(n);
+  }, me = () => "focus:ring-line-brand ring-offset-2", O = le(i("relative", "cursor-pointer"), {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: !1
+    }
+  }), R = le(
+    i(
+      "absolute",
+      "bg-surface-brand",
+      h("full"),
+      "border-2",
+      "border-white",
+      ye("md"),
+      "cursor-grab",
+      "active:cursor-grabbing",
+      te("base"),
+      "-translate-x-1/2",
+      "-translate-y-1/2",
+      "top-1/2"
+    ),
+    {
+      variants: {
+        size: {
+          sm: "w-3 h-3",
+          md: "w-4 h-4",
+          lg: "w-5 h-5"
+        },
+        active: {
+          true: me(),
+          false: ""
+        }
+      },
+      defaultVariants: {
+        size: "md",
+        active: !1
+      }
+    }
+  ), $ = typeof d == "number" ? d : d[0], b = Array.isArray(d) ? d[0] : e, y = Array.isArray(d) ? d[1] : $, k = T(b), P = T(y);
+  return /* @__PURE__ */ w("div", ee(C({ ref: ce, className: i("w-full", ne) }, oe), { children: [
+    /* @__PURE__ */ w(
+      "label",
+      {
+        id: N,
+        className: i(
+          "block",
+          se("bodySmall"),
+          we("label"),
+          "text-fg-primary",
+          V("sm", "mb")
+        ),
+        children: [
+          Q,
+          F && /* @__PURE__ */ c(
+            "span",
+            {
+              className: i(V("sm", "ml"), "text-fg-secondary"),
+              children: l === "range" ? `${b} - ${y}` : $
+            }
+          )
+        ]
+      }
+    ),
+    l === "range" && /* @__PURE__ */ w(re, { children: [
+      /* @__PURE__ */ c("span", { id: z, className: "sr-only", children: "minimum" }),
+      /* @__PURE__ */ c("span", { id: B, className: "sr-only", children: "maximum" })
+    ] }),
+    /* @__PURE__ */ w(
+      "div",
+      {
+        ref: M,
+        className: i(
+          O({ size: v, disabled: x }),
+          "bg-surface-muted",
+          h("full")
+        ),
+        onClick: ue,
+        role: l === "range" ? void 0 : "slider",
+        "aria-valuemin": l === "range" ? void 0 : e,
+        "aria-valuemax": l === "range" ? void 0 : u,
+        "aria-valuenow": l === "range" ? void 0 : $,
+        "aria-disabled": l === "range" ? void 0 : x,
+        "aria-labelledby": l === "range" ? void 0 : N,
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: i(
+                "absolute",
+                O({ size: v }),
+                "bg-surface-brand",
+                h("full"),
+                te("base")
+              ),
+              style: {
+                left: `${k}%`,
+                width: `${P - k}%`
+              }
+            }
+          ),
+          ie.map((t) => {
+            const n = T(t);
+            return /* @__PURE__ */ c(
+              "div",
+              {
+                className: i(
+                  "absolute",
+                  "w-1",
+                  "h-1",
+                  "bg-line-strong",
+                  h("full"),
+                  "-translate-x-1/2"
+                ),
+                style: {
+                  left: `${n}%`,
+                  top: "50%",
+                  transform: "translate(-50%, -50%)"
+                }
+              },
+              t
+            );
+          }),
+          l === "range" ? /* @__PURE__ */ w(re, { children: [
+            /* @__PURE__ */ c(
+              "div",
+              {
+                className: i(
+                  R({ size: v, active: G === "min" })
+                ),
+                style: { left: `${k}%` },
+                onMouseDown: (t) => I(t, "min"),
+                role: "slider",
+                "aria-valuemin": e,
+                "aria-valuemax": y,
+                "aria-valuenow": b,
+                "aria-labelledby": `${N} ${z}`
+              }
+            ),
+            /* @__PURE__ */ c(
+              "div",
+              {
+                className: i(
+                  R({ size: v, active: G === "max" })
+                ),
+                style: { left: `${P}%` },
+                onMouseDown: (t) => I(t, "max"),
+                role: "slider",
+                "aria-valuemin": b,
+                "aria-valuemax": u,
+                "aria-valuenow": y,
+                "aria-labelledby": `${N} ${B}`
+              }
+            )
+          ] }) : /* @__PURE__ */ c(
+            "div",
+            {
+              className: i(R({ size: v, active: W })),
+              style: { left: `${P}%` },
+              onMouseDown: (t) => I(t)
+            }
+          ),
+          F && !Q && /* @__PURE__ */ c("div", { className: "absolute -top-6 left-0 right-0 flex justify-center", children: /* @__PURE__ */ c(
+            "span",
+            {
+              className: i(
+                se("caption"),
+                "text-fg-secondary",
+                "bg-surface-overlay",
+                V("sm", "px"),
+                V("xs", "py"),
+                h("md"),
+                "shadow"
+              ),
+              children: l === "range" ? `${b} - ${y}` : $
+            }
+          ) })
+        ]
+      }
+    )
+  ] }));
+});
+he.displayName = "Slider";
+export {
+  he as default
+};
+//# sourceMappingURL=Slider.js.map

package/dist/granular/ui/primitives/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../../../src/ui/primitives/Slider/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, useId, forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SliderVariant = \"single\" | \"range\";\nexport type SliderSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface SliderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  value?: number | [number, number];\n  defaultValue?: number | [number, number];\n  min?: number;\n  max?: number;\n  step?: number;\n  variant?: SliderVariant;\n  size?: SliderSize;\n  disabled?: boolean;\n  showValue?: boolean;\n  marks?: number[];\n  onChange?: (value: number | [number, number]) => void;\n  onValueChange?: (value: number | [number, number]) => void;\n  /**\n   * Required label for the slider. Becomes the accessible name via\n   * aria-labelledby — single variant references the rendered <label>\n   * element directly; range variant references the same label plus a\n   * sr-only qualifier (\"minimum\" / \"maximum\") so AT users can tell\n   * which handle has focus. Make this a real domain term (\"Volume\",\n   * \"Price range\"), not the element type (\"slider\").\n   */\n  label: string;\n}\n\n/**\n * Slider Component\n *\n * A range input component for selecting numeric values.\n * Supports single and dual thumb (range) modes.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Slider\n *   value={50}\n *   min={0}\n *   max={100}\n *   onChange={(value) => console.log(value)}\n * />\n *\n * <Slider\n *   variant=\"range\"\n *   value={[20, 80]}\n *   min={0}\n *   max={100}\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nconst Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    value: controlledValue,\n    defaultValue,\n    min = 0,\n    max = 100,\n    step = 1,\n    variant = \"single\",\n    size = \"md\",\n    disabled = false,\n    showValue = false,\n    marks = [],\n    onChange,\n    onValueChange,\n    label,\n    className = \"\",\n    ...props\n  },\n  ref,\n) {\n  const sliderRef = useRef<HTMLDivElement>(null);\n  // Stable IDs for the visible <label> and (for range) the sr-only\n  // qualifier spans that distinguish min vs max handles. Range\n  // accessible name = label + qualifier via aria-labelledby with two\n  // ids (\"Price range minimum\" / \"Price range maximum\"), so the\n  // visible label remains the single source of truth — changing\n  // `label` propagates to both handles automatically.\n  const labelId = useId();\n  const minQualifierId = useId();\n  const maxQualifierId = useId();\n  const [internalValue, setInternalValue] = useState<number | [number, number]>(\n    defaultValue || (variant === \"range\" ? [min, max] : min),\n  );\n  const [isDragging, setIsDragging] = useState(false);\n  const [activeThumb, setActiveThumb] = useState<\"min\" | \"max\" | null>(null);\n\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const getPercentage = (val: number) => ((val - min) / (max - min)) * 100;\n\n  const getValueFromPosition = (clientX: number): number => {\n    if (!sliderRef.current) return min;\n    const rect = sliderRef.current.getBoundingClientRect();\n    const percentage = Math.max(\n      0,\n      Math.min(1, (clientX - rect.left) / rect.width),\n    );\n    const rawValue = min + percentage * (max - min);\n    return Math.round(rawValue / step) * step;\n  };\n\n  const handleMouseDown = (\n    e: React.MouseEvent,\n    thumb: \"min\" | \"max\" = \"min\",\n  ) => {\n    if (disabled) return;\n    e.preventDefault();\n    setIsDragging(true);\n    setActiveThumb(thumb);\n\n    const handleMouseMove = (moveEvent: MouseEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getValueFromPosition(moveEvent.clientX);\n      updateValue(newValue, thumb);\n    };\n\n    const handleMouseUp = () => {\n      setIsDragging(false);\n      setActiveThumb(null);\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    document.addEventListener(\"mouseup\", handleMouseUp);\n  };\n\n  const updateValue = (newValue: number, thumb: \"min\" | \"max\" = \"min\") => {\n    const clampedValue = Math.max(min, Math.min(max, newValue));\n\n    if (variant === \"range\") {\n      const [minVal, maxVal] = Array.isArray(currentValue)\n        ? currentValue\n        : [min, max];\n      let updatedValue: [number, number];\n\n      if (thumb === \"min\") {\n        updatedValue = [Math.min(clampedValue, maxVal), maxVal];\n      } else {\n        updatedValue = [minVal, Math.max(clampedValue, minVal)];\n      }\n\n      if (!isControlled) {\n        setInternalValue(updatedValue);\n      }\n      onChange?.(updatedValue);\n      onValueChange?.(updatedValue);\n    } else {\n      if (!isControlled) {\n        setInternalValue(clampedValue);\n      }\n      onChange?.(clampedValue);\n      onValueChange?.(clampedValue);\n    }\n  };\n\n  const handleTrackClick = (e: React.MouseEvent) => {\n    if (disabled || isDragging) return;\n    const newValue = getValueFromPosition(e.clientX);\n    updateValue(newValue);\n  };\n\n  // Get focus ring color using design system helper\n  const getFocusRingColor = (): string => {\n    return \"focus:ring-line-brand\" + \" ring-offset-2\";\n  };\n\n  // Slider variants using CVA\n  const sliderTrackVariants = cva(cn(\"relative\", \"cursor-pointer\"), {\n    variants: {\n      size: {\n        sm: \"h-1\",\n        md: \"h-2\",\n        lg: \"h-3\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      disabled: false,\n    },\n  });\n\n  const sliderThumbVariants = cva(\n    cn(\n      \"absolute\",\n      \"bg-surface-brand\",\n      getRadiusClass(\"full\"),\n      \"border-2\",\n      \"border-white\",\n      getShadowClass(\"md\"),\n      \"cursor-grab\",\n      \"active:cursor-grabbing\",\n      getAnimationClass(\"base\"),\n      \"-translate-x-1/2\",\n      \"-translate-y-1/2\",\n      \"top-1/2\",\n    ),\n    {\n      variants: {\n        size: {\n          sm: \"w-3 h-3\",\n          md: \"w-4 h-4\",\n          lg: \"w-5 h-5\",\n        },\n        active: {\n          true: getFocusRingColor(),\n          false: \"\",\n        },\n      },\n      defaultVariants: {\n        size: \"md\",\n        active: false,\n      },\n    },\n  );\n\n  // Configuration for styling variants\n  // const _config = {\n  //   track: sliderTrackVariants({ size, disabled }),\n  //   thumb: sliderThumbVariants({ size }),\n  // };\n  const singleValue =\n    typeof currentValue === \"number\" ? currentValue : currentValue[0];\n  const minValue = Array.isArray(currentValue) ? currentValue[0] : min;\n  const maxValue = Array.isArray(currentValue) ? currentValue[1] : singleValue;\n\n  const minPercentage = getPercentage(minValue);\n  const maxPercentage = getPercentage(maxValue);\n\n  return (\n    <div ref={ref} className={cn(\"w-full\", className)} {...props}>\n      <label\n        id={labelId}\n        className={cn(\n          \"block\",\n          getTypographySize(\"bodySmall\"),\n          getTypographyWeight(\"label\"),\n          \"text-fg-primary\",\n          getSpacingClass(\"sm\", \"mb\"),\n        )}\n      >\n        {label}\n        {showValue && (\n          <span\n            className={cn(getSpacingClass(\"sm\", \"ml\"), \"text-fg-secondary\")}\n          >\n            {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n          </span>\n        )}\n      </label>\n      {variant === \"range\" && (\n        <>\n          <span id={minQualifierId} className=\"sr-only\">\n            minimum\n          </span>\n          <span id={maxQualifierId} className=\"sr-only\">\n            maximum\n          </span>\n        </>\n      )}\n      <div\n        ref={sliderRef}\n        className={cn(\n          sliderTrackVariants({ size, disabled }),\n          \"bg-surface-muted\",\n          getRadiusClass(\"full\"),\n        )}\n        onClick={handleTrackClick}\n        role={variant === \"range\" ? undefined : \"slider\"}\n        aria-valuemin={variant === \"range\" ? undefined : min}\n        aria-valuemax={variant === \"range\" ? undefined : max}\n        aria-valuenow={variant === \"range\" ? undefined : singleValue}\n        aria-disabled={variant === \"range\" ? undefined : disabled}\n        aria-labelledby={variant === \"range\" ? undefined : labelId}\n      >\n        {/* Active track */}\n        <div\n          className={cn(\n            \"absolute\",\n            sliderTrackVariants({ size }),\n            \"bg-surface-brand\",\n            getRadiusClass(\"full\"),\n            getAnimationClass(\"base\"),\n          )}\n          style={{\n            left: `${minPercentage}%`,\n            width: `${maxPercentage - minPercentage}%`,\n          }}\n        />\n\n        {/* Marks */}\n        {marks.map((mark) => {\n          const markPercentage = getPercentage(mark);\n          return (\n            <div\n              key={mark}\n              className={cn(\n                \"absolute\",\n                \"w-1\",\n                \"h-1\",\n                \"bg-line-strong\",\n                getRadiusClass(\"full\"),\n                \"-translate-x-1/2\",\n              )}\n              style={{\n                left: `${markPercentage}%`,\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n              }}\n            />\n          );\n        })}\n\n        {/* Thumbs */}\n        {variant === \"range\" ? (\n          <>\n            <div\n              className={cn(\n                sliderThumbVariants({ size, active: activeThumb === \"min\" }),\n              )}\n              style={{ left: `${minPercentage}%` }}\n              onMouseDown={(e) => handleMouseDown(e, \"min\")}\n              role=\"slider\"\n              aria-valuemin={min}\n              aria-valuemax={maxValue}\n              aria-valuenow={minValue}\n              aria-labelledby={`${labelId} ${minQualifierId}`}\n            />\n            <div\n              className={cn(\n                sliderThumbVariants({ size, active: activeThumb === \"max\" }),\n              )}\n              style={{ left: `${maxPercentage}%` }}\n              onMouseDown={(e) => handleMouseDown(e, \"max\")}\n              role=\"slider\"\n              aria-valuemin={minValue}\n              aria-valuemax={max}\n              aria-valuenow={maxValue}\n              aria-labelledby={`${labelId} ${maxQualifierId}`}\n            />\n          </>\n        ) : (\n          <div\n            className={cn(sliderThumbVariants({ size, active: isDragging }))}\n            style={{ left: `${maxPercentage}%` }}\n            onMouseDown={(e) => handleMouseDown(e)}\n          />\n        )}\n\n        {showValue && !label && (\n          <div className=\"absolute -top-6 left-0 right-0 flex justify-center\">\n            <span\n              className={cn(\n                getTypographySize(\"caption\"),\n                \"text-fg-secondary\",\n                \"bg-surface-overlay\",\n                getSpacingClass(\"sm\", \"px\"),\n                getSpacingClass(\"xs\", \"py\"),\n                getRadiusClass(\"md\"),\n                \"shadow\",\n              )}\n            >\n              {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["Slider","forwardRef","_a","ref","_b","controlledValue","defaultValue","min","max","step","variant","size","disabled","showValue","marks","onChange","onValueChange","label","className","props","__objRest","sliderRef","useRef","labelId","useId","minQualifierId","maxQualifierId","internalValue","setInternalValue","useState","isDragging","setIsDragging","activeThumb","setActiveThumb","isControlled","currentValue","getPercentage","val","getValueFromPosition","clientX","rect","percentage","rawValue","handleMouseDown","e","thumb","handleMouseMove","moveEvent","newValue","updateValue","handleMouseUp","clampedValue","minVal","maxVal","updatedValue","handleTrackClick","getFocusRingColor","sliderTrackVariants","cva","cn","sliderThumbVariants","getRadiusClass","getShadowClass","getAnimationClass","singleValue","minValue","maxValue","minPercentage","maxPercentage","jsxs","getTypographySize","getTypographyWeight","getSpacingClass","jsx","Fragment","mark","markPercentage"],"mappings":"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"}

package/dist/granular/ui/primitives/Spinner/Spinner.js

@@ -0,0 +1,95 @@
+"use client";
+var u = Object.defineProperty, x = Object.defineProperties;
+var h = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var o = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var m = (r, a, e) => a in r ? u(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e, d = (r, a) => {
+  for (var e in a || (a = {}))
+    o.call(a, e) && m(r, e, a[e]);
+  if (n)
+    for (var e of n(a))
+      p.call(a, e) && m(r, e, a[e]);
+  return r;
+}, l = (r, a) => x(r, h(a));
+var c = (r, a) => {
+  var e = {};
+  for (var i in r)
+    o.call(r, i) && a.indexOf(i) < 0 && (e[i] = r[i]);
+  if (r != null && n)
+    for (var i of n(r))
+      a.indexOf(i) < 0 && p.call(r, i) && (e[i] = r[i]);
+  return e;
+};
+import { jsxs as v, jsx as f } from "react/jsx-runtime";
+import { memo as S } from "react";
+import { Loader2 as N } from "lucide-react";
+import { getSpacingClass as w } from "../../tokens/spacing.js";
+import { getTypographySize as z } from "../../tokens/typography.js";
+import { cn as t } from "../../utils/cn.js";
+import { cva as b } from "../../utils/cva.js";
+const j = b("motion-safe:animate-spin", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-8 w-8"
+    },
+    variant: {
+      primary: "text-fg-brand",
+      secondary: "text-fg-brand-secondary",
+      neutral: "text-fg-secondary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), L = S(function(V) {
+  var s = V, {
+    size: a = "md",
+    variant: e = "primary",
+    label: i,
+    className: y = ""
+  } = s, g = c(s, [
+    "size",
+    "variant",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ v(
+    "div",
+    l(d({
+      className: t("inline-flex", "items-center", y),
+      role: "status",
+      "aria-label": i || "Loading",
+      "aria-live": "polite"
+    }, g), {
+      children: [
+        /* @__PURE__ */ f(
+          N,
+          {
+            className: t(j({ size: a, variant: e })),
+            "aria-hidden": "true"
+          }
+        ),
+        i && /* @__PURE__ */ f(
+          "span",
+          {
+            className: t(
+              w("sm", "ml"),
+              z("bodySmall"),
+              "text-fg-secondary",
+              "sr-only"
+            ),
+            children: i
+          }
+        )
+      ]
+    })
+  );
+});
+L.displayName = "Spinner";
+export {
+  L as default
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/granular/ui/primitives/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../../src/ui/primitives/Spinner/Spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\nexport type SpinnerVariant = \"primary\" | \"secondary\" | \"neutral\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  size?: SpinnerSize;\n  variant?: SpinnerVariant;\n  label?: string;\n}\n\n/**\n * Spinner Component\n *\n * A loading spinner component for indicating loading states.\n * Follows Atomic Design principles as an Atom component.\n * Uses Strategy Pattern for different size/variant combinations.\n *\n * @example\n * ```tsx\n * <Spinner size=\"md\" variant=\"primary\" label=\"Loading...\" />\n * ```\n */\n// Spinner variants using CVA\nconst spinnerVariants = cva(\"motion-safe:animate-spin\", {\n  variants: {\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-8 w-8\",\n    },\n    variant: {\n      primary: \"text-fg-brand\",\n      secondary: \"text-fg-brand-secondary\",\n      neutral: \"text-fg-secondary\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"primary\",\n  },\n});\n\nconst Spinner = memo(function Spinner({\n  size = \"md\",\n  variant = \"primary\",\n  label,\n  className = \"\",\n  ...props\n}: SpinnerProps) {\n  return (\n    <div\n      className={cn(\"inline-flex\", \"items-center\", className)}\n      role=\"status\"\n      aria-label={label || \"Loading\"}\n      aria-live=\"polite\"\n      {...props}\n    >\n      <Loader2\n        className={cn(spinnerVariants({ size, variant }))}\n        aria-hidden=\"true\"\n      />\n      {label && (\n        <span\n          className={cn(\n            getSpacingClass(\"sm\", \"ml\"),\n            getTypographySize(\"bodySmall\"),\n            \"text-fg-secondary\",\n            \"sr-only\",\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </div>\n  );\n});\n\nSpinner.displayName = \"Spinner\";\n\nexport default Spinner;\n"],"names":["spinnerVariants","cva","Spinner","memo","_a","_b","size","variant","label","className","props","__objRest","jsxs","__spreadProps","__spreadValues","cn","jsx","Loader2","getSpacingClass","getTypographySize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,IAAkBC,EAAI,4BAA4B;AAAA,EACtD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC,GAEKC,IAAUC,EAAK,SAAiBC,GAMrB;AANqB,MAAAC,IAAAD,GACpC;AAAA,UAAAE,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAJwBJ,GAKjCK,IAAAC,EALiCN,GAKjC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,eAAe,gBAAgBN,CAAS;AAAA,MACtD,MAAK;AAAA,MACL,cAAYD,KAAS;AAAA,MACrB,aAAU;AAAA,OACNE,IALL;AAAA,MAOC,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAGf,EAAgB,EAAE,MAAAM,GAAM,SAAAC,EAAA,CAAS,CAAC;AAAA,YAChD,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEbC,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACTG,EAAgB,MAAM,IAAI;AAAA,cAC1BC,EAAkB,WAAW;AAAA,cAC7B;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAAX;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAQ,cAAc;"}

package/dist/granular/ui/primitives/Switch/Switch.js

@@ -0,0 +1,212 @@
+"use client";
+var P = Object.defineProperty, Q = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var h = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
+var D = (r, e, t) => e in r ? P(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, i = (r, e) => {
+  for (var t in e || (e = {}))
+    T.call(e, t) && D(r, t, e[t]);
+  if (h)
+    for (var t of h(e))
+      A.call(e, t) && D(r, t, e[t]);
+  return r;
+}, f = (r, e) => Q(r, U(e));
+var F = (r, e) => {
+  var t = {};
+  for (var s in r)
+    T.call(r, s) && e.indexOf(s) < 0 && (t[s] = r[s]);
+  if (r != null && h)
+    for (var s of h(r))
+      e.indexOf(s) < 0 && A.call(r, s) && (t[s] = r[s]);
+  return t;
+};
+import { jsxs as w, jsx as b } from "react/jsx-runtime";
+import { memo as V, forwardRef as X, useState as Y, useId as Z, useMemo as d, useCallback as K } from "react";
+import { getAnimationClass as M } from "../../tokens/animations.js";
+import { getRadiusClass as W } from "../../tokens/radius.js";
+import { getSpacingClass as q } from "../../tokens/spacing.js";
+import { getSwitchClasses as _ } from "../../tokens/switch.js";
+import { getTypographyWeight as tt, getTypographySize as z } from "../../tokens/typography.js";
+import { cn as y } from "../../utils/cn.js";
+const rt = V(
+  X(function(et, G) {
+    var I = et, {
+      size: e = "md",
+      label: t,
+      helperText: s,
+      error: p = !1,
+      success: k = !1,
+      className: S = "",
+      disabled: n = !1,
+      checked: N,
+      defaultChecked: x,
+      onChange: a,
+      id: B
+    } = I, C = F(I, [
+      "size",
+      "label",
+      "helperText",
+      "error",
+      "success",
+      "className",
+      "disabled",
+      "checked",
+      "defaultChecked",
+      "onChange",
+      "id"
+    ]);
+    const g = N !== void 0, [H, E] = Y(
+      x != null ? x : !1
+    ), c = g ? !!N : H, J = Z(), m = B || `switch-${J}`, R = d(
+      () => t ? `${m}-label` : void 0,
+      [t, m]
+    ), $ = d(
+      () => s ? `${m}-helper` : void 0,
+      [s, m]
+    ), u = d(() => _(e), [e]), j = d(
+      () => "focus:border-line-focus".replace("focus:border-", "focus:ring-"),
+      []
+    ), L = d(
+      () => y(
+        "relative",
+        "inline-flex",
+        "shrink-0",
+        "cursor-pointer",
+        W("full"),
+        "border-2",
+        "border-transparent",
+        M("base"),
+        "focus:outline-none",
+        "focus:ring-2",
+        j,
+        "focus:ring-offset-2",
+        u.track,
+        c ? "bg-surface-brand" : "bg-surface-muted",
+        // Border feedback only shows in the off state — the on-state
+        // brand background already saturates the track and overrides
+        // any colored outline visually. Error wins over success.
+        p && !c && "border-error",
+        !p && k && !c && "border-success",
+        n && "opacity-50 cursor-not-allowed",
+        S
+      ),
+      [
+        j,
+        u.track,
+        c,
+        p,
+        k,
+        n,
+        S
+      ]
+    ), O = d(
+      () => y(
+        "pointer-events-none",
+        "inline-block",
+        W("full"),
+        "bg-surface-base",
+        "shadow",
+        "transform",
+        M("base"),
+        u.thumb,
+        c ? u.translate : "translate-x-0"
+      ),
+      [u.thumb, u.translate, c]
+    );
+    return /* @__PURE__ */ w("div", { className: y("flex", "items-start", q("md", "gap")), children: [
+      /* @__PURE__ */ w("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            className: L,
+            role: "switch",
+            "aria-checked": c,
+            "aria-labelledby": R,
+            "aria-describedby": $,
+            disabled: n,
+            onClick: K(
+              (o) => {
+                if (n) return;
+                const l = !c;
+                if (g || E(l), a) {
+                  const v = f(i({}, o), {
+                    target: f(i({}, o.target), { checked: l }),
+                    currentTarget: f(i({}, o.currentTarget), { checked: l })
+                  });
+                  a(v);
+                }
+              },
+              [n, a, c, g]
+            ),
+            onKeyDown: K(
+              (o) => {
+                if (n || o.key !== "Enter" && o.key !== " ") return;
+                o.preventDefault();
+                const l = !c;
+                if (g || E(l), a) {
+                  const v = f(i({}, o), {
+                    target: f(i({}, o.target), { checked: l }),
+                    currentTarget: f(i({}, o.currentTarget), { checked: l })
+                  });
+                  a(v);
+                }
+              },
+              [n, a, c, g]
+            ),
+            children: /* @__PURE__ */ b("span", { className: O })
+          }
+        ),
+        /* @__PURE__ */ b(
+          "input",
+          i({
+            ref: G,
+            type: "checkbox",
+            id: m,
+            checked: c,
+            onChange: a != null ? a : (() => {
+            }),
+            disabled: n,
+            className: "sr-only",
+            "aria-hidden": "true",
+            tabIndex: -1
+          }, C)
+        )
+      ] }),
+      (t || s) && /* @__PURE__ */ w("div", { className: "flex-1", children: [
+        t && /* @__PURE__ */ b(
+          "label",
+          {
+            id: R,
+            htmlFor: m,
+            className: y(
+              "block",
+              z("bodySmall"),
+              tt("label"),
+              p ? "text-fg-error" : "text-fg-primary",
+              n ? "opacity-50" : "cursor-pointer"
+            ),
+            children: t
+          }
+        ),
+        s && /* @__PURE__ */ b(
+          "p",
+          {
+            id: $,
+            className: y(
+              q("xs", "mt"),
+              z("bodySmall"),
+              p ? "text-fg-error" : k ? "text-fg-success" : "text-fg-secondary"
+            ),
+            children: s
+          }
+        )
+      ] })
+    ] });
+  })
+);
+rt.displayName = "Switch";
+export {
+  rt as default
+};
+//# sourceMappingURL=Switch.js.map