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

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

@@ -0,0 +1,229 @@
+"use client";
+var M = Object.defineProperty, T = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
+var V = (e, r, a) => r in e ? M(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, c = (e, r) => {
+  for (var a in r || (r = {}))
+    C.call(r, a) && V(e, a, r[a]);
+  if (f)
+    for (var a of f(r))
+      R.call(r, a) && V(e, a, r[a]);
+  return e;
+}, m = (e, r) => T(e, q(r));
+var j = (e, r) => {
+  var a = {};
+  for (var t in e)
+    C.call(e, t) && r.indexOf(t) < 0 && (a[t] = e[t]);
+  if (e != null && f)
+    for (var t of f(e))
+      r.indexOf(t) < 0 && R.call(e, t) && (a[t] = e[t]);
+  return a;
+};
+import { jsx as B } from "react/jsx-runtime";
+import { forwardRef as F, useMemo as v, useCallback as w } from "react";
+import { useNavLink as G } from "./hooks/useNavLink.js";
+import { getSpacingClass as i } from "../../tokens/spacing.js";
+import { getTypographySize as x } from "../../tokens/typography.js";
+import { getRadiusClass as H } from "../../tokens/radius.js";
+import { cn as o } from "../../utils/cn.js";
+import { cva as J } from "../../utils/cva.js";
+const O = J(
+  // Base classes
+  o(
+    "inline-flex",
+    "items-center",
+    "transition-colors",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed",
+    "disabled:pointer-events-none",
+    "no-underline"
+  ),
+  {
+    variants: {
+      variant: {
+        default: o(
+          "text-fg-primary",
+          "hover:opacity-80",
+          "focus-visible:opacity-100",
+          "focus:ring-line-brand"
+        ),
+        underline: o(
+          "text-fg-primary",
+          "hover:opacity-80",
+          "focus-visible:opacity-100",
+          "border-b-2",
+          "border-transparent",
+          "hover:border-current",
+          "focus:ring-line-brand"
+        ),
+        background: o(
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          H("md"),
+          "focus:ring-line-brand"
+        )
+      },
+      size: {
+        sm: o(
+          i("sm", "px"),
+          i("xs", "py"),
+          x("bodySmall")
+        ),
+        md: o(
+          i("base", "px"),
+          i("sm", "py"),
+          x("body")
+        ),
+        lg: o(
+          i("lg", "px"),
+          i("md", "py"),
+          x("bodyLarge")
+        )
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    },
+    compoundVariants: [
+      {
+        variant: "underline",
+        size: "sm",
+        class: i("0.5", "pb")
+      },
+      {
+        variant: "underline",
+        size: "md",
+        class: i("xs", "pb")
+      },
+      {
+        variant: "underline",
+        size: "lg",
+        class: i("1.5", "pb")
+      },
+      {
+        variant: "background",
+        size: "sm",
+        class: i("xs", "px")
+      },
+      {
+        variant: "background",
+        size: "md",
+        class: i("sm", "px")
+      },
+      {
+        variant: "background",
+        size: "lg",
+        class: i("base", "px")
+      }
+    ]
+  }
+), Q = F(
+  function(U, A) {
+    var L = U, {
+      href: r,
+      children: a,
+      active: t,
+      disabled: s = !1,
+      variant: d = "default",
+      size: y = "md",
+      as: b,
+      className: k,
+      "aria-label": h,
+      onClick: l,
+      onKeyDown: p
+    } = L, z = j(L, [
+      "href",
+      "children",
+      "active",
+      "disabled",
+      "variant",
+      "size",
+      "as",
+      "className",
+      "aria-label",
+      "onClick",
+      "onKeyDown"
+    ]);
+    const u = v(() => t !== void 0 ? t : !1, [t]), { NextLink: g } = G({ href: r, active: u }), E = b || g || "a", N = v(() => {
+      if (!u) return "";
+      switch (d) {
+        case "underline":
+          return o(
+            "border-b-2",
+            "border-line-brand",
+            "text-fg-brand-emphasis"
+          );
+        case "background":
+          return o("bg-surface-brand-muted", "text-fg-brand-emphasis");
+        default:
+          return o("text-fg-brand-emphasis", "font-semibold");
+      }
+    }, [u, d]), P = w(
+      (n) => {
+        if (s) {
+          n.preventDefault(), n.stopPropagation();
+          return;
+        }
+        l == null || l(n);
+      },
+      [s, l]
+    ), S = w(
+      (n) => {
+        if (s) {
+          (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.stopPropagation());
+          return;
+        }
+        p == null || p(n);
+      },
+      [s, p]
+    ), I = v(() => {
+      const n = c({
+        className: o(
+          O({ variant: d, size: y }),
+          N,
+          s && "opacity-50 cursor-not-allowed pointer-events-none",
+          k
+        ),
+        "aria-current": u ? "page" : void 0,
+        "aria-disabled": s ? !0 : void 0,
+        "aria-label": h,
+        tabIndex: s ? -1 : void 0,
+        onClick: P,
+        onKeyDown: S,
+        "data-active": u,
+        "data-disabled": s
+      }, z);
+      return g && !b ? m(c({}, n), {
+        href: s ? void 0 : r
+      }) : m(c({}, n), {
+        href: s ? void 0 : r
+      });
+    }, [
+      d,
+      y,
+      N,
+      s,
+      k,
+      u,
+      h,
+      P,
+      S,
+      r,
+      g,
+      b,
+      z
+    ]);
+    return /* @__PURE__ */ B(E, m(c({ ref: A }, I), { children: a }));
+  }
+);
+Q.displayName = "NavLink";
+export {
+  Q as NavLink,
+  Q as default
+};
+//# sourceMappingURL=NavLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.js","sources":["../../../../../src/ui/primitives/NavLink/NavLink.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * NavLink Component\n *\n * Navigation link component with active state detection and Next.js integration.\n *\n * @see EPIC-001: NavLink Component (Atom)\n * @see RFC-001: NavLink Hook Strategy (APPROVED)\n * @see RFC-002: Next.js Integration Strategy (APPROVED)\n * @see ADR-001: Active State Detection (ACCEPTED)\n */\n\nimport React, { forwardRef, useMemo, useCallback } from \"react\";\nimport type { NavLinkProps } from \"./types\";\nimport { useNavLink } from \"./hooks/useNavLink\";\nimport { cn, cva } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\n/**\n * NavLink Variants using CVA\n * Type-safe variant system for NavLink component\n */\nconst navLinkVariants = cva(\n  // Base classes\n  cn(\n    \"inline-flex\",\n    \"items-center\",\n    \"transition-colors\",\n    \"focus:outline-none\",\n    \"focus:ring-2\",\n    \"focus:ring-offset-2\",\n    \"disabled:opacity-50\",\n    \"disabled:cursor-not-allowed\",\n    \"disabled:pointer-events-none\",\n    \"no-underline\",\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(\n          \"text-fg-primary\",\n          \"hover:opacity-80\",\n          \"focus-visible:opacity-100\",\n          \"focus:ring-line-brand\",\n        ),\n        underline: cn(\n          \"text-fg-primary\",\n          \"hover:opacity-80\",\n          \"focus-visible:opacity-100\",\n          \"border-b-2\",\n          \"border-transparent\",\n          \"hover:border-current\",\n          \"focus:ring-line-brand\",\n        ),\n        background: cn(\n          \"text-fg-primary\",\n          \"hover:bg-surface-hover\",\n          getRadiusClass(\"md\"),\n          \"focus:ring-line-brand\",\n        ),\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"bodySmall\"),\n        ),\n        md: cn(\n          getSpacingClass(\"base\", \"px\"),\n          getSpacingClass(\"sm\", \"py\"),\n          getTypographySize(\"body\"),\n        ),\n        lg: cn(\n          getSpacingClass(\"lg\", \"px\"),\n          getSpacingClass(\"md\", \"py\"),\n          getTypographySize(\"bodyLarge\"),\n        ),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n    compoundVariants: [\n      {\n        variant: \"underline\",\n        size: \"sm\",\n        class: getSpacingClass(\"0.5\", \"pb\"),\n      },\n      {\n        variant: \"underline\",\n        size: \"md\",\n        class: getSpacingClass(\"xs\", \"pb\"),\n      },\n      {\n        variant: \"underline\",\n        size: \"lg\",\n        class: getSpacingClass(\"1.5\", \"pb\"),\n      },\n      {\n        variant: \"background\",\n        size: \"sm\",\n        class: getSpacingClass(\"xs\", \"px\"),\n      },\n      {\n        variant: \"background\",\n        size: \"md\",\n        class: getSpacingClass(\"sm\", \"px\"),\n      },\n      {\n        variant: \"background\",\n        size: \"lg\",\n        class: getSpacingClass(\"base\", \"px\"),\n      },\n    ],\n  },\n);\n\n/**\n * NavLink Component\n *\n * Navigation link with active state detection and Next.js integration.\n *\n * @example\n * ```tsx\n * <NavLink href=\"/home\">Home</NavLink>\n * <NavLink href=\"/about\" variant=\"underline\" active>About</NavLink>\n * <NavLink href=\"/contact\" variant=\"background\" size=\"lg\">Contact</NavLink>\n * ```\n *\n * Note: Auto-detection of active state via usePathname is deferred to a future enhancement\n * to avoid issues with conditional hook calls. For now, use the `active` prop manually\n * or implement pathname detection in the parent component.\n */\nexport const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(\n  function NavLink(\n    {\n      href,\n      children,\n      active,\n      disabled = false,\n      variant = \"default\",\n      size = \"md\",\n      as,\n      className,\n      \"aria-label\": ariaLabel,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) {\n    // Calculate active state\n    // Priority: manual active > false (ADR-001)\n    // TODO: Add auto-detect via usePathname in future enhancement\n    // This requires a wrapper component pattern to avoid conditional hook calls\n    const calculatedActive = useMemo(() => {\n      // Manual active prop has priority (ADR-001)\n      if (active !== undefined) {\n        return active;\n      }\n\n      // Default to false\n      // TODO: Auto-detect using usePathname (if Next.js available)\n      return false;\n    }, [active]);\n\n    // Use hook for Next.js Link integration\n    const { NextLink } = useNavLink({ href, active: calculatedActive });\n\n    // Determine Link component\n    // Priority: as prop > NextLink (auto-detected) > 'a' (RFC-002)\n    const LinkComponent: React.ElementType = as || NextLink || \"a\";\n\n    // Active state classes\n    const activeClasses = useMemo(() => {\n      if (!calculatedActive) return \"\";\n\n      switch (variant) {\n        case \"underline\":\n          return cn(\n            \"border-b-2\",\n            \"border-line-brand\",\n            \"text-fg-brand-emphasis\",\n          );\n        case \"background\":\n          return cn(\"bg-surface-brand-muted\", \"text-fg-brand-emphasis\");\n        case \"default\":\n        default:\n          return cn(\"text-fg-brand-emphasis\", \"font-semibold\");\n      }\n    }, [calculatedActive, variant]);\n\n    // Handle disabled state\n    const handleClick = useCallback(\n      (e: React.MouseEvent<HTMLAnchorElement>) => {\n        if (disabled) {\n          e.preventDefault();\n          e.stopPropagation();\n          return;\n        }\n        onClick?.(e);\n      },\n      [disabled, onClick],\n    );\n\n    // Handle keyboard navigation\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLAnchorElement>) => {\n        if (disabled) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n          return;\n        }\n        onKeyDown?.(e);\n      },\n      [disabled, onKeyDown],\n    );\n\n    // Prepare props for LinkComponent\n    // Next.js Link has different prop structure, so we need to handle it\n    const linkProps = useMemo(() => {\n      const baseProps = {\n        className: cn(\n          navLinkVariants({ variant, size }),\n          activeClasses,\n          disabled && \"opacity-50 cursor-not-allowed pointer-events-none\",\n          className,\n        ),\n        \"aria-current\": calculatedActive ? \"page\" : undefined,\n        \"aria-disabled\": disabled ? true : undefined,\n        \"aria-label\": ariaLabel,\n        tabIndex: disabled ? -1 : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        \"data-active\": calculatedActive,\n        \"data-disabled\": disabled,\n        ...props,\n      };\n\n      // For Next.js Link, we need to pass href differently\n      if (NextLink && !as) {\n        return {\n          ...baseProps,\n          href: disabled ? undefined : href,\n        };\n      }\n\n      // For regular anchor or custom component\n      return {\n        ...baseProps,\n        href: disabled ? undefined : href,\n      };\n    }, [\n      variant,\n      size,\n      activeClasses,\n      disabled,\n      className,\n      calculatedActive,\n      ariaLabel,\n      handleClick,\n      handleKeyDown,\n      href,\n      NextLink,\n      as,\n      props,\n    ]);\n\n    return (\n      <LinkComponent ref={ref} {...linkProps}>\n        {children}\n      </LinkComponent>\n    );\n  },\n);\n\nNavLink.displayName = \"NavLink\";\n\nexport default NavLink;\n"],"names":["navLinkVariants","cva","cn","getRadiusClass","getSpacingClass","getTypographySize","NavLink","forwardRef","_a","ref","_b","href","children","active","disabled","variant","size","as","className","ariaLabel","onClick","onKeyDown","props","__objRest","calculatedActive","useMemo","NextLink","useNavLink","LinkComponent","activeClasses","handleClick","useCallback","e","handleKeyDown","linkProps","baseProps","__spreadValues","__spreadProps","jsx"],"mappings":"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"}

package/dist/granular/ui/primitives/NavLink/hooks/useNavLink.js

@@ -0,0 +1,15 @@
+"use client";
+import { useMemo as i } from "react";
+function s({
+  href: n,
+  active: e
+}) {
+  return {
+    isActive: i(() => e !== void 0 ? e : !1, [e]),
+    NextLink: void 0
+  };
+}
+export {
+  s as useNavLink
+};
+//# sourceMappingURL=useNavLink.js.map

package/dist/granular/ui/primitives/NavLink/hooks/useNavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavLink.js","sources":["../../../../../../src/ui/primitives/NavLink/hooks/useNavLink.ts"],"sourcesContent":["/**\n * useNavLink Hook\n *\n * Custom hook for NavLink active state detection and Next.js integration.\n *\n * @see RFC-001: NavLink Hook Strategy (APPROVED - Hybrid approach)\n * @see RFC-002: Next.js Integration Strategy (APPROVED - Auto-detect)\n * @see ADR-001: Active State Detection (ACCEPTED - Hybrid strategy)\n */\n\n\"use client\";\n\nimport { useMemo } from \"react\";\n\n/**\n * useNavLink Hook Options\n */\nexport interface UseNavLinkOptions {\n  /**\n   * URL of the navigation link\n   */\n  href: string;\n\n  /**\n   * Manual active state (has priority over auto-detect)\n   *\n   * Priority: manual active > auto-detect > false\n   * @see ADR-001\n   */\n  active?: boolean;\n}\n\n/**\n * useNavLink Hook Result\n */\nexport interface UseNavLinkResult {\n  /**\n   * Whether the link is active\n   */\n  isActive: boolean;\n\n  /**\n   * Next.js Link component (if available)\n   */\n  NextLink?: React.ComponentType<{\n    href: string;\n    children?: React.ReactNode;\n    [key: string]: unknown;\n  }>;\n}\n\n/**\n * useNavLink Hook\n *\n * Detects active state and provides Next.js Link integration.\n *\n * @param options - Hook options\n * @returns Hook result with active state and Next.js Link\n *\n * @example\n * ```tsx\n * const { isActive, NextLink } = useNavLink({ href: '/home' });\n *\n * const LinkComponent = NextLink || 'a';\n *\n * return (\n *   <LinkComponent href={href} className={isActive ? 'active' : ''}>\n *     {children}\n *   </LinkComponent>\n * );\n * ```\n */\nexport function useNavLink({\n  href: _href,\n  active,\n}: UseNavLinkOptions): UseNavLinkResult {\n  // Active state detection (ADR-001 ACCEPTED)\n  // Priority: manual active > auto-detect (usePathname) > false\n  const isActive = useMemo(() => {\n    // Manual active prop has priority\n    if (active !== undefined) {\n      return active;\n    }\n\n    // TODO: Auto-detect using usePathname (if Next.js available)\n    // This needs to be handled in the component since we can't conditionally call hooks\n    // The component will call usePathname if available and pass pathname to this hook\n    // For now, default to false\n    return false;\n  }, [active]);\n\n  // Consumers who want Next.js routing pass `as={NextLink}` explicitly on\n  // NavLink. We no longer auto-detect: a CommonJS `require(\"next/link\")`\n  // probe doesn't survive ESM bundlers and the auto-detect branch was\n  // already brittle in practice.\n  const NextLink = undefined;\n\n  return {\n    isActive,\n    NextLink,\n  };\n}\n"],"names":["useNavLink","_href","active","useMemo"],"mappings":";;AAwEO,SAASA,EAAW;AAAA,EACzB,MAAMC;AAAA,EACN,QAAAC;AACF,GAAwC;AAsBtC,SAAO;AAAA,IACL,UApBeC,EAAQ,MAEnBD,MAAW,SACNA,IAOF,IACN,CAACA,CAAM,CAAC;AAAA,IAUT,UAJe;AAAA,EAIf;AAEJ;"}

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

