@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/skeleton.js

@@ -0,0 +1,46 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/skeleton.tsx
+/**
+* Skeleton — pulsing placeholder block that mirrors the shape of content still loading.
+*
+* A single div with an `animate-pulse` background; no internal shape logic.
+* All sizing/shape comes from
+* utility classes passed via `className` (e.g. `h-4 w-48`, `size-12 rounded-full`).
+*/
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Initial data fetch for a region whose layout is already known — lists, cards, tables — so the placeholder mirrors the real content shape.
+* - Composing multiple Skeletons together (e.g. an avatar circle plus two text lines) to approximate a specific card or row.
+*
+* NOT WHEN
+* - Action-level feedback on a button or small control — use Spinner instead.
+* - Loads short enough to flash (under ~300ms) — a flashing skeleton reads as a glitch, not loading.
+* - The final layout isn't known yet — an inaccurate placeholder is worse than a generic spinner.
+*
+* KEY RULES
+* - Skeleton has no default size — always pass explicit sizing via `className` (e.g. `h-4 w-48`, `size-12 rounded-full`) to match the real content.
+* - Shape should mirror the content it stands in for: circles for avatars, matching line-heights/widths for text.
+*
+* USAGE
+* <Skeleton className="h-4 w-48" />
+*
+* <div className="flex items-center gap-4">
+*   <Skeleton className="size-12 rounded-full" />
+*   <div className="grid flex-1 gap-2">
+*     <Skeleton className="h-4 w-full" />
+*     <Skeleton className="h-4 w-3/5" />
+*   </div>
+* </div>
+*/
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/ui/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["/**\n * Skeleton — pulsing placeholder block that mirrors the shape of content still loading.\n *\n * A single div with an `animate-pulse` background; no internal shape logic.\n * All sizing/shape comes from\n * utility classes passed via `className` (e.g. `h-4 w-48`, `size-12 rounded-full`).\n */\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n\n/**\n * WHEN TO USE\n * - Initial data fetch for a region whose layout is already known — lists, cards, tables — so the placeholder mirrors the real content shape.\n * - Composing multiple Skeletons together (e.g. an avatar circle plus two text lines) to approximate a specific card or row.\n *\n * NOT WHEN\n * - Action-level feedback on a button or small control — use Spinner instead.\n * - Loads short enough to flash (under ~300ms) — a flashing skeleton reads as a glitch, not loading.\n * - The final layout isn't known yet — an inaccurate placeholder is worse than a generic spinner.\n *\n * KEY RULES\n * - Skeleton has no default size — always pass explicit sizing via `className` (e.g. `h-4 w-48`, `size-12 rounded-full`) to match the real content.\n * - Shape should mirror the content it stands in for: circles for avatars, matching line-heights/widths for text.\n *\n * USAGE\n * <Skeleton className=\"h-4 w-48\" />\n *\n * <div className=\"flex items-center gap-4\">\n *   <Skeleton className=\"size-12 rounded-full\" />\n *   <div className=\"grid flex-1 gap-2\">\n *     <Skeleton className=\"h-4 w-full\" />\n *     <Skeleton className=\"h-4 w-3/5\" />\n *   </div>\n * </div>\n */\n"],"mappings":";;;;;;;;;;AAUA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/slider.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Slider — draggable thumb control for picking a value or span within bounds.
+ *
+ * Built on the Radix Slider primitive. Thumb count is derived from
+ * `value`/`defaultValue` length (one number = one thumb, two = a range).
+ */
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+declare function Slider({ className, defaultValue, value, min, max, disabled, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): React.JSX.Element;
+export { Slider };
+/**
+ * WHEN TO USE
+ * - Selecting a single value or a span within a bounded numeric range where approximate, visual input is acceptable (volume, price range, opacity).
+ * - `orientation="vertical"` for vertical layouts.
+ *
+ * NOT WHEN
+ * - Exact numeric entry matters — use Input type="number" instead.
+ * - The range is unbounded or unknown — Slider requires explicit `min`/`max` (default 0/100).
+ *
+ * KEY RULES
+ * - Thumb count is derived from `defaultValue`/`value` array length: one number = one thumb, two numbers = a range with two thumbs.
+ * - `step` quantizes the value (e.g. step={20} snaps to 0/20/40/60/80/100).
+ * - `min`/`max` default to 0/100 — pass explicit bounds for anything that isn't a percentage.
+ * - `disabled` dims the whole control automatically — no separate disabled styling needed.
+ * - Pass `aria-label`, not a paired `<Label htmlFor>` — the `id`/`htmlFor` association only
+ *   reaches SliderPrimitive.Root, which isn't the focusable element; the actual `role="slider"`
+ *   thumb(s) need a real name, so `aria-label` is applied straight to each Thumb instead (a range
+ *   slider's two thumbs get it suffixed "(min)"/"(max)" automatically).
+ *
+ * USAGE
+ * <Slider defaultValue={[50]} max={100} step={1} />
+ *
+ * // Range (two thumbs)
+ * <Slider defaultValue={[25, 75]} max={100} step={1} />
+ *
+ * // Vertical
+ * <Slider defaultValue={[50]} max={100} orientation="vertical" />
+ */
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAIpD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAyDnD;AAED,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG"}

package/dist/components/ui/slider.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Slider as Slider$1 } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/slider.tsx
+/**
+* Slider — draggable thumb control for picking a value or span within bounds.
+*
+* Built on the Radix Slider primitive. Thumb count is derived from
+* `value`/`defaultValue` length (one number = one thumb, two = a range).
+*/
+function Slider({ className, defaultValue, value, min = 0, max = 100, disabled, "aria-label": ariaLabel, ...props }) {
+	const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
+		value,
+		defaultValue,
+		min,
+		max
+	]);
+	return /* @__PURE__ */ jsxs(Slider$1.Root, {
+		"data-slot": "slider",
+		defaultValue,
+		value,
+		min,
+		max,
+		disabled,
+		className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Slider$1.Track, {
+			"data-slot": "slider-track",
+			className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+			children: /* @__PURE__ */ jsx(Slider$1.Range, {
+				"data-slot": "slider-range",
+				className: "absolute bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+			})
+		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+			"data-slot": "slider-thumb",
+			"aria-disabled": disabled || void 0,
+			"aria-label": _values.length > 1 ? `${ariaLabel ?? "Slider"} (${index === 0 ? "min" : "max"})` : ariaLabel ?? "Slider",
+			className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+		}, index))]
+	});
+}
+/**
+* WHEN TO USE
+* - Selecting a single value or a span within a bounded numeric range where approximate, visual input is acceptable (volume, price range, opacity).
+* - `orientation="vertical"` for vertical layouts.
+*
+* NOT WHEN
+* - Exact numeric entry matters — use Input type="number" instead.
+* - The range is unbounded or unknown — Slider requires explicit `min`/`max` (default 0/100).
+*
+* KEY RULES
+* - Thumb count is derived from `defaultValue`/`value` array length: one number = one thumb, two numbers = a range with two thumbs.
+* - `step` quantizes the value (e.g. step={20} snaps to 0/20/40/60/80/100).
+* - `min`/`max` default to 0/100 — pass explicit bounds for anything that isn't a percentage.
+* - `disabled` dims the whole control automatically — no separate disabled styling needed.
+* - Pass `aria-label`, not a paired `<Label htmlFor>` — the `id`/`htmlFor` association only
+*   reaches SliderPrimitive.Root, which isn't the focusable element; the actual `role="slider"`
+*   thumb(s) need a real name, so `aria-label` is applied straight to each Thumb instead (a range
+*   slider's two thumbs get it suffixed "(min)"/"(max)" automatically).
+*
+* USAGE
+* <Slider defaultValue={[50]} max={100} step={1} />
+*
+* // Range (two thumbs)
+* <Slider defaultValue={[25, 75]} max={100} step={1} />
+*
+* // Vertical
+* <Slider defaultValue={[50]} max={100} orientation="vertical" />
+*/
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/ui/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Slider — draggable thumb control for picking a value or span within bounds.\n *\n * Built on the Radix Slider primitive. Thumb count is derived from\n * `value`/`defaultValue` length (one number = one thumb, two = a range).\n */\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  disabled,\n  \"aria-label\": ariaLabel,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      disabled={disabled}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          // Radix only puts `aria-disabled` on the root track element, not\n          // on the `role=\"slider\"` thumb itself — browse/virtual-cursor\n          // screen-reader navigation reaches the thumb independent of tab\n          // order, so it needs its own disabled state, not just a removed\n          // `tabIndex`.\n          aria-disabled={disabled || undefined}\n          aria-label={\n            // Falls back to a generic name when the consumer forgets one —\n            // `role=\"slider\"` has no accessible name otherwise (4.1.2).\n            // Prefer passing a real one describing what the value controls.\n            _values.length > 1\n              ? `${ariaLabel ?? \"Slider\"} (${index === 0 ? \"min\" : \"max\"})`\n              : ariaLabel ?? \"Slider\"\n          }\n          className=\"relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n\n/**\n * WHEN TO USE\n * - Selecting a single value or a span within a bounded numeric range where approximate, visual input is acceptable (volume, price range, opacity).\n * - `orientation=\"vertical\"` for vertical layouts.\n *\n * NOT WHEN\n * - Exact numeric entry matters — use Input type=\"number\" instead.\n * - The range is unbounded or unknown — Slider requires explicit `min`/`max` (default 0/100).\n *\n * KEY RULES\n * - Thumb count is derived from `defaultValue`/`value` array length: one number = one thumb, two numbers = a range with two thumbs.\n * - `step` quantizes the value (e.g. step={20} snaps to 0/20/40/60/80/100).\n * - `min`/`max` default to 0/100 — pass explicit bounds for anything that isn't a percentage.\n * - `disabled` dims the whole control automatically — no separate disabled styling needed.\n * - Pass `aria-label`, not a paired `<Label htmlFor>` — the `id`/`htmlFor` association only\n *   reaches SliderPrimitive.Root, which isn't the focusable element; the actual `role=\"slider\"`\n *   thumb(s) need a real name, so `aria-label` is applied straight to each Thumb instead (a range\n *   slider's two thumbs get it suffixed \"(min)\"/\"(max)\" automatically).\n *\n * USAGE\n * <Slider defaultValue={[50]} max={100} step={1} />\n *\n * // Range (two thumbs)\n * <Slider defaultValue={[25, 75]} max={100} step={1} />\n *\n * // Vertical\n * <Slider defaultValue={[50]} max={100} orientation=\"vertical\" />\n */\n"],"mappings":";;;;;;;;;;;;AAcA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,GACN,MAAM,KACN,UACA,cAAc,WACd,GAAG,SACiD;CACpD,MAAM,UAAU,MAAM,cAElB,MAAM,QAAQ,KAAK,IACf,QACA,MAAM,QAAQ,YAAY,IACxB,eACA,CAAC,KAAK,GAAG,GACjB;EAAC;EAAO;EAAc;EAAK;CAAG,CAChC;CAEA,OACE,qBAAC,SAAgB,MAAjB;EACE,aAAU;EACI;EACP;EACF;EACA;EACK;EACV,WAAW,GACT,qOACA,SACF;EACA,GAAI;EAXN,UAAA,CAaE,oBAAC,SAAgB,OAAjB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,SAAgB,OAAjB;IACE,aAAU;IACV,WAAU;GACX,CAAA;EACoB,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,QAAQ,OAAO,IAAI,GAAG,UAC1C,oBAAC,SAAgB,OAAjB;GACE,aAAU;GAOV,iBAAe,YAAY,KAAA;GAC3B,cAIE,QAAQ,SAAS,IACb,GAAG,aAAa,SAAS,IAAI,UAAU,IAAI,QAAQ,MAAM,KACzD,aAAa;GAEnB,WAAU;EACX,GAhBM,KAgBN,CACF,CACmB;;AAE1B"}

