@viax.io/uxm 4.36.0

package/dist/ui/data-table/data-table-preview.cjs

@@ -0,0 +1,256 @@
+"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 data_table_preview_exports = {};
+__export(data_table_preview_exports, {
+  DataTablePreview: () => DataTablePreview
+});
+module.exports = __toCommonJS(data_table_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+const initialData = [
+  {
+    name: "Enterprise SaaS",
+    description: "Annual enterprise agreement with committed seat expansion across every business unit",
+    status: "Active",
+    regions: ["na", "emea"],
+    amount: 84500,
+    closeDate: "2026-03-28"
+  },
+  {
+    name: "Product-Led Growth",
+    description: "Self-serve",
+    status: "Active",
+    regions: ["na"],
+    amount: 215e3,
+    closeDate: "2026-03-25"
+  },
+  {
+    name: "Channel Partner",
+    description: "Reseller agreement covering the EMEA territory with quarterly rebate tiers and co-marketing funds",
+    status: "Draft",
+    regions: ["emea"],
+    amount: 32750,
+    closeDate: "2026-03-30"
+  },
+  {
+    name: "Usage-Based Pricing",
+    description: "Metered API",
+    status: "Active",
+    regions: ["na", "apac"],
+    amount: 156e3,
+    closeDate: "2026-03-20"
+  },
+  {
+    name: "Marketplace Listing",
+    description: "Cloud marketplace private offer with a custom EULA and a multi-year ramp schedule",
+    status: "Archived",
+    regions: ["na", "emea", "apac", "latam"],
+    amount: 67800,
+    closeDate: "2026-02-15"
+  }
+];
+const formatAmount = (n) => `$${Number(Array.isArray(n) ? n[0] : n).toLocaleString()}`;
+const STATUS_OPTIONS = [
+  { value: "Active", label: "Active" },
+  { value: "Draft", label: "Draft" },
+  { value: "Archived", label: "Archived" }
+];
+const REGION_OPTIONS = [
+  { value: "na", label: "North America" },
+  { value: "emea", label: "EMEA" },
+  { value: "apac", label: "APAC" },
+  { value: "latam", label: "LATAM" }
+];
+const STATUS_TO_TAG_TYPE = {
+  Active: "accent",
+  Draft: "warning",
+  Archived: "neutral"
+};
+function DataTablePreview({ styles, variants }) {
+  const [hovered, setHovered] = (0, import_react.useState)(null);
+  const [rows, setRows] = (0, import_react.useState)(initialData);
+  const density = variants.density ?? "default";
+  const densityMultiplier = density === "compact" ? 0.65 : density === "relaxed" ? 1.4 : 1;
+  const cellPy = Math.round(styles.cellPaddingY * densityMultiplier);
+  const commit = (index, key) => async (next) => {
+    await new Promise((r) => setTimeout(r, 300));
+    setRows((prev) => prev.map((r, i) => i === index ? { ...r, [key]: next } : r));
+  };
+  const rowActions = (index) => [
+    { key: "edit", label: "Edit", icon: "pencil", onSelect: () => {
+    } },
+    {
+      key: "duplicate",
+      label: "Duplicate",
+      icon: "copy",
+      onSelect: () => setRows((prev) => {
+        const next = [...prev];
+        next.splice(index + 1, 0, { ...prev[index], name: `${prev[index].name} (copy)` });
+        return next;
+      })
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: "archive-x",
+      disabled: rows[index]?.status === "Archived",
+      onSelect: () => setRows((prev) => prev.map((r, i) => i === index ? { ...r, status: "Archived" } : r))
+    },
+    { separator: true, key: "sep" },
+    {
+      key: "delete",
+      label: "Delete",
+      icon: "trash",
+      danger: true,
+      onSelect: () => setRows((prev) => prev.filter((_, i) => i !== index))
+    }
+  ];
+  const editableTd = {
+    padding: `${cellPy}px ${styles.cellPaddingX - 6}px`,
+    borderBottom: `1px solid ${styles.borderColor}`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+    // max-content with a floor: the table grows for wide data (a long
+    // committed Amount widens its own column) instead of staying locked
+    // and squeezing the other columns into wrapping — the "Name column
+    // jumps when I commit a huge number" effect. (fit-content won't do:
+    // the canvas parent's available width clamps it right back.)
+    width: "max-content",
+    minWidth: 720,
+    border: `1px solid ${styles.borderColor}`,
+    borderRadius: styles.borderRadius,
+    overflow: "hidden"
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: styles.fontSize }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { style: { backgroundColor: styles.headerBg }, children: [
+      ["Name", "Description", "Status", "Regions", "Amount", "Close date"].map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: {
+        textAlign: "left",
+        padding: `${cellPy}px ${styles.cellPaddingX}px`,
+        fontWeight: 600,
+        color: styles.headerText,
+        borderBottom: `1px solid ${styles.borderColor}`,
+        fontSize: styles.fontSize - 1
+      }, children: h }, h)),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { "aria-label": "Actions", style: {
+        width: "1%",
+        whiteSpace: "nowrap",
+        padding: `${cellPy}px ${styles.cellPaddingX}px`,
+        borderBottom: `1px solid ${styles.borderColor}`
+      } })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "tr",
+      {
+        onMouseEnter: () => setHovered(i),
+        onMouseLeave: () => setHovered(null),
+        style: {
+          backgroundColor: hovered === i ? styles.rowHoverBg : styles.rowBg,
+          transition: "background-color 0.1s"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd, fontWeight: 500 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.name,
+              onCommit: commit(i, "name"),
+              type: "text",
+              validate: (v) => String(v).trim() ? null : "Name is required"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.description,
+              onCommit: commit(i, "description"),
+              type: "text",
+              placeholder: "Add a description"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.status,
+              onCommit: commit(i, "status"),
+              type: "select",
+              options: STATUS_OPTIONS,
+              placeholder: "Set status",
+              format: (v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Tag, { type: STATUS_TO_TAG_TYPE[String(v)] ?? "neutral", size: "small", children: String(v) })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.regions,
+              onCommit: commit(i, "regions"),
+              type: "multiselect",
+              options: REGION_OPTIONS,
+              placeholder: "Add regions"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd, fontWeight: 500 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.amount,
+              onCommit: commit(i, "amount"),
+              type: "number",
+              format: formatAmount,
+              validate: (v) => Number(v) < 0 ? "Must be \u2265 0" : null
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { ...editableTd }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.EditableCell,
+            {
+              value: row.closeDate,
+              onCommit: commit(i, "closeDate"),
+              type: "date"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: {
+            width: "1%",
+            whiteSpace: "nowrap",
+            textAlign: "right",
+            padding: `0 ${styles.cellPaddingX}px`,
+            borderBottom: `1px solid ${styles.borderColor}`
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.Menu,
+            {
+              items: rowActions(i),
+              "aria-label": "Row actions",
+              renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ui.IconButton,
+                {
+                  ...triggerProps,
+                  "aria-label": "Row actions",
+                  className: open ? "uxm-icon-button--active" : void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "kebab", size: 18 })
+                }
+              )
+            }
+          ) })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTablePreview
+});
+//# sourceMappingURL=data-table-preview.cjs.map

