@craftzbay/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+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);
+      }) })
+    }
+  );
+});
+B.displayName = "Breadcrumbs";
+export {
+  B as Breadcrumbs
+};
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +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  /** 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

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { VariantProps } from '../../lib/cva';
+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

@@ -0,0 +1,131 @@
+"use client";
+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",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+    "outline-none",
+    "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"],
+        secondary: [
+          "bg-background-muted text-foreground border border-border-input",
+          "hover:bg-surface-hover",
+          "active:bg-surface-active"
+        ],
+        outline: [
+          "border border-border-input bg-transparent text-foreground",
+          "hover:bg-background-muted",
+          "active:bg-background-subtle"
+        ],
+        ghost: [
+          "bg-transparent text-foreground",
+          "hover:bg-background-muted",
+          "active:bg-background-subtle"
+        ],
+        destructive: [
+          "bg-danger text-on-danger",
+          "hover:bg-danger-hover",
+          "active:bg-danger-active"
+        ],
+        link: [
+          "bg-transparent text-accent underline-offset-4 px-0",
+          "hover:underline",
+          "active:text-accent-hover"
+        ]
+      },
+      size: {
+        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"
+      }
+    },
+    compoundVariants: [
+      // 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: "xl", class: "h-auto px-0" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), w = x(function({
+  className: u,
+  variant: v,
+  size: d,
+  asChild: b = !1,
+  loading: e = !1,
+  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: o,
+      "aria-busy": e || void 0,
+      "aria-disabled": e || void 0,
+      "data-loading": e || void 0,
+      className: s,
+      onClick: n,
+      onClickCapture: e ? r : void 0,
+      onKeyDownCapture: e ? N : void 0,
+      ...i,
+      children: a
+    }
+  ) : /* @__PURE__ */ m(
+    "button",
+    {
+      ref: o,
+      type: f,
+      "aria-busy": e || void 0,
+      "aria-disabled": e || void 0,
+      disabled: p,
+      "data-loading": e || void 0,
+      className: s,
+      onClick: e ? r : n,
+      ...i,
+      children: [
+        e ? /* @__PURE__ */ c(k, { className: "animate-spin", "aria-hidden": "true" }) : g,
+        a,
+        !e && l
+      ]
+    }
+  );
+});
+w.displayName = "Button";
+function r(t) {
+  t.preventDefault(), t.stopPropagation();
+}
+function N(t) {
+  (t.key === "Enter" || t.key === " ") && r(t);
+}
+export {
+  w as Button
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"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":"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"}

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

