@viax.io/uxm 4.36.0

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

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

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

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

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

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

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

package/dist/ui/list/index.js

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

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

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

package/dist/ui/list/list-item-preview.cjs

@@ -0,0 +1,162 @@
+"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 list_item_preview_exports = {};
+__export(list_item_preview_exports, {
+  ListItemPreview: () => ListItemPreview
+});
+module.exports = __toCommonJS(list_item_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");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+var import_list = require("./list.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-list-item-inactive-bg": styles.inactiveBg,
+    "--uxm-list-item-inactive-text": styles.inactiveText,
+    "--uxm-list-item-hover-bg": styles.hoverBg,
+    "--uxm-list-item-hover-text": styles.hoverText,
+    "--uxm-list-item-focus-text": styles.focusText,
+    "--uxm-list-item-focus-ring": styles.focusRing,
+    "--uxm-list-item-active-bg": styles.activeBg,
+    "--uxm-list-item-active-text": styles.activeText,
+    "--uxm-list-item-disabled-bg": styles.disabledBg,
+    "--uxm-list-item-disabled-text": styles.disabledText,
+    "--uxm-list-item-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-list-item-border-color": styles.borderColor,
+    "--uxm-list-item-border-radius": `${styles.borderRadius}px`,
+    "--uxm-list-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-list-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-list-item-gap": `${styles.gap}px`,
+    "--uxm-list-item-font-size": `${styles.fontSize}px`,
+    "--uxm-list-item-value-color": styles.valueColor,
+    "--uxm-list-item-value-size": `${styles.valueSize}px`,
+    "--uxm-list-item-icon-bg": styles.iconBg,
+    "--uxm-list-item-icon-color": styles.iconColor,
+    "--uxm-list-item-icon-size": `${styles.iconSize}px`,
+    "--uxm-list-item-icon-radius": `${styles.iconRadius}px`,
+    "--uxm-list-item-chevron-color": styles.chevronColor
+  };
+}
+function trailingForMode(mode, meta, tagType) {
+  if (mode === "interactive") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "chevron-right", size: 16 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.Tag, { type: tagType, children: meta });
+}
+function StaticShowcase({
+  mode,
+  state,
+  showValue
+}) {
+  const isInteractive = mode === "interactive";
+  const isActive = isInteractive && state === "active";
+  const isDisabled = state === "disabled";
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.IconTile, { className: "uxm-list-item__icon", style: import_list.LIST_ITEM_ICON_TILE_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "square" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-list-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__title", children: "Owner" }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__value", children: "Alex Morgan" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__trailing", children: trailingForMode(mode, "Verified", "success") })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.List, { children: isInteractive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      disabled: isDisabled,
+      "aria-pressed": isActive,
+      className: (0, import_helpers.cn)(
+        "uxm-list-item",
+        isActive && "uxm-list-item--active",
+        state === "hover" && "uxm-list-item--state-hover",
+        state === "focus" && "uxm-list-item--state-focus"
+      ),
+      style: { pointerEvents: "none" },
+      children: inner
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "uxm-list-item",
+      ...isDisabled ? { "aria-disabled": true } : {},
+      children: inner
+    }
+  ) });
+}
+const ROWS = [
+  // One row per Tag type, with a label that matches the type's
+  // semantic meaning — so two tags never read the same word with
+  // different visual treatments.
+  { key: "plan", title: "Plan", value: "Enterprise", meta: "Pro", tagType: "accent" },
+  { key: "billing", title: "Billing", value: "Visa \u2022\u2022 4242", meta: "Action needed", tagType: "warning" },
+  { key: "owner", title: "Owner", value: "Alex Morgan", meta: "Verified", tagType: "success" },
+  { key: "activity", title: "Last activity", value: "2 hours ago", meta: "Recent", tagType: "neutral" }
+];
+function ListItemPreview({ styles, variants }) {
+  const mode = variants.mode ?? "interactive";
+  const state = variants.state ?? "default";
+  const showValue = (variants.value ?? "shown") === "shown";
+  const [activeKey, setActiveKey] = (0, import_react.useState)("plan");
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 380, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticShowcase, { mode, state, showValue })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: mode === "interactive" ? "Interactive" : "Static" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.List, { children: ROWS.map((row, i) => {
+        const isInteractive = mode === "interactive";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui2.ListItem,
+          {
+            interactive: isInteractive,
+            active: isInteractive && row.key === activeKey,
+            disabled: state === "disabled" && i === 1,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "square" }),
+            value: showValue ? row.value : void 0,
+            trailing: trailingForMode(mode, row.meta, row.tagType),
+            onClick: isInteractive ? () => setActiveKey(row.key) : void 0,
+            children: row.title
+          },
+          row.key
+        );
+      }) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListItemPreview
+});
+//# sourceMappingURL=list-item-preview.cjs.map

