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

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

@@ -0,0 +1,212 @@
+"use client";
+var z = Object.defineProperty, B = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var p = (e, a, s) => a in e ? z(e, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[a] = s, u = (e, a) => {
+  for (var s in a || (a = {}))
+    f.call(a, s) && p(e, s, a[s]);
+  if (d)
+    for (var s of d(a))
+      y.call(a, s) && p(e, s, a[s]);
+  return e;
+}, m = (e, a) => B(e, S(a));
+var x = (e, a) => {
+  var s = {};
+  for (var t in e)
+    f.call(e, t) && a.indexOf(t) < 0 && (s[t] = e[t]);
+  if (e != null && d)
+    for (var t of d(e))
+      a.indexOf(t) < 0 && y.call(e, t) && (s[t] = e[t]);
+  return s;
+};
+import { jsx as V } from "react/jsx-runtime";
+import { memo as C, forwardRef as N } from "react";
+import { getRadiusClass as R } from "../../tokens/radius.js";
+import { getSpacingClass as i } from "../../tokens/spacing.js";
+import { getTypographySize as c, getTypographyWeight as T } from "../../tokens/typography.js";
+import { cn as r } from "../../utils/cn.js";
+import { cva as h } from "../../utils/cva.js";
+const W = h(
+  // Base classes
+  r(
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    T("label"),
+    R("md"),
+    "border"
+  ),
+  {
+    variants: {
+      variant: {
+        success: "",
+        warning: "",
+        error: "",
+        info: "",
+        neutral: "",
+        primary: "",
+        secondary: ""
+      },
+      size: {
+        sm: r(
+          i("1.5", "px"),
+          i("0.5", "py"),
+          c("caption")
+        ),
+        md: r(
+          i("sm", "px"),
+          i("xs", "py"),
+          c("caption")
+        ),
+        lg: r(
+          i("sm", "px"),
+          i("xs", "py"),
+          c("bodySmall")
+        )
+      },
+      style: {
+        solid: "",
+        outline: ""
+      }
+    },
+    compoundVariants: [
+      // Solid style variants
+      {
+        variant: "success",
+        style: "solid",
+        class: r("bg-success-bg", "text-success-dark", "border-success")
+      },
+      {
+        variant: "warning",
+        style: "solid",
+        class: r("bg-warning-bg", "text-warning-dark", "border-warning")
+      },
+      {
+        variant: "error",
+        style: "solid",
+        class: r("bg-error-bg", "text-error-dark", "border-error")
+      },
+      {
+        variant: "info",
+        style: "solid",
+        class: r("bg-info-bg", "text-info-dark", "border-info")
+      },
+      {
+        variant: "neutral",
+        style: "solid",
+        class: r("bg-surface-muted", "text-fg-primary", "border-line-default")
+      },
+      {
+        variant: "primary",
+        style: "solid",
+        class: r(
+          "bg-surface-brand-subtle",
+          "text-fg-brand-emphasis",
+          "border-line-brand"
+        )
+      },
+      {
+        variant: "secondary",
+        style: "solid",
+        // bg-pink-300: secondary solid badge — no semantic equivalent
+        // (would shift 2 shades to bg-surface-secondary). Kept literal until
+        // secondary brand surface palette expands beyond DEFAULT.
+        class: r(
+          "bg-pink-300",
+          "text-fg-brand-secondary-emphasis",
+          "border-line-secondary"
+        )
+      },
+      // Outline style variants
+      {
+        variant: "success",
+        style: "outline",
+        class: r("bg-transparent", "border-success", "text-fg-success")
+      },
+      {
+        variant: "warning",
+        style: "outline",
+        class: r("bg-transparent", "border-warning", "text-fg-warning")
+      },
+      {
+        variant: "error",
+        style: "outline",
+        class: r("bg-transparent", "border-error", "text-fg-error")
+      },
+      {
+        variant: "info",
+        style: "outline",
+        class: r("bg-transparent", "border-info", "text-fg-info")
+      },
+      {
+        variant: "neutral",
+        style: "outline",
+        class: r("bg-transparent", "border-line-default", "text-fg-secondary")
+      },
+      {
+        variant: "primary",
+        style: "outline",
+        class: r("bg-transparent", "border-line-brand", "text-fg-brand")
+      },
+      {
+        variant: "secondary",
+        style: "outline",
+        class: r(
+          "bg-transparent",
+          "border-line-secondary",
+          "text-fg-brand-secondary"
+        )
+      }
+    ],
+    defaultVariants: {
+      variant: "neutral",
+      size: "md",
+      style: "solid"
+    }
+  }
+), q = C(
+  N(function(A, k) {
+    var b = A, {
+      variant: a = "neutral",
+      size: s = "md",
+      style: t = "solid",
+      className: v = "",
+      children: n,
+      "aria-label": g
+    } = b, w = x(b, [
+      "variant",
+      "size",
+      "style",
+      "className",
+      "children",
+      "aria-label"
+    ]);
+    const j = r(W({ variant: a, size: s, style: t }), v);
+    let l;
+    if (g)
+      l = g;
+    else if (typeof n == "string")
+      l = n;
+    else if (typeof n == "object" && n !== null && "props" in n) {
+      const o = n.props;
+      o != null && o.children && typeof o.children == "string" && (l = o.children);
+    }
+    return /* @__PURE__ */ V(
+      "span",
+      m(u({
+        ref: k,
+        role: "status",
+        "aria-label": l,
+        className: j
+      }, w), {
+        children: n
+      })
+    );
+  })
+);
+q.displayName = "Badge";
+export {
+  q as default
+};
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../src/ui/primitives/Badge/Badge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type BadgeVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"neutral\"\n  | \"primary\"\n  | \"secondary\";\nexport type BadgeSize = \"sm\" | \"md\" | \"lg\";\nexport type BadgeStyle = \"solid\" | \"outline\";\n\nexport interface BadgeProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  \"style\"\n> {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  style?: BadgeStyle;\n  children: ReactNode;\n  \"aria-label\"?: string;\n}\n\n/**\n * Badge Component\n *\n * A versatile badge component for displaying status, priority, and other labels.\n * Follows Atomic Design principles as an Atom component.\n * Uses tokens for consistent theming.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\" size=\"lg\">Critical</Badge>\n * <Badge variant=\"info\" style=\"outline\">New</Badge>\n * ```\n */\n// Badge variants using CVA\nconst badgeVariants = cva(\n  // Base classes\n  cn(\n    \"inline-flex\",\n    \"items-center\",\n    \"justify-center\",\n    getTypographyWeight(\"label\"),\n    getRadiusClass(\"md\"),\n    \"border\",\n  ),\n  {\n    variants: {\n      variant: {\n        success: \"\",\n        warning: \"\",\n        error: \"\",\n        info: \"\",\n        neutral: \"\",\n        primary: \"\",\n        secondary: \"\",\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"1.5\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getTypographySize(\"caption\"),\n        ),\n        md: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"caption\"),\n        ),\n        lg: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"bodySmall\"),\n        ),\n      },\n      style: {\n        solid: \"\",\n        outline: \"\",\n      },\n    },\n    compoundVariants: [\n      // Solid style variants\n      {\n        variant: \"success\",\n        style: \"solid\",\n        class: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n      },\n      {\n        variant: \"warning\",\n        style: \"solid\",\n        class: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n      },\n      {\n        variant: \"error\",\n        style: \"solid\",\n        class: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n      },\n      {\n        variant: \"info\",\n        style: \"solid\",\n        class: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n      },\n      {\n        variant: \"neutral\",\n        style: \"solid\",\n        class: cn(\"bg-surface-muted\", \"text-fg-primary\", \"border-line-default\"),\n      },\n      {\n        variant: \"primary\",\n        style: \"solid\",\n        class: cn(\n          \"bg-surface-brand-subtle\",\n          \"text-fg-brand-emphasis\",\n          \"border-line-brand\",\n        ),\n      },\n      {\n        variant: \"secondary\",\n        style: \"solid\",\n        // bg-pink-300: secondary solid badge — no semantic equivalent\n        // (would shift 2 shades to bg-surface-secondary). Kept literal until\n        // secondary brand surface palette expands beyond DEFAULT.\n        class: cn(\n          \"bg-pink-300\",\n          \"text-fg-brand-secondary-emphasis\",\n          \"border-line-secondary\",\n        ),\n      },\n      // Outline style variants\n      {\n        variant: \"success\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-success\", \"text-fg-success\"),\n      },\n      {\n        variant: \"warning\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-warning\", \"text-fg-warning\"),\n      },\n      {\n        variant: \"error\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-error\", \"text-fg-error\"),\n      },\n      {\n        variant: \"info\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-info\", \"text-fg-info\"),\n      },\n      {\n        variant: \"neutral\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-line-default\", \"text-fg-secondary\"),\n      },\n      {\n        variant: \"primary\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-line-brand\", \"text-fg-brand\"),\n      },\n      {\n        variant: \"secondary\",\n        style: \"outline\",\n        class: cn(\n          \"bg-transparent\",\n          \"border-line-secondary\",\n          \"text-fg-brand-secondary\",\n        ),\n      },\n    ],\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"md\",\n      style: \"solid\",\n    },\n  },\n);\n\nconst Badge = memo(\n  forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n    {\n      variant = \"neutral\",\n      size = \"md\",\n      style = \"solid\",\n      className = \"\",\n      children,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const classes = cn(badgeVariants({ variant, size, style }), className);\n\n    // Best-effort accessible name resolution: explicit aria-label wins;\n    // string children become the label; single-wrapped string children\n    // (e.g. <Badge><span>Active</span></Badge>) are unwrapped one level.\n    // Otherwise undefined and the consumer is responsible for naming\n    // the badge externally.\n    let accessibleLabel: string | undefined;\n    if (ariaLabel) {\n      accessibleLabel = ariaLabel;\n    } else if (typeof children === \"string\") {\n      accessibleLabel = children;\n    } else 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        accessibleLabel = childProps.children;\n      }\n    }\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={accessibleLabel}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }),\n);\n\nBadge.displayName = \"Badge\";\n\nexport default Badge;\n"],"names":["badgeVariants","cva","cn","getTypographyWeight","getRadiusClass","getSpacingClass","getTypographySize","Badge","memo","forwardRef","_a","ref","_b","variant","size","style","className","children","ariaLabel","props","__objRest","classes","accessibleLabel","childProps","jsx","__spreadProps","__spreadValues"],"mappings":"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"}

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

