@viax.io/uxm 4.36.0

package/dist/ui/toast/toast.d.ts

@@ -0,0 +1,38 @@
+import type { ToastAction } from '../../hooks/use-toast-store.js';
+import type { HTMLAttributes } from 'react';
+export type ToastVariant = 'success' | 'info' | 'warning' | 'error';
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: ToastVariant;
+    message: string;
+    /**
+     * Inline action affordance — single button rendered between the
+     * message and the dismiss X. Styled as an underlined link in the
+     * variant's accent color. Clicking fires `action.onClick` AND
+     * dismisses the toast (so the consumer doesn't need to track
+     * post-action state).
+     */
+    action?: ToastAction;
+    /**
+     * Renders a close affordance (X icon). Toasts are dismissable by
+     * design — when called via the `toast.*` API, Toaster always wires
+     * this up. Direct `<Toast>` consumers can opt out by omitting the
+     * handler, but transient corner notifications should almost always
+     * be dismissable.
+     */
+    onDismiss?: () => void;
+    /** Accessible label for the close affordance. Default `"Dismiss"`. */
+    dismissLabel?: string;
+}
+/**
+ * Toast — compact transient notification rendered inside `<Toaster />`
+ * in a screen corner. Neutral surface (theme-aware: white card in
+ * light, raised-dark in dark) with a colored left-edge accent + icon
+ * communicating the variant. Optional inline action button between
+ * the message and the dismiss X.
+ *
+ * Used internally by `Toaster` when consumers fire `toast.success("…")`.
+ * Direct JSX use (`<Toast variant="success" message="…" />`) is supported
+ * but rare — the imperative API is the primary entry point.
+ */
+export declare function Toast({ variant, message, action, onDismiss, dismissLabel, className, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toast.d.ts.map

package/dist/ui/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/ui/toast/toast.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAwB,EACxB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,2CA2CZ"}

package/dist/ui/toast/toast.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/cn.js";
+import { Icon } from "../icon/index.js";
+const VARIANT_GLYPH = {
+  success: "check-circle",
+  info: "info",
+  warning: "exclamation-triangle",
+  error: "exclamation-circle"
+};
+function Toast({
+  variant = "info",
+  message,
+  action,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn("uxm-toast", `uxm-toast--${variant}`, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uxm-toast__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: VARIANT_GLYPH[variant], size: 16, strokeWidth: 1.8 }) }),
+        /* @__PURE__ */ jsx("span", { className: "uxm-toast__message", children: message }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "uxm-toast__action",
+            onClick: () => {
+              action.onClick();
+              onDismiss?.();
+            },
+            children: action.label
+          }
+        ),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "uxm-toast__close",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 16, strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Toast
+};
+//# sourceMappingURL=toast.js.map