package/dist/ui/data-table/data-table-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/data-table/data-table-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport {\n  EditableCell,\n  Icon,\n  IconButton,\n  Menu,\n  Tag,\n  type EditableCellOption,\n  type EditableCellValue,\n  type MenuEntry,\n  type TagType,\n} from '@/ui';\n\ninterface Row {\n  name: string;\n  /** Long free text — demonstrates the cell's max-width clip + hover tooltip. */\n  description: string;\n  status: string;\n  /** Multiselect — stored as an array of option values. */\n  regions: string[];\n  /** Stored as a number — display formatting (`$84,500`) is handled by\n   *  the EditableCell's `format` so editing returns the raw value. */\n  amount: number;\n  /** ISO `YYYY-MM-DD` — the date EditableCell stores and edits ISO. */\n  closeDate: string;\n}\n\nconst initialData: Row[] = [\n  {\n    name: 'Enterprise SaaS',\n    description: 'Annual enterprise agreement with committed seat expansion across every business unit',\n    status: 'Active',\n    regions: ['na', 'emea'],\n    amount: 84500,\n    closeDate: '2026-03-28',\n  },\n  {\n    name: 'Product-Led Growth',\n    description: 'Self-serve',\n    status: 'Active',\n    regions: ['na'],\n    amount: 215000,\n    closeDate: '2026-03-25',\n  },\n  {\n    name: 'Channel Partner',\n    description: 'Reseller agreement covering the EMEA territory with quarterly rebate tiers and co-marketing funds',\n    status: 'Draft',\n    regions: ['emea'],\n    amount: 32750,\n    closeDate: '2026-03-30',\n  },\n  {\n    name: 'Usage-Based Pricing',\n    description: 'Metered API',\n    status: 'Active',\n    regions: ['na', 'apac'],\n    amount: 156000,\n    closeDate: '2026-03-20',\n  },\n  {\n    name: 'Marketplace Listing',\n    description: 'Cloud marketplace private offer with a custom EULA and a multi-year ramp schedule',\n    status: 'Archived',\n    regions: ['na', 'emea', 'apac', 'latam'],\n    amount: 67800,\n    closeDate: '2026-02-15',\n  },\n];\n\nconst formatAmount = (n: EditableCellValue) => `$${Number(Array.isArray(n) ? n[0] : n).toLocaleString()}`;\n\nconst STATUS_OPTIONS: EditableCellOption[] = [\n  { value: 'Active', label: 'Active' },\n  { value: 'Draft', label: 'Draft' },\n  { value: 'Archived', label: 'Archived' },\n];\n\nconst REGION_OPTIONS: EditableCellOption[] = [\n  { value: 'na', label: 'North America' },\n  { value: 'emea', label: 'EMEA' },\n  { value: 'apac', label: 'APAC' },\n  { value: 'latam', label: 'LATAM' },\n];\n\nconst STATUS_TO_TAG_TYPE: Record<string, TagType> = {\n  Active: 'accent',\n  Draft: 'warning',\n  Archived: 'neutral',\n};\n\nexport function DataTablePreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const [hovered, setHovered] = useState<number | null>(null);\n  // Owning the rows in state lets every editable column round-trip its\n  // commits back into the table — designers see the new value persist\n  // after the edit.\n  const [rows, setRows] = useState<Row[]>(initialData);\n  const density = variants.density ?? 'default';\n  const densityMultiplier = density === 'compact' ? 0.65 : density === 'relaxed' ? 1.4 : 1;\n  const cellPy = Math.round((styles.cellPaddingY as number) * densityMultiplier);\n\n  // One commit path for every column — a simulated async handler so\n  // designers can see the submitting state, then patches the row field.\n  // EditableCell already hands back the right runtime type per column\n  // (number for Amount, string[] for Regions, string elsewhere).\n  const commit = (index: number, key: keyof Row) => async (next: EditableCellValue) => {\n    await new Promise((r) => setTimeout(r, 300));\n    // `as Row`: `next` is the EditableCellValue union; each column's editor type\n    // already matches its field shape (see comment above), so the cast is safe\n    // here. This is preview/demo code — a real consumer would type per column.\n    setRows((prev) => prev.map((r, i) => (i === index ? ({ ...r, [key]: next } as Row) : r)));\n  };\n\n  // Per-row action menu — the trailing ⋮ column. Demonstrates the real\n  // Menu atom in a table: leading icons, a disabled item (Archive, when\n  // already archived), a separator, and a destructive Delete. Actions\n  // mutate the table's row state so the effect is visible live.\n  const rowActions = (index: number): MenuEntry[] => [\n    { key: 'edit', label: 'Edit', icon: 'pencil', onSelect: () => {} },\n    {\n      key: 'duplicate',\n      label: 'Duplicate',\n      icon: 'copy',\n      onSelect: () =>\n        setRows((prev) => {\n          const next = [...prev];\n          next.splice(index + 1, 0, { ...prev[index], name: `${prev[index].name} (copy)` });\n          return next;\n        }),\n    },\n    {\n      key: 'archive',\n      label: 'Archive',\n      icon: 'archive-x',\n      disabled: rows[index]?.status === 'Archived',\n      onSelect: () =>\n        setRows((prev) => prev.map((r, i) => (i === index ? { ...r, status: 'Archived' } : r))),\n    },\n    { separator: true, key: 'sep' },\n    {\n      key: 'delete',\n      label: 'Delete',\n      icon: 'trash',\n      danger: true,\n      onSelect: () => setRows((prev) => prev.filter((_, i) => i !== index)),\n    },\n  ];\n\n  // Editable columns share the same -6 horizontal padding compensation so\n  // the value's left edge lines up with its header (the cell carries its\n  // own 6px paddingX / the select trigger its own gutter).\n  const editableTd = {\n    padding: `${cellPy}px ${(styles.cellPaddingX as number) - 6}px`,\n    borderBottom: `1px solid ${styles.borderColor}`,\n  } as const;\n\n  return (\n    <div style={{\n      // max-content with a floor: the table grows for wide data (a long\n      // committed Amount widens its own column) instead of staying locked\n      // and squeezing the other columns into wrapping — the \"Name column\n      // jumps when I commit a huge number\" effect. (fit-content won't do:\n      // the canvas parent's available width clamps it right back.)\n      width: 'max-content',\n      minWidth: 720,\n      border: `1px solid ${styles.borderColor}`,\n      borderRadius: styles.borderRadius as number,\n      overflow: 'hidden',\n    }}>\n      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: styles.fontSize as number }}>\n        <thead>\n          <tr style={{ backgroundColor: styles.headerBg as string }}>\n            {['Name', 'Description', 'Status', 'Regions', 'Amount', 'Close date'].map((h) => (\n              <th key={h} style={{\n                textAlign: 'left',\n                padding: `${cellPy}px ${styles.cellPaddingX}px`,\n                fontWeight: 600,\n                color: styles.headerText as string,\n                borderBottom: `1px solid ${styles.borderColor}`,\n                fontSize: (styles.fontSize as number) - 1,\n              }}>{h}</th>\n            ))}\n            {/* Trailing actions column header — empty, narrow (1% + nowrap\n                shrinks it to the ⋮ trigger). */}\n            <th aria-label=\"Actions\" style={{\n              width: '1%',\n              whiteSpace: 'nowrap',\n              padding: `${cellPy}px ${styles.cellPaddingX}px`,\n              borderBottom: `1px solid ${styles.borderColor}`,\n            }} />\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr\n              key={i}\n              onMouseEnter={() => setHovered(i)}\n              onMouseLeave={() => setHovered(null)}\n              style={{\n                backgroundColor: hovered === i ? (styles.rowHoverBg as string) : (styles.rowBg as string),\n                transition: 'background-color 0.1s',\n              }}\n            >\n              {/* text (short) — required, so validate blocks an empty name. */}\n              <td style={{ ...editableTd, fontWeight: 500 }}>\n                <EditableCell\n                  value={row.name}\n                  onCommit={commit(i, 'name')}\n                  type=\"text\"\n                  validate={(v) => (String(v).trim() ? null : 'Name is required')}\n                />\n              </td>\n              {/* text (long) — the value overflows the cell's max-width, so it\n                  clips with an ellipsis and reveals the full text on hover. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.description}\n                  onCommit={commit(i, 'description')}\n                  type=\"text\"\n                  placeholder=\"Add a description\"\n                />\n              </td>\n              {/* select — status as a single-choice picker; format renders the\n                  chosen value as the same status Tag used elsewhere. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.status}\n                  onCommit={commit(i, 'status')}\n                  type=\"select\"\n                  options={STATUS_OPTIONS}\n                  placeholder=\"Set status\"\n                  format={(v) => (\n                    <Tag type={STATUS_TO_TAG_TYPE[String(v)] ?? 'neutral'} size=\"small\">\n                      {String(v)}\n                    </Tag>\n                  )}\n                />\n              </td>\n              {/* multiselect — regions; the display joins the selected labels\n                  and clips + tooltips when the list runs long. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.regions}\n                  onCommit={commit(i, 'regions')}\n                  type=\"multiselect\"\n                  options={REGION_OPTIONS}\n                  placeholder=\"Add regions\"\n                />\n              </td>\n              {/* number — validation blocks negatives; blur commits via the\n                  simulated async handler; format shows the currency string. */}\n              <td style={{ ...editableTd, fontWeight: 500 }}>\n                <EditableCell\n                  value={row.amount}\n                  onCommit={commit(i, 'amount')}\n                  type=\"number\"\n                  format={formatAmount}\n                  validate={(v) => (Number(v) < 0 ? 'Must be ≥ 0' : null)}\n                />\n              </td>\n              {/* date — click opens a masked input + calendar; ISO in, ISO out. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.closeDate}\n                  onCommit={commit(i, 'closeDate')}\n                  type=\"date\"\n                />\n              </td>\n              {/* Actions column — a ⋮ IconButton that opens the Menu atom\n                  with row-bound actions. Right-aligned, hugs the trigger. */}\n              <td style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                textAlign: 'right',\n                padding: `0 ${styles.cellPaddingX}px`,\n                borderBottom: `1px solid ${styles.borderColor}`,\n              }}>\n                <Menu\n                  items={rowActions(i)}\n                  aria-label=\"Row actions\"\n                  renderTrigger={({ open, triggerProps }) => (\n                    <IconButton\n                      {...triggerProps}\n                      aria-label=\"Row actions\"\n                      className={open ? 'uxm-icon-button--active' : undefined}\n                    >\n                      <Icon glyph=\"kebab\" size={18} />\n                    </IconButton>\n                  )}\n                />\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/data-table/data-table-preview.d.ts

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