package/dist/ui/list/list-item-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/list/list-item-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties, type ReactNode } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon, IconTile } from '@/ui';\nimport { List, ListItem } from '@/ui';\nimport { Tag, type TagType } from '@/ui';\n\nimport { LIST_ITEM_ICON_TILE_STYLE } from './list';\n\ntype Styles = PreviewProps['styles'];\ntype Mode = 'static' | 'interactive';\n\n/**\n * Project every registry knob as a `--uxm-list-item-*` custom property\n * on the wrapper. Both the static showcase and the interactive list\n * below read from the same vars; the showcase forces a state via the\n * `--state-*` modifier class while the interactive list exercises the\n * production `:hover` / `:focus-visible` / `:disabled` rules on real\n * pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-list-item-inactive-bg': styles.inactiveBg as string,\n    '--uxm-list-item-inactive-text': styles.inactiveText as string,\n    '--uxm-list-item-hover-bg': styles.hoverBg as string,\n    '--uxm-list-item-hover-text': styles.hoverText as string,\n    '--uxm-list-item-focus-text': styles.focusText as string,\n    '--uxm-list-item-focus-ring': styles.focusRing as string,\n    '--uxm-list-item-active-bg': styles.activeBg as string,\n    '--uxm-list-item-active-text': styles.activeText as string,\n    '--uxm-list-item-disabled-bg': styles.disabledBg as string,\n    '--uxm-list-item-disabled-text': styles.disabledText as string,\n    '--uxm-list-item-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-list-item-border-color': styles.borderColor as string,\n    '--uxm-list-item-border-radius': `${styles.borderRadius}px`,\n    '--uxm-list-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-list-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-list-item-gap': `${styles.gap}px`,\n    '--uxm-list-item-font-size': `${styles.fontSize}px`,\n    '--uxm-list-item-value-color': styles.valueColor as string,\n    '--uxm-list-item-value-size': `${styles.valueSize}px`,\n    '--uxm-list-item-icon-bg': styles.iconBg as string,\n    '--uxm-list-item-icon-color': styles.iconColor as string,\n    '--uxm-list-item-icon-size': `${styles.iconSize}px`,\n    '--uxm-list-item-icon-radius': `${styles.iconRadius}px`,\n    '--uxm-list-item-chevron-color': styles.chevronColor as string,\n  } as CSSProperties;\n}\n\n/**\n * Pick the canonical trailing element for the given mode. The trailing\n * slot is `ReactNode` on the atom — consumers can pass anything (Tag,\n * Badge, Avatar, custom node). The preview demos the canonical patterns:\n *   - interactive → chevron icon (the \"tap to drill in\" affordance)\n *   - static → Tag (status indicator for an info row)\n */\nfunction trailingForMode(\n  mode: Mode,\n  meta: string,\n  tagType: TagType,\n): ReactNode {\n  if (mode === 'interactive') {\n    // Color inherits via `currentColor` from `.uxm-list-item__trailing`,\n    // which reads `--uxm-list-item-chevron-color`. Keeps saves working\n    // (the var has a single source of truth instead of an inline JS\n    // override that would shadow it after save).\n    return <Icon glyph=\"chevron-right\" size={16} />;\n  }\n  return <Tag type={tagType}>{meta}</Tag>;\n}\n\n/**\n * Static showcase — ONE row, rendering matches the `mode` variant.\n *   - `interactive` → `<button>` with the forced-state class so all\n *     state CSS rules can apply (inert via pointer-events: none and\n *     tabIndex={-1}, so the forced state isn't overridden by real\n *     input).\n *   - `static` → `<div>` with no state class. State CSS rules are\n *     scoped to button/anchor element selectors and don't fire on\n *     divs, so the static row stays truly static.\n *\n * Hand-rendered because the atom doesn't expose a way to set the\n * showcase-only `--state-*` modifier class.\n */\nfunction StaticShowcase({\n  mode,\n  state,\n  showValue,\n}: {\n  mode: Mode;\n  state: string;\n  showValue: boolean;\n}) {\n  const isInteractive = mode === 'interactive';\n  const isActive = isInteractive && state === 'active';\n  const isDisabled = state === 'disabled';\n  const inner = (\n    <>\n      {/* Mirrors the atom: the icon slot is an IconTile, sized/coloured from\n          the same forwarded knob vars (glyph size comes from the tile var). */}\n      <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n        <Icon glyph=\"square\" />\n      </IconTile>\n      <span className=\"uxm-list-item__content\">\n        <span className=\"uxm-list-item__title\">Owner</span>\n        {showValue && <span className=\"uxm-list-item__value\">Alex Morgan</span>}\n      </span>\n      <span className=\"uxm-list-item__trailing\">\n        {trailingForMode(mode, 'Verified', 'success')}\n      </span>\n    </>\n  );\n\n  return (\n    <List>\n      {isInteractive ? (\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          disabled={isDisabled}\n          aria-pressed={isActive}\n          className={cn(\n            'uxm-list-item',\n            isActive && 'uxm-list-item--active',\n            state === 'hover' && 'uxm-list-item--state-hover',\n            state === 'focus' && 'uxm-list-item--state-focus',\n          )}\n          style={{ pointerEvents: 'none' }}\n        >\n          {inner}\n        </button>\n      ) : (\n        <div\n          className=\"uxm-list-item\"\n          {...(isDisabled ? { 'aria-disabled': true } : {})}\n        >\n          {inner}\n        </div>\n      )}\n    </List>\n  );\n}\n\nconst ROWS: Array<{\n  key: string;\n  title: string;\n  value: string;\n  meta: string;\n  tagType: TagType;\n}> = [\n  // One row per Tag type, with a label that matches the type's\n  // semantic meaning — so two tags never read the same word with\n  // different visual treatments.\n  { key: 'plan', title: 'Plan', value: 'Enterprise', meta: 'Pro', tagType: 'accent' },\n  { key: 'billing', title: 'Billing', value: 'Visa •• 4242', meta: 'Action needed', tagType: 'warning' },\n  { key: 'owner', title: 'Owner', value: 'Alex Morgan', meta: 'Verified', tagType: 'success' },\n  { key: 'activity', title: 'Last activity', value: '2 hours ago', meta: 'Recent', tagType: 'neutral' },\n];\n\nexport function ListItemPreview({ styles, variants }: PreviewProps) {\n  const mode = ((variants.mode as string) ?? 'interactive') as Mode;\n  const state = (variants.state as string) ?? 'default';\n  const showValue = ((variants.value as string) ?? 'shown') === 'shown';\n  const [activeKey, setActiveKey] = useState<string>('plan');\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 380, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase mode={mode} state={state} showValue={showValue} />\n      </div>\n\n      {/* List — interactivity is driven by the `mode` variant. Trailing\n          slot is set by the preview to the canonical example for each\n          mode: chevron for interactive (the \"tap to drill in\" cue),\n          Tag for static (status indicator).\n          interactive → all rows render as <button>; the State dropdown\n          carries through to `disabled` (applied to the second row),\n          and real `:hover` / `:focus-visible` exercise the production\n          CSS via the projected vars above.\n          static → all rows render as <div>; the interactive states\n          (hover / focus / active) are filtered out of the State picker\n          via the registry's showWhen. `disabled` still applies to divs\n          via `[aria-disabled]`. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>{mode === 'interactive' ? 'Interactive' : 'Static'}</div>\n        <List>\n          {ROWS.map((row, i) => {\n            const isInteractive = mode === 'interactive';\n            return (\n              <ListItem\n                key={row.key}\n                interactive={isInteractive}\n                active={isInteractive && row.key === activeKey}\n                // Disabled is a visual treatment that applies to both\n                // interactive rows (CSS `:disabled` / `[aria-disabled]`)\n                // and static rows (`[aria-disabled]` on `<div>`).\n                disabled={state === 'disabled' && i === 1}\n                icon={<Icon glyph=\"square\" />}\n                value={showValue ? row.value : undefined}\n                trailing={trailingForMode(mode, row.meta, row.tagType)}\n                onClick={isInteractive ? () => setActiveKey(row.key) : undefined}\n              >\n                {row.title}\n              </ListItem>\n            );\n          })}\n        </List>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/ui/list/list-item-preview.d.ts

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

package/dist/ui/list/list-item-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/list/list-item-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA8JrD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA6DjE"}

package/dist/ui/list/list-item-preview.js

@@ -0,0 +1,138 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon, IconTile } from "../../ui/index.js";
+import { List, ListItem } from "../../ui/index.js";
+import { Tag } from "../../ui/index.js";
+import { LIST_ITEM_ICON_TILE_STYLE } from "./list.js";
+function buildVars(styles) {
+  return {
+    "--uxm-list-item-inactive-bg": styles.inactiveBg,
+    "--uxm-list-item-inactive-text": styles.inactiveText,
+    "--uxm-list-item-hover-bg": styles.hoverBg,
+    "--uxm-list-item-hover-text": styles.hoverText,
+    "--uxm-list-item-focus-text": styles.focusText,
+    "--uxm-list-item-focus-ring": styles.focusRing,
+    "--uxm-list-item-active-bg": styles.activeBg,
+    "--uxm-list-item-active-text": styles.activeText,
+    "--uxm-list-item-disabled-bg": styles.disabledBg,
+    "--uxm-list-item-disabled-text": styles.disabledText,
+    "--uxm-list-item-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-list-item-border-color": styles.borderColor,
+    "--uxm-list-item-border-radius": `${styles.borderRadius}px`,
+    "--uxm-list-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-list-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-list-item-gap": `${styles.gap}px`,
+    "--uxm-list-item-font-size": `${styles.fontSize}px`,
+    "--uxm-list-item-value-color": styles.valueColor,
+    "--uxm-list-item-value-size": `${styles.valueSize}px`,
+    "--uxm-list-item-icon-bg": styles.iconBg,
+    "--uxm-list-item-icon-color": styles.iconColor,
+    "--uxm-list-item-icon-size": `${styles.iconSize}px`,
+    "--uxm-list-item-icon-radius": `${styles.iconRadius}px`,
+    "--uxm-list-item-chevron-color": styles.chevronColor
+  };
+}
+function trailingForMode(mode, meta, tagType) {
+  if (mode === "interactive") {
+    return /* @__PURE__ */ jsx(Icon, { glyph: "chevron-right", size: 16 });
+  }
+  return /* @__PURE__ */ jsx(Tag, { type: tagType, children: meta });
+}
+function StaticShowcase({
+  mode,
+  state,
+  showValue
+}) {
+  const isInteractive = mode === "interactive";
+  const isActive = isInteractive && state === "active";
+  const isDisabled = state === "disabled";
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IconTile, { className: "uxm-list-item__icon", style: LIST_ITEM_ICON_TILE_STYLE, children: /* @__PURE__ */ jsx(Icon, { glyph: "square" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "uxm-list-item__content", children: [
+      /* @__PURE__ */ jsx("span", { className: "uxm-list-item__title", children: "Owner" }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "uxm-list-item__value", children: "Alex Morgan" })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uxm-list-item__trailing", children: trailingForMode(mode, "Verified", "success") })
+  ] });
+  return /* @__PURE__ */ jsx(List, { children: isInteractive ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      disabled: isDisabled,
+      "aria-pressed": isActive,
+      className: cn(
+        "uxm-list-item",
+        isActive && "uxm-list-item--active",
+        state === "hover" && "uxm-list-item--state-hover",
+        state === "focus" && "uxm-list-item--state-focus"
+      ),
+      style: { pointerEvents: "none" },
+      children: inner
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "uxm-list-item",
+      ...isDisabled ? { "aria-disabled": true } : {},
+      children: inner
+    }
+  ) });
+}
+const ROWS = [
+  // One row per Tag type, with a label that matches the type's
+  // semantic meaning — so two tags never read the same word with
+  // different visual treatments.
+  { key: "plan", title: "Plan", value: "Enterprise", meta: "Pro", tagType: "accent" },
+  { key: "billing", title: "Billing", value: "Visa \u2022\u2022 4242", meta: "Action needed", tagType: "warning" },
+  { key: "owner", title: "Owner", value: "Alex Morgan", meta: "Verified", tagType: "success" },
+  { key: "activity", title: "Last activity", value: "2 hours ago", meta: "Recent", tagType: "neutral" }
+];
+function ListItemPreview({ styles, variants }) {
+  const mode = variants.mode ?? "interactive";
+  const state = variants.state ?? "default";
+  const showValue = (variants.value ?? "shown") === "shown";
+  const [activeKey, setActiveKey] = useState("plan");
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 380, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { mode, state, showValue })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: mode === "interactive" ? "Interactive" : "Static" }),
+      /* @__PURE__ */ jsx(List, { children: ROWS.map((row, i) => {
+        const isInteractive = mode === "interactive";
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            interactive: isInteractive,
+            active: isInteractive && row.key === activeKey,
+            disabled: state === "disabled" && i === 1,
+            icon: /* @__PURE__ */ jsx(Icon, { glyph: "square" }),
+            value: showValue ? row.value : void 0,
+            trailing: trailingForMode(mode, row.meta, row.tagType),
+            onClick: isInteractive ? () => setActiveKey(row.key) : void 0,
+            children: row.title
+          },
+          row.key
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  ListItemPreview
+};
+//# sourceMappingURL=list-item-preview.js.map

package/dist/ui/list/list-item-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/list/list-item-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties, type ReactNode } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon, IconTile } from '@/ui';\nimport { List, ListItem } from '@/ui';\nimport { Tag, type TagType } from '@/ui';\n\nimport { LIST_ITEM_ICON_TILE_STYLE } from './list';\n\ntype Styles = PreviewProps['styles'];\ntype Mode = 'static' | 'interactive';\n\n/**\n * Project every registry knob as a `--uxm-list-item-*` custom property\n * on the wrapper. Both the static showcase and the interactive list\n * below read from the same vars; the showcase forces a state via the\n * `--state-*` modifier class while the interactive list exercises the\n * production `:hover` / `:focus-visible` / `:disabled` rules on real\n * pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-list-item-inactive-bg': styles.inactiveBg as string,\n    '--uxm-list-item-inactive-text': styles.inactiveText as string,\n    '--uxm-list-item-hover-bg': styles.hoverBg as string,\n    '--uxm-list-item-hover-text': styles.hoverText as string,\n    '--uxm-list-item-focus-text': styles.focusText as string,\n    '--uxm-list-item-focus-ring': styles.focusRing as string,\n    '--uxm-list-item-active-bg': styles.activeBg as string,\n    '--uxm-list-item-active-text': styles.activeText as string,\n    '--uxm-list-item-disabled-bg': styles.disabledBg as string,\n    '--uxm-list-item-disabled-text': styles.disabledText as string,\n    '--uxm-list-item-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-list-item-border-color': styles.borderColor as string,\n    '--uxm-list-item-border-radius': `${styles.borderRadius}px`,\n    '--uxm-list-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-list-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-list-item-gap': `${styles.gap}px`,\n    '--uxm-list-item-font-size': `${styles.fontSize}px`,\n    '--uxm-list-item-value-color': styles.valueColor as string,\n    '--uxm-list-item-value-size': `${styles.valueSize}px`,\n    '--uxm-list-item-icon-bg': styles.iconBg as string,\n    '--uxm-list-item-icon-color': styles.iconColor as string,\n    '--uxm-list-item-icon-size': `${styles.iconSize}px`,\n    '--uxm-list-item-icon-radius': `${styles.iconRadius}px`,\n    '--uxm-list-item-chevron-color': styles.chevronColor as string,\n  } as CSSProperties;\n}\n\n/**\n * Pick the canonical trailing element for the given mode. The trailing\n * slot is `ReactNode` on the atom — consumers can pass anything (Tag,\n * Badge, Avatar, custom node). The preview demos the canonical patterns:\n *   - interactive → chevron icon (the \"tap to drill in\" affordance)\n *   - static → Tag (status indicator for an info row)\n */\nfunction trailingForMode(\n  mode: Mode,\n  meta: string,\n  tagType: TagType,\n): ReactNode {\n  if (mode === 'interactive') {\n    // Color inherits via `currentColor` from `.uxm-list-item__trailing`,\n    // which reads `--uxm-list-item-chevron-color`. Keeps saves working\n    // (the var has a single source of truth instead of an inline JS\n    // override that would shadow it after save).\n    return <Icon glyph=\"chevron-right\" size={16} />;\n  }\n  return <Tag type={tagType}>{meta}</Tag>;\n}\n\n/**\n * Static showcase — ONE row, rendering matches the `mode` variant.\n *   - `interactive` → `<button>` with the forced-state class so all\n *     state CSS rules can apply (inert via pointer-events: none and\n *     tabIndex={-1}, so the forced state isn't overridden by real\n *     input).\n *   - `static` → `<div>` with no state class. State CSS rules are\n *     scoped to button/anchor element selectors and don't fire on\n *     divs, so the static row stays truly static.\n *\n * Hand-rendered because the atom doesn't expose a way to set the\n * showcase-only `--state-*` modifier class.\n */\nfunction StaticShowcase({\n  mode,\n  state,\n  showValue,\n}: {\n  mode: Mode;\n  state: string;\n  showValue: boolean;\n}) {\n  const isInteractive = mode === 'interactive';\n  const isActive = isInteractive && state === 'active';\n  const isDisabled = state === 'disabled';\n  const inner = (\n    <>\n      {/* Mirrors the atom: the icon slot is an IconTile, sized/coloured from\n          the same forwarded knob vars (glyph size comes from the tile var). */}\n      <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n        <Icon glyph=\"square\" />\n      </IconTile>\n      <span className=\"uxm-list-item__content\">\n        <span className=\"uxm-list-item__title\">Owner</span>\n        {showValue && <span className=\"uxm-list-item__value\">Alex Morgan</span>}\n      </span>\n      <span className=\"uxm-list-item__trailing\">\n        {trailingForMode(mode, 'Verified', 'success')}\n      </span>\n    </>\n  );\n\n  return (\n    <List>\n      {isInteractive ? (\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          disabled={isDisabled}\n          aria-pressed={isActive}\n          className={cn(\n            'uxm-list-item',\n            isActive && 'uxm-list-item--active',\n            state === 'hover' && 'uxm-list-item--state-hover',\n            state === 'focus' && 'uxm-list-item--state-focus',\n          )}\n          style={{ pointerEvents: 'none' }}\n        >\n          {inner}\n        </button>\n      ) : (\n        <div\n          className=\"uxm-list-item\"\n          {...(isDisabled ? { 'aria-disabled': true } : {})}\n        >\n          {inner}\n        </div>\n      )}\n    </List>\n  );\n}\n\nconst ROWS: Array<{\n  key: string;\n  title: string;\n  value: string;\n  meta: string;\n  tagType: TagType;\n}> = [\n  // One row per Tag type, with a label that matches the type's\n  // semantic meaning — so two tags never read the same word with\n  // different visual treatments.\n  { key: 'plan', title: 'Plan', value: 'Enterprise', meta: 'Pro', tagType: 'accent' },\n  { key: 'billing', title: 'Billing', value: 'Visa •• 4242', meta: 'Action needed', tagType: 'warning' },\n  { key: 'owner', title: 'Owner', value: 'Alex Morgan', meta: 'Verified', tagType: 'success' },\n  { key: 'activity', title: 'Last activity', value: '2 hours ago', meta: 'Recent', tagType: 'neutral' },\n];\n\nexport function ListItemPreview({ styles, variants }: PreviewProps) {\n  const mode = ((variants.mode as string) ?? 'interactive') as Mode;\n  const state = (variants.state as string) ?? 'default';\n  const showValue = ((variants.value as string) ?? 'shown') === 'shown';\n  const [activeKey, setActiveKey] = useState<string>('plan');\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 380, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase mode={mode} state={state} showValue={showValue} />\n      </div>\n\n      {/* List — interactivity is driven by the `mode` variant. Trailing\n          slot is set by the preview to the canonical example for each\n          mode: chevron for interactive (the \"tap to drill in\" cue),\n          Tag for static (status indicator).\n          interactive → all rows render as <button>; the State dropdown\n          carries through to `disabled` (applied to the second row),\n          and real `:hover` / `:focus-visible` exercise the production\n          CSS via the projected vars above.\n          static → all rows render as <div>; the interactive states\n          (hover / focus / active) are filtered out of the State picker\n          via the registry's showWhen. `disabled` still applies to divs\n          via `[aria-disabled]`. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>{mode === 'interactive' ? 'Interactive' : 'Static'}</div>\n        <List>\n          {ROWS.map((row, i) => {\n            const isInteractive = mode === 'interactive';\n            return (\n              <ListItem\n                key={row.key}\n                interactive={isInteractive}\n                active={isInteractive && row.key === activeKey}\n                // Disabled is a visual treatment that applies to both\n                // interactive rows (CSS `:disabled` / `[aria-disabled]`)\n                // and static rows (`[aria-disabled]` on `<div>`).\n                disabled={state === 'disabled' && i === 1}\n                icon={<Icon glyph=\"square\" />}\n                value={showValue ? row.value : undefined}\n                trailing={trailingForMode(mode, row.meta, row.tagType)}\n                onClick={isInteractive ? () => setActiveKey(row.key) : undefined}\n              >\n                {row.title}\n              </ListItem>\n            );\n          })}\n        </List>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAoEW,SA+BP,UA/BO,KAqCL,YArCK;AApEX,SAAS,gBAAoD;AAE7D,SAAS,UAAU;AAEnB,SAAS,MAAM,gBAAgB;AAC/B,SAAS,MAAM,gBAAgB;AAC/B,SAAS,WAAyB;AAElC,SAAS,iCAAiC;AAa1C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,+BAA+B,OAAO;AAAA,IACtC,iCAAiC,OAAO;AAAA,IACxC,4BAA4B,OAAO;AAAA,IACnC,8BAA8B,OAAO;AAAA,IACrC,8BAA8B,OAAO;AAAA,IACrC,8BAA8B,OAAO;AAAA,IACrC,6BAA6B,OAAO;AAAA,IACpC,+BAA+B,OAAO;AAAA,IACtC,+BAA+B,OAAO;AAAA,IACtC,iCAAiC,OAAO;AAAA,IACxC,oCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,gCAAgC,OAAO;AAAA,IACvC,iCAAiC,GAAG,OAAO,YAAY;AAAA,IACvD,6BAA6B,GAAG,OAAO,QAAQ;AAAA,IAC/C,6BAA6B,GAAG,OAAO,QAAQ;AAAA,IAC/C,uBAAuB,GAAG,OAAO,GAAG;AAAA,IACpC,6BAA6B,GAAG,OAAO,QAAQ;AAAA,IAC/C,+BAA+B,OAAO;AAAA,IACtC,8BAA8B,GAAG,OAAO,SAAS;AAAA,IACjD,2BAA2B,OAAO;AAAA,IAClC,8BAA8B,OAAO;AAAA,IACrC,6BAA6B,GAAG,OAAO,QAAQ;AAAA,IAC/C,+BAA+B,GAAG,OAAO,UAAU;AAAA,IACnD,iCAAiC,OAAO;AAAA,EAC1C;AACF;AASA,SAAS,gBACP,MACA,MACA,SACW;AACX,MAAI,SAAS,eAAe;AAK1B,WAAO,oBAAC,QAAK,OAAM,iBAAgB,MAAM,IAAI;AAAA,EAC/C;AACA,SAAO,oBAAC,OAAI,MAAM,SAAU,gBAAK;AACnC;AAeA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,gBAAgB,SAAS;AAC/B,QAAM,WAAW,iBAAiB,UAAU;AAC5C,QAAM,aAAa,UAAU;AAC7B,QAAM,QACJ,iCAGE;AAAA,wBAAC,YAAS,WAAU,uBAAsB,OAAO,2BAC/C,8BAAC,QAAK,OAAM,UAAS,GACvB;AAAA,IACA,qBAAC,UAAK,WAAU,0BACd;AAAA,0BAAC,UAAK,WAAU,wBAAuB,mBAAK;AAAA,MAC3C,aAAa,oBAAC,UAAK,WAAU,wBAAuB,yBAAW;AAAA,OAClE;AAAA,IACA,oBAAC,UAAK,WAAU,2BACb,0BAAgB,MAAM,YAAY,SAAS,GAC9C;AAAA,KACF;AAGF,SACE,oBAAC,QACE,0BACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,OAAO,EAAE,eAAe,OAAO;AAAA,MAE9B;AAAA;AAAA,EACH,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAI,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAAA,MAE9C;AAAA;AAAA,EACH,GAEJ;AAEJ;AAEA,MAAM,OAMD;AAAA;AAAA;AAAA;AAAA,EAIH,EAAE,KAAK,QAAQ,OAAO,QAAQ,OAAO,cAAc,MAAM,OAAO,SAAS,SAAS;AAAA,EAClF,EAAE,KAAK,WAAW,OAAO,WAAW,OAAO,0BAAgB,MAAM,iBAAiB,SAAS,UAAU;AAAA,EACrG,EAAE,KAAK,SAAS,OAAO,SAAS,OAAO,eAAe,MAAM,YAAY,SAAS,UAAU;AAAA,EAC3F,EAAE,KAAK,YAAY,OAAO,iBAAiB,OAAO,eAAe,MAAM,UAAU,SAAS,UAAU;AACtG;AAEO,SAAS,gBAAgB,EAAE,QAAQ,SAAS,GAAiB;AAClE,QAAM,OAAS,SAAS,QAAmB;AAC3C,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,aAAc,SAAS,SAAoB,aAAa;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,MAAM;AACzD,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,UAAU,KAAK,GAAG,QAAQ,GACzF;AAAA,yBAAC,SACC;AAAA,2BAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,oBAAC,kBAAe,MAAY,OAAc,WAAsB;AAAA,OAClE;AAAA,IAcA,qBAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,0BAAC,SAAI,OAAO,cAAe,mBAAS,gBAAgB,gBAAgB,UAAS;AAAA,MAC7E,oBAAC,QACE,eAAK,IAAI,CAAC,KAAK,MAAM;AACpB,cAAM,gBAAgB,SAAS;AAC/B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,aAAa;AAAA,YACb,QAAQ,iBAAiB,IAAI,QAAQ;AAAA,YAIrC,UAAU,UAAU,cAAc,MAAM;AAAA,YACxC,MAAM,oBAAC,QAAK,OAAM,UAAS;AAAA,YAC3B,OAAO,YAAY,IAAI,QAAQ;AAAA,YAC/B,UAAU,gBAAgB,MAAM,IAAI,MAAM,IAAI,OAAO;AAAA,YACrD,SAAS,gBAAgB,MAAM,aAAa,IAAI,GAAG,IAAI;AAAA,YAEtD,cAAI;AAAA;AAAA,UAZA,IAAI;AAAA,QAaX;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/list/list.cjs

@@ -0,0 +1,106 @@
+"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 list_exports = {};
+__export(list_exports, {
+  LIST_ITEM_ICON_TILE_STYLE: () => LIST_ITEM_ICON_TILE_STYLE,
+  List: () => List,
+  ListItem: () => ListItem
+});
+module.exports = __toCommonJS(list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon_tile = require("../icon-tile/index.cjs");
+const LIST_ITEM_ICON_TILE_STYLE = {
+  "--uxm-icon-tile-bg": "var(--uxm-list-item-icon-bg, var(--color-accent))",
+  "--uxm-icon-tile-color": "var(--uxm-list-item-icon-color, var(--color-card))",
+  "--uxm-icon-tile-size": "var(--uxm-list-item-icon-size, 24px)",
+  "--uxm-icon-tile-radius": "var(--uxm-list-item-icon-radius, 6px)",
+  "--uxm-icon-tile-icon-size": "calc(var(--uxm-list-item-icon-size, 24px) * 0.6)"
+};
+function List({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_helpers.cn)("uxm-list", className), ...rest, children });
+}
+function ListItem({
+  icon,
+  value,
+  trailing,
+  children,
+  interactive,
+  active,
+  disabled,
+  href,
+  className,
+  ...rest
+}) {
+  const classes = (0, import_helpers.cn)(
+    "uxm-list-item",
+    active && "uxm-list-item--active",
+    className
+  );
+  const isInteractive = interactive || href !== void 0;
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_tile.IconTile, { className: "uxm-list-item__icon", style: LIST_ITEM_ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-list-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__title", children }),
+      value !== void 0 && value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__value", children: value })
+    ] }),
+    trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-list-item__trailing", children: trailing })
+  ] });
+  if (href !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        href,
+        className: classes,
+        ...disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+        ...rest,
+        children: inner
+      }
+    );
+  }
+  if (isInteractive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        disabled,
+        "aria-pressed": active,
+        ...rest,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: classes,
+      ...disabled ? { "aria-disabled": true } : {},
+      ...rest,
+      children: inner
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LIST_ITEM_ICON_TILE_STYLE,
+  List,
+  ListItem
+});
+//# sourceMappingURL=list.cjs.map

