@viax.io/uxm 4.36.0

package/dist/ui/responsive-grid/responsive-grid-preview.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveGrid } from "../../ui/index.js";
+function ResponsiveGridPreview({ styles }) {
+  const min = styles.min ?? "200px";
+  const gap = styles.gap;
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", maxWidth: 720 }, children: /* @__PURE__ */ jsx(ResponsiveGrid, { min, gap, children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: 16,
+        minHeight: 80,
+        borderRadius: 8,
+        border: "1px solid var(--color-border)",
+        backgroundColor: "var(--color-card)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 13,
+        color: "var(--color-text-muted)"
+      },
+      children: [
+        "Item ",
+        i + 1
+      ]
+    },
+    i
+  )) }) });
+}
+export {
+  ResponsiveGridPreview
+};
+//# sourceMappingURL=responsive-grid-preview.js.map

package/dist/ui/responsive-grid/responsive-grid-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/responsive-grid/responsive-grid-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ResponsiveGrid } from '@/ui';\n\n/**\n * Drops 6 placeholder cards into a ResponsiveGrid sized to the canvas.\n * Resizing the Properties pane (which narrows/widens the canvas) shows\n * the grid wrapping in real time — the whole point of `auto-fit`.\n */\nexport function ResponsiveGridPreview({ styles }: PreviewProps) {\n  const min = (styles.min as string) ?? '200px';\n  const gap = styles.gap as number;\n  // Wrap to 100% width so the grid sees the canvas width as its container,\n  // not its own intrinsic content width. Without this the auto-fit\n  // collapses to one column at any viewport because the grid is\n  // shrink-wrapped to its children.\n  return (\n    <div style={{ width: '100%', maxWidth: 720 }}>\n      <ResponsiveGrid min={min} gap={gap}>\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={i}\n            style={{\n              padding: 16,\n              minHeight: 80,\n              borderRadius: 8,\n              border: '1px solid var(--color-border)',\n              backgroundColor: 'var(--color-card)',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontSize: 13,\n              color: 'var(--color-text-muted)',\n            }}\n          >\n            Item {i + 1}\n          </div>\n        ))}\n      </ResponsiveGrid>\n    </div>\n  );\n}\n"],"mappings":"AAiBM,cAEI,YAFJ;AAhBN,SAAS,sBAAsB;AAOxB,SAAS,sBAAsB,EAAE,OAAO,GAAiB;AAC9D,QAAM,MAAO,OAAO,OAAkB;AACtC,QAAM,MAAM,OAAO;AAKnB,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,UAAU,IAAI,GACzC,8BAAC,kBAAe,KAAU,KACvB,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACD;AAAA;AAAA,QACO,IAAI;AAAA;AAAA;AAAA,IAdL;AAAA,EAeP,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/ui/responsive-grid/responsive-grid.cjs

@@ -0,0 +1,44 @@
+"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 responsive_grid_exports = {};
+__export(responsive_grid_exports, {
+  ResponsiveGrid: () => ResponsiveGrid
+});
+module.exports = __toCommonJS(responsive_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function ResponsiveGrid({
+  min,
+  gap,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...min !== void 0 ? { ["--uxm-responsive-grid-min"]: min } : null,
+    ...gap !== void 0 ? { ["--uxm-responsive-grid-gap"]: typeof gap === "number" ? `${gap}px` : gap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_helpers.cn)("uxm-responsive-grid", className), style: mergedStyle, ...rest });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResponsiveGrid
+});
+//# sourceMappingURL=responsive-grid.cjs.map

package/dist/ui/responsive-grid/responsive-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/responsive-grid/responsive-grid.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode, CSSProperties } from 'react';\n\nexport interface ResponsiveGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Minimum column width before the grid wraps a child onto the next row.\n   * Drives `grid-template-columns: repeat(auto-fit, minmax(min, 1fr))` —\n   * the browser figures out how many columns fit, no media queries required.\n   * Accepts any CSS length: \"200px\", \"20rem\", \"20ch\", etc. Defaults to 200px.\n   */\n  min?: string;\n  /** Gap between cells. Defaults to 16px. */\n  gap?: string | number;\n  children?: ReactNode;\n}\n\n/**\n * The responsive workhorse — drop N children inside, the browser lays them\n * out as many-columns when there's room and single-column when there isn't,\n * with no breakpoint scaffolding. The same instance behaves correctly inside\n * a wide dashboard pane and inside a narrow side flexpane.\n *\n * Theming knobs live on `--uxm-responsive-grid-{min,gap}` so the editor can\n * tune the wrap point and gap globally. The component's own props win when\n * present (the editor overrides serve as defaults).\n */\nexport function ResponsiveGrid({\n  min,\n  gap,\n  className,\n  style,\n  ...rest\n}: ResponsiveGridProps) {\n  const mergedStyle: CSSProperties = {\n    ...(min !== undefined ? { ['--uxm-responsive-grid-min' as string]: min } : null),\n    ...(gap !== undefined\n      ? { ['--uxm-responsive-grid-gap' as string]: typeof gap === 'number' ? `${gap}px` : gap }\n      : null),\n    ...style,\n  };\n  return (\n    <div className={cn('uxm-responsive-grid', className)} style={mergedStyle} {...rest} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AA1CJ,qBAAmB;AA2BZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,cAA6B;AAAA,IACjC,GAAI,QAAQ,SAAY,EAAE,CAAC,2BAAqC,GAAG,IAAI,IAAI;AAAA,IAC3E,GAAI,QAAQ,SACR,EAAE,CAAC,2BAAqC,GAAG,OAAO,QAAQ,WAAW,GAAG,GAAG,OAAO,IAAI,IACtF;AAAA,IACJ,GAAG;AAAA,EACL;AACA,SACE,4CAAC,SAAI,eAAW,mBAAG,uBAAuB,SAAS,GAAG,OAAO,aAAc,GAAG,MAAM;AAExF;","names":[]}

