@viax.io/uxm 4.36.0

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

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleSwitch } from "../../ui/index.js";
+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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsx(ShowcaseRow, { on: false, state, styles, label: "Off" }),
+        /* @__PURE__ */ jsx(ShowcaseRow, { on: true, state, styles, label: "On" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        ToggleSwitch,
+        {
+          disabled: state === "disabled",
+          error: state === "error" ? "Enable notifications to continue" : void 0,
+          children: "Click, hover, or Tab-focus this toggle"
+        },
+        state
+      )
+    ] })
+  ] });
+}
+export {
+  TogglePreview
+};
+//# sourceMappingURL=toggle-preview.js.map

package/dist/ui/toggle-switch/toggle-preview.js.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-switch.cjs

@@ -0,0 +1,85 @@
+"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_switch_exports = {};
+__export(toggle_switch_exports, {
+  ToggleSwitch: () => ToggleSwitch
+});
+module.exports = __toCommonJS(toggle_switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../../ui/field-error/index.cjs");
+function ToggleSwitch({
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  children,
+  className,
+  name,
+  style,
+  error,
+  "aria-label": ariaLabel,
+  id,
+  "aria-describedby": describedBy
+}) {
+  const errorId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "label",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-toggle-switch",
+          disabled && "uxm-toggle-switch--disabled",
+          error && "uxm-toggle-switch--error",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              role: "switch",
+              className: "uxm-toggle-switch__input",
+              checked,
+              defaultChecked,
+              disabled,
+              name,
+              "aria-label": ariaLabel,
+              id,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": (0, import_helpers.mergeDescribedBy)(describedBy, error ? errorId : void 0),
+              onChange: (e) => onChange?.(e.target.checked, e)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-toggle-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-toggle-switch__thumb" }) }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-toggle-switch__label", children })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-toggle-switch__error-message", children: error })
+  ] });
+}
+ToggleSwitch.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleSwitch
+});
+//# sourceMappingURL=toggle-switch.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toggle-switch/toggle-switch.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\n\nimport type { ChangeEvent, CSSProperties, ReactNode } from 'react';\n\nexport interface ToggleSwitchProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n  name?: string;\n  /** Accessible name for the switch when no visible `children` label is given. */\n  'aria-label'?: string;\n  /** Inline style on the wrapping label — used to project `--uxm-toggle-switch-*` overrides. */\n  style?: CSSProperties;\n  /**\n   * When set to a non-empty string, marks the control invalid: `aria-invalid`\n   * lands on the `<input>` and the message renders below in the error color.\n   * Per the input family's small-control convention the track AND the label\n   * both stay neutral — the message is the sole signal. The\n   * `.uxm-toggle-switch--error` class still rides on the root as a state\n   * hook. Omit (or pass an empty string) for normal.\n   */\n  error?: string;\n  /**\n   * Forwarded to the native `<input role=\"switch\">`. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n}\n\nexport function ToggleSwitch({\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n  name,\n  style,\n  error,\n  'aria-label': ariaLabel,\n  id,\n  'aria-describedby': describedBy,\n}: ToggleSwitchProps) {\n  const errorId = useId();\n  return (\n    <>\n      <label\n        className={cn(\n          'uxm-toggle-switch',\n          disabled && 'uxm-toggle-switch--disabled',\n          error && 'uxm-toggle-switch--error',\n          className,\n        )}\n        style={style}\n      >\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"uxm-toggle-switch__input\"\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          id={id}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n          onChange={(e) => onChange?.(e.target.checked, e)}\n        />\n        <span className=\"uxm-toggle-switch__track\" aria-hidden=\"true\">\n          <span className=\"uxm-toggle-switch__thumb\" />\n        </span>\n        {children && <span className=\"uxm-toggle-switch__label\">{children}</span>}\n      </label>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-toggle-switch__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nToggleSwitch.hasError = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDI;AAtDJ,mBAAsB;AAEtB,qBAAqC;AACrC,yBAA2B;AAmCpB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,oBAAoB;AACtB,GAAsB;AACpB,QAAM,cAAU,oBAAM;AACtB,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,cAC3E,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC;AAAA;AAAA,UACjD;AAAA,UACA,4CAAC,UAAK,WAAU,4BAA2B,eAAY,QACrD,sDAAC,UAAK,WAAU,4BAA2B,GAC7C;AAAA,UACC,YAAY,4CAAC,UAAK,WAAU,4BAA4B,UAAS;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,oCAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,aAAa,WAAW;","names":[]}

