@craftzbay/ui 0.10.0 → 0.11.1

package/dist-lib/components/ui/Badge.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as i, jsx as u } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { cn as e } from "../../lib/utils.js";
-import { cva as d } from "class-variance-authority";
-const g = d(
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { cn as a } from "../../lib/utils.js";
+import { cva as g } from "class-variance-authority";
+const b = g(
   [
     "inline-flex items-center gap-1 rounded-full px-2 py-0.5",
     "text-xs font-medium whitespace-nowrap"
@@ -34,34 +34,43 @@ const g = d(
       // Outline — coloured border + text, transparent fill.
       { variant: "outline", tone: "neutral", class: "border-border text-foreground-muted" },
       { variant: "outline", tone: "accent", class: "border-accent text-accent" },
-      { variant: "outline", tone: "success", class: "border-success-border-soft text-success-text" },
-      { variant: "outline", tone: "warning", class: "border-warning-border-soft text-warning-text" },
+      {
+        variant: "outline",
+        tone: "success",
+        class: "border-success-border-soft text-success-text"
+      },
+      {
+        variant: "outline",
+        tone: "warning",
+        class: "border-warning-border-soft text-warning-text"
+      },
       { variant: "outline", tone: "danger", class: "border-danger-border-soft text-danger-text" },
       { variant: "outline", tone: "info", class: "border-info-border-soft text-info-text" }
     ],
     defaultVariants: { variant: "subtle", tone: "neutral" }
   }
-), b = {
+), f = {
   neutral: "bg-foreground-subtle",
   accent: "bg-accent",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, f = l(function({ className: n, variant: a, tone: t = "neutral", dot: r, children: s, ...o }, c) {
-  return /* @__PURE__ */ i("span", { ref: c, className: e(g({ variant: a, tone: t }), n), ...o, children: [
-    r && /* @__PURE__ */ u(
+}, x = d(function({ className: r, variant: s, tone: t = "neutral", dot: o, icon: e, children: i, ...c }, l) {
+  return /* @__PURE__ */ u("span", { ref: l, className: a(b({ variant: s, tone: t }), r), ...c, children: [
+    e && /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "inline-flex shrink-0 [&_svg]:size-3", children: e }),
+    o && !e && /* @__PURE__ */ n(
       "span",
       {
         "aria-hidden": !0,
-        className: e("inline-block size-1.5 rounded-full", b[t ?? "neutral"])
+        className: a("inline-block size-1.5 rounded-full", f[t ?? "neutral"])
       }
     ),
-    s
+    i
   ] });
 });
-f.displayName = "Badge";
+x.displayName = "Badge";
 export {
-  f as Badge
+  x as Badge
 };
 //# sourceMappingURL=Badge.js.map

package/dist-lib/components/ui/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/ui/Badge.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst badge = cva(\n  [\n    'inline-flex items-center gap-1 rounded-full px-2 py-0.5',\n    'text-xs font-medium whitespace-nowrap',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        outline: 'border bg-transparent',\n      },\n      tone: {\n        neutral: '',\n        accent: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n      },\n    },\n    compoundVariants: [\n      // Subtle — coloured fill + matching text.\n      { variant: 'subtle', tone: 'neutral', class: 'bg-background-muted text-foreground-muted' },\n      { variant: 'subtle', tone: 'accent', class: 'bg-accent-soft text-on-accent-soft' },\n      { variant: 'subtle', tone: 'success', class: 'bg-success-soft text-success-text' },\n      { variant: 'subtle', tone: 'warning', class: 'bg-warning-soft text-warning-text' },\n      { variant: 'subtle', tone: 'danger', class: 'bg-danger-soft text-danger-text' },\n      { variant: 'subtle', tone: 'info', class: 'bg-info-soft text-info-text' },\n      // Outline — coloured border + text, transparent fill.\n      { variant: 'outline', tone: 'neutral', class: 'border-border text-foreground-muted' },\n      { variant: 'outline', tone: 'accent', class: 'border-accent text-accent' },\n      { variant: 'outline', tone: 'success', class: 'border-success-border-soft text-success-text' },\n      { variant: 'outline', tone: 'warning', class: 'border-warning-border-soft text-warning-text' },\n      { variant: 'outline', tone: 'danger', class: 'border-danger-border-soft text-danger-text' },\n      { variant: 'outline', tone: 'info', class: 'border-info-border-soft text-info-text' },\n    ],\n    defaultVariants: { variant: 'subtle', tone: 'neutral' },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badge> {\n  /** Show a leading status dot in the same tone. */\n  dot?: boolean;\n}\n\nconst dotColour = {\n  neutral: 'bg-foreground-subtle',\n  accent: 'bg-accent',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n  info: 'bg-info',\n} as const;\n\n/**\n * Status pill. Use `subtle` for high-volume contexts (table cells, lists);\n * `outline` when the badge sits on a busy or coloured background.\n *\n * @example\n *   <Badge tone=\"success\" dot>Active</Badge>\n *   <Badge tone=\"danger\" variant=\"outline\">Failed</Badge>\n *\n * @do Use badges to summarise state, not to label categories — for taxonomies\n *      pick a tone palette and stick with it.\n * @dont Use a badge as a button. Wrap it in a Button or use a Toggle.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, tone = 'neutral', dot, children, ...props },\n  ref,\n) {\n  return (\n    <span ref={ref} className={cn(badge({ variant, tone }), className)} {...props}>\n      {dot && (\n        <span\n          aria-hidden\n          className={cn('inline-block size-1.5 rounded-full', dotColour[tone ?? 'neutral'])}\n        />\n      )}\n      {children}\n    </span>\n  );\n});\nBadge.displayName = 'Badge';\n"],"names":["badge","cva","dotColour","Badge","forwardRef","className","variant","tone","dot","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;;AAMA,MAAMA,IAAQC;AAAA,EACZ;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,4CAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,UAAU,OAAO,qCAAA;AAAA,MAC5C,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,oCAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,oCAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,UAAU,OAAO,kCAAA;AAAA,MAC5C,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,8BAAA;AAAA;AAAA,MAE1C,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,sCAAA;AAAA,MAC9C,EAAE,SAAS,WAAW,MAAM,UAAU,OAAO,4BAAA;AAAA,MAC7C,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,+CAAA;AAAA,MAC9C,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,+CAAA;AAAA,MAC9C,EAAE,SAAS,WAAW,MAAM,UAAU,OAAO,6CAAA;AAAA,MAC7C,EAAE,SAAS,WAAW,MAAM,QAAQ,OAAO,yCAAA;AAAA,IAAyC;AAAA,IAEtF,iBAAiB,EAAE,SAAS,UAAU,MAAM,UAAA;AAAA,EAAU;AAE1D,GASMC,IAAY;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR,GAcaC,IAAQC,EAAwC,SAC3D,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,IAAO,WAAW,KAAAC,GAAK,UAAAC,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,SACE,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAU,WAAWE,EAAGb,EAAM,EAAE,SAAAM,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS,GAAI,GAAGK,GACrE,UAAA;AAAA,IAAAF,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAWD,EAAG,sCAAsCX,EAAUK,KAAQ,SAAS,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGnFE;AAAA,EAAA,GACH;AAEJ,CAAC;AACDN,EAAM,cAAc;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/ui/Badge.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst badge = cva(\n  [\n    'inline-flex items-center gap-1 rounded-full px-2 py-0.5',\n    'text-xs font-medium whitespace-nowrap',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        outline: 'border bg-transparent',\n      },\n      tone: {\n        neutral: '',\n        accent: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n      },\n    },\n    compoundVariants: [\n      // Subtle — coloured fill + matching text.\n      { variant: 'subtle', tone: 'neutral', class: 'bg-background-muted text-foreground-muted' },\n      { variant: 'subtle', tone: 'accent', class: 'bg-accent-soft text-on-accent-soft' },\n      { variant: 'subtle', tone: 'success', class: 'bg-success-soft text-success-text' },\n      { variant: 'subtle', tone: 'warning', class: 'bg-warning-soft text-warning-text' },\n      { variant: 'subtle', tone: 'danger', class: 'bg-danger-soft text-danger-text' },\n      { variant: 'subtle', tone: 'info', class: 'bg-info-soft text-info-text' },\n      // Outline — coloured border + text, transparent fill.\n      { variant: 'outline', tone: 'neutral', class: 'border-border text-foreground-muted' },\n      { variant: 'outline', tone: 'accent', class: 'border-accent text-accent' },\n      {\n        variant: 'outline',\n        tone: 'success',\n        class: 'border-success-border-soft text-success-text',\n      },\n      {\n        variant: 'outline',\n        tone: 'warning',\n        class: 'border-warning-border-soft text-warning-text',\n      },\n      { variant: 'outline', tone: 'danger', class: 'border-danger-border-soft text-danger-text' },\n      { variant: 'outline', tone: 'info', class: 'border-info-border-soft text-info-text' },\n    ],\n    defaultVariants: { variant: 'subtle', tone: 'neutral' },\n  },\n);\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badge> {\n  /** Show a leading status dot in the same tone. */\n  dot?: boolean;\n  /** Leading icon (decorative — sized 12px, `aria-hidden`). Overrides `dot`. */\n  icon?: ReactNode;\n}\n\nconst dotColour = {\n  neutral: 'bg-foreground-subtle',\n  accent: 'bg-accent',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n  info: 'bg-info',\n} as const;\n\n/**\n * Status pill. Use `subtle` for high-volume contexts (table cells, lists);\n * `outline` when the badge sits on a busy or coloured background.\n *\n * @example\n *   <Badge tone=\"success\" dot>Active</Badge>\n *   <Badge tone=\"danger\" variant=\"outline\">Failed</Badge>\n *\n * @do Use badges to summarise state, not to label categories — for taxonomies\n *      pick a tone palette and stick with it.\n * @dont Use a badge as a button. Wrap it in a Button or use a Toggle.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, tone = 'neutral', dot, icon, children, ...props },\n  ref,\n) {\n  return (\n    <span ref={ref} className={cn(badge({ variant, tone }), className)} {...props}>\n      {icon && (\n        <span aria-hidden className=\"inline-flex shrink-0 [&_svg]:size-3\">\n          {icon}\n        </span>\n      )}\n      {dot && !icon && (\n        <span\n          aria-hidden\n          className={cn('inline-block size-1.5 rounded-full', dotColour[tone ?? 'neutral'])}\n        />\n      )}\n      {children}\n    </span>\n  );\n});\nBadge.displayName = 'Badge';\n"],"names":["badge","cva","dotColour","Badge","forwardRef","className","variant","tone","dot","icon","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;;AAMA,MAAMA,IAAQC;AAAA,EACZ;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,4CAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,UAAU,OAAO,qCAAA;AAAA,MAC5C,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,oCAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,oCAAA;AAAA,MAC7C,EAAE,SAAS,UAAU,MAAM,UAAU,OAAO,kCAAA;AAAA,MAC5C,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,8BAAA;AAAA;AAAA,MAE1C,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,sCAAA;AAAA,MAC9C,EAAE,SAAS,WAAW,MAAM,UAAU,OAAO,4BAAA;AAAA,MAC7C;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,EAAE,SAAS,WAAW,MAAM,UAAU,OAAO,6CAAA;AAAA,MAC7C,EAAE,SAAS,WAAW,MAAM,QAAQ,OAAO,yCAAA;AAAA,IAAyC;AAAA,IAEtF,iBAAiB,EAAE,SAAS,UAAU,MAAM,UAAA;AAAA,EAAU;AAE1D,GASMC,IAAY;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR,GAcaC,IAAQC,EAAwC,SAC3D,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,IAAO,WAAW,KAAAC,GAAK,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAChEC,GACA;AACA,SACE,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAU,WAAWE,EAAGd,EAAM,EAAE,SAAAM,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS,GAAI,GAAGM,GACrE,UAAA;AAAA,IAAAF,uBACE,QAAA,EAAK,eAAW,IAAC,WAAU,uCACzB,UAAAA,GACH;AAAA,IAEDD,KAAO,CAACC,KACP,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAWD,EAAG,sCAAsCZ,EAAUK,KAAQ,SAAS,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGnFG;AAAA,EAAA,GACH;AAEJ,CAAC;AACDP,EAAM,cAAc;"}

package/dist-lib/components/ui/Breadcrumbs.d.ts

@@ -11,6 +11,8 @@ export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     maxItems?: number;
     /** Custom link renderer (for next/link, react-router, etc.). */
     renderLink?: (href: string, children: ReactNode) => ReactNode;
+    /** sr-only text for the collapsed ellipsis. Default "Hidden items". */
+    collapsedLabel?: string;
 }
 /**
  * Breadcrumb trail. Collapses with an ellipsis when there are too many crumbs.

package/dist-lib/components/ui/Breadcrumbs.js

@@ -1,34 +1,52 @@
 "use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { MoreHorizontal as g, ChevronRight as d } from "../../icons/index.js";
-import { cn as x } from "../../lib/utils.js";
-import { useStrings as N } from "../../hooks/use-strings.js";
-const v = b(function({ items: s, maxItems: m = 4, renderLink: l, className: u, ...i }, f) {
-  const h = N(), n = s.length > m ? [s[0], { collapsed: !0 }, ...s.slice(-2)] : s;
-  return /* @__PURE__ */ e("nav", { ref: f, "aria-label": i["aria-label"] ?? h.breadcrumbs.label, className: x("text-sm", u), ...i, children: /* @__PURE__ */ e("ol", { className: "flex flex-wrap items-center gap-1.5 text-foreground-subtle", children: n.map((o, a) => {
-    const t = a === n.length - 1;
-    if ("collapsed" in o)
-      return /* @__PURE__ */ c("li", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ e(g, { className: "size-4", "aria-hidden": !0 }),
-        /* @__PURE__ */ e(d, { className: "size-3.5", "aria-hidden": !0 })
-      ] }, `ellipsis-${a}`);
-    const r = o, p = t ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "font-medium text-foreground", children: r.label }) : r.href ? l ? l(r.href, r.label) : /* @__PURE__ */ e(
-      "a",
-      {
-        href: r.href,
-        className: "hover:text-foreground transition-colors duration-[var(--duration-fast)] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
-        children: r.label
-      }
-    ) : /* @__PURE__ */ e("span", { children: r.label });
-    return /* @__PURE__ */ c("li", { className: "flex items-center gap-1.5", children: [
-      p,
-      !t && /* @__PURE__ */ e(d, { className: "size-3.5", "aria-hidden": !0 })
-    ] }, a);
-  }) }) });
+import { forwardRef as x } from "react";
+import { MoreHorizontal as v, ChevronRight as d } from "../../icons/index.js";
+import { cn as z } from "../../lib/utils.js";
+import { useStrings as y } from "../../hooks/use-strings.js";
+const B = x(function({
+  items: s,
+  maxItems: m = 4,
+  renderLink: l,
+  collapsedLabel: u,
+  className: f,
+  "aria-label": p,
+  ...h
+}, b) {
+  const o = y(), g = u ?? o.breadcrumbs.collapsed, n = s.length > m ? [s[0], { collapsed: !0 }, ...s.slice(-2)] : s;
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      ref: b,
+      "aria-label": p ?? o.breadcrumbs.label,
+      className: z("text-sm", f),
+      ...h,
+      children: /* @__PURE__ */ e("ol", { className: "text-foreground-subtle flex flex-wrap items-center gap-1.5", children: n.map((i, a) => {
+        const t = a === n.length - 1;
+        if ("collapsed" in i)
+          return /* @__PURE__ */ c("li", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e(v, { className: "size-4", "aria-hidden": !0 }),
+            /* @__PURE__ */ e("span", { className: "sr-only", children: g }),
+            /* @__PURE__ */ e(d, { className: "size-3.5", "aria-hidden": !0 })
+          ] }, `ellipsis-${a}`);
+        const r = i, N = t ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "text-foreground font-medium", children: r.label }) : r.href ? l ? l(r.href, r.label) : /* @__PURE__ */ e(
+          "a",
+          {
+            href: r.href,
+            className: "hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors duration-[var(--duration-fast)] outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            children: r.label
+          }
+        ) : /* @__PURE__ */ e("span", { children: r.label });
+        return /* @__PURE__ */ c("li", { className: "flex items-center gap-1.5", children: [
+          N,
+          !t && /* @__PURE__ */ e(d, { className: "size-3.5", "aria-hidden": !0 })
+        ] }, a);
+      }) })
+    }
+  );
 });