package/dist/ui/responsive-grid/responsive-grid.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+/* ResponsiveGrid — moved from monolithic styles.css */
+.uxm-responsive-grid {
+  display: grid;
+  gap: var(--uxm-responsive-grid-gap, 16px);
+  grid-template-columns: repeat(auto-fit, minmax(var(--uxm-responsive-grid-min, 200px), 1fr));
+}

package/dist/ui/responsive-grid/responsive-grid.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ResponsiveGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Minimum column width before the grid wraps a child onto the next row.
+     * Drives `grid-template-columns: repeat(auto-fit, minmax(min, 1fr))` —
+     * the browser figures out how many columns fit, no media queries required.
+     * Accepts any CSS length: "200px", "20rem", "20ch", etc. Defaults to 200px.
+     */
+    min?: string;
+    /** Gap between cells. Defaults to 16px. */
+    gap?: string | number;
+    children?: ReactNode;
+}
+/**
+ * The responsive workhorse — drop N children inside, the browser lays them
+ * out as many-columns when there's room and single-column when there isn't,
+ * with no breakpoint scaffolding. The same instance behaves correctly inside
+ * a wide dashboard pane and inside a narrow side flexpane.
+ *
+ * Theming knobs live on `--uxm-responsive-grid-{min,gap}` so the editor can
+ * tune the wrap point and gap globally. The component's own props win when
+ * present (the editor overrides serve as defaults).
+ */
+export declare function ResponsiveGrid({ min, gap, className, style, ...rest }: ResponsiveGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=responsive-grid.d.ts.map

package/dist/ui/responsive-grid/responsive-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-grid.d.ts","sourceRoot":"","sources":["../../../src/ui/responsive-grid/responsive-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAWrB"}

package/dist/ui/responsive-grid/responsive-grid.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function ResponsiveGrid({
+  min,
+  gap,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...min !== void 0 ? { ["--uxm-responsive-grid-min"]: min } : null,
+    ...gap !== void 0 ? { ["--uxm-responsive-grid-gap"]: typeof gap === "number" ? `${gap}px` : gap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("uxm-responsive-grid", className), style: mergedStyle, ...rest });
+}
+export {
+  ResponsiveGrid
+};
+//# sourceMappingURL=responsive-grid.js.map

package/dist/ui/responsive-grid/responsive-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/responsive-grid/responsive-grid.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode, CSSProperties } from 'react';\n\nexport interface ResponsiveGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Minimum column width before the grid wraps a child onto the next row.\n   * Drives `grid-template-columns: repeat(auto-fit, minmax(min, 1fr))` —\n   * the browser figures out how many columns fit, no media queries required.\n   * Accepts any CSS length: \"200px\", \"20rem\", \"20ch\", etc. Defaults to 200px.\n   */\n  min?: string;\n  /** Gap between cells. Defaults to 16px. */\n  gap?: string | number;\n  children?: ReactNode;\n}\n\n/**\n * The responsive workhorse — drop N children inside, the browser lays them\n * out as many-columns when there's room and single-column when there isn't,\n * with no breakpoint scaffolding. The same instance behaves correctly inside\n * a wide dashboard pane and inside a narrow side flexpane.\n *\n * Theming knobs live on `--uxm-responsive-grid-{min,gap}` so the editor can\n * tune the wrap point and gap globally. The component's own props win when\n * present (the editor overrides serve as defaults).\n */\nexport function ResponsiveGrid({\n  min,\n  gap,\n  className,\n  style,\n  ...rest\n}: ResponsiveGridProps) {\n  const mergedStyle: CSSProperties = {\n    ...(min !== undefined ? { ['--uxm-responsive-grid-min' as string]: min } : null),\n    ...(gap !== undefined\n      ? { ['--uxm-responsive-grid-gap' as string]: typeof gap === 'number' ? `${gap}px` : gap }\n      : null),\n    ...style,\n  };\n  return (\n    <div className={cn('uxm-responsive-grid', className)} style={mergedStyle} {...rest} />\n  );\n}\n"],"mappings":"AA0CI;AA1CJ,SAAS,UAAU;AA2BZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,cAA6B;AAAA,IACjC,GAAI,QAAQ,SAAY,EAAE,CAAC,2BAAqC,GAAG,IAAI,IAAI;AAAA,IAC3E,GAAI,QAAQ,SACR,EAAE,CAAC,2BAAqC,GAAG,OAAO,QAAQ,WAAW,GAAG,GAAG,OAAO,IAAI,IACtF;AAAA,IACJ,GAAG;AAAA,EACL;AACA,SACE,oBAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GAAG,OAAO,aAAc,GAAG,MAAM;AAExF;","names":[]}

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

package/dist/ui/search-dropdown/index.cjs.map

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

package/dist/ui/search-dropdown/index.d.ts

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

package/dist/ui/search-dropdown/index.d.ts.map

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

package/dist/ui/search-dropdown/index.js

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

package/dist/ui/search-dropdown/index.js.map

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

package/dist/ui/search-dropdown/search-dropdown-preview.cjs

