@viax.io/uxm 4.36.0

package/dist/ui/hover-tooltip/index.js

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

package/dist/ui/hover-tooltip/index.js.map

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

package/dist/ui/icon/icon-preview.cjs

@@ -0,0 +1,128 @@
+"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 icon_preview_exports = {};
+__export(icon_preview_exports, {
+  IconPreview: () => IconPreview
+});
+module.exports = __toCommonJS(icon_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+function IconPreview({ styles }) {
+  const size = styles.size;
+  const strokeWidth = styles.strokeWidth;
+  const color = styles.color;
+  const [query, setQuery] = (0, import_react.useState)("");
+  const q = query.trim().toLowerCase();
+  const matches = q ? import_ui.ICONS.filter((d) => d.id.toLowerCase().includes(q) || d.label.toLowerCase().includes(q)) : import_ui.ICONS;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.InputWithIcon,
+        {
+          type: "search",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "search", size: 16 }),
+          placeholder: "Search icons\u2026",
+          "aria-label": "Search icons",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onClear: () => setQuery("")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "status",
+          "aria-live": "polite",
+          style: { fontSize: 12, color: "var(--color-text-muted)" },
+          children: matches.length === import_ui.ICONS.length ? `${import_ui.ICONS.length} icons` : `${matches.length} of ${import_ui.ICONS.length} icons`
+        }
+      )
+    ] }),
+    matches.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13, color: "var(--color-text-muted)", padding: "24px 0" }, children: [
+      "No icons match \u201C",
+      query.trim(),
+      "\u201D."
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          // Flexible: auto-fill packs as many ≥88px cells as the pane width
+          // allows and reflows as it changes — no fixed column count/width.
+          gridTemplateColumns: "repeat(auto-fill, minmax(88px, 1fr))",
+          gap: 8,
+          width: "100%"
+        },
+        children: matches.map((def) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            title: def.label,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 8,
+              padding: "14px 8px",
+              border: "1px solid var(--color-border)",
+              borderRadius: 8,
+              backgroundColor: "var(--color-card)",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ui.Icon,
+                {
+                  glyph: def.id,
+                  size,
+                  strokeWidth,
+                  style: { ["--uxm-icon-color"]: color }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "code",
+                {
+                  style: {
+                    // Wrap (don't ellipsis) so the full glyph id — the exact
+                    // string you pass to `glyph=` — is always readable, even long
+                    // ones like `question-mark-circle`. Label rides `title`.
+                    maxWidth: "100%",
+                    overflowWrap: "anywhere",
+                    textAlign: "center",
+                    lineHeight: 1.3,
+                    fontSize: 11,
+                    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+                    color: "var(--color-text-muted)"
+                  },
+                  children: def.id
+                }
+              )
+            ]
+          },
+          def.id
+        ))
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconPreview
+});
+//# sourceMappingURL=icon-preview.cjs.map

