@viax.io/uxm 4.36.0

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

@@ -0,0 +1,274 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { ICONS, Icon } from "../../ui/index.js";
+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__ */ jsx("span", { className: "uxm-listbox__option-indicator uxm-checkbox", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "uxm-listbox__option-checkbox",
+        isSelected && "uxm-listbox__option-checkbox--checked"
+      ),
+      children: isSelected && /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 10 })
+    }
+  ) });
+}
+function renderCheckmarkIndicator(isSelected) {
+  if (!isSelected) return null;
+  return /* @__PURE__ */ jsx("span", { className: "uxm-listbox__option-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14 }) });
+}
+const DEMO_ITEMS = 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 = cn(
+    "uxm-listbox__option",
+    state === "hover" && "uxm-listbox__option--active",
+    isSelected && "uxm-listbox__option--selected",
+    isDisabled && "uxm-listbox__option--disabled"
+  );
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "uxm-listbox__list", style: { overflowY: "visible" }, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className,
+          tabIndex: -1,
+          disabled: isDisabled || void 0,
+          children: [
+            mode === "multi" && renderCheckboxIndicator(isSelected),
+            /* @__PURE__ */ jsx(Icon, { glyph: "user", size: 14 }),
+            /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              "Sample row \u2014 ",
+              state
+            ] }),
+            /* @__PURE__ */ 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] = useState("");
+  const [singleValue, setSingleValue] = useState(null);
+  const [multiValue, setMultiValue] = 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__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "uxm-listbox__option",
+          selected && "uxm-listbox__option--selected"
+        ),
+        onClick: () => select(it),
+        children: [
+          mode === "multi" && showCheckbox && renderCheckboxIndicator(selected),
+          /* @__PURE__ */ jsx(Icon, { glyph: it.iconGlyph, size: 14 }),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.label }),
+          mode === "single" && renderCheckmarkIndicator(selected)
+        ]
+      },
+      it.id
+    );
+  };
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "uxm-listbox__search", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              glyph: "search",
+              size: 14,
+              className: "uxm-listbox__search-icon"
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: "uxm-listbox__list",
+            style: columns > 1 ? { "--uxm-listbox-list-columns": columns } : void 0,
+            children: filtered.length === 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "uxm-listbox__footer", children: /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state, mode })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Open panel" }),
+      /* @__PURE__ */ jsx(
+        OpenPanel,
+        {
+          withSearch,
+          withGroups,
+          withFooter,
+          mode,
+          showCheckbox,
+          columns
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ListboxPreview
+};
+//# sourceMappingURL=listbox-preview.js.map

package/dist/ui/listbox/listbox-preview.js.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":[]}