@@ -0,0 +1,92 @@
+"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 search_dropdown_preview_exports = {};
+__export(search_dropdown_preview_exports, {
+  SearchDropdownPreview: () => SearchDropdownPreview
+});
+module.exports = __toCommonJS(search_dropdown_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");
+const DEMO_OPTIONS = import_ui.ICONS.slice(0, 24).map((g) => ({
+  value: g.id,
+  label: g.label,
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: g.id, size: 14 })
+}));
+function buildVars(styles) {
+  return {
+    "--uxm-search-dropdown-trigger-bg": styles.triggerBg,
+    "--uxm-search-dropdown-trigger-border": styles.triggerBorder,
+    "--uxm-search-dropdown-trigger-color": styles.triggerColor,
+    "--uxm-search-dropdown-trigger-radius": `${styles.triggerRadius}px`,
+    "--uxm-search-dropdown-trigger-padding-x": `${styles.triggerPaddingX}px`,
+    "--uxm-search-dropdown-trigger-padding-y": `${styles.triggerPaddingY}px`,
+    "--uxm-search-dropdown-trigger-font-size": `${styles.triggerFontSize}px`,
+    "--uxm-search-dropdown-trigger-hover-bg": styles.triggerHoverBg,
+    "--uxm-search-dropdown-trigger-hover-border": styles.triggerHoverBorder,
+    "--uxm-search-dropdown-trigger-focus-border": styles.triggerFocusBorder,
+    "--uxm-search-dropdown-trigger-focus-ring": styles.triggerFocusRing,
+    "--uxm-search-dropdown-trigger-disabled-bg": styles.triggerDisabledBg,
+    "--uxm-search-dropdown-trigger-disabled-border": styles.triggerDisabledBorder,
+    "--uxm-search-dropdown-trigger-disabled-color": styles.triggerDisabledColor,
+    "--uxm-search-dropdown-trigger-disabled-opacity": styles.triggerDisabledOpacity != null ? String(styles.triggerDisabledOpacity) : void 0,
+    "--uxm-search-dropdown-trigger-error-bg": styles.triggerErrorBg,
+    "--uxm-search-dropdown-trigger-error-border": styles.triggerErrorBorder,
+    "--uxm-search-dropdown-trigger-error-color": styles.triggerErrorColor,
+    "--uxm-search-dropdown-trigger-error-message-size": styles.triggerErrorMessageSize != null ? `${styles.triggerErrorMessageSize}px` : void 0,
+    // Popover + option-row vars live on the Listbox atom now —
+    // SearchDropdown is a thin wrapper that consumes them. Tune via
+    // the `listbox` registry entry.
+    width: 280
+  };
+}
+function SearchDropdownPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchDropdownDemo, { state, styles }, state);
+}
+function SearchDropdownDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = (0, import_react.useState)(isError ? DEMO_OPTIONS[0]?.value ?? "" : "search");
+  const cssVars = buildVars(styles);
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-search-dropdown--state-hover",
+    state === "focus" && "uxm-search-dropdown--state-focus"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: cssVars, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui3.SearchDropdown,
+    {
+      value,
+      onChange: setValue,
+      options: DEMO_OPTIONS,
+      placeholder: "Pick an icon\u2026",
+      searchPlaceholder: "Search icons\u2026",
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      error: isError ? "That icon isn't available in this context." : void 0
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchDropdownPreview
+});
+//# sourceMappingURL=search-dropdown-preview.cjs.map