package/dist/ui/data-table/data-table-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/data-table/data-table-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA2FrD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CA8M5F"}

package/dist/ui/data-table/data-table-preview.js

@@ -0,0 +1,238 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  EditableCell,
+  Icon,
+  IconButton,
+  Menu,
+  Tag
+} from "../../ui/index.js";
+const initialData = [
+  {
+    name: "Enterprise SaaS",
+    description: "Annual enterprise agreement with committed seat expansion across every business unit",
+    status: "Active",
+    regions: ["na", "emea"],
+    amount: 84500,
+    closeDate: "2026-03-28"
+  },
+  {
+    name: "Product-Led Growth",
+    description: "Self-serve",
+    status: "Active",
+    regions: ["na"],
+    amount: 215e3,
+    closeDate: "2026-03-25"
+  },
+  {
+    name: "Channel Partner",
+    description: "Reseller agreement covering the EMEA territory with quarterly rebate tiers and co-marketing funds",
+    status: "Draft",
+    regions: ["emea"],
+    amount: 32750,
+    closeDate: "2026-03-30"
+  },
+  {
+    name: "Usage-Based Pricing",
+    description: "Metered API",
+    status: "Active",
+    regions: ["na", "apac"],
+    amount: 156e3,
+    closeDate: "2026-03-20"
+  },
+  {
+    name: "Marketplace Listing",
+    description: "Cloud marketplace private offer with a custom EULA and a multi-year ramp schedule",
+    status: "Archived",
+    regions: ["na", "emea", "apac", "latam"],
+    amount: 67800,
+    closeDate: "2026-02-15"
+  }
+];
+const formatAmount = (n) => `$${Number(Array.isArray(n) ? n[0] : n).toLocaleString()}`;
+const STATUS_OPTIONS = [
+  { value: "Active", label: "Active" },
+  { value: "Draft", label: "Draft" },
+  { value: "Archived", label: "Archived" }
+];
+const REGION_OPTIONS = [
+  { value: "na", label: "North America" },
+  { value: "emea", label: "EMEA" },
+  { value: "apac", label: "APAC" },
+  { value: "latam", label: "LATAM" }
+];
+const STATUS_TO_TAG_TYPE = {
+  Active: "accent",
+  Draft: "warning",
+  Archived: "neutral"
+};
+function DataTablePreview({ styles, variants }) {
+  const [hovered, setHovered] = useState(null);
+  const [rows, setRows] = useState(initialData);
+  const density = variants.density ?? "default";
+  const densityMultiplier = density === "compact" ? 0.65 : density === "relaxed" ? 1.4 : 1;
+  const cellPy = Math.round(styles.cellPaddingY * densityMultiplier);
+  const commit = (index, key) => async (next) => {
+    await new Promise((r) => setTimeout(r, 300));
+    setRows((prev) => prev.map((r, i) => i === index ? { ...r, [key]: next } : r));
+  };
+  const rowActions = (index) => [
+    { key: "edit", label: "Edit", icon: "pencil", onSelect: () => {
+    } },
+    {
+      key: "duplicate",
+      label: "Duplicate",
+      icon: "copy",
+      onSelect: () => setRows((prev) => {
+        const next = [...prev];
+        next.splice(index + 1, 0, { ...prev[index], name: `${prev[index].name} (copy)` });
+        return next;
+      })
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: "archive-x",
+      disabled: rows[index]?.status === "Archived",
+      onSelect: () => setRows((prev) => prev.map((r, i) => i === index ? { ...r, status: "Archived" } : r))
+    },
+    { separator: true, key: "sep" },
+    {
+      key: "delete",
+      label: "Delete",
+      icon: "trash",
+      danger: true,
+      onSelect: () => setRows((prev) => prev.filter((_, i) => i !== index))
+    }
+  ];
+  const editableTd = {
+    padding: `${cellPy}px ${styles.cellPaddingX - 6}px`,
+    borderBottom: `1px solid ${styles.borderColor}`
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    // max-content with a floor: the table grows for wide data (a long
+    // committed Amount widens its own column) instead of staying locked
+    // and squeezing the other columns into wrapping — the "Name column
+    // jumps when I commit a huge number" effect. (fit-content won't do:
+    // the canvas parent's available width clamps it right back.)
+    width: "max-content",
+    minWidth: 720,
+    border: `1px solid ${styles.borderColor}`,
+    borderRadius: styles.borderRadius,
+    overflow: "hidden"
+  }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: styles.fontSize }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { backgroundColor: styles.headerBg }, children: [
+      ["Name", "Description", "Status", "Regions", "Amount", "Close date"].map((h) => /* @__PURE__ */ jsx("th", { style: {
+        textAlign: "left",
+        padding: `${cellPy}px ${styles.cellPaddingX}px`,
+        fontWeight: 600,
+        color: styles.headerText,
+        borderBottom: `1px solid ${styles.borderColor}`,
+        fontSize: styles.fontSize - 1
+      }, children: h }, h)),
+      /* @__PURE__ */ jsx("th", { "aria-label": "Actions", style: {
+        width: "1%",
+        whiteSpace: "nowrap",
+        padding: `${cellPy}px ${styles.cellPaddingX}px`,
+        borderBottom: `1px solid ${styles.borderColor}`
+      } })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        onMouseEnter: () => setHovered(i),
+        onMouseLeave: () => setHovered(null),
+        style: {
+          backgroundColor: hovered === i ? styles.rowHoverBg : styles.rowBg,
+          transition: "background-color 0.1s"
+        },
+        children: [
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd, fontWeight: 500 }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.name,
+              onCommit: commit(i, "name"),
+              type: "text",
+              validate: (v) => String(v).trim() ? null : "Name is required"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.description,
+              onCommit: commit(i, "description"),
+              type: "text",
+              placeholder: "Add a description"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.status,
+              onCommit: commit(i, "status"),
+              type: "select",
+              options: STATUS_OPTIONS,
+              placeholder: "Set status",
+              format: (v) => /* @__PURE__ */ jsx(Tag, { type: STATUS_TO_TAG_TYPE[String(v)] ?? "neutral", size: "small", children: String(v) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.regions,
+              onCommit: commit(i, "regions"),
+              type: "multiselect",
+              options: REGION_OPTIONS,
+              placeholder: "Add regions"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd, fontWeight: 500 }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.amount,
+              onCommit: commit(i, "amount"),
+              type: "number",
+              format: formatAmount,
+              validate: (v) => Number(v) < 0 ? "Must be \u2265 0" : null
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: { ...editableTd }, children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row.closeDate,
+              onCommit: commit(i, "closeDate"),
+              type: "date"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { style: {
+            width: "1%",
+            whiteSpace: "nowrap",
+            textAlign: "right",
+            padding: `0 ${styles.cellPaddingX}px`,
+            borderBottom: `1px solid ${styles.borderColor}`
+          }, children: /* @__PURE__ */ jsx(
+            Menu,
+            {
+              items: rowActions(i),
+              "aria-label": "Row actions",
+              renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  ...triggerProps,
+                  "aria-label": "Row actions",
+                  className: open ? "uxm-icon-button--active" : void 0,
+                  children: /* @__PURE__ */ jsx(Icon, { glyph: "kebab", size: 18 })
+                }
+              )
+            }
+          ) })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+export {
+  DataTablePreview
+};
+//# sourceMappingURL=data-table-preview.js.map