package/dist/ui/toggle-switch/toggle-switch.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* ── toggle-switch ── */
+.uxm-toggle-switch {
+  align-items: center;
+  color: var(--color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(14px * var(--type-scale, 1));
+  gap: 8px;
+  /* ToggleSwitch — registry knobs: trackColorOn / Off, thumbColor, width,
+     height. Thumb sizing derives from height (height − 4px inset) and the
+     "on" thumb position derives from width minus thumb-size minus 2px,
+     so the math survives any width/height change. Was previously hardcoded
+     `left: calc(100% - 22px)` which broke on width changes.
+     Per-state hover/focus read `--uxm-toggle-switch-{state}-*` vars, each
+     falling back to the registry's default for THAT state (see the hover block
+     below) — never to the resting colour, or the state would paint nothing. */
+}
+.uxm-toggle-switch__track {
+  background-color: var(--uxm-toggle-switch-off-track, var(--color-border));
+  border-radius: 99px;
+  flex-shrink: 0;
+  height: var(--uxm-toggle-switch-height, 24px);
+  position: relative;
+  transition: background-color 0.2s;
+  width: var(--uxm-toggle-switch-width, 44px);
+}
+.uxm-toggle-switch__thumb {
+  background-color: var(--uxm-toggle-switch-off-thumb, var(--color-card));
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+  height: calc(var(--uxm-toggle-switch-height, 24px) - 4px);
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  transition: left 0.2s;
+  width: calc(var(--uxm-toggle-switch-height, 24px) - 4px);
+}
+.uxm-toggle-switch:not(.uxm-toggle-switch--disabled):hover .uxm-toggle-switch__input:not(:checked) + .uxm-toggle-switch__track {
+  /* Hover — the fallbacks are the registry's hover defaults
+     (`--color-text-strong` off / `--color-accent-bold` on), NOT a repeat of the
+     resting colour. Echoing the resting value here shipped a `:hover` rule with
+     no visible effect: the studio projects its knob defaults as inline
+     `--uxm-toggle-switch-hover-*` vars so hover read fine in the workbench,
+     while a consumer that only imports the compiled CSS sets no vars and got
+     the resting colour back. Gated on `:not(--disabled)` so a disabled switch
+     stays visually inert. */
+  background-color: var(--uxm-toggle-switch-hover-off-track, var(--color-text-strong));
+}
+.uxm-toggle-switch:not(.uxm-toggle-switch--disabled):hover .uxm-toggle-switch__input:not(:checked) + .uxm-toggle-switch__track > .uxm-toggle-switch__thumb {
+  background-color: var(--uxm-toggle-switch-hover-off-thumb, var(--color-card));
+}
+.uxm-toggle-switch:not(.uxm-toggle-switch--disabled):hover .uxm-toggle-switch__input:checked + .uxm-toggle-switch__track {
+  background-color: var(--uxm-toggle-switch-hover-on-track, var(--color-accent-bold));
+}
+.uxm-toggle-switch:not(.uxm-toggle-switch--disabled):hover .uxm-toggle-switch__input:checked + .uxm-toggle-switch__track > .uxm-toggle-switch__thumb {
+  background-color: var(--uxm-toggle-switch-hover-on-thumb, var(--color-card));
+}
+.uxm-toggle-switch__input:focus-visible + .uxm-toggle-switch__track {
+  outline: 2px solid var(--uxm-toggle-switch-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-toggle-switch__input:checked + .uxm-toggle-switch__track {
+  background-color: var(--uxm-toggle-switch-on-track, var(--color-accent));
+}
+.uxm-toggle-switch__input:checked + .uxm-toggle-switch__track > .uxm-toggle-switch__thumb {
+  background-color: var(--uxm-toggle-switch-on-thumb, var(--color-card));
+  left: calc(var(--uxm-toggle-switch-width, 44px) - var(--uxm-toggle-switch-height, 24px) + 2px);
+}
+.uxm-toggle-switch--disabled {
+  /* Disabled — dims via the registry's disabledOpacity knob, whose default is
+     0.4; the fallback used to be 1, i.e. the shipped switch never dimmed
+     unless a saved override said so. This rule (not the copy that used to sit
+     in checkbox.scss) is the one that lands, since toggle-switch.css is
+     imported later in styles.css. */
+  cursor: not-allowed;
+  opacity: var(--uxm-toggle-switch-disabled-opacity, 0.4);
+}
+
+/* Small-control error message — the control + label stay neutral (too small to
+   read as an error; a red label would compete). The message below is the sole
+   signal, reading the errorColor / errorMessageSize knobs the registry exposes
+   (kebab → `--uxm-toggle-switch-error-color` / `-error-message-size`). The
+   `.uxm-toggle-switch--error` class rides the root as a state hook + aria-invalid
+   companion, even though it paints nothing itself.
+   The selector has to be the class the atom actually renders (FieldError gets
+   it via its `className` prop) — this used to read `.uxm--message`, which
+   nothing renders, so the message shipped with no colour, no size and no
+   margin while the studio's knobs looked live. */
+.uxm-toggle-switch__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-toggle-switch-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-toggle-switch-error-color, var(--color-danger-text));
+}

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

@@ -0,0 +1,36 @@
+import type { ChangeEvent, CSSProperties, ReactNode } from 'react';
+export interface ToggleSwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
+    className?: string;
+    name?: string;
+    /** Accessible name for the switch when no visible `children` label is given. */
+    'aria-label'?: string;
+    /** Inline style on the wrapping label — used to project `--uxm-toggle-switch-*` overrides. */
+    style?: CSSProperties;
+    /**
+     * When set to a non-empty string, marks the control invalid: `aria-invalid`
+     * lands on the `<input>` and the message renders below in the error color.
+     * Per the input family's small-control convention the track AND the label
+     * both stay neutral — the message is the sole signal. The
+     * `.uxm-toggle-switch--error` class still rides on the root as a state
+     * hook. Omit (or pass an empty string) for normal.
+     */
+    error?: string;
+    /**
+     * Forwarded to the native `<input role="switch">`. `FormField` injects both — `id` for its
+     * label association, `aria-describedby` for the hint — so wiring these
+     * makes the atom hint-associable; the describedby is merged with the
+     * atom's own error-message id, consumer ids first.
+     */
+    id?: string;
+    'aria-describedby'?: string;
+}
+export declare function ToggleSwitch({ checked, defaultChecked, disabled, onChange, children, className, name, style, error, 'aria-label': ariaLabel, id, 'aria-describedby': describedBy, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToggleSwitch {
+    var hasError: boolean;
+}
+//# sourceMappingURL=toggle-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/ui/toggle-switch/toggle-switch.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,EAAE,EACF,kBAAkB,EAAE,WAAW,GAChC,EAAE,iBAAiB,2CAuCnB;yBApDe,YAAY"}

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

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn, mergeDescribedBy } from "../../helpers/index.js";
+import { FieldError } from "../../ui/field-error/index.js";
+function ToggleSwitch({
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  children,
+  className,
+  name,
+  style,
+  error,
+  "aria-label": ariaLabel,
+  id,
+  "aria-describedby": describedBy
+}) {
+  const errorId = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "uxm-toggle-switch",
+          disabled && "uxm-toggle-switch--disabled",
+          error && "uxm-toggle-switch--error",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              role: "switch",
+              className: "uxm-toggle-switch__input",
+              checked,
+              defaultChecked,
+              disabled,
+              name,
+              "aria-label": ariaLabel,
+              id,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": mergeDescribedBy(describedBy, error ? errorId : void 0),
+              onChange: (e) => onChange?.(e.target.checked, e)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "uxm-toggle-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "uxm-toggle-switch__thumb" }) }),
+          children && /* @__PURE__ */ jsx("span", { className: "uxm-toggle-switch__label", children })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: "uxm-toggle-switch__error-message", children: error })
+  ] });
+}
+ToggleSwitch.hasError = true;
+export {
+  ToggleSwitch
+};
+//# sourceMappingURL=toggle-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/toggle-switch/toggle-switch.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\n\nimport type { ChangeEvent, CSSProperties, ReactNode } from 'react';\n\nexport interface ToggleSwitchProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n  name?: string;\n  /** Accessible name for the switch when no visible `children` label is given. */\n  'aria-label'?: string;\n  /** Inline style on the wrapping label — used to project `--uxm-toggle-switch-*` overrides. */\n  style?: CSSProperties;\n  /**\n   * When set to a non-empty string, marks the control invalid: `aria-invalid`\n   * lands on the `<input>` and the message renders below in the error color.\n   * Per the input family's small-control convention the track AND the label\n   * both stay neutral — the message is the sole signal. The\n   * `.uxm-toggle-switch--error` class still rides on the root as a state\n   * hook. Omit (or pass an empty string) for normal.\n   */\n  error?: string;\n  /**\n   * Forwarded to the native `<input role=\"switch\">`. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n}\n\nexport function ToggleSwitch({\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n  name,\n  style,\n  error,\n  'aria-label': ariaLabel,\n  id,\n  'aria-describedby': describedBy,\n}: ToggleSwitchProps) {\n  const errorId = useId();\n  return (\n    <>\n      <label\n        className={cn(\n          'uxm-toggle-switch',\n          disabled && 'uxm-toggle-switch--disabled',\n          error && 'uxm-toggle-switch--error',\n          className,\n        )}\n        style={style}\n      >\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"uxm-toggle-switch__input\"\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          id={id}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n          onChange={(e) => onChange?.(e.target.checked, e)}\n        />\n        <span className=\"uxm-toggle-switch__track\" aria-hidden=\"true\">\n          <span className=\"uxm-toggle-switch__thumb\" />\n        </span>\n        {children && <span className=\"uxm-toggle-switch__label\">{children}</span>}\n      </label>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-toggle-switch__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nToggleSwitch.hasError = true;\n"],"mappings":"AAsDI,mBAUI,KATF,YADF;AAtDJ,SAAS,aAAa;AAEtB,SAAS,IAAI,wBAAwB;AACrC,SAAS,kBAAkB;AAmCpB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,oBAAoB;AACtB,GAAsB;AACpB,QAAM,UAAU,MAAM;AACtB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,oBAAkB,iBAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,cAC3E,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC;AAAA;AAAA,UACjD;AAAA,UACA,oBAAC,UAAK,WAAU,4BAA2B,eAAY,QACrD,8BAAC,UAAK,WAAU,4BAA2B,GAC7C;AAAA,UACC,YAAY,oBAAC,UAAK,WAAU,4BAA4B,UAAS;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,SACC,oBAAC,cAAW,IAAI,SAAS,WAAU,oCAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,aAAa,WAAW;","names":[]}