package/dist/ui/search-dropdown/search-dropdown-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/search-dropdown/search-dropdown-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { ICONS } from '@/ui';\nimport { Icon } from '@/ui';\nimport { SearchDropdown, type SearchDropdownOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst DEMO_OPTIONS: SearchDropdownOption[] = ICONS.slice(0, 24).map((g) => ({\n  value: g.id,\n  label: g.label,\n  icon: <Icon glyph={g.id} size={14} />,\n}));\n\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-search-dropdown-trigger-bg': styles.triggerBg as string,\n    '--uxm-search-dropdown-trigger-border': styles.triggerBorder as string,\n    '--uxm-search-dropdown-trigger-color': styles.triggerColor as string,\n    '--uxm-search-dropdown-trigger-radius': `${styles.triggerRadius}px`,\n    '--uxm-search-dropdown-trigger-padding-x': `${styles.triggerPaddingX}px`,\n    '--uxm-search-dropdown-trigger-padding-y': `${styles.triggerPaddingY}px`,\n    '--uxm-search-dropdown-trigger-font-size': `${styles.triggerFontSize}px`,\n    '--uxm-search-dropdown-trigger-hover-bg': styles.triggerHoverBg as string,\n    '--uxm-search-dropdown-trigger-hover-border': styles.triggerHoverBorder as string,\n    '--uxm-search-dropdown-trigger-focus-border': styles.triggerFocusBorder as string,\n    '--uxm-search-dropdown-trigger-focus-ring': styles.triggerFocusRing as string,\n    '--uxm-search-dropdown-trigger-disabled-bg': styles.triggerDisabledBg as string,\n    '--uxm-search-dropdown-trigger-disabled-border': styles.triggerDisabledBorder as string,\n    '--uxm-search-dropdown-trigger-disabled-color': styles.triggerDisabledColor as string,\n    '--uxm-search-dropdown-trigger-disabled-opacity':\n      styles.triggerDisabledOpacity != null ? String(styles.triggerDisabledOpacity) : undefined,\n    '--uxm-search-dropdown-trigger-error-bg': styles.triggerErrorBg as string,\n    '--uxm-search-dropdown-trigger-error-border': styles.triggerErrorBorder as string,\n    '--uxm-search-dropdown-trigger-error-color': styles.triggerErrorColor as string,\n    '--uxm-search-dropdown-trigger-error-message-size':\n      styles.triggerErrorMessageSize != null ? `${styles.triggerErrorMessageSize}px` : undefined,\n    // Popover + option-row vars live on the Listbox atom now —\n    // SearchDropdown is a thin wrapper that consumes them. Tune via\n    // the `listbox` registry entry.\n    width: 280,\n  } as CSSProperties;\n}\n\nexport function SearchDropdownPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <SearchDropdownDemo key={state} state={state} styles={styles} />;\n}\n\n// Keyed by state in the parent so changing the State knob remounts this\n// sub-component and `useState` re-seeds — no effect needed to sync.\nfunction SearchDropdownDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Error state pre-selects an icon so the trigger reads as \"you picked\n  // something invalid\" — paired with the error message below.\n  const [value, setValue] = useState(isError ? DEMO_OPTIONS[0]?.value ?? '' : 'search');\n\n  const cssVars = buildVars(styles);\n\n  // Forced-state modifier classes live on the wrapper; CSS descendant\n  // selectors paint the inner trigger button. Disabled engages via the\n  // actual `disabled` prop on SearchDropdown (which sets the button's\n  // disabled attribute, blocking the popover open).\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-search-dropdown--state-hover',\n    state === 'focus' && 'uxm-search-dropdown--state-focus',\n  );\n\n  return (\n    <div style={cssVars}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <SearchDropdown\n        value={value}\n        onChange={setValue}\n        options={DEMO_OPTIONS}\n        placeholder=\"Pick an icon…\"\n        searchPlaceholder=\"Search icons…\"\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        error={isError ? \"That icon isn't available in this context.\" : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaQ;AAbR,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAAsB;AACtB,IAAAA,aAAqB;AACrB,IAAAA,aAA0D;AAI1D,MAAM,eAAuC,gBAAM,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO;AAAA,EAC1E,OAAO,EAAE;AAAA,EACT,OAAO,EAAE;AAAA,EACT,MAAM,4CAAC,mBAAK,OAAO,EAAE,IAAI,MAAM,IAAI;AACrC,EAAE;AAEF,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,oCAAoC,OAAO;AAAA,IAC3C,wCAAwC,OAAO;AAAA,IAC/C,uCAAuC,OAAO;AAAA,IAC9C,wCAAwC,GAAG,OAAO,aAAa;AAAA,IAC/D,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,0CAA0C,OAAO;AAAA,IACjD,8CAA8C,OAAO;AAAA,IACrD,8CAA8C,OAAO;AAAA,IACrD,4CAA4C,OAAO;AAAA,IACnD,6CAA6C,OAAO;AAAA,IACpD,iDAAiD,OAAO;AAAA,IACxD,gDAAgD,OAAO;AAAA,IACvD,kDACE,OAAO,0BAA0B,OAAO,OAAO,OAAO,sBAAsB,IAAI;AAAA,IAClF,0CAA0C,OAAO;AAAA,IACjD,8CAA8C,OAAO;AAAA,IACrD,6CAA6C,OAAO;AAAA,IACpD,oDACE,OAAO,2BAA2B,OAAO,GAAG,OAAO,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInF,OAAO;AAAA,EACT;AACF;AAEO,SAAS,sBAAsB,EAAE,QAAQ,SAAS,GAAiB;AACxE,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,4CAAC,sBAA+B,OAAc,UAArB,KAAqC;AACvE;AAIA,SAAS,mBAAmB,EAAE,OAAO,OAAO,GAAsC;AAChF,QAAM,UAAU,UAAU;AAI1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,aAAa,CAAC,GAAG,SAAS,KAAK,QAAQ;AAEpF,QAAM,UAAU,UAAU,MAAM;AAMhC,QAAM,kBAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,4CAAC,SAAI,OAAO,SAIV;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,mBAAkB;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,OAAO,UAAU,+CAA+C;AAAA;AAAA,EAClE,GACF;AAEJ;","names":["import_ui"]}

package/dist/ui/search-dropdown/search-dropdown-preview.d.ts

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

package/dist/ui/search-dropdown/search-dropdown-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-dropdown-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/search-dropdown/search-dropdown-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA2CrD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAGvE"}

package/dist/ui/search-dropdown/search-dropdown-preview.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { ICONS } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { SearchDropdown } from "../../ui/index.js";
+const DEMO_OPTIONS = ICONS.slice(0, 24).map((g) => ({
+  value: g.id,
+  label: g.label,
+  icon: /* @__PURE__ */ jsx(Icon, { glyph: g.id, size: 14 })
+}));
+function buildVars(styles) {
+  return {
+    "--uxm-search-dropdown-trigger-bg": styles.triggerBg,
+    "--uxm-search-dropdown-trigger-border": styles.triggerBorder,
+    "--uxm-search-dropdown-trigger-color": styles.triggerColor,
+    "--uxm-search-dropdown-trigger-radius": `${styles.triggerRadius}px`,
+    "--uxm-search-dropdown-trigger-padding-x": `${styles.triggerPaddingX}px`,
+    "--uxm-search-dropdown-trigger-padding-y": `${styles.triggerPaddingY}px`,
+    "--uxm-search-dropdown-trigger-font-size": `${styles.triggerFontSize}px`,
+    "--uxm-search-dropdown-trigger-hover-bg": styles.triggerHoverBg,
+    "--uxm-search-dropdown-trigger-hover-border": styles.triggerHoverBorder,
+    "--uxm-search-dropdown-trigger-focus-border": styles.triggerFocusBorder,
+    "--uxm-search-dropdown-trigger-focus-ring": styles.triggerFocusRing,
+    "--uxm-search-dropdown-trigger-disabled-bg": styles.triggerDisabledBg,
+    "--uxm-search-dropdown-trigger-disabled-border": styles.triggerDisabledBorder,
+    "--uxm-search-dropdown-trigger-disabled-color": styles.triggerDisabledColor,
+    "--uxm-search-dropdown-trigger-disabled-opacity": styles.triggerDisabledOpacity != null ? String(styles.triggerDisabledOpacity) : void 0,
+    "--uxm-search-dropdown-trigger-error-bg": styles.triggerErrorBg,
+    "--uxm-search-dropdown-trigger-error-border": styles.triggerErrorBorder,
+    "--uxm-search-dropdown-trigger-error-color": styles.triggerErrorColor,
+    "--uxm-search-dropdown-trigger-error-message-size": styles.triggerErrorMessageSize != null ? `${styles.triggerErrorMessageSize}px` : void 0,
+    // Popover + option-row vars live on the Listbox atom now —
+    // SearchDropdown is a thin wrapper that consumes them. Tune via
+    // the `listbox` registry entry.
+    width: 280
+  };
+}
+function SearchDropdownPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(SearchDropdownDemo, { state, styles }, state);
+}
+function SearchDropdownDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = useState(isError ? DEMO_OPTIONS[0]?.value ?? "" : "search");
+  const cssVars = buildVars(styles);
+  const forcedClass = cn(
+    state === "hover" && "uxm-search-dropdown--state-hover",
+    state === "focus" && "uxm-search-dropdown--state-focus"
+  );
+  return /* @__PURE__ */ jsx("div", { style: cssVars, children: /* @__PURE__ */ jsx(
+    SearchDropdown,
+    {
+      value,
+      onChange: setValue,
+      options: DEMO_OPTIONS,
+      placeholder: "Pick an icon\u2026",
+      searchPlaceholder: "Search icons\u2026",
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      error: isError ? "That icon isn't available in this context." : void 0
+    }
+  ) });
+}
+export {
+  SearchDropdownPreview
+};
+//# sourceMappingURL=search-dropdown-preview.js.map