package/dist/ui/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toast/toast.tsx"],"sourcesContent":["import { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\n\nimport type { ToastAction } from '../../hooks/use-toast-store';\nimport type { HTMLAttributes } from 'react';\n\nexport type ToastVariant = 'success' | 'info' | 'warning' | 'error';\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: ToastVariant;\n  message: string;\n  /**\n   * Inline action affordance — single button rendered between the\n   * message and the dismiss X. Styled as an underlined link in the\n   * variant's accent color. Clicking fires `action.onClick` AND\n   * dismisses the toast (so the consumer doesn't need to track\n   * post-action state).\n   */\n  action?: ToastAction;\n  /**\n   * Renders a close affordance (X icon). Toasts are dismissable by\n   * design — when called via the `toast.*` API, Toaster always wires\n   * this up. Direct `<Toast>` consumers can opt out by omitting the\n   * handler, but transient corner notifications should almost always\n   * be dismissable.\n   */\n  onDismiss?: () => void;\n  /** Accessible label for the close affordance. Default `\"Dismiss\"`. */\n  dismissLabel?: string;\n}\n\n// Same glyph vocabulary as Banner for consistency — green check = success\n// everywhere in the DS, info-circle = info, etc.\nconst VARIANT_GLYPH: Record<ToastVariant, string> = {\n  success: 'check-circle',\n  info: 'info',\n  warning: 'exclamation-triangle',\n  error: 'exclamation-circle',\n};\n\n/**\n * Toast — compact transient notification rendered inside `<Toaster />`\n * in a screen corner. Neutral surface (theme-aware: white card in\n * light, raised-dark in dark) with a colored left-edge accent + icon\n * communicating the variant. Optional inline action button between\n * the message and the dismiss X.\n *\n * Used internally by `Toaster` when consumers fire `toast.success(\"…\")`.\n * Direct JSX use (`<Toast variant=\"success\" message=\"…\" />`) is supported\n * but rare — the imperative API is the primary entry point.\n */\nexport function Toast({\n  variant = 'info',\n  message,\n  action,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  ...rest\n}: ToastProps) {\n  return (\n    <div\n      // role=\"status\" + the Toaster's aria-live=\"polite\" container\n      // means screen readers announce each toast politely on arrival\n      // without interrupting the current utterance. role=\"alert\" would\n      // be assertive — too disruptive for transient feedback.\n      role=\"status\"\n      className={cn('uxm-toast', `uxm-toast--${variant}`, className)}\n      {...rest}\n    >\n      <span className=\"uxm-toast__icon\" aria-hidden=\"true\">\n        <Icon glyph={VARIANT_GLYPH[variant]} size={16} strokeWidth={1.8} />\n      </span>\n      <span className=\"uxm-toast__message\">{message}</span>\n      {action && (\n        <button\n          type=\"button\"\n          className=\"uxm-toast__action\"\n          onClick={() => {\n            action.onClick();\n            // Auto-dismiss on action click — user took the action, no\n            // reason to keep the toast around. If the consumer wants\n            // to keep showing something afterward they can fire a\n            // new toast from their handler.\n            onDismiss?.();\n          }}\n        >\n          {action.label}\n        </button>\n      )}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          className=\"uxm-toast__close\"\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n        >\n          <Icon glyph=\"close\" size={16} strokeWidth={2} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA6DI,SAUI,KAVJ;AA7DJ,SAAS,UAAU;AACnB,SAAS,YAAY;AAgCrB,MAAM,gBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAaO,SAAS,MAAM;AAAA,EACpB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MAKC,MAAK;AAAA,MACL,WAAW,GAAG,aAAa,cAAc,OAAO,IAAI,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,mBAAkB,eAAY,QAC5C,8BAAC,QAAK,OAAO,cAAc,OAAO,GAAG,MAAM,IAAI,aAAa,KAAK,GACnE;AAAA,QACA,oBAAC,UAAK,WAAU,sBAAsB,mBAAQ;AAAA,QAC7C,UACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM;AACb,qBAAO,QAAQ;AAKf,0BAAY;AAAA,YACd;AAAA,YAEC,iBAAO;AAAA;AAAA,QACV;AAAA,QAED,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,SAAS;AAAA,YAET,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/toast/toaster.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toaster_exports = {};
+__export(toaster_exports, {
+  Toaster: () => Toaster,
+  toast: () => toast
+});
+module.exports = __toCommonJS(toaster_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_cn = require("../../helpers/cn.cjs");
+var import_use_portal = require("../../hooks/use-portal.cjs");
+var import_use_toast_store = require("../../hooks/use-toast-store.cjs");
+var import_toast = require("./toast.cjs");
+function Toaster({ position = "top-right", max = 5 }) {
+  const mounted = (0, import_use_portal.usePortal)();
+  const toasts = (0, import_use_toast_store.useToastStore)();
+  (0, import_react.useEffect)(() => {
+    if (toasts.length > max) import_use_toast_store.toastStore.trim(max);
+  }, [toasts.length, max]);
+  if (!mounted) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_cn.cn)(
+          "uxm-toast-container",
+          `uxm-toast-container--${position}`
+        ),
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastItemView, { toast: t }, t.id))
+      }
+    ),
+    document.body
+  );
+}
+function ToastItemView({ toast: t }) {
+  (0, import_react.useEffect)(() => {
+    if (!Number.isFinite(t.duration)) return;
+    const handle = window.setTimeout(() => {
+      import_use_toast_store.toastStore.dismiss(t.id);
+    }, t.duration);
+    return () => window.clearTimeout(handle);
+  }, [t.id, t.duration]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_toast.Toast,
+    {
+      variant: t.variant,
+      message: t.message,
+      action: t.action,
+      onDismiss: () => import_use_toast_store.toastStore.dismiss(t.id)
+    }
+  );
+}
+const toast = {
+  success: (message, options) => import_use_toast_store.toastStore.add("success", message, options),
+  info: (message, options) => import_use_toast_store.toastStore.add("info", message, options),
+  warning: (message, options) => import_use_toast_store.toastStore.add("warning", message, options),
+  error: (message, options) => import_use_toast_store.toastStore.add("error", message, options),
+  /** Remove a specific toast by id (returned from any of the above). */
+  dismiss: (id) => import_use_toast_store.toastStore.dismiss(id),
+  /** Remove every toast at once. */
+  clear: () => import_use_toast_store.toastStore.clear()
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toaster,
+  toast
+});
+//# sourceMappingURL=toaster.cjs.map