package/dist/components/ui/sonner.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Toaster — host that renders transient toast notifications fired from anywhere in the app.
+ *
+ * Pre-wires the `sonner` library's `<Toaster />` with themed icons AND
+ * colors for success/info/warning/error — `richColors` plus a status-token
+ * override so each type gets MMDS's own success/info/warning/destructive
+ * bg-light/border/text triad instead of sonner's hardcoded default hues.
+ * `loading` stays neutral (`--normal-*`), matching the icon-only treatment.
+ * Mount `<Toaster />` once. Light/dark is resolved from the `dark` class on
+ * `<html>` (see `useIsDarkMode`) rather than via `next-themes`, so consumers
+ * aren't forced into a theme provider — pass `theme` explicitly to override.
+ */
+import { type ToasterProps } from "sonner";
+/**
+ * Theme is resolved from the `dark` class on `<html>` rather than from
+ * `next-themes`, so the design system doesn't drag
+ * a theme provider into every consumer. Pass `theme` explicitly to override —
+ * e.g. `theme={useTheme().resolvedTheme}` if you do use next-themes.
+ */
+declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
+export { Toaster };
+/**
+ * WHEN TO USE
+ * - Transient confirmations and background-operation results — saved, deleted, upload finished, deployment started.
+ * - Status updates that use the pre-wired semantic icons: success, info, warning, error, or loading.
+ * - A toast with an inline action (e.g. "Undo") via the `action` option.
+ *
+ * NOT WHEN
+ * - Information that must stay visible until resolved — use Alert instead.
+ * - Anything requiring the user to make a decision before continuing — use AlertDialog instead.
+ * - Form validation feedback — use Field + FieldError instead.
+ *
+ * KEY RULES
+ * - Requires `<Toaster />` mounted once at the app root; toasts are fired from anywhere via `import { toast } from "sonner"`, not by importing this file's `Toaster` directly.
+ * - Call `toast(message)`, or a variant: `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`, `toast.info(...)`, `toast.loading(...)` — each renders with its matching themed icon automatically.
+ * - Theme is derived from the `dark` class on `<html>`; pass `theme` explicitly only if that detection doesn't fit your app's theming setup.
+ *
+ * USAGE
+ * <Toaster />
+ * <Button onClick={() => toast("Deployment started")}>Show toast</Button>
+ *
+ * <Button onClick={() => toast.success("Build succeeded")}>Success</Button>
+ * <Button onClick={() => toast.error("Build failed")}>Error</Button>
+ *
+ * <Button
+ *   onClick={() =>
+ *     toast("Component deleted", {
+ *       description: "button.tsx was removed from the registry.",
+ *       action: { label: "Undo", onClick: () => toast("Restored") },
+ *     })
+ *   }
+ * >
+ *   Show toast with action
+ * </Button>
+ */
+//# sourceMappingURL=sonner.d.ts.map