package/dist/ui/search-dropdown/search-dropdown-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/search-dropdown/search-dropdown-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { ICONS } from '@/ui';\nimport { Icon } from '@/ui';\nimport { SearchDropdown, type SearchDropdownOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst DEMO_OPTIONS: SearchDropdownOption[] = ICONS.slice(0, 24).map((g) => ({\n  value: g.id,\n  label: g.label,\n  icon: <Icon glyph={g.id} size={14} />,\n}));\n\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-search-dropdown-trigger-bg': styles.triggerBg as string,\n    '--uxm-search-dropdown-trigger-border': styles.triggerBorder as string,\n    '--uxm-search-dropdown-trigger-color': styles.triggerColor as string,\n    '--uxm-search-dropdown-trigger-radius': `${styles.triggerRadius}px`,\n    '--uxm-search-dropdown-trigger-padding-x': `${styles.triggerPaddingX}px`,\n    '--uxm-search-dropdown-trigger-padding-y': `${styles.triggerPaddingY}px`,\n    '--uxm-search-dropdown-trigger-font-size': `${styles.triggerFontSize}px`,\n    '--uxm-search-dropdown-trigger-hover-bg': styles.triggerHoverBg as string,\n    '--uxm-search-dropdown-trigger-hover-border': styles.triggerHoverBorder as string,\n    '--uxm-search-dropdown-trigger-focus-border': styles.triggerFocusBorder as string,\n    '--uxm-search-dropdown-trigger-focus-ring': styles.triggerFocusRing as string,\n    '--uxm-search-dropdown-trigger-disabled-bg': styles.triggerDisabledBg as string,\n    '--uxm-search-dropdown-trigger-disabled-border': styles.triggerDisabledBorder as string,\n    '--uxm-search-dropdown-trigger-disabled-color': styles.triggerDisabledColor as string,\n    '--uxm-search-dropdown-trigger-disabled-opacity':\n      styles.triggerDisabledOpacity != null ? String(styles.triggerDisabledOpacity) : undefined,\n    '--uxm-search-dropdown-trigger-error-bg': styles.triggerErrorBg as string,\n    '--uxm-search-dropdown-trigger-error-border': styles.triggerErrorBorder as string,\n    '--uxm-search-dropdown-trigger-error-color': styles.triggerErrorColor as string,\n    '--uxm-search-dropdown-trigger-error-message-size':\n      styles.triggerErrorMessageSize != null ? `${styles.triggerErrorMessageSize}px` : undefined,\n    // Popover + option-row vars live on the Listbox atom now —\n    // SearchDropdown is a thin wrapper that consumes them. Tune via\n    // the `listbox` registry entry.\n    width: 280,\n  } as CSSProperties;\n}\n\nexport function SearchDropdownPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <SearchDropdownDemo key={state} state={state} styles={styles} />;\n}\n\n// Keyed by state in the parent so changing the State knob remounts this\n// sub-component and `useState` re-seeds — no effect needed to sync.\nfunction SearchDropdownDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Error state pre-selects an icon so the trigger reads as \"you picked\n  // something invalid\" — paired with the error message below.\n  const [value, setValue] = useState(isError ? DEMO_OPTIONS[0]?.value ?? '' : 'search');\n\n  const cssVars = buildVars(styles);\n\n  // Forced-state modifier classes live on the wrapper; CSS descendant\n  // selectors paint the inner trigger button. Disabled engages via the\n  // actual `disabled` prop on SearchDropdown (which sets the button's\n  // disabled attribute, blocking the popover open).\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-search-dropdown--state-hover',\n    state === 'focus' && 'uxm-search-dropdown--state-focus',\n  );\n\n  return (\n    <div style={cssVars}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <SearchDropdown\n        value={value}\n        onChange={setValue}\n        options={DEMO_OPTIONS}\n        placeholder=\"Pick an icon…\"\n        searchPlaceholder=\"Search icons…\"\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        error={isError ? \"That icon isn't available in this context.\" : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAaQ;AAbR,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,sBAAiD;AAI1D,MAAM,eAAuC,MAAM,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO;AAAA,EAC1E,OAAO,EAAE;AAAA,EACT,OAAO,EAAE;AAAA,EACT,MAAM,oBAAC,QAAK,OAAO,EAAE,IAAI,MAAM,IAAI;AACrC,EAAE;AAEF,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,oCAAoC,OAAO;AAAA,IAC3C,wCAAwC,OAAO;AAAA,IAC/C,uCAAuC,OAAO;AAAA,IAC9C,wCAAwC,GAAG,OAAO,aAAa;AAAA,IAC/D,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,2CAA2C,GAAG,OAAO,eAAe;AAAA,IACpE,0CAA0C,OAAO;AAAA,IACjD,8CAA8C,OAAO;AAAA,IACrD,8CAA8C,OAAO;AAAA,IACrD,4CAA4C,OAAO;AAAA,IACnD,6CAA6C,OAAO;AAAA,IACpD,iDAAiD,OAAO;AAAA,IACxD,gDAAgD,OAAO;AAAA,IACvD,kDACE,OAAO,0BAA0B,OAAO,OAAO,OAAO,sBAAsB,IAAI;AAAA,IAClF,0CAA0C,OAAO;AAAA,IACjD,8CAA8C,OAAO;AAAA,IACrD,6CAA6C,OAAO;AAAA,IACpD,oDACE,OAAO,2BAA2B,OAAO,GAAG,OAAO,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInF,OAAO;AAAA,EACT;AACF;AAEO,SAAS,sBAAsB,EAAE,QAAQ,SAAS,GAAiB;AACxE,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,oBAAC,sBAA+B,OAAc,UAArB,KAAqC;AACvE;AAIA,SAAS,mBAAmB,EAAE,OAAO,OAAO,GAAsC;AAChF,QAAM,UAAU,UAAU;AAI1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,aAAa,CAAC,GAAG,SAAS,KAAK,QAAQ;AAEpF,QAAM,UAAU,UAAU,MAAM;AAMhC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,OAAO,SAIV;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,mBAAkB;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,OAAO,UAAU,+CAA+C;AAAA;AAAA,EAClE,GACF;AAEJ;","names":[]}

package/dist/ui/search-dropdown/search-dropdown.cjs

@@ -0,0 +1,143 @@
+"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 search_dropdown_exports = {};
+__export(search_dropdown_exports, {
+  SearchDropdown: () => SearchDropdown
+});
+module.exports = __toCommonJS(search_dropdown_exports);
+var import_jsx_runtime = (
+  // Trigger uses `<div role="combobox">` (not `<button>`) so the
+  // clear ✕ — a real `<button>` — can sit inside without invalid
+  // HTML nesting. tabIndex enables keyboard focus; the spread
+  // `triggerProps` brings the open/close wiring + ARIA state.
+  // Disabled state runs through `aria-disabled` (CSS targets the
+  // attribute since `<div>` doesn't support `:disabled`).
+  // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- aria-expanded (always) and aria-controls (while open) arrive via the triggerProps spread; the rule can't see through it
+  require("react/jsx-runtime")
+);
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../field-error/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+var import_listbox = require("../listbox/index.cjs");
+function SearchDropdown({
+  value,
+  onChange,
+  options,
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
+  disabled = false,
+  error,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  id,
+  "aria-describedby": describedBy,
+  clearLabel = "Clear selection"
+}) {
+  const errorId = (0, import_react.useId)();
+  const selected = (0, import_react.useMemo)(
+    () => options.find((o) => o.value === value) ?? null,
+    [options, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_listbox.Listbox,
+      {
+        items: options,
+        getKey: (o) => o.value,
+        getLabel: (o) => o.label,
+        value: selected,
+        onChange: (next) => onChange(next?.value ?? ""),
+        searchPlaceholder,
+        disabled,
+        className: (0, import_helpers.cn)("uxm-search-dropdown", error && "uxm-search-dropdown--error", className),
+        style,
+        "aria-label": ariaLabel,
+        renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            role: "combobox",
+            ...triggerProps,
+            tabIndex: disabled ? -1 : 0,
+            "aria-disabled": disabled || void 0,
+            id,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": (0, import_helpers.mergeDescribedBy)(describedBy, error ? errorId : void 0),
+            className: (0, import_helpers.cn)(
+              "uxm-search-dropdown__trigger",
+              open && "uxm-search-dropdown__trigger--open",
+              !selected && "uxm-search-dropdown__trigger--empty",
+              // Activates the trigger's `:hover:not(--error)` guard so the
+              // error border persists on hover. The border itself is painted
+              // by `.uxm-search-dropdown--error .uxm-search-dropdown__trigger`
+              // (wrapper class above).
+              error && "uxm-search-dropdown__trigger--error"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-search-dropdown__trigger-label", children: selected ? selected.label : placeholder }),
+              selected && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icon_button.IconButton,
+                {
+                  "aria-label": clearLabel,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onChange("");
+                  },
+                  onMouseDown: (e) => {
+                    e.stopPropagation();
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.stopPropagation();
+                    }
+                  },
+                  className: "uxm-search-dropdown__trigger-clear",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icon.Icon,
+                {
+                  glyph: "chevron-down",
+                  size: 14,
+                  className: "uxm-search-dropdown__trigger-chevron",
+                  style: { transform: open ? "rotate(180deg)" : "none" }
+                }
+              )
+            ]
+          }
+        ),
+        renderItem: (opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          opt.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-search-dropdown__option-icon", "aria-hidden": "true", children: opt.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-search-dropdown__option-label", children: opt.label }),
+          opt.meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-search-dropdown__option-meta", children: opt.meta })
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-search-dropdown__error-message", children: error })
+  ] });
+}
+SearchDropdown.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchDropdown
+});
+//# sourceMappingURL=search-dropdown.cjs.map