package/dist/ui/tooltip/content-tooltip-preview.cjs

@@ -0,0 +1,98 @@
+"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 content_tooltip_preview_exports = {};
+__export(content_tooltip_preview_exports, {
+  ContentTooltipPreview: () => ContentTooltipPreview
+});
+module.exports = __toCommonJS(content_tooltip_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function ContentTooltipPreview({ styles }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          ["--uxm-content-tooltip-background-color"]: styles.backgroundColor,
+          ["--uxm-content-tooltip-border-color"]: styles.borderColor,
+          ["--uxm-content-tooltip-border-radius"]: `${styles.borderRadius}px`,
+          ["--uxm-content-tooltip-padding"]: `${styles.padding}px`,
+          ["--uxm-content-tooltip-max-width"]: `${styles.maxWidth}px`,
+          backgroundColor: "var(--uxm-content-tooltip-background-color)",
+          border: "1px solid var(--uxm-content-tooltip-border-color)",
+          borderRadius: "var(--uxm-content-tooltip-border-radius)",
+          padding: "var(--uxm-content-tooltip-padding)",
+          maxWidth: "var(--uxm-content-tooltip-max-width)",
+          boxShadow: styles.shadow ? "0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04)" : "none"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                width: 36,
+                height: 36,
+                borderRadius: 8,
+                backgroundColor: "var(--color-accent-subtle)",
+                color: "var(--color-accent-bold)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "sparkle", size: 18, strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { style: { fontSize: styles.titleSize, fontWeight: 600, color: "var(--color-text)", margin: 0 }, children: "Quick Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 12, color: "var(--color-text-muted)", margin: "4px 0 12px", lineHeight: 1.5 }, children: [
+              "Use keyboard shortcuts to speed up your workflow. Press ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { style: { fontSize: 11, padding: "1px 5px", borderRadius: 4, border: "1px solid var(--color-border)", backgroundColor: "var(--color-surface)" }, children: "?" }),
+              " to see all available shortcuts."
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                style: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: "var(--color-accent-bold)",
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: "Learn more \u2192"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, color: "var(--color-text-muted)", fontSize: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "arrow-up", size: 14, strokeWidth: 1.5 }),
+      "Hover trigger above"
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContentTooltipPreview
+});
+//# sourceMappingURL=content-tooltip-preview.cjs.map

