@fabio.caffarello/react-design-system 3.7.0 → 3.9.0

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

@@ -0,0 +1,129 @@
+"use client";
+var B = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var I = (c, e, s) => e in c ? B(c, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : c[e] = s, F = (c, e) => {
+  for (var s in e || (e = {}))
+    N.call(e, s) && I(c, s, e[s]);
+  if (d)
+    for (var s of d(e))
+      w.call(e, s) && I(c, s, e[s]);
+  return c;
+};
+var $ = (c, e) => {
+  var s = {};
+  for (var o in c)
+    N.call(c, o) && e.indexOf(o) < 0 && (s[o] = c[o]);
+  if (c != null && d)
+    for (var o of d(c))
+      e.indexOf(o) < 0 && w.call(c, o) && (s[o] = c[o]);
+  return s;
+};
+import { jsxs as j, jsx as p } from "react/jsx-runtime";
+import { memo as D, forwardRef as G, useId as H, useMemo as r, useRef as J, useCallback as K, useEffect as L } from "react";
+import { getTypographyClasses as E } from "../../tokens/typography.js";
+import { getRadiusClass as O } from "../../tokens/radius.js";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import { cn as u } from "../../utils/cn.js";
+const P = D(
+  G(function(Q, n) {
+    var x = Q, {
+      id: e,
+      label: s,
+      error: o = !1,
+      success: a = !1,
+      helperText: t,
+      className: h = "",
+      disabled: m = !1,
+      indeterminate: f = !1
+    } = x, M = $(x, [
+      "id",
+      "label",
+      "error",
+      "success",
+      "helperText",
+      "className",
+      "disabled",
+      "indeterminate"
+    ]);
+    const S = H(), i = e || `checkbox-${S}`, y = r(
+      () => o ? `${i}-error` : void 0,
+      [o, i]
+    ), C = r(
+      () => t ? `${i}-helper` : void 0,
+      [t, i]
+    ), k = r(() => "focus:border-line-focus", []), v = r(() => "focus:border-error", []), R = r(
+      () => o ? v.replace("focus:border-", "focus:ring-") : k.replace("focus:border-", "focus:ring-"),
+      [o, v, k]
+    ), q = r(
+      () => u(
+        "h-4",
+        "w-4",
+        O("sm"),
+        "border",
+        "border-line-default",
+        "text-fg-brand",
+        "focus:ring-2",
+        R,
+        "focus:ring-offset-2",
+        "disabled:opacity-50",
+        "disabled:cursor-not-allowed",
+        "cursor-pointer",
+        o && "border-error",
+        !o && a && "border-success",
+        h
+      ),
+      [R, o, a, h]
+    ), z = r(
+      () => u(
+        E("label"),
+        g("sm", "ml"),
+        m ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      ),
+      [m]
+    ), b = J(null), A = K(
+      (l) => {
+        b.current = l, typeof n == "function" ? n(l) : n && (n.current = l), l && (l.indeterminate = f);
+      },
+      [n, f]
+    );
+    return L(() => {
+      b.current && (b.current.indeterminate = f);
+    }, [f]), /* @__PURE__ */ j("div", { className: u("flex", "flex-col", g("sm", "my")), children: [
+      /* @__PURE__ */ j("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ p(
+          "input",
+          F({
+            type: "checkbox",
+            id: i,
+            ref: A,
+            className: q,
+            disabled: m,
+            "aria-invalid": o,
+            "aria-describedby": y || C || void 0,
+            "aria-label": s ? void 0 : "Checkbox"
+          }, M)
+        ),
+        s && /* @__PURE__ */ p("label", { htmlFor: i, className: z, children: s })
+      ] }),
+      (o || a || t) && /* @__PURE__ */ p(
+        "div",
+        {
+          id: y || C,
+          className: u(
+            g("xs", "mt"),
+            E("caption"),
+            o ? "text-fg-error" : a ? "text-fg-success" : "text-fg-secondary"
+          ),
+          role: o || a ? "alert" : void 0,
+          children: o ? t || "This field has an error" : t
+        }
+      )
+    ] });
+  })
+);
+P.displayName = "Checkbox";
+export {
+  P as default
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/ui/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useRef,\n  useEffect,\n  forwardRef,\n  memo,\n  useId,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n> {\n  label?: ReactNode;\n  error?: boolean;\n  /**\n   * Validation success state — paints the border and (when\n   * `helperText` is also set) the helper-text color green. Matches\n   * the Input + Select + Radio + Switch + Textarea convention; the\n   * three feedback flags (`error`, `success`, `helperText`) cover\n   * every form primitive in the DS. Error takes precedence when\n   * both `error` and `success` are set.\n   */\n  success?: boolean;\n  helperText?: string;\n  indeterminate?: boolean;\n}\n\n/**\n * Checkbox Component\n *\n * A styled checkbox input component.\n * Follows Atomic Design principles as an Atom component.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms\"\n *   checked={checked}\n *   onChange={handleChange}\n * />\n * ```\n */\nconst Checkbox = memo(\n  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n    {\n      id,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      className = \"\",\n      disabled = false,\n      indeterminate = false,\n      ...props\n    },\n    ref,\n  ) {\n    // Stable fallback id when the consumer doesn't provide one. useId\n    // is SSR-safe and stable across renders, replacing the deprecated\n    // Math.random().substr() pattern.\n    const reactId = useId();\n    const checkboxId = id || `checkbox-${reactId}`;\n\n    const errorId = useMemo(\n      () => (error ? `${checkboxId}-error` : undefined),\n      [error, checkboxId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${checkboxId}-helper` : undefined),\n      [helperText, checkboxId],\n    );\n\n    // Memoize focus ring colors\n    const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n    const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n    const focusRingColor = useMemo(\n      () =>\n        error\n          ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n          : primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n      [error, errorFocusRing, primaryFocusRing],\n    );\n\n    // Memoize classes — error wins over success when both flags are\n    // set (a field cannot be valid AND invalid; treat it as invalid).\n    const checkboxClasses = useMemo(\n      () =>\n        cn(\n          \"h-4\",\n          \"w-4\",\n          getRadiusClass(\"sm\"),\n          \"border\",\n          \"border-line-default\",\n          \"text-fg-brand\",\n          \"focus:ring-2\",\n          focusRingColor,\n          \"focus:ring-offset-2\",\n          \"disabled:opacity-50\",\n          \"disabled:cursor-not-allowed\",\n          \"cursor-pointer\",\n          error && \"border-error\",\n          !error && success && \"border-success\",\n          className,\n        ),\n      [focusRingColor, error, success, className],\n    );\n\n    const labelClasses = useMemo(\n      () =>\n        cn(\n          getTypographyClasses(\"label\"),\n          getSpacingClass(\"sm\", \"ml\"),\n          disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n        ),\n      [disabled],\n    );\n\n    // Set indeterminate state via ref\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    // Memoize callback ref\n    const setRef = useCallback(\n      (element: HTMLInputElement | null) => {\n        internalRef.current = element;\n\n        // Handle forwarded ref (can be function or object)\n        if (typeof ref === \"function\") {\n          ref(element);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            element;\n        }\n\n        // Set indeterminate state\n        if (element) {\n          element.indeterminate = indeterminate;\n        }\n      },\n      [ref, indeterminate],\n    );\n\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    return (\n      <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n        <div className=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            id={checkboxId}\n            ref={setRef}\n            className={checkboxClasses}\n            disabled={disabled}\n            aria-invalid={error}\n            aria-describedby={errorId || helperId || undefined}\n            aria-label={!label ? \"Checkbox\" : undefined}\n            {...props}\n          />\n          {label && (\n            <label htmlFor={checkboxId} className={labelClasses}>\n              {label}\n            </label>\n          )}\n        </div>\n        {(error || success || helperText) && (\n          <div\n            id={errorId || helperId}\n            className={cn(\n              getSpacingClass(\"xs\", \"mt\"),\n              getTypographyClasses(\"caption\"),\n              error\n                ? \"text-fg-error\"\n                : success\n                  ? \"text-fg-success\"\n                  : \"text-fg-secondary\",\n            )}\n            role={error || success ? \"alert\" : undefined}\n          >\n            {error ? helperText || \"This field has an error\" : helperText}\n          </div>\n        )}\n      </div>\n    );\n  }),\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","indeterminate","props","__objRest","reactId","useId","checkboxId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","checkboxClasses","cn","getRadiusClass","labelClasses","getTypographyClasses","getSpacingClass","internalRef","useRef","setRef","useCallback","element","useEffect","jsxs","jsx","__spreadValues"],"mappings":"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"}

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

@@ -0,0 +1,206 @@
+"use client";
+import { jsx as n, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as z } from "react";
+import { X as R } from "lucide-react";
+import { Slot as S } from "@radix-ui/react-slot";
+import { getRadiusClass as u } from "../../tokens/radius.js";
+import { getSpacingClass as r } from "../../tokens/spacing.js";
+import { getTypographySize as c } from "../../tokens/typography.js";
+import { cn as e } from "../../utils/cn.js";
+import { cva as j } from "../../utils/cva.js";
+const h = j(
+  // Base classes
+  e(
+    "inline-flex",
+    "items-center",
+    "font-medium",
+    u("full"),
+    r("xs", "gap")
+  ),
+  {
+    variants: {
+      variant: {
+        default: e(
+          "bg-surface-muted",
+          "text-fg-primary",
+          "border",
+          "border-line-default"
+        ),
+        outlined: e(
+          "bg-transparent",
+          "text-fg-primary",
+          "border",
+          "border-line-default"
+        ),
+        filled: e(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "border",
+          "border-transparent"
+        )
+      },
+      size: {
+        sm: e(
+          r("xs", "px"),
+          r("xs", "py"),
+          c("caption")
+        ),
+        md: e(
+          r("sm", "px"),
+          r("xs", "py"),
+          c("bodySmall")
+        ),
+        lg: e(
+          r("md", "px"),
+          r("sm", "py"),
+          c("body")
+        )
+      },
+      selected: {
+        true: e(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "border",
+          "border-line-brand"
+        ),
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        selected: !0,
+        variant: "default",
+        class: ""
+        // Override variant when selected
+      },
+      {
+        selected: !0,
+        variant: "outlined",
+        class: ""
+        // Override variant when selected
+      },
+      {
+        selected: !0,
+        variant: "filled",
+        class: ""
+        // Override variant when selected
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      selected: !1,
+      disabled: !1
+    }
+  }
+), k = z(function(p, b) {
+  const {
+    children: a,
+    variant: m = "default",
+    size: g = "md",
+    selected: l = !1,
+    disabled: s = !1,
+    className: v = "",
+    "aria-label": o,
+    tabIndex: d,
+    asChild: C = !1
+  } = p, x = (() => {
+    if (o) return o;
+    if (typeof a == "string") return a;
+    if (typeof a == "object" && a !== null && "props" in a) {
+      const t = a.props;
+      if (t != null && t.children && typeof t.children == "string")
+        return t.children;
+    }
+  })();
+  if (C)
+    return /* @__PURE__ */ n(
+      S,
+      {
+        ref: b,
+        className: e(
+          h({ variant: m, size: g, selected: l, disabled: s }),
+          v
+        ),
+        "aria-label": o,
+        "aria-disabled": s || void 0,
+        tabIndex: d,
+        children: a
+      }
+    );
+  const { onRemove: f, onClick: i } = p, y = i !== void 0, N = y && !s, w = (t) => {
+    s || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i == null || i());
+  };
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      ref: b,
+      className: e(
+        h({ variant: m, size: g, selected: l, disabled: s }),
+        f && r("xs", "pr"),
+        v
+      ),
+      "aria-disabled": s,
+      children: [
+        y ? /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: s ? void 0 : i,
+            onKeyDown: w,
+            disabled: s,
+            "aria-pressed": l ? !0 : void 0,
+            "aria-label": o || x,
+            tabIndex: d !== void 0 ? d : N ? 0 : void 0,
+            className: e(
+              "flex-1",
+              "bg-transparent",
+              "border-0",
+              r("none", "p"),
+              "text-inherit",
+              "text-left",
+              "cursor-pointer",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-2",
+              u("full")
+            ),
+            children: a
+          }
+        ) : /* @__PURE__ */ n("span", { children: a }),
+        f && !s && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: (t) => {
+              t.stopPropagation(), f();
+            },
+            className: e(
+              r("xs", "ml"),
+              "hover:bg-tint-hover",
+              u("full"),
+              r("xs", "p"),
+              "transition-colors",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-1"
+            ),
+            "aria-label": `Remove ${x || "chip"}`,
+            children: /* @__PURE__ */ n(R, { className: "h-3 w-3", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+k.displayName = "Chip";
+export {
+  k as default
+};
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../../../src/ui/primitives/Chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type ChipVariant = \"default\" | \"outlined\" | \"filled\";\nexport type ChipSize = \"sm\" | \"md\" | \"lg\";\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  variant?: ChipVariant;\n  size?: ChipSize;\n  selected?: boolean;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n  tabIndex?: number;\n}\n\ninterface ChipStandardProps extends ChipBaseProps {\n  asChild?: false;\n  onRemove?: () => void;\n  onClick?: () => void;\n}\n\n/**\n * `asChild` collapses the chip into a single node provided by the\n * consumer (typically `<Link>`). The non-interactive frame + inner\n * label-button + X structure is intentionally NOT rendered — the child\n * IS the chip. As a consequence:\n *\n *   - `onClick` and `onRemove` are forbidden at the type level. The\n *     child's own click handler (and `href`) is what fires; consumers\n *     who need a removable selected filter use the standard\n *     (non-asChild) form.\n *   - `selected` still applies the visual classes via `chipVariants`,\n *     but NO `aria-pressed` is emitted. Toggle-button semantics on\n *     `<a>` would lie — a link isn't a two-state control. Consumers\n *     that need the selected route surfaced to AT users should pass\n *     `aria-current=\"page\"` (or similar) directly on the child Link.\n *\n * @see `.claude/rules/components.md` and the inline a11y notes below.\n */\ninterface ChipAsChildProps extends ChipBaseProps {\n  asChild: true;\n  /**\n   * `onClick` is forbidden when `asChild` is true — the child element\n   * owns interaction. Pass the handler (or `href`) on the child.\n   */\n  onClick?: never;\n  /**\n   * `onRemove` is forbidden when `asChild` is true — the collapsed\n   * node has no slot for an X button. Use the standard (non-asChild)\n   * form when removal is required.\n   */\n  onRemove?: never;\n}\n\nexport type ChipProps = ChipStandardProps | ChipAsChildProps;\n\n/**\n * Chip Component\n *\n * A chip/tag for labels, filters, or selected items.\n *\n * Standard form: an outer `<div>` frame (never interactive) with an\n * inner `<button>` label (when `onClick`) and a sibling X `<button>`\n * (when `onRemove`). This shape closes two axe violations the older\n * implementation hit — `aria-required-parent` (role=option without a\n * listbox) and `nested-interactive` (clickable outer + clickable X).\n *\n * `asChild` form: a single node provided by the consumer (e.g.\n * `<Link>`), with the chip's classes projected via Radix `Slot`. See\n * the `ChipAsChildProps` JSDoc for the a11y responsibility transfer\n * — the consumer's child carries `href`, focus behavior, and any\n * route-state ARIA (`aria-current`). Forbidden in this form:\n * `onClick`, `onRemove` (TS-level).\n *\n * @example\n * ```tsx\n * <Chip>Tag</Chip>\n * <Chip onRemove={() => console.log('removed')}>Removable</Chip>\n *\n * // Navigation chip — server-rendered, zero-JS-friendly.\n * <Chip asChild variant=\"filled\">\n *   <Link href=\"/filtros/ativo\" prefetch aria-current=\"page\">Active</Link>\n * </Chip>\n * ```\n */\n// Chip variants using CVA\nconst chipVariants = cva(\n  // Base classes\n  cn(\n    \"inline-flex\",\n    \"items-center\",\n    \"font-medium\",\n    getRadiusClass(\"full\"),\n    getSpacingClass(\"xs\", \"gap\"),\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(\n          \"bg-surface-muted\",\n          \"text-fg-primary\",\n          \"border\",\n          \"border-line-default\",\n        ),\n        outlined: cn(\n          \"bg-transparent\",\n          \"text-fg-primary\",\n          \"border\",\n          \"border-line-default\",\n        ),\n        filled: cn(\n          \"bg-surface-brand-strong\",\n          \"text-fg-inverse\",\n          \"border\",\n          \"border-transparent\",\n        ),\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"xs\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"caption\"),\n        ),\n        md: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"bodySmall\"),\n        ),\n        lg: cn(\n          getSpacingClass(\"md\", \"px\"),\n          getSpacingClass(\"sm\", \"py\"),\n          getTypographySize(\"body\"),\n        ),\n      },\n      selected: {\n        true: cn(\n          \"bg-surface-brand-strong\",\n          \"text-fg-inverse\",\n          \"border\",\n          \"border-line-brand\",\n        ),\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        selected: true,\n        variant: \"default\",\n        class: \"\", // Override variant when selected\n      },\n      {\n        selected: true,\n        variant: \"outlined\",\n        class: \"\", // Override variant when selected\n      },\n      {\n        selected: true,\n        variant: \"filled\",\n        class: \"\", // Override variant when selected\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      selected: false,\n      disabled: false,\n    },\n  },\n);\n\nconst Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(props, ref) {\n  const {\n    children,\n    variant = \"default\",\n    size = \"md\",\n    selected = false,\n    disabled = false,\n    className = \"\",\n    \"aria-label\": ariaLabel,\n    tabIndex,\n    asChild = false,\n  } = props;\n\n  // Generate accessible label\n  const getAccessibleLabel = (): string | undefined => {\n    if (ariaLabel) return ariaLabel;\n    if (typeof children === \"string\") return children;\n    // For non-string children, try to extract text content\n    if (\n      typeof children === \"object\" &&\n      children !== null &&\n      \"props\" in children\n    ) {\n      const childProps = (children as { props?: { children?: unknown } }).props;\n      if (childProps?.children && typeof childProps.children === \"string\") {\n        return childProps.children;\n      }\n    }\n    return undefined;\n  };\n\n  const accessibleLabel = getAccessibleLabel();\n\n  // asChild path: collapse the entire chip structure (frame + label\n  // button + X) into the single consumer-provided node. The frame's\n  // visual classes are projected onto the child via Slot.\n  //\n  // A11Y RESPONSIBILITY TRANSFER. The child element owns:\n  //   - focus (its native focus ring, or its own focus utilities)\n  //   - activation (its own click handler / href for navigation)\n  //   - route-state semantics: `aria-current=\"page\"` on a selected\n  //     Link is the right tool. `aria-pressed` is intentionally NOT\n  //     emitted here — a link is not a toggle button.\n  //   - disabled semantics: `aria-disabled` is set when `disabled` is\n  //     true, but it does NOT block navigation. Consumers that must\n  //     truly disable navigation should also gate `href` upstream.\n  //\n  // TS forbids `onClick` / `onRemove` in this form (see ChipAsChildProps).\n  if (asChild) {\n    return (\n      <Slot\n        ref={ref}\n        className={cn(\n          chipVariants({ variant, size, selected, disabled }),\n          className,\n        )}\n        aria-label={ariaLabel}\n        aria-disabled={disabled || undefined}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  // Standard form below. Narrow `props` so the union picks up\n  // onClick/onRemove handlers (forbidden when asChild=true at TS level).\n  const { onRemove, onClick } = props as ChipStandardProps;\n\n  // Architecture:\n  //   The label is a real `<button>` whenever the chip is meant to be\n  //   activated (`onClick` provided). The X is a sibling `<button>` when\n  //   `onRemove` is provided. The outer `<div>` is NEVER interactive —\n  //   no `role`, no `tabIndex`, no event handlers. This unifies what\n  //   used to be three structural variants:\n  //     - `onClick` only → outer `role=\"button\"`           [old]\n  //     - `onClick` + `onRemove` (no selected) → label-button [PR68]\n  //     - `selected` → outer `role=\"option\"`               [old, axe-flagged]\n  //   into one consistent shape: label is the actor, outer is the chip\n  //   chrome (visual frame).\n  //\n  //   Why this matters for a11y:\n  //     - `role=\"option\"` outside `role=\"listbox\"` violates `aria-required-\n  //       parent`. The old `selected` path failed axe in every standalone\n  //       chip. Moving the action to a native `<button>` with\n  //       `aria-pressed={selected}` (toggle button pattern) communicates\n  //       state correctly without requiring a listbox parent.\n  //     - The interactive outer + inner X button produced nested-interactive\n  //       whenever the consumer combined `selected` (or `onClick`) with\n  //       `onRemove`. Outer non-interactive + sibling buttons fixes both\n  //       cases at once.\n  //\n  //   `selected` with no `onClick` is decorative only — the chip CANNOT\n  //   toggle, so it gets no `aria-pressed` (which would lie) and no role.\n  //   The visual `selected` styling (chipVariants.selected) applies, but\n  //   AT users read it as static text. Consumers who want the state\n  //   communicated must also pass `onClick` to make it a real toggle.\n  const useLabelButton = onClick !== undefined;\n  const interactive = useLabelButton && !disabled;\n\n  // Keyboard handler for the label-button. Native `<button>` activates on\n  // Enter/Space in real browsers, but JSDOM does NOT simulate Enter → click,\n  // so this preserves the previous test-friendly behavior AND adds explicit\n  // `preventDefault` (the original outer-as-button needed it; on a native\n  // button this is mostly belt-and-suspenders but harmless).\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      onClick?.();\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        chipVariants({ variant, size, selected, disabled }),\n        onRemove && getSpacingClass(\"xs\", \"pr\"),\n        className,\n      )}\n      aria-disabled={disabled}\n    >\n      {useLabelButton ? (\n        <button\n          type=\"button\"\n          onClick={disabled ? undefined : onClick}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          aria-pressed={selected ? true : undefined}\n          aria-label={ariaLabel || accessibleLabel}\n          tabIndex={\n            tabIndex !== undefined ? tabIndex : interactive ? 0 : undefined\n          }\n          className={cn(\n            \"flex-1\",\n            \"bg-transparent\",\n            \"border-0\",\n            getSpacingClass(\"none\", \"p\"),\n            \"text-inherit\",\n            \"text-left\",\n            \"cursor-pointer\",\n            \"focus:outline-none\",\n            \"focus:ring-2\",\n            \"focus:ring-line-focus\",\n            \"focus:ring-offset-2\",\n            getRadiusClass(\"full\"),\n          )}\n        >\n          {children}\n        </button>\n      ) : (\n        <span>{children}</span>\n      )}\n      {onRemove && !disabled && (\n        <button\n          type=\"button\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          className={cn(\n            getSpacingClass(\"xs\", \"ml\"),\n            \"hover:bg-tint-hover\",\n            getRadiusClass(\"full\"),\n            getSpacingClass(\"xs\", \"p\"),\n            \"transition-colors\",\n            \"focus:outline-none\",\n            \"focus:ring-2\",\n            \"focus:ring-line-focus\",\n            \"focus:ring-offset-1\",\n          )}\n          aria-label={`Remove ${accessibleLabel || \"chip\"}`}\n        >\n          <X className=\"h-3 w-3\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n});\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n"],"names":["chipVariants","cva","cn","getRadiusClass","getSpacingClass","getTypographySize","Chip","forwardRef","props","ref","children","variant","size","selected","disabled","className","ariaLabel","tabIndex","asChild","accessibleLabel","childProps","jsx","Slot","onRemove","onClick","useLabelButton","interactive","handleKeyDown","e","jsxs","X"],"mappings":";;;;;;;;;;AA+FA,MAAMA,IAAeC;AAAA;AAAA,EAEnBC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACAC,EAAe,MAAM;AAAA,IACrBC,EAAgB,MAAM,KAAK;AAAA,EAAA;AAAA,EAE7B;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAASF;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,UAAUA;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,QAAQA;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAIA;AAAA,UACFE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,MAAM,IAAI;AAAA,UAC1BC,EAAkB,SAAS;AAAA,QAAA;AAAA,QAE7B,IAAIH;AAAA,UACFE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,MAAM,IAAI;AAAA,UAC1BC,EAAkB,WAAW;AAAA,QAAA;AAAA,QAE/B,IAAIH;AAAA,UACFE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,MAAM,IAAI;AAAA,UAC1BC,EAAkB,MAAM;AAAA,QAAA;AAAA,MAC1B;AAAA,MAEF,UAAU;AAAA,QACR,MAAMH;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,UAAU;AAAA,QACV,SAAS;AAAA,QACT,OAAO;AAAA;AAAA,MAAA;AAAA,MAET;AAAA,QACE,UAAU;AAAA,QACV,SAAS;AAAA,QACT,OAAO;AAAA;AAAA,MAAA;AAAA,MAET;AAAA,QACE,UAAU;AAAA,QACV,SAAS;AAAA,QACT,OAAO;AAAA;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAEMI,IAAOC,EAAsC,SAAcC,GAAOC,GAAK;AAC3E,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,cAAcC;AAAA,IACd,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,EAAA,IACRV,GAoBEW,KAjBqB,MAA0B;AACnD,QAAIH,EAAW,QAAOA;AACtB,QAAI,OAAON,KAAa,SAAU,QAAOA;AAEzC,QACE,OAAOA,KAAa,YACpBA,MAAa,QACb,WAAWA,GACX;AACA,YAAMU,IAAcV,EAAgD;AACpE,UAAIU,KAAA,QAAAA,EAAY,YAAY,OAAOA,EAAW,YAAa;AACzD,eAAOA,EAAW;AAAA,IAEtB;AAAA,EAEF,GAEwB;AAiBxB,MAAIF;AACF,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACA,WAAWP;AAAA,UACTF,EAAa,EAAE,SAAAW,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU;AAAA,UAClDC;AAAA,QAAA;AAAA,QAEF,cAAYC;AAAA,QACZ,iBAAeF,KAAY;AAAA,QAC3B,UAAAG;AAAA,QAEC,UAAAP;AAAA,MAAA;AAAA,IAAA;AAOP,QAAM,EAAE,UAAAa,GAAU,SAAAC,EAAA,IAAYhB,GA8BxBiB,IAAiBD,MAAY,QAC7BE,IAAcD,KAAkB,CAACX,GAOjCa,IAAgB,CAACC,MAA8C;AACnE,IAAId,MACAc,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFJ,KAAA,QAAAA;AAAA,EAEJ;AAEA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAApB;AAAA,MACA,WAAWP;AAAA,QACTF,EAAa,EAAE,SAAAW,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU;AAAA,QAClDS,KAAYnB,EAAgB,MAAM,IAAI;AAAA,QACtCW;AAAA,MAAA;AAAA,MAEF,iBAAeD;AAAA,MAEd,UAAA;AAAA,QAAAW,IACC,gBAAAJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASP,IAAW,SAAYU;AAAA,YAChC,WAAWG;AAAA,YACX,UAAAb;AAAA,YACA,gBAAcD,IAAW,KAAO;AAAA,YAChC,cAAYG,KAAaG;AAAA,YACzB,UACEF,MAAa,SAAYA,IAAWS,IAAc,IAAI;AAAA,YAExD,WAAWxB;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAE,EAAgB,QAAQ,GAAG;AAAA,cAC3B;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAD,EAAe,MAAM;AAAA,YAAA;AAAA,YAGtB,UAAAO;AAAA,UAAA;AAAA,QAAA,IAGH,gBAAAW,EAAC,QAAA,EAAM,UAAAX,GAAS;AAAA,QAEjBa,KAAY,CAACT,KACZ,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,CAACO,MAAM;AACd,cAAAA,EAAE,gBAAA,GACFL,EAAA;AAAA,YACF;AAAA,YACA,WAAWrB;AAAA,cACTE,EAAgB,MAAM,IAAI;AAAA,cAC1B;AAAA,cACAD,EAAe,MAAM;AAAA,cACrBC,EAAgB,MAAM,GAAG;AAAA,cACzB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAY,UAAUe,KAAmB,MAAM;AAAA,YAE/C,UAAA,gBAAAE,EAACS,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDxB,EAAK,cAAc;"}

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

@@ -0,0 +1,115 @@
+"use client";
+var z = Object.defineProperty, D = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var h = (e, t, r) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, v = (e, t) => {
+  for (var r in t || (t = {}))
+    b.call(t, r) && h(e, r, t[r]);
+  if (l)
+    for (var r of l(t))
+      g.call(t, r) && h(e, r, t[r]);
+  return e;
+}, y = (e, t) => D(e, E(t));
+var x = (e, t) => {
+  var r = {};
+  for (var n in e)
+    b.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && l)
+    for (var n of l(e))
+      t.indexOf(n) < 0 && g.call(e, n) && (r[n] = e[n]);
+  return r;
+};
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { forwardRef as N, useRef as K, useState as S, useEffect as C, useId as q } from "react";
+import { useCollapsible as A } from "../../hooks/useCollapsible.js";
+import { getRadiusClass as B } from "../../tokens/radius.js";
+import { cn as F } from "../../utils/cn.js";
+const G = N(
+  function(J, j) {
+    var d = J, {
+      children: t,
+      trigger: r,
+      defaultOpen: n = !0,
+      open: w,
+      onOpenChange: R,
+      disabled: c = !1,
+      duration: k = 200,
+      storageKey: H,
+      className: O = ""
+    } = d, $ = x(d, [
+      "children",
+      "trigger",
+      "defaultOpen",
+      "open",
+      "onOpenChange",
+      "disabled",
+      "duration",
+      "storageKey",
+      "className"
+    ]);
+    const { isOpen: o, toggle: p } = A({
+      defaultOpen: n,
+      open: w,
+      onOpenChange: R,
+      storageKey: H
+    }), i = K(null), [u, f] = S(o ? "auto" : 0);
+    C(() => {
+      i.current && f(o ? i.current.scrollHeight : 0);
+    }, [o, t]), C(() => {
+      if (!o || !i.current) return;
+      const s = new ResizeObserver(() => {
+        i.current && o && f(i.current.scrollHeight);
+      });
+      return s.observe(i.current), () => {
+        s.disconnect();
+      };
+    }, [o]);
+    const m = `collapsible-content-${q()}`;
+    return /* @__PURE__ */ I("div", y(v({ ref: j, className: O }, $), { children: [
+      r !== void 0 && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: p,
+          onKeyDown: (s) => {
+            (s.key === "Enter" || s.key === " ") && (s.preventDefault(), c || p());
+          },
+          disabled: c,
+          "aria-expanded": o,
+          "aria-controls": m,
+          "aria-disabled": c,
+          className: F(
+            "w-full",
+            "text-left",
+            "focus:outline-none",
+            "focus:ring-2",
+            "focus:ring-line-brand",
+            "focus:ring-offset-2",
+            B("md")
+          ),
+          children: r
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          id: m,
+          ref: i,
+          style: {
+            height: typeof u == "number" ? `${u}px` : u,
+            overflow: "hidden",
+            transition: `height ${k}ms ease-in-out`
+          },
+          "aria-hidden": !o,
+          children: /* @__PURE__ */ a("div", { children: t })
+        }
+      )
+    ] }));
+  }
+);
+G.displayName = "Collapsible";
+export {
+  G as default
+};
+//# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sources":["../../../../../src/ui/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type KeyboardEvent,\n} from \"react\";\nimport {\n  useCollapsible,\n  type UseCollapsibleOptions,\n} from \"../../hooks/useCollapsible\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { cn } from \"../../utils\";\n\nexport interface CollapsibleProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\"\n> {\n  children: ReactNode;\n  /**\n   * Content for the toggle button. When omitted, Collapsible renders only\n   * the animated content panel — the caller is responsible for its own\n   * trigger and `open`-state wiring (SidebarGroup/SideNavbarGroup pattern).\n   */\n  trigger?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean; // Controlled mode\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  duration?: number; // Animation duration in ms\n  storageKey?: string; // For localStorage persistence\n}\n\n/**\n * Collapsible Component\n *\n * A generic, reusable collapsible component for any content.\n * Supports both controlled and uncontrolled modes.\n * Includes smooth animations and full ARIA support.\n *\n * @example\n * ```tsx\n * <Collapsible\n *   trigger={<button>Toggle</button>}\n *   defaultOpen={true}\n * >\n *   <div>Collapsible content</div>\n * </Collapsible>\n * ```\n */\nconst Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  function Collapsible(\n    {\n      children,\n      trigger,\n      defaultOpen = true,\n      open,\n      onOpenChange,\n      disabled = false,\n      duration = 200,\n      storageKey,\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) {\n    const { isOpen, toggle } = useCollapsible({\n      defaultOpen,\n      open,\n      onOpenChange,\n      storageKey,\n    } as UseCollapsibleOptions);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [height, setHeight] = useState<number | \"auto\">(isOpen ? \"auto\" : 0);\n\n    // Update height when content changes or isOpen changes\n    useEffect(() => {\n      if (!contentRef.current) return;\n\n      if (isOpen) {\n        // Set to actual height for animation\n        setHeight(contentRef.current.scrollHeight);\n      } else {\n        // Set to 0 for collapse animation\n        setHeight(0);\n      }\n    }, [isOpen, children]);\n\n    // Handle resize to recalculate height\n    useEffect(() => {\n      if (!isOpen || !contentRef.current) return;\n\n      const resizeObserver = new ResizeObserver(() => {\n        if (contentRef.current && isOpen) {\n          setHeight(contentRef.current.scrollHeight);\n        }\n      });\n\n      resizeObserver.observe(contentRef.current);\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [isOpen]);\n\n    // Stable per-instance ID for the collapsible content panel —\n    // referenced by aria-controls on the toggle button. The previous\n    // Math.random() approach regenerated the ID on every render, so\n    // toggle/content pairing was technically inconsistent across\n    // re-renders. useId is SSR-safe and stable.\n    const contentId = `collapsible-content-${useId()}`;\n\n    return (\n      <div ref={ref} className={className} {...props}>\n        {trigger !== undefined && (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                if (!disabled) {\n                  toggle();\n                }\n              }\n            }}\n            disabled={disabled}\n            aria-expanded={isOpen}\n            aria-controls={contentId}\n            aria-disabled={disabled}\n            className={cn(\n              \"w-full\",\n              \"text-left\",\n              \"focus:outline-none\",\n              \"focus:ring-2\",\n              \"focus:ring-line-brand\",\n              \"focus:ring-offset-2\",\n              getRadiusClass(\"md\"),\n            )}\n          >\n            {trigger}\n          </button>\n        )}\n        <div\n          id={contentId}\n          ref={contentRef}\n          style={{\n            height: typeof height === \"number\" ? `${height}px` : height,\n            overflow: \"hidden\",\n            transition: `height ${duration}ms ease-in-out`,\n          }}\n          aria-hidden={!isOpen}\n        >\n          <div>{children}</div>\n        </div>\n      </div>\n    );\n  },\n);\n\nCollapsible.displayName = \"Collapsible\";\n\nexport default Collapsible;\n"],"names":["Collapsible","forwardRef","_a","ref","_b","children","trigger","defaultOpen","open","onOpenChange","disabled","duration","storageKey","className","props","__objRest","isOpen","toggle","useCollapsible","contentRef","useRef","height","setHeight","useState","useEffect","resizeObserver","contentId","useId","jsxs","__spreadProps","__spreadValues","jsx","e","cn","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAMA,IAAcC;AAAA,EAClB,SACEC,GAYAC,GACA;AAbA,QAAAC,IAAAF,GACE;AAAA,gBAAAG;AAAA,MACA,SAAAC;AAAA,MACA,aAAAC,IAAc;AAAA,MACd,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,UAAAC,IAAW;AAAA,MACX,YAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,QATdT,GAUKU,IAAAC,EAVLX,GAUK;AAAA,MATH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,EAAE,QAAAY,GAAQ,QAAAC,EAAA,IAAWC,EAAe;AAAA,MACxC,aAAAX;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAG;AAAA,IAAA,CACwB,GAEpBO,IAAaC,EAAuB,IAAI,GACxC,CAACC,GAAQC,CAAS,IAAIC,EAA0BP,IAAS,SAAS,CAAC;AAGzE,IAAAQ,EAAU,MAAM;AACd,MAAKL,EAAW,WAIdG,EAFEN,IAEQG,EAAW,QAAQ,eAGnB,CAH+B;AAAA,IAK7C,GAAG,CAACH,GAAQX,CAAQ,CAAC,GAGrBmB,EAAU,MAAM;AACd,UAAI,CAACR,KAAU,CAACG,EAAW,QAAS;AAEpC,YAAMM,IAAiB,IAAI,eAAe,MAAM;AAC9C,QAAIN,EAAW,WAAWH,KACxBM,EAAUH,EAAW,QAAQ,YAAY;AAAA,MAE7C,CAAC;AAED,aAAAM,EAAe,QAAQN,EAAW,OAAO,GAElC,MAAM;AACX,QAAAM,EAAe,WAAA;AAAA,MACjB;AAAA,IACF,GAAG,CAACT,CAAM,CAAC;AAOX,UAAMU,IAAY,uBAAuBC,EAAA,CAAO;AAEhD,WACE,gBAAAC,EAAC,OAAAC,EAAAC,EAAA,EAAI,KAAA3B,GAAU,WAAAU,KAA0BC,IAAxC,EACE,UAAA;AAAA,MAAAR,MAAY,UACX,gBAAAyB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASd;AAAA,UACT,WAAW,CAACe,MAAwC;AAClD,aAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACGtB,KACHO,EAAA;AAAA,UAGN;AAAA,UACA,UAAAP;AAAA,UACA,iBAAeM;AAAA,UACf,iBAAeU;AAAA,UACf,iBAAehB;AAAA,UACf,WAAWuB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAC,EAAe,IAAI;AAAA,UAAA;AAAA,UAGpB,UAAA5B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAyB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIL;AAAA,UACJ,KAAKP;AAAA,UACL,OAAO;AAAA,YACL,QAAQ,OAAOE,KAAW,WAAW,GAAGA,CAAM,OAAOA;AAAA,YACrD,UAAU;AAAA,YACV,YAAY,UAAUV,CAAQ;AAAA,UAAA;AAAA,UAEhC,eAAa,CAACK;AAAA,UAEd,UAAA,gBAAAe,EAAC,SAAK,UAAA1B,EAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,IACF;AAAA,EAEJ;AACF;AAEAL,EAAY,cAAc;"}

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