package/dist/ui/search-dropdown/search-dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/search-dropdown/search-dropdown.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties, type ReactNode } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\n\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { Listbox } from '../listbox';\n\nexport interface SearchDropdownOption {\n  value: string;\n  label: string;\n  /** Optional secondary text shown to the right of the label (e.g. category meta). */\n  meta?: string;\n  /** Optional leading visual — typically an `<Icon>` for icon-glyph pickers. */\n  icon?: ReactNode;\n}\n\nexport interface SearchDropdownProps {\n  value: string;\n  onChange: (value: string) => void;\n  options: SearchDropdownOption[];\n  /** Trigger placeholder when no value is selected. */\n  placeholder?: string;\n  /** Search input placeholder inside the popover. */\n  searchPlaceholder?: string;\n  /** Disabled state — trigger can't open and renders as inert. */\n  disabled?: boolean;\n  /**\n   * When set to a non-empty string, the trigger renders in its error\n   * state: red border (`.uxm-search-dropdown--error .uxm-search-dropdown__trigger`),\n   * `aria-invalid` on the combobox trigger, and the message below it.\n   * Omit (or pass an empty string) for the normal state.\n   */\n  error?: string;\n  className?: string;\n  style?: CSSProperties;\n  'aria-label'?: string;\n  /**\n   * Forwarded to the `role=\"combobox\"` trigger. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n\n  /** Accessible name for the clear button. Default `\"Clear selection\"`. */\n  clearLabel?: string;\n}\n\n/**\n * Combobox-style dropdown — trigger button opens a popover with a\n * search input and a filtered list of options. Use for value pickers\n * with too many options to scan in a native `<select>` (icon glyphs,\n * country codes, large enums). For ≤12 options, prefer the native\n * `<Select>` atom.\n *\n * Internally a thin wrapper over the shared `<Listbox>` atom:\n *   - Listbox owns the popover (positioning + portal + flip-on-overflow),\n *     click-outside, Escape, keyboard nav (Arrow/Home/End/Enter),\n *     ARIA listbox/option roles, focus management, the right-edge ✓\n *     on the selected row.\n *   - SearchDropdown layers its own trigger chrome on top\n *     (`.uxm-search-dropdown__trigger` with `--uxm-search-dropdown-trigger-*`\n *     theming) and renders the icon + label + meta inside each row via\n *     `renderItem`.\n *\n * Panel theming (bg, border, radius, shadow, option states, group\n * headers) flows from the shared `listbox` registry entry — tune it\n * once and every dropdown in the app reflects the change. SearchDropdown's\n * own registry entry only themes the TRIGGER.\n */\nexport function SearchDropdown({\n  value,\n  onChange,\n  options,\n  placeholder = 'Select…',\n  searchPlaceholder = 'Search…',\n  disabled = false,\n  error,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  id,\n  'aria-describedby': describedBy,\n  clearLabel = 'Clear selection',\n}: SearchDropdownProps) {\n  const errorId = useId();\n  const selected = useMemo(\n    () => options.find((o) => o.value === value) ?? null,\n    [options, value],\n  );\n\n  return (\n    <>\n    <Listbox<SearchDropdownOption>\n      items={options}\n      getKey={(o) => o.value}\n      getLabel={(o) => o.label}\n      value={selected}\n      // The old SearchDropdown's `onChange(value: string)` signature stays\n      // — coerce null (Listbox supports clear via the widened signature)\n      // to empty string for backward compatibility with existing callers.\n      // Consumers wanting actual null/clear semantics should migrate to\n      // Listbox directly.\n      onChange={(next) => onChange(next?.value ?? '')}\n      searchPlaceholder={searchPlaceholder}\n      disabled={disabled}\n      className={cn('uxm-search-dropdown', error && 'uxm-search-dropdown--error', className)}\n      style={style}\n      aria-label={ariaLabel}\n      renderTrigger={({ open, triggerProps }) => (\n        // Trigger uses `<div role=\"combobox\">` (not `<button>`) so the\n        // clear ✕ — a real `<button>` — can sit inside without invalid\n        // HTML nesting. tabIndex enables keyboard focus; the spread\n        // `triggerProps` brings the open/close wiring + ARIA state.\n        // Disabled state runs through `aria-disabled` (CSS targets the\n        // attribute since `<div>` doesn't support `:disabled`).\n        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- aria-expanded (always) and aria-controls (while open) arrive via the triggerProps spread; the rule can't see through it\n        <div role=\"combobox\"\n          {...triggerProps}\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          id={id}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n          className={cn(\n            'uxm-search-dropdown__trigger',\n            open && 'uxm-search-dropdown__trigger--open',\n            !selected && 'uxm-search-dropdown__trigger--empty',\n            // Activates the trigger's `:hover:not(--error)` guard so the\n            // error border persists on hover. The border itself is painted\n            // by `.uxm-search-dropdown--error .uxm-search-dropdown__trigger`\n            // (wrapper class above).\n            error && 'uxm-search-dropdown__trigger--error',\n          )}\n        >\n          <span className=\"uxm-search-dropdown__trigger-label\">\n            {selected ? selected.label : placeholder}\n          </span>\n          {selected && !disabled && (\n            <IconButton\n              aria-label={clearLabel}\n              onClick={(e) => {\n                // Stop the click from bubbling to the trigger div\n                // (which would toggle the popover back open).\n                e.stopPropagation();\n                onChange('');\n              }}\n              onMouseDown={(e) => {\n                // Stop mousedown — the atom's Popover wires its\n                // click-outside detection to mousedown.\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                // Don't let Enter/Space bubble into the trigger's\n                // own keydown handler (which toggles the popover).\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.stopPropagation();\n                }\n              }}\n              className=\"uxm-search-dropdown__trigger-clear\"\n            >\n              <Icon glyph=\"close\" />\n            </IconButton>\n          )}\n          <Icon\n            glyph=\"chevron-down\"\n            size={14}\n            className=\"uxm-search-dropdown__trigger-chevron\"\n            style={{ transform: open ? 'rotate(180deg)' : 'none' }}\n          />\n        </div>\n      )}\n      renderItem={(opt) => (\n        <>\n          {opt.icon && (\n            <span className=\"uxm-search-dropdown__option-icon\" aria-hidden=\"true\">\n              {opt.icon}\n            </span>\n          )}\n          <span className=\"uxm-search-dropdown__option-label\">{opt.label}</span>\n          {opt.meta && (\n            <span className=\"uxm-search-dropdown__option-meta\">{opt.meta}</span>\n          )}\n        </>\n      )}\n    />\n    {error && (\n      <FieldError id={errorId} className=\"uxm-search-dropdown__error-message\">\n        {error}\n      </FieldError>\n    )}\n    </>\n  );\n}\nSearchDropdown.hasError = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwHQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxHR,mBAAmE;AAEnE,qBAAqC;AAErC,yBAA2B;AAC3B,kBAAqB;AACrB,yBAA2B;AAC3B,qBAAwB;AAkEjB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,oBAAoB;AAAA,EACpB,aAAa;AACf,GAAwB;AACtB,QAAM,cAAU,oBAAM;AACtB,QAAM,eAAW;AAAA,IACf,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK;AAAA,IAChD,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,SACE,4EACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ,CAAC,MAAM,EAAE;AAAA,QACjB,UAAU,CAAC,MAAM,EAAE;AAAA,QACnB,OAAO;AAAA,QAMP,UAAU,CAAC,SAAS,SAAS,MAAM,SAAS,EAAE;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,eAAW,mBAAG,uBAAuB,SAAS,8BAA8B,SAAS;AAAA,QACrF;AAAA,QACA,cAAY;AAAA,QACZ,eAAe,CAAC,EAAE,MAAM,aAAa,MAQnC;AAAA,UAAC;AAAA;AAAA,YAAI,MAAK;AAAA,YACP,GAAG;AAAA,YACJ,UAAU,WAAW,KAAK;AAAA,YAC1B,iBAAe,YAAY;AAAA,YAC3B;AAAA,YACA,gBAAc,QAAQ,OAAO;AAAA,YAC7B,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,YAC3E,eAAW;AAAA,cACT;AAAA,cACA,QAAQ;AAAA,cACR,CAAC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,cAKb,SAAS;AAAA,YACX;AAAA,YAEA;AAAA,0DAAC,UAAK,WAAU,sCACb,qBAAW,SAAS,QAAQ,aAC/B;AAAA,cACC,YAAY,CAAC,YACZ;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,SAAS,CAAC,MAAM;AAGd,sBAAE,gBAAgB;AAClB,6BAAS,EAAE;AAAA,kBACb;AAAA,kBACA,aAAa,CAAC,MAAM;AAGlB,sBAAE,gBAAgB;AAAA,kBACpB;AAAA,kBACA,WAAW,CAAC,MAAM;AAGhB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,gBAAgB;AAAA,oBACpB;AAAA,kBACF;AAAA,kBACA,WAAU;AAAA,kBAEV,sDAAC,oBAAK,OAAM,SAAQ;AAAA;AAAA,cACtB;AAAA,cAEF;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAM;AAAA,kBACN,WAAU;AAAA,kBACV,OAAO,EAAE,WAAW,OAAO,mBAAmB,OAAO;AAAA;AAAA,cACvD;AAAA;AAAA;AAAA,QACF;AAAA,QAEF,YAAY,CAAC,QACX,4EACG;AAAA,cAAI,QACH,4CAAC,UAAK,WAAU,oCAAmC,eAAY,QAC5D,cAAI,MACP;AAAA,UAEF,4CAAC,UAAK,WAAU,qCAAqC,cAAI,OAAM;AAAA,UAC9D,IAAI,QACH,4CAAC,UAAK,WAAU,oCAAoC,cAAI,MAAK;AAAA,WAEjE;AAAA;AAAA,IAEJ;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,sCAChC,iBACH;AAAA,KAEF;AAEJ;AACA,eAAe,WAAW;","names":[]}