package/dist/ui/icon/icon-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon/icon-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon, ICONS, InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Renders the WHOLE icon set as a labelled, searchable grid rather than a\n * single glyph behind a select — so the panel answers \"which icons exist\n * and what are they called\" at a glance, and stays usable as the set grows.\n * Each cell shows the real <Icon> atom (so both path- and body-based glyphs\n * render) above its `id` — the exact string you pass to `glyph=` — with the\n * human label as a tooltip. The search filters on both id and label.\n *\n * Relies on the registry's `canvasFill` so the canvas fills width + top-\n * aligns: the grid flows a flexible column count with the pane width, and\n * typing in the search filters the grid in place — the block stays anchored\n * to the top instead of re-centring and jumping as the result count changes.\n *\n * The size / stroke / colour knobs tune every icon at once. Colour flows\n * through the atom's own `--uxm-icon-color` re-theme surface (the same\n * variable a production consumer would set); Icon's stroke defaults to\n * `currentColor`, so the wrapper colour is enough.\n */\nexport function IconPreview({ styles }: PreviewProps) {\n  const size = styles.size as number;\n  const strokeWidth = styles.strokeWidth as number;\n  const color = styles.color as string;\n\n  const [query, setQuery] = useState('');\n  const q = query.trim().toLowerCase();\n  const matches = q\n    ? ICONS.filter((d) => d.id.toLowerCase().includes(q) || d.label.toLowerCase().includes(q))\n    : ICONS;\n\n  return (\n    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>\n      {/* Search + count sit directly on the canvas above the grid — no bar,\n          no sticky. Top-aligned (via the def's canvasFill) so typing filters\n          the grid in place without the block re-centring. */}\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n        <InputWithIcon\n          type=\"search\"\n          icon={<Icon glyph=\"search\" size={16} />}\n          placeholder=\"Search icons…\"\n          aria-label=\"Search icons\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          onClear={() => setQuery('')}\n        />\n        {/* Live region: filtering is a purely visual change to the grid below,\n            so without this a screen-reader user typing in the search gets no\n            feedback that anything happened. `polite` waits for a pause rather\n            than interrupting each keystroke. */}\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          style={{ fontSize: 12, color: 'var(--color-text-muted)' }}\n        >\n          {matches.length === ICONS.length\n            ? `${ICONS.length} icons`\n            : `${matches.length} of ${ICONS.length} icons`}\n        </div>\n      </div>\n\n      {matches.length === 0 ? (\n        <div style={{ fontSize: 13, color: 'var(--color-text-muted)', padding: '24px 0' }}>\n          No icons match “{query.trim()}”.\n        </div>\n      ) : (\n        <div\n          style={{\n            display: 'grid',\n            // Flexible: auto-fill packs as many ≥88px cells as the pane width\n            // allows and reflows as it changes — no fixed column count/width.\n            gridTemplateColumns: 'repeat(auto-fill, minmax(88px, 1fr))',\n            gap: 8,\n            width: '100%',\n          }}\n        >\n          {matches.map((def) => (\n            <div\n              key={def.id}\n              title={def.label}\n              style={{\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'center',\n                gap: 8,\n                padding: '14px 8px',\n                border: '1px solid var(--color-border)',\n                borderRadius: 8,\n                backgroundColor: 'var(--color-card)',\n                minWidth: 0,\n              }}\n            >\n              <Icon\n                glyph={def.id}\n                size={size}\n                strokeWidth={strokeWidth}\n                style={{ ['--uxm-icon-color' as string]: color } as CSSProperties}\n              />\n              <code\n                style={{\n                  // Wrap (don't ellipsis) so the full glyph id — the exact\n                  // string you pass to `glyph=` — is always readable, even long\n                  // ones like `question-mark-circle`. Label rides `title`.\n                  maxWidth: '100%',\n                  overflowWrap: 'anywhere',\n                  textAlign: 'center',\n                  lineHeight: 1.3,\n                  fontSize: 11,\n                  fontFamily: 'var(--font-mono, ui-monospace, monospace)',\n                  color: 'var(--color-text-muted)',\n                }}\n              >\n                {def.id}\n              </code>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCM;AAzCN,mBAAyB;AAGzB,gBAA2C;AAsBpC,SAAS,YAAY,EAAE,OAAO,GAAiB;AACpD,QAAM,OAAO,OAAO;AACpB,QAAM,cAAc,OAAO;AAC3B,QAAM,QAAQ,OAAO;AAErB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,IAAI,MAAM,KAAK,EAAE,YAAY;AACnC,QAAM,UAAU,IACZ,gBAAM,OAAO,CAAC,MAAM,EAAE,GAAG,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,CAAC,IACvF;AAEJ,SACE,6CAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GAI7E;AAAA,iDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAC7D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAM,4CAAC,kBAAK,OAAM,UAAS,MAAM,IAAI;AAAA,UACrC,aAAY;AAAA,UACZ,cAAW;AAAA,UACX,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,MAC5B;AAAA,MAKA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,aAAU;AAAA,UACV,OAAO,EAAE,UAAU,IAAI,OAAO,0BAA0B;AAAA,UAEvD,kBAAQ,WAAW,gBAAM,SACtB,GAAG,gBAAM,MAAM,WACf,GAAG,QAAQ,MAAM,OAAO,gBAAM,MAAM;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,IAEC,QAAQ,WAAW,IAClB,6CAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,SAAS,SAAS,GAAG;AAAA;AAAA,MAChE,MAAM,KAAK;AAAA,MAAE;AAAA,OAChC,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA;AAAA;AAAA,UAGT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,OAAO;AAAA,QACT;AAAA,QAEC,kBAAQ,IAAI,CAAC,QACZ;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,OAAO;AAAA,cACL,SAAS;AAAA,cACT,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,UAAU;AAAA,YACZ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,IAAI;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA,OAAO,EAAE,CAAC,kBAA4B,GAAG,MAAM;AAAA;AAAA,cACjD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA;AAAA;AAAA;AAAA,oBAIL,UAAU;AAAA,oBACV,cAAc;AAAA,oBACd,WAAW;AAAA,oBACX,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,OAAO;AAAA,kBACT;AAAA,kBAEC,cAAI;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,UAnCK,IAAI;AAAA,QAoCX,CACD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/icon/icon-preview.d.ts

@@ -0,0 +1,21 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Renders the WHOLE icon set as a labelled, searchable grid rather than a
+ * single glyph behind a select — so the panel answers "which icons exist
+ * and what are they called" at a glance, and stays usable as the set grows.
+ * Each cell shows the real <Icon> atom (so both path- and body-based glyphs
+ * render) above its `id` — the exact string you pass to `glyph=` — with the
+ * human label as a tooltip. The search filters on both id and label.
+ *
+ * Relies on the registry's `canvasFill` so the canvas fills width + top-
+ * aligns: the grid flows a flexible column count with the pane width, and
+ * typing in the search filters the grid in place — the block stays anchored
+ * to the top instead of re-centring and jumping as the result count changes.
+ *
+ * The size / stroke / colour knobs tune every icon at once. Colour flows
+ * through the atom's own `--uxm-icon-color` re-theme surface (the same
+ * variable a production consumer would set); Icon's stroke defaults to
+ * `currentColor`, so the wrapper colour is enough.
+ */
+export declare function IconPreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-preview.d.ts.map

package/dist/ui/icon/icon-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/icon/icon-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKrD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CAoGnD"}

