@gerege-systems/ui 0.11.2

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Predefined silhouette presets. */
+    variant?: 'text' | 'circle' | 'card' | 'avatar';
+    /**
+     * Render nothing until this many ms have elapsed, so sub-300ms loads never
+     * flash a placeholder. Default 300. Pass 0 to render immediately.
+     */
+    delay?: number;
+    /**
+     * Once shown, keep the placeholder mounted for at least this many ms so it
+     * never flickers. Default 500.
+     */
+    minVisible?: number;
+}
+/**
+ * Animated placeholder. Use `variant="text"` / `variant="avatar"` for common
+ * shapes; pass `className` directly for one-off sizes.
+ *
+ * @example List item
+ *   <div className="flex items-center gap-3">
+ *     <Skeleton variant="avatar" />
+ *     <div className="space-y-1.5 flex-1">
+ *       <Skeleton variant="text" className="w-1/3" />
+ *       <Skeleton variant="text" className="w-1/2" />
+ *     </div>
+ *   </div>
+ *
+ * @example Card
+ *   <Skeleton variant="card" className="h-32" />
+ *
+ * @do Match the silhouette of the eventual content so the layout doesn't
+ *      shift when data arrives.
+ * @dont Pass `delay={0}` for data that usually arrives in under 300ms — the
+ *       default delay exists so fast loads never flash a placeholder.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { cn as s } from "../../lib/utils.js";
+import { useDelayedLoading as m } from "../../hooks/use-delayed-loading.js";
+const c = l(function({ className: o, variant: e, delay: r = 300, minVisible: d = 500, ...u }, n) {
+  return m(r, { minVisible: d }) ? /* @__PURE__ */ t(
+    "div",
+    {
+      ref: n,
+      "aria-hidden": !0,
+      className: s(
+        "bg-background-muted animate-pulse",
+        e === "text" && "h-3 rounded-sm",
+        e === "circle" && "aspect-square rounded-full",
+        e === "avatar" && "size-8 rounded-full",
+        e === "card" && "rounded-lg",
+        !e && "rounded-md",
+        o
+      ),
+      ...u
+    }
+  ) : null;
+});
+c.displayName = "Skeleton";
+export {
+  c as Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/ui/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useDelayedLoading } from '@/hooks/use-delayed-loading';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Predefined silhouette presets. */\n  variant?: 'text' | 'circle' | 'card' | 'avatar';\n  /**\n   * Render nothing until this many ms have elapsed, so sub-300ms loads never\n   * flash a placeholder. Default 300. Pass 0 to render immediately.\n   */\n  delay?: number;\n  /**\n   * Once shown, keep the placeholder mounted for at least this many ms so it\n   * never flickers. Default 500.\n   */\n  minVisible?: number;\n}\n\n/**\n * Animated placeholder. Use `variant=\"text\"` / `variant=\"avatar\"` for common\n * shapes; pass `className` directly for one-off sizes.\n *\n * @example List item\n *   <div className=\"flex items-center gap-3\">\n *     <Skeleton variant=\"avatar\" />\n *     <div className=\"space-y-1.5 flex-1\">\n *       <Skeleton variant=\"text\" className=\"w-1/3\" />\n *       <Skeleton variant=\"text\" className=\"w-1/2\" />\n *     </div>\n *   </div>\n *\n * @example Card\n *   <Skeleton variant=\"card\" className=\"h-32\" />\n *\n * @do Match the silhouette of the eventual content so the layout doesn't\n *      shift when data arrives.\n * @dont Pass `delay={0}` for data that usually arrives in under 300ms — the\n *       default delay exists so fast loads never flash a placeholder.\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, variant, delay = 300, minVisible = 500, ...props },\n  ref,\n) {\n  const show = useDelayedLoading(delay, { minVisible });\n  if (!show) return null;\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      className={cn(\n        'bg-background-muted animate-pulse',\n        variant === 'text' && 'h-3 rounded-sm',\n        variant === 'circle' && 'aspect-square rounded-full',\n        variant === 'avatar' && 'size-8 rounded-full',\n        variant === 'card' && 'rounded-lg',\n        !variant && 'rounded-md',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSkeleton.displayName = 'Skeleton';\n"],"names":["Skeleton","forwardRef","className","variant","delay","minVisible","props","ref","useDelayedLoading","jsx","cn"],"mappings":";;;;;AA0CO,MAAMA,IAAWC,EAA0C,SAChE,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,IAAQ,KAAK,YAAAC,IAAa,KAAK,GAAGC,EAAA,GACxDC,GACA;AAEA,SADaC,EAAkBJ,GAAO,EAAE,YAAAC,GAAY,IAGlD,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,eAAW;AAAA,MACX,WAAWG;AAAA,QACT;AAAA,QACAP,MAAY,UAAU;AAAA,QACtBA,MAAY,YAAY;AAAA,QACxBA,MAAY,YAAY;AAAA,QACxBA,MAAY,UAAU;AAAA,QACtB,CAACA,KAAW;AAAA,QACZD;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,IAAA;AAAA,EAAA,IAdU;AAiBpB,CAAC;AACDN,EAAS,cAAc;"}

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

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value' | 'defaultValue'> {
+    /**
+     * Controlled value. Pass `[n]` for a single-thumb slider, `[a, b]` for a range slider.
+     */
+    value?: number[];
+    defaultValue?: number[];
+    /** Inline label rendered above the slider. */
+    label?: ReactNode;
+    /** Show the numeric value next to the label. */
+    showValue?: boolean;
+    /** Format the displayed value (e.g. `(v) => \`${v}%\``). */
+    formatValue?: (value: number) => string;
+}
+/**
+ * Single- or range-thumb slider. Pass one item in `value` for a single
+ * thumb, two for a range.
+ *
+ * @example Single value
+ *   <Slider label="Volume" showValue defaultValue={[60]} max={100} step={1} />
+ *
+ * @example Price range
+ *   <Slider label="Price"
+ *           defaultValue={[50, 250]}
+ *           min={0} max={500} step={10}
+ *           formatValue={(v) => \`$\${v}\`}
+ *           showValue />
+ *
+ * @do Use `showValue` when the absolute number matters (price, volume, weight).
+ * @dont Hide the value when users will need to reason about exact thresholds.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { forwardRef as k, useState as R, useId as j } from "react";
+import * as s from "@radix-ui/react-slider";
+import { cn as h } from "../../lib/utils.js";
+import { useStrings as I } from "../../hooks/use-strings.js";
+const z = k(
+  function({
+    className: N,
+    label: e,
+    showValue: b,
+    formatValue: o = (l) => String(l),
+    value: n,
+    defaultValue: g,
+    onValueChange: a,
+    ...v
+  }, y) {
+    const [l, S] = R(g ?? [0]), p = n !== void 0, r = p ? n : l, d = r.length > 1, c = j(), f = I(), m = typeof e == "string" ? e : void 0, w = (t) => d ? t === 0 ? f.slider.minimum : f.slider.maximum : m ?? v["aria-label"] ?? f.slider.value;
+    return /* @__PURE__ */ u("div", { className: h("flex flex-col gap-2", N), children: [
+      (e || b) && /* @__PURE__ */ u("div", { className: "flex items-center justify-between", children: [
+        e && /* @__PURE__ */ i("span", { id: c, className: "text-foreground text-sm font-medium", children: e }),
+        b && /* @__PURE__ */ i("span", { className: "tabular text-foreground-muted font-mono text-xs", children: d ? `${o(r[0])} – ${o(r[1])}` : o(r[0]) })
+      ] }),
+      /* @__PURE__ */ u(
+        s.Root,
+        {
+          ref: y,
+          value: n,
+          defaultValue: g,
+          onValueChange: (t) => {
+            p || S(t), a == null || a(t);
+          },
+          className: "relative flex w-full touch-none items-center py-3.5 select-none",
+          "aria-labelledby": e && !m ? c : void 0,
+          ...v,
+          children: [
+            /* @__PURE__ */ i(s.Track, { className: "bg-background-muted relative h-1 w-full grow overflow-hidden rounded-full", children: /* @__PURE__ */ i(s.Range, { className: "bg-accent absolute h-full" }) }),
+            r.map((t, x) => /* @__PURE__ */ i(
+              s.Thumb,
+              {
+                className: h(
+                  "border-accent bg-card relative block size-4 rounded-full border-2 shadow-sm",
+                  // 44px touch target without growing the visible thumb.
+                  'before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-[""]',
+                  "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+                  "hover:scale-110 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                ),
+                "aria-label": w(x),
+                "aria-labelledby": !d && e && !m ? c : void 0
+              },
+              x
+            ))
+          ]
+        }
+      )
+    ] });
+  }
+);
+z.displayName = "Slider";
+export {
+  z as Slider
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/ui/Slider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\nexport interface SliderProps extends Omit<\n  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n  'value' | 'defaultValue'\n> {\n  /**\n   * Controlled value. Pass `[n]` for a single-thumb slider, `[a, b]` for a range slider.\n   */\n  value?: number[];\n  defaultValue?: number[];\n  /** Inline label rendered above the slider. */\n  label?: ReactNode;\n  /** Show the numeric value next to the label. */\n  showValue?: boolean;\n  /** Format the displayed value (e.g. `(v) => \\`${v}%\\``). */\n  formatValue?: (value: number) => string;\n}\n\n/**\n * Single- or range-thumb slider. Pass one item in `value` for a single\n * thumb, two for a range.\n *\n * @example Single value\n *   <Slider label=\"Volume\" showValue defaultValue={[60]} max={100} step={1} />\n *\n * @example Price range\n *   <Slider label=\"Price\"\n *           defaultValue={[50, 250]}\n *           min={0} max={500} step={10}\n *           formatValue={(v) => \\`$\\${v}\\`}\n *           showValue />\n *\n * @do Use `showValue` when the absolute number matters (price, volume, weight).\n * @dont Hide the value when users will need to reason about exact thresholds.\n */\nexport const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(\n  function Slider(\n    {\n      className,\n      label,\n      showValue,\n      formatValue = (v) => String(v),\n      value,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) {\n    // Uncontrolled sliders track their own value so `showValue` stays live.\n    const [internal, setInternal] = useState<number[]>(defaultValue ?? [0]);\n    const isControlled = value !== undefined;\n    const currentValue = isControlled ? value : internal;\n    const isRange = currentValue.length > 1;\n    const labelId = useId();\n    const strings = useStrings();\n    // Only a string label can double as aria-label; ReactNode labels are\n    // referenced by id instead.\n    const stringLabel = typeof label === 'string' ? label : undefined;\n    const thumbLabel = (i: number) =>\n      isRange\n        ? i === 0\n          ? strings.slider.minimum\n          : strings.slider.maximum\n        : (stringLabel ?? props['aria-label'] ?? strings.slider.value);\n\n    return (\n      <div className={cn('flex flex-col gap-2', className)}>\n        {(label || showValue) && (\n          <div className=\"flex items-center justify-between\">\n            {label && (\n              <span id={labelId} className=\"text-foreground text-sm font-medium\">\n                {label}\n              </span>\n            )}\n            {showValue && (\n              <span className=\"tabular text-foreground-muted font-mono text-xs\">\n                {isRange\n                  ? `${formatValue(currentValue[0])} – ${formatValue(currentValue[1])}`\n                  : formatValue(currentValue[0])}\n              </span>\n            )}\n          </div>\n        )}\n\n        <SliderPrimitive.Root\n          ref={ref}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={(v) => {\n            if (!isControlled) setInternal(v);\n            onValueChange?.(v);\n          }}\n          className=\"relative flex w-full touch-none items-center py-3.5 select-none\"\n          aria-labelledby={label && !stringLabel ? labelId : undefined}\n          {...props}\n        >\n          <SliderPrimitive.Track className=\"bg-background-muted relative h-1 w-full grow overflow-hidden rounded-full\">\n            <SliderPrimitive.Range className=\"bg-accent absolute h-full\" />\n          </SliderPrimitive.Track>\n          {currentValue.map((_, i) => (\n            <SliderPrimitive.Thumb\n              key={i}\n              className={cn(\n                'border-accent bg-card relative block size-4 rounded-full border-2 shadow-sm',\n                // 44px touch target without growing the visible thumb.\n                'before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-[\"\"]',\n                'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n                'transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'hover:scale-110 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              )}\n              aria-label={thumbLabel(i)}\n              aria-labelledby={!isRange && label && !stringLabel ? labelId : undefined}\n            />\n          ))}\n        </SliderPrimitive.Root>\n      </div>\n    );\n  },\n);\n\nSlider.displayName = 'Slider';\n"],"names":["Slider","forwardRef","className","label","showValue","formatValue","v","value","defaultValue","onValueChange","props","ref","internal","setInternal","useState","isControlled","currentValue","isRange","labelId","useId","strings","useStrings","stringLabel","thumbLabel","i","cn","jsxs","SliderPrimitive","jsx","_"],"mappings":";;;;;;AAgDO,MAAMA,IAASC;AAAA,EACpB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC,IAAc,CAACC,MAAM,OAAOA,CAAC;AAAA,IAC7B,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AAEA,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAmBN,KAAgB,CAAC,CAAC,CAAC,GAChEO,IAAeR,MAAU,QACzBS,IAAeD,IAAeR,IAAQK,GACtCK,IAAUD,EAAa,SAAS,GAChCE,IAAUC,EAAA,GACVC,IAAUC,EAAA,GAGVC,IAAc,OAAOnB,KAAU,WAAWA,IAAQ,QAClDoB,IAAa,CAACC,MAClBP,IACIO,MAAM,IACJJ,EAAQ,OAAO,UACfA,EAAQ,OAAO,UAChBE,KAAeZ,EAAM,YAAY,KAAKU,EAAQ,OAAO;AAE5D,6BACG,OAAA,EAAI,WAAWK,EAAG,uBAAuBvB,CAAS,GAC/C,UAAA;AAAA,OAAAC,KAASC,MACT,gBAAAsB,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,QAAAvB,uBACE,QAAA,EAAK,IAAIe,GAAS,WAAU,uCAC1B,UAAAf,GACH;AAAA,QAEDC,uBACE,QAAA,EAAK,WAAU,mDACb,UAAAa,IACG,GAAGZ,EAAYW,EAAa,CAAC,CAAC,CAAC,MAAMX,EAAYW,EAAa,CAAC,CAAC,CAAC,KACjEX,EAAYW,EAAa,CAAC,CAAC,EAAA,CACjC;AAAA,MAAA,GAEJ;AAAA,MAGF,gBAAAU;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,KAAAhB;AAAA,UACA,OAAAJ;AAAA,UACA,cAAAC;AAAA,UACA,eAAe,CAACF,MAAM;AACpB,YAAKS,KAAcF,EAAYP,CAAC,GAChCG,KAAA,QAAAA,EAAgBH;AAAA,UAClB;AAAA,UACA,WAAU;AAAA,UACV,mBAAiBH,KAAS,CAACmB,IAAcJ,IAAU;AAAA,UAClD,GAAGR;AAAA,UAEJ,UAAA;AAAA,YAAA,gBAAAkB,EAACD,EAAgB,OAAhB,EAAsB,WAAU,6EAC/B,UAAA,gBAAAC,EAACD,EAAgB,OAAhB,EAAsB,WAAU,4BAAA,CAA4B,EAAA,CAC/D;AAAA,YACCX,EAAa,IAAI,CAACa,GAAGL,MACpB,gBAAAI;AAAA,cAACD,EAAgB;AAAA,cAAhB;AAAA,gBAEC,WAAWF;AAAA,kBACT;AAAA;AAAA,kBAEA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,cAAYF,EAAWC,CAAC;AAAA,gBACxB,mBAAiB,CAACP,KAAWd,KAAS,CAACmB,IAAcJ,IAAU;AAAA,cAAA;AAAA,cAV1DM;AAAA,YAAA,CAYR;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEAxB,EAAO,cAAc;"}

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../lib/cva.js';
+declare const snackbar: (props?: ({
+    variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof snackbar> {
+    /** Headline. */
+    title?: ReactNode;
+    /** Action button rendered on the right. */
+    action?: ReactNode;
+    /** Show a close (×) button on the right. */
+    onClose?: () => void;
+    /** Override the variant's default icon. Pass `false` to hide. */
+    icon?: ReactNode | false;
+}
+/**
+ * Persistent inline notification. Unlike Toast, Snackbar does **not** auto-
+ * dismiss. Pair with an `action` button or an `onClose` handler.
+ */
+export declare const Snackbar: import('react').ForwardRefExoticComponent<SnackbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { X as b, XCircle as g, AlertTriangle as x, CheckCircle2 as h, Info as p } from "../../icons/index.js";
+import { cn as v } from "../../lib/utils.js";
+import { useStrings as k } from "../../hooks/use-strings.js";
+import { cva as N } from "class-variance-authority";
+const w = N(
+  [
+    "relative pointer-events-auto w-full max-w-md",
+    "flex items-start gap-3 rounded-md border bg-card p-3 shadow-md",
+    "text-sm text-foreground"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        info: "border-info-border-soft",
+        success: "border-success-border-soft",
+        warning: "border-warning-border-soft",
+        danger: "border-danger-border-soft"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), z = {
+  default: null,
+  info: /* @__PURE__ */ e(p, { className: "text-info-text mt-0.5 size-4 shrink-0", "aria-hidden": !0 }),
+  success: /* @__PURE__ */ e(h, { className: "text-success-text mt-0.5 size-4 shrink-0", "aria-hidden": !0 }),
+  warning: /* @__PURE__ */ e(x, { className: "text-warning-text mt-0.5 size-4 shrink-0", "aria-hidden": !0 }),
+  danger: /* @__PURE__ */ e(g, { className: "text-danger-text mt-0.5 size-4 shrink-0", "aria-hidden": !0 })
+}, S = m(function({ className: o, variant: r = "default", title: t, action: d, onClose: s, icon: a, children: n, ...c }, l) {
+  const u = k(), f = a === !1 ? null : a ?? z[r ?? "default"];
+  return /* @__PURE__ */ i("div", { ref: l, role: "status", className: v(w({ variant: r }), o), ...c, children: [
+    f,
+    /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+      t && /* @__PURE__ */ e("p", { className: "font-medium", children: t }),
+      n && /* @__PURE__ */ e("p", { className: "text-foreground-muted", children: n })
+    ] }),
+    d,
+    s && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: s,
+        "aria-label": u.snackbar.dismiss,
+        className: "text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-card rounded p-1 outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ e(b, { className: "size-4", "aria-hidden": !0 })
+      }
+    )
+  ] });
+});
+S.displayName = "Snackbar";
+export {
+  S as Snackbar
+};
+//# sourceMappingURL=Snackbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.js","sources":["../../../src/components/ui/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { CheckCircle2, Info, AlertTriangle, XCircle, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst snackbar = cva(\n  [\n    'relative pointer-events-auto w-full max-w-md',\n    'flex items-start gap-3 rounded-md border bg-card p-3 shadow-md',\n    'text-sm text-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        info: 'border-info-border-soft',\n        success: 'border-success-border-soft',\n        warning: 'border-warning-border-soft',\n        danger: 'border-danger-border-soft',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nconst iconForVariant: Record<NonNullable<VariantProps<typeof snackbar>['variant']>, ReactNode> = {\n  default: null,\n  info: <Info className=\"text-info-text mt-0.5 size-4 shrink-0\" aria-hidden />,\n  success: <CheckCircle2 className=\"text-success-text mt-0.5 size-4 shrink-0\" aria-hidden />,\n  warning: <AlertTriangle className=\"text-warning-text mt-0.5 size-4 shrink-0\" aria-hidden />,\n  danger: <XCircle className=\"text-danger-text mt-0.5 size-4 shrink-0\" aria-hidden />,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof snackbar> {\n  /** Headline. */\n  title?: ReactNode;\n  /** Action button rendered on the right. */\n  action?: ReactNode;\n  /** Show a close (×) button on the right. */\n  onClose?: () => void;\n  /** Override the variant's default icon. Pass `false` to hide. */\n  icon?: ReactNode | false;\n}\n\n/**\n * Persistent inline notification. Unlike Toast, Snackbar does **not** auto-\n * dismiss. Pair with an `action` button or an `onClose` handler.\n */\nexport const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(function Snackbar(\n  { className, variant = 'default', title, action, onClose, icon, children, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const renderedIcon = icon === false ? null : (icon ?? iconForVariant[variant ?? 'default']);\n\n  return (\n    <div ref={ref} role=\"status\" className={cn(snackbar({ variant }), className)} {...props}>\n      {renderedIcon}\n      <div className=\"min-w-0 flex-1\">\n        {title && <p className=\"font-medium\">{title}</p>}\n        {children && <p className=\"text-foreground-muted\">{children}</p>}\n      </div>\n      {action}\n      {onClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label={strings.snackbar.dismiss}\n          className=\"text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-card rounded p-1 outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n        >\n          <X className=\"size-4\" aria-hidden />\n        </button>\n      )}\n    </div>\n  );\n});\nSnackbar.displayName = 'Snackbar';\n"],"names":["snackbar","cva","iconForVariant","jsx","Info","CheckCircle2","AlertTriangle","XCircle","Snackbar","forwardRef","className","variant","title","action","onClose","icon","children","props","ref","strings","useStrings","renderedIcon","jsxs","cn","X"],"mappings":";;;;;;;AAQA,MAAMA,IAAWC;AAAA,EACf;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,iBAAiB,EAAE,SAAS,UAAA;AAAA,EAAU;AAE1C,GAEMC,IAA2F;AAAA,EAC/F,SAAS;AAAA,EACT,MAAM,gBAAAC,EAACC,GAAA,EAAK,WAAU,yCAAwC,eAAW,IAAC;AAAA,EAC1E,SAAS,gBAAAD,EAACE,GAAA,EAAa,WAAU,4CAA2C,eAAW,IAAC;AAAA,EACxF,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,4CAA2C,eAAW,IAAC;AAAA,EACzF,QAAQ,gBAAAH,EAACI,GAAA,EAAQ,WAAU,2CAA0C,eAAW,GAAA,CAAC;AACnF,GAkBaC,IAAWC,EAA0C,SAChE,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC7EC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAeN,MAAS,KAAQ,OAAQA,KAAQb,EAAeS,KAAW,SAAS;AAEzF,SACE,gBAAAW,EAAC,OAAA,EAAI,KAAAJ,GAAU,MAAK,UAAS,WAAWK,EAAGvB,EAAS,EAAE,SAAAW,GAAS,GAAGD,CAAS,GAAI,GAAGO,GAC/E,UAAA;AAAA,IAAAI;AAAA,IACD,gBAAAC,EAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,MAAAV,KAAS,gBAAAT,EAAC,KAAA,EAAE,WAAU,eAAe,UAAAS,GAAM;AAAA,MAC3CI,KAAY,gBAAAb,EAAC,KAAA,EAAE,WAAU,yBAAyB,UAAAa,EAAA,CAAS;AAAA,IAAA,GAC9D;AAAA,IACCH;AAAA,IACAC,KACC,gBAAAX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASW;AAAA,QACT,cAAYK,EAAQ,SAAS;AAAA,QAC7B,WAAU;AAAA,QAEV,UAAA,gBAAAhB,EAACqB,GAAA,EAAE,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GAEJ;AAEJ,CAAC;AACDhB,EAAS,cAAc;"}

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

@@ -0,0 +1,23 @@
+import { SVGProps } from 'react';
+export interface SpinnerProps extends SVGProps<SVGSVGElement> {
+    /** Visual weight. */
+    tone?: 'accent' | 'neutral' | 'on-accent';
+    /** Pixel size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible label. Required unless `decorative` is true. */
+    label?: string;
+    /** Hide from assistive tech (set when a parent already announces busy state). */
+    decorative?: boolean;
+}
+/**
+ * Small indeterminate progress indicator. Use when the operation duration is
+ * unknown and Progress isn't appropriate.
+ *
+ * @example
+ *   <Spinner label="Loading users" />
+ *   <Button loading>Saving…</Button>  // uses Spinner internally
+ *
+ * @do Provide a `label` so the busy state is announced.
+ * @dont Use a Spinner for tasks that take 300ms+; use Skeleton instead.
+ */
+export declare const Spinner: import('react').ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Step {
+    /** Step heading. */
+    title: ReactNode;
+    /** Optional secondary description, only shown in vertical orientation. */
+    description?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Ordered list of steps. */
+    steps: Step[];
+    /** 0-indexed active step. Steps before it are marked complete. */
+    current: number;
+    /** Layout direction. */
+    orientation?: 'horizontal' | 'vertical';
+    /** sr-only state words announced after each title (i18n). */
+    stateLabels?: {
+        complete: string;
+        current: string;
+        upcoming: string;
+    };
+}
+/**
+ * Multi-step progress indicator. Use the horizontal variant in narrow flows
+ * (top of an onboarding modal) and vertical for deeper context.
+ *
+ * @example Onboarding
+ *   <Stepper
+ *     current={step}
+ *     steps={[
+ *       { title: 'Workspace' },
+ *       { title: 'Invite team' },
+ *       { title: 'Connect data' },
+ *       { title: 'Done' },
+ *     ]}
+ *   />
+ *
+ * @do Keep titles 1–2 words. Save explanations for the page body.
+ * @dont Use Stepper for free-form navigation. It implies a linear flow.
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLOListElement>>;

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.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'asChild'> {
+    /** Inline label rendered to the right. */
+    label?: ReactNode;
+    /** Secondary description rendered below the label. */
+    description?: ReactNode;
+    /** Position the label before the switch instead of after. */
+    labelPosition?: 'before' | 'after';
+    /** Visual size. */
+    size?: 'sm' | 'md';
+    /** Hide the label visually while keeping it accessible. */
+    hideLabel?: boolean;
+}
+/**
+ * Binary on/off toggle for instant-apply settings. Use Checkbox when the
+ * choice is part of a form that needs explicit submission.
+ *
+ * @example Instant toggle
+ *   <Switch label="Email digest" checked={on} onCheckedChange={setOn} />
+ *
+ * @example With description
+ *   <Switch label="Two-factor authentication"
+ *           description="Required for admins on production accounts."
+ *           checked={tfa}
+ *           onCheckedChange={setTfa} />
+ *
+ * @do Use Switch when the change takes effect immediately. Pair with
+ *      a toast confirming the new state.
+ * @dont Use Switch inside a form that requires submission — Checkbox
+ *       better matches that mental model.
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;