package/dist/ui/toast/toaster.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toast/toaster.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../helpers/cn';\nimport { usePortal } from '../../hooks/use-portal';\nimport {\n  toastStore,\n  useToastStore,\n  type ToastItem,\n  type ToastOptions,\n} from '../../hooks/use-toast-store';\n\nimport { Toast } from './toast';\n\nexport type ToastPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-center'\n  | 'bottom-center';\n\nexport interface ToasterProps {\n  /** Where the toast stack sits. Default `\"top-right\"`. */\n  position?: ToastPosition;\n  /** Maximum concurrent toasts. Oldest drops when exceeded. Default `5`. */\n  max?: number;\n}\n\n/**\n * Toaster — provides the floating-notification mechanics (portal, queue,\n * per-item timer, position). No visual chrome of its own; renders each\n * toast as a `<Toast>` atom.\n *\n * Mount once at the app root (typically inside `<body>` in the root\n * layout). The imperative API exported from this file (`toast.*`) pushes\n * into the same store this component reads from — no React context\n * required.\n *\n * Mirrors Dialog: this component owns the mechanics (portal, position,\n * timing, queue); the rendered child (`Toast`) owns the look.\n */\nexport function Toaster({ position = 'top-right', max = 5 }: ToasterProps) {\n  const mounted = usePortal();\n  const toasts = useToastStore();\n\n  // Trim to max when new toasts arrive — drops the OLDEST entries\n  // (which are at the end of the array; newest are prepended). Done\n  // here rather than in `add()` so `max` is a Toaster-mount concern,\n  // not store-config.\n  useEffect(() => {\n    if (toasts.length > max) toastStore.trim(max);\n  }, [toasts.length, max]);\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <div\n      className={cn(\n        'uxm-toast-container',\n        `uxm-toast-container--${position}`,\n      )}\n      // Live-region announcement for screen readers. `polite` means the\n      // SR finishes the current utterance before announcing — toasts\n      // don't interrupt. `role=\"status\"` per-Toast provides redundancy\n      // across SR implementations.\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n    >\n      {toasts.map((t) => (\n        <ToastItemView key={t.id} toast={t} />\n      ))}\n    </div>,\n    document.body,\n  );\n}\n\nfunction ToastItemView({ toast: t }: { toast: ToastItem }) {\n  // Auto-dismiss timer. `Infinity` opts out (persistent toast — caller\n  // must dismiss programmatically or the user must click the X).\n  useEffect(() => {\n    if (!Number.isFinite(t.duration)) return;\n    const handle = window.setTimeout(() => {\n      toastStore.dismiss(t.id);\n    }, t.duration);\n    return () => window.clearTimeout(handle);\n  }, [t.id, t.duration]);\n\n  return (\n    <Toast\n      variant={t.variant}\n      message={t.message}\n      action={t.action}\n      onDismiss={() => toastStore.dismiss(t.id)}\n    />\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Imperative API\n//\n//  Co-located with the Toaster component because they're two halves of\n//  one feature — splitting them into separate files (the old\n//  lib/toast.ts layout) added friction with no benefit. Same shape\n//  sonner uses.\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Imperative toast API. Call from anywhere — buttons, async handlers,\n * effects, network callbacks. No React context required; the call\n * pushes into the shared module-level store that `<Toaster />`\n * subscribes to.\n *\n *   toast.success(\"Saved\")\n *   toast.error(\"Network error\", { duration: 6000 })\n *   const id = toast.info(\"Uploading…\", { duration: Infinity })\n *   // …later…\n *   toast.dismiss(id)\n *\n * The four variants mirror `ToastVariant` (declared on the `<Toast>` atom).\n */\nexport const toast = {\n  success: (message: string, options?: ToastOptions) =>\n    toastStore.add('success', message, options),\n  info: (message: string, options?: ToastOptions) =>\n    toastStore.add('info', message, options),\n  warning: (message: string, options?: ToastOptions) =>\n    toastStore.add('warning', message, options),\n  error: (message: string, options?: ToastOptions) =>\n    toastStore.add('error', message, options),\n  /** Remove a specific toast by id (returned from any of the above). */\n  dismiss: (id: string) => toastStore.dismiss(id),\n  /** Remove every toast at once. */\n  clear: () => toastStore.clear(),\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEQ;AAtER,mBAA0B;AAC1B,uBAA6B;AAE7B,gBAAmB;AACnB,wBAA0B;AAC1B,6BAKO;AAEP,mBAAsB;AA8Bf,SAAS,QAAQ,EAAE,WAAW,aAAa,MAAM,EAAE,GAAiB;AACzE,QAAM,cAAU,6BAAU;AAC1B,QAAM,aAAS,sCAAc;AAM7B,8BAAU,MAAM;AACd,QAAI,OAAO,SAAS,IAAK,mCAAW,KAAK,GAAG;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,GAAG,CAAC;AAEvB,MAAI,CAAC,QAAS,QAAO;AAErB,aAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,wBAAwB,QAAQ;AAAA,QAClC;AAAA,QAKA,aAAU;AAAA,QACV,eAAY;AAAA,QAEX,iBAAO,IAAI,CAAC,MACX,4CAAC,iBAAyB,OAAO,KAAb,EAAE,EAAc,CACrC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAEA,SAAS,cAAc,EAAE,OAAO,EAAE,GAAyB;AAGzD,8BAAU,MAAM;AACd,QAAI,CAAC,OAAO,SAAS,EAAE,QAAQ,EAAG;AAClC,UAAM,SAAS,OAAO,WAAW,MAAM;AACrC,wCAAW,QAAQ,EAAE,EAAE;AAAA,IACzB,GAAG,EAAE,QAAQ;AACb,WAAO,MAAM,OAAO,aAAa,MAAM;AAAA,EACzC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,EAAE;AAAA,MACX,SAAS,EAAE;AAAA,MACX,QAAQ,EAAE;AAAA,MACV,WAAW,MAAM,kCAAW,QAAQ,EAAE,EAAE;AAAA;AAAA,EAC1C;AAEJ;AAyBO,MAAM,QAAQ;AAAA,EACnB,SAAS,CAAC,SAAiB,YACzB,kCAAW,IAAI,WAAW,SAAS,OAAO;AAAA,EAC5C,MAAM,CAAC,SAAiB,YACtB,kCAAW,IAAI,QAAQ,SAAS,OAAO;AAAA,EACzC,SAAS,CAAC,SAAiB,YACzB,kCAAW,IAAI,WAAW,SAAS,OAAO;AAAA,EAC5C,OAAO,CAAC,SAAiB,YACvB,kCAAW,IAAI,SAAS,SAAS,OAAO;AAAA;AAAA,EAE1C,SAAS,CAAC,OAAe,kCAAW,QAAQ,EAAE;AAAA;AAAA,EAE9C,OAAO,MAAM,kCAAW,MAAM;AAChC;","names":[]}

package/dist/ui/toast/toaster.d.ts

@@ -0,0 +1,47 @@
+import { type ToastOptions } from '../../hooks/use-toast-store.js';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+export interface ToasterProps {
+    /** Where the toast stack sits. Default `"top-right"`. */
+    position?: ToastPosition;
+    /** Maximum concurrent toasts. Oldest drops when exceeded. Default `5`. */
+    max?: number;
+}
+/**
+ * Toaster — provides the floating-notification mechanics (portal, queue,
+ * per-item timer, position). No visual chrome of its own; renders each
+ * toast as a `<Toast>` atom.
+ *
+ * Mount once at the app root (typically inside `<body>` in the root
+ * layout). The imperative API exported from this file (`toast.*`) pushes
+ * into the same store this component reads from — no React context
+ * required.
+ *
+ * Mirrors Dialog: this component owns the mechanics (portal, position,
+ * timing, queue); the rendered child (`Toast`) owns the look.
+ */
+export declare function Toaster({ position, max }: ToasterProps): import("react").ReactPortal | null;
+/**
+ * Imperative toast API. Call from anywhere — buttons, async handlers,
+ * effects, network callbacks. No React context required; the call
+ * pushes into the shared module-level store that `<Toaster />`
+ * subscribes to.
+ *
+ *   toast.success("Saved")
+ *   toast.error("Network error", { duration: 6000 })
+ *   const id = toast.info("Uploading…", { duration: Infinity })
+ *   // …later…
+ *   toast.dismiss(id)
+ *
+ * The four variants mirror `ToastVariant` (declared on the `<Toast>` atom).
+ */
+export declare const toast: {
+    success: (message: string, options?: ToastOptions) => string;
+    info: (message: string, options?: ToastOptions) => string;
+    warning: (message: string, options?: ToastOptions) => string;
+    error: (message: string, options?: ToastOptions) => string;
+    /** Remove a specific toast by id (returned from any of the above). */
+    dismiss: (id: string) => void;
+    /** Remove every toast at once. */
+    clear: () => void;
+};
+//# sourceMappingURL=toaster.d.ts.map

package/dist/ui/toast/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/ui/toast/toaster.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAIrC,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;AAEpB,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAsB,EAAE,GAAO,EAAE,EAAE,YAAY,sCAiCxE;AAgCD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK;uBACG,MAAM,YAAY,YAAY;oBAEjC,MAAM,YAAY,YAAY;uBAE3B,MAAM,YAAY,YAAY;qBAEhC,MAAM,YAAY,YAAY;IAE/C,sEAAsE;kBACxD,MAAM;IACpB,kCAAkC;;CAEnC,CAAC"}

package/dist/ui/toast/toaster.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../helpers/cn.js";
+import { usePortal } from "../../hooks/use-portal.js";
+import {
+  toastStore,
+  useToastStore
+} from "../../hooks/use-toast-store.js";
+import { Toast } from "./toast.js";
+function Toaster({ position = "top-right", max = 5 }) {
+  const mounted = usePortal();
+  const toasts = useToastStore();
+  useEffect(() => {
+    if (toasts.length > max) toastStore.trim(max);
+  }, [toasts.length, max]);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "uxm-toast-container",
+          `uxm-toast-container--${position}`
+        ),
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItemView, { toast: t }, t.id))
+      }
+    ),
+    document.body
+  );
+}
+function ToastItemView({ toast: t }) {
+  useEffect(() => {
+    if (!Number.isFinite(t.duration)) return;
+    const handle = window.setTimeout(() => {
+      toastStore.dismiss(t.id);
+    }, t.duration);
+    return () => window.clearTimeout(handle);
+  }, [t.id, t.duration]);
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      variant: t.variant,
+      message: t.message,
+      action: t.action,
+      onDismiss: () => toastStore.dismiss(t.id)
+    }
+  );
+}
+const toast = {
+  success: (message, options) => toastStore.add("success", message, options),
+  info: (message, options) => toastStore.add("info", message, options),
+  warning: (message, options) => toastStore.add("warning", message, options),
+  error: (message, options) => toastStore.add("error", message, options),
+  /** Remove a specific toast by id (returned from any of the above). */
+  dismiss: (id) => toastStore.dismiss(id),
+  /** Remove every toast at once. */
+  clear: () => toastStore.clear()
+};
+export {
+  Toaster,
+  toast
+};
+//# sourceMappingURL=toaster.js.map

