@craftzbay/ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as d } from "../../lib/utils.js";
+import { useStrings as m } from "../../hooks/use-strings.js";
+const u = { sm: "size-3.5", md: "size-4", lg: "size-6" }, f = {
+  accent: "text-accent",
+  neutral: "text-foreground-subtle",
+  "on-accent": "text-on-accent"
+}, x = p(function({ className: t, tone: r = "accent", size: o = "md", label: i, decorative: e, ...s }, c) {
+  const a = m();
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      ref: c,
+      viewBox: "0 0 24 24",
+      role: e ? void 0 : "status",
+      "aria-label": e ? void 0 : i ?? a.spinner.loading,
+      "aria-hidden": e || void 0,
+      className: d("animate-spin", u[o], f[r], t),
+      ...s,
+      children: [
+        /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", strokeOpacity: 0.2, fill: "none" }),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M12 2a10 10 0 0 1 10 10",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            fill: "none"
+          }
+        )
+      ]
+    }
+  );
+});
+x.displayName = "Spinner";
+export {
+  x as Spinner
+};
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/ui/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type SVGProps } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface SpinnerProps extends SVGProps<SVGSVGElement> {\n  /** Visual weight. */\n  tone?: 'accent' | 'neutral' | 'on-accent';\n  /** Pixel size. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Accessible label. Required unless `decorative` is true. */\n  label?: string;\n  /** Hide from assistive tech (set when a parent already announces busy state). */\n  decorative?: boolean;\n}\n\nconst sizeMap = { sm: 'size-3.5', md: 'size-4', lg: 'size-6' };\nconst toneMap = {\n  accent: 'text-accent',\n  neutral: 'text-foreground-subtle',\n  'on-accent': 'text-on-accent',\n};\n\n/**\n * Small indeterminate progress indicator. Use when the operation duration is\n * unknown and Progress isn't appropriate.\n *\n * @example\n *   <Spinner label=\"Loading users\" />\n *   <Button loading>Saving…</Button>  // uses Spinner internally\n *\n * @do Provide a `label` so the busy state is announced.\n * @dont Use a Spinner for tasks that take 300ms+; use Skeleton instead.\n */\nexport const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(\n  { className, tone = 'accent', size = 'md', label, decorative, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      role={decorative ? undefined : 'status'}\n      aria-label={decorative ? undefined : (label ?? strings.spinner.loading)}\n      aria-hidden={decorative || undefined}\n      className={cn('animate-spin', sizeMap[size], toneMap[tone], className)}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeOpacity={0.2} fill=\"none\" />\n      <path\n        d=\"M12 2a10 10 0 0 1 10 10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n});\nSpinner.displayName = 'Spinner';\n"],"names":["sizeMap","toneMap","Spinner","forwardRef","className","tone","size","label","decorative","props","ref","strings","useStrings","jsxs","cn","jsx"],"mappings":";;;;;AAiBA,MAAMA,IAAU,EAAE,IAAI,YAAY,IAAI,UAAU,IAAI,SAAA,GAC9CC,IAAU;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AACf,GAaaC,IAAUC,EAAwC,SAC7D,EAAE,WAAAC,GAAW,MAAAC,IAAO,UAAU,MAAAC,IAAO,MAAM,OAAAC,GAAO,YAAAC,GAAY,GAAGC,EAAA,GACjEC,GACA;AACA,QAAMC,IAAUC,EAAA;AAChB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,SAAQ;AAAA,MACR,MAAMF,IAAa,SAAY;AAAA,MAC/B,cAAYA,IAAa,SAAaD,KAASI,EAAQ,QAAQ;AAAA,MAC/D,eAAaH,KAAc;AAAA,MAC3B,WAAWM,EAAG,gBAAgBd,EAAQM,CAAI,GAAGL,EAAQI,CAAI,GAAGD,CAAS;AAAA,MACpE,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,OAAM,eAAe,KAAK,MAAK,QAAO;AAAA,QACvG,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACDb,EAAQ,cAAc;"}

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

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { Check as u } from "../../icons/index.js";
+import { cn as e } from "../../lib/utils.js";
+import { useStrings as g } from "../../hooks/use-strings.js";
+const b = p(function({ steps: o, current: c, orientation: t = "horizontal", className: d, ...i }, f) {
+  const x = g();
+  return /* @__PURE__ */ l(
+    "ol",
+    {
+      ref: f,
+      "aria-label": i["aria-label"] ?? x.stepper.label,
+      className: e(
+        t === "horizontal" ? "flex w-full items-center" : "flex flex-col gap-6",
+        d
+      ),
+      ...i,
+      children: o.map((s, r) => {
+        const a = r < c ? "complete" : r === c ? "current" : "upcoming", m = r === o.length - 1;
+        return /* @__PURE__ */ n(
+          "li",
+          {
+            "aria-current": a === "current" ? "step" : void 0,
+            className: e(
+              t === "horizontal" ? "flex flex-1 items-center gap-3 last:flex-initial" : "flex items-start gap-3"
+            ),
+            children: [
+              /* @__PURE__ */ n("div", { className: e(t === "horizontal" ? "flex items-center gap-3" : "flex flex-col items-center"), children: [
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: e(
+                      "inline-flex size-7 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+                      a === "complete" && "bg-accent text-on-accent",
+                      a === "current" && "bg-card border-2 border-accent text-accent",
+                      a === "upcoming" && "bg-background-muted text-foreground-subtle border border-border"
+                    ),
+                    children: a === "complete" ? /* @__PURE__ */ l(u, { className: "size-4" }) : r + 1
+                  }
+                ),
+                t === "vertical" && !m && /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: e(
+                      "mt-1 w-px flex-1 min-h-6",
+                      r < c ? "bg-accent" : "bg-border"
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: e("flex flex-col", t === "horizontal" && "min-w-0"), children: [
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: e(
+                      "text-sm font-medium",
+                      a === "upcoming" ? "text-foreground-subtle" : "text-foreground"
+                    ),
+                    children: s.title
+                  }
+                ),
+                t === "vertical" && s.description && /* @__PURE__ */ l("p", { className: "text-xs text-foreground-muted mt-0.5", children: s.description })
+              ] }),
+              t === "horizontal" && !m && /* @__PURE__ */ l(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: e(
+                    "h-px flex-1 mx-2",
+                    r < c ? "bg-accent" : "bg-border"
+                  )
+                }
+              )
+            ]
+          },
+          r
+        );
+      })
+    }
+  );
+});
+b.displayName = "Stepper";
+export {
+  b as Stepper
+};
+//# sourceMappingURL=Stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/ui/Stepper.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { Check } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface Step {\n  /** Step heading. */\n  title: ReactNode;\n  /** Optional secondary description, only shown in vertical orientation. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps extends HTMLAttributes<HTMLOListElement> {\n  /** Ordered list of steps. */\n  steps: Step[];\n  /** 0-indexed active step. Steps before it are marked complete. */\n  current: number;\n  /** Layout direction. */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Multi-step progress indicator. Use the horizontal variant in narrow flows\n * (top of an onboarding modal) and vertical for deeper context.\n *\n * @example Onboarding\n *   <Stepper\n *     current={step}\n *     steps={[\n *       { title: 'Workspace' },\n *       { title: 'Invite team' },\n *       { title: 'Connect data' },\n *       { title: 'Done' },\n *     ]}\n *   />\n *\n * @do Keep titles 1–2 words. Save explanations for the page body.\n * @dont Use Stepper for free-form navigation. It implies a linear flow.\n */\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(function Stepper(\n  { steps, current, orientation = 'horizontal', className, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    <ol\n      ref={ref}\n      aria-label={props['aria-label'] ?? strings.stepper.label}\n      className={cn(\n        orientation === 'horizontal' ? 'flex w-full items-center' : 'flex flex-col gap-6',\n        className,\n      )}\n      {...props}\n    >\n      {steps.map((step, i) => {\n        const state = i < current ? 'complete' : i === current ? 'current' : 'upcoming';\n        const isLast = i === steps.length - 1;\n        return (\n          <li\n            key={i}\n            aria-current={state === 'current' ? 'step' : undefined}\n            className={cn(\n              orientation === 'horizontal'\n                ? 'flex flex-1 items-center gap-3 last:flex-initial'\n                : 'flex items-start gap-3',\n            )}\n          >\n            <div className={cn(orientation === 'horizontal' ? 'flex items-center gap-3' : 'flex flex-col items-center')}>\n              <span\n                aria-hidden\n                className={cn(\n                  'inline-flex size-7 items-center justify-center rounded-full text-xs font-semibold transition-colors',\n                  state === 'complete' && 'bg-accent text-on-accent',\n                  state === 'current' && 'bg-card border-2 border-accent text-accent',\n                  state === 'upcoming' && 'bg-background-muted text-foreground-subtle border border-border',\n                )}\n              >\n                {state === 'complete' ? <Check className=\"size-4\" /> : i + 1}\n              </span>\n              {orientation === 'vertical' && !isLast && (\n                <span\n                  className={cn(\n                    'mt-1 w-px flex-1 min-h-6',\n                    i < current ? 'bg-accent' : 'bg-border',\n                  )}\n                />\n              )}\n            </div>\n            <div className={cn('flex flex-col', orientation === 'horizontal' && 'min-w-0')}>\n              <span\n                className={cn(\n                  'text-sm font-medium',\n                  state === 'upcoming' ? 'text-foreground-subtle' : 'text-foreground',\n                )}\n              >\n                {step.title}\n              </span>\n              {orientation === 'vertical' && step.description && (\n                <p className=\"text-xs text-foreground-muted mt-0.5\">{step.description}</p>\n              )}\n            </div>\n            {orientation === 'horizontal' && !isLast && (\n              <span\n                aria-hidden\n                className={cn(\n                  'h-px flex-1 mx-2',\n                  i < current ? 'bg-accent' : 'bg-border',\n                )}\n              />\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n});\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","forwardRef","steps","current","orientation","className","props","ref","strings","useStrings","jsx","cn","step","i","state","isLast","jsxs","Check"],"mappings":";;;;;;AAyCO,MAAMA,IAAUC,EAA2C,SAChE,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,IAAc,cAAc,WAAAC,GAAW,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAUC,EAAA;AAChB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYD,EAAM,YAAY,KAAKE,EAAQ,QAAQ;AAAA,MACnD,WAAWG;AAAA,QACTP,MAAgB,eAAe,6BAA6B;AAAA,QAC5DC;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACU,GAAMC,MAAM;AACtB,cAAMC,IAAQD,IAAIV,IAAU,aAAaU,MAAMV,IAAU,YAAY,YAC/DY,IAASF,MAAMX,EAAM,SAAS;AACpC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,gBAAcF,MAAU,YAAY,SAAS;AAAA,YAC7C,WAAWH;AAAA,cACTP,MAAgB,eACZ,qDACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,gBAAAY,EAAC,SAAI,WAAWL,EAAGP,MAAgB,eAAe,4BAA4B,4BAA4B,GACxG,UAAA;AAAA,gBAAA,gBAAAM;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAW;AAAA,oBACX,WAAWC;AAAA,sBACT;AAAA,sBACAG,MAAU,cAAc;AAAA,sBACxBA,MAAU,aAAa;AAAA,sBACvBA,MAAU,cAAc;AAAA,oBAAA;AAAA,oBAGzB,gBAAU,aAAa,gBAAAJ,EAACO,KAAM,WAAU,UAAS,IAAKJ,IAAI;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAE5DT,MAAgB,cAAc,CAACW,KAC9B,gBAAAL;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAE,IAAIV,IAAU,cAAc;AAAA,oBAAA;AAAA,kBAC9B;AAAA,gBAAA;AAAA,cACF,GAEJ;AAAA,cACA,gBAAAa,EAAC,SAAI,WAAWL,EAAG,iBAAiBP,MAAgB,gBAAgB,SAAS,GAC3E,UAAA;AAAA,gBAAA,gBAAAM;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAG,MAAU,aAAa,2BAA2B;AAAA,oBAAA;AAAA,oBAGnD,UAAAF,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPR,MAAgB,cAAcQ,EAAK,iCACjC,KAAA,EAAE,WAAU,wCAAwC,UAAAA,EAAK,YAAA,CAAY;AAAA,cAAA,GAE1E;AAAA,cACCR,MAAgB,gBAAgB,CAACW,KAChC,gBAAAL;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAWC;AAAA,oBACT;AAAA,oBACAE,IAAIV,IAAU,cAAc;AAAA,kBAAA;AAAA,gBAC9B;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UAjDGU;AAAA,QAAA;AAAA,MAqDX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDb,EAAQ,cAAc;"}

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

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as p, useId as w } from "react";
+import * as f from "@radix-ui/react-switch";
+import { cn as e } from "../../lib/utils.js";
+const k = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9"
+}, N = {
+  sm: "size-3 data-[state=checked]:translate-x-3",
+  md: "size-4 data-[state=checked]:translate-x-4"
+}, S = p(
+  function({
+    className: m,
+    label: r,
+    description: s,
+    labelPosition: o = "after",
+    size: n = "md",
+    hideLabel: u,
+    id: h,
+    disabled: i,
+    ...b
+  }, x) {
+    const g = w(), a = h ?? g, c = s ? `${a}-desc` : void 0, v = /* @__PURE__ */ t(
+      f.Root,
+      {
+        ref: x,
+        id: a,
+        disabled: i,
+        "aria-describedby": c,
+        className: e(
+          "peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent",
+          "transition-colors duration-[var(--duration-base)] 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:cursor-not-allowed disabled:opacity-50",
+          "data-[state=checked]:bg-accent data-[state=unchecked]:bg-switch-track-off",
+          k[n]
+        ),
+        ...b,
+        children: /* @__PURE__ */ t(
+          f.Thumb,
+          {
+            className: e(
+              "pointer-events-none block rounded-full bg-switch-thumb shadow-sm",
+              "transition-transform duration-[var(--duration-base)] ease-[var(--ease-out)]",
+              "translate-x-0",
+              N[n]
+            )
+          }
+        )
+      }
+    ), d = r && /* @__PURE__ */ l("div", { className: e("flex flex-col gap-0.5 select-none", u && "sr-only"), children: [
+      /* @__PURE__ */ t(
+        "label",
+        {
+          htmlFor: a,
+          className: e(
+            "text-sm text-foreground",
+            i && "opacity-50 cursor-not-allowed"
+          ),
+          children: r
+        }
+      ),
+      s && /* @__PURE__ */ t("p", { id: c, className: "text-xs text-foreground-subtle", children: s })
+    ] });
+    return /* @__PURE__ */ l("div", { className: e("inline-flex items-center gap-2.5", m), children: [
+      o === "before" && d,
+      v,
+      o === "after" && d
+    ] });
+  }
+);
+S.displayName = "Switch";
+export {
+  S as Switch
+};
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/ui/Switch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { cn } from '@/lib/utils';\n\nexport interface SwitchProps\n  extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'asChild'> {\n  /** Inline label rendered to the right. */\n  label?: ReactNode;\n  /** Secondary description rendered below the label. */\n  description?: ReactNode;\n  /** Position the label before the switch instead of after. */\n  labelPosition?: 'before' | 'after';\n  /** Visual size. */\n  size?: 'sm' | 'md';\n  /** Hide the label visually while keeping it accessible. */\n  hideLabel?: boolean;\n}\n\nconst trackSize = {\n  sm: 'h-4 w-7',\n  md: 'h-5 w-9',\n} as const;\nconst thumbSize = {\n  sm: 'size-3 data-[state=checked]:translate-x-3',\n  md: 'size-4 data-[state=checked]:translate-x-4',\n} as const;\n\n/**\n * Binary on/off toggle for instant-apply settings. Use Checkbox when the\n * choice is part of a form that needs explicit submission.\n *\n * @example Instant toggle\n *   <Switch label=\"Email digest\" checked={on} onCheckedChange={setOn} />\n *\n * @example With description\n *   <Switch label=\"Two-factor authentication\"\n *           description=\"Required for admins on production accounts.\"\n *           checked={tfa}\n *           onCheckedChange={setTfa} />\n *\n * @do Use Switch when the change takes effect immediately. Pair with\n *      a toast confirming the new state.\n * @dont Use Switch inside a form that requires submission — Checkbox\n *       better matches that mental model.\n */\nexport const Switch = forwardRef<ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  function Switch(\n    {\n      className,\n      label,\n      description,\n      labelPosition = 'after',\n      size = 'md',\n      hideLabel,\n      id,\n      disabled,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n\n    const control = (\n      <SwitchPrimitive.Root\n        ref={ref}\n        id={fieldId}\n        disabled={disabled}\n        aria-describedby={descId}\n        className={cn(\n          'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent',\n          'transition-colors duration-[var(--duration-base)] ease-[var(--ease-out)]',\n          'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          'data-[state=checked]:bg-accent data-[state=unchecked]:bg-switch-track-off',\n          trackSize[size],\n        )}\n        {...props}\n      >\n        <SwitchPrimitive.Thumb\n          className={cn(\n            'pointer-events-none block rounded-full bg-switch-thumb shadow-sm',\n            'transition-transform duration-[var(--duration-base)] ease-[var(--ease-out)]',\n            'translate-x-0',\n            thumbSize[size],\n          )}\n        />\n      </SwitchPrimitive.Root>\n    );\n\n    const labelBlock = label && (\n      <div className={cn('flex flex-col gap-0.5 select-none', hideLabel && 'sr-only')}>\n        <label\n          htmlFor={fieldId}\n          className={cn(\n            'text-sm text-foreground',\n            disabled && 'opacity-50 cursor-not-allowed',\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p id={descId} className=\"text-xs text-foreground-subtle\">\n            {description}\n          </p>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn('inline-flex items-center gap-2.5', className)}>\n        {labelPosition === 'before' && labelBlock}\n        {control}\n        {labelPosition === 'after' && labelBlock}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["trackSize","thumbSize","Switch","forwardRef","className","label","description","labelPosition","size","hideLabel","id","disabled","props","ref","autoId","useId","fieldId","descId","control","jsx","SwitchPrimitive","cn","labelBlock","jsxs"],"mappings":";;;;;AA0BA,MAAMA,IAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN,GACMC,IAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN,GAoBaC,IAASC;AAAA,EACpB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAASC,EAAA,GACTC,IAAUN,KAAMI,GAChBG,IAASX,IAAc,GAAGU,CAAO,UAAU,QAE3CE,IACJ,gBAAAC;AAAA,MAACC,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAP;AAAA,QACA,IAAIG;AAAA,QACJ,UAAAL;AAAA,QACA,oBAAkBM;AAAA,QAClB,WAAWI;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACArB,EAAUQ,CAAI;AAAA,QAAA;AAAA,QAEf,GAAGI;AAAA,QAEJ,UAAA,gBAAAO;AAAA,UAACC,EAAgB;AAAA,UAAhB;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACApB,EAAUO,CAAI;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GAIEc,IAAajB,KACjB,gBAAAkB,EAAC,OAAA,EAAI,WAAWF,EAAG,qCAAqCZ,KAAa,SAAS,GAC5E,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASH;AAAA,UACT,WAAWK;AAAA,YACT;AAAA,YACAV,KAAY;AAAA,UAAA;AAAA,UAGb,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFC,KACC,gBAAAa,EAAC,KAAA,EAAE,IAAIF,GAAQ,WAAU,kCACtB,UAAAX,EAAA,CACH;AAAA,IAAA,GAEJ;AAGF,6BACG,OAAA,EAAI,WAAWe,EAAG,oCAAoCjB,CAAS,GAC7D,UAAA;AAAA,MAAAG,MAAkB,YAAYe;AAAA,MAC9BJ;AAAA,MACAX,MAAkB,WAAWe;AAAA,IAAA,GAChC;AAAA,EAEJ;AACF;AAEApB,EAAO,cAAc;"}

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

@@ -6,7 +6,15 @@ export declare const TableFooter: import('react').ForwardRefExoticComponent<HTML
 export declare const TableRow: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
 } & import('react').RefAttributes<HTMLTableRowElement>>;
-export declare const TableHead: import('react').ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
+export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Render the header label in small caps (`uppercase tracking-wide`).
+     * Off by default — mixed case reads better for long / Cyrillic labels.
+     * @default false
+     */
+    uppercase?: boolean;
+}
+export declare const TableHead: import('react').ForwardRefExoticComponent<TableHeadProps & import('react').RefAttributes<HTMLTableCellElement>>;
 export declare const TableCell: import('react').ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
 export declare const TableCaption: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import('react').RefAttributes<HTMLTableCaptionElement>>;
 export interface TableSortHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {

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

@@ -0,0 +1,157 @@
+"use client";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { ArrowUp as g, ArrowDown as T, ArrowUpDown as N } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+const x = s(
+  function({ className: a, ...e }, o) {
+    return /* @__PURE__ */ t("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ t(
+      "table",
+      {
+        ref: o,
+        className: r("w-full caption-bottom text-sm border-collapse", a),
+        ...e
+      }
+    ) });
+  }
+);
+x.displayName = "Table";
+const h = s(
+  function({ className: a, ...e }, o) {
+    return /* @__PURE__ */ t(
+      "thead",
+      {
+        ref: o,
+        className: r(
+          "sticky top-0 z-10 bg-background-subtle text-foreground-muted",
+          "[&_tr]:border-b [&_tr]:border-border",
+          a
+        ),
+        ...e
+      }
+    );
+  }
+);
+h.displayName = "TableHeader";
+const v = s(
+  function({ className: a, ...e }, o) {
+    return /* @__PURE__ */ t(
+      "tbody",
+      {
+        ref: o,
+        className: r("[&_tr:last-child]:border-0", a),
+        ...e
+      }
+    );
+  }
+);
+v.displayName = "TableBody";
+const y = s(
+  function({ className: a, ...e }, o) {
+    return /* @__PURE__ */ t(
+      "tfoot",
+      {
+        ref: o,
+        className: r("border-t border-border bg-background-subtle font-medium", a),
+        ...e
+      }
+    );
+  }
+);
+y.displayName = "TableFooter";
+const w = s(function({ className: a, selected: e, ...o }, n) {
+  return /* @__PURE__ */ t(
+    "tr",
+    {
+      ref: n,
+      "data-selected": e || void 0,
+      "aria-selected": e || void 0,
+      className: r(
+        "border-b border-border transition-colors duration-[var(--duration-fast)]",
+        "hover:bg-background-subtle",
+        "data-[selected]:bg-accent-soft data-[selected]:hover:bg-accent-soft",
+        a
+      ),
+      ...o
+    }
+  );
+});
+w.displayName = "TableRow";
+const c = s(function({ className: a, uppercase: e = !1, ...o }, n) {
+  return /* @__PURE__ */ t(
+    "th",
+    {
+      ref: n,
+      className: r(
+        "h-10 px-3 text-left align-middle text-xs font-medium text-foreground-subtle",
+        e && "uppercase tracking-wide",
+        "[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
+        a
+      ),
+      ...o
+    }
+  );
+});
+c.displayName = "TableHead";
+const k = s(function({ className: a, ...e }, o) {
+  return /* @__PURE__ */ t(
+    "td",
+    {
+      ref: o,
+      className: r("px-3 py-3 align-middle text-foreground", a),
+      ...e
+    }
+  );
+});
+k.displayName = "TableCell";
+const H = s(
+  function({ className: a, ...e }, o) {
+    return /* @__PURE__ */ t(
+      "caption",
+      {
+        ref: o,
+        className: r("mt-4 text-sm text-foreground-subtle", a),
+        ...e
+      }
+    );
+  }
+);
+H.displayName = "TableCaption";
+const C = s(
+  function({ sortKey: a, currentSort: e, onSortChange: o, children: n, className: b, ...u }, f) {
+    const i = (e == null ? void 0 : e.key) === a, d = i ? e == null ? void 0 : e.direction : void 0, m = () => {
+      o(a, i && d === "asc" ? "desc" : "asc");
+    };
+    return /* @__PURE__ */ t(c, { ref: f, className: r("p-0", b), "aria-sort": i ? d === "asc" ? "ascending" : "descending" : "none", ...u, children: /* @__PURE__ */ p(
+      "button",
+      {
+        type: "button",
+        onClick: m,
+        className: r(
+          "inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none",
+          "transition-colors duration-[var(--duration-fast)]",
+          "hover:text-foreground focus-visible:text-foreground",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm",
+          i && "text-foreground"
+        ),
+        children: [
+          n,
+          d === "asc" ? /* @__PURE__ */ t(g, { className: "size-3.5", "aria-hidden": !0 }) : d === "desc" ? /* @__PURE__ */ t(T, { className: "size-3.5", "aria-hidden": !0 }) : /* @__PURE__ */ t(N, { className: "size-3.5 opacity-40", "aria-hidden": !0 })
+        ]
+      }
+    ) });
+  }
+);
+C.displayName = "TableSortHeader";
+export {
+  x as Table,
+  v as TableBody,
+  H as TableCaption,
+  k as TableCell,
+  y as TableFooter,
+  c as TableHead,
+  h as TableHeader,
+  w as TableRow,
+  C as TableSortHeader
+};
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/components/ui/Table.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ThHTMLAttributes, type TdHTMLAttributes } from 'react';\nimport { ArrowDown, ArrowUp, ArrowUpDown } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Table primitives — minimal sugar over <table>. Pair with a sortable\n *  header helper (`TableSortHeader`) when you need built-in sort visuals.\n *  Empty + loading states are pure composition with the rest of the system.\n * --------------------------------------------------------------------------- */\n\nexport const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n  function Table({ className, ...props }, ref) {\n    return (\n      <div className=\"relative w-full overflow-auto\">\n        <table\n          ref={ref}\n          className={cn('w-full caption-bottom text-sm border-collapse', className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nTable.displayName = 'Table';\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHeader({ className, ...props }, ref) {\n    return (\n      <thead\n        ref={ref}\n        className={cn(\n          'sticky top-0 z-10 bg-background-subtle text-foreground-muted',\n          '[&_tr]:border-b [&_tr]:border-border',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHeader.displayName = 'TableHeader';\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, ...props }, ref) {\n    return (\n      <tbody\n        ref={ref}\n        className={cn('[&_tr:last-child]:border-0', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableBody.displayName = 'TableBody';\n\nexport const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableFooter({ className, ...props }, ref) {\n    return (\n      <tfoot\n        ref={ref}\n        className={cn('border-t border-border bg-background-subtle font-medium', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableFooter.displayName = 'TableFooter';\n\nexport const TableRow = forwardRef<\n  HTMLTableRowElement,\n  HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }\n>(function TableRow({ className, selected, ...props }, ref) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      aria-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-[var(--duration-fast)]',\n        'hover:bg-background-subtle',\n        'data-[selected]:bg-accent-soft data-[selected]:hover:bg-accent-soft',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableRow.displayName = 'TableRow';\n\nexport interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the header label in small caps (`uppercase tracking-wide`).\n   * Off by default — mixed case reads better for long / Cyrillic labels.\n   * @default false\n   */\n  uppercase?: boolean;\n}\n\nexport const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, uppercase = false, ...props },\n  ref,\n) {\n  return (\n    <th\n      ref={ref}\n      className={cn(\n        'h-10 px-3 text-left align-middle text-xs font-medium text-foreground-subtle',\n        uppercase && 'uppercase tracking-wide',\n        '[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nexport const TableCell = forwardRef<\n  HTMLTableCellElement,\n  TdHTMLAttributes<HTMLTableCellElement>\n>(function TableCell({ className, ...props }, ref) {\n  return (\n    <td\n      ref={ref}\n      className={cn('px-3 py-3 align-middle text-foreground', className)}\n      {...props}\n    />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(\n  function TableCaption({ className, ...props }, ref) {\n    return (\n      <caption\n        ref={ref}\n        className={cn('mt-4 text-sm text-foreground-subtle', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableCaption.displayName = 'TableCaption';\n\nexport interface TableSortHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Stable column key used in `currentSort.key`. */\n  sortKey: string;\n  /** Currently sorted column + direction (or null). */\n  currentSort: { key: string; direction: 'asc' | 'desc' } | null;\n  /** Called when the user clicks the header. */\n  onSortChange: (key: string, direction: 'asc' | 'desc') => void;\n}\n\n/**\n * Sortable column header. Click toggles asc → desc → asc; the icon reflects\n * the current state.\n *\n * @example\n *   <TableSortHeader sortKey=\"name\" currentSort={sort} onSortChange={onSort}>\n *     Name\n *   </TableSortHeader>\n *\n * @do Sort by one column at a time. Multi-sort hides state from users.\n * @dont Sort silently — the icon must change so users see what changed.\n */\nexport const TableSortHeader = forwardRef<HTMLTableCellElement, TableSortHeaderProps>(\n  function TableSortHeader(\n    { sortKey, currentSort, onSortChange, children, className, ...props },\n    ref,\n  ) {\n    const active = currentSort?.key === sortKey;\n    const direction = active ? currentSort?.direction : undefined;\n    const handle = () => {\n      onSortChange(sortKey, active && direction === 'asc' ? 'desc' : 'asc');\n    };\n    return (\n      <TableHead ref={ref} className={cn('p-0', className)} aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'} {...props}>\n        <button\n          type=\"button\"\n          onClick={handle}\n          className={cn(\n            'inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none',\n            'transition-colors duration-[var(--duration-fast)]',\n            'hover:text-foreground focus-visible:text-foreground',\n            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n            active && 'text-foreground',\n          )}\n        >\n          {children}\n          {direction === 'asc' ? (\n            <ArrowUp className=\"size-3.5\" aria-hidden />\n          ) : direction === 'desc' ? (\n            <ArrowDown className=\"size-3.5\" aria-hidden />\n          ) : (\n            <ArrowUpDown className=\"size-3.5 opacity-40\" aria-hidden />\n          )}\n        </button>\n      </TableHead>\n    );\n  },\n);\nTableSortHeader.displayName = 'TableSortHeader';\n"],"names":["Table","forwardRef","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","TableHead","uppercase","TableCell","TableCaption","TableSortHeader","sortKey","currentSort","onSortChange","children","active","direction","handle","jsxs","ArrowUp","ArrowDown","ArrowUpDown"],"mappings":";;;;;AAYO,MAAMA,IAAQC;AAAA,EACnB,SAAe,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAC3C,WACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,iDAAiDJ,CAAS;AAAA,QACvE,GAAGC;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAEJ;AACF;AACAH,EAAM,cAAc;AAEb,MAAMO,IAAcN;AAAA,EACzB,SAAqB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACjD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA;AAAA,UACAJ;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAI,EAAY,cAAc;AAEnB,MAAMC,IAAYP;AAAA,EACvB,SAAmB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAC/C,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,8BAA8BJ,CAAS;AAAA,QACpD,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAK,EAAU,cAAc;AAEjB,MAAMC,IAAcR;AAAA,EACzB,SAAqB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACjD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,2DAA2DJ,CAAS;AAAA,QACjF,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAM,EAAY,cAAc;AAEnB,MAAMC,IAAWT,EAGtB,SAAkB,EAAE,WAAAC,GAAW,UAAAS,GAAU,GAAGR,EAAA,GAASC,GAAK;AAC1D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,iBAAeO,KAAY;AAAA,MAC3B,iBAAeA,KAAY;AAAA,MAC3B,WAAWL;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDO,EAAS,cAAc;AAWhB,MAAME,IAAYX,EAAiD,SACxE,EAAE,WAAAC,GAAW,WAAAW,IAAY,IAAO,GAAGV,EAAA,GACnCC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAO,KAAa;AAAA,QACb;AAAA,QACAX;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDS,EAAU,cAAc;AAEjB,MAAME,IAAYb,EAGvB,SAAmB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACjD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,0CAA0CJ,CAAS;AAAA,MAChE,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDW,EAAU,cAAc;AAEjB,MAAMC,IAAed;AAAA,EAC1B,SAAsB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAClD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,uCAAuCJ,CAAS;AAAA,QAC7D,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAY,EAAa,cAAc;AAuBpB,MAAMC,IAAkBf;AAAA,EAC7B,SACE,EAAE,SAAAgB,GAAS,aAAAC,GAAa,cAAAC,GAAc,UAAAC,GAAU,WAAAlB,GAAW,GAAGC,EAAA,GAC9DC,GACA;AACA,UAAMiB,KAASH,KAAA,gBAAAA,EAAa,SAAQD,GAC9BK,IAAYD,IAASH,KAAA,gBAAAA,EAAa,YAAY,QAC9CK,IAAS,MAAM;AACnB,MAAAJ,EAAaF,GAASI,KAAUC,MAAc,QAAQ,SAAS,KAAK;AAAA,IACtE;AACA,6BACGV,GAAA,EAAU,KAAAR,GAAU,WAAWE,EAAG,OAAOJ,CAAS,GAAG,aAAWmB,IAAUC,MAAc,QAAQ,cAAc,eAAgB,QAAS,GAAGnB,GACzI,UAAA,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASD;AAAA,QACT,WAAWjB;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAe,KAAU;AAAA,QAAA;AAAA,QAGX,UAAA;AAAA,UAAAD;AAAA,UACAE,MAAc,QACb,gBAAAjB,EAACoB,GAAA,EAAQ,WAAU,YAAW,eAAW,GAAA,CAAC,IACxCH,MAAc,2BACfI,GAAA,EAAU,WAAU,YAAW,eAAW,GAAA,CAAC,sBAE3CC,GAAA,EAAY,WAAU,uBAAsB,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG/D;AAAA,EAEJ;AACF;AACAX,EAAgB,cAAc;"}

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare const Tabs: import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>;
 declare const list: (props?: ({

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import * as i from "@radix-ui/react-tabs";
+import { cn as s } from "../../lib/utils.js";
+import { cva as u } from "class-variance-authority";
+const _ = i.Root, v = u("inline-flex items-center", {
+  variants: {
+    variant: {
+      underline: "gap-4 border-b border-border w-full",
+      pills: "gap-1 rounded-lg bg-background-muted p-1"
+    },
+    size: {
+      sm: "h-9 text-xs",
+      md: "h-10 text-sm",
+      lg: "h-11 text-sm"
+    }
+  },
+  defaultVariants: { variant: "underline", size: "md" }
+}), f = r(
+  function({ className: t, variant: a = "underline", size: e, ...o }, l) {
+    return /* @__PURE__ */ n(
+      i.List,
+      {
+        ref: l,
+        "data-variant": a,
+        className: s(v({ variant: a, size: e }), t),
+        ...o
+      }
+    );
+  }
+);
+f.displayName = "TabsList";
+const c = r(function({ className: t, ...a }, e) {
+  return /* @__PURE__ */ n(
+    i.Trigger,
+    {
+      ref: e,
+      className: s(
+        "inline-flex items-center gap-2 whitespace-nowrap font-medium",
+        "outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+        "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",
+        // Underline variant
+        "[[data-variant=underline]_&]:relative [[data-variant=underline]_&]:h-full",
+        "[[data-variant=underline]_&]:px-1 [[data-variant=underline]_&]:text-foreground-muted",
+        "[[data-variant=underline]_&]:hover:text-foreground",
+        "[[data-variant=underline]_&]:data-[state=active]:text-foreground",
+        "[[data-variant=underline]_&]:data-[state=active]:after:absolute",
+        "[[data-variant=underline]_&]:data-[state=active]:after:inset-x-0",
+        "[[data-variant=underline]_&]:data-[state=active]:after:-bottom-px",
+        "[[data-variant=underline]_&]:data-[state=active]:after:h-0.5",
+        "[[data-variant=underline]_&]:data-[state=active]:after:bg-accent",
+        // Pills variant
+        "[[data-variant=pills]_&]:h-full [[data-variant=pills]_&]:rounded-md [[data-variant=pills]_&]:px-3",
+        "[[data-variant=pills]_&]:text-foreground-muted",
+        "[[data-variant=pills]_&]:hover:text-foreground",
+        "[[data-variant=pills]_&]:data-[state=active]:bg-card",
+        "[[data-variant=pills]_&]:data-[state=active]:text-foreground",
+        "[[data-variant=pills]_&]:data-[state=active]:shadow-xs",
+        t
+      ),
+      ...a
+    }
+  );
+});
+c.displayName = "TabsTrigger";
+const g = r(function({ className: t, ...a }, e) {
+  return /* @__PURE__ */ n(
+    i.Content,
+    {
+      ref: e,
+      className: s(
+        "mt-4 outline-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        t
+      ),
+      ...a
+    }
+  );
+});
+g.displayName = "TabsContent";
+export {
+  _ as Tabs,
+  g as TabsContent,
+  f as TabsList,
+  c as TabsTrigger
+};
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/ui/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Two visual variants — `underline` (refined-minimal default) and `pills`.\n *  Variant is set on `TabsList`; trigger styles auto-derive via data-attr.\n * --------------------------------------------------------------------------- */\n\nexport const Tabs = TabsPrimitive.Root;\n\nconst list = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      underline: 'gap-4 border-b border-border w-full',\n      pills: 'gap-1 rounded-lg bg-background-muted p-1',\n    },\n    size: {\n      sm: 'h-9 text-xs',\n      md: 'h-10 text-sm',\n      lg: 'h-11 text-sm',\n    },\n  },\n  defaultVariants: { variant: 'underline', size: 'md' },\n});\n\nexport interface TabsListProps\n  extends ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof list> {}\n\nexport const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  function TabsList({ className, variant = 'underline', size, ...props }, ref) {\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        data-variant={variant}\n        className={cn(list({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nTabsList.displayName = 'TabsList';\n\nexport const TabsTrigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(function TabsTrigger({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-2 whitespace-nowrap font-medium',\n        'outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        'disabled:pointer-events-none disabled:opacity-50',\n        // Underline variant\n        '[[data-variant=underline]_&]:relative [[data-variant=underline]_&]:h-full',\n        '[[data-variant=underline]_&]:px-1 [[data-variant=underline]_&]:text-foreground-muted',\n        '[[data-variant=underline]_&]:hover:text-foreground',\n        '[[data-variant=underline]_&]:data-[state=active]:text-foreground',\n        '[[data-variant=underline]_&]:data-[state=active]:after:absolute',\n        '[[data-variant=underline]_&]:data-[state=active]:after:inset-x-0',\n        '[[data-variant=underline]_&]:data-[state=active]:after:-bottom-px',\n        '[[data-variant=underline]_&]:data-[state=active]:after:h-0.5',\n        '[[data-variant=underline]_&]:data-[state=active]:after:bg-accent',\n        // Pills variant\n        '[[data-variant=pills]_&]:h-full [[data-variant=pills]_&]:rounded-md [[data-variant=pills]_&]:px-3',\n        '[[data-variant=pills]_&]:text-foreground-muted',\n        '[[data-variant=pills]_&]:hover:text-foreground',\n        '[[data-variant=pills]_&]:data-[state=active]:bg-card',\n        '[[data-variant=pills]_&]:data-[state=active]:text-foreground',\n        '[[data-variant=pills]_&]:data-[state=active]:shadow-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsTrigger.displayName = 'TabsTrigger';\n\nexport const TabsContent = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(function TabsContent({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'mt-4 outline-none',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsContent.displayName = 'TabsContent';\n\n/**\n * @example Underline (default)\n *   <Tabs defaultValue=\"overview\">\n *     <TabsList>\n *       <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *       <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     </TabsList>\n *     <TabsContent value=\"overview\">…</TabsContent>\n *     <TabsContent value=\"activity\">…</TabsContent>\n *   </Tabs>\n *\n * @example Pills\n *   <TabsList variant=\"pills\"><TabsTrigger value=\"all\">All</TabsTrigger>…</TabsList>\n *\n * @do Use `underline` at the top of a page or panel. Use `pills` inside a\n *      card or for filter-style switches.\n * @dont Mix variants on the same screen — pick one and commit.\n */\n"],"names":["Tabs","TabsPrimitive","list","cva","TabsList","forwardRef","className","variant","size","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;;;AAgBO,MAAMA,IAAOC,EAAc,MAE5BC,IAAOC,EAAI,4BAA4B;AAAA,EAC3C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,SAAS,aAAa,MAAM,KAAA;AACjD,CAAC,GAMYC,IAAWC;AAAA,EACtB,SAAkB,EAAE,WAAAC,GAAW,SAAAC,IAAU,aAAa,MAAAC,GAAM,GAAGC,EAAA,GAASC,GAAK;AAC3E,WACE,gBAAAC;AAAA,MAACV,EAAc;AAAA,MAAd;AAAA,QACC,KAAAS;AAAA,QACA,gBAAcH;AAAA,QACd,WAAWK,EAAGV,EAAK,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,QAC/C,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAL,EAAS,cAAc;AAEhB,MAAMS,IAAcR,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACV,EAAc;AAAA,IAAd;AAAA,MACC,KAAAS;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDI,EAAY,cAAc;AAEnB,MAAMC,IAAcT,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACV,EAAc;AAAA,IAAd;AAAA,MACC,KAAAS;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAY,cAAc;"}

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface TagInputProps {
     /** Controlled list of tags. */
     value?: string[];
@@ -5,16 +6,30 @@ export interface TagInputProps {
     defaultValue?: string[];
     /** Called when the tag list changes. */
     onChange?: (tags: string[]) => void;
+    /** Visible label rendered above the field. */
+    label?: ReactNode;
+    /** Visually conceal the label while keeping it for screen readers. */
+    hideLabel?: boolean;
+    /** Hint below the field. Hidden while `error` is set. */
+    description?: ReactNode;
     /** Placeholder shown inside the inline input. */
     placeholder?: string;
     /** Maximum number of tags. */
     max?: number;
     /** Disable the editor. */
     disabled?: boolean;
-    /** Show a danger border. */
-    error?: boolean;
+    /**
+     * Validation state. `true` only paints the danger border; a ReactNode also
+     * renders the message below the field and wires `aria-describedby`.
+     */
+    error?: boolean | ReactNode;
     /** Treat these characters as separators (default: Enter + comma). */
     separators?: string[];
+    /** Consumer-supplied id for the inline input. */
+    id?: string;
+    /** Extra ids to append to `aria-describedby`. */
+    'aria-describedby'?: string;
+    'aria-label'?: string;
     className?: string;
 }
 /**