package/dist/ui/icon/icon-preview.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Icon, ICONS, InputWithIcon } from "../../ui/index.js";
+function IconPreview({ styles }) {
+  const size = styles.size;
+  const strokeWidth = styles.strokeWidth;
+  const color = styles.color;
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const matches = q ? ICONS.filter((d) => d.id.toLowerCase().includes(q) || d.label.toLowerCase().includes(q)) : ICONS;
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        InputWithIcon,
+        {
+          type: "search",
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 16 }),
+          placeholder: "Search icons\u2026",
+          "aria-label": "Search icons",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onClear: () => setQuery("")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "status",
+          "aria-live": "polite",
+          style: { fontSize: 12, color: "var(--color-text-muted)" },
+          children: matches.length === ICONS.length ? `${ICONS.length} icons` : `${matches.length} of ${ICONS.length} icons`
+        }
+      )
+    ] }),
+    matches.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "var(--color-text-muted)", padding: "24px 0" }, children: [
+      "No icons match \u201C",
+      query.trim(),
+      "\u201D."
+    ] }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          // Flexible: auto-fill packs as many ≥88px cells as the pane width
+          // allows and reflows as it changes — no fixed column count/width.
+          gridTemplateColumns: "repeat(auto-fill, minmax(88px, 1fr))",
+          gap: 8,
+          width: "100%"
+        },
+        children: matches.map((def) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            title: def.label,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 8,
+              padding: "14px 8px",
+              border: "1px solid var(--color-border)",
+              borderRadius: 8,
+              backgroundColor: "var(--color-card)",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  glyph: def.id,
+                  size,
+                  strokeWidth,
+                  style: { ["--uxm-icon-color"]: color }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    // Wrap (don't ellipsis) so the full glyph id — the exact
+                    // string you pass to `glyph=` — is always readable, even long
+                    // ones like `question-mark-circle`. Label rides `title`.
+                    maxWidth: "100%",
+                    overflowWrap: "anywhere",
+                    textAlign: "center",
+                    lineHeight: 1.3,
+                    fontSize: 11,
+                    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+                    color: "var(--color-text-muted)"
+                  },
+                  children: def.id
+                }
+              )
+            ]
+          },
+          def.id
+        ))
+      }
+    )
+  ] });
+}
+export {
+  IconPreview
+};
+//# sourceMappingURL=icon-preview.js.map