package/dist/ui/toast/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toast/toaster.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../helpers/cn';\nimport { usePortal } from '../../hooks/use-portal';\nimport {\n  toastStore,\n  useToastStore,\n  type ToastItem,\n  type ToastOptions,\n} from '../../hooks/use-toast-store';\n\nimport { Toast } from './toast';\n\nexport type ToastPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-center'\n  | 'bottom-center';\n\nexport interface ToasterProps {\n  /** Where the toast stack sits. Default `\"top-right\"`. */\n  position?: ToastPosition;\n  /** Maximum concurrent toasts. Oldest drops when exceeded. Default `5`. */\n  max?: number;\n}\n\n/**\n * Toaster — provides the floating-notification mechanics (portal, queue,\n * per-item timer, position). No visual chrome of its own; renders each\n * toast as a `<Toast>` atom.\n *\n * Mount once at the app root (typically inside `<body>` in the root\n * layout). The imperative API exported from this file (`toast.*`) pushes\n * into the same store this component reads from — no React context\n * required.\n *\n * Mirrors Dialog: this component owns the mechanics (portal, position,\n * timing, queue); the rendered child (`Toast`) owns the look.\n */\nexport function Toaster({ position = 'top-right', max = 5 }: ToasterProps) {\n  const mounted = usePortal();\n  const toasts = useToastStore();\n\n  // Trim to max when new toasts arrive — drops the OLDEST entries\n  // (which are at the end of the array; newest are prepended). Done\n  // here rather than in `add()` so `max` is a Toaster-mount concern,\n  // not store-config.\n  useEffect(() => {\n    if (toasts.length > max) toastStore.trim(max);\n  }, [toasts.length, max]);\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <div\n      className={cn(\n        'uxm-toast-container',\n        `uxm-toast-container--${position}`,\n      )}\n      // Live-region announcement for screen readers. `polite` means the\n      // SR finishes the current utterance before announcing — toasts\n      // don't interrupt. `role=\"status\"` per-Toast provides redundancy\n      // across SR implementations.\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n    >\n      {toasts.map((t) => (\n        <ToastItemView key={t.id} toast={t} />\n      ))}\n    </div>,\n    document.body,\n  );\n}\n\nfunction ToastItemView({ toast: t }: { toast: ToastItem }) {\n  // Auto-dismiss timer. `Infinity` opts out (persistent toast — caller\n  // must dismiss programmatically or the user must click the X).\n  useEffect(() => {\n    if (!Number.isFinite(t.duration)) return;\n    const handle = window.setTimeout(() => {\n      toastStore.dismiss(t.id);\n    }, t.duration);\n    return () => window.clearTimeout(handle);\n  }, [t.id, t.duration]);\n\n  return (\n    <Toast\n      variant={t.variant}\n      message={t.message}\n      action={t.action}\n      onDismiss={() => toastStore.dismiss(t.id)}\n    />\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Imperative API\n//\n//  Co-located with the Toaster component because they're two halves of\n//  one feature — splitting them into separate files (the old\n//  lib/toast.ts layout) added friction with no benefit. Same shape\n//  sonner uses.\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Imperative toast API. Call from anywhere — buttons, async handlers,\n * effects, network callbacks. No React context required; the call\n * pushes into the shared module-level store that `<Toaster />`\n * subscribes to.\n *\n *   toast.success(\"Saved\")\n *   toast.error(\"Network error\", { duration: 6000 })\n *   const id = toast.info(\"Uploading…\", { duration: Infinity })\n *   // …later…\n *   toast.dismiss(id)\n *\n * The four variants mirror `ToastVariant` (declared on the `<Toast>` atom).\n */\nexport const toast = {\n  success: (message: string, options?: ToastOptions) =>\n    toastStore.add('success', message, options),\n  info: (message: string, options?: ToastOptions) =>\n    toastStore.add('info', message, options),\n  warning: (message: string, options?: ToastOptions) =>\n    toastStore.add('warning', message, options),\n  error: (message: string, options?: ToastOptions) =>\n    toastStore.add('error', message, options),\n  /** Remove a specific toast by id (returned from any of the above). */\n  dismiss: (id: string) => toastStore.dismiss(id),\n  /** Remove every toast at once. */\n  clear: () => toastStore.clear(),\n};\n"],"mappings":"AAsEQ;AAtER,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,aAAa;AA8Bf,SAAS,QAAQ,EAAE,WAAW,aAAa,MAAM,EAAE,GAAiB;AACzE,QAAM,UAAU,UAAU;AAC1B,QAAM,SAAS,cAAc;AAM7B,YAAU,MAAM;AACd,QAAI,OAAO,SAAS,IAAK,YAAW,KAAK,GAAG;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,GAAG,CAAC;AAEvB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,wBAAwB,QAAQ;AAAA,QAClC;AAAA,QAKA,aAAU;AAAA,QACV,eAAY;AAAA,QAEX,iBAAO,IAAI,CAAC,MACX,oBAAC,iBAAyB,OAAO,KAAb,EAAE,EAAc,CACrC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAEA,SAAS,cAAc,EAAE,OAAO,EAAE,GAAyB;AAGzD,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,SAAS,EAAE,QAAQ,EAAG;AAClC,UAAM,SAAS,OAAO,WAAW,MAAM;AACrC,iBAAW,QAAQ,EAAE,EAAE;AAAA,IACzB,GAAG,EAAE,QAAQ;AACb,WAAO,MAAM,OAAO,aAAa,MAAM;AAAA,EACzC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,EAAE;AAAA,MACX,SAAS,EAAE;AAAA,MACX,QAAQ,EAAE;AAAA,MACV,WAAW,MAAM,WAAW,QAAQ,EAAE,EAAE;AAAA;AAAA,EAC1C;AAEJ;AAyBO,MAAM,QAAQ;AAAA,EACnB,SAAS,CAAC,SAAiB,YACzB,WAAW,IAAI,WAAW,SAAS,OAAO;AAAA,EAC5C,MAAM,CAAC,SAAiB,YACtB,WAAW,IAAI,QAAQ,SAAS,OAAO;AAAA,EACzC,SAAS,CAAC,SAAiB,YACzB,WAAW,IAAI,WAAW,SAAS,OAAO;AAAA,EAC5C,OAAO,CAAC,SAAiB,YACvB,WAAW,IAAI,SAAS,SAAS,OAAO;AAAA;AAAA,EAE1C,SAAS,CAAC,OAAe,WAAW,QAAQ,EAAE;AAAA;AAAA,EAE9C,OAAO,MAAM,WAAW,MAAM;AAChC;","names":[]}

package/dist/ui/toggle-switch/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toggle_switch_exports = {};
+module.exports = __toCommonJS(toggle_switch_exports);
+__reExport(toggle_switch_exports, require("./toggle-switch.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./toggle-switch.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/toggle-switch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toggle-switch/index.ts"],"sourcesContent":["export * from './toggle-switch';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kCAAc,4BAAd;","names":[]}

package/dist/ui/toggle-switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toggle-switch.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/toggle-switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/ui/toggle-switch/index.js

@@ -0,0 +1,2 @@
+export * from "./toggle-switch.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/toggle-switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toggle-switch/index.ts"],"sourcesContent":["export * from './toggle-switch';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/toggle-switch/toggle-preview.cjs

@@ -0,0 +1,146 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toggle_preview_exports = {};
+__export(toggle_preview_exports, {
+  TogglePreview: () => TogglePreview
+});
+module.exports = __toCommonJS(toggle_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function ShowcaseRow({
+  on,
+  state,
+  styles,
+  label
+}) {
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const isDisabled = state === "disabled";
+  const track = isHover ? on ? styles.hoverOnTrack : styles.hoverOffTrack : on ? styles.onTrack : styles.offTrack;
+  const thumb = isHover ? on ? styles.hoverOnThumb : styles.hoverOffThumb : on ? styles.onThumb : styles.offThumb;
+  const ring = styles.focusRing;
+  const width = styles.width ?? 44;
+  const height = styles.height ?? 24;
+  const thumbSize = height - 4;
+  const thumbLeft = on ? width - height + 2 : 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        fontSize: 14,
+        color: "var(--color-text)",
+        opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "relative",
+              width,
+              height,
+              flexShrink: 0,
+              borderRadius: 99,
+              backgroundColor: track,
+              transition: "background-color 0.15s",
+              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: 2,
+                  left: thumbLeft,
+                  width: thumbSize,
+                  height: thumbSize,
+                  borderRadius: "50%",
+                  backgroundColor: thumb,
+                  boxShadow: "var(--shadow-sm)",
+                  transition: "left 0.15s, background-color 0.15s"
+                }
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function TogglePreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const cssVars = {
+    "--uxm-toggle-switch-width": styles.width != null ? `${styles.width}px` : void 0,
+    "--uxm-toggle-switch-height": styles.height != null ? `${styles.height}px` : void 0,
+    "--uxm-toggle-switch-off-track": styles.offTrack,
+    "--uxm-toggle-switch-off-thumb": styles.offThumb,
+    "--uxm-toggle-switch-on-track": styles.onTrack,
+    "--uxm-toggle-switch-on-thumb": styles.onThumb,
+    "--uxm-toggle-switch-hover-off-track": styles.hoverOffTrack,
+    "--uxm-toggle-switch-hover-off-thumb": styles.hoverOffThumb,
+    "--uxm-toggle-switch-hover-on-track": styles.hoverOnTrack,
+    "--uxm-toggle-switch-hover-on-thumb": styles.hoverOnThumb,
+    "--uxm-toggle-switch-focus-ring": styles.focusRing,
+    "--uxm-toggle-switch-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-toggle-switch-error-color": styles.errorColor,
+    "--uxm-toggle-switch-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { on: false, state, styles, label: "Off" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { on: true, state, styles, label: "On" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.ToggleSwitch,
+        {
+          disabled: state === "disabled",
+          error: state === "error" ? "Enable notifications to continue" : void 0,
+          children: "Click, hover, or Tab-focus this toggle"
+        },
+        state
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TogglePreview
+});
+//# sourceMappingURL=toggle-preview.cjs.map

package/dist/ui/toggle-switch/toggle-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toggle-switch/toggle-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { ToggleSwitch } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  on,\n  state,\n  styles,\n  label,\n}: {\n  on: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <ToggleSwitch>) so each\n  // forced state can override the visible track + thumb directly; the\n  // interactive instance below is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const track = isHover\n    ? (on ? styles.hoverOnTrack : styles.hoverOffTrack)\n    : (on ? styles.onTrack : styles.offTrack);\n  const thumb = isHover\n    ? (on ? styles.hoverOnThumb : styles.hoverOffThumb)\n    : (on ? styles.onThumb : styles.offThumb);\n  const ring = styles.focusRing;\n  const width = (styles.width as number) ?? 44;\n  const height = (styles.height as number) ?? 24;\n  const thumbSize = height - 4;\n  // Thumb position math mirrors `styles.css`: off → 2px from left,\n  // on → width minus track-height minus 2px. Keeps the dot snug in\n  // either end regardless of width/height.\n  const thumbLeft = on ? width - height + 2 : 2;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          position: 'relative',\n          width,\n          height,\n          flexShrink: 0,\n          borderRadius: 99,\n          backgroundColor: track as string,\n          transition: 'background-color 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        <span\n          style={{\n            position: 'absolute',\n            top: 2,\n            left: thumbLeft,\n            width: thumbSize,\n            height: thumbSize,\n            borderRadius: '50%',\n            backgroundColor: thumb as string,\n            boxShadow: 'var(--shadow-sm)',\n            transition: 'left 0.15s, background-color 0.15s',\n          }}\n        />\n      </span>\n      {label}\n    </div>\n  );\n}\n\nexport function TogglePreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n\n  // Project every registry knob as a `--uxm-toggle-switch-*` custom\n  // property on the wrapper. The interactive <ToggleSwitch> below renders\n  // the real component whose styles.css rules read these vars — live\n  // editor edits paint immediately, and production `:hover` /\n  // `:focus-visible` rules exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-toggle-switch-width': styles.width != null ? `${styles.width}px` : undefined,\n    '--uxm-toggle-switch-height': styles.height != null ? `${styles.height}px` : undefined,\n    '--uxm-toggle-switch-off-track': styles.offTrack as string | undefined,\n    '--uxm-toggle-switch-off-thumb': styles.offThumb as string | undefined,\n    '--uxm-toggle-switch-on-track': styles.onTrack as string | undefined,\n    '--uxm-toggle-switch-on-thumb': styles.onThumb as string | undefined,\n    '--uxm-toggle-switch-hover-off-track': styles.hoverOffTrack as string | undefined,\n    '--uxm-toggle-switch-hover-off-thumb': styles.hoverOffThumb as string | undefined,\n    '--uxm-toggle-switch-hover-on-track': styles.hoverOnTrack as string | undefined,\n    '--uxm-toggle-switch-hover-on-thumb': styles.hoverOnThumb as string | undefined,\n    '--uxm-toggle-switch-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-toggle-switch-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-toggle-switch-error-color': styles.errorColor as string | undefined,\n    '--uxm-toggle-switch-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow on={false} state={state} styles={styles} label=\"Off\" />\n          <ShowcaseRow on={true} state={state} styles={styles} label=\"On\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/space-key toggle reliably in\n          both directions. State knobs apply via the projected\n          `--uxm-toggle-switch-*` vars on the wrapper above. The `key={state}`\n          resets the toggle when designers flip into and out of disabled\n          so the visual matches the freshly-disabled UX. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <ToggleSwitch\n          key={state}\n          disabled={state === 'disabled'}\n          error={state === 'error' ? 'Enable notifications to continue' : undefined}\n        >\n          Click, hover, or Tab-focus this toggle\n        </ToggleSwitch>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/toggle-switch/toggle-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function TogglePreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toggle-preview.d.ts.map

package/dist/ui/toggle-switch/toggle-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/toggle-switch/toggle-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAqFrD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAgE/D"}