@viax.io/uxm 4.36.0

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function DividerPreview({ styles }) {
+  const showLabel = styles.showLabel;
+  const thickness = styles.thickness;
+  return /* @__PURE__ */ jsxs("div", { style: { width: 380, display: "flex", flexDirection: "column", gap: 28 }, children: [
+    !showLabel && /* @__PURE__ */ jsx("div", { style: {
+      height: thickness,
+      backgroundColor: styles.color,
+      borderRadius: thickness > 1 ? thickness / 2 : 0
+    } }),
+    showLabel && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: styles.gap }, children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: thickness, backgroundColor: styles.color } }),
+      /* @__PURE__ */ jsx("span", { style: {
+        fontSize: styles.labelSize,
+        fontWeight: 600,
+        color: styles.labelColor,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em"
+      }, children: "Section" }),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: thickness, backgroundColor: styles.color } })
+    ] })
+  ] });
+}
+export {
+  DividerPreview
+};
+//# sourceMappingURL=divider-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/divider/divider-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\n\nexport function DividerPreview({ styles }: PreviewProps) {\n  const showLabel = styles.showLabel as boolean;\n  const thickness = styles.thickness as number;\n  return (\n    <div style={{ width: 380, display: 'flex', flexDirection: 'column', gap: 28 }}>\n      {!showLabel && (\n        <div style={{\n          height: thickness,\n          backgroundColor: styles.color as string,\n          borderRadius: thickness > 1 ? thickness / 2 : 0,\n        }} />\n      )}\n      {showLabel && (\n        <div style={{ display: 'flex', alignItems: 'center', gap: styles.gap as number }}>\n          <div style={{ flex: 1, height: thickness, backgroundColor: styles.color as string }} />\n          <span style={{\n            fontSize: styles.labelSize as number,\n            fontWeight: 600,\n            color: styles.labelColor as string,\n            textTransform: 'uppercase',\n            letterSpacing: '0.08em',\n          }}>Section</span>\n          <div style={{ flex: 1, height: thickness, backgroundColor: styles.color as string }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAQQ,cAOA,YAPA;AAND,SAAS,eAAe,EAAE,OAAO,GAAiB;AACvD,QAAM,YAAY,OAAO;AACzB,QAAM,YAAY,OAAO;AACzB,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,KAAK,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GACzE;AAAA,KAAC,aACA,oBAAC,SAAI,OAAO;AAAA,MACV,QAAQ;AAAA,MACR,iBAAiB,OAAO;AAAA,MACxB,cAAc,YAAY,IAAI,YAAY,IAAI;AAAA,IAChD,GAAG;AAAA,IAEJ,aACC,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,OAAO,IAAc,GAC7E;AAAA,0BAAC,SAAI,OAAO,EAAE,MAAM,GAAG,QAAQ,WAAW,iBAAiB,OAAO,MAAgB,GAAG;AAAA,MACrF,oBAAC,UAAK,OAAO;AAAA,QACX,UAAU,OAAO;AAAA,QACjB,YAAY;AAAA,QACZ,OAAO,OAAO;AAAA,QACd,eAAe;AAAA,QACf,eAAe;AAAA,MACjB,GAAG,qBAAO;AAAA,MACV,oBAAC,SAAI,OAAO,EAAE,MAAM,GAAG,QAAQ,WAAW,iBAAiB,OAAO,MAAgB,GAAG;AAAA,OACvF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/divider/divider.cjs

@@ -0,0 +1,40 @@
+"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 divider_exports = {};
+__export(divider_exports, {
+  Divider: () => Divider
+});
+module.exports = __toCommonJS(divider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function Divider({ label, className, ...rest }) {
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-divider", "uxm-divider--with-label", className), ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-divider__line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-divider__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-divider__line" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "separator", className: (0, import_helpers.cn)("uxm-divider", className), ...rest });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider
+});
+//# sourceMappingURL=divider.cjs.map

