@craftzbay/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Check as h } from "../../icons/index.js";
+import { cn as e } from "../../lib/utils.js";
+import { useStrings as N } from "../../hooks/use-strings.js";
+const z = b(function({
+  steps: i,
+  current: a,
+  orientation: t = "horizontal",
+  stateLabels: p,
+  className: d,
+  "aria-label": f,
+  ...x
+}, u) {
+  const n = N(), g = p ?? {
+    complete: n.stepper.complete,
+    current: n.stepper.current,
+    upcoming: n.stepper.upcoming
+  };
+  return /* @__PURE__ */ s(
+    "ol",
+    {
+      ref: u,
+      "aria-label": f ?? n.stepper.label,
+      className: e(
+        t === "horizontal" ? "flex w-full items-center" : "flex flex-col gap-6",
+        d
+      ),
+      ...x,
+      children: i.map((o, r) => {
+        const l = r < a ? "complete" : r === a ? "current" : "upcoming", m = r === i.length - 1;
+        return /* @__PURE__ */ c(
+          "li",
+          {
+            "aria-current": l === "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__ */ c(
+                "div",
+                {
+                  className: e(
+                    t === "horizontal" ? "flex items-center gap-3" : "flex flex-col items-center"
+                  ),
+                  children: [
+                    /* @__PURE__ */ s(
+                      "span",
+                      {
+                        "aria-hidden": !0,
+                        className: e(
+                          "inline-flex size-7 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+                          l === "complete" && "bg-accent text-on-accent",
+                          l === "current" && "bg-card border-accent text-accent border-2",
+                          l === "upcoming" && "bg-background-muted text-foreground-subtle border-border border"
+                        ),
+                        children: l === "complete" ? /* @__PURE__ */ s(h, { className: "size-4" }) : r + 1
+                      }
+                    ),
+                    t === "vertical" && !m && /* @__PURE__ */ s(
+                      "span",
+                      {
+                        className: e(
+                          "mt-1 min-h-6 w-px flex-1",
+                          r < a ? "bg-accent" : "bg-border"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ c("div", { className: e("flex flex-col", t === "horizontal" && "min-w-0"), children: [
+                /* @__PURE__ */ c(
+                  "span",
+                  {
+                    className: e(
+                      "text-sm font-medium",
+                      l === "upcoming" ? "text-foreground-subtle" : "text-foreground"
+                    ),
+                    children: [
+                      o.title,
+                      /* @__PURE__ */ c("span", { className: "sr-only", children: [
+                        ", ",
+                        g[l]
+                      ] })
+                    ]
+                  }
+                ),
+                t === "vertical" && o.description && /* @__PURE__ */ s("p", { className: "text-foreground-muted mt-0.5 text-xs", children: o.description })
+              ] }),
+              t === "horizontal" && !m && /* @__PURE__ */ s(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: e("mx-2 h-px flex-1", r < a ? "bg-accent" : "bg-border")
+                }
+              )
+            ]
+          },
+          r
+        );
+      })
+    }
+  );
+});
+z.displayName = "Stepper";
+export {
+  z 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  /** sr-only state words announced after each title (i18n). */\n  stateLabels?: { complete: string; current: string; upcoming: string };\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  {\n    steps,\n    current,\n    orientation = 'horizontal',\n    stateLabels: stateLabelsProp,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const stateLabels = stateLabelsProp ?? {\n    complete: strings.stepper.complete,\n    current: strings.stepper.current,\n    upcoming: strings.stepper.upcoming,\n  };\n  return (\n    <ol\n      ref={ref}\n      aria-label={ariaLabel ?? 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\n              className={cn(\n                orientation === 'horizontal'\n                  ? 'flex items-center gap-3'\n                  : 'flex flex-col items-center',\n              )}\n            >\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-accent text-accent border-2',\n                  state === 'upcoming' &&\n                    '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 min-h-6 w-px flex-1',\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 className=\"sr-only\">, {stateLabels[state]}</span>\n              </span>\n              {orientation === 'vertical' && step.description && (\n                <p className=\"text-foreground-muted mt-0.5 text-xs\">{step.description}</p>\n              )}\n            </div>\n            {orientation === 'horizontal' && !isLast && (\n              <span\n                aria-hidden\n                className={cn('mx-2 h-px flex-1', i < current ? 'bg-accent' : 'bg-border')}\n              />\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n});\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","forwardRef","steps","current","orientation","stateLabelsProp","className","ariaLabel","props","ref","strings","useStrings","stateLabels","jsx","cn","step","i","state","isLast","jsxs","Check"],"mappings":";;;;;;AA2CO,MAAMA,IAAUC,EAA2C,SAChE;AAAA,EACE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAaC;AAAA,EACb,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAcP,KAAmB;AAAA,IACrC,UAAUK,EAAQ,QAAQ;AAAA,IAC1B,SAASA,EAAQ,QAAQ;AAAA,IACzB,UAAUA,EAAQ,QAAQ;AAAA,EAAA;AAE5B,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,cAAYF,KAAaG,EAAQ,QAAQ;AAAA,MACzC,WAAWI;AAAA,QACTV,MAAgB,eAAe,6BAA6B;AAAA,QAC5DE;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAN,EAAM,IAAI,CAACa,GAAMC,MAAM;AACtB,cAAMC,IAAQD,IAAIb,IAAU,aAAaa,MAAMb,IAAU,YAAY,YAC/De,IAASF,MAAMd,EAAM,SAAS;AACpC,eACE,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,gBAAcF,MAAU,YAAY,SAAS;AAAA,YAC7C,WAAWH;AAAA,cACTV,MAAgB,eACZ,qDACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,gBAAAe;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWL;AAAA,oBACTV,MAAgB,eACZ,4BACA;AAAA,kBAAA;AAAA,kBAGN,UAAA;AAAA,oBAAA,gBAAAS;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,eAAW;AAAA,wBACX,WAAWC;AAAA,0BACT;AAAA,0BACAG,MAAU,cAAc;AAAA,0BACxBA,MAAU,aAAa;AAAA,0BACvBA,MAAU,cACR;AAAA,wBAAA;AAAA,wBAGH,gBAAU,aAAa,gBAAAJ,EAACO,KAAM,WAAU,UAAS,IAAKJ,IAAI;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAE5DZ,MAAgB,cAAc,CAACc,KAC9B,gBAAAL;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAE,IAAIb,IAAU,cAAc;AAAA,wBAAA;AAAA,sBAC9B;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,gBAAAgB,EAAC,SAAI,WAAWL,EAAG,iBAAiBV,MAAgB,gBAAgB,SAAS,GAC3E,UAAA;AAAA,gBAAA,gBAAAe;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWL;AAAA,sBACT;AAAA,sBACAG,MAAU,aAAa,2BAA2B;AAAA,oBAAA;AAAA,oBAGnD,UAAA;AAAA,sBAAAF,EAAK;AAAA,sBACN,gBAAAI,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,wBAAA;AAAA,wBAAGP,EAAYK,CAAK;AAAA,sBAAA,EAAA,CAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEjDb,MAAgB,cAAcW,EAAK,iCACjC,KAAA,EAAE,WAAU,wCAAwC,UAAAA,EAAK,YAAA,CAAY;AAAA,cAAA,GAE1E;AAAA,cACCX,MAAgB,gBAAgB,CAACc,KAChC,gBAAAL;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAWC,EAAG,oBAAoBE,IAAIb,IAAU,cAAc,WAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3E;AAAA,UAAA;AAAA,UAtDGa;AAAA,QAAA;AAAA,MA0DX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDhB,EAAQ,cAAc;"}

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as k, useId as y } from "react";
+import * as f from "@radix-ui/react-switch";
+import { cn as t } from "../../lib/utils.js";
+const N = {
+  sm: 'h-4 w-7 before:absolute before:-inset-x-1 before:-inset-y-1.5 before:content-[""]',
+  md: 'h-5 w-9 before:absolute before:-inset-x-1 before:-inset-y-1 before:content-[""]'
+}, S = {
+  sm: "size-3 data-[state=checked]:translate-x-3",
+  md: "size-4 data-[state=checked]:translate-x-4"
+}, I = k(
+  function({
+    className: b,
+    label: a,
+    description: r,
+    labelPosition: s = "after",
+    size: i = "md",
+    hideLabel: u,
+    id: m,
+    disabled: n,
+    "aria-describedby": h,
+    ...v
+  }, x) {
+    const g = y(), o = m ?? g, c = r ? `${o}-desc` : void 0, p = [c, h].filter(Boolean).join(" ") || void 0, w = /* @__PURE__ */ e(
+      f.Root,
+      {
+        ref: x,
+        id: o,
+        disabled: n,
+        "aria-describedby": p,
+        className: t(
+          "peer relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent",
+          "transition-colors duration-[var(--duration-base)] ease-[var(--ease-out)]",
+          "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "data-[state=checked]:bg-accent data-[state=unchecked]:bg-switch-track-off",
+          "aria-invalid:ring-danger aria-invalid:ring-2",
+          N[i]
+        ),
+        ...v,
+        children: /* @__PURE__ */ e(
+          f.Thumb,
+          {
+            className: t(
+              "bg-switch-thumb pointer-events-none block rounded-full shadow-sm",
+              "transition-transform duration-[var(--duration-base)] ease-[var(--ease-out)]",
+              "translate-x-0",
+              S[i]
+            )
+          }
+        )
+      }
+    ), d = a && /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 select-none", children: [
+      /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: o,
+          className: t(
+            "text-foreground text-sm",
+            n && "cursor-not-allowed opacity-50",
+            u && "sr-only"
+          ),
+          children: a
+        }
+      ),
+      r && /* @__PURE__ */ e("p", { id: c, className: "text-foreground-subtle text-xs", children: r })
+    ] });
+    return /* @__PURE__ */ l("div", { className: t("inline-flex items-center gap-2.5", b), children: [
+      s === "before" && d,
+      w,
+      s === "after" && d
+    ] });
+  }
+);
+I.displayName = "Switch";
+export {
+  I 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 extends Omit<\n  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n  'asChild'\n> {\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\n// Tracks are 28×16 (`sm`) / 36×20 (`md`) visually; the `before:` halo lifts\n// the hit area to ≥24px tall without changing the drawing (WCAG 2.5.8).\nconst trackSize = {\n  sm: 'h-4 w-7 before:absolute before:-inset-x-1 before:-inset-y-1.5 before:content-[\"\"]',\n  md: 'h-5 w-9 before:absolute before:-inset-x-1 before:-inset-y-1 before:content-[\"\"]',\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      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n    const describedBy = [descId, ariaDescribedby].filter(Boolean).join(' ') || undefined;\n\n    const control = (\n      <SwitchPrimitive.Root\n        ref={ref}\n        id={fieldId}\n        disabled={disabled}\n        aria-describedby={describedBy}\n        className={cn(\n          'peer relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent',\n          'transition-colors duration-[var(--duration-base)] ease-[var(--ease-out)]',\n          'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          'data-[state=checked]:bg-accent data-[state=unchecked]:bg-switch-track-off',\n          'aria-invalid:ring-danger aria-invalid:ring-2',\n          trackSize[size],\n        )}\n        {...props}\n      >\n        <SwitchPrimitive.Thumb\n          className={cn(\n            'bg-switch-thumb pointer-events-none block rounded-full 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=\"flex flex-col gap-0.5 select-none\">\n        <label\n          htmlFor={fieldId}\n          className={cn(\n            'text-foreground text-sm',\n            disabled && 'cursor-not-allowed opacity-50',\n            hideLabel && 'sr-only',\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p id={descId} className=\"text-foreground-subtle text-xs\">\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","ariaDescribedby","props","ref","autoId","useId","fieldId","descId","describedBy","control","jsx","SwitchPrimitive","cn","labelBlock","jsxs"],"mappings":";;;;;AA8BA,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,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAASC,EAAA,GACTC,IAAUP,KAAMK,GAChBG,IAASZ,IAAc,GAAGW,CAAO,UAAU,QAC3CE,IAAc,CAACD,GAAQN,CAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,QAErEQ,IACJ,gBAAAC;AAAA,MAACC,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAR;AAAA,QACA,IAAIG;AAAA,QACJ,UAAAN;AAAA,QACA,oBAAkBQ;AAAA,QAClB,WAAWI;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAvB,EAAUQ,CAAI;AAAA,QAAA;AAAA,QAEf,GAAGK;AAAA,QAEJ,UAAA,gBAAAQ;AAAA,UAACC,EAAgB;AAAA,UAAhB;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAtB,EAAUO,CAAI;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GAIEgB,IAAanB,KACjB,gBAAAoB,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWM;AAAA,YACT;AAAA,YACAZ,KAAY;AAAA,YACZF,KAAa;AAAA,UAAA;AAAA,UAGd,UAAAJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFC,KACC,gBAAAe,EAAC,KAAA,EAAE,IAAIH,GAAQ,WAAU,kCACtB,UAAAZ,EAAA,CACH;AAAA,IAAA,GAEJ;AAGF,6BACG,OAAA,EAAI,WAAWiB,EAAG,oCAAoCnB,CAAS,GAC7D,UAAA;AAAA,MAAAG,MAAkB,YAAYiB;AAAA,MAC9BJ;AAAA,MACAb,MAAkB,WAAWiB;AAAA,IAAA,GAChC;AAAA,EAEJ;AACF;AAEAtB,EAAO,cAAc;"}

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

@@ -1,15 +1,51 @@
-import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
-export declare const Table: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & import('react').RefAttributes<HTMLTableElement>>;
+import { CSSProperties, HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Class for the scroll wrapper (border, radius, height). */
+    containerClassName?: string;
+    /**
+     * Max height of the scroll wrapper. Required for the sticky header to
+     * work — `<thead>` sticks to the nearest scroll container, so a wrapper
+     * with no height cap never scrolls. e.g. `maxHeight="24rem"`.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Accessible name of the scroll wrapper (it is a focusable `group` so
+     * keyboard users can scroll wide / capped tables). Defaults to
+     * `strings.table.scrollRegion`; pass the table's own title when you have one.
+     */
+    scrollLabel?: string;
+}
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
 export declare const TableBody: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
 export declare const TableFooter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
 export declare const TableRow: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Visual selected state (`data-state="selected"`). `aria-selected` is only
+     * valid on rows of an ARIA grid, so it is emitted only when the row
+     * carries `role="row"` (i.e. you opted into `role="grid"` on the table).
+     */
     selected?: boolean;
 } & import('react').RefAttributes<HTMLTableRowElement>>;
-export declare const TableHead: import('react').ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
-export declare const TableCell: import('react').ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
+export type TableCellAlign = 'left' | 'center' | 'right';
+export interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment; `right` also applies tabular figures. */
+    align?: TableCellAlign;
+    /**
+     * 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 interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment; `right` also applies tabular figures for numbers. */
+    align?: TableCellAlign;
+}
+export declare const TableCell: import('react').ForwardRefExoticComponent<TableCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
 export declare const TableCaption: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import('react').RefAttributes<HTMLTableCaptionElement>>;
-export interface TableSortHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+export interface TableSortHeaderProps extends TableHeadProps {
     /** Stable column key used in `currentSort.key`. */
     sortKey: string;
     /** Currently sorted column + direction (or null). */

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as o, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { ArrowUp as v, ArrowDown as x, ArrowUpDown as N } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStrings as h } from "../../hooks/use-strings.js";
+const y = l(function({ className: t, containerClassName: e, maxHeight: a, scrollLabel: s, ...n }, d) {
+  const u = h();
+  return (
+    // Whether the wrapper actually overflows is not knowable statically, so it
+    // is always a tab stop (WCAG 2.1.1 / axe scrollable-region-focusable).
+    /* @__PURE__ */ o(
+      "div",
+      {
+        role: "group",
+        "aria-label": s ?? u.table.scrollRegion,
+        tabIndex: 0,
+        className: r(
+          "relative isolate w-full overflow-auto",
+          "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          e
+        ),
+        style: a !== void 0 ? { maxHeight: a } : void 0,
+        children: /* @__PURE__ */ o(
+          "table",
+          {
+            ref: d,
+            className: r("w-full caption-bottom border-collapse text-sm", t),
+            ...n
+          }
+        )
+      }
+    )
+  );
+});
+y.displayName = "Table";
+const w = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "thead",
+    {
+      ref: a,
+      className: r(
+        "bg-background-subtle text-foreground-muted sticky top-0 z-10",
+        "[&_tr]:border-border [&_tr]:border-b",
+        t
+      ),
+      ...e
+    }
+  );
+});
+w.displayName = "TableHeader";
+const k = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o("tbody", { ref: a, className: r("[&_tr:last-child]:border-0", t), ...e });
+});
+k.displayName = "TableBody";
+const C = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "tfoot",
+    {
+      ref: a,
+      className: r("border-border bg-background-subtle border-t font-medium", t),
+      ...e
+    }
+  );
+});
+C.displayName = "TableFooter";
+const H = l(function({ className: t, selected: e, role: a, ...s }, n) {
+  return /* @__PURE__ */ o(
+    "tr",
+    {
+      ref: n,
+      role: a,
+      "data-state": e ? "selected" : void 0,
+      "aria-selected": e && a === "row" ? !0 : void 0,
+      className: r(
+        "border-border border-b transition-colors duration-[var(--duration-fast)]",
+        "hover:bg-background-subtle",
+        "data-[state=selected]:bg-accent-soft data-[state=selected]:hover:bg-accent-soft",
+        t
+      ),
+      ...s
+    }
+  );
+});
+H.displayName = "TableRow";
+const f = {
+  left: "text-left",
+  center: "text-center",
+  /* Numeric columns: right-aligned + tabular figures so digits line up. */
+  right: "text-right tabular"
+}, m = l(function({ className: t, uppercase: e = !1, align: a = "left", ...s }, n) {
+  return /* @__PURE__ */ o(
+    "th",
+    {
+      ref: n,
+      className: r(
+        "text-foreground-subtle h-10 px-3 align-middle text-xs font-medium",
+        f[a],
+        e && "tracking-wide uppercase",
+        "[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
+        t
+      ),
+      ...s
+    }
+  );
+});
+m.displayName = "TableHead";
+const R = l(function({ className: t, align: e = "left", ...a }, s) {
+  return /* @__PURE__ */ o(
+    "td",
+    {
+      ref: s,
+      className: r("text-foreground px-3 py-3 align-middle", f[e], t),
+      ...a
+    }
+  );
+});
+R.displayName = "TableCell";
+const z = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "caption",
+    {
+      ref: a,
+      className: r("text-foreground-subtle mt-4 text-sm", t),
+      ...e
+    }
+  );
+});
+z.displayName = "TableCaption";
+const j = l(
+  function({ sortKey: t, currentSort: e, onSortChange: a, children: s, className: n, align: d = "left", ...u }, g) {
+    const c = (e == null ? void 0 : e.key) === t, b = c ? e == null ? void 0 : e.direction : void 0, p = () => {
+      a(t, c && b === "asc" ? "desc" : "asc");
+    };
+    return /* @__PURE__ */ o(
+      m,
+      {
+        ref: g,
+        align: d,
+        className: r("p-0", n),
+        "aria-sort": c ? b === "asc" ? "ascending" : "descending" : void 0,
+        ...u,
+        children: /* @__PURE__ */ T(
+          "button",
+          {
+            type: "button",
+            onClick: p,
+            className: r(
+              "inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none",
+              d === "right" && "flex-row-reverse",
+              d === "center" && "justify-center",
+              "transition-colors duration-[var(--duration-fast)]",
+              "hover:text-foreground focus-visible:text-foreground",
+              "focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2",
+              c && "text-foreground"
+            ),
+            children: [
+              s,
+              b === "asc" ? /* @__PURE__ */ o(v, { className: "size-3.5", "aria-hidden": !0 }) : b === "desc" ? /* @__PURE__ */ o(x, { className: "size-3.5", "aria-hidden": !0 }) : /* @__PURE__ */ o(N, { className: "size-3.5 opacity-40", "aria-hidden": !0 })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+j.displayName = "TableSortHeader";
+export {
+  y as Table,
+  k as TableBody,
+  z as TableCaption,
+  R as TableCell,
+  C as TableFooter,
+  m as TableHead,
+  w as TableHeader,
+  H as TableRow,
+  j 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 {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n} from 'react';\nimport { ArrowDown, ArrowUp, ArrowUpDown } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\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 interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Class for the scroll wrapper (border, radius, height). */\n  containerClassName?: string;\n  /**\n   * Max height of the scroll wrapper. Required for the sticky header to\n   * work — `<thead>` sticks to the nearest scroll container, so a wrapper\n   * with no height cap never scrolls. e.g. `maxHeight=\"24rem\"`.\n   */\n  maxHeight?: CSSProperties['maxHeight'];\n  /**\n   * Accessible name of the scroll wrapper (it is a focusable `group` so\n   * keyboard users can scroll wide / capped tables). Defaults to\n   * `strings.table.scrollRegion`; pass the table's own title when you have one.\n   */\n  scrollLabel?: string;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, containerClassName, maxHeight, scrollLabel, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    // Whether the wrapper actually overflows is not knowable statically, so it\n    // is always a tab stop (WCAG 2.1.1 / axe scrollable-region-focusable).\n    <div\n      role=\"group\"\n      aria-label={scrollLabel ?? strings.table.scrollRegion}\n      tabIndex={0}\n      className={cn(\n        'relative isolate w-full overflow-auto',\n        'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n        containerClassName,\n      )}\n      style={maxHeight !== undefined ? { maxHeight } : undefined}\n    >\n      <table\n        ref={ref}\n        className={cn('w-full caption-bottom border-collapse text-sm', className)}\n        {...props}\n      />\n    </div>\n  );\n});\nTable.displayName = 'Table';\n\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableHeader({ className, ...props }, ref) {\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        'bg-background-subtle text-foreground-muted sticky top-0 z-10',\n        '[&_tr]:border-border [&_tr]:border-b',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHeader.displayName = 'TableHeader';\n\nexport const TableBody = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableBody({ className, ...props }, ref) {\n  return <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n});\nTableBody.displayName = 'TableBody';\n\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableFooter({ className, ...props }, ref) {\n  return (\n    <tfoot\n      ref={ref}\n      className={cn('border-border bg-background-subtle border-t font-medium', className)}\n      {...props}\n    />\n  );\n});\nTableFooter.displayName = 'TableFooter';\n\nexport const TableRow = forwardRef<\n  HTMLTableRowElement,\n  HTMLAttributes<HTMLTableRowElement> & {\n    /**\n     * Visual selected state (`data-state=\"selected\"`). `aria-selected` is only\n     * valid on rows of an ARIA grid, so it is emitted only when the row\n     * carries `role=\"row\"` (i.e. you opted into `role=\"grid\"` on the table).\n     */\n    selected?: boolean;\n  }\n>(function TableRow({ className, selected, role, ...props }, ref) {\n  return (\n    <tr\n      ref={ref}\n      role={role}\n      data-state={selected ? 'selected' : undefined}\n      aria-selected={selected && role === 'row' ? true : undefined}\n      className={cn(\n        'border-border border-b transition-colors duration-[var(--duration-fast)]',\n        'hover:bg-background-subtle',\n        'data-[state=selected]:bg-accent-soft data-[state=selected]:hover:bg-accent-soft',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableRow.displayName = 'TableRow';\n\nexport type TableCellAlign = 'left' | 'center' | 'right';\n\nconst alignClass: Record<TableCellAlign, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  /* Numeric columns: right-aligned + tabular figures so digits line up. */\n  right: 'text-right tabular',\n};\n\nexport interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment; `right` also applies tabular figures. */\n  align?: TableCellAlign;\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, align = 'left', ...props },\n  ref,\n) {\n  return (\n    <th\n      ref={ref}\n      className={cn(\n        'text-foreground-subtle h-10 px-3 align-middle text-xs font-medium',\n        alignClass[align],\n        uppercase && 'tracking-wide uppercase',\n        '[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment; `right` also applies tabular figures for numbers. */\n  align?: TableCellAlign;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { className, align = 'left', ...props },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      className={cn('text-foreground px-3 py-3 align-middle', alignClass[align], className)}\n      {...props}\n    />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport const TableCaption = forwardRef<\n  HTMLTableCaptionElement,\n  HTMLAttributes<HTMLTableCaptionElement>\n>(function TableCaption({ className, ...props }, ref) {\n  return (\n    <caption\n      ref={ref}\n      className={cn('text-foreground-subtle mt-4 text-sm', className)}\n      {...props}\n    />\n  );\n});\nTableCaption.displayName = 'TableCaption';\n\nexport interface TableSortHeaderProps extends TableHeadProps {\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, align = 'left', ...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\n        ref={ref}\n        align={align}\n        className={cn('p-0', className)}\n        // aria-sort only on the sorted column — 'none' everywhere else is noise.\n        aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : undefined}\n        {...props}\n      >\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            align === 'right' && 'flex-row-reverse',\n            align === 'center' && 'justify-center',\n            'transition-colors duration-[var(--duration-fast)]',\n            'hover:text-foreground focus-visible:text-foreground',\n            'focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2',\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","containerClassName","maxHeight","scrollLabel","props","ref","strings","useStrings","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","role","alignClass","TableHead","uppercase","align","TableCell","TableCaption","TableSortHeader","sortKey","currentSort","onSortChange","children","active","direction","handle","jsxs","ArrowUp","ArrowDown","ArrowUpDown"],"mappings":"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"}

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,91 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as s, useContext as v, createContext as c } from "react";
+import * as n from "@radix-ui/react-tabs";
+import { cn as o } from "../../lib/utils.js";
+import { cva as f } from "class-variance-authority";
+const N = n.Root, l = c("underline"), g = f("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" }
+}), b = s(
+  function({ className: t, variant: a = "underline", size: e, ...r }, u) {
+    return /* @__PURE__ */ i(l.Provider, { value: a ?? "underline", children: /* @__PURE__ */ i(
+      n.List,
+      {
+        ref: u,
+        "data-variant": a,
+        className: o(g({ variant: a, size: e }), t),
+        ...r
+      }
+    ) });
+  }
+);
+b.displayName = "TabsList";
+const m = s(function({ className: t, ...a }, e) {
+  const r = v(l);
+  return /* @__PURE__ */ i(
+    n.Trigger,
+    {
+      ref: e,
+      "data-variant": r,
+      className: o(
+        "inline-flex items-center gap-2 font-medium whitespace-nowrap",
+        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)] outline-none",
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        // Underline variant
+        "data-[variant=underline]:relative data-[variant=underline]:h-full",
+        "data-[variant=underline]:text-foreground-muted data-[variant=underline]:px-1",
+        "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
+    }
+  );
+});
+m.displayName = "TabsTrigger";
+const p = s(function({ className: t, ...a }, e) {
+  return /* @__PURE__ */ i(
+    n.Content,
+    {
+      ref: e,
+      className: o(
+        "mt-4 outline-none",
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+        t
+      ),
+      ...a
+    }
+  );
+});
+p.displayName = "TabsContent";
+export {
+  N as Tabs,
+  p as TabsContent,
+  b as TabsList,
+  m 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  createContext,\n  forwardRef,\n  useContext,\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\ntype TabsVariant = 'underline' | 'pills';\n/* Triggers read the list variant from context and stamp their own\n   `data-variant`, so no ancestor selector can leak into nested Tabs. */\nconst TabsVariantContext = createContext<TabsVariant>('underline');\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>, 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      <TabsVariantContext.Provider value={variant ?? 'underline'}>\n        <TabsPrimitive.List\n          ref={ref}\n          data-variant={variant}\n          className={cn(list({ variant, size }), className)}\n          {...props}\n        />\n      </TabsVariantContext.Provider>\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  const variant = useContext(TabsVariantContext);\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-variant={variant}\n      className={cn(\n        'inline-flex items-center gap-2 font-medium whitespace-nowrap',\n        'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)] outline-none',\n        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\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]:text-foreground-muted data-[variant=underline]:px-1',\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-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\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","TabsVariantContext","createContext","list","cva","TabsList","forwardRef","className","variant","size","props","ref","jsx","cn","TabsTrigger","useContext","TabsContent"],"mappings":";;;;;;AAkBO,MAAMA,IAAOC,EAAc,MAK5BC,IAAqBC,EAA2B,WAAW,GAE3DC,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,GAKYC,IAAWC;AAAA,EACtB,SAAkB,EAAE,WAAAC,GAAW,SAAAC,IAAU,aAAa,MAAAC,GAAM,GAAGC,EAAA,GAASC,GAAK;AAC3E,6BACGV,EAAmB,UAAnB,EAA4B,OAAOO,KAAW,aAC7C,UAAA,gBAAAI;AAAA,MAACZ,EAAc;AAAA,MAAd;AAAA,QACC,KAAAW;AAAA,QACA,gBAAcH;AAAA,QACd,WAAWK,EAAGV,EAAK,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,QAC/C,GAAGG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAEJ;AACF;AACAL,EAAS,cAAc;AAEhB,MAAMS,IAAcR,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,QAAMH,IAAUO,EAAWd,CAAkB;AAC7C,SACE,gBAAAW;AAAA,IAACZ,EAAc;AAAA,IAAd;AAAA,MACC,KAAAW;AAAA,MACA,gBAAcH;AAAA,MACd,WAAWK;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,MAAME,IAAcV,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACZ,EAAc;AAAA,IAAd;AAAA,MACC,KAAAW;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDM,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;
 }
 /**