-v.displayName = "Breadcrumbs";
+B.displayName = "Breadcrumbs";
 export {
-  v as Breadcrumbs
+  B as Breadcrumbs
 };
 //# sourceMappingURL=Breadcrumbs.js.map

package/dist-lib/components/ui/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/ui/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { ChevronRight, MoreHorizontal } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface BreadcrumbItem {\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional URL. Last item is treated as current page even if href is set. */\n  href?: string;\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  /** Collapse to first + ellipsis + last `n` when items.length exceeds this. */\n  maxItems?: number;\n  /** Custom link renderer (for next/link, react-router, etc.). */\n  renderLink?: (href: string, children: ReactNode) => ReactNode;\n}\n\n/**\n * Breadcrumb trail. Collapses with an ellipsis when there are too many crumbs.\n *\n * @example\n *   <Breadcrumbs items={[\n *     { label: 'Projects', href: '/projects' },\n *     { label: 'Nova', href: '/projects/nova' },\n *     { label: 'Settings' },\n *   ]} />\n *\n * @example With react-router\n *   <Breadcrumbs items={trail} renderLink={(href, c) => <Link to={href}>{c}</Link>} />\n *\n * @do Always omit `href` on the last item — it represents the current page.\n * @dont Use Breadcrumbs for flat navigation. Use TopNav links instead.\n */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(function Breadcrumbs(\n  { items, maxItems = 4, renderLink, className, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const shouldCollapse = items.length > maxItems;\n  const displayItems =\n    !shouldCollapse\n      ? items\n      : [items[0], { collapsed: true } as const, ...items.slice(-2)];\n\n  return (\n    <nav ref={ref} aria-label={props['aria-label'] ?? strings.breadcrumbs.label} className={cn('text-sm', className)} {...props}>\n      <ol className=\"flex flex-wrap items-center gap-1.5 text-foreground-subtle\">\n        {displayItems.map((it, i) => {\n          const isLast = i === displayItems.length - 1;\n          if ('collapsed' in it) {\n            return (\n              <li key={`ellipsis-${i}`} className=\"flex items-center gap-1.5\">\n                <MoreHorizontal className=\"size-4\" aria-hidden />\n                <ChevronRight className=\"size-3.5\" aria-hidden />\n              </li>\n            );\n          }\n          const item = it as BreadcrumbItem;\n          const labelNode = isLast ? (\n            <span aria-current=\"page\" className=\"font-medium text-foreground\">\n              {item.label}\n            </span>\n          ) : item.href ? (\n            renderLink ? (\n              renderLink(item.href, item.label)\n            ) : (\n              <a\n                href={item.href}\n                className=\"hover:text-foreground transition-colors duration-[var(--duration-fast)] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm\"\n              >\n                {item.label}\n              </a>\n            )\n          ) : (\n            <span>{item.label}</span>\n          );\n          return (\n            <li key={i} className=\"flex items-center gap-1.5\">\n              {labelNode}\n              {!isLast && <ChevronRight className=\"size-3.5\" aria-hidden />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"names":["Breadcrumbs","forwardRef","items","maxItems","renderLink","className","props","ref","strings","useStrings","displayItems","jsx","cn","it","i","isLast","jsxs","MoreHorizontal","ChevronRight","item","labelNode"],"mappings":";;;;;;AAsCO,MAAMA,IAAcC,EAA0C,SACnE,EAAE,OAAAC,GAAO,UAAAC,IAAW,GAAG,YAAAC,GAAY,WAAAC,GAAW,GAAGC,EAAA,GACjDC,GACA;AACA,QAAMC,IAAUC,EAAA,GAEVC,IADiBR,EAAM,SAASC,IAIhC,CAACD,EAAM,CAAC,GAAG,EAAE,WAAW,MAAiB,GAAGA,EAAM,MAAM,EAAE,CAAC,IAD3DA;AAGN,SACE,gBAAAS,EAAC,OAAA,EAAI,KAAAJ,GAAU,cAAYD,EAAM,YAAY,KAAKE,EAAQ,YAAY,OAAO,WAAWI,EAAG,WAAWP,CAAS,GAAI,GAAGC,GACpH,UAAA,gBAAAK,EAAC,MAAA,EAAG,WAAU,8DACX,UAAAD,EAAa,IAAI,CAACG,GAAIC,MAAM;AAC3B,UAAMC,IAASD,MAAMJ,EAAa,SAAS;AAC3C,QAAI,eAAeG;AACjB,aACE,gBAAAG,EAAC,MAAA,EAAyB,WAAU,6BAClC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAe,WAAU,UAAS,eAAW,IAAC;AAAA,QAC/C,gBAAAN,EAACO,GAAA,EAAa,WAAU,YAAW,eAAW,GAAA,CAAC;AAAA,MAAA,EAAA,GAFxC,YAAYJ,CAAC,EAGtB;AAGJ,UAAMK,IAAON,GACPO,IAAYL,IAChB,gBAAAJ,EAAC,UAAK,gBAAa,QAAO,WAAU,+BACjC,UAAAQ,EAAK,OACR,IACEA,EAAK,OACPf,IACEA,EAAWe,EAAK,MAAMA,EAAK,KAAK,IAEhC,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAMQ,EAAK;AAAA,QACX,WAAU;AAAA,QAET,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,IAIV,gBAAAR,EAAC,QAAA,EAAM,UAAAQ,EAAK,MAAA,CAAM;AAEpB,WACE,gBAAAH,EAAC,MAAA,EAAW,WAAU,6BACnB,UAAA;AAAA,MAAAI;AAAA,MACA,CAACL,KAAU,gBAAAJ,EAACO,KAAa,WAAU,YAAW,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,GAFpDJ,CAGT;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ,CAAC;AACDd,EAAY,cAAc;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/ui/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { ChevronRight, MoreHorizontal } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface BreadcrumbItem {\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional URL. Last item is treated as current page even if href is set. */\n  href?: string;\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  /** Collapse to first + ellipsis + last `n` when items.length exceeds this. */\n  maxItems?: number;\n  /** Custom link renderer (for next/link, react-router, etc.). */\n  renderLink?: (href: string, children: ReactNode) => ReactNode;\n  /** sr-only text for the collapsed ellipsis. Default \"Hidden items\". */\n  collapsedLabel?: string;\n}\n\n/**\n * Breadcrumb trail. Collapses with an ellipsis when there are too many crumbs.\n *\n * @example\n *   <Breadcrumbs items={[\n *     { label: 'Projects', href: '/projects' },\n *     { label: 'Nova', href: '/projects/nova' },\n *     { label: 'Settings' },\n *   ]} />\n *\n * @example With react-router\n *   <Breadcrumbs items={trail} renderLink={(href, c) => <Link to={href}>{c}</Link>} />\n *\n * @do Always omit `href` on the last item — it represents the current page.\n * @dont Use Breadcrumbs for flat navigation. Use TopNav links instead.\n */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(function Breadcrumbs(\n  {\n    items,\n    maxItems = 4,\n    renderLink,\n    collapsedLabel: collapsedLabelProp,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const collapsedLabel = collapsedLabelProp ?? strings.breadcrumbs.collapsed;\n  const shouldCollapse = items.length > maxItems;\n  const displayItems = !shouldCollapse\n    ? items\n    : [items[0], { collapsed: true } as const, ...items.slice(-2)];\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel ?? strings.breadcrumbs.label}\n      className={cn('text-sm', className)}\n      {...props}\n    >\n      <ol className=\"text-foreground-subtle flex flex-wrap items-center gap-1.5\">\n        {displayItems.map((it, i) => {\n          const isLast = i === displayItems.length - 1;\n          if ('collapsed' in it) {\n            return (\n              <li key={`ellipsis-${i}`} className=\"flex items-center gap-1.5\">\n                <MoreHorizontal className=\"size-4\" aria-hidden />\n                <span className=\"sr-only\">{collapsedLabel}</span>\n                <ChevronRight className=\"size-3.5\" aria-hidden />\n              </li>\n            );\n          }\n          const item = it as BreadcrumbItem;\n          const labelNode = isLast ? (\n            <span aria-current=\"page\" className=\"text-foreground font-medium\">\n              {item.label}\n            </span>\n          ) : item.href ? (\n            renderLink ? (\n              renderLink(item.href, item.label)\n            ) : (\n              <a\n                href={item.href}\n                className=\"hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors duration-[var(--duration-fast)] outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n              >\n                {item.label}\n              </a>\n            )\n          ) : (\n            <span>{item.label}</span>\n          );\n          return (\n            <li key={i} className=\"flex items-center gap-1.5\">\n              {labelNode}\n              {!isLast && <ChevronRight className=\"size-3.5\" aria-hidden />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"names":["Breadcrumbs","forwardRef","items","maxItems","renderLink","collapsedLabelProp","className","ariaLabel","props","ref","strings","useStrings","collapsedLabel","displayItems","jsx","cn","it","i","isLast","jsxs","MoreHorizontal","ChevronRight","item","labelNode"],"mappings":";;;;;;AAwCO,MAAMA,IAAcC,EAA0C,SACnE;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,gBAAgBC;AAAA,EAChB,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAiBP,KAAsBK,EAAQ,YAAY,WAE3DG,IADiBX,EAAM,SAASC,IAGlC,CAACD,EAAM,CAAC,GAAG,EAAE,WAAW,MAAiB,GAAGA,EAAM,MAAM,EAAE,CAAC,IAD3DA;AAGJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,cAAYF,KAAaG,EAAQ,YAAY;AAAA,MAC7C,WAAWK,EAAG,WAAWT,CAAS;AAAA,MACjC,GAAGE;AAAA,MAEJ,UAAA,gBAAAM,EAAC,QAAG,WAAU,8DACX,YAAa,IAAI,CAACE,GAAIC,MAAM;AAC3B,cAAMC,IAASD,MAAMJ,EAAa,SAAS;AAC3C,YAAI,eAAeG;AACjB,iBACE,gBAAAG,EAAC,MAAA,EAAyB,WAAU,6BAClC,UAAA;AAAA,YAAA,gBAAAL,EAACM,GAAA,EAAe,WAAU,UAAS,eAAW,IAAC;AAAA,YAC/C,gBAAAN,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAF,GAAe;AAAA,YAC1C,gBAAAE,EAACO,GAAA,EAAa,WAAU,YAAW,eAAW,GAAA,CAAC;AAAA,UAAA,EAAA,GAHxC,YAAYJ,CAAC,EAItB;AAGJ,cAAMK,IAAON,GACPO,IAAYL,IAChB,gBAAAJ,EAAC,UAAK,gBAAa,QAAO,WAAU,+BACjC,UAAAQ,EAAK,OACR,IACEA,EAAK,OACPlB,IACEA,EAAWkB,EAAK,MAAMA,EAAK,KAAK,IAEhC,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAMQ,EAAK;AAAA,YACX,WAAU;AAAA,YAET,UAAAA,EAAK;AAAA,UAAA;AAAA,QAAA,IAIV,gBAAAR,EAAC,QAAA,EAAM,UAAAQ,EAAK,MAAA,CAAM;AAEpB,eACE,gBAAAH,EAAC,MAAA,EAAW,WAAU,6BACnB,UAAA;AAAA,UAAAI;AAAA,UACA,CAACL,KAAU,gBAAAJ,EAACO,KAAa,WAAU,YAAW,eAAW,GAAA,CAAC;AAAA,QAAA,EAAA,GAFpDJ,CAGT;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACDjB,EAAY,cAAc;"}

package/dist-lib/components/ui/Button.d.ts

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { VariantProps } from '../../lib/cva.js';
 declare const button: (props?: ({
     variant?: "link" | "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "md" | "sm" | "lg" | null | undefined;
+    size?: "icon" | "md" | "sm" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {
     /**
@@ -12,8 +12,10 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
      */
     asChild?: boolean;
     /**
-     * Show a spinner in place of the leading icon and disable the button.
-     * Use for async actions where the user must wait.
+     * Show a spinner in place of the leading icon and block interaction while
+     * keeping keyboard focus (`aria-disabled` + `aria-busy`, not `disabled`, so
+     * focus is not lost mid-submit). With `asChild` no spinner is rendered —
+     * the child is only marked busy and made inert.
      * @default false
      */
     loading?: boolean;

package/dist-lib/components/ui/Button.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Slot as p } from "@radix-ui/react-slot";
-import { Loader2 as x } from "../../icons/index.js";
-import { cn as h } from "../../lib/utils.js";
-import { cva as k } from "class-variance-authority";
-const z = k(
+import { jsx as c, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { Slot as h } from "@radix-ui/react-slot";
+import { Loader2 as k } from "../../icons/index.js";
+import { cn as y } from "../../lib/utils.js";
+import { cva as z } from "class-variance-authority";
+const _ = z(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "rounded-md text-sm font-medium",
@@ -14,23 +14,21 @@ const z = k(
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "focus-visible:ring-offset-background",
     "disabled:pointer-events-none disabled:opacity-50",
+    // Loading keeps focus (no `disabled`) but blocks interaction.
+    "aria-busy:pointer-events-none",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ],
   {
     variants: {
       variant: {
-        primary: [
-          "bg-accent text-on-accent",
-          "hover:bg-accent-hover",
-          "active:bg-accent-active"
-        ],
+        primary: ["bg-accent text-on-accent", "hover:bg-accent-hover", "active:bg-accent-active"],
         secondary: [
-          "bg-background-muted text-foreground border border-border",
+          "bg-background-muted text-foreground border border-border-input",
           "hover:bg-surface-hover",
           "active:bg-surface-active"
         ],
         outline: [
-          "border border-border bg-transparent text-foreground",
+          "border border-border-input bg-transparent text-foreground",
           "hover:bg-background-muted",
           "active:bg-background-subtle"
         ],
@@ -54,6 +52,8 @@ const z = k(
         sm: "h-8 px-3 text-xs [&_svg]:size-4",
         md: "h-9 px-3.5 text-sm [&_svg]:size-4",
         lg: "h-10 px-4 text-sm [&_svg]:size-5",
+        // 44px — touch-first screens and marketing CTAs.
+        xl: "h-11 px-5 text-base [&_svg]:size-5",
         icon: "h-9 w-9 [&_svg]:size-4"
       }
     },
@@ -61,57 +61,71 @@ const z = k(
       // The `link` variant ignores horizontal padding from the size variant.
       { variant: "link", size: "sm", class: "h-auto px-0" },
       { variant: "link", size: "md", class: "h-auto px-0" },
-      { variant: "link", size: "lg", class: "h-auto px-0" }
+      { variant: "link", size: "lg", class: "h-auto px-0" },
+      { variant: "link", size: "xl", class: "h-auto px-0" }
     ],
     defaultVariants: {
       variant: "primary",
       size: "md"
     }
   }
-), y = f(function({
-  className: o,
-  variant: i,
-  size: c,
-  asChild: d = !1,
+), w = x(function({
+  className: u,
+  variant: v,
+  size: d,
+  asChild: b = !1,
   loading: e = !1,
-  leadingIcon: u,
-  trailingIcon: v,
-  disabled: b,
-  children: t,
-  type: g = "button",
-  ...r
-}, a) {
-  const m = b || e, n = h(z({ variant: i, size: c }), o);
-  return d ? /* @__PURE__ */ s(
-    p,
+  leadingIcon: g,
+  trailingIcon: l,
+  disabled: p,
+  children: a,
+  type: f = "button",
+  onClick: n,
+  ...i
+}, o) {
+  const s = y(_({ variant: v, size: d }), u);
+  return b ? /* @__PURE__ */ c(
+    h,
     {
-      ref: a,
+      ref: o,
       "aria-busy": e || void 0,
+      "aria-disabled": e || void 0,
       "data-loading": e || void 0,
-      className: n,
-      ...r,
-      children: t
+      className: s,
+      onClick: n,
+      onClickCapture: e ? r : void 0,
+      onKeyDownCapture: e ? N : void 0,
+      ...i,
+      children: a
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ m(
     "button",
     {
-      ref: a,
-      type: g,
+      ref: o,
+      type: f,
       "aria-busy": e || void 0,
-      disabled: m,
+      "aria-disabled": e || void 0,
+      disabled: p,
       "data-loading": e || void 0,
-      className: n,
-      ...r,
+      className: s,
+      onClick: e ? r : n,
+      ...i,
       children: [
-        e ? /* @__PURE__ */ s(x, { className: "animate-spin", "aria-hidden": "true" }) : u,
-        t,
-        !e && v
+        e ? /* @__PURE__ */ c(k, { className: "animate-spin", "aria-hidden": "true" }) : g,
+        a,
+        !e && l
       ]
     }
   );
 });
-y.displayName = "Button";
+w.displayName = "Button";
+function r(t) {
+  t.preventDefault(), t.stopPropagation();
+}
+function N(t) {
+  (t.key === "Enter" || t.key === " ") && r(t);
+}
 export {
-  y as Button
+  w as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist-lib/components/ui/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/ui/Button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Variants — the entire visual surface of the Button.\n *\n *  All sizes share the same border radius (md = 6px) per the refined-minimal\n *  rules. Focus state is the standardised 2px-ring + 2px-offset on every\n *  variant, including `link`.\n * --------------------------------------------------------------------------- */\nconst button = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'rounded-md text-sm font-medium',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-accent text-on-accent',\n          'hover:bg-accent-hover',\n          'active:bg-accent-active',\n        ],\n        secondary: [\n          'bg-background-muted text-foreground border border-border',\n          'hover:bg-surface-hover',\n          'active:bg-surface-active',\n        ],\n        outline: [\n          'border border-border bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        ghost: [\n          'bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        destructive: [\n          'bg-danger text-on-danger',\n          'hover:bg-danger-hover',\n          'active:bg-danger-active',\n        ],\n        link: [\n          'bg-transparent text-accent underline-offset-4 px-0',\n          'hover:underline',\n          'active:text-accent-hover',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-xs [&_svg]:size-4',\n        md: 'h-9 px-3.5 text-sm [&_svg]:size-4',\n        lg: 'h-10 px-4 text-sm [&_svg]:size-5',\n        icon: 'h-9 w-9 [&_svg]:size-4',\n      },\n    },\n    compoundVariants: [\n      // The `link` variant ignores horizontal padding from the size variant.\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof button> {\n  /**\n   * Render as a different element via Radix Slot. Useful when wrapping a\n   * link: `<Button asChild><a href=\"…\">…</a></Button>`.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Show a spinner in place of the leading icon and disable the button.\n   * Use for async actions where the user must wait.\n   * @default false\n   */\n  loading?: boolean;\n  /** Icon rendered before the label. Replaced by a spinner when loading. */\n  leadingIcon?: ReactNode;\n  /** Icon rendered after the label. Hidden while loading. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Primary interactive element. Variants:\n *\n * - `primary` — accent fill, the single most prominent action on a screen.\n * - `secondary` — neutral fill, sits next to a primary or stands alone for\n *   secondary actions.\n * - `outline` — border only, transparent fill. Use when next to a primary.\n * - `ghost` — no border, hover background. Use in dense toolbars and tables.\n * - `destructive` — danger fill, reserved for irreversible actions.\n * - `link` — text styled as a link.\n *\n * @example Two-button row\n *   <div className=\"flex gap-2 justify-end\">\n *     <Button variant=\"outline\">Cancel</Button>\n *     <Button>Save changes</Button>\n *   </div>\n *\n * @example Loading state\n *   <Button loading leadingIcon={<Mail />}>Sending…</Button>\n *\n * @do Use one primary button per major surface. Verb-first labels.\n * @dont Stack three primary buttons in a row — only the most important\n *       action gets the primary variant.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    loading = false,\n    leadingIcon,\n    trailingIcon,\n    disabled,\n    children,\n    type = 'button',\n    ...props\n  },\n  ref,\n) {\n  const isDisabled = disabled || loading;\n  const classes = cn(button({ variant, size }), className);\n\n  if (asChild) {\n    // Slot requires exactly one element child — pass the consumer's element\n    // through untouched. The consumer is responsible for any leading/trailing\n    // icons inside that element.\n    return (\n      <Slot\n        ref={ref}\n        aria-busy={loading || undefined}\n        data-loading={loading || undefined}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      data-loading={loading || undefined}\n      className={classes}\n      {...props}\n    >\n      {loading ? (\n        <Loader2 className=\"animate-spin\" aria-hidden=\"true\" />\n      ) : (\n        leadingIcon\n      )}\n      {children}\n      {!loading && trailingIcon}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n"],"names":["button","cva","Button","forwardRef","className","variant","size","asChild","loading","leadingIcon","trailingIcon","disabled","children","type","props","ref","isDisabled","classes","cn","jsx","Slot","jsxs","Loader2"],"mappings":";;;;;;;AAeA,MAAMA,IAASC;AAAA,EACb;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,IAAc;AAAA,IAEtD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GA+CaC,IAASC,EAA2C,SAC/D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAaL,KAAYH,GACzBS,IAAUC,EAAGlB,EAAO,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAEvD,SAAIG,IAKA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,aAAWP,KAAW;AAAA,MACtB,gBAAcA,KAAW;AAAA,MACzB,WAAWS;AAAA,MACV,GAAGH;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,aAAWL,KAAW;AAAA,MACtB,UAAUQ;AAAA,MACV,gBAAcR,KAAW;AAAA,MACzB,WAAWS;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAN,sBACEc,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAErDb;AAAA,QAEDG;AAAA,QACA,CAACJ,KAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;AAEDR,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/ui/Button.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type SyntheticEvent,\n} from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Variants — the entire visual surface of the Button.\n *\n *  All sizes share the same border radius (md = 6px) per the refined-minimal\n *  rules. Focus state is the standardised 2px-ring + 2px-offset on every\n *  variant, including `link`.\n * --------------------------------------------------------------------------- */\nconst button = cva(\n  [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n    'rounded-md text-sm font-medium',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    // Loading keeps focus (no `disabled`) but blocks interaction.\n    'aria-busy:pointer-events-none',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: ['bg-accent text-on-accent', 'hover:bg-accent-hover', 'active:bg-accent-active'],\n        secondary: [\n          'bg-background-muted text-foreground border border-border-input',\n          'hover:bg-surface-hover',\n          'active:bg-surface-active',\n        ],\n        outline: [\n          'border border-border-input bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        ghost: [\n          'bg-transparent text-foreground',\n          'hover:bg-background-muted',\n          'active:bg-background-subtle',\n        ],\n        destructive: [\n          'bg-danger text-on-danger',\n          'hover:bg-danger-hover',\n          'active:bg-danger-active',\n        ],\n        link: [\n          'bg-transparent text-accent underline-offset-4 px-0',\n          'hover:underline',\n          'active:text-accent-hover',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-xs [&_svg]:size-4',\n        md: 'h-9 px-3.5 text-sm [&_svg]:size-4',\n        lg: 'h-10 px-4 text-sm [&_svg]:size-5',\n        // 44px — touch-first screens and marketing CTAs.\n        xl: 'h-11 px-5 text-base [&_svg]:size-5',\n        icon: 'h-9 w-9 [&_svg]:size-4',\n      },\n    },\n    compoundVariants: [\n      // The `link` variant ignores horizontal padding from the size variant.\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n      { variant: 'link', size: 'xl', class: 'h-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {\n  /**\n   * Render as a different element via Radix Slot. Useful when wrapping a\n   * link: `<Button asChild><a href=\"…\">…</a></Button>`.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Show a spinner in place of the leading icon and block interaction while\n   * keeping keyboard focus (`aria-disabled` + `aria-busy`, not `disabled`, so\n   * focus is not lost mid-submit). With `asChild` no spinner is rendered —\n   * the child is only marked busy and made inert.\n   * @default false\n   */\n  loading?: boolean;\n  /** Icon rendered before the label. Replaced by a spinner when loading. */\n  leadingIcon?: ReactNode;\n  /** Icon rendered after the label. Hidden while loading. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Primary interactive element. Variants:\n *\n * - `primary` — accent fill, the single most prominent action on a screen.\n * - `secondary` — neutral fill, sits next to a primary or stands alone for\n *   secondary actions.\n * - `outline` — border only, transparent fill. Use when next to a primary.\n * - `ghost` — no border, hover background. Use in dense toolbars and tables.\n * - `destructive` — danger fill, reserved for irreversible actions.\n * - `link` — text styled as a link.\n *\n * @example Two-button row\n *   <div className=\"flex gap-2 justify-end\">\n *     <Button variant=\"outline\">Cancel</Button>\n *     <Button>Save changes</Button>\n *   </div>\n *\n * @example Loading state\n *   <Button loading leadingIcon={<Mail />}>Sending…</Button>\n *\n * @do Use one primary button per major surface. Verb-first labels.\n * @dont Stack three primary buttons in a row — only the most important\n *       action gets the primary variant.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    loading = false,\n    leadingIcon,\n    trailingIcon,\n    disabled,\n    children,\n    type = 'button',\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const classes = cn(button({ variant, size }), className);\n\n  if (asChild) {\n    // Slot requires exactly one element child — pass the consumer's element\n    // through untouched. The consumer is responsible for any leading/trailing\n    // icons inside that element. While loading, a capture-phase guard stops\n    // the child's own handlers (and link navigation) before they run.\n    return (\n      <Slot\n        ref={ref}\n        aria-busy={loading || undefined}\n        aria-disabled={loading || undefined}\n        data-loading={loading || undefined}\n        className={classes}\n        onClick={onClick}\n        onClickCapture={loading ? blockEvent : undefined}\n        onKeyDownCapture={loading ? blockActivationKey : undefined}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      aria-disabled={loading || undefined}\n      disabled={disabled}\n      data-loading={loading || undefined}\n      className={classes}\n      onClick={loading ? blockEvent : onClick}\n      {...props}\n    >\n      {loading ? <Loader2 className=\"animate-spin\" aria-hidden=\"true\" /> : leadingIcon}\n      {children}\n      {!loading && trailingIcon}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nfunction blockEvent(e: SyntheticEvent | MouseEvent) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n\nfunction blockActivationKey(e: React.KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') blockEvent(e);\n}\n"],"names":["button","cva","Button","forwardRef","className","variant","size","asChild","loading","leadingIcon","trailingIcon","disabled","children","type","onClick","props","ref","classes","cn","jsx","Slot","blockEvent","blockActivationKey","jsxs","Loader2","e"],"mappings":";;;;;;;AAqBA,MAAMA,IAASC;AAAA,EACb;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS,CAAC,4BAA4B,yBAAyB,yBAAyB;AAAA,QACxF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,QAEJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,MACtC,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,cAAA;AAAA,IAAc;AAAA,IAEtD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAgDaC,IAASC,EAA2C,SAC/D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAGlB,EAAO,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAEvD,SAAIG,IAMA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,aAAWR,KAAW;AAAA,MACtB,iBAAeA,KAAW;AAAA,MAC1B,gBAAcA,KAAW;AAAA,MACzB,WAAWS;AAAA,MACX,SAAAH;AAAA,MACA,gBAAgBN,IAAUa,IAAa;AAAA,MACvC,kBAAkBb,IAAUc,IAAqB;AAAA,MAChD,GAAGP;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,MAAAH;AAAA,MACA,aAAWL,KAAW;AAAA,MACtB,iBAAeA,KAAW;AAAA,MAC1B,UAAAG;AAAA,MACA,gBAAcH,KAAW;AAAA,MACzB,WAAWS;AAAA,MACX,SAAST,IAAUa,IAAaP;AAAA,MAC/B,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAP,sBAAWgB,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAAKf;AAAA,QACpEG;AAAA,QACA,CAACJ,KAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;AAEDR,EAAO,cAAc;AAErB,SAASmB,EAAWI,GAAgC;AAClD,EAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACJ;AAEA,SAASH,EAAmBG,GAAwB;AAClD,GAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,UAAgBA,CAAC;AACtD;"}

package/dist-lib/components/ui/Calendar.d.ts

@@ -9,7 +9,7 @@ export type CalendarProps = DayPickerProps & {
  * Not a forwardRef: RDP v9's `DayPicker` is a plain function component and
  * exposes no root ref, so a forwarded ref would silently be dropped.
  */
-export declare function Calendar({ className, classNames, captionLayout, startMonth, endMonth, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ className, classNames, captionLayout, startMonth, endMonth, labels, weekStartsOn, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Calendar {
     var displayName: string;
 }