package/dist/components/ui/sonner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sonner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAW7D;;;;;GAKG;AACH,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAqD1C,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG"}

package/dist/components/ui/sonner.js

@@ -0,0 +1,96 @@
+import { useIsDarkMode } from "../../hooks/use-dark-mode.js";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { Toaster as Toaster$1 } from "sonner";
+//#region src/components/ui/sonner.tsx
+/**
+* Toaster — host that renders transient toast notifications fired from anywhere in the app.
+*
+* Pre-wires the `sonner` library's `<Toaster />` with themed icons AND
+* colors for success/info/warning/error — `richColors` plus a status-token
+* override so each type gets MMDS's own success/info/warning/destructive
+* bg-light/border/text triad instead of sonner's hardcoded default hues.
+* `loading` stays neutral (`--normal-*`), matching the icon-only treatment.
+* Mount `<Toaster />` once. Light/dark is resolved from the `dark` class on
+* `<html>` (see `useIsDarkMode`) rather than via `next-themes`, so consumers
+* aren't forced into a theme provider — pass `theme` explicitly to override.
+*/
+/**
+* Theme is resolved from the `dark` class on `<html>` rather than from
+* `next-themes`, so the design system doesn't drag
+* a theme provider into every consumer. Pass `theme` explicitly to override —
+* e.g. `theme={useTheme().resolvedTheme}` if you do use next-themes.
+*/
+var Toaster = ({ ...props }) => {
+	const isDark = useIsDarkMode();
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		theme: isDark ? "dark" : "light",
+		className: "toaster group",
+		richColors: true,
+		icons: {
+			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+			info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+		},
+		style: {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)",
+			"--success-bg": "var(--color-success-light)",
+			"--success-border": "var(--color-success)",
+			"--success-text": "var(--color-success-text)",
+			"--info-bg": "var(--color-info-light)",
+			"--info-border": "var(--color-info)",
+			"--info-text": "var(--color-info-text)",
+			"--warning-bg": "var(--color-warning-light)",
+			"--warning-border": "var(--color-warning)",
+			"--warning-text": "var(--color-warning-text)",
+			"--error-bg": "var(--color-destructive-light)",
+			"--error-border": "var(--color-destructive)",
+			"--error-text": "var(--color-destructive-text)"
+		},
+		toastOptions: { classNames: { toast: "cn-toast" } },
+		...props
+	});
+};
+/**
+* WHEN TO USE
+* - Transient confirmations and background-operation results — saved, deleted, upload finished, deployment started.
+* - Status updates that use the pre-wired semantic icons: success, info, warning, error, or loading.
+* - A toast with an inline action (e.g. "Undo") via the `action` option.
+*
+* NOT WHEN
+* - Information that must stay visible until resolved — use Alert instead.
+* - Anything requiring the user to make a decision before continuing — use AlertDialog instead.
+* - Form validation feedback — use Field + FieldError instead.
+*
+* KEY RULES
+* - Requires `<Toaster />` mounted once at the app root; toasts are fired from anywhere via `import { toast } from "sonner"`, not by importing this file's `Toaster` directly.
+* - Call `toast(message)`, or a variant: `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`, `toast.info(...)`, `toast.loading(...)` — each renders with its matching themed icon automatically.
+* - Theme is derived from the `dark` class on `<html>`; pass `theme` explicitly only if that detection doesn't fit your app's theming setup.
+*
+* USAGE
+* <Toaster />
+* <Button onClick={() => toast("Deployment started")}>Show toast</Button>
+*
+* <Button onClick={() => toast.success("Build succeeded")}>Success</Button>
+* <Button onClick={() => toast.error("Build failed")}>Error</Button>
+*
+* <Button
+*   onClick={() =>
+*     toast("Component deleted", {
+*       description: "button.tsx was removed from the registry.",
+*       action: { label: "Undo", onClick: () => toast("Restored") },
+*     })
+*   }
+* >
+*   Show toast with action
+* </Button>
+*/
+//#endregion
+export { Toaster };
+
+//# sourceMappingURL=sonner.js.map