package/dist/ui/divider/divider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/divider/divider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode;\n}\n\nexport function Divider({ label, className, ...rest }: DividerProps) {\n  if (label) {\n    return (\n      <div className={cn('uxm-divider', 'uxm-divider--with-label', className)} {...rest}>\n        <span className=\"uxm-divider__line\" />\n        <span className=\"uxm-divider__label\">{label}</span>\n        <span className=\"uxm-divider__line\" />\n      </div>\n    );\n  }\n  return <div role=\"separator\" className={cn('uxm-divider', className)} {...rest} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWM;AAXN,qBAAmB;AAQZ,SAAS,QAAQ,EAAE,OAAO,WAAW,GAAG,KAAK,GAAiB;AACnE,MAAI,OAAO;AACT,WACE,6CAAC,SAAI,eAAW,mBAAG,eAAe,2BAA2B,SAAS,GAAI,GAAG,MAC3E;AAAA,kDAAC,UAAK,WAAU,qBAAoB;AAAA,MACpC,4CAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,MAC5C,4CAAC,UAAK,WAAU,qBAAoB;AAAA,OACtC;AAAA,EAEJ;AACA,SAAO,4CAAC,SAAI,MAAK,aAAY,eAAW,mBAAG,eAAe,SAAS,GAAI,GAAG,MAAM;AAClF;","names":[]}

package/dist/ui/divider/divider.css

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+/* ── divider ── */
+.uxm-divider {
+  background-color: var(--uxm-divider-color, var(--color-border));
+  border-radius: 1px;
+  height: var(--uxm-divider-thickness, 1px);
+}
+.uxm-divider--with-label {
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  gap: var(--uxm-divider-gap, 12px);
+  height: auto;
+}
+.uxm-divider--with-label .uxm-divider__line {
+  background-color: var(--uxm-divider-color, var(--color-border));
+  flex: 1;
+  height: var(--uxm-divider-thickness, 1px);
+}
+.uxm-divider--with-label .uxm-divider__label {
+  color: var(--uxm-divider-label-color, var(--color-text-muted));
+  font-size: calc(var(--uxm-divider-label-size, 11px) * var(--type-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}

package/dist/ui/divider/divider.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+}
+export declare function Divider({ label, className, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/ui/divider/divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAWlE"}

package/dist/ui/divider/divider.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function Divider({ label, className, ...rest }) {
+  if (label) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("uxm-divider", "uxm-divider--with-label", className), ...rest, children: [
+      /* @__PURE__ */ jsx("span", { className: "uxm-divider__line" }),
+      /* @__PURE__ */ jsx("span", { className: "uxm-divider__label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "uxm-divider__line" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: cn("uxm-divider", className), ...rest });
+}
+export {
+  Divider
+};
+//# sourceMappingURL=divider.js.map

package/dist/ui/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/divider/divider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode;\n}\n\nexport function Divider({ label, className, ...rest }: DividerProps) {\n  if (label) {\n    return (\n      <div className={cn('uxm-divider', 'uxm-divider--with-label', className)} {...rest}>\n        <span className=\"uxm-divider__line\" />\n        <span className=\"uxm-divider__label\">{label}</span>\n        <span className=\"uxm-divider__line\" />\n      </div>\n    );\n  }\n  return <div role=\"separator\" className={cn('uxm-divider', className)} {...rest} />;\n}\n"],"mappings":"AAWM,SACE,KADF;AAXN,SAAS,UAAU;AAQZ,SAAS,QAAQ,EAAE,OAAO,WAAW,GAAG,KAAK,GAAiB;AACnE,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,GAAG,eAAe,2BAA2B,SAAS,GAAI,GAAG,MAC3E;AAAA,0BAAC,UAAK,WAAU,qBAAoB;AAAA,MACpC,oBAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,MAC5C,oBAAC,UAAK,WAAU,qBAAoB;AAAA,OACtC;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,MAAK,aAAY,WAAW,GAAG,eAAe,SAAS,GAAI,GAAG,MAAM;AAClF;","names":[]}

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

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

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

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

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

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

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

package/dist/ui/divider/index.js

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

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

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

package/dist/ui/editable-cell/editable-cell-preview.cjs

@@ -0,0 +1,238 @@
+"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 editable_cell_preview_exports = {};
+__export(editable_cell_preview_exports, {
+  EditableCellPreview: () => EditableCellPreview
+});
+module.exports = __toCommonJS(editable_cell_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+const sectionLabel = {
+  fontSize: 11,
+  color: "var(--color-text-muted)",
+  marginBottom: 12,
+  letterSpacing: 0.5,
+  textTransform: "uppercase"
+};
+function buildVars(styles) {
+  return {
+    "--uxm-editable-cell-radius": `${styles.radius}px`,
+    // Per-size width caps — passed verbatim, never px-suffixed: both knobs are
+    // selects whose values are already CSS (`none` / `320px`), matching the
+    // Font Size pair below.
+    "--uxm-editable-cell-small-max-width": styles.smallMaxWidth ?? "320px",
+    "--uxm-editable-cell-medium-max-width": styles.mediumMaxWidth ?? "none",
+    // Symmetric per-size dimension knobs — each set is read only by its own
+    // size modifier, so writing both alongside each other is harmless.
+    "--uxm-editable-cell-small-padding-x": `${styles.smallPaddingX ?? 8}px`,
+    "--uxm-editable-cell-small-padding-y": `${styles.smallPaddingY ?? 4}px`,
+    // Passed through verbatim, not suffixed with px: the knob is a select whose
+    // default is the literal `inherit`, matching the CSS fallback (`1em`). The
+    // canvas gets its table scale from the `fontSize` context below instead of
+    // by pinning this var — so an untouched knob previews the real inheriting
+    // behaviour rather than a hardcoded 13px the CSS never applies.
+    "--uxm-editable-cell-small-font-size": styles.smallFontSize ?? "inherit",
+    "--uxm-editable-cell-medium-padding-x": `${styles.mediumPaddingX ?? 12}px`,
+    "--uxm-editable-cell-medium-padding-y": `${styles.mediumPaddingY ?? 6}px`,
+    "--uxm-editable-cell-medium-font-size": styles.mediumFontSize ?? "14px",
+    "--uxm-editable-cell-hover-bg": styles.hoverBg,
+    "--uxm-editable-cell-pencil-color": styles.pencilColor,
+    "--uxm-editable-cell-focus-border": styles.focusBorder,
+    "--uxm-editable-cell-focus-ring": styles.focusRing,
+    "--uxm-editable-cell-color": styles.color,
+    "--uxm-editable-cell-placeholder-color": styles.placeholderColor,
+    "--uxm-editable-cell-disabled-opacity": String(styles.disabledOpacity ?? 0.55),
+    "--uxm-editable-cell-input-bg": styles.inputBg,
+    "--uxm-editable-cell-input-color": styles.inputColor,
+    "--uxm-editable-cell-input-border": styles.inputBorder,
+    "--uxm-editable-cell-input-focus-border": styles.inputFocusBorder,
+    "--uxm-editable-cell-clear-color": styles.clearColor,
+    "--uxm-editable-cell-clear-hover-bg": styles.clearHoverBg,
+    "--uxm-editable-cell-warning-border": styles.warningBorder,
+    "--uxm-editable-cell-error-border": styles.errorBorder,
+    width: 280,
+    // The canvas' own font is larger than a table's, which would make a `small`
+    // cell read as oversized. Setting the surrounding CONTEXT to DataTable's
+    // 13px cell font — rather than pinning the cell's font-size var — previews
+    // the dense table scale while keeping `small`'s documented inherit
+    // behaviour intact. `medium` pins 14px itself, so it's unaffected.
+    fontSize: 13
+  };
+}
+const SAMPLE_OPTIONS = [
+  { value: "growth", label: "Growth" },
+  { value: "retention", label: "Retention" },
+  { value: "expansion", label: "Expansion" },
+  { value: "winback", label: "Win-back" }
+];
+const commitDelay = () => new Promise((r) => setTimeout(r, 400));
+function useCellState() {
+  const [text, setText] = (0, import_react.useState)("Revenue Motion");
+  const [num, setNum] = (0, import_react.useState)(42);
+  const [date, setDate] = (0, import_react.useState)("2026-03-14");
+  const [select, setSelect] = (0, import_react.useState)("growth");
+  const [multi, setMulti] = (0, import_react.useState)(["growth", "expansion"]);
+  return {
+    text,
+    num,
+    date,
+    select,
+    multi,
+    commitText: async (n) => {
+      await commitDelay();
+      setText(String(Array.isArray(n) ? n.join(", ") : n));
+    },
+    commitNumber: async (n) => {
+      await commitDelay();
+      setNum(n === "" ? "" : Number(n));
+    },
+    commitDate: async (n) => {
+      await commitDelay();
+      setDate(String(n));
+    },
+    commitSelect: async (n) => {
+      await commitDelay();
+      setSelect(String(n));
+    },
+    commitMulti: async (n) => {
+      await commitDelay();
+      setMulti(Array.isArray(n) ? n : n === "" ? [] : [String(n)]);
+    }
+  };
+}
+function EditableCellPreview({ styles, variants }) {
+  const type = variants.type ?? "text";
+  const align = variants.align ?? "left";
+  const size = variants.size ?? "small";
+  const dateFormat = variants.dateFormat ?? "ymd";
+  const state = variants.state ?? "default";
+  const inputStates = ["editing", "warning", "error"];
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-editable-cell--state-hover",
+    state === "focus" && "uxm-editable-cell--state-focus",
+    // `open` is the pickers' editing state: forcing the real `--open` class
+    // paints the editing chrome on the trigger and reveals its ✕, without
+    // actually mounting the Listbox panel over the canvas.
+    state === "open" && "uxm-editable-cell--open",
+    inputStates.includes(state) && "uxm-editable-cell--force-input-focus"
+  );
+  const forceMode = inputStates.includes(state) ? state : void 0;
+  const showcase = useCellState();
+  const interactive = useCellState();
+  const vars = buildVars(styles);
+  const showcaseChrome = {
+    align,
+    size,
+    forceMode,
+    disabled: state === "disabled",
+    className: forcedClass || void 0
+  };
+  const renderCell = (chrome, c) => {
+    switch (type) {
+      case "number":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.EditableCell,
+          {
+            ...chrome,
+            type: "number",
+            value: c.num,
+            onCommit: c.commitNumber,
+            placeholder: "Enter a number\u2026",
+            validate: (v) => typeof v === "number" && v < 0 ? "Must be \u2265 0" : null
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.EditableCell,
+          {
+            ...chrome,
+            type: "date",
+            value: c.date,
+            dateFormat,
+            onCommit: c.commitDate
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.EditableCell,
+          {
+            ...chrome,
+            type: "select",
+            value: c.select,
+            options: SAMPLE_OPTIONS,
+            onCommit: c.commitSelect,
+            placeholder: "Pick a motion\u2026"
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.EditableCell,
+          {
+            ...chrome,
+            type: "multiselect",
+            value: c.multi,
+            options: SAMPLE_OPTIONS,
+            onCommit: c.commitMulti,
+            placeholder: "Pick motions\u2026"
+          }
+        );
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.EditableCell,
+          {
+            ...chrome,
+            type: "text",
+            value: c.text,
+            onCommit: c.commitText,
+            placeholder: "Enter a name\u2026"
+          }
+        );
+    }
+  };
+  const showcaseCell = renderCell(showcaseChrome, showcase);
+  const interactiveCell = renderCell({ align, size }, interactive);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        type,
+        " cell (",
+        size,
+        ", ",
+        align,
+        ") \u2014 ",
+        state
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: vars, children: showcaseCell })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        "Interactive \u2014 ",
+        type
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: vars, children: interactiveCell })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditableCellPreview
+});
+//# sourceMappingURL=editable-cell-preview.cjs.map

package/dist/ui/editable-cell/editable-cell-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/editable-cell/editable-cell-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport {\n  EditableCell,\n  type EditableCellAlign,\n  type EditableCellOption,\n  type EditableCellSize,\n  type EditableCellType,\n  type EditableCellValue,\n} from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst sectionLabel = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n  marginBottom: 12,\n  letterSpacing: 0.5,\n  textTransform: 'uppercase' as const,\n};\n\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-editable-cell-radius': `${styles.radius}px`,\n    // Per-size width caps — passed verbatim, never px-suffixed: both knobs are\n    // selects whose values are already CSS (`none` / `320px`), matching the\n    // Font Size pair below.\n    '--uxm-editable-cell-small-max-width': (styles.smallMaxWidth as string) ?? '320px',\n    '--uxm-editable-cell-medium-max-width': (styles.mediumMaxWidth as string) ?? 'none',\n    // Symmetric per-size dimension knobs — each set is read only by its own\n    // size modifier, so writing both alongside each other is harmless.\n    '--uxm-editable-cell-small-padding-x': `${styles.smallPaddingX ?? 8}px`,\n    '--uxm-editable-cell-small-padding-y': `${styles.smallPaddingY ?? 4}px`,\n    // Passed through verbatim, not suffixed with px: the knob is a select whose\n    // default is the literal `inherit`, matching the CSS fallback (`1em`). The\n    // canvas gets its table scale from the `fontSize` context below instead of\n    // by pinning this var — so an untouched knob previews the real inheriting\n    // behaviour rather than a hardcoded 13px the CSS never applies.\n    '--uxm-editable-cell-small-font-size': (styles.smallFontSize as string) ?? 'inherit',\n    '--uxm-editable-cell-medium-padding-x': `${styles.mediumPaddingX ?? 12}px`,\n    '--uxm-editable-cell-medium-padding-y': `${styles.mediumPaddingY ?? 6}px`,\n    '--uxm-editable-cell-medium-font-size': (styles.mediumFontSize as string) ?? '14px',\n    '--uxm-editable-cell-hover-bg': styles.hoverBg as string,\n    '--uxm-editable-cell-pencil-color': styles.pencilColor as string,\n    '--uxm-editable-cell-focus-border': styles.focusBorder as string,\n    '--uxm-editable-cell-focus-ring': styles.focusRing as string,\n    '--uxm-editable-cell-color': styles.color as string,\n    '--uxm-editable-cell-placeholder-color': styles.placeholderColor as string,\n    '--uxm-editable-cell-disabled-opacity': String(styles.disabledOpacity ?? 0.55),\n    '--uxm-editable-cell-input-bg': styles.inputBg as string,\n    '--uxm-editable-cell-input-color': styles.inputColor as string,\n    '--uxm-editable-cell-input-border': styles.inputBorder as string,\n    '--uxm-editable-cell-input-focus-border': styles.inputFocusBorder as string,\n    '--uxm-editable-cell-clear-color': styles.clearColor as string,\n    '--uxm-editable-cell-clear-hover-bg': styles.clearHoverBg as string,\n    '--uxm-editable-cell-warning-border': styles.warningBorder as string,\n    '--uxm-editable-cell-error-border': styles.errorBorder as string,\n    width: 280,\n    // The canvas' own font is larger than a table's, which would make a `small`\n    // cell read as oversized. Setting the surrounding CONTEXT to DataTable's\n    // 13px cell font — rather than pinning the cell's font-size var — previews\n    // the dense table scale while keeping `small`'s documented inherit\n    // behaviour intact. `medium` pins 14px itself, so it's unaffected.\n    fontSize: 13,\n  } as CSSProperties;\n}\n\n// Sample options for the select / multiselect showcase branches. Kept small\n// so the dropdown renders without a search box by default (auto threshold).\nconst SAMPLE_OPTIONS: EditableCellOption[] = [\n  { value: 'growth', label: 'Growth' },\n  { value: 'retention', label: 'Retention' },\n  { value: 'expansion', label: 'Expansion' },\n  { value: 'winback', label: 'Win-back' },\n];\n\nconst commitDelay = () => new Promise((r) => setTimeout(r, 400));\n\n// One independent bundle of per-type state + async commit handlers. Called\n// once for the showcase cell and once for the Interactive cell so editing one\n// never leaks into the other (each call is its own hook instance).\nfunction useCellState() {\n  const [text, setText] = useState('Revenue Motion');\n  // number | '' — an emptied number cell commits '' (the uniform \"cleared\"\n  // value), and the preview must round-trip it to show the placeholder.\n  const [num, setNum] = useState<number | ''>(42);\n  const [date, setDate] = useState('2026-03-14');\n  const [select, setSelect] = useState('growth');\n  const [multi, setMulti] = useState<string[]>(['growth', 'expansion']);\n  return {\n    text,\n    num,\n    date,\n    select,\n    multi,\n    commitText: async (n: EditableCellValue) => {\n      await commitDelay();\n      setText(String(Array.isArray(n) ? n.join(', ') : n));\n    },\n    commitNumber: async (n: EditableCellValue) => {\n      await commitDelay();\n      setNum(n === '' ? '' : Number(n));\n    },\n    commitDate: async (n: EditableCellValue) => {\n      await commitDelay();\n      setDate(String(n));\n    },\n    commitSelect: async (n: EditableCellValue) => {\n      await commitDelay();\n      setSelect(String(n));\n    },\n    commitMulti: async (n: EditableCellValue) => {\n      await commitDelay();\n      // multiselect commits a string[]; clearable commits [] (empty).\n      setMulti(Array.isArray(n) ? n : n === '' ? [] : [String(n)]);\n    },\n  };\n}\ntype CellState = ReturnType<typeof useCellState>;\n\nexport function EditableCellPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const type = (variants.type as EditableCellType) ?? 'text';\n  const align = (variants.align as EditableCellAlign) ?? 'left';\n  const size = (variants.size as EditableCellSize) ?? 'small';\n  const dateFormat = (variants.dateFormat as 'ymd' | 'dmy' | 'mdy') ?? 'ymd';\n  // `state` forces the showcase cell into each peer state so only the\n  // matching knobs are shown and they paint without interaction. hover /\n  // focus ride on forced modifier classes, disabled on the `disabled` prop,\n  // editing / error on `forceMode` — mirroring the rest of the input family.\n  // Editing / error also force the input's focus halo via a class (in real\n  // use the editing input is always focused; the canvas must not steal real\n  // focus, so it mirrors the visuals instead). The Interactive row below\n  // stays unforced for exercising the real click-to-edit flow.\n  const state = (variants.state as string) ?? 'default';\n  const inputStates = ['editing', 'warning', 'error'];\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-editable-cell--state-hover',\n    state === 'focus' && 'uxm-editable-cell--state-focus',\n    // `open` is the pickers' editing state: forcing the real `--open` class\n    // paints the editing chrome on the trigger and reveals its ✕, without\n    // actually mounting the Listbox panel over the canvas.\n    state === 'open' && 'uxm-editable-cell--open',\n    inputStates.includes(state) && 'uxm-editable-cell--force-input-focus',\n  );\n  const forceMode = inputStates.includes(state)\n    ? (state as 'editing' | 'warning' | 'error')\n    : undefined;\n\n  // Two independent state bundles — the showcase cell and the Interactive cell\n  // never share a value, so editing one leaves the other untouched.\n  const showcase = useCellState();\n  const interactive = useCellState();\n\n  const vars = buildVars(styles);\n\n  // Chrome shared by every showcase branch so switching Type in the editor\n  // re-renders the matching editor while keeping the forced state / align.\n  const showcaseChrome = {\n    align,\n    size,\n    forceMode,\n    disabled: state === 'disabled',\n    className: forcedClass || undefined,\n  };\n\n  // Render an editor for the type currently picked in the editor — the whole\n  // point of this preview: changing Type must swap the rendered editor, not\n  // fall back to a text input. `chrome` is the per-context wrapper: the\n  // showcase passes forced state / disabled; the Interactive row passes just\n  // `align` so it stays a real, clickable editor.\n  type Chrome = {\n    align: EditableCellAlign;\n    size?: EditableCellSize;\n    forceMode?: 'editing' | 'warning' | 'error';\n    disabled?: boolean;\n    className?: string;\n  };\n  const renderCell = (chrome: Chrome, c: CellState) => {\n    switch (type) {\n      case 'number':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"number\"\n            value={c.num}\n            onCommit={c.commitNumber}\n            placeholder=\"Enter a number…\"\n            validate={(v) => (typeof v === 'number' && v < 0 ? 'Must be ≥ 0' : null)}\n          />\n        );\n      case 'date':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"date\"\n            value={c.date}\n            dateFormat={dateFormat}\n            onCommit={c.commitDate}\n          />\n        );\n      case 'select':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"select\"\n            value={c.select}\n            options={SAMPLE_OPTIONS}\n            onCommit={c.commitSelect}\n            placeholder=\"Pick a motion…\"\n          />\n        );\n      case 'multiselect':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"multiselect\"\n            value={c.multi}\n            options={SAMPLE_OPTIONS}\n            onCommit={c.commitMulti}\n            placeholder=\"Pick motions…\"\n          />\n        );\n      default:\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"text\"\n            value={c.text}\n            onCommit={c.commitText}\n            placeholder=\"Enter a name…\"\n          />\n        );\n    }\n  };\n  const showcaseCell = renderCell(showcaseChrome, showcase);\n  // Interactive: same type, but unforced (real click-to-edit) — only `align`,\n  // and its OWN state bundle so edits here don't touch the showcase value.\n  const interactiveCell = renderCell({ align, size }, interactive);\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <div style={sectionLabel}>{type} cell ({size}, {align}) — {state}</div>\n        <div style={vars}>{showcaseCell}</div>\n      </div>\n\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive — {type}</div>\n        {/* Mirrors the Type knob: a real, click-to-edit cell of the SAME type\n            as the showcase (no forced state), so designers can exercise the\n            selected editor. */}\n        <div style={vars}>{interactiveCell}</div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/editable-cell/editable-cell-preview.d.ts

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

package/dist/ui/editable-cell/editable-cell-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-cell-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/editable-cell/editable-cell-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAuHrD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CAuI/F"}