package/dist/ui/icon/icon-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon/icon-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon, ICONS, InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Renders the WHOLE icon set as a labelled, searchable grid rather than a\n * single glyph behind a select — so the panel answers \"which icons exist\n * and what are they called\" at a glance, and stays usable as the set grows.\n * Each cell shows the real <Icon> atom (so both path- and body-based glyphs\n * render) above its `id` — the exact string you pass to `glyph=` — with the\n * human label as a tooltip. The search filters on both id and label.\n *\n * Relies on the registry's `canvasFill` so the canvas fills width + top-\n * aligns: the grid flows a flexible column count with the pane width, and\n * typing in the search filters the grid in place — the block stays anchored\n * to the top instead of re-centring and jumping as the result count changes.\n *\n * The size / stroke / colour knobs tune every icon at once. Colour flows\n * through the atom's own `--uxm-icon-color` re-theme surface (the same\n * variable a production consumer would set); Icon's stroke defaults to\n * `currentColor`, so the wrapper colour is enough.\n */\nexport function IconPreview({ styles }: PreviewProps) {\n  const size = styles.size as number;\n  const strokeWidth = styles.strokeWidth as number;\n  const color = styles.color as string;\n\n  const [query, setQuery] = useState('');\n  const q = query.trim().toLowerCase();\n  const matches = q\n    ? ICONS.filter((d) => d.id.toLowerCase().includes(q) || d.label.toLowerCase().includes(q))\n    : ICONS;\n\n  return (\n    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>\n      {/* Search + count sit directly on the canvas above the grid — no bar,\n          no sticky. Top-aligned (via the def's canvasFill) so typing filters\n          the grid in place without the block re-centring. */}\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n        <InputWithIcon\n          type=\"search\"\n          icon={<Icon glyph=\"search\" size={16} />}\n          placeholder=\"Search icons…\"\n          aria-label=\"Search icons\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          onClear={() => setQuery('')}\n        />\n        {/* Live region: filtering is a purely visual change to the grid below,\n            so without this a screen-reader user typing in the search gets no\n            feedback that anything happened. `polite` waits for a pause rather\n            than interrupting each keystroke. */}\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          style={{ fontSize: 12, color: 'var(--color-text-muted)' }}\n        >\n          {matches.length === ICONS.length\n            ? `${ICONS.length} icons`\n            : `${matches.length} of ${ICONS.length} icons`}\n        </div>\n      </div>\n\n      {matches.length === 0 ? (\n        <div style={{ fontSize: 13, color: 'var(--color-text-muted)', padding: '24px 0' }}>\n          No icons match “{query.trim()}”.\n        </div>\n      ) : (\n        <div\n          style={{\n            display: 'grid',\n            // Flexible: auto-fill packs as many ≥88px cells as the pane width\n            // allows and reflows as it changes — no fixed column count/width.\n            gridTemplateColumns: 'repeat(auto-fill, minmax(88px, 1fr))',\n            gap: 8,\n            width: '100%',\n          }}\n        >\n          {matches.map((def) => (\n            <div\n              key={def.id}\n              title={def.label}\n              style={{\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'center',\n                gap: 8,\n                padding: '14px 8px',\n                border: '1px solid var(--color-border)',\n                borderRadius: 8,\n                backgroundColor: 'var(--color-card)',\n                minWidth: 0,\n              }}\n            >\n              <Icon\n                glyph={def.id}\n                size={size}\n                strokeWidth={strokeWidth}\n                style={{ ['--uxm-icon-color' as string]: color } as CSSProperties}\n              />\n              <code\n                style={{\n                  // Wrap (don't ellipsis) so the full glyph id — the exact\n                  // string you pass to `glyph=` — is always readable, even long\n                  // ones like `question-mark-circle`. Label rides `title`.\n                  maxWidth: '100%',\n                  overflowWrap: 'anywhere',\n                  textAlign: 'center',\n                  lineHeight: 1.3,\n                  fontSize: 11,\n                  fontFamily: 'var(--font-mono, ui-monospace, monospace)',\n                  color: 'var(--color-text-muted)',\n                }}\n              >\n                {def.id}\n              </code>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAyCM,SAGU,KAHV;AAzCN,SAAS,gBAAgB;AAGzB,SAAS,MAAM,OAAO,qBAAqB;AAsBpC,SAAS,YAAY,EAAE,OAAO,GAAiB;AACpD,QAAM,OAAO,OAAO;AACpB,QAAM,cAAc,OAAO;AAC3B,QAAM,QAAQ,OAAO;AAErB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,IAAI,MAAM,KAAK,EAAE,YAAY;AACnC,QAAM,UAAU,IACZ,MAAM,OAAO,CAAC,MAAM,EAAE,GAAG,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,CAAC,IACvF;AAEJ,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GAI7E;AAAA,yBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAC7D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,IAAI;AAAA,UACrC,aAAY;AAAA,UACZ,cAAW;AAAA,UACX,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,MAC5B;AAAA,MAKA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,aAAU;AAAA,UACV,OAAO,EAAE,UAAU,IAAI,OAAO,0BAA0B;AAAA,UAEvD,kBAAQ,WAAW,MAAM,SACtB,GAAG,MAAM,MAAM,WACf,GAAG,QAAQ,MAAM,OAAO,MAAM,MAAM;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,IAEC,QAAQ,WAAW,IAClB,qBAAC,SAAI,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,SAAS,SAAS,GAAG;AAAA;AAAA,MAChE,MAAM,KAAK;AAAA,MAAE;AAAA,OAChC,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA;AAAA;AAAA,UAGT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,OAAO;AAAA,QACT;AAAA,QAEC,kBAAQ,IAAI,CAAC,QACZ;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,OAAO;AAAA,cACL,SAAS;AAAA,cACT,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,UAAU;AAAA,YACZ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,IAAI;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA,OAAO,EAAE,CAAC,kBAA4B,GAAG,MAAM;AAAA;AAAA,cACjD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA;AAAA;AAAA;AAAA,oBAIL,UAAU;AAAA,oBACV,cAAc;AAAA,oBACd,WAAW;AAAA,oBACX,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,OAAO;AAAA,kBACT;AAAA,kBAEC,cAAI;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,UAnCK,IAAI;AAAA,QAoCX,CACD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/icon/icon.cjs

@@ -0,0 +1,64 @@
+"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 icon_exports = {};
+__export(icon_exports, {
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icons = require("../../lib/icons.cjs");
+function Icon({ glyph, size = 24, strokeWidth = 1.75, className, ...rest }) {
+  const def = (0, import_icons.getIcon)(glyph);
+  if (!def) return null;
+  const ariaLabel = rest["aria-label"];
+  const commonProps = {
+    className: (0, import_helpers.cn)("uxm-icon", className),
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: def.filled ? "currentColor" : "none",
+    stroke: def.filled ? "none" : "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    // Decorative by default: without an explicit `aria-label` the glyph is
+    // hidden from the accessibility tree, so an icon+text control's name is
+    // its text alone (the registry label used to leak in — "Kebab (More)
+    // Publish"-style names). Pass `aria-label` to make a standalone icon
+    // informative; an explicit `aria-hidden` in `...rest` still wins.
+    // Truthy check on purpose: `aria-label=""` is not a name — it stays
+    // decorative rather than becoming an UNNAMED `role="img"`.
+    ...ariaLabel ? { role: "img" } : { "aria-hidden": true },
+    ...rest
+  };
+  if (def.body) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...commonProps, dangerouslySetInnerHTML: { __html: def.body } });
+  }
+  if (def.path) {
+    const segments = def.path.split(/(?=M)/);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...commonProps, children: segments.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d }, i)) });
+  }
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon
+});
+//# sourceMappingURL=icon.cjs.map