package/dist/components/ui/sonner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.js","names":[],"sources":["../../../src/components/ui/sonner.tsx"],"sourcesContent":["/**\n * Toaster — host that renders transient toast notifications fired from anywhere in the app.\n *\n * Pre-wires the `sonner` library's `<Toaster />` with themed icons AND\n * colors for success/info/warning/error — `richColors` plus a status-token\n * override so each type gets MMDS's own success/info/warning/destructive\n * bg-light/border/text triad instead of sonner's hardcoded default hues.\n * `loading` stays neutral (`--normal-*`), matching the icon-only treatment.\n * Mount `<Toaster />` once. Light/dark is resolved from the `dark` class on\n * `<html>` (see `useIsDarkMode`) rather than via `next-themes`, so consumers\n * aren't forced into a theme provider — pass `theme` explicitly to override.\n */\n\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  TriangleAlertIcon,\n  OctagonXIcon,\n  Loader2Icon,\n} from \"lucide-react\"\n\nimport { useIsDarkMode } from \"@/hooks/use-dark-mode\"\n\n/**\n * Theme is resolved from the `dark` class on `<html>` rather than from\n * `next-themes`, so the design system doesn't drag\n * a theme provider into every consumer. Pass `theme` explicitly to override —\n * e.g. `theme={useTheme().resolvedTheme}` if you do use next-themes.\n */\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const isDark = useIsDarkMode()\n\n  return (\n    <Sonner\n      theme={isDark ? \"dark\" : \"light\"}\n      className=\"toaster group\"\n      // Sonner only applies its per-type `--success-*`/`--error-*`/etc.\n      // variables (below) when `richColors` is on — otherwise every type\n      // falls back to `--normal-*` regardless of icon, and success/error/\n      // warning/info toasts render visually identical.\n      richColors\n      icons={{\n        success: <CircleCheckIcon className=\"size-4\" />,\n        info: <InfoIcon className=\"size-4\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" />,\n        error: <OctagonXIcon className=\"size-4\" />,\n        loading: <Loader2Icon className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n          // Same bg-light/border-base/text-text triad Badge's own\n          // outline+colored-icon status convention uses — overrides\n          // sonner's hardcoded default HSLs with MMDS's status tokens.\n          \"--success-bg\": \"var(--color-success-light)\",\n          \"--success-border\": \"var(--color-success)\",\n          \"--success-text\": \"var(--color-success-text)\",\n          \"--info-bg\": \"var(--color-info-light)\",\n          \"--info-border\": \"var(--color-info)\",\n          \"--info-text\": \"var(--color-info-text)\",\n          \"--warning-bg\": \"var(--color-warning-light)\",\n          \"--warning-border\": \"var(--color-warning)\",\n          \"--warning-text\": \"var(--color-warning-text)\",\n          // Sonner has no separate \"alert\" tier — its `error` type maps to\n          // MMDS's `destructive` family (tokens.md: \"Errors, destructive\n          // actions\"), the same mapping toast.error() implies semantically.\n          \"--error-bg\": \"var(--color-destructive-light)\",\n          \"--error-border\": \"var(--color-destructive)\",\n          \"--error-text\": \"var(--color-destructive-text)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n\n/**\n * WHEN TO USE\n * - Transient confirmations and background-operation results — saved, deleted, upload finished, deployment started.\n * - Status updates that use the pre-wired semantic icons: success, info, warning, error, or loading.\n * - A toast with an inline action (e.g. \"Undo\") via the `action` option.\n *\n * NOT WHEN\n * - Information that must stay visible until resolved — use Alert instead.\n * - Anything requiring the user to make a decision before continuing — use AlertDialog instead.\n * - Form validation feedback — use Field + FieldError instead.\n *\n * KEY RULES\n * - Requires `<Toaster />` mounted once at the app root; toasts are fired from anywhere via `import { toast } from \"sonner\"`, not by importing this file's `Toaster` directly.\n * - Call `toast(message)`, or a variant: `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`, `toast.info(...)`, `toast.loading(...)` — each renders with its matching themed icon automatically.\n * - Theme is derived from the `dark` class on `<html>`; pass `theme` explicitly only if that detection doesn't fit your app's theming setup.\n *\n * USAGE\n * <Toaster />\n * <Button onClick={() => toast(\"Deployment started\")}>Show toast</Button>\n *\n * <Button onClick={() => toast.success(\"Build succeeded\")}>Success</Button>\n * <Button onClick={() => toast.error(\"Build failed\")}>Error</Button>\n *\n * <Button\n *   onClick={() =>\n *     toast(\"Component deleted\", {\n *       description: \"button.tsx was removed from the registry.\",\n *       action: { label: \"Undo\", onClick: () => toast(\"Restored\") },\n *     })\n *   }\n * >\n *   Show toast with action\n * </Button>\n */\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,MAAM,SAAS,cAAc;CAE7B,OACE,oBAAC,WAAD;EACE,OAAO,SAAS,SAAS;EACzB,WAAU;EAKV,YAAA;EACA,OAAO;GACL,SAAS,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;GAC9C,MAAM,oBAAC,UAAD,EAAU,WAAU,SAAU,CAAA;GACpC,SAAS,oBAAC,mBAAD,EAAmB,WAAU,SAAU,CAAA;GAChD,OAAO,oBAAC,cAAD,EAAc,WAAU,SAAU,CAAA;GACzC,SAAS,oBAAC,aAAD,EAAa,WAAU,sBAAuB,CAAA;EACzD;EACA,OACE;GACE,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,mBAAmB;GAInB,gBAAgB;GAChB,oBAAoB;GACpB,kBAAkB;GAClB,aAAa;GACb,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,oBAAoB;GACpB,kBAAkB;GAIlB,cAAc;GACd,kBAAkB;GAClB,gBAAgB;EAClB;EAEF,cAAc,EACZ,YAAY,EACV,OAAO,WACT,EACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/spinner.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Spinner — small indeterminate loading indicator for inline/action-level feedback.
+ *
+ * A single `Loader2Icon` (lucide-react) with `animate-spin` applied; no
+ * wrapper element.
+ */
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
+export { Spinner };
+/**
+ * WHEN TO USE
+ * - Async feedback inside a button while an action is in flight (e.g. Saving, Loading) — pair with `disabled` on the button.
+ * - Small inline load indicators where the surrounding layout is already stable.
+ *
+ * NOT WHEN
+ * - Loading a whole region with a known layout — use Skeleton instead.
+ * - Progress is measurable — use Progress instead.
+ *
+ * KEY RULES
+ * - Size with utility classes (`size-3` … `size-8`); default is `size-4` if no size class is passed.
+ * - Color inherits `currentColor` — it takes on the text color of its container, no separate color prop.
+ * - Renders as a single `<svg>` with `role="status"` and `aria-label="Loading"` already applied — don't wrap it in another status/live-region element.
+ *
+ * USAGE
+ * <Spinner />
+ *
+ * <div className="flex items-center gap-4">
+ *   <Spinner className="size-3" />
+ *   <Spinner className="size-6" />
+ *   <Spinner className="size-8" />
+ * </div>
+ *
+ * <Button disabled>
+ *   <Spinner />
+ *   Saving
+ * </Button>
+ */
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/ui/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/spinner.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAUpE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG"}