package/dist/ui/list/list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/list/list.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n} from 'react';\n\n/**\n * Forward the studio icon knobs (projected as `--uxm-list-item-icon-*` on the\n * row) into the `IconTile` atom's own var namespace, so the accent-tile\n * pattern lives in one place — the `IconTile` atom — instead of being\n * re-implemented in `list.scss`. The glyph tracks the tile at 0.6× (the\n * row-icon proportion used across the design system). Kept as a module\n * constant so the studio preview can reuse the exact same forwarding.\n */\nexport const LIST_ITEM_ICON_TILE_STYLE = {\n  '--uxm-icon-tile-bg': 'var(--uxm-list-item-icon-bg, var(--color-accent))',\n  '--uxm-icon-tile-color': 'var(--uxm-list-item-icon-color, var(--color-card))',\n  '--uxm-icon-tile-size': 'var(--uxm-list-item-icon-size, 24px)',\n  '--uxm-icon-tile-radius': 'var(--uxm-list-item-icon-radius, 6px)',\n  '--uxm-icon-tile-icon-size': 'calc(var(--uxm-list-item-icon-size, 24px) * 0.6)',\n} as CSSProperties;\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function List({ children, className, ...rest }: ListProps) {\n  return (\n    <div className={cn('uxm-list', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * ListItem renders as one of three element types depending on `interactive`:\n *   - `<div>` (default) — display row, no state styling, not focusable\n *   - `<button>` — interactive without navigation; emits click events\n *   - `<a>` — interactive with navigation; pass `href`\n *\n * The state knobs (hover / focus / active / disabled) in the `list-item`\n * registry only paint when the row renders as button or anchor — the CSS\n * scopes them to element-type selectors so display-only divs stay inert.\n */\nexport interface ListItemProps {\n  /** Leading icon — typically <Icon ... /> from @modo/uxm/ui. */\n  icon?: ReactNode;\n  /** Secondary text shown under the title (e.g. a value). */\n  value?: ReactNode;\n  /** Trailing content — meta text, chevron icon, or a custom node. */\n  trailing?: ReactNode;\n  /** Primary label. */\n  children: ReactNode;\n  /** Render as a clickable element. When false (default), renders as a\n   *  static `<div>` with no state styling. When true, renders as\n   *  `<button>` (or `<a>` if `href` is also passed). */\n  interactive?: boolean;\n  /** Show the selected/active treatment (only meaningful when\n   *  `interactive` is true). Adds the `--active` modifier class. */\n  active?: boolean;\n  /** Disable interaction — only meaningful when `interactive`.\n   *  Forwards to the native `disabled` attribute on `<button>`, or\n   *  sets `aria-disabled` on `<a>`. */\n  disabled?: boolean;\n  /** Navigate to this URL on click. Implies `interactive`. */\n  href?: string;\n  className?: string;\n}\n\ntype AnchorRest = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof ListItemProps\n>;\ntype ButtonRest = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof ListItemProps\n>;\ntype DivRest = Omit<HTMLAttributes<HTMLDivElement>, keyof ListItemProps>;\n\nexport function ListItem({\n  icon,\n  value,\n  trailing,\n  children,\n  interactive,\n  active,\n  disabled,\n  href,\n  className,\n  ...rest\n}: ListItemProps & (AnchorRest | ButtonRest | DivRest)) {\n  const classes = cn(\n    'uxm-list-item',\n    active && 'uxm-list-item--active',\n    className,\n  );\n  const isInteractive = interactive || href !== undefined;\n  const inner = (\n    <>\n      {icon && (\n        <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n          {icon}\n        </IconTile>\n      )}\n      <span className=\"uxm-list-item__content\">\n        <span className=\"uxm-list-item__title\">{children}</span>\n        {value !== undefined && value !== null && (\n          <span className=\"uxm-list-item__value\">{value}</span>\n        )}\n      </span>\n      {trailing && <span className=\"uxm-list-item__trailing\">{trailing}</span>}\n    </>\n  );\n\n  if (href !== undefined) {\n    return (\n      <a\n        href={href}\n        className={classes}\n        {...(disabled ? { 'aria-disabled': true as const, tabIndex: -1 } : {})}\n        {...(rest as AnchorRest)}\n      >\n        {inner}\n      </a>\n    );\n  }\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        className={classes}\n        disabled={disabled}\n        aria-pressed={active}\n        {...(rest as ButtonRest)}\n      >\n        {inner}\n      </button>\n    );\n  }\n  return (\n    <div\n      className={classes}\n      {...(disabled ? { 'aria-disabled': true as const } : {})}\n      {...(rest as DivRest)}\n    >\n      {inner}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAlCJ,qBAAmB;AAEnB,uBAAyB;AAkBlB,MAAM,4BAA4B;AAAA,EACvC,sBAAsB;AAAA,EACtB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,6BAA6B;AAC/B;AAMO,SAAS,KAAK,EAAE,UAAU,WAAW,GAAG,KAAK,GAAc;AAChE,SACE,4CAAC,SAAI,eAAW,mBAAG,YAAY,SAAS,GAAI,GAAG,MAC5C,UACH;AAEJ;AA+CO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,cAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF;AACA,QAAM,gBAAgB,eAAe,SAAS;AAC9C,QAAM,QACJ,4EACG;AAAA,YACC,4CAAC,6BAAS,WAAU,uBAAsB,OAAO,2BAC9C,gBACH;AAAA,IAEF,6CAAC,UAAK,WAAU,0BACd;AAAA,kDAAC,UAAK,WAAU,wBAAwB,UAAS;AAAA,MAChD,UAAU,UAAa,UAAU,QAChC,4CAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,OAElD;AAAA,IACC,YAAY,4CAAC,UAAK,WAAU,2BAA2B,oBAAS;AAAA,KACnE;AAGF,MAAI,SAAS,QAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI,WAAW,EAAE,iBAAiB,MAAe,UAAU,GAAG,IAAI,CAAC;AAAA,QACnE,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,MAAI,eAAe;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,QACX;AAAA,QACA,gBAAc;AAAA,QACb,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACV,GAAI,WAAW,EAAE,iBAAiB,KAAc,IAAI,CAAC;AAAA,MACrD,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ui/list/list.css

@@ -0,0 +1,77 @@
+@charset "UTF-8";
+/* ── list ── */
+.uxm-list {
+  background-color: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--uxm-list-item-border-radius, 8px);
+  overflow: hidden;
+}
+
+.uxm-list-item {
+  align-items: center;
+  background-color: var(--uxm-list-item-inactive-bg, transparent);
+  border-bottom: 1px solid var(--uxm-list-item-border-color, var(--color-border));
+  box-sizing: border-box;
+  color: var(--uxm-list-item-inactive-text, var(--color-text));
+  display: flex;
+  font-size: calc(var(--uxm-list-item-font-size, 14px) * var(--type-scale, 1));
+  gap: var(--uxm-list-item-gap, 12px);
+  padding: var(--uxm-list-item-padding-y, 12px) var(--uxm-list-item-padding-x, 16px);
+  /* Fill the List container. Static <div> rows stretch on their own, but
+     interactive <button> rows are shrink-to-fit form controls — without
+     `width` they'd size to content and sit narrow. `text-align: left`
+     clears the UA <button> centering so the title/value text nodes inside
+     the flex content column left-align, matching the <div> rows. */
+  text-align: left;
+  width: 100%;
+}
+.uxm-list-item:last-child {
+  border-bottom: none;
+}
+.uxm-list-item {
+  /* Interactive list items (rendered as <button>/<a>) read their state vars;
+     fallbacks equal the resting look, so a static row is visually unchanged. */
+}
+.uxm-list-item:hover {
+  background-color: var(--uxm-list-item-hover-bg, var(--color-surface-alt));
+  color: var(--uxm-list-item-hover-text, var(--color-text));
+}
+.uxm-list-item:focus-visible {
+  color: var(--uxm-list-item-focus-text, var(--color-text));
+  outline: 2px solid var(--uxm-list-item-focus-ring, var(--color-accent));
+  outline-offset: -2px;
+}
+.uxm-list-item:disabled, .uxm-list-item[aria-disabled=true] {
+  background-color: var(--uxm-list-item-disabled-bg, var(--color-card));
+  color: var(--uxm-list-item-disabled-text, var(--color-text-muted));
+  opacity: var(--uxm-list-item-disabled-opacity, 0.5);
+  pointer-events: none;
+}
+.uxm-list-item--active {
+  background-color: var(--uxm-list-item-active-bg, var(--color-accent-subtle));
+  color: var(--uxm-list-item-active-text, var(--color-accent-bold));
+}
+.uxm-list-item {
+  /* Icon slot renders as the shared `IconTile` atom (composed in list.tsx),
+     which owns the accent-tile treatment. The studio icon knobs are forwarded
+     into IconTile's var namespace via `LIST_ITEM_ICON_TILE_STYLE`, so the tile
+     pattern is defined once instead of being re-implemented here. */
+}
+.uxm-list-item__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.uxm-list-item__title {
+  font-weight: 500;
+}
+.uxm-list-item__value {
+  color: var(--uxm-list-item-value-color, var(--color-text-muted));
+  font-size: calc(var(--uxm-list-item-value-size, 12px) * var(--type-scale, 1));
+}
+.uxm-list-item__trailing {
+  color: var(--uxm-list-item-chevron-color, var(--color-text-muted));
+  font-size: calc(12px * var(--type-scale, 1));
+}