@@ -0,0 +1,54 @@
+"use client";
+var h = Object.defineProperty, u = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var o = (e, r, s) => r in e ? h(e, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[r] = s, n = (e, r) => {
+  for (var s in r || (r = {}))
+    l.call(r, s) && o(e, s, r[s]);
+  if (a)
+    for (var s of a(r))
+      m.call(r, s) && o(e, s, r[s]);
+  return e;
+}, c = (e, r) => u(e, y(r));
+var p = (e, r) => {
+  var s = {};
+  for (var t in e)
+    l.call(e, t) && r.indexOf(t) < 0 && (s[t] = e[t]);
+  if (e != null && a)
+    for (var t of a(e))
+      r.indexOf(t) < 0 && m.call(e, t) && (s[t] = e[t]);
+  return s;
+};
+import { jsxs as C, jsx as f } from "react/jsx-runtime";
+import { AlertCircle as S } from "lucide-react";
+import { getTypographySize as b } from "../../tokens/typography.js";
+import { getSpacingClass as d } from "../../tokens/spacing.js";
+import { cn as j } from "../../utils/cn.js";
+function M(v) {
+  var i = v, {
+    message: e,
+    id: r,
+    className: s = ""
+  } = i, t = p(i, [
+    "message",
+    "id",
+    "className"
+  ]);
+  const g = [
+    d("xs", "mt"),
+    b("bodySmall"),
+    "text-fg-error",
+    "flex",
+    "items-center",
+    d("xs", "gap")
+  ], x = j(...g, s);
+  return /* @__PURE__ */ C("div", c(n({ role: "alert", id: r, className: x, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ f(S, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ f("span", { children: e })
+  ] }));
+}
+export {
+  M as default
+};
+//# sourceMappingURL=ErrorMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sources":["../../../../../src/ui/primitives/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { AlertCircle } from \"lucide-react\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {\n  message: string;\n  id?: string;\n}\n\n/**\n * ErrorMessage Component\n *\n * A component for displaying validation error messages.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <ErrorMessage message=\"This field is required\" id=\"email-error\" />\n * ```\n */\nexport default function ErrorMessage({\n  message,\n  id,\n  className = \"\",\n  ...props\n}: ErrorMessageProps) {\n  const baseClasses = [\n    getSpacingClass(\"xs\", \"mt\"),\n    getTypographySize(\"bodySmall\"),\n    \"text-fg-error\",\n    \"flex\",\n    \"items-center\",\n    getSpacingClass(\"xs\", \"gap\"),\n  ];\n\n  const classes = cn(...baseClasses, className);\n\n  return (\n    <div role=\"alert\" id={id} className={classes} aria-live=\"polite\" {...props}>\n      <AlertCircle className=\"h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n      <span>{message}</span>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","_a","_b","message","id","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","jsxs","__spreadProps","__spreadValues","jsx","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAwBA,EAAaC,GAKf;AALe,MAAAC,IAAAD,GACnC;AAAA,aAAAE;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAHuBH,GAIhCI,IAAAC,EAJgCL,GAIhC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClBC,EAAgB,MAAM,IAAI;AAAA,IAC1BC,EAAkB,WAAW;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACAD,EAAgB,MAAM,KAAK;AAAA,EAAA,GAGvBE,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,SACE,gBAAAQ,EAAC,OAAAC,EAAAC,EAAA,EAAI,MAAK,SAAQ,IAAAX,GAAQ,WAAWO,GAAS,aAAU,YAAaL,IAApE,EACC,UAAA;AAAA,IAAA,gBAAAU,EAACC,GAAA,EAAY,WAAU,oBAAmB,eAAY,QAAO;AAAA,IAC7D,gBAAAD,EAAC,UAAM,UAAAb,EAAA,CAAQ;AAAA,EAAA,IACjB;AAEJ;"}

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

@@ -0,0 +1,57 @@
+"use client";
+var p = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var s = (r, e, o) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, b = (r, e) => {
+  for (var o in e || (e = {}))
+    g.call(e, o) && s(r, o, e[o]);
+  if (a)
+    for (var o of a(e))
+      f.call(e, o) && s(r, o, e[o]);
+  return r;
+};
+var d = (r, e) => {
+  var o = {};
+  for (var n in r)
+    g.call(r, n) && e.indexOf(n) < 0 && (o[n] = r[n]);
+  if (r != null && a)
+    for (var n of a(r))
+      e.indexOf(n) < 0 && f.call(r, n) && (o[n] = r[n]);
+  return o;
+};
+import { jsx as c } from "react/jsx-runtime";
+import { getRadiusClass as x } from "../../tokens/radius.js";
+import { getSpacingClass as m } from "../../tokens/spacing.js";
+import { cn as t } from "../../utils/cn.js";
+function j(n) {
+  var i = n, {
+    variant: r = "info",
+    className: e
+  } = i, o = d(i, [
+    "variant",
+    "className"
+  ]);
+  const l = {
+    warning: t("bg-warning-bg", "text-warning-dark", "border-warning"),
+    error: t("bg-error-bg", "text-error-dark", "border-error"),
+    info: t("bg-info-bg", "text-info-dark", "border-info")
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    b({
+      role: "alert",
+      className: t(
+        "border",
+        m("base", "px"),
+        m("sm", "py"),
+        x("lg"),
+        l[r],
+        e
+      )
+    }, o)
+  );
+}
+export {
+  j as default
+};
+//# sourceMappingURL=Info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Info.js","sources":["../../../../../src/ui/primitives/Info/Info.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface InfoProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"info\" | \"warning\" | \"error\";\n}\n\nexport default function Info({\n  variant = \"info\",\n  className,\n  ...props\n}: InfoProps) {\n  const variantClasses = {\n    warning: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n    error: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n    info: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n  };\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        \"border\",\n        getSpacingClass(\"base\", \"px\"),\n        getSpacingClass(\"sm\", \"py\"),\n        getRadiusClass(\"lg\"),\n        variantClasses[variant],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["Info","_a","_b","variant","className","props","__objRest","variantClasses","cn","jsx","__spreadValues","getSpacingClass","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAAwBA,EAAKC,GAIf;AAJe,MAAAC,IAAAD,GAC3B;AAAA,aAAAE,IAAU;AAAA,IACV,WAAAC;AAAA,MAF2BF,GAGxBG,IAAAC,EAHwBJ,GAGxB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,QAAMK,IAAiB;AAAA,IACrB,SAASC,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,IAClE,OAAOA,EAAG,eAAe,mBAAmB,cAAc;AAAA,IAC1D,MAAMA,EAAG,cAAc,kBAAkB,aAAa;AAAA,EAAA;AAGxD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWF;AAAA,QACT;AAAA,QACAG,EAAgB,QAAQ,IAAI;AAAA,QAC5BA,EAAgB,MAAM,IAAI;AAAA,QAC1BC,EAAe,IAAI;AAAA,QACnBL,EAAeJ,CAAO;AAAA,QACtBC;AAAA,MAAA;AAAA,OAEEC;AAAA,EAAA;AAGV;"}