@@ -0,0 +1,182 @@
+"use client";
+var C = Object.defineProperty, F = Object.defineProperties;
+var L = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var f = (r, a, s) => a in r ? C(r, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[a] = s, b = (r, a) => {
+  for (var s in a || (a = {}))
+    u.call(a, s) && f(r, s, a[s]);
+  if (n)
+    for (var s of n(a))
+      p.call(a, s) && f(r, s, a[s]);
+  return r;
+}, h = (r, a) => F(r, L(a));
+var y = (r, a) => {
+  var s = {};
+  for (var e in r)
+    u.call(r, e) && a.indexOf(e) < 0 && (s[e] = r[e]);
+  if (r != null && n)
+    for (var e of n(r))
+      a.indexOf(e) < 0 && p.call(r, e) && (s[e] = r[e]);
+  return s;
+};
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { forwardRef as M } from "react";
+import { getSpacingClass as R } from "../../tokens/spacing.js";
+import { getTypographyWeight as $, getTypographySize as v } from "../../tokens/typography.js";
+/* empty css                             */
+import { cn as o } from "../../utils/cn.js";
+import { getRadiusClass as c } from "../../tokens/radius.js";
+import { cva as x } from "../../utils/cva.js";
+const k = x("w-full", {
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    },
+    variant: {
+      primary: "bg-surface-muted",
+      secondary: "bg-surface-muted",
+      success: "bg-success-bg-emphasis",
+      error: "bg-error-bg-emphasis",
+      warning: "bg-warning-bg-emphasis",
+      info: "bg-info-bg-emphasis"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), w = x("transition-all", {
+  variants: {
+    variant: {
+      primary: "bg-surface-brand",
+      secondary: "bg-surface-secondary",
+      success: "bg-success",
+      error: "bg-error",
+      warning: "bg-warning",
+      info: "bg-info"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), A = M(function(B, z) {
+  var g = B, {
+    value: a,
+    max: s = 100,
+    variant: e = "primary",
+    size: N = "md",
+    showLabel: P = !1,
+    label: m,
+    "aria-label": S,
+    className: V = ""
+  } = g, j = y(g, [
+    "value",
+    "max",
+    "variant",
+    "size",
+    "showLabel",
+    "label",
+    "aria-label",
+    "className"
+  ]);
+  const i = a === void 0, t = i ? void 0 : Math.min(Math.max(a / s * 100, 0), 100), T = S || (i ? "Loading in progress" : `Progress: ${t == null ? void 0 : t.toFixed(0)}%`);
+  return /* @__PURE__ */ d("div", h(b({ ref: z, className: o("w-full", V) }, j), { children: [
+    P && (m || !i) && /* @__PURE__ */ d(
+      "div",
+      {
+        className: o(
+          "flex",
+          "items-center",
+          "justify-between",
+          R("xs", "mb")
+        ),
+        children: [
+          m && /* @__PURE__ */ l(
+            "span",
+            {
+              className: o(
+                v("bodySmall"),
+                $("label"),
+                "text-fg-primary"
+              ),
+              children: m
+            }
+          ),
+          !i && t !== void 0 && /* @__PURE__ */ d(
+            "span",
+            {
+              className: o(
+                v("bodySmall"),
+                "text-fg-secondary"
+              ),
+              children: [
+                t.toFixed(0),
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": i ? void 0 : 0,
+        "aria-valuemax": i ? void 0 : s,
+        "aria-valuenow": i ? void 0 : a,
+        "aria-label": T,
+        "aria-busy": i,
+        className: o(
+          "relative",
+          "w-full",
+          "overflow-hidden",
+          k({ size: N, variant: e }),
+          c("full")
+        ),
+        children: i ? /* @__PURE__ */ l(
+          "div",
+          {
+            className: o(
+              "absolute",
+              "top-0",
+              "left-0",
+              "bottom-0",
+              w({ variant: e }),
+              c("full"),
+              "motion-reduce:animate-none"
+            ),
+            style: {
+              width: "30%",
+              animation: "progress-indeterminate 1.5s ease-in-out infinite"
+            }
+          }
+        ) : /* @__PURE__ */ l(
+          "div",
+          {
+            className: o(
+              "h-full",
+              w({ variant: e }),
+              c("full"),
+              "transition-all",
+              "duration-300",
+              "ease-out"
+            ),
+            style: {
+              width: `${t}%`
+            },
+            "aria-hidden": "true"
+          }
+        )
+      }
+    )
+  ] }));
+});
+A.displayName = "Progress";
+export {
+  A as default
+};
+//# sourceMappingURL=Progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../../src/ui/primitives/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { getRadiusClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\nimport \"./Progress.css\";\n\nexport type ProgressVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\";\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProgressProps extends HTMLAttributes<HTMLDivElement> {\n  value?: number; // 0-100, undefined for indeterminate\n  max?: number; // Default 100\n  variant?: ProgressVariant;\n  size?: ProgressSize;\n  showLabel?: boolean;\n  label?: string;\n  \"aria-label\"?: string;\n}\n\n/**\n * Progress Component\n *\n * A progress bar component for displaying progress or loading states.\n * Supports both determinate (with value) and indeterminate (without value) modes.\n * Fully accessible with ARIA attributes.\n *\n * @example\n * ```tsx\n * // Determinate progress\n * <Progress value={75} variant=\"primary\" />\n *\n * // Indeterminate progress\n * <Progress variant=\"primary\" />\n *\n * // With label\n * <Progress value={50} showLabel label=\"Uploading...\" />\n * ```\n */\n// Progress variants using CVA\nconst progressTrackVariants = cva(\"w-full\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    },\n    variant: {\n      primary: \"bg-surface-muted\",\n      secondary: \"bg-surface-muted\",\n      success: \"bg-success-bg-emphasis\",\n      error: \"bg-error-bg-emphasis\",\n      warning: \"bg-warning-bg-emphasis\",\n      info: \"bg-info-bg-emphasis\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"primary\",\n  },\n});\n\nconst progressBarVariants = cva(\"transition-all\", {\n  variants: {\n    variant: {\n      primary: \"bg-surface-brand\",\n      secondary: \"bg-surface-secondary\",\n      success: \"bg-success\",\n      error: \"bg-error\",\n      warning: \"bg-warning\",\n      info: \"bg-info\",\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    value,\n    max = 100,\n    variant = \"primary\",\n    size = \"md\",\n    showLabel = false,\n    label,\n    \"aria-label\": ariaLabel,\n    className = \"\",\n    ...props\n  },\n  ref,\n) {\n  const isIndeterminate = value === undefined;\n  const percentage = isIndeterminate\n    ? undefined\n    : Math.min(Math.max((value / max) * 100, 0), 100);\n\n  const defaultAriaLabel =\n    ariaLabel ||\n    (isIndeterminate\n      ? \"Loading in progress\"\n      : `Progress: ${percentage?.toFixed(0)}%`);\n\n  return (\n    <div ref={ref} className={cn(\"w-full\", className)} {...props}>\n      {showLabel && (label || !isIndeterminate) && (\n        <div\n          className={cn(\n            \"flex\",\n            \"items-center\",\n            \"justify-between\",\n            getSpacingClass(\"xs\", \"mb\"),\n          )}\n        >\n          {label && (\n            <span\n              className={cn(\n                getTypographySize(\"bodySmall\"),\n                getTypographyWeight(\"label\"),\n                \"text-fg-primary\",\n              )}\n            >\n              {label}\n            </span>\n          )}\n          {!isIndeterminate && percentage !== undefined && (\n            <span\n              className={cn(\n                getTypographySize(\"bodySmall\"),\n                \"text-fg-secondary\",\n              )}\n            >\n              {percentage.toFixed(0)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        role=\"progressbar\"\n        aria-valuemin={isIndeterminate ? undefined : 0}\n        aria-valuemax={isIndeterminate ? undefined : max}\n        aria-valuenow={isIndeterminate ? undefined : value}\n        aria-label={defaultAriaLabel}\n        aria-busy={isIndeterminate}\n        className={cn(\n          \"relative\",\n          \"w-full\",\n          \"overflow-hidden\",\n          progressTrackVariants({ size, variant }),\n          getRadiusClass(\"full\"),\n        )}\n      >\n        {isIndeterminate ? (\n          <div\n            className={cn(\n              \"absolute\",\n              \"top-0\",\n              \"left-0\",\n              \"bottom-0\",\n              progressBarVariants({ variant }),\n              getRadiusClass(\"full\"),\n              \"motion-reduce:animate-none\",\n            )}\n            style={{\n              width: \"30%\",\n              animation: \"progress-indeterminate 1.5s ease-in-out infinite\",\n            }}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"h-full\",\n              progressBarVariants({ variant }),\n              getRadiusClass(\"full\"),\n              \"transition-all\",\n              \"duration-300\",\n              \"ease-out\",\n            )}\n            style={{\n              width: `${percentage}%`,\n            }}\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nProgress.displayName = \"Progress\";\n\nexport default Progress;\n"],"names":["progressTrackVariants","cva","progressBarVariants","Progress","forwardRef","_a","ref","_b","value","max","variant","size","showLabel","label","ariaLabel","className","props","__objRest","isIndeterminate","percentage","defaultAriaLabel","jsxs","cn","getSpacingClass","jsx","getTypographySize","getTypographyWeight","getRadiusClass"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../../src/ui/primitives/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface RadioProps 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 + Checkbox + Switch + Textarea convention;\n   * the three feedback flags (`error`, `success`, `helperText`)\n   * cover every form primitive in the DS. Error takes precedence\n   * when both `error` and `success` are set.\n   */\n  success?: boolean;\n  helperText?: string;\n}\n\n/**\n * Radio Component\n *\n * A styled radio 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 * <Radio\n *   id=\"option1\"\n *   name=\"options\"\n *   label=\"Option 1\"\n *   value=\"1\"\n *   checked={selected === \"1\"}\n *   onChange={handleChange}\n * />\n * ```\n */\nconst Radio = memo(\n  forwardRef<HTMLInputElement, RadioProps>(function Radio(\n    {\n      id,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      className = \"\",\n      disabled = 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 radioId = id || `radio-${reactId}`;\n\n    const errorId = useMemo(\n      () => (error ? `${radioId}-error` : undefined),\n      [error, radioId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${radioId}-helper` : undefined),\n      [helperText, radioId],\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 radioClasses = useMemo(\n      () =>\n        cn(\n          \"h-4\",\n          \"w-4\",\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    return (\n      <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n        <div className=\"flex items-center\">\n          <input\n            type=\"radio\"\n            id={radioId}\n            ref={ref}\n            className={radioClasses}\n            disabled={disabled}\n            aria-invalid={error}\n            aria-describedby={errorId || helperId || undefined}\n            aria-label={!label ? \"Radio button\" : undefined}\n            {...props}\n          />\n          {label && (\n            <label htmlFor={radioId} 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\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","props","__objRest","reactId","useId","radioId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","radioClasses","cn","labelClasses","getTypographyClasses","getSpacingClass","jsxs","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,IAAQC;AAAA,EACZC,EAAyC,SACvCC,GAUAC,GACA;AAXA,QAAAC,IAAAF,GACE;AAAA,UAAAG;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,SAAAC,IAAU;AAAA,MACV,YAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAW;AAAA,QAPbP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAQF,UAAMU,IAAUC,EAAA,GACVC,IAAUX,KAAM,SAASS,CAAO,IAEhCG,IAAUC;AAAA,MACd,MAAOX,IAAQ,GAAGS,CAAO,WAAW;AAAA,MACpC,CAACT,GAAOS,CAAO;AAAA,IAAA,GAGXG,IAAWD;AAAA,MACf,MAAOT,IAAa,GAAGO,CAAO,YAAY;AAAA,MAC1C,CAACP,GAAYO,CAAO;AAAA,IAAA,GAIhBI,IAAmBF,EAAQ,MAAM,2BAA2B,CAAA,CAAE,GAE9DG,IAAiBH,EAAQ,MAAM,sBAAsB,CAAA,CAAE,GAEvDI,IAAiBJ;AAAA,MACrB,MACEX,IACIc,EAAe,QAAQ,iBAAiB,aAAa,IACrDD,EAAiB,QAAQ,iBAAiB,aAAa;AAAA,MAC7D,CAACb,GAAOc,GAAgBD,CAAgB;AAAA,IAAA,GAKpCG,IAAeL;AAAA,MACnB,MACEM;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAf,KAAS;AAAA,QACT,CAACA,KAASC,KAAW;AAAA,QACrBE;AAAA,MAAA;AAAA,MAEJ,CAACY,GAAgBf,GAAOC,GAASE,CAAS;AAAA,IAAA,GAGtCe,IAAeP;AAAA,MACnB,MACEM;AAAA,QACEE,EAAqB,OAAO;AAAA,QAC5BC,EAAgB,MAAM,IAAI;AAAA,QAC1BhB,IAAW,kCAAkC;AAAA,MAAA;AAAA,MAEjD,CAACA,CAAQ;AAAA,IAAA;AAGX,WACE,gBAAAiB,EAAC,OAAA,EAAI,WAAWJ,EAAG,QAAQ,YAAYG,EAAgB,MAAM,IAAI,CAAC,GAChE,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAAC,EAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAId;AAAA,YACJ,KAAAb;AAAA,YACA,WAAWoB;AAAA,YACX,UAAAZ;AAAA,YACA,gBAAcJ;AAAA,YACd,oBAAkBU,KAAWE,KAAY;AAAA,YACzC,cAAab,IAAyB,SAAjB;AAAA,aACjBM;AAAA,QAAA;AAAA,QAELN,KACC,gBAAAuB,EAAC,SAAA,EAAM,SAASb,GAAS,WAAWS,GACjC,UAAAnB,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,OACEC,KAASC,KAAWC,MACpB,gBAAAoB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIZ,KAAWE;AAAA,UACf,WAAWK;AAAA,YACTG,EAAgB,MAAM,IAAI;AAAA,YAC1BD,EAAqB,SAAS;AAAA,YAC9BnB,IACI,kBACAC,IACE,oBACA;AAAA,UAAA;AAAA,UAER,MAAMD,KAASC,IAAU,UAAU;AAAA,UAElC,UAAAD,IAAQE,KAAc,4BAA4BA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD,GAEJ;AAAA,EAEJ,CAAC;AACH;AAEAV,EAAM,cAAc;"}