package/dist/ui/icon/icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon/icon.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { getIcon } from '@/lib/icons';\n\nimport type { SVGAttributes } from 'react';\n\nexport interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {\n  glyph: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport function Icon({ glyph, size = 24, strokeWidth = 1.75, className, ...rest }: IconProps) {\n  const def = getIcon(glyph);\n  if (!def) return null;\n\n  const ariaLabel = (rest as { 'aria-label'?: string })['aria-label'];\n\n  const commonProps = {\n    className: cn('uxm-icon', className),\n    width: size,\n    height: size,\n    viewBox: '0 0 24 24',\n    fill: def.filled ? 'currentColor' : 'none',\n    stroke: def.filled ? 'none' : 'currentColor',\n    strokeWidth,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    // Decorative by default: without an explicit `aria-label` the glyph is\n    // hidden from the accessibility tree, so an icon+text control's name is\n    // its text alone (the registry label used to leak in — \"Kebab (More)\n    // Publish\"-style names). Pass `aria-label` to make a standalone icon\n    // informative; an explicit `aria-hidden` in `...rest` still wins.\n    // Truthy check on purpose: `aria-label=\"\"` is not a name — it stays\n    // decorative rather than becoming an UNNAMED `role=\"img\"`.\n    ...(ariaLabel\n      ? { role: 'img' as const }\n      : { 'aria-hidden': true }),\n    ...rest,\n  };\n\n  if (def.body) {\n    return <svg {...commonProps} dangerouslySetInnerHTML={{ __html: def.body }} />;\n  }\n\n  if (def.path) {\n    const segments = def.path.split(/(?=M)/);\n    return (\n      <svg {...commonProps}>\n        {segments.map((d, i) => (\n          <path key={i} d={d} />\n        ))}\n      </svg>\n    );\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCW;AAzCX,qBAAmB;AACnB,mBAAwB;AAUjB,SAAS,KAAK,EAAE,OAAO,OAAO,IAAI,cAAc,MAAM,WAAW,GAAG,KAAK,GAAc;AAC5F,QAAM,UAAM,sBAAQ,KAAK;AACzB,MAAI,CAAC,IAAK,QAAO;AAEjB,QAAM,YAAa,KAAmC,YAAY;AAElE,QAAM,cAAc;AAAA,IAClB,eAAW,mBAAG,YAAY,SAAS;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM,IAAI,SAAS,iBAAiB;AAAA,IACpC,QAAQ,IAAI,SAAS,SAAS;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQhB,GAAI,YACA,EAAE,MAAM,MAAe,IACvB,EAAE,eAAe,KAAK;AAAA,IAC1B,GAAG;AAAA,EACL;AAEA,MAAI,IAAI,MAAM;AACZ,WAAO,4CAAC,SAAK,GAAG,aAAa,yBAAyB,EAAE,QAAQ,IAAI,KAAK,GAAG;AAAA,EAC9E;AAEA,MAAI,IAAI,MAAM;AACZ,UAAM,WAAW,IAAI,KAAK,MAAM,OAAO;AACvC,WACE,4CAAC,SAAK,GAAG,aACN,mBAAS,IAAI,CAAC,GAAG,MAChB,4CAAC,UAAa,KAAH,CAAS,CACrB,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;","names":[]}

package/dist/ui/icon/icon.css

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+/* ── icon ── */
+.uxm-icon {
+  display: inline-block;
+  color: var(--uxm-icon-color, inherit);
+}

package/dist/ui/icon/icon.d.ts

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'react';
+export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
+    glyph: string;
+    size?: number;
+    strokeWidth?: number;
+}
+export declare function Icon({ glyph, size, strokeWidth, className, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/ui/icon/icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,WAAkB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,kDA6C3F"}

package/dist/ui/icon/icon.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { getIcon } from "../../lib/icons.js";
+function Icon({ glyph, size = 24, strokeWidth = 1.75, className, ...rest }) {
+  const def = getIcon(glyph);
+  if (!def) return null;
+  const ariaLabel = rest["aria-label"];
+  const commonProps = {
+    className: cn("uxm-icon", className),
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: def.filled ? "currentColor" : "none",
+    stroke: def.filled ? "none" : "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    // Decorative by default: without an explicit `aria-label` the glyph is
+    // hidden from the accessibility tree, so an icon+text control's name is
+    // its text alone (the registry label used to leak in — "Kebab (More)
+    // Publish"-style names). Pass `aria-label` to make a standalone icon
+    // informative; an explicit `aria-hidden` in `...rest` still wins.
+    // Truthy check on purpose: `aria-label=""` is not a name — it stays
+    // decorative rather than becoming an UNNAMED `role="img"`.
+    ...ariaLabel ? { role: "img" } : { "aria-hidden": true },
+    ...rest
+  };
+  if (def.body) {
+    return /* @__PURE__ */ jsx("svg", { ...commonProps, dangerouslySetInnerHTML: { __html: def.body } });
+  }
+  if (def.path) {
+    const segments = def.path.split(/(?=M)/);
+    return /* @__PURE__ */ jsx("svg", { ...commonProps, children: segments.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+  }
+  return null;
+}
+export {
+  Icon
+};
+//# sourceMappingURL=icon.js.map

package/dist/ui/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon/icon.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { getIcon } from '@/lib/icons';\n\nimport type { SVGAttributes } from 'react';\n\nexport interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {\n  glyph: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport function Icon({ glyph, size = 24, strokeWidth = 1.75, className, ...rest }: IconProps) {\n  const def = getIcon(glyph);\n  if (!def) return null;\n\n  const ariaLabel = (rest as { 'aria-label'?: string })['aria-label'];\n\n  const commonProps = {\n    className: cn('uxm-icon', className),\n    width: size,\n    height: size,\n    viewBox: '0 0 24 24',\n    fill: def.filled ? 'currentColor' : 'none',\n    stroke: def.filled ? 'none' : 'currentColor',\n    strokeWidth,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    // Decorative by default: without an explicit `aria-label` the glyph is\n    // hidden from the accessibility tree, so an icon+text control's name is\n    // its text alone (the registry label used to leak in — \"Kebab (More)\n    // Publish\"-style names). Pass `aria-label` to make a standalone icon\n    // informative; an explicit `aria-hidden` in `...rest` still wins.\n    // Truthy check on purpose: `aria-label=\"\"` is not a name — it stays\n    // decorative rather than becoming an UNNAMED `role=\"img\"`.\n    ...(ariaLabel\n      ? { role: 'img' as const }\n      : { 'aria-hidden': true }),\n    ...rest,\n  };\n\n  if (def.body) {\n    return <svg {...commonProps} dangerouslySetInnerHTML={{ __html: def.body }} />;\n  }\n\n  if (def.path) {\n    const segments = def.path.split(/(?=M)/);\n    return (\n      <svg {...commonProps}>\n        {segments.map((d, i) => (\n          <path key={i} d={d} />\n        ))}\n      </svg>\n    );\n  }\n\n  return null;\n}\n"],"mappings":"AAyCW;AAzCX,SAAS,UAAU;AACnB,SAAS,eAAe;AAUjB,SAAS,KAAK,EAAE,OAAO,OAAO,IAAI,cAAc,MAAM,WAAW,GAAG,KAAK,GAAc;AAC5F,QAAM,MAAM,QAAQ,KAAK;AACzB,MAAI,CAAC,IAAK,QAAO;AAEjB,QAAM,YAAa,KAAmC,YAAY;AAElE,QAAM,cAAc;AAAA,IAClB,WAAW,GAAG,YAAY,SAAS;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM,IAAI,SAAS,iBAAiB;AAAA,IACpC,QAAQ,IAAI,SAAS,SAAS;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQhB,GAAI,YACA,EAAE,MAAM,MAAe,IACvB,EAAE,eAAe,KAAK;AAAA,IAC1B,GAAG;AAAA,EACL;AAEA,MAAI,IAAI,MAAM;AACZ,WAAO,oBAAC,SAAK,GAAG,aAAa,yBAAyB,EAAE,QAAQ,IAAI,KAAK,GAAG;AAAA,EAC9E;AAEA,MAAI,IAAI,MAAM;AACZ,UAAM,WAAW,IAAI,KAAK,MAAM,OAAO;AACvC,WACE,oBAAC,SAAK,GAAG,aACN,mBAAS,IAAI,CAAC,GAAG,MAChB,oBAAC,UAAa,KAAH,CAAS,CACrB,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;","names":[]}

package/dist/ui/icon/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 icon_exports = {};
+module.exports = __toCommonJS(icon_exports);
+__reExport(icon_exports, require("./icon.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./icon.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/icon/index.cjs.map

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

package/dist/ui/icon/index.d.ts

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

package/dist/ui/icon/index.d.ts.map

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

package/dist/ui/icon/index.js

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

package/dist/ui/icon/index.js.map

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

package/dist/ui/icon-button/icon-button-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 icon_button_preview_exports = {};
+__export(icon_button_preview_exports, {
+  IconButtonPreview: () => IconButtonPreview
+});
+module.exports = __toCommonJS(icon_button_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+function IconButtonPreview({ styles, variants }) {
+  const glyph = variants.glyph ?? "close";
+  const state = variants.state ?? "default";
+  const def = (0, import_ui.getIcon)(glyph);
+  const [hover, setHover] = (0, import_react.useState)(false);
+  const [pressed, setPressed] = (0, import_react.useState)(false);
+  const forced = state !== "default";
+  const isHover = forced ? state === "hover" : hover;
+  const isPressed = forced ? state === "active" : pressed;
+  const isFocused = state === "focus";
+  const isDisabled = state === "disabled";
+  const isForcedState = forced;
+  const iconSize = styles.iconSize;
+  const fallback = (stateValue, base) => stateValue !== void 0 ? stateValue : base;
+  const currentBg = isPressed ? fallback(styles.activeBackgroundColor, styles.backgroundColor) : isHover ? fallback(styles.hoverBackgroundColor, styles.backgroundColor) : styles.backgroundColor;
+  const currentColor = isDisabled ? fallback(styles.disabledColor, styles.color) : isPressed ? fallback(styles.activeColor, styles.color) : isHover ? fallback(styles.hoverColor, styles.color) : isFocused ? fallback(styles.focusColor, styles.color) : styles.color;
+  const cssVars = {
+    "--uxm-icon-button-size": `${styles.size}px`,
+    "--uxm-icon-button-radius": `${styles.borderRadius}px`,
+    "--uxm-icon-button-icon-size": `${iconSize}px`,
+    "--uxm-icon-button-stroke-width": styles.strokeWidth.toString(),
+    // Default-state values projected as custom props so real `:hover` still
+    // wins on actual pointer interaction in the editor canvas.
+    "--uxm-icon-button-bg": styles.backgroundColor,
+    "--uxm-icon-button-color": styles.color,
+    // Per-state vars the production CSS rules read.
+    "--uxm-icon-button-hover-bg": styles.hoverBackgroundColor,
+    "--uxm-icon-button-hover-color": styles.hoverColor,
+    "--uxm-icon-button-active-bg": styles.activeBackgroundColor,
+    "--uxm-icon-button-active-color": styles.activeColor,
+    "--uxm-icon-button-focus-ring-color": styles.focusRingColor,
+    "--uxm-icon-button-focus-color": styles.focusColor,
+    "--uxm-icon-button-disabled-opacity": styles.disabledOpacity.toString(),
+    "--uxm-icon-button-disabled-color": styles.disabledColor,
+    // Forced-state direct overrides keep the previewed state painted
+    // regardless of real pointer/keyboard interaction. Default state skips
+    // these so `:hover` etc. still trigger naturally.
+    ...isForcedState ? {
+      backgroundColor: currentBg,
+      color: currentColor
+    } : {},
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui3.IconButton,
+    {
+      "aria-label": def?.label ?? glyph,
+      disabled: isDisabled,
+      onMouseEnter: () => !forced && setHover(true),
+      onMouseLeave: () => {
+        if (!forced) {
+          setHover(false);
+          setPressed(false);
+        }
+      },
+      onMouseDown: () => !forced && setPressed(true),
+      onMouseUp: () => !forced && setPressed(false),
+      style: cssVars,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph, size: iconSize, strokeWidth: styles.strokeWidth })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButtonPreview
+});
+//# sourceMappingURL=icon-button-preview.cjs.map

package/dist/ui/icon-button/icon-button-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { getIcon } from '@/ui';\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\n\n/**\n * Renders the real <IconButton> with state-aware projection. Default-state\n * preview projects bg/color as custom properties (so real `:hover` works in\n * the editor canvas); forced states inline direct overrides so the chosen\n * state stays painted regardless of pointer/keyboard interaction. Mirrors\n * the same pattern used by `plainButtonStateStyle` for the labelled button\n * family.\n *\n * Uses the real <Icon> atom for the glyph render so every glyph type\n * works — both path- and body-based.\n */\nexport function IconButtonPreview({ styles, variants }: PreviewProps) {\n  const glyph = (variants.glyph as string) ?? 'close';\n  const state = (variants.state as string) ?? 'default';\n  const def = getIcon(glyph);\n\n  const [hover, setHover] = useState(false);\n  const [pressed, setPressed] = useState(false);\n  const forced = state !== 'default';\n  const isHover = forced ? state === 'hover' : hover;\n  const isPressed = forced ? state === 'active' : pressed;\n  const isFocused = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isForcedState = forced;\n\n  const iconSize = styles.iconSize as number;\n\n  const fallback = <T,>(stateValue: T | undefined, base: T) =>\n    stateValue !== undefined ? stateValue : base;\n\n  const currentBg = isPressed\n    ? fallback(styles.activeBackgroundColor as string | undefined, styles.backgroundColor as string)\n    : isHover\n    ? fallback(styles.hoverBackgroundColor as string | undefined, styles.backgroundColor as string)\n    : (styles.backgroundColor as string);\n  const currentColor = isDisabled\n    ? fallback(styles.disabledColor as string | undefined, styles.color as string)\n    : isPressed\n    ? fallback(styles.activeColor as string | undefined, styles.color as string)\n    : isHover\n    ? fallback(styles.hoverColor as string | undefined, styles.color as string)\n    : isFocused\n    ? fallback(styles.focusColor as string | undefined, styles.color as string)\n    : (styles.color as string);\n\n  const cssVars: CSSProperties = {\n    '--uxm-icon-button-size': `${styles.size}px`,\n    '--uxm-icon-button-radius': `${styles.borderRadius}px`,\n    '--uxm-icon-button-icon-size': `${iconSize}px`,\n    '--uxm-icon-button-stroke-width': (styles.strokeWidth as number).toString(),\n    // Default-state values projected as custom props so real `:hover` still\n    // wins on actual pointer interaction in the editor canvas.\n    '--uxm-icon-button-bg': styles.backgroundColor as string,\n    '--uxm-icon-button-color': styles.color as string,\n    // Per-state vars the production CSS rules read.\n    '--uxm-icon-button-hover-bg': styles.hoverBackgroundColor as string,\n    '--uxm-icon-button-hover-color': styles.hoverColor as string,\n    '--uxm-icon-button-active-bg': styles.activeBackgroundColor as string | undefined,\n    '--uxm-icon-button-active-color': styles.activeColor as string | undefined,\n    '--uxm-icon-button-focus-ring-color': styles.focusRingColor as string | undefined,\n    '--uxm-icon-button-focus-color': styles.focusColor as string | undefined,\n    '--uxm-icon-button-disabled-opacity': (styles.disabledOpacity as number).toString(),\n    '--uxm-icon-button-disabled-color': styles.disabledColor as string | undefined,\n    // Forced-state direct overrides keep the previewed state painted\n    // regardless of real pointer/keyboard interaction. Default state skips\n    // these so `:hover` etc. still trigger naturally.\n    ...(isForcedState\n      ? {\n          backgroundColor: currentBg,\n          color: currentColor,\n        }\n      : {}),\n    ...(isFocused\n      ? {\n          outline: `2px solid ${styles.focusRingColor as string}`,\n          outlineOffset: 2,\n        }\n      : {}),\n  } as CSSProperties;\n\n  return (\n    <div style={{ padding: 16, display: 'inline-flex' }}>\n      <IconButton\n        aria-label={def?.label ?? glyph}\n        disabled={isDisabled}\n        onMouseEnter={() => !forced && setHover(true)}\n        onMouseLeave={() => {\n          if (!forced) {\n            setHover(false);\n            setPressed(false);\n          }\n        }}\n        onMouseDown={() => !forced && setPressed(true)}\n        onMouseUp={() => !forced && setPressed(false)}\n        style={cssVars}\n      >\n        <Icon glyph={glyph} size={iconSize} strokeWidth={styles.strokeWidth as number} />\n      </IconButton>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGQ;AAvGR,mBAA6C;AAG7C,gBAAwB;AACxB,IAAAA,aAAqB;AACrB,IAAAA,aAA2B;AAapB,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAM,mBAAQ,KAAK;AAEzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,SAAS,UAAU,UAAU;AAC7C,QAAM,YAAY,SAAS,UAAU,WAAW;AAChD,QAAM,YAAY,UAAU;AAC5B,QAAM,aAAa,UAAU;AAC7B,QAAM,gBAAgB;AAEtB,QAAM,WAAW,OAAO;AAExB,QAAM,WAAW,CAAK,YAA2B,SAC/C,eAAe,SAAY,aAAa;AAE1C,QAAM,YAAY,YACd,SAAS,OAAO,uBAA6C,OAAO,eAAyB,IAC7F,UACA,SAAS,OAAO,sBAA4C,OAAO,eAAyB,IAC3F,OAAO;AACZ,QAAM,eAAe,aACjB,SAAS,OAAO,eAAqC,OAAO,KAAe,IAC3E,YACA,SAAS,OAAO,aAAmC,OAAO,KAAe,IACzE,UACA,SAAS,OAAO,YAAkC,OAAO,KAAe,IACxE,YACA,SAAS,OAAO,YAAkC,OAAO,KAAe,IACvE,OAAO;AAEZ,QAAM,UAAyB;AAAA,IAC7B,0BAA0B,GAAG,OAAO,IAAI;AAAA,IACxC,4BAA4B,GAAG,OAAO,YAAY;AAAA,IAClD,+BAA+B,GAAG,QAAQ;AAAA,IAC1C,kCAAmC,OAAO,YAAuB,SAAS;AAAA;AAAA;AAAA,IAG1E,wBAAwB,OAAO;AAAA,IAC/B,2BAA2B,OAAO;AAAA;AAAA,IAElC,8BAA8B,OAAO;AAAA,IACrC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,iCAAiC,OAAO;AAAA,IACxC,sCAAuC,OAAO,gBAA2B,SAAS;AAAA,IAClF,oCAAoC,OAAO;AAAA;AAAA;AAAA;AAAA,IAI3C,GAAI,gBACA;AAAA,MACE,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT,IACA,CAAC;AAAA,IACL,GAAI,YACA;AAAA,MACE,SAAS,aAAa,OAAO,cAAwB;AAAA,MACrD,eAAe;AAAA,IACjB,IACA,CAAC;AAAA,EACP;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,IAAI,SAAS,cAAc,GAChD;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,KAAK,SAAS;AAAA,MAC1B,UAAU;AAAA,MACV,cAAc,MAAM,CAAC,UAAU,SAAS,IAAI;AAAA,MAC5C,cAAc,MAAM;AAClB,YAAI,CAAC,QAAQ;AACX,mBAAS,KAAK;AACd,qBAAW,KAAK;AAAA,QAClB;AAAA,MACF;AAAA,MACA,aAAa,MAAM,CAAC,UAAU,WAAW,IAAI;AAAA,MAC7C,WAAW,MAAM,CAAC,UAAU,WAAW,KAAK;AAAA,MAC5C,OAAO;AAAA,MAEP,sDAAC,mBAAK,OAAc,MAAM,UAAU,aAAa,OAAO,aAAuB;AAAA;AAAA,EACjF,GACF;AAEJ;","names":["import_ui"]}

package/dist/ui/icon-button/icon-button-preview.d.ts

@@ -0,0 +1,14 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Renders the real <IconButton> with state-aware projection. Default-state
+ * preview projects bg/color as custom properties (so real `:hover` works in
+ * the editor canvas); forced states inline direct overrides so the chosen
+ * state stays painted regardless of pointer/keyboard interaction. Mirrors
+ * the same pattern used by `plainButtonStateStyle` for the labelled button
+ * family.
+ *
+ * Uses the real <Icon> atom for the glyph render so every glyph type
+ * works — both path- and body-based.
+ */
+export declare function IconButtonPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button-preview.d.ts.map

package/dist/ui/icon-button/icon-button-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-button/icon-button-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAyFnE"}