@viax.io/uxm 4.36.0

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

@@ -0,0 +1,54 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Forward the studio icon knobs (projected as `--uxm-list-item-icon-*` on the
+ * row) into the `IconTile` atom's own var namespace, so the accent-tile
+ * pattern lives in one place — the `IconTile` atom — instead of being
+ * re-implemented in `list.scss`. The glyph tracks the tile at 0.6× (the
+ * row-icon proportion used across the design system). Kept as a module
+ * constant so the studio preview can reuse the exact same forwarding.
+ */
+export declare const LIST_ITEM_ICON_TILE_STYLE: CSSProperties;
+export interface ListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare function List({ children, className, ...rest }: ListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ListItem renders as one of three element types depending on `interactive`:
+ *   - `<div>` (default) — display row, no state styling, not focusable
+ *   - `<button>` — interactive without navigation; emits click events
+ *   - `<a>` — interactive with navigation; pass `href`
+ *
+ * The state knobs (hover / focus / active / disabled) in the `list-item`
+ * registry only paint when the row renders as button or anchor — the CSS
+ * scopes them to element-type selectors so display-only divs stay inert.
+ */
+export interface ListItemProps {
+    /** Leading icon — typically <Icon ... /> from @modo/uxm/ui. */
+    icon?: ReactNode;
+    /** Secondary text shown under the title (e.g. a value). */
+    value?: ReactNode;
+    /** Trailing content — meta text, chevron icon, or a custom node. */
+    trailing?: ReactNode;
+    /** Primary label. */
+    children: ReactNode;
+    /** Render as a clickable element. When false (default), renders as a
+     *  static `<div>` with no state styling. When true, renders as
+     *  `<button>` (or `<a>` if `href` is also passed). */
+    interactive?: boolean;
+    /** Show the selected/active treatment (only meaningful when
+     *  `interactive` is true). Adds the `--active` modifier class. */
+    active?: boolean;
+    /** Disable interaction — only meaningful when `interactive`.
+     *  Forwards to the native `disabled` attribute on `<button>`, or
+     *  sets `aria-disabled` on `<a>`. */
+    disabled?: boolean;
+    /** Navigate to this URL on click. Implies `interactive`. */
+    href?: string;
+    className?: string;
+}
+type AnchorRest = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ListItemProps>;
+type ButtonRest = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ListItemProps>;
+type DivRest = Omit<HTMLAttributes<HTMLDivElement>, keyof ListItemProps>;
+export declare function ListItem({ icon, value, trailing, children, interactive, active, disabled, href, className, ...rest }: ListItemProps & (AnchorRest | ButtonRest | DivRest)): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/ui/list/list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAMjC,aAAa,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAM/D;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;0DAEsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;sEACkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;yCAEqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;AAEzE,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,CAAC,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,2CA0DrD"}

package/dist/ui/list/list.js

@@ -0,0 +1,80 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { IconTile } from "../icon-tile/index.js";
+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__ */ jsx("div", { className: cn("uxm-list", className), ...rest, children });
+}
+function ListItem({
+  icon,
+  value,
+  trailing,
+  children,
+  interactive,
+  active,
+  disabled,
+  href,
+  className,
+  ...rest
+}) {
+  const classes = cn(
+    "uxm-list-item",
+    active && "uxm-list-item--active",
+    className
+  );
+  const isInteractive = interactive || href !== void 0;
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(IconTile, { className: "uxm-list-item__icon", style: LIST_ITEM_ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "uxm-list-item__content", children: [
+      /* @__PURE__ */ jsx("span", { className: "uxm-list-item__title", children }),
+      value !== void 0 && value !== null && /* @__PURE__ */ jsx("span", { className: "uxm-list-item__value", children: value })
+    ] }),
+    trailing && /* @__PURE__ */ jsx("span", { className: "uxm-list-item__trailing", children: trailing })
+  ] });
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        className: classes,
+        ...disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+        ...rest,
+        children: inner
+      }
+    );
+  }
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        disabled,
+        "aria-pressed": active,
+        ...rest,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...disabled ? { "aria-disabled": true } : {},
+      ...rest,
+      children: inner
+    }
+  );
+}
+export {
+  LIST_ITEM_ICON_TILE_STYLE,
+  List,
+  ListItem
+};
+//# sourceMappingURL=list.js.map