package/dist/ui/data-table/data-table-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/data-table/data-table-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport {\n  EditableCell,\n  Icon,\n  IconButton,\n  Menu,\n  Tag,\n  type EditableCellOption,\n  type EditableCellValue,\n  type MenuEntry,\n  type TagType,\n} from '@/ui';\n\ninterface Row {\n  name: string;\n  /** Long free text — demonstrates the cell's max-width clip + hover tooltip. */\n  description: string;\n  status: string;\n  /** Multiselect — stored as an array of option values. */\n  regions: string[];\n  /** Stored as a number — display formatting (`$84,500`) is handled by\n   *  the EditableCell's `format` so editing returns the raw value. */\n  amount: number;\n  /** ISO `YYYY-MM-DD` — the date EditableCell stores and edits ISO. */\n  closeDate: string;\n}\n\nconst initialData: Row[] = [\n  {\n    name: 'Enterprise SaaS',\n    description: 'Annual enterprise agreement with committed seat expansion across every business unit',\n    status: 'Active',\n    regions: ['na', 'emea'],\n    amount: 84500,\n    closeDate: '2026-03-28',\n  },\n  {\n    name: 'Product-Led Growth',\n    description: 'Self-serve',\n    status: 'Active',\n    regions: ['na'],\n    amount: 215000,\n    closeDate: '2026-03-25',\n  },\n  {\n    name: 'Channel Partner',\n    description: 'Reseller agreement covering the EMEA territory with quarterly rebate tiers and co-marketing funds',\n    status: 'Draft',\n    regions: ['emea'],\n    amount: 32750,\n    closeDate: '2026-03-30',\n  },\n  {\n    name: 'Usage-Based Pricing',\n    description: 'Metered API',\n    status: 'Active',\n    regions: ['na', 'apac'],\n    amount: 156000,\n    closeDate: '2026-03-20',\n  },\n  {\n    name: 'Marketplace Listing',\n    description: 'Cloud marketplace private offer with a custom EULA and a multi-year ramp schedule',\n    status: 'Archived',\n    regions: ['na', 'emea', 'apac', 'latam'],\n    amount: 67800,\n    closeDate: '2026-02-15',\n  },\n];\n\nconst formatAmount = (n: EditableCellValue) => `$${Number(Array.isArray(n) ? n[0] : n).toLocaleString()}`;\n\nconst STATUS_OPTIONS: EditableCellOption[] = [\n  { value: 'Active', label: 'Active' },\n  { value: 'Draft', label: 'Draft' },\n  { value: 'Archived', label: 'Archived' },\n];\n\nconst REGION_OPTIONS: EditableCellOption[] = [\n  { value: 'na', label: 'North America' },\n  { value: 'emea', label: 'EMEA' },\n  { value: 'apac', label: 'APAC' },\n  { value: 'latam', label: 'LATAM' },\n];\n\nconst STATUS_TO_TAG_TYPE: Record<string, TagType> = {\n  Active: 'accent',\n  Draft: 'warning',\n  Archived: 'neutral',\n};\n\nexport function DataTablePreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const [hovered, setHovered] = useState<number | null>(null);\n  // Owning the rows in state lets every editable column round-trip its\n  // commits back into the table — designers see the new value persist\n  // after the edit.\n  const [rows, setRows] = useState<Row[]>(initialData);\n  const density = variants.density ?? 'default';\n  const densityMultiplier = density === 'compact' ? 0.65 : density === 'relaxed' ? 1.4 : 1;\n  const cellPy = Math.round((styles.cellPaddingY as number) * densityMultiplier);\n\n  // One commit path for every column — a simulated async handler so\n  // designers can see the submitting state, then patches the row field.\n  // EditableCell already hands back the right runtime type per column\n  // (number for Amount, string[] for Regions, string elsewhere).\n  const commit = (index: number, key: keyof Row) => async (next: EditableCellValue) => {\n    await new Promise((r) => setTimeout(r, 300));\n    // `as Row`: `next` is the EditableCellValue union; each column's editor type\n    // already matches its field shape (see comment above), so the cast is safe\n    // here. This is preview/demo code — a real consumer would type per column.\n    setRows((prev) => prev.map((r, i) => (i === index ? ({ ...r, [key]: next } as Row) : r)));\n  };\n\n  // Per-row action menu — the trailing ⋮ column. Demonstrates the real\n  // Menu atom in a table: leading icons, a disabled item (Archive, when\n  // already archived), a separator, and a destructive Delete. Actions\n  // mutate the table's row state so the effect is visible live.\n  const rowActions = (index: number): MenuEntry[] => [\n    { key: 'edit', label: 'Edit', icon: 'pencil', onSelect: () => {} },\n    {\n      key: 'duplicate',\n      label: 'Duplicate',\n      icon: 'copy',\n      onSelect: () =>\n        setRows((prev) => {\n          const next = [...prev];\n          next.splice(index + 1, 0, { ...prev[index], name: `${prev[index].name} (copy)` });\n          return next;\n        }),\n    },\n    {\n      key: 'archive',\n      label: 'Archive',\n      icon: 'archive-x',\n      disabled: rows[index]?.status === 'Archived',\n      onSelect: () =>\n        setRows((prev) => prev.map((r, i) => (i === index ? { ...r, status: 'Archived' } : r))),\n    },\n    { separator: true, key: 'sep' },\n    {\n      key: 'delete',\n      label: 'Delete',\n      icon: 'trash',\n      danger: true,\n      onSelect: () => setRows((prev) => prev.filter((_, i) => i !== index)),\n    },\n  ];\n\n  // Editable columns share the same -6 horizontal padding compensation so\n  // the value's left edge lines up with its header (the cell carries its\n  // own 6px paddingX / the select trigger its own gutter).\n  const editableTd = {\n    padding: `${cellPy}px ${(styles.cellPaddingX as number) - 6}px`,\n    borderBottom: `1px solid ${styles.borderColor}`,\n  } as const;\n\n  return (\n    <div style={{\n      // max-content with a floor: the table grows for wide data (a long\n      // committed Amount widens its own column) instead of staying locked\n      // and squeezing the other columns into wrapping — the \"Name column\n      // jumps when I commit a huge number\" effect. (fit-content won't do:\n      // the canvas parent's available width clamps it right back.)\n      width: 'max-content',\n      minWidth: 720,\n      border: `1px solid ${styles.borderColor}`,\n      borderRadius: styles.borderRadius as number,\n      overflow: 'hidden',\n    }}>\n      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: styles.fontSize as number }}>\n        <thead>\n          <tr style={{ backgroundColor: styles.headerBg as string }}>\n            {['Name', 'Description', 'Status', 'Regions', 'Amount', 'Close date'].map((h) => (\n              <th key={h} style={{\n                textAlign: 'left',\n                padding: `${cellPy}px ${styles.cellPaddingX}px`,\n                fontWeight: 600,\n                color: styles.headerText as string,\n                borderBottom: `1px solid ${styles.borderColor}`,\n                fontSize: (styles.fontSize as number) - 1,\n              }}>{h}</th>\n            ))}\n            {/* Trailing actions column header — empty, narrow (1% + nowrap\n                shrinks it to the ⋮ trigger). */}\n            <th aria-label=\"Actions\" style={{\n              width: '1%',\n              whiteSpace: 'nowrap',\n              padding: `${cellPy}px ${styles.cellPaddingX}px`,\n              borderBottom: `1px solid ${styles.borderColor}`,\n            }} />\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr\n              key={i}\n              onMouseEnter={() => setHovered(i)}\n              onMouseLeave={() => setHovered(null)}\n              style={{\n                backgroundColor: hovered === i ? (styles.rowHoverBg as string) : (styles.rowBg as string),\n                transition: 'background-color 0.1s',\n              }}\n            >\n              {/* text (short) — required, so validate blocks an empty name. */}\n              <td style={{ ...editableTd, fontWeight: 500 }}>\n                <EditableCell\n                  value={row.name}\n                  onCommit={commit(i, 'name')}\n                  type=\"text\"\n                  validate={(v) => (String(v).trim() ? null : 'Name is required')}\n                />\n              </td>\n              {/* text (long) — the value overflows the cell's max-width, so it\n                  clips with an ellipsis and reveals the full text on hover. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.description}\n                  onCommit={commit(i, 'description')}\n                  type=\"text\"\n                  placeholder=\"Add a description\"\n                />\n              </td>\n              {/* select — status as a single-choice picker; format renders the\n                  chosen value as the same status Tag used elsewhere. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.status}\n                  onCommit={commit(i, 'status')}\n                  type=\"select\"\n                  options={STATUS_OPTIONS}\n                  placeholder=\"Set status\"\n                  format={(v) => (\n                    <Tag type={STATUS_TO_TAG_TYPE[String(v)] ?? 'neutral'} size=\"small\">\n                      {String(v)}\n                    </Tag>\n                  )}\n                />\n              </td>\n              {/* multiselect — regions; the display joins the selected labels\n                  and clips + tooltips when the list runs long. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.regions}\n                  onCommit={commit(i, 'regions')}\n                  type=\"multiselect\"\n                  options={REGION_OPTIONS}\n                  placeholder=\"Add regions\"\n                />\n              </td>\n              {/* number — validation blocks negatives; blur commits via the\n                  simulated async handler; format shows the currency string. */}\n              <td style={{ ...editableTd, fontWeight: 500 }}>\n                <EditableCell\n                  value={row.amount}\n                  onCommit={commit(i, 'amount')}\n                  type=\"number\"\n                  format={formatAmount}\n                  validate={(v) => (Number(v) < 0 ? 'Must be ≥ 0' : null)}\n                />\n              </td>\n              {/* date — click opens a masked input + calendar; ISO in, ISO out. */}\n              <td style={{ ...editableTd }}>\n                <EditableCell\n                  value={row.closeDate}\n                  onCommit={commit(i, 'closeDate')}\n                  type=\"date\"\n                />\n              </td>\n              {/* Actions column — a ⋮ IconButton that opens the Menu atom\n                  with row-bound actions. Right-aligned, hugs the trigger. */}\n              <td style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                textAlign: 'right',\n                padding: `0 ${styles.cellPaddingX}px`,\n                borderBottom: `1px solid ${styles.borderColor}`,\n              }}>\n                <Menu\n                  items={rowActions(i)}\n                  aria-label=\"Row actions\"\n                  renderTrigger={({ open, triggerProps }) => (\n                    <IconButton\n                      {...triggerProps}\n                      aria-label=\"Row actions\"\n                      className={open ? 'uxm-icon-button--active' : undefined}\n                    >\n                      <Icon glyph=\"kebab\" size={18} />\n                    </IconButton>\n                  )}\n                />\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}