package/dist/components/ui/spinner.js

@@ -0,0 +1,51 @@
+import { cn } from "../../lib/utils.js";
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/spinner.tsx
+/**
+* Spinner — small indeterminate loading indicator for inline/action-level feedback.
+*
+* A single `Loader2Icon` (lucide-react) with `animate-spin` applied; no
+* wrapper element.
+*/
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Async feedback inside a button while an action is in flight (e.g. Saving, Loading) — pair with `disabled` on the button.
+* - Small inline load indicators where the surrounding layout is already stable.
+*
+* NOT WHEN
+* - Loading a whole region with a known layout — use Skeleton instead.
+* - Progress is measurable — use Progress instead.
+*
+* KEY RULES
+* - Size with utility classes (`size-3` … `size-8`); default is `size-4` if no size class is passed.
+* - Color inherits `currentColor` — it takes on the text color of its container, no separate color prop.
+* - Renders as a single `<svg>` with `role="status"` and `aria-label="Loading"` already applied — don't wrap it in another status/live-region element.
+*
+* USAGE
+* <Spinner />
+*
+* <div className="flex items-center gap-4">
+*   <Spinner className="size-3" />
+*   <Spinner className="size-6" />
+*   <Spinner className="size-8" />
+* </div>
+*
+* <Button disabled>
+*   <Spinner />
+*   Saving
+* </Button>
+*/
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["/**\n * Spinner — small indeterminate loading indicator for inline/action-level feedback.\n *\n * A single `Loader2Icon` (lucide-react) with `animate-spin` applied; no\n * wrapper element.\n */\n\nimport { cn } from \"@/lib/utils\"\nimport { Loader2Icon } from \"lucide-react\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Loader2Icon\n      data-slot=\"spinner\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n\n/**\n * WHEN TO USE\n * - Async feedback inside a button while an action is in flight (e.g. Saving, Loading) — pair with `disabled` on the button.\n * - Small inline load indicators where the surrounding layout is already stable.\n *\n * NOT WHEN\n * - Loading a whole region with a known layout — use Skeleton instead.\n * - Progress is measurable — use Progress instead.\n *\n * KEY RULES\n * - Size with utility classes (`size-3` … `size-8`); default is `size-4` if no size class is passed.\n * - Color inherits `currentColor` — it takes on the text color of its container, no separate color prop.\n * - Renders as a single `<svg>` with `role=\"status\"` and `aria-label=\"Loading\"` already applied — don't wrap it in another status/live-region element.\n *\n * USAGE\n * <Spinner />\n *\n * <div className=\"flex items-center gap-4\">\n *   <Spinner className=\"size-3\" />\n *   <Spinner className=\"size-6\" />\n *   <Spinner className=\"size-8\" />\n * </div>\n *\n * <Button disabled>\n *   <Spinner />\n *   Saving\n * </Button>\n */\n"],"mappings":";;;;;;;;;;AAUA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,oBAAC,aAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/stepper.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Stepper — a horizontal sequence of named steps with pending/done state.
+ *
+ * A thin composite over Tabs, not a new primitive: `StepperList`/
+ * `StepperTrigger`/`StepperContent` are Tabs' own List/Trigger/Content,
+ * restyled — the same Radix Tabs keyboard/roving-focus/panel behavior
+ * applies unchanged. `StepperTrigger` adds one thing Tabs doesn't have: a
+ * leading step-circle icon (empty for pending, checked for done), using the
+ * same `data-icon="inline-start"` slot convention as Tabs' own icon support
+ * (see Tabs' "With icons" story) — not a new icon prop shape.
+ */
+import * as React from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../components/ui/tabs";
+declare function Stepper({ children, ...props }: React.ComponentProps<typeof Tabs>): React.JSX.Element;
+declare function StepperList({ ...props }: React.ComponentProps<typeof TabsList>): React.JSX.Element;
+declare function StepperTrigger({ status, className, children, ...props }: React.ComponentProps<typeof TabsTrigger> & {
+    /** "pending" (empty circle, default) | "done" (filled circle with a check) — independent of whether this step is the currently active one, which Tabs' own active styling already communicates. */
+    status?: "pending" | "done";
+}): React.JSX.Element;
+declare function StepperContent({ ...props }: React.ComponentProps<typeof TabsContent>): React.JSX.Element;
+export { Stepper, StepperList, StepperTrigger, StepperContent };
+/**
+ * WHEN TO USE
+ * - A short, ordered sequence of named steps the user moves through, where
+ *   each step's completion state matters — account setup, a multi-part
+ *   form's section nav, an order/shipment progress row.
+ *
+ * NOT WHEN
+ * - The steps are actually a full one-question-at-a-time form flow with its
+ *   own Previous/Next/Submit navigation — use Questionnaire, which has that
+ *   built in (its `QuestionnaireProgress` is a plain text label, not this).
+ * - The panels are unrelated views with no inherent order or completion
+ *   state — use plain Tabs.
+ * - Showing hierarchical position, not sequence — use Breadcrumb.
+ *
+ * KEY RULES
+ * - It's Tabs underneath: same `value`/`defaultValue`/`onValueChange` on
+ *   Stepper, same `variant`/`size` on StepperList, same `disabled` per
+ *   trigger, same `orientation="vertical"` for a side-by-side layout.
+ * - `status` on StepperTrigger ("pending" default | "done") is independent
+ *   of which step is currently active: a step can be active-and-pending
+ *   (viewing unfinished work) or inactive-and-done (already completed, user
+ *   has since moved on). A pending circle's outline is `border-current`, so
+ *   it automatically tracks whatever color TabsTrigger's own hover/active
+ *   rules put on the trigger's text — muted normally, primary when it's the
+ *   active step, primary-hover on hover — the same currentColor mechanism a
+ *   plain lucide icon in Tabs already gets for free, not extra state here.
+ *   A "done" circle stays a fixed filled primary regardless of hover/active,
+ *   since completion should read as stable, not reactive to the pointer.
+ * - Tracking which steps are "done" is the consumer's own state — Stepper
+ *   doesn't infer completion from navigation; nothing marks a step done
+ *   just because the user moved past it.
+ * - A step transitioning to `status="done"` is announced via a shared sr-only live region on
+ *   Stepper itself (not just the trigger's own `, done` text) — the common "finish step N, focus
+ *   moves to N+1, step N flips to done behind you" flow still reaches screen-reader users.
+ * - No connector line between circles — this is triggers-in-a-row, same
+ *   visual weight as Tabs. Compose one in yourself (an absolutely
+ *   positioned `border-t` between items) if a specific design calls for it.
+ *
+ * USAGE
+ * <Stepper defaultValue="account">
+ *   <StepperList>
+ *     <StepperTrigger value="account" status="done">Account</StepperTrigger>
+ *     <StepperTrigger value="profile" status="pending">Profile</StepperTrigger>
+ *     <StepperTrigger value="review" status="pending">Review</StepperTrigger>
+ *   </StepperList>
+ *   <StepperContent value="account">...</StepperContent>
+ *   <StepperContent value="profile">...</StepperContent>
+ *   <StepperContent value="review">...</StepperContent>
+ * </Stepper>
+ *
+ * // Vertical — StepperList stacks in a column, StepperContent sits beside
+ * // it, exactly like Tabs' own orientation="vertical" (no Stepper-specific
+ * // layout code involved).
+ * <Stepper defaultValue="account" orientation="vertical" className="flex-row gap-6">
+ *   <StepperList className="flex-col">
+ *     <StepperTrigger value="account" status="done">Account</StepperTrigger>
+ *     <StepperTrigger value="profile" status="pending">Profile</StepperTrigger>
+ *   </StepperList>
+ *   <StepperContent value="account">...</StepperContent>
+ *   <StepperContent value="profile">...</StepperContent>
+ * </Stepper>
+ */
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/ui/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stepper.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAW/E,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,qBAYzE;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAEvE;AAED,iBAAS,cAAc,CAAC,EACtB,MAAkB,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC5C,mMAAmM;IACnM,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC5B,qBAuCA;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,qBAE7E;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG"}