@@ -0,0 +1,288 @@
+"use client";
+var G = Object.defineProperty, H = Object.defineProperties;
+var J = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
+var $ = (r, n, o) => n in r ? G(r, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[n] = o, u = (r, n) => {
+  for (var o in n || (n = {}))
+    A.call(n, o) && $(r, o, n[o]);
+  if (y)
+    for (var o of y(n))
+      F.call(n, o) && $(r, o, n[o]);
+  return r;
+}, v = (r, n) => H(r, J(n));
+var M = (r, n) => {
+  var o = {};
+  for (var s in r)
+    A.call(r, s) && n.indexOf(s) < 0 && (o[s] = r[s]);
+  if (r != null && y)
+    for (var s of y(r))
+      n.indexOf(s) < 0 && F.call(r, s) && (o[s] = r[s]);
+  return o;
+};
+import { jsx as i, jsxs as h, Fragment as P } from "react/jsx-runtime";
+import { memo as K, forwardRef as Q, useMemo as m } from "react";
+import { Slot as U, Slottable as W } from "@radix-ui/react-slot";
+import { getRadiusClass as X } from "../../tokens/radius.js";
+import { getSpacingClass as e } from "../../tokens/spacing.js";
+import { getTypographySize as x, getTypographyClasses as Y } from "../../tokens/typography.js";
+import Z from "../Spinner/Spinner.js";
+import { cn as t } from "../../utils/cn.js";
+import { cva as L } from "../../utils/cva.js";
+const I = L(
+  // Base classes
+  t(
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    Y("button").split(" ")[2] || "font-medium",
+    // Extract font-medium
+    X("md"),
+    "transition-colors",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: t(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-line-brand"
+        ),
+        secondary: t(
+          "bg-surface-secondary",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-line-secondary"
+        ),
+        error: t(
+          "bg-error",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-error"
+        ),
+        outline: t(
+          "border-2",
+          "border-line-default",
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
+        ),
+        ghost: t(
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
+        ),
+        iconOnly: t(
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus",
+          e("none", "p")
+        ),
+        // Textual call-to-action — brand-coloured text, underline on
+        // hover, no chrome (no surface, no border). Padding is zeroed
+        // out per size in compoundVariants so the bounding box hugs
+        // the text (height intrinsic). Issue #156.
+        //
+        // Focus ring: `focus:ring-line-focus` keeps the same focus
+        // family the other no-chrome variants use (ghost, outline,
+        // iconOnly). The base's `focus:ring-2` + `focus:ring-offset-2`
+        // produce a 2px ring 2px away from the text bounding box; the
+        // 2px offset is rendered in surface-base so the ring contrasts
+        // against surface (≥3:1 for WCAG 2.4.11, verified) rather than
+        // colliding with the brand-coloured text. The element keeps
+        // `getRadiusClass("md")` from the base, which is invisible
+        // without chrome but rounds the focus ring corners.
+        //
+        // hover:underline pairs with `underline-offset-4` so the
+        // underline that appears on hover sits clear of the descenders
+        // (WCAG-aligned with link best practice). At rest the link
+        // carries no underline — the brand colour alone signals
+        // affordance, matching the shadcn convention this variant is
+        // modelled on (see issue body).
+        //
+        // disabled: inherits opacity-50 + cursor-not-allowed from the
+        // base. We do NOT special-case `disabled:no-underline` because
+        // a disabled link should still receive the same visual
+        // treatment as a disabled chrome variant — the opacity and
+        // cursor signal the disabled state.
+        link: t(
+          "bg-transparent",
+          "text-fg-brand",
+          "underline-offset-4",
+          "hover:underline",
+          "focus:ring-line-focus"
+        )
+      },
+      size: {
+        sm: t(
+          e("md", "px"),
+          e("1.5", "py"),
+          x("bodySmall"),
+          e("1.5", "gap")
+        ),
+        md: t(
+          e("base", "px"),
+          e("sm", "py"),
+          x("body"),
+          e("sm", "gap")
+        ),
+        lg: t(
+          e("lg", "px"),
+          e("md", "py"),
+          x("bodyLarge"),
+          e("2.5", "gap")
+        )
+      }
+    },
+    compoundVariants: [
+      // IconOnly variant has different sizing
+      {
+        variant: "iconOnly",
+        size: "sm",
+        class: t("h-8", "w-8", e("none", "p"))
+      },
+      {
+        variant: "iconOnly",
+        size: "md",
+        class: t("h-10", "w-10", e("none", "p"))
+      },
+      {
+        variant: "iconOnly",
+        size: "lg",
+        class: t("h-12", "w-12", e("none", "p"))
+      },
+      // Link variant zeroes the size's padding via compoundVariants so
+      // the override runs AFTER the size block's `px-N`/`py-N` and
+      // twMerge picks the zero value (`cn` joins variant before
+      // compound). The size's typography and gap survive — the link's
+      // text scales with size and icons still get gap-N when present.
+      // Issue #156.
+      {
+        variant: "link",
+        size: "sm",
+        class: t(e("none", "px"), e("none", "py"))
+      },
+      {
+        variant: "link",
+        size: "md",
+        class: t(e("none", "px"), e("none", "py"))
+      },
+      {
+        variant: "link",
+        size: "lg",
+        class: t(e("none", "px"), e("none", "py"))
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function d({
+  children: r,
+  position: n
+}) {
+  return r ? /* @__PURE__ */ i(
+    "span",
+    {
+      className: `inline-flex items-center ${n === "left" ? e("none", "mr") : e("none", "ml")}`,
+      children: r
+    }
+  ) : null;
+}
+const nn = K(
+  Q(function(en, B) {
+    var V = en, {
+      variant: n = "primary",
+      size: o = "md",
+      isLoading: s = !1,
+      loadingText: g,
+      loadingIcon: w,
+      leftIcon: l,
+      rightIcon: c,
+      fullWidth: z = !1,
+      asChild: f = !1,
+      as: p,
+      className: O = "",
+      disabled: S = !1,
+      children: a,
+      "aria-label": b
+    } = V, N = M(V, [
+      "variant",
+      "size",
+      "isLoading",
+      "loadingText",
+      "loadingIcon",
+      "leftIcon",
+      "rightIcon",
+      "fullWidth",
+      "asChild",
+      "as",
+      "className",
+      "disabled",
+      "children",
+      "aria-label"
+    ]);
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && f && p !== void 0 && p !== "button" && console.warn(
+      "[Button] `as` is ignored when `asChild` is true; the child element is used as the root. Drop one of the two props to silence this warning."
+    );
+    const k = f ? U : p != null ? p : "button", T = m(
+      () => t(
+        I({
+          variant: n,
+          size: o
+        }),
+        z && "w-full",
+        O
+      ),
+      [n, o, z, O]
+    ), j = m(
+      () => n === "iconOnly" || !a && (l || c),
+      [n, a, l, c]
+    ), _ = m(
+      () => j && !b && !a ? "Button" : b,
+      [j, b, a]
+    ), C = m(() => n === "error" ? "primary" : n === "primary" || n === "secondary" ? "neutral" : "primary", [n]), D = m(
+      () => o === "sm" ? "sm" : o === "lg" ? "lg" : "md",
+      [o]
+    ), q = m(
+      () => w || /* @__PURE__ */ i(Z, { size: D, variant: C }),
+      [w, D, C]
+    ), E = !f && (p === void 0 || p === "button") && !N.type ? "button" : void 0, R = u(u({
+      className: T,
+      disabled: S || s,
+      "aria-busy": s,
+      "aria-label": _,
+      "aria-disabled": S || s
+    }, E ? { type: E } : {}), N);
+    return f ? /* @__PURE__ */ h(k, v(u({ ref: B }, R), { children: [
+      l && /* @__PURE__ */ i(d, { position: "left", children: l }),
+      /* @__PURE__ */ i(W, { children: a }),
+      c && /* @__PURE__ */ i(d, { position: "right", children: c })
+    ] })) : /* @__PURE__ */ i(k, v(u({ ref: B }, R), { children: s ? /* @__PURE__ */ h(P, { children: [
+      q,
+      g && /* @__PURE__ */ i("span", { className: e("sm", "ml"), children: g }),
+      !g && a && /* @__PURE__ */ i("span", { className: `${e("sm", "ml")} opacity-0`, children: a })
+    ] }) : /* @__PURE__ */ h(P, { children: [
+      l && /* @__PURE__ */ i(d, { position: "left", children: l }),
+      a,
+      c && /* @__PURE__ */ i(d, { position: "right", children: c })
+    ] }) }));
+  })
+);
+nn.displayName = "Button";
+export {
+  nn as Button,
+  nn as default
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/ui/primitives/Button/Button.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode, ElementType } from \"react\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\n// Ambient declaration so the dev-only warn below typechecks without\n// pulling @types/node into the app tsconfig. At runtime the consumer's\n// bundler (webpack/turbopack/etc.) replaces `process.env.NODE_ENV` with\n// a literal; the `typeof process` guard keeps the branch safe in\n// browser/edge runtimes where `process` doesn't exist.\ndeclare const process: { env: { NODE_ENV?: string } };\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographyClasses,\n  getTypographySize,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\nimport Spinner from \"../Spinner/Spinner\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"outline\"\n  | \"ghost\"\n  | \"iconOnly\"\n  | \"link\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"as\"\n> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  isLoading?: boolean;\n  loadingText?: string;\n  loadingIcon?: ReactNode;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  fullWidth?: boolean;\n  as?: ElementType;\n  href?: string;\n  target?: string;\n  /**\n   * When true, render via Radix `Slot`: classes, ARIA, ref and remaining\n   * props are projected onto the single child element instead of an\n   * intrinsic `<button>`. The child keeps its own element type and props\n   * intact — including framework-native props like `<Link href prefetch>`.\n   *\n   * `asChild` takes precedence over `as`: if both are supplied, `as` is\n   * ignored and a dev-only warning is logged.\n   *\n   * @example\n   * ```tsx\n   * <Button asChild variant=\"primary\">\n   *   <Link href=\"/profile\" prefetch>Open profile</Link>\n   * </Button>\n   * // → <a class=\"…button classes\" href=\"/profile\" data-prefetch>Open profile</a>\n   * ```\n   */\n  asChild?: boolean;\n}\n\n/**\n * Button Variants using CVA\n * Type-safe variant system for Button component\n */\nconst buttonVariants = cva(\n  // Base classes\n  cn(\n    \"inline-flex\",\n    \"items-center\",\n    \"justify-center\",\n    getTypographyClasses(\"button\").split(\" \")[2] || \"font-medium\", // Extract font-medium\n    getRadiusClass(\"md\"),\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  ),\n  {\n    variants: {\n      variant: {\n        primary: cn(\n          \"bg-surface-brand-strong\",\n          \"text-fg-inverse\",\n          \"hover:opacity-90\",\n          \"focus:ring-line-brand\",\n        ),\n        secondary: cn(\n          \"bg-surface-secondary\",\n          \"text-fg-inverse\",\n          \"hover:opacity-90\",\n          \"focus:ring-line-secondary\",\n        ),\n        error: cn(\n          \"bg-error\",\n          \"text-fg-inverse\",\n          \"hover:opacity-90\",\n          \"focus:ring-error\",\n        ),\n        outline: cn(\n          \"border-2\",\n          \"border-line-default\",\n          \"bg-transparent\",\n          \"text-fg-primary\",\n          \"hover:bg-surface-hover\",\n          \"focus:ring-line-focus\",\n        ),\n        ghost: cn(\n          \"bg-transparent\",\n          \"text-fg-primary\",\n          \"hover:bg-surface-hover\",\n          \"focus:ring-line-focus\",\n        ),\n        iconOnly: cn(\n          \"bg-transparent\",\n          \"text-fg-primary\",\n          \"hover:bg-surface-hover\",\n          \"focus:ring-line-focus\",\n          getSpacingClass(\"none\", \"p\"),\n        ),\n        // Textual call-to-action — brand-coloured text, underline on\n        // hover, no chrome (no surface, no border). Padding is zeroed\n        // out per size in compoundVariants so the bounding box hugs\n        // the text (height intrinsic). Issue #156.\n        //\n        // Focus ring: `focus:ring-line-focus` keeps the same focus\n        // family the other no-chrome variants use (ghost, outline,\n        // iconOnly). The base's `focus:ring-2` + `focus:ring-offset-2`\n        // produce a 2px ring 2px away from the text bounding box; the\n        // 2px offset is rendered in surface-base so the ring contrasts\n        // against surface (≥3:1 for WCAG 2.4.11, verified) rather than\n        // colliding with the brand-coloured text. The element keeps\n        // `getRadiusClass(\"md\")` from the base, which is invisible\n        // without chrome but rounds the focus ring corners.\n        //\n        // hover:underline pairs with `underline-offset-4` so the\n        // underline that appears on hover sits clear of the descenders\n        // (WCAG-aligned with link best practice). At rest the link\n        // carries no underline — the brand colour alone signals\n        // affordance, matching the shadcn convention this variant is\n        // modelled on (see issue body).\n        //\n        // disabled: inherits opacity-50 + cursor-not-allowed from the\n        // base. We do NOT special-case `disabled:no-underline` because\n        // a disabled link should still receive the same visual\n        // treatment as a disabled chrome variant — the opacity and\n        // cursor signal the disabled state.\n        link: cn(\n          \"bg-transparent\",\n          \"text-fg-brand\",\n          \"underline-offset-4\",\n          \"hover:underline\",\n          \"focus:ring-line-focus\",\n        ),\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"md\", \"px\"),\n          getSpacingClass(\"1.5\", \"py\"),\n          getTypographySize(\"bodySmall\"),\n          getSpacingClass(\"1.5\", \"gap\"),\n        ),\n        md: cn(\n          getSpacingClass(\"base\", \"px\"),\n          getSpacingClass(\"sm\", \"py\"),\n          getTypographySize(\"body\"),\n          getSpacingClass(\"sm\", \"gap\"),\n        ),\n        lg: cn(\n          getSpacingClass(\"lg\", \"px\"),\n          getSpacingClass(\"md\", \"py\"),\n          getTypographySize(\"bodyLarge\"),\n          getSpacingClass(\"2.5\", \"gap\"),\n        ),\n      },\n    },\n    compoundVariants: [\n      // IconOnly variant has different sizing\n      {\n        variant: \"iconOnly\",\n        size: \"sm\",\n        class: cn(\"h-8\", \"w-8\", getSpacingClass(\"none\", \"p\")),\n      },\n      {\n        variant: \"iconOnly\",\n        size: \"md\",\n        class: cn(\"h-10\", \"w-10\", getSpacingClass(\"none\", \"p\")),\n      },\n      {\n        variant: \"iconOnly\",\n        size: \"lg\",\n        class: cn(\"h-12\", \"w-12\", getSpacingClass(\"none\", \"p\")),\n      },\n      // Link variant zeroes the size's padding via compoundVariants so\n      // the override runs AFTER the size block's `px-N`/`py-N` and\n      // twMerge picks the zero value (`cn` joins variant before\n      // compound). The size's typography and gap survive — the link's\n      // text scales with size and icons still get gap-N when present.\n      // Issue #156.\n      {\n        variant: \"link\",\n        size: \"sm\",\n        class: cn(getSpacingClass(\"none\", \"px\"), getSpacingClass(\"none\", \"py\")),\n      },\n      {\n        variant: \"link\",\n        size: \"md\",\n        class: cn(getSpacingClass(\"none\", \"px\"), getSpacingClass(\"none\", \"py\")),\n      },\n      {\n        variant: \"link\",\n        size: \"lg\",\n        class: cn(getSpacingClass(\"none\", \"px\"), getSpacingClass(\"none\", \"py\")),\n      },\n    ],\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Icon Wrapper Component\n * Handles icon spacing and alignment consistently\n */\nfunction IconWrapper({\n  children,\n  position,\n}: {\n  children: ReactNode;\n  position: \"left\" | \"right\";\n}) {\n  if (!children) return null;\n\n  return (\n    <span\n      className={`inline-flex items-center ${position === \"left\" ? getSpacingClass(\"none\", \"mr\") : getSpacingClass(\"none\", \"ml\")}`}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Button Component\n *\n * A styled button with variants, sizes, and loading states.\n *\n * Polymorphism — two APIs:\n *   - `as` (legacy): swap the root element type. `<Button as={Link} href=\"…\">`.\n *   - `asChild` (recommended): project Button's styling onto the single\n *     child element. Idiomatic Radix Slot pattern, preserves the child's\n *     own props and TS type (e.g. `<Link href prefetch>`). When `asChild`\n *     is true, `as` is ignored.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Button variant=\"primary\" size=\"md\" onClick={handleClick}>Click me</Button>\n *\n * // With icons\n * <Button leftIcon={<Icon />} rightIcon={<Icon />}>Action</Button>\n *\n * // Loading state\n * <Button isLoading loadingText=\"Saving...\">Save</Button>\n *\n * // Polymorphic via asChild (preserves Next Link's TS type and native props)\n * <Button asChild variant=\"primary\">\n *   <Link href=\"/page\" prefetch>Open</Link>\n * </Button>\n *\n * // Polymorphic via legacy `as`\n * <Button as=\"a\" href=\"/page\">Navigate</Button>\n * ```\n */\nconst Button = memo(\n  forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n      variant = \"primary\",\n      size = \"md\",\n      isLoading = false,\n      loadingText,\n      loadingIcon,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      asChild = false,\n      as,\n      className = \"\",\n      disabled = false,\n      children,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    // asChild wins over `as`. Warn in dev so the precedence is observable\n    // instead of being a silent override. Production builds strip this branch.\n    if (\n      typeof process !== \"undefined\" &&\n      process.env.NODE_ENV !== \"production\" &&\n      asChild &&\n      as !== undefined &&\n      as !== \"button\"\n    ) {\n      console.warn(\n        \"[Button] `as` is ignored when `asChild` is true; the child element is used as the root. Drop one of the two props to silence this warning.\",\n      );\n    }\n\n    const Component: ElementType = asChild ? Slot : (as ?? \"button\");\n\n    // Memoize classes computation\n    const classes = useMemo(\n      () =>\n        cn(\n          buttonVariants({\n            variant,\n            size,\n          }),\n          fullWidth && \"w-full\",\n          className,\n        ),\n      [variant, size, fullWidth, className],\n    );\n\n    // Memoize icon-only check\n    const isIconOnly = useMemo(\n      () => variant === \"iconOnly\" || (!children && (leftIcon || rightIcon)),\n      [variant, children, leftIcon, rightIcon],\n    );\n\n    // Memoize aria label\n    const finalAriaLabel = useMemo(\n      () =>\n        isIconOnly && !ariaLabel && !children\n          ? \"Button\" // Fallback, but should be provided\n          : ariaLabel,\n      [isIconOnly, ariaLabel, children],\n    );\n\n    // Memoize spinner variant computation\n    const spinnerVariant = useMemo((): \"primary\" | \"secondary\" | \"neutral\" => {\n      if (variant === \"error\") return \"primary\"; // Red buttons use primary spinner (white)\n      if (variant === \"primary\" || variant === \"secondary\") return \"neutral\"; // Colored buttons use neutral spinner\n      return \"primary\"; // Default\n    }, [variant]);\n\n    // Memoize spinner size\n    const spinnerSize = useMemo(\n      () => (size === \"sm\" ? \"sm\" : size === \"lg\" ? \"lg\" : \"md\"),\n      [size],\n    );\n\n    // Memoize loading icon\n    const displayLoadingIcon = useMemo(\n      () =>\n        loadingIcon || <Spinner size={spinnerSize} variant={spinnerVariant} />,\n      [loadingIcon, spinnerSize, spinnerVariant],\n    );\n\n    // Build button props (spread props at the end to allow overrides).\n    // `type=\"button\"` default applies only when rendering an intrinsic\n    // <button>. asChild and `as` (custom) projections leave it off so we\n    // don't paint a meaningless `type` attribute onto <a> / <Link>.\n    const defaultType =\n      !asChild && (as === undefined || as === \"button\") && !props.type\n        ? \"button\"\n        : undefined;\n    const buttonProps = {\n      className: classes,\n      disabled: disabled || isLoading,\n      \"aria-busy\": isLoading,\n      \"aria-label\": finalAriaLabel,\n      \"aria-disabled\": disabled || isLoading,\n      ...(defaultType ? { type: defaultType } : {}),\n      ...props,\n    };\n\n    // asChild path: render Slot with the icons and Slottable as direct\n    // sibling children (NOT wrapped in a React.Fragment). Slot's\n    // children-processing inspects each direct child for Slottable; if\n    // the children are wrapped in a Fragment, Slot's SlotClone merges\n    // the projected props into the Fragment itself (a silent no-op for\n    // className / aria / ref), and nothing reaches the consumer's\n    // element. Hence the two distinct branches below: same content\n    // shape, different host element, different child layout.\n    if (asChild) {\n      return (\n        <Component ref={ref} {...buttonProps}>\n          {leftIcon && <IconWrapper position=\"left\">{leftIcon}</IconWrapper>}\n          <Slottable>{children}</Slottable>\n          {rightIcon && <IconWrapper position=\"right\">{rightIcon}</IconWrapper>}\n        </Component>\n      );\n    }\n\n    return (\n      <Component ref={ref} {...buttonProps}>\n        {isLoading ? (\n          <>\n            {displayLoadingIcon}\n            {loadingText && (\n              <span className={getSpacingClass(\"sm\", \"ml\")}>{loadingText}</span>\n            )}\n            {!loadingText && children && (\n              <span className={`${getSpacingClass(\"sm\", \"ml\")} opacity-0`}>\n                {children}\n              </span>\n            )}\n          </>\n        ) : (\n          <>\n            {leftIcon && <IconWrapper position=\"left\">{leftIcon}</IconWrapper>}\n            {children}\n            {rightIcon && (\n              <IconWrapper position=\"right\">{rightIcon}</IconWrapper>\n            )}\n          </>\n        )}\n      </Component>\n    );\n  }),\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\nexport { Button };\n"],"names":["buttonVariants","cva","cn","getTypographyClasses","getRadiusClass","getSpacingClass","getTypographySize","IconWrapper","children","position","jsx","Button","memo","forwardRef","_a","ref","_b","variant","size","isLoading","loadingText","loadingIcon","leftIcon","rightIcon","fullWidth","asChild","as","className","disabled","ariaLabel","props","__objRest","Component","Slot","classes","useMemo","isIconOnly","finalAriaLabel","spinnerVariant","spinnerSize","displayLoadingIcon","Spinner","defaultType","buttonProps","__spreadValues","jsxs","__spreadProps","Slottable","Fragment"],"mappings":"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"}