@craftzbay/ui 0.10.0 → 0.11.0

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

@@ -1,76 +1,99 @@
 "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 { 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 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(
+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: f,
-      "aria-label": i["aria-label"] ?? x.stepper.label,
+      ref: u,
+      "aria-label": f ?? n.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(
+      ...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": a === "current" ? "step" : void 0,
+            "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__ */ 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"
+              /* @__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
+                      }
                     ),
-                    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"
+                    t === "vertical" && !m && /* @__PURE__ */ s(
+                      "span",
+                      {
+                        className: e(
+                          "mt-1 min-h-6 w-px flex-1",
+                          r < a ? "bg-accent" : "bg-border"
+                        )
+                      }
                     )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ n("div", { className: e("flex flex-col", t === "horizontal" && "min-w-0"), children: [
-                /* @__PURE__ */ l(
+                  ]
+                }
+              ),
+              /* @__PURE__ */ c("div", { className: e("flex flex-col", t === "horizontal" && "min-w-0"), children: [
+                /* @__PURE__ */ c(
                   "span",
                   {
                     className: e(
                       "text-sm font-medium",
-                      a === "upcoming" ? "text-foreground-subtle" : "text-foreground"
+                      l === "upcoming" ? "text-foreground-subtle" : "text-foreground"
                     ),
-                    children: s.title
+                    children: [
+                      o.title,
+                      /* @__PURE__ */ c("span", { className: "sr-only", children: [
+                        ", ",
+                        g[l]
+                      ] })
+                    ]
                   }
                 ),
-                t === "vertical" && s.description && /* @__PURE__ */ l("p", { className: "text-xs text-foreground-muted mt-0.5", children: s.description })
+                t === "vertical" && o.description && /* @__PURE__ */ s("p", { className: "text-foreground-muted mt-0.5 text-xs", children: o.description })
               ] }),
-              t === "horizontal" && !m && /* @__PURE__ */ l(
+              t === "horizontal" && !m && /* @__PURE__ */ s(
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: e(
-                    "h-px flex-1 mx-2",
-                    r < c ? "bg-accent" : "bg-border"
-                  )
+                  className: e("mx-2 h-px flex-1", r < a ? "bg-accent" : "bg-border")
                 }
               )
             ]
@@ -81,8 +104,8 @@ const b = p(function({ steps: o, current: c, orientation: t = "horizontal", clas
     }
   );
 });
-b.displayName = "Stepper";
+z.displayName = "Stepper";
 export {
-  b as Stepper
+  z as Stepper
 };
 //# sourceMappingURL=Stepper.js.map

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

@@ -1 +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;"}
+{"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

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

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

@@ -1 +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;"}
+{"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,12 +1,36 @@
-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 interface TableHeadProps extends ThHTMLAttributes<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.
@@ -15,9 +39,13 @@ export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
     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 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). */