package/dist/ui/tooltip/content-tooltip-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/tooltip/content-tooltip-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\n\nexport function ContentTooltipPreview({ styles }: PreviewProps) {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>\n      {/* Rich tooltip */}\n      <div\n        style={{\n          ['--uxm-content-tooltip-background-color' as string]: styles.backgroundColor as string,\n          ['--uxm-content-tooltip-border-color' as string]: styles.borderColor as string,\n          ['--uxm-content-tooltip-border-radius' as string]: `${styles.borderRadius}px`,\n          ['--uxm-content-tooltip-padding' as string]: `${styles.padding}px`,\n          ['--uxm-content-tooltip-max-width' as string]: `${styles.maxWidth}px`,\n          backgroundColor: 'var(--uxm-content-tooltip-background-color)',\n          border: '1px solid var(--uxm-content-tooltip-border-color)',\n          borderRadius: 'var(--uxm-content-tooltip-border-radius)',\n          padding: 'var(--uxm-content-tooltip-padding)',\n          maxWidth: 'var(--uxm-content-tooltip-max-width)',\n          boxShadow: styles.shadow\n            ? '0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04)'\n            : 'none',\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>\n          <div\n            style={{\n              width: 36,\n              height: 36,\n              borderRadius: 8,\n              backgroundColor: 'var(--color-accent-subtle)',\n              color: 'var(--color-accent-bold)',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              flexShrink: 0,\n            }}\n          >\n            <Icon glyph=\"sparkle\" size={18} strokeWidth={1.5} />\n          </div>\n          <div style={{ flex: 1 }}>\n            <h4 style={{ fontSize: styles.titleSize as number, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>\n              Quick Actions\n            </h4>\n            <p style={{ fontSize: 12, color: 'var(--color-text-muted)', margin: '4px 0 12px', lineHeight: 1.5 }}>\n              Use keyboard shortcuts to speed up your workflow. Press <kbd style={{ fontSize: 11, padding: '1px 5px', borderRadius: 4, border: '1px solid var(--color-border)', backgroundColor: 'var(--color-surface)' }}>?</kbd> to see all available shortcuts.\n            </p>\n            <button\n              style={{\n                fontSize: 12,\n                fontWeight: 600,\n                color: 'var(--color-accent-bold)',\n                background: 'none',\n                border: 'none',\n                padding: 0,\n                cursor: 'pointer',\n              }}\n            >\n              Learn more →\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Trigger */}\n      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--color-text-muted)', fontSize: 12 }}>\n        <Icon glyph=\"arrow-up\" size={14} strokeWidth={1.5} />\n        Hover trigger above\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCY;AArCZ,gBAAqB;AAEd,SAAS,sBAAsB,EAAE,OAAO,GAAiB;AAC9D,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,KAAK,GAAG,GAEpF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,CAAC,wCAAkD,GAAG,OAAO;AAAA,UAC7D,CAAC,oCAA8C,GAAG,OAAO;AAAA,UACzD,CAAC,qCAA+C,GAAG,GAAG,OAAO,YAAY;AAAA,UACzE,CAAC,+BAAyC,GAAG,GAAG,OAAO,OAAO;AAAA,UAC9D,CAAC,iCAA2C,GAAG,GAAG,OAAO,QAAQ;AAAA,UACjE,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,SAAS;AAAA,UACT,UAAU;AAAA,UACV,WAAW,OAAO,SACd,4DACA;AAAA,QACN;AAAA,QAEA,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,cAAc,KAAK,GAAG,GAC/D;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,iBAAiB;AAAA,gBACjB,OAAO;AAAA,gBACP,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,YAAY;AAAA,cACd;AAAA,cAEA,sDAAC,kBAAK,OAAM,WAAU,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,UACpD;AAAA,UACA,6CAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB;AAAA,wDAAC,QAAG,OAAO,EAAE,UAAU,OAAO,WAAqB,YAAY,KAAK,OAAO,qBAAqB,QAAQ,EAAE,GAAG,2BAE7G;AAAA,YACA,6CAAC,OAAE,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,QAAQ,cAAc,YAAY,IAAI,GAAG;AAAA;AAAA,cAC3C,4CAAC,SAAI,OAAO,EAAE,UAAU,IAAI,SAAS,WAAW,cAAc,GAAG,QAAQ,iCAAiC,iBAAiB,uBAAuB,GAAG,eAAC;AAAA,cAAM;AAAA,eACtN;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,QAAQ;AAAA,gBACV;AAAA,gBACD;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAGA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAG,OAAO,2BAA2B,UAAU,GAAG,GAC1G;AAAA,kDAAC,kBAAK,OAAM,YAAW,MAAM,IAAI,aAAa,KAAK;AAAA,MAAE;AAAA,OAEvD;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/tooltip/content-tooltip-preview.d.ts

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

package/dist/ui/tooltip/content-tooltip-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-tooltip-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/tooltip/content-tooltip-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CAoE7D"}

package/dist/ui/tooltip/content-tooltip-preview.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../../ui/index.js";
+function ContentTooltipPreview({ styles }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ["--uxm-content-tooltip-background-color"]: styles.backgroundColor,
+          ["--uxm-content-tooltip-border-color"]: styles.borderColor,
+          ["--uxm-content-tooltip-border-radius"]: `${styles.borderRadius}px`,
+          ["--uxm-content-tooltip-padding"]: `${styles.padding}px`,
+          ["--uxm-content-tooltip-max-width"]: `${styles.maxWidth}px`,
+          backgroundColor: "var(--uxm-content-tooltip-background-color)",
+          border: "1px solid var(--uxm-content-tooltip-border-color)",
+          borderRadius: "var(--uxm-content-tooltip-border-radius)",
+          padding: "var(--uxm-content-tooltip-padding)",
+          maxWidth: "var(--uxm-content-tooltip-max-width)",
+          boxShadow: styles.shadow ? "0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04)" : "none"
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: 36,
+                height: 36,
+                borderRadius: 8,
+                backgroundColor: "var(--color-accent-subtle)",
+                color: "var(--color-accent-bold)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "sparkle", size: 18, strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx("h4", { style: { fontSize: styles.titleSize, fontWeight: 600, color: "var(--color-text)", margin: 0 }, children: "Quick Actions" }),
+            /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "var(--color-text-muted)", margin: "4px 0 12px", lineHeight: 1.5 }, children: [
+              "Use keyboard shortcuts to speed up your workflow. Press ",
+              /* @__PURE__ */ jsx("kbd", { style: { fontSize: 11, padding: "1px 5px", borderRadius: 4, border: "1px solid var(--color-border)", backgroundColor: "var(--color-surface)" }, children: "?" }),
+              " to see all available shortcuts."
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: "var(--color-accent-bold)",
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: "Learn more \u2192"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, color: "var(--color-text-muted)", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsx(Icon, { glyph: "arrow-up", size: 14, strokeWidth: 1.5 }),
+      "Hover trigger above"
+    ] })
+  ] });
+}
+export {
+  ContentTooltipPreview
+};
+//# sourceMappingURL=content-tooltip-preview.js.map