package/dist/ui/list/list.js.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":"AAkCI,SAsEA,UAtEA,KA4EE,YA5EF;AAlCJ,SAAS,UAAU;AAEnB,SAAS,gBAAgB;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,oBAAC,SAAI,WAAW,GAAG,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,UAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF;AACA,QAAM,gBAAgB,eAAe,SAAS;AAC9C,QAAM,QACJ,iCACG;AAAA,YACC,oBAAC,YAAS,WAAU,uBAAsB,OAAO,2BAC9C,gBACH;AAAA,IAEF,qBAAC,UAAK,WAAU,0BACd;AAAA,0BAAC,UAAK,WAAU,wBAAwB,UAAS;AAAA,MAChD,UAAU,UAAa,UAAU,QAChC,oBAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,OAElD;AAAA,IACC,YAAY,oBAAC,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/listbox/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 listbox_exports = {};
+module.exports = __toCommonJS(listbox_exports);
+__reExport(listbox_exports, require("./listbox.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./listbox.cjs")
+});
+//# sourceMappingURL=index.cjs.map

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

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

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

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

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

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

package/dist/ui/listbox/index.js

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

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

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

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

@@ -0,0 +1,298 @@
+"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 listbox_preview_exports = {};
+__export(listbox_preview_exports, {
+  ListboxPreview: () => ListboxPreview
+});
+module.exports = __toCommonJS(listbox_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");
+function buildVars(styles) {
+  return {
+    "--uxm-listbox-panel-bg": styles.panelBg,
+    "--uxm-listbox-panel-border": styles.panelBorder,
+    "--uxm-listbox-panel-radius": `${styles.panelRadius}px`,
+    "--uxm-listbox-shadow-color": styles.shadowColor,
+    "--uxm-listbox-shadow-blur": `${styles.shadowBlur}px`,
+    "--uxm-listbox-shadow-offset-y": `${styles.shadowOffsetY}px`,
+    "--uxm-listbox-panel-max-height": `${styles.panelMaxHeight}px`,
+    "--uxm-listbox-search-border": styles.searchBorder,
+    "--uxm-listbox-search-icon-color": styles.searchIconColor,
+    "--uxm-listbox-search-color": styles.searchColor,
+    "--uxm-listbox-search-placeholder-color": styles.searchPlaceholderColor,
+    "--uxm-listbox-search-font-size": `${styles.searchFontSize}px`,
+    "--uxm-listbox-option-padding-x": `${styles.optionPaddingX}px`,
+    "--uxm-listbox-option-padding-y": `${styles.optionPaddingY}px`,
+    "--uxm-listbox-option-font-size": `${styles.optionFontSize}px`,
+    "--uxm-listbox-option-radius": `${styles.optionRadius}px`,
+    "--uxm-listbox-option-default-bg": styles.optionDefaultBg,
+    "--uxm-listbox-option-color": styles.optionColor,
+    "--uxm-listbox-option-active-bg": styles.optionActiveBg,
+    "--uxm-listbox-option-active-color": styles.optionActiveColor,
+    "--uxm-listbox-option-selected-bg": styles.optionSelectedBg,
+    "--uxm-listbox-option-selected-color": styles.optionSelectedColor,
+    "--uxm-listbox-option-disabled-opacity": styles.optionDisabledOpacity != null ? String(styles.optionDisabledOpacity) : void 0,
+    "--uxm-listbox-group-header-font-size": `${styles.groupHeaderFontSize}px`,
+    "--uxm-listbox-group-header-color": styles.groupHeaderColor,
+    "--uxm-listbox-empty-color": styles.emptyColor,
+    "--uxm-listbox-footer-border": styles.footerBorder
+  };
+}
+function renderCheckboxIndicator(isSelected) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-listbox__option-indicator uxm-checkbox", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-listbox__option-checkbox",
+        isSelected && "uxm-listbox__option-checkbox--checked"
+      ),
+      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 10 })
+    }
+  ) });
+}
+function renderCheckmarkIndicator(isSelected) {
+  if (!isSelected) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-listbox__option-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 14 }) });
+}
+const DEMO_ITEMS = import_ui.ICONS.slice(0, 16).map((g, i) => ({
+  id: g.id,
+  label: g.label,
+  iconGlyph: g.id,
+  group: i < 8 ? "Common" : "Other"
+}));
+function StaticShowcase({
+  state,
+  mode
+}) {
+  const isSelected = state === "selected";
+  const isDisabled = state === "disabled";
+  const className = (0, import_helpers.cn)(
+    "uxm-listbox__option",
+    state === "hover" && "uxm-listbox__option--active",
+    isSelected && "uxm-listbox__option--selected",
+    isDisabled && "uxm-listbox__option--disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "uxm-listbox__panel",
+      style: {
+        width: 280,
+        // Override the live atom's `position: fixed` / `overflow: hidden`
+        // since the showcase is rendered inline, not portaled. Without
+        // these the panel collapses to zero size.
+        position: "static",
+        overflow: "visible",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__list", style: { overflowY: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          className,
+          tabIndex: -1,
+          disabled: isDisabled || void 0,
+          children: [
+            mode === "multi" && renderCheckboxIndicator(isSelected),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "user", size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              "Sample row \u2014 ",
+              state
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, color: "var(--color-text-subtle)" }, children: "meta" }),
+            mode === "single" && renderCheckmarkIndicator(isSelected)
+          ]
+        }
+      ) })
+    }
+  );
+}
+function OpenPanel({
+  withSearch,
+  withGroups,
+  withFooter,
+  mode,
+  showCheckbox,
+  columns
+}) {
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [singleValue, setSingleValue] = (0, import_react.useState)(null);
+  const [multiValue, setMultiValue] = (0, import_react.useState)([]);
+  const isSelected = (item) => mode === "multi" ? multiValue.some((v) => v.id === item.id) : singleValue?.id === item.id;
+  const filtered = search ? DEMO_ITEMS.filter((it) => it.label.toLowerCase().includes(search.toLowerCase())) : DEMO_ITEMS;
+  const select = (item) => {
+    if (mode === "multi") {
+      const has = multiValue.some((v) => v.id === item.id);
+      setMultiValue(has ? multiValue.filter((v) => v.id !== item.id) : [...multiValue, item]);
+    } else {
+      setSingleValue(singleValue?.id === item.id ? null : item);
+    }
+  };
+  const grouped = withGroups ? (() => {
+    const order = [];
+    const map = /* @__PURE__ */ new Map();
+    for (const it of filtered) {
+      if (!map.has(it.group)) {
+        map.set(it.group, []);
+        order.push(it.group);
+      }
+      map.get(it.group).push(it);
+    }
+    return order.map((g) => ({ group: g, items: map.get(g) }));
+  })() : [{ group: "", items: filtered }];
+  const renderRow = (it) => {
+    const selected = isSelected(it);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_helpers.cn)(
+          "uxm-listbox__option",
+          selected && "uxm-listbox__option--selected"
+        ),
+        onClick: () => select(it),
+        children: [
+          mode === "multi" && showCheckbox && renderCheckboxIndicator(selected),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: it.iconGlyph, size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.label }),
+          mode === "single" && renderCheckmarkIndicator(selected)
+        ]
+      },
+      it.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "uxm-listbox__panel",
+      style: {
+        // Same `position: static` / `overflow: visible` override the
+        // static showcase uses — the panel CSS is `position: fixed` for
+        // the real portaled case; here we're inline so we need to
+        // neutralize that. A two-column list wants more width, so the
+        // panel widens to keep each column comfortable (the same call a
+        // real consumer makes via a wider anchor / minPanelWidth).
+        width: columns > 1 ? 380 : 280,
+        position: "static"
+      },
+      children: [
+        withSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-listbox__search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.Icon,
+            {
+              glyph: "search",
+              size: 14,
+              className: "uxm-listbox__search-icon"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "text",
+              className: "uxm-listbox__search-input",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Search\u2026",
+              autoComplete: "off",
+              spellCheck: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "uxm-listbox__list",
+            style: columns > 1 ? { "--uxm-listbox-list-columns": columns } : void 0,
+            children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__empty", children: "No matches" }) : withGroups ? (
+              // Headers + rows are emitted as a FLAT sibling sequence (no per-group
+              // wrapper), exactly like the real atom's DOM — so a header's
+              // `column-span: all` and the rows' `column-count` balancing behave
+              // here the way they do in production.
+              grouped.flatMap((g) => [
+                g.group ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "uxm-listbox__group-header",
+                    role: "presentation",
+                    children: g.group
+                  },
+                  `h_${g.group}`
+                ) : null,
+                ...g.items.map(renderRow)
+              ])
+            ) : (
+              // Flat list — rows are DIRECT children of `__list` (matching the
+              // real atom's DOM), so `column-count` can balance them into the
+              // multi-column wrap.
+              filtered.map(renderRow)
+            )
+          }
+        ),
+        withFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: "var(--color-text-subtle)" }, children: "Footer slot \u2014 e.g. custom hex input" }) })
+      ]
+    }
+  );
+}
+function ListboxPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const withSearch = (variants.withSearch ?? "yes") === "yes";
+  const withGroups = (variants.withGroups ?? "no") === "yes";
+  const withFooter = (variants.withFooter ?? "no") === "yes";
+  const mode = variants.mode ?? "single";
+  const showCheckbox = (variants.showCheckbox ?? "on") === "on";
+  const columns = Number(variants.columns ?? "1");
+  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, ...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, { state, mode })
+    ] }),
+    /* @__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: "Open panel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        OpenPanel,
+        {
+          withSearch,
+          withGroups,
+          withFooter,
+          mode,
+          showCheckbox,
+          columns
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListboxPreview
+});
+//# sourceMappingURL=listbox-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/listbox/listbox-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { ICONS, Icon } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-listbox-{kebab(key)}` — matches what save/route.ts's kebab\n * fallback path produces, so no PER_COMPONENT_MAPPING entry is needed.\n *\n * The same vars feed BOTH the static showcase (top) and the open-panel\n * demo (bottom). Both are rendered inline (no portal) so the vars on\n * the wrapper cascade naturally — no `panelStyle` injection needed.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-listbox-panel-bg': styles.panelBg as string,\n    '--uxm-listbox-panel-border': styles.panelBorder as string,\n    '--uxm-listbox-panel-radius': `${styles.panelRadius}px`,\n    '--uxm-listbox-shadow-color': styles.shadowColor as string,\n    '--uxm-listbox-shadow-blur': `${styles.shadowBlur}px`,\n    '--uxm-listbox-shadow-offset-y': `${styles.shadowOffsetY}px`,\n    '--uxm-listbox-panel-max-height': `${styles.panelMaxHeight}px`,\n\n    '--uxm-listbox-search-border': styles.searchBorder as string,\n    '--uxm-listbox-search-icon-color': styles.searchIconColor as string,\n    '--uxm-listbox-search-color': styles.searchColor as string,\n    '--uxm-listbox-search-placeholder-color': styles.searchPlaceholderColor as string,\n    '--uxm-listbox-search-font-size': `${styles.searchFontSize}px`,\n\n    '--uxm-listbox-option-padding-x': `${styles.optionPaddingX}px`,\n    '--uxm-listbox-option-padding-y': `${styles.optionPaddingY}px`,\n    '--uxm-listbox-option-font-size': `${styles.optionFontSize}px`,\n    '--uxm-listbox-option-radius': `${styles.optionRadius}px`,\n    '--uxm-listbox-option-default-bg': styles.optionDefaultBg as string,\n    '--uxm-listbox-option-color': styles.optionColor as string,\n    '--uxm-listbox-option-active-bg': styles.optionActiveBg as string,\n    '--uxm-listbox-option-active-color': styles.optionActiveColor as string,\n    '--uxm-listbox-option-selected-bg': styles.optionSelectedBg as string,\n    '--uxm-listbox-option-selected-color': styles.optionSelectedColor as string,\n    '--uxm-listbox-option-disabled-opacity':\n      styles.optionDisabledOpacity != null ? String(styles.optionDisabledOpacity) : undefined,\n\n    '--uxm-listbox-group-header-font-size': `${styles.groupHeaderFontSize}px`,\n    '--uxm-listbox-group-header-color': styles.groupHeaderColor as string,\n\n    '--uxm-listbox-empty-color': styles.emptyColor as string,\n    '--uxm-listbox-footer-border': styles.footerBorder as string,\n  } as CSSProperties;\n}\n\n/**\n * Render the leading checkbox slot (multi-select mode) — same DOM the\n * live atom emits. Slot is reserved on every row; the marker toggles\n * `--checked` based on the row's selected state.\n */\nfunction renderCheckboxIndicator(isSelected: boolean) {\n  // `uxm-checkbox` on the wrapper is intentional — it lets the saved\n  // `.uxm-checkbox { --uxm-checkbox-*: … }` rule cascade into the\n  // marker. Without it, tuning Checkbox colours in the workbench\n  // wouldn't reach this preview. Mirrors the atom's DOM.\n  return (\n    <span className=\"uxm-listbox__option-indicator uxm-checkbox\" aria-hidden=\"true\">\n      <span\n        className={cn(\n          'uxm-listbox__option-checkbox',\n          isSelected && 'uxm-listbox__option-checkbox--checked',\n        )}\n      >\n        {isSelected && <Icon glyph=\"check\" size={10} />}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Render the trailing ✓ (single-select mode) — only on selected rows.\n * `margin-left: auto` in CSS pushes it to the row's right edge.\n */\nfunction renderCheckmarkIndicator(isSelected: boolean) {\n  if (!isSelected) return null;\n  return (\n    <span className=\"uxm-listbox__option-checkmark\" aria-hidden=\"true\">\n      <Icon glyph=\"check\" size={14} />\n    </span>\n  );\n}\n\n// Demo items — icon-glyph picker shape. Sixteen total: long enough that the\n// two-column wrap has an obvious payoff (eight rows per column), split into\n// two groups so the `withGroups` variant has something to demonstrate.\ntype Item = { id: string; label: string; iconGlyph: string; group: string };\nconst DEMO_ITEMS: Item[] = ICONS.slice(0, 16).map((g, i) => ({\n  id: g.id,\n  label: g.label,\n  iconGlyph: g.id,\n  group: i < 8 ? 'Common' : 'Other',\n}));\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Static showcase — ONE row inside panel chrome, state-driven by variant\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Hand-rendered (not the real `<Listbox>`) because we need to FORCE a\n * specific row state regardless of pointer / keyboard. The open-panel\n * demo below also uses the real atom's DOM so production CSS still\n * exercises against it.\n *\n * `pointer-events: none` + `tabIndex={-1}` keep the showcase inert —\n * without that, hovering it would paint the `:hover`-style active bg\n * even when the user picked \"default\" in the variant, defeating the\n * forced-state mock.\n */\nfunction StaticShowcase({\n  state,\n  mode,\n}: {\n  state: string;\n  mode: 'single' | 'multi';\n}) {\n  const isSelected = state === 'selected';\n  const isDisabled = state === 'disabled';\n  // The atom's CSS class is named `--active` because it covers both\n  // mouse hover and keyboard highlight (they paint identically). The\n  // workbench variant label is \"Hover\" because that's the term\n  // designers use — keep them in sync here.\n  const className = cn(\n    'uxm-listbox__option',\n    state === 'hover' && 'uxm-listbox__option--active',\n    isSelected && 'uxm-listbox__option--selected',\n    isDisabled && 'uxm-listbox__option--disabled',\n  );\n\n  return (\n    <div\n      className=\"uxm-listbox__panel\"\n      style={{\n        width: 280,\n        // Override the live atom's `position: fixed` / `overflow: hidden`\n        // since the showcase is rendered inline, not portaled. Without\n        // these the panel collapses to zero size.\n        position: 'static',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n    >\n      <div className=\"uxm-listbox__list\" style={{ overflowY: 'visible' }}>\n        <button\n          type=\"button\"\n          className={className}\n          tabIndex={-1}\n          disabled={isDisabled || undefined}\n        >\n          {/* Multi-select: left checkbox on every row. Single-select:\n              right ✓ on selected only (rendered after content via\n              renderCheckmarkIndicator). */}\n          {mode === 'multi' && renderCheckboxIndicator(isSelected)}\n          <Icon glyph=\"user\" size={14} />\n          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n            Sample row — {state}\n          </span>\n          <span style={{ fontSize: 11, color: 'var(--color-text-subtle)' }}>meta</span>\n          {mode === 'single' && renderCheckmarkIndicator(isSelected)}\n        </button>\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Open panel — full panel rendered inline, always-open, no trigger\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * The Listbox atom is fundamentally about the PANEL — triggers are\n * consumer-rendered. This section drops the (previously confusing)\n * \"trigger + click to open\" UX from the preview and renders the panel\n * directly so it's clear what's being tuned.\n *\n * Hand-rendered with the SAME DOM + classes the live `<Listbox>` emits\n * (`.uxm-listbox__panel`, `__search`, `__list`, `__option`, `__option--active`,\n * `__option--selected`, `__option-indicator`, `__option-checkmark`,\n * `__group-header`, `__footer`, `__empty`) so production CSS — and any\n * workbench tuning saved against `.uxm-listbox__panel` — applies the\n * same way it would in real consumers like PhoneInput and CurrencyInput.\n *\n * Interactivity is preview-only: typing in the search field filters\n * the list, clicking rows selects (single) or toggles (multi). No\n * keyboard nav / focus management — that's the atom's concern, and\n * users tuning visuals just need to see hover / selected / disabled\n * states paint correctly.\n */\nfunction OpenPanel({\n  withSearch,\n  withGroups,\n  withFooter,\n  mode,\n  showCheckbox,\n  columns,\n}: {\n  withSearch: boolean;\n  withGroups: boolean;\n  withFooter: boolean;\n  mode: 'single' | 'multi';\n  showCheckbox: boolean;\n  columns: number;\n}) {\n  const [search, setSearch] = useState('');\n  const [singleValue, setSingleValue] = useState<Item | null>(null);\n  const [multiValue, setMultiValue] = useState<Item[]>([]);\n\n  const isSelected = (item: Item) =>\n    mode === 'multi'\n      ? multiValue.some((v) => v.id === item.id)\n      : singleValue?.id === item.id;\n\n  const filtered = search\n    ? DEMO_ITEMS.filter((it) => it.label.toLowerCase().includes(search.toLowerCase()))\n    : DEMO_ITEMS;\n\n  const select = (item: Item) => {\n    if (mode === 'multi') {\n      const has = multiValue.some((v) => v.id === item.id);\n      setMultiValue(has ? multiValue.filter((v) => v.id !== item.id) : [...multiValue, item]);\n    } else {\n      setSingleValue(singleValue?.id === item.id ? null : item);\n    }\n  };\n\n  // Group the filtered list by `group` when the variant is on. Stable\n  // group order — first appearance wins — matches the real atom's\n  // grouping behavior.\n  const grouped: Array<{ group: string; items: Item[] }> = withGroups\n    ? (() => {\n        const order: string[] = [];\n        const map = new Map<string, Item[]>();\n        for (const it of filtered) {\n          if (!map.has(it.group)) {\n            map.set(it.group, []);\n            order.push(it.group);\n          }\n          map.get(it.group)!.push(it);\n        }\n        return order.map((g) => ({ group: g, items: map.get(g)! }));\n      })()\n    : [{ group: '', items: filtered }];\n\n  const renderRow = (it: Item) => {\n    const selected = isSelected(it);\n    return (\n      <button\n        key={it.id}\n        type=\"button\"\n        className={cn(\n          'uxm-listbox__option',\n          selected && 'uxm-listbox__option--selected',\n        )}\n        onClick={() => select(it)}\n      >\n        {mode === 'multi' && showCheckbox && renderCheckboxIndicator(selected)}\n        <Icon glyph={it.iconGlyph} size={14} />\n        <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n          {it.label}\n        </span>\n        {mode === 'single' && renderCheckmarkIndicator(selected)}\n      </button>\n    );\n  };\n\n  return (\n    <div\n      className=\"uxm-listbox__panel\"\n      style={{\n        // Same `position: static` / `overflow: visible` override the\n        // static showcase uses — the panel CSS is `position: fixed` for\n        // the real portaled case; here we're inline so we need to\n        // neutralize that. A two-column list wants more width, so the\n        // panel widens to keep each column comfortable (the same call a\n        // real consumer makes via a wider anchor / minPanelWidth).\n        width: columns > 1 ? 380 : 280,\n        position: 'static',\n      }}\n    >\n      {withSearch && (\n        <div className=\"uxm-listbox__search\">\n          <Icon\n            glyph=\"search\"\n            size={14}\n            className=\"uxm-listbox__search-icon\"\n          />\n          <input\n            type=\"text\"\n            className=\"uxm-listbox__search-input\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            placeholder=\"Search…\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n        </div>\n      )}\n      <div\n        className=\"uxm-listbox__list\"\n        style={columns > 1 ? ({ '--uxm-listbox-list-columns': columns } as CSSProperties) : undefined}\n      >\n        {filtered.length === 0 ? (\n          <div className=\"uxm-listbox__empty\">No matches</div>\n        ) : withGroups ? (\n          // Headers + rows are emitted as a FLAT sibling sequence (no per-group\n          // wrapper), exactly like the real atom's DOM — so a header's\n          // `column-span: all` and the rows' `column-count` balancing behave\n          // here the way they do in production.\n          grouped.flatMap((g) => [\n            g.group ? (\n              <div\n                key={`h_${g.group}`}\n                className=\"uxm-listbox__group-header\"\n                role=\"presentation\"\n              >\n                {g.group}\n              </div>\n            ) : null,\n            ...g.items.map(renderRow),\n          ])\n        ) : (\n          // Flat list — rows are DIRECT children of `__list` (matching the\n          // real atom's DOM), so `column-count` can balance them into the\n          // multi-column wrap.\n          filtered.map(renderRow)\n        )}\n      </div>\n      {withFooter && (\n        <div className=\"uxm-listbox__footer\">\n          <span style={{ fontSize: 12, color: 'var(--color-text-subtle)' }}>\n            Footer slot — e.g. custom hex input\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Entry — static showcase stacked above the always-open panel\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Two-section preview:\n *\n *   1. **Static showcase** (top) — one row rendered inert, with the\n *      `state` variant flipping the modifier classes. Lets the user\n *      see exactly what each state looks like, knob-by-knob, without\n *      having to hover / click anything in the panel below.\n *\n *   2. **Open panel** (bottom) — the panel rendered inline, always\n *      open. No trigger — Listbox is about the PANEL, and triggers\n *      are consumer-rendered (PhoneInput's country button,\n *      CurrencyInput's currency button, etc.). The preview avoids the\n *      \"looks like a complete combobox\" misread that the earlier\n *      trigger-and-open-on-click design produced.\n *\n *      Search + click-to-select are wired for visual feedback so all\n *      panel knob tuning is testable in place.\n */\nexport function ListboxPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = (variants.state as string) ?? 'default';\n  const withSearch = (variants.withSearch ?? 'yes') === 'yes';\n  const withGroups = (variants.withGroups ?? 'no') === 'yes';\n  const withFooter = (variants.withFooter ?? 'no') === 'yes';\n  const mode = ((variants.mode as string) ?? 'single') as 'single' | 'multi';\n  // Multi-only design variant — checkbox indicator on/off. The\n  // `excludeSelected` toggle (hide picked items) was intentionally\n  // dropped from the workbench: it's a consumer-level decision (used\n  // internally by PillSelect), not a panel-design choice.\n  const showCheckbox = (variants.showCheckbox ?? 'on') === 'on';\n  // Multi-column wrap for long flat lists — the variant value is the count.\n  const columns = Number(variants.columns ?? '1');\n\n  const cssVars = buildVars(styles);\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} mode={mode} />\n      </div>\n\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Open panel</div>\n        <OpenPanel\n          withSearch={withSearch}\n          withGroups={withGroups}\n          withFooter={withFooter}\n          mode={mode}\n          showCheckbox={showCheckbox}\n          columns={columns}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,23 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Two-section preview:
+ *
+ *   1. **Static showcase** (top) — one row rendered inert, with the
+ *      `state` variant flipping the modifier classes. Lets the user
+ *      see exactly what each state looks like, knob-by-knob, without
+ *      having to hover / click anything in the panel below.
+ *
+ *   2. **Open panel** (bottom) — the panel rendered inline, always
+ *      open. No trigger — Listbox is about the PANEL, and triggers
+ *      are consumer-rendered (PhoneInput's country button,
+ *      CurrencyInput's currency button, etc.). The preview avoids the
+ *      "looks like a complete combobox" misread that the earlier
+ *      trigger-and-open-on-click design produced.
+ *
+ *      Search + click-to-select are wired for visual feedback so all
+ *      panel knob tuning is testable in place.
+ */
+export declare function ListboxPreview({ styles, variants }: PreviewProps & {
+    componentId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=listbox-preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/listbox-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA2VrD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CA4C1F"}