@@ -5,5 +5,11 @@ export type CalendarProps = DayPickerProps & {
 /**
  * Standalone calendar surface. Used by DatePicker, but can also be embedded
  * directly in popovers, sheets, or inline forms. Wraps `react-day-picker` v9.
+ *
+ * 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 const Calendar: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLDivElement>>;
+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;
+}

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

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { DayPicker as w, getDefaultClassNames as _ } from "react-day-picker";
+import * as u from "@radix-ui/react-select";
+import { ChevronLeft as y, ChevronRight as N, ChevronDown as g } from "../../icons/index.js";
+import { Select as k, SelectContent as D, SelectItem as j } from "./Select.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as C } from "../../hooks/use-strings.js";
+const f = _();
+function S({
+  options: l = [],
+  value: r,
+  onChange: o,
+  disabled: d,
+  "aria-label": c
+}) {
+  const i = l.find((e) => e.value === Number(r));
+  return /* @__PURE__ */ b(
+    k,
+    {
+      value: r === void 0 ? void 0 : String(r),
+      onValueChange: (e) => {
+        o == null || o({ target: { value: e } });
+      },
+      disabled: d,
+      children: [
+        /* @__PURE__ */ b(
+          u.Trigger,
+          {
+            "aria-label": c,
+            className: n(
+              "border-border bg-card text-foreground inline-flex h-7 items-center gap-1 rounded-md border px-2 text-sm font-medium",
+              "hover:bg-background-muted focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "disabled:pointer-events-none disabled:opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ t(u.Value, { children: i == null ? void 0 : i.label }),
+              /* @__PURE__ */ t(u.Icon, { asChild: !0, children: /* @__PURE__ */ t(g, { className: "size-3.5 opacity-60", "aria-hidden": !0 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(D, { className: "max-h-64", children: l.map((e) => /* @__PURE__ */ t(j, { value: String(e.value), disabled: e.disabled, children: e.label }, e.value)) })
+      ]
+    }
+  );
+}
+const m = n(
+  "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted",
+  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "disabled:opacity-40 disabled:pointer-events-none"
+);
+function z({
+  className: l,
+  classNames: r,
+  captionLayout: o = "dropdown",
+  startMonth: d,
+  endMonth: c,
+  labels: i,
+  weekStartsOn: e = 1,
+  ...v
+}) {
+  const s = C(), { start: p, end: h } = x(() => {
+    const a = /* @__PURE__ */ new Date();
+    return {
+      start: d ?? new Date(a.getFullYear() - 100, 0, 1),
+      end: c ?? new Date(a.getFullYear() + 10, 11, 31)
+    };
+  }, [d, c]);
+  return /* @__PURE__ */ t(
+    w,
+    {
+      showOutsideDays: !0,
+      weekStartsOn: e,
+      captionLayout: o,
+      startMonth: p,
+      endMonth: h,
+      className: n("border-border bg-card inline-block rounded-lg border p-3", l),
+      labels: {
+        labelPrevious: () => s.calendar.previous,
+        labelNext: () => s.calendar.next,
+        labelMonthDropdown: () => s.calendar.chooseMonth,
+        labelYearDropdown: () => s.calendar.chooseYear,
+        labelNav: () => s.calendar.nav,
+        ...i
+      },
+      classNames: {
+        ...f,
+        root: n(f.root, "relative"),
+        months: "relative flex flex-col gap-4 sm:flex-row sm:gap-6",
+        month: "flex flex-col gap-3",
+        month_caption: "relative flex h-8 items-center justify-center px-8",
+        dropdowns: "flex items-center justify-center gap-2",
+        caption_label: "flex items-center gap-1 text-sm font-medium",
+        // The caption is positioned and painted after the nav, so the nav must
+        // sit above it (z-10) for its buttons to receive clicks. The container
+        // itself ignores pointer events so the centred dropdowns underneath
+        // stay clickable — only the buttons opt back in.
+        nav: "pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between",
+        button_previous: m,
+        button_next: m,
+        month_grid: "w-full border-collapse",
+        weekdays: "grid grid-cols-7",
+        weekday: "h-8 w-9 text-center text-xs font-medium uppercase tracking-wide text-foreground-subtle",
+        week: "mt-0.5 grid grid-cols-7",
+        day: "relative h-9 w-9 p-0 text-center",
+        day_button: n(
+          "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        ),
+        // RDP 9 puts aria-selected / the modifier classes on the <td>, so the
+        // button is styled through its cell. `[&_button:hover]` outranks the
+        // button's own `hover:` rule so selected days keep the accent on hover.
+        selected: n(
+          "[&_button]:bg-accent [&_button]:text-on-accent [&_button:hover]:bg-accent-hover",
+          "[&_button]:focus-visible:ring-offset-accent-soft"
+        ),
+        today: "[&_button]:border [&_button]:border-border",
+        outside: "text-foreground-subtle",
+        disabled: "opacity-40 pointer-events-none",
+        range_start: "[&_button]:rounded-r-none",
+        range_end: "[&_button]:rounded-l-none",
+        range_middle: "[&_button]:bg-accent-soft [&_button]:text-foreground [&_button:hover]:bg-accent-soft [&_button]:rounded-none",
+        hidden: "invisible",
+        ...r
+      },
+      components: {
+        Dropdown: S,
+        Chevron: ({ orientation: a }) => a === "left" ? /* @__PURE__ */ t(y, { className: "size-4" }) : a === "right" ? /* @__PURE__ */ t(N, { className: "size-4" }) : /* @__PURE__ */ t(g, { className: "size-3.5 opacity-60" })
+      },
+      ...v
+    }
+  );
+}
+z.displayName = "Calendar";
+export {
+  z as Calendar
+};
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/ui/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type ChangeEvent } from 'react';\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayPickerProps,\n  type DropdownProps,\n} from 'react-day-picker';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@/icons';\nimport { Select, SelectContent, SelectItem } from './Select';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n// RDP's structural class names (`rdp-*`). Its stylesheet is intentionally NOT\n// imported — every visual rule below is ours, so there is no cascade to fight\n// and no CSS side effect for tree-shaken consumers.\nconst rdp = getDefaultClassNames();\n\nexport type CalendarProps = DayPickerProps & { className?: string };\n\n/**\n * Month / year dropdown rendered with the design-system Select instead of a\n * native `<select>` — the native popup is unbounded (a century of years fills\n * the screen on macOS) and can't be styled. Radix gives us a max-height,\n * internal scrolling, and auto-scroll to the selected year.\n */\nfunction CalendarDropdown({\n  options = [],\n  value,\n  onChange,\n  disabled,\n  'aria-label': ariaLabel,\n}: DropdownProps) {\n  const selected = options.find((opt) => opt.value === Number(value));\n\n  return (\n    <Select\n      value={value === undefined ? undefined : String(value)}\n      onValueChange={(v) => {\n        // RDP's handler expects a native select change event — fake the shape.\n        onChange?.({ target: { value: v } } as unknown as ChangeEvent<HTMLSelectElement>);\n      }}\n      disabled={disabled}\n    >\n      <SelectPrimitive.Trigger\n        aria-label={ariaLabel}\n        className={cn(\n          'border-border bg-card text-foreground inline-flex h-7 items-center gap-1 rounded-md border px-2 text-sm font-medium',\n          'hover:bg-background-muted focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )}\n      >\n        <SelectPrimitive.Value>{selected?.label}</SelectPrimitive.Value>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown className=\"size-3.5 opacity-60\" aria-hidden />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n      <SelectContent className=\"max-h-64\">\n        {options.map((opt) => (\n          <SelectItem key={opt.value} value={String(opt.value)} disabled={opt.disabled}>\n            {opt.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nconst navButton = cn(\n  'pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground-muted hover:bg-background-muted',\n  'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  'disabled:opacity-40 disabled:pointer-events-none',\n);\n\n/**\n * Standalone calendar surface. Used by DatePicker, but can also be embedded\n * directly in popovers, sheets, or inline forms. Wraps `react-day-picker` v9.\n *\n * Not a forwardRef: RDP v9's `DayPicker` is a plain function component and\n * exposes no root ref, so a forwarded ref would silently be dropped.\n */\nexport function Calendar({\n  className,\n  classNames,\n  captionLayout = 'dropdown',\n  startMonth,\n  endMonth,\n  labels,\n  weekStartsOn = 1,\n  ...props\n}: CalendarProps) {\n  const strings = useStrings();\n  // Bound the month/year dropdowns. Consumers can narrow this with\n  // startMonth / endMonth; the default spans a century back to a decade ahead\n  // so the year dropdown is useful for both birthdays and future scheduling.\n  // Memoised — fresh Date identities every render defeat RDP's internal\n  // memoisation and re-derive the navigable range on each paint.\n  const { start, end } = useMemo(() => {\n    const now = new Date();\n    return {\n      start: startMonth ?? new Date(now.getFullYear() - 100, 0, 1),\n      end: endMonth ?? new Date(now.getFullYear() + 10, 11, 31),\n    };\n  }, [startMonth, endMonth]);\n\n  return (\n    <DayPicker\n      showOutsideDays\n      weekStartsOn={weekStartsOn}\n      captionLayout={captionLayout}\n      startMonth={start}\n      endMonth={end}\n      className={cn('border-border bg-card inline-block rounded-lg border p-3', className)}\n      labels={{\n        labelPrevious: () => strings.calendar.previous,\n        labelNext: () => strings.calendar.next,\n        labelMonthDropdown: () => strings.calendar.chooseMonth,\n        labelYearDropdown: () => strings.calendar.chooseYear,\n        labelNav: () => strings.calendar.nav,\n        ...labels,\n      }}\n      classNames={{\n        ...rdp,\n        root: cn(rdp.root, 'relative'),\n        months: 'relative flex flex-col gap-4 sm:flex-row sm:gap-6',\n        month: 'flex flex-col gap-3',\n        month_caption: 'relative flex h-8 items-center justify-center px-8',\n        dropdowns: 'flex items-center justify-center gap-2',\n        caption_label: 'flex items-center gap-1 text-sm font-medium',\n        // The caption is positioned and painted after the nav, so the nav must\n        // sit above it (z-10) for its buttons to receive clicks. The container\n        // itself ignores pointer events so the centred dropdowns underneath\n        // stay clickable — only the buttons opt back in.\n        nav: 'pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between',\n        button_previous: navButton,\n        button_next: navButton,\n        month_grid: 'w-full border-collapse',\n        weekdays: 'grid grid-cols-7',\n        weekday:\n          'h-8 w-9 text-center text-xs font-medium uppercase tracking-wide text-foreground-subtle',\n        week: 'mt-0.5 grid grid-cols-7',\n        day: 'relative h-9 w-9 p-0 text-center',\n        day_button: cn(\n          'inline-flex h-9 w-9 items-center justify-center rounded-md text-sm hover:bg-background-muted',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        ),\n        // RDP 9 puts aria-selected / the modifier classes on the <td>, so the\n        // button is styled through its cell. `[&_button:hover]` outranks the\n        // button's own `hover:` rule so selected days keep the accent on hover.\n        selected: cn(\n          '[&_button]:bg-accent [&_button]:text-on-accent [&_button:hover]:bg-accent-hover',\n          '[&_button]:focus-visible:ring-offset-accent-soft',\n        ),\n        today: '[&_button]:border [&_button]:border-border',\n        outside: 'text-foreground-subtle',\n        disabled: 'opacity-40 pointer-events-none',\n        range_start: '[&_button]:rounded-r-none',\n        range_end: '[&_button]:rounded-l-none',\n        range_middle:\n          '[&_button]:bg-accent-soft [&_button]:text-foreground [&_button:hover]:bg-accent-soft [&_button]:rounded-none',\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Dropdown: CalendarDropdown,\n        Chevron: ({ orientation }) => {\n          if (orientation === 'left') return <ChevronLeft className=\"size-4\" />;\n          if (orientation === 'right') return <ChevronRight className=\"size-4\" />;\n          // up/down — used for the month/year dropdown carets\n          return <ChevronDown className=\"size-3.5 opacity-60\" />;\n        },\n      }}\n      {...props}\n    />\n  );\n}\nCalendar.displayName = 'Calendar';\n"],"names":["rdp","getDefaultClassNames","CalendarDropdown","options","value","onChange","disabled","ariaLabel","selected","opt","jsxs","Select","v","SelectPrimitive","cn","jsx","ChevronDown","SelectContent","SelectItem","navButton","Calendar","className","classNames","captionLayout","startMonth","endMonth","labels","weekStartsOn","props","strings","useStrings","start","end","useMemo","now","DayPicker","orientation","ChevronLeft","ChevronRight"],"mappings":"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"}

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

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
 declare const card: (props?: ({
     variant?: "default" | "interactive" | null | undefined;
     padding?: "none" | "md" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof card> {
+    /** Render the child element (e.g. a router `<Link>`) with Card styles. */
+    asChild?: boolean;
 }
 /**
  * Bounded surface used to group related content. Per the refined-minimal

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Slot as C } from "@radix-ui/react-slot";
+import { cn as i } from "../../lib/utils.js";
+import { cva as v } from "class-variance-authority";
+const x = v(
+  [
+    "rounded-lg border bg-card text-card-foreground",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        interactive: [
+          "border-border hover:border-border-strong hover:bg-background-subtle cursor-pointer",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:ring-offset-background"
+        ]
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        /* CANON: 16 compact/mobile, 24 desktop — never 20. */
+        md: "p-4 md:p-6",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "md"
+    }
+  }
+), N = d(function({ className: t, variant: r, padding: e, onClick: s, onKeyDown: c, role: f, tabIndex: l, asChild: m, ...p }, g) {
+  const b = m ? C : "div", u = r === "interactive" && typeof s == "function";
+  return /* @__PURE__ */ o(
+    b,
+    {
+      ref: g,
+      role: f ?? (u ? "button" : void 0),
+      tabIndex: l ?? (u ? 0 : void 0),
+      onClick: s,
+      onKeyDown: u || c ? (a) => {
+        c == null || c(a), !(a.defaultPrevented || !u) && a.target === a.currentTarget && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), a.currentTarget.click());
+      } : void 0,
+      className: i(x({ variant: r, padding: e }), t),
+      ...p
+    }
+  );
+});
+N.displayName = "Card";
+const y = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("flex flex-col gap-1 pb-4", t), ...r });
+  }
+);
+y.displayName = "CardHeader";
+const h = d(
+  function({ className: t, children: r, ...e }, s) {
+    return /* @__PURE__ */ o(
+      "h3",
+      {
+        ref: s,
+        className: i("text-foreground text-base leading-tight font-semibold", t),
+        ...e,
+        children: r
+      }
+    );
+  }
+);
+h.displayName = "CardTitle";
+const k = d(function({ className: t, ...r }, e) {
+  return /* @__PURE__ */ o("p", { ref: e, className: i("text-foreground-muted text-sm", t), ...r });
+});
+k.displayName = "CardDescription";
+const T = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("text-foreground text-sm", t), ...r });
+  }
+);
+T.displayName = "CardContent";
+const F = d(
+  function({ className: t, ...r }, e) {
+    return /* @__PURE__ */ o("div", { ref: e, className: i("flex items-center gap-2 pt-4", t), ...r });
+  }
+);
+F.displayName = "CardFooter";
+export {
+  N as Card,
+  T as CardContent,
+  k as CardDescription,
+  F as CardFooter,
+  y as CardHeader,
+  h as CardTitle
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/ui/Card.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type KeyboardEvent } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst card = cva(\n  [\n    'rounded-lg border bg-card text-card-foreground',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        interactive: [\n          'border-border hover:border-border-strong hover:bg-background-subtle cursor-pointer',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          'focus-visible:ring-offset-background',\n        ],\n      },\n      padding: {\n        none: '',\n        sm: 'p-4',\n        /* CANON: 16 compact/mobile, 24 desktop — never 20. */\n        md: 'p-4 md:p-6',\n        lg: 'p-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'md',\n    },\n  },\n);\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof card> {\n  /** Render the child element (e.g. a router `<Link>`) with Card styles. */\n  asChild?: boolean;\n}\n\n/**\n * Bounded surface used to group related content. Per the refined-minimal\n * rules, cards on the page have a hairline border and no shadow.\n *\n * @example Header + content + footer\n *   <Card>\n *     <CardHeader>\n *       <CardTitle>Storage</CardTitle>\n *       <CardDescription>Usage across all projects.</CardDescription>\n *     </CardHeader>\n *     <CardContent>…</CardContent>\n *     <CardFooter><Button>Upgrade</Button></CardFooter>\n *   </Card>\n *\n * @example Clickable list row\n *   <Card variant=\"interactive\" onClick={open}>…</Card>\n *\n * @do Use the `border` style. If a card needs to \"float\" (modal, dropdown),\n *      it isn't a Card — it's a Popover/Dialog.\n * @dont Add `shadow-lg` to Cards. Shadows on inline surfaces violate the\n *       refined-minimal direction.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, variant, padding, onClick, onKeyDown, role, tabIndex, asChild, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot : 'div';\n  // An interactive card with a click handler must be reachable and operable\n  // from the keyboard: expose it as a button and map Enter/Space to click.\n  const isButtonLike = variant === 'interactive' && typeof onClick === 'function';\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !isButtonLike) return;\n    // Only when the card itself is focused — nested controls handle their own keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.currentTarget.click();\n    }\n  };\n  return (\n    <Comp\n      ref={ref}\n      role={role ?? (isButtonLike ? 'button' : undefined)}\n      tabIndex={tabIndex ?? (isButtonLike ? 0 : undefined)}\n      onClick={onClick}\n      onKeyDown={isButtonLike || onKeyDown ? handleKeyDown : undefined}\n      className={cn(card({ variant, padding }), className)}\n      {...props}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n  },\n);\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, children, ...props }, ref) {\n    return (\n      <h3\n        ref={ref}\n        className={cn('text-foreground text-base leading-tight font-semibold', className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function CardDescription({ className, ...props }, ref) {\n  return <p ref={ref} className={cn('text-foreground-muted text-sm', className)} {...props} />;\n});\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('text-foreground text-sm', className)} {...props} />;\n  },\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    return <div ref={ref} className={cn('flex items-center gap-2 pt-4', className)} {...props} />;\n  },\n);\nCardFooter.displayName = 'CardFooter';\n"],"names":["card","cva","Card","forwardRef","className","variant","padding","onClick","onKeyDown","role","tabIndex","asChild","props","ref","Comp","Slot","isButtonLike","jsx","event","cn","CardHeader","CardTitle","children","CardDescription","CardContent","CardFooter"],"mappings":"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"}

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

@@ -13,11 +13,15 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
  */
 export declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const CarouselContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const CarouselItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare function CarouselPrevious({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CarouselNext({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** 0-based position, used for the default "{i+1} of {n}" label. */
+    index?: number;
+}
+export declare const CarouselItem: import('react').ForwardRefExoticComponent<CarouselItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CarouselPrevious: import('react').ForwardRefExoticComponent<Omit<Omit<import('./IconButton.js').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "aria-label" | "icon"> & {
+    'aria-label'?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const CarouselNext: import('react').ForwardRefExoticComponent<Omit<Omit<import('./IconButton.js').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "aria-label" | "icon"> & {
+    'aria-label'?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 export {};