@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/components/ComboboxMenu.js

@@ -10,6 +10,8 @@ function ComboboxMenu({
   filtered,
   floatingZ,
   footer,
+  header,
+  ariaLabel,
   hasOptions,
   highlighted,
   isSelected,
@@ -28,10 +30,11 @@ function ComboboxMenu({
   const listbox = /* @__PURE__ */ jsxs(
     "div",
     {
-      id: listId,
+      id: header ? void 0 : listId,
       ref: listRef,
-      role: "listbox",
-      "aria-multiselectable": multiple || void 0,
+      role: header ? void 0 : "listbox",
+      "aria-label": header ? void 0 : ariaLabel,
+      "aria-multiselectable": !header && multiple ? true : void 0,
       style: {
         position: mobile ? "absolute" : "fixed",
         ...menuPos.top != null ? { top: menuPos.top } : { bottom: menuPos.bottom },
@@ -47,128 +50,151 @@ function ComboboxMenu({
         !mobile && "w-max"
       ),
       children: [
-        loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
-        !loading && filtered.length === 0 && !customEntry && hasOptions && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
-        filtered.map((option, index) => {
-          var _a;
-          const selected = isSelected(option.value);
-          const mode = tristate ? modes[option.value] : void 0;
-          const showHeader = option.group != null && option.group !== ((_a = filtered[index - 1]) == null ? void 0 : _a.group);
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            showHeader && /* @__PURE__ */ jsx(
-              "div",
-              {
-                role: "presentation",
-                className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-                children: option.group
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                id: listId ? `${listId}-${index}` : void 0,
-                role: "option",
-                "aria-selected": tristate ? mode != null : selected,
-                "aria-disabled": option.disabled,
-                ...mode != null ? {
-                  "aria-label": `${option.label}, ${mode === "include" ? "included" : "excluded"}`
-                } : {},
-                ...option.title !== void 0 ? { title: option.title } : {},
-                ...tristate ? { "data-filter-option": option.value } : {},
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                  if (!tristate && !option.disabled) onSelect(option);
-                },
-                ...tristate ? {
-                  onClick: () => {
-                    if (!option.disabled) onSelect(option);
-                  }
-                } : {},
-                onMouseEnter: () => onHighlight(index),
-                className: cn(
-                  "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
-                  option.description ? "items-start" : "items-center",
-                  index === highlighted && "bg-accent",
-                  selected && !tristate && "font-medium",
-                  option.disabled && "cursor-not-allowed opacity-50"
-                ),
-                children: tristate ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx(
-                    FilterPill,
-                    {
-                      mode: mode ?? "neutral",
-                      togglePosition: "right",
-                      interactive: false,
-                      label: /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx(LabelIcon, { icon: option.icon, className: "shrink-0 text-sm text-muted-foreground" }),
-                        /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
-                      ] }),
-                      onModeChange: (next) => onSetMode(option.value, next),
-                      className: "w-full justify-between",
-                      ...option.count !== void 0 ? { count: option.count } : {}
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ComboboxOptionDescription, { description: option.description })
-                ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  /* @__PURE__ */ jsx(
-                    Icon,
+        header,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: header ? listId : void 0,
+            role: header ? "listbox" : void 0,
+            "aria-label": header ? ariaLabel : void 0,
+            "aria-multiselectable": header && multiple ? true : void 0,
+            children: [
+              loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
+              !loading && filtered.length === 0 && !customEntry && hasOptions && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
+              filtered.map((option, index) => {
+                var _a;
+                const selected = isSelected(option.value);
+                const mode = tristate ? modes[option.value] : void 0;
+                const showHeader = option.group != null && option.group !== ((_a = filtered[index - 1]) == null ? void 0 : _a.group);
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  showHeader && /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      icon: UiCheck,
-                      className: cn(
-                        "shrink-0 text-xs",
-                        option.description && "mt-1",
-                        selected ? "opacity-100" : "opacity-0"
-                      )
+                      role: "presentation",
+                      className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                      children: option.group
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    LabelIcon,
+                    "div",
                     {
-                      icon: option.icon,
+                      id: listId ? `${listId}-${index}` : void 0,
+                      role: "option",
+                      "aria-selected": tristate ? mode != null : selected,
+                      "aria-disabled": option.disabled,
+                      ...mode != null ? {
+                        "aria-label": `${option.label}, ${mode === "include" ? "included" : "excluded"}`
+                      } : {},
+                      ...option.title !== void 0 ? { title: option.title } : {},
+                      ...tristate ? { "data-filter-option": option.value } : {},
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        if (!tristate && !option.disabled) onSelect(option);
+                      },
+                      ...tristate ? {
+                        onClick: () => {
+                          if (!option.disabled) onSelect(option);
+                        }
+                      } : {},
+                      onMouseEnter: () => onHighlight(index),
                       className: cn(
-                        "text-sm text-muted-foreground",
-                        option.description && "mt-1"
-                      )
+                        "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
+                        option.description ? "items-start" : "items-center",
+                        index === highlighted && "bg-accent",
+                        selected && !tristate && "font-medium",
+                        option.disabled && "cursor-not-allowed opacity-50"
+                      ),
+                      children: tristate ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          FilterPill,
+                          {
+                            mode: mode ?? "neutral",
+                            togglePosition: "right",
+                            interactive: false,
+                            label: /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
+                              /* @__PURE__ */ jsx(
+                                LabelIcon,
+                                {
+                                  icon: option.icon,
+                                  className: "shrink-0 text-sm text-muted-foreground"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                            ] }),
+                            onModeChange: (next) => onSetMode(option.value, next),
+                            className: "w-full justify-between",
+                            ...option.count !== void 0 ? { count: option.count } : {}
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ComboboxOptionDescription,
+                          {
+                            description: option.description
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: UiCheck,
+                            className: cn(
+                              "shrink-0 text-xs",
+                              option.description && "mt-1",
+                              selected ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          LabelIcon,
+                          {
+                            icon: option.icon,
+                            className: cn(
+                              "text-sm text-muted-foreground",
+                              option.description && "mt-1"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+                        option.trailing != null && // Capped and truncating rather than `shrink-0`: in a menu
+                        // clamped by the viewport edge the label is what identifies
+                        // the option, so the preview yields first.
+                        /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground", children: option.trailing })
+                      ] })
                     }
-                  ),
-                  /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
-                  option.trailing != null && // Capped and truncating rather than `shrink-0`: in a menu
-                  // clamped by the viewport edge the label is what identifies
-                  // the option, so the preview yields first.
-                  /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground", children: option.trailing })
-                ] })
-              }
-            )
-          ] }, option.value);
-        }),
-        customEntry && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id: listId ? `${listId}-${filtered.length}` : void 0,
-            role: "option",
-            "aria-selected": false,
-            "data-filter-add-custom": customEntry.value,
-            title: customEntry.title,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => onSelect(customEntry),
-            onMouseEnter: () => onHighlight(filtered.length),
-            className: cn(
-              "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
-              highlighted === filtered.length && "bg-accent"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                LabelIcon,
+                  )
+                ] }, option.value);
+              }),
+              customEntry && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  icon: customEntry.icon,
-                  className: "text-sm text-muted-foreground"
+                  id: listId ? `${listId}-${filtered.length}` : void 0,
+                  role: "option",
+                  "aria-selected": false,
+                  "data-filter-add-custom": customEntry.value,
+                  title: customEntry.title,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => onSelect(customEntry),
+                  onMouseEnter: () => onHighlight(filtered.length),
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
+                    highlighted === filtered.length && "bg-accent"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      LabelIcon,
+                      {
+                        icon: customEntry.icon,
+                        className: "text-sm text-muted-foreground"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: customEntry.label })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: customEntry.label })
+              footer != null && /* @__PURE__ */ jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
             ]
           }
-        ),
-        footer != null && /* @__PURE__ */ jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
+        )
       ]
     }
   );

package/dist/components/ComboboxMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.js","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type { ComboboxOption, ComboboxTriStateMode } from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"../lib/combobox\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  hasOptions,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  /** Whether the control has an option set at all (before filtering). */\n  hasOptions: boolean;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  const mobile = menuPos.strategy === \"mobile\";\n  const listbox = (\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: mobile ? \"absolute\" : \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        ...(mobile ? { width: menuPos.width } : { minWidth: menuPos.width }),\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: mobile ? undefined : floatingZ,\n        pointerEvents: mobile ? \"auto\" : undefined,\n      }}\n      className={cn(\n        \"overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n        !mobile && \"w-max\",\n      )}\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {/* \"No results\" answers \"did my query match anything?\" — a control with\n          no option set at all (a free tag list) was never asked the question, so\n          it says nothing rather than reporting an empty search. */}\n      {!loading && filtered.length === 0 && !customEntry && hasOptions && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null && option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate ? { \"data-filter-option\": option.value } : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                option.description ? \"items-start\" : \"items-center\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <div className=\"min-w-0 flex-1\">\n                  <FilterPill\n                    mode={mode ?? \"neutral\"}\n                    togglePosition=\"right\"\n                    interactive={false}\n                    label={\n                      <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n                        <LabelIcon icon={option.icon} className=\"shrink-0 text-sm text-muted-foreground\" />\n                        <span className=\"truncate\">{option.label}</span>\n                      </span>\n                    }\n                    onModeChange={(next) => onSetMode(option.value, next)}\n                    className=\"w-full justify-between\"\n                    {...(option.count !== undefined ? { count: option.count } : {})}\n                  />\n                  <ComboboxOptionDescription description={option.description} />\n                </div>\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      option.description && \"mt-1\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className={cn(\n                      \"text-sm text-muted-foreground\",\n                      option.description && \"mt-1\",\n                    )}\n                  />\n                  <ComboboxOptionText option={option} />\n                  {option.trailing != null && (\n                    // Capped and truncating rather than `shrink-0`: in a menu\n                    // clamped by the viewport edge the label is what identifies\n                    // the option, so the preview yields first.\n                    <span className=\"ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground\">\n                      {option.trailing}\n                    </span>\n                  )}\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n  return createPortal(\n    mobile ? (\n      <div\n        data-slot=\"combobox-viewport-layer\"\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: floatingZ,\n          pointerEvents: \"none\",\n        }}\n      >\n        {listbox}\n      </div>\n    ) : (\n      listbox\n    ),\n    document.body,\n  );\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"block truncate\">{option.label}</span>\n      <ComboboxOptionDescription description={option.description} />\n    </span>\n  );\n}\n\nfunction ComboboxOptionDescription({\n  description,\n}: {\n  description: string | undefined;\n}) {\n  return description ? (\n    <span className=\"mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground\">\n      {description}\n    </span>\n  ) : null;\n}\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"ComboboxMenu.js","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type { ComboboxOption, ComboboxTriStateMode } from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"../lib/combobox\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  header,\n  ariaLabel,\n  hasOptions,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  header?: ReactNode;\n  ariaLabel?: string | undefined;\n  /** Whether the control has an option set at all (before filtering). */\n  hasOptions: boolean;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  const mobile = menuPos.strategy === \"mobile\";\n  const listbox = (\n    <div\n      id={header ? undefined : listId}\n      ref={listRef}\n      role={header ? undefined : \"listbox\"}\n      aria-label={header ? undefined : ariaLabel}\n      aria-multiselectable={!header && multiple ? true : undefined}\n      style={{\n        position: mobile ? \"absolute\" : \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        ...(mobile ? { width: menuPos.width } : { minWidth: menuPos.width }),\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: mobile ? undefined : floatingZ,\n        pointerEvents: mobile ? \"auto\" : undefined,\n      }}\n      className={cn(\n        \"overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n        !mobile && \"w-max\",\n      )}\n    >\n      {header}\n      <div\n        id={header ? listId : undefined}\n        role={header ? \"listbox\" : undefined}\n        aria-label={header ? ariaLabel : undefined}\n        aria-multiselectable={header && multiple ? true : undefined}\n      >\n        {loading && filtered.length === 0 && (\n          <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n            Loading…\n          </div>\n        )}\n        {/* \"No results\" answers \"did my query match anything?\" — a control with\n          no option set at all (a free tag list) was never asked the question, so\n          it says nothing rather than reporting an empty search. */}\n        {!loading && filtered.length === 0 && !customEntry && hasOptions && (\n          <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n            No results\n          </div>\n        )}\n        {filtered.map((option, index) => {\n          const selected = isSelected(option.value);\n          const mode = tristate ? modes[option.value] : undefined;\n          const showHeader =\n            option.group != null && option.group !== filtered[index - 1]?.group;\n          return (\n            <Fragment key={option.value}>\n              {showHeader && (\n                <div\n                  role=\"presentation\"\n                  className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n                >\n                  {option.group}\n                </div>\n              )}\n              <div\n                id={listId ? `${listId}-${index}` : undefined}\n                role=\"option\"\n                aria-selected={tristate ? mode != null : selected}\n                aria-disabled={option.disabled}\n                {...(mode != null\n                  ? {\n                      \"aria-label\": `${option.label}, ${\n                        mode === \"include\" ? \"included\" : \"excluded\"\n                      }`,\n                    }\n                  : {})}\n                {...(option.title !== undefined ? { title: option.title } : {})}\n                {...(tristate ? { \"data-filter-option\": option.value } : {})}\n                onMouseDown={(event) => {\n                  event.preventDefault();\n                  if (!tristate && !option.disabled) onSelect(option);\n                }}\n                {...(tristate\n                  ? {\n                      onClick: () => {\n                        if (!option.disabled) onSelect(option);\n                      },\n                    }\n                  : {})}\n                onMouseEnter={() => onHighlight(index)}\n                className={cn(\n                  \"flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                  option.description ? \"items-start\" : \"items-center\",\n                  index === highlighted && \"bg-accent\",\n                  selected && !tristate && \"font-medium\",\n                  option.disabled && \"cursor-not-allowed opacity-50\",\n                )}\n              >\n                {tristate ? (\n                  <div className=\"min-w-0 flex-1\">\n                    <FilterPill\n                      mode={mode ?? \"neutral\"}\n                      togglePosition=\"right\"\n                      interactive={false}\n                      label={\n                        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n                          <LabelIcon\n                            icon={option.icon}\n                            className=\"shrink-0 text-sm text-muted-foreground\"\n                          />\n                          <span className=\"truncate\">{option.label}</span>\n                        </span>\n                      }\n                      onModeChange={(next) => onSetMode(option.value, next)}\n                      className=\"w-full justify-between\"\n                      {...(option.count !== undefined\n                        ? { count: option.count }\n                        : {})}\n                    />\n                    <ComboboxOptionDescription\n                      description={option.description}\n                    />\n                  </div>\n                ) : (\n                  <>\n                    <Icon\n                      icon={UiCheck}\n                      className={cn(\n                        \"shrink-0 text-xs\",\n                        option.description && \"mt-1\",\n                        selected ? \"opacity-100\" : \"opacity-0\",\n                      )}\n                    />\n                    <LabelIcon\n                      icon={option.icon}\n                      className={cn(\n                        \"text-sm text-muted-foreground\",\n                        option.description && \"mt-1\",\n                      )}\n                    />\n                    <ComboboxOptionText option={option} />\n                    {option.trailing != null && (\n                      // Capped and truncating rather than `shrink-0`: in a menu\n                      // clamped by the viewport edge the label is what identifies\n                      // the option, so the preview yields first.\n                      <span className=\"ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground\">\n                        {option.trailing}\n                      </span>\n                    )}\n                  </>\n                )}\n              </div>\n            </Fragment>\n          );\n        })}\n        {customEntry && (\n          <div\n            id={listId ? `${listId}-${filtered.length}` : undefined}\n            role=\"option\"\n            aria-selected={false}\n            data-filter-add-custom={customEntry.value}\n            title={customEntry.title}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => onSelect(customEntry)}\n            onMouseEnter={() => onHighlight(filtered.length)}\n            className={cn(\n              \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n              highlighted === filtered.length && \"bg-accent\",\n            )}\n          >\n            <LabelIcon\n              icon={customEntry.icon}\n              className=\"text-sm text-muted-foreground\"\n            />\n            <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n          </div>\n        )}\n        {footer != null && (\n          <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n  return createPortal(\n    mobile ? (\n      <div\n        data-slot=\"combobox-viewport-layer\"\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: floatingZ,\n          pointerEvents: \"none\",\n        }}\n      >\n        {listbox}\n      </div>\n    ) : (\n      listbox\n    ),\n    document.body,\n  );\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"block truncate\">{option.label}</span>\n      <ComboboxOptionDescription description={option.description} />\n    </span>\n  );\n}\n\nfunction ComboboxOptionDescription({\n  description,\n}: {\n  description: string | undefined;\n}) {\n  return description ? (\n    <span className=\"mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground\">\n      {description}\n    </span>\n  ) : null;\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/ComboboxMenuTrigger.cjs

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Icon = require("../data/Icon.cjs");
+const utils = require("../lib/utils.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+function ComboboxMenuTrigger({
+  anchorRef,
+  triggerRef,
+  content,
+  className,
+  disabled,
+  open,
+  listId,
+  ariaLabel,
+  title,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchorRef, className: "h-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      role: "combobox",
+      "aria-label": ariaLabel,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listId : void 0,
+      title,
+      disabled,
+      onClick: onToggle,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          if (!open) onToggle();
+        }
+      },
+      className: utils.cn(
+        "inline-flex h-control-h w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-background px-control-px text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+        className
+      ),
+      children: [
+        content,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            icon: UiChevronDown.UiChevronDown,
+            className: "ml-auto size-3 shrink-0 text-muted-foreground"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ComboboxMenuSearch({
+  inputRef,
+  value,
+  ariaLabel,
+  listId,
+  highlighted,
+  onChange,
+  onKeyDown
+}) {
+  react.useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [inputRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      "aria-label": `Search ${ariaLabel ?? "options"}`,
+      "aria-controls": listId,
+      "aria-activedescendant": highlighted >= 0 ? `${listId}-${highlighted}` : void 0,
+      value,
+      onChange: (event) => onChange(event.target.value),
+      onKeyDown,
+      placeholder: "Search…",
+      className: "h-control-h w-full rounded-sm bg-transparent px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+    }
+  ) });
+}
+exports.ComboboxMenuSearch = ComboboxMenuSearch;
+exports.ComboboxMenuTrigger = ComboboxMenuTrigger;
+//# sourceMappingURL=ComboboxMenuTrigger.cjs.map

package/dist/components/ComboboxMenuTrigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxMenuTrigger.cjs","sources":["../../src/components/ComboboxMenuTrigger.tsx"],"sourcesContent":["import {\n  useEffect,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { UiChevronDown } from \"../icons\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\n\nexport function ComboboxMenuTrigger({\n  anchorRef,\n  triggerRef,\n  content,\n  className,\n  disabled,\n  open,\n  listId,\n  ariaLabel,\n  title,\n  onToggle,\n}: {\n  anchorRef: RefObject<HTMLDivElement | null>;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  content: ReactNode;\n  className: string | undefined;\n  disabled: boolean | undefined;\n  open: boolean;\n  listId: string;\n  ariaLabel: string | undefined;\n  title: string | undefined;\n  onToggle: () => void;\n}) {\n  return (\n    <div ref={anchorRef} className=\"h-full min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        role=\"combobox\"\n        aria-label={ariaLabel}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listId : undefined}\n        title={title}\n        disabled={disabled}\n        onClick={onToggle}\n        onKeyDown={(event) => {\n          if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n            event.preventDefault();\n            if (!open) onToggle();\n          }\n        }}\n        className={cn(\n          \"inline-flex h-control-h w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-background px-control-px text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50\",\n          className,\n        )}\n      >\n        {content}\n        <Icon\n          icon={UiChevronDown}\n          className=\"ml-auto size-3 shrink-0 text-muted-foreground\"\n        />\n      </button>\n    </div>\n  );\n}\n\nexport function ComboboxMenuSearch({\n  inputRef,\n  value,\n  ariaLabel,\n  listId,\n  highlighted,\n  onChange,\n  onKeyDown,\n}: {\n  inputRef: RefObject<HTMLInputElement | null>;\n  value: string;\n  ariaLabel: string | undefined;\n  listId: string;\n  highlighted: number;\n  onChange: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n}) {\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n  return (\n    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        aria-label={`Search ${ariaLabel ?? \"options\"}`}\n        aria-controls={listId}\n        aria-activedescendant={\n          highlighted >= 0 ? `${listId}-${highlighted}` : undefined\n        }\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder=\"Search…\"\n        className=\"h-control-h w-full rounded-sm bg-transparent px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n      />\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","cn","Icon","UiChevronDown","useEffect"],"mappings":";;;;;;;AAUO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,SACEA,2BAAAA,IAAC,OAAA,EAAI,KAAK,WAAW,WAAU,kBAC7B,UAAAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe,OAAO,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACxD,gBAAM,eAAA;AACN,cAAI,CAAC,KAAM,UAAA;AAAA,QACb;AAAA,MACF;AAAA,MACA,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACDF,2BAAAA;AAAAA,UAACG,KAAAA;AAAAA,UAAA;AAAA,YACC,MAAMC,cAAAA;AAAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACDC,QAAAA,UAAU,MAAM;;AACd,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AACb,SACEL,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DACb,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY,UAAU,aAAa,SAAS;AAAA,MAC5C,iBAAe;AAAA,MACf,yBACE,eAAe,IAAI,GAAG,MAAM,IAAI,WAAW,KAAK;AAAA,MAElD;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;;;"}

package/dist/components/ComboboxMenuTrigger.d.ts

@@ -0,0 +1,23 @@
+import { KeyboardEvent, ReactNode, RefObject } from 'react';
+export declare function ComboboxMenuTrigger({ anchorRef, triggerRef, content, className, disabled, open, listId, ariaLabel, title, onToggle, }: {
+    anchorRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    content: ReactNode;
+    className: string | undefined;
+    disabled: boolean | undefined;
+    open: boolean;
+    listId: string;
+    ariaLabel: string | undefined;
+    title: string | undefined;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+export declare function ComboboxMenuSearch({ inputRef, value, ariaLabel, listId, highlighted, onChange, onKeyDown, }: {
+    inputRef: RefObject<HTMLInputElement | null>;
+    value: string;
+    ariaLabel: string | undefined;
+    listId: string;
+    highlighted: number;
+    onChange: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ComboboxMenuTrigger.d.ts.map

package/dist/components/ComboboxMenuTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,UAAU,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,+BAiCA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D,+BAsBA"}

package/dist/components/ComboboxMenuTrigger.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+function ComboboxMenuTrigger({
+  anchorRef,
+  triggerRef,
+  content,
+  className,
+  disabled,
+  open,
+  listId,
+  ariaLabel,
+  title,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx("div", { ref: anchorRef, className: "h-full min-w-0", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      role: "combobox",
+      "aria-label": ariaLabel,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listId : void 0,
+      title,
+      disabled,
+      onClick: onToggle,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          if (!open) onToggle();
+        }
+      },
+      className: cn(
+        "inline-flex h-control-h w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-background px-control-px text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+        className
+      ),
+      children: [
+        content,
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: UiChevronDown,
+            className: "ml-auto size-3 shrink-0 text-muted-foreground"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ComboboxMenuSearch({
+  inputRef,
+  value,
+  ariaLabel,
+  listId,
+  highlighted,
+  onChange,
+  onKeyDown
+}) {
+  useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [inputRef]);
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      "aria-label": `Search ${ariaLabel ?? "options"}`,
+      "aria-controls": listId,
+      "aria-activedescendant": highlighted >= 0 ? `${listId}-${highlighted}` : void 0,
+      value,
+      onChange: (event) => onChange(event.target.value),
+      onKeyDown,
+      placeholder: "Search…",
+      className: "h-control-h w-full rounded-sm bg-transparent px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+    }
+  ) });
+}
+export {
+  ComboboxMenuSearch,
+  ComboboxMenuTrigger
+};
+//# sourceMappingURL=ComboboxMenuTrigger.js.map

package/dist/components/ComboboxMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxMenuTrigger.js","sources":["../../src/components/ComboboxMenuTrigger.tsx"],"sourcesContent":["import {\n  useEffect,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { UiChevronDown } from \"../icons\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\n\nexport function ComboboxMenuTrigger({\n  anchorRef,\n  triggerRef,\n  content,\n  className,\n  disabled,\n  open,\n  listId,\n  ariaLabel,\n  title,\n  onToggle,\n}: {\n  anchorRef: RefObject<HTMLDivElement | null>;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  content: ReactNode;\n  className: string | undefined;\n  disabled: boolean | undefined;\n  open: boolean;\n  listId: string;\n  ariaLabel: string | undefined;\n  title: string | undefined;\n  onToggle: () => void;\n}) {\n  return (\n    <div ref={anchorRef} className=\"h-full min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        role=\"combobox\"\n        aria-label={ariaLabel}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listId : undefined}\n        title={title}\n        disabled={disabled}\n        onClick={onToggle}\n        onKeyDown={(event) => {\n          if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n            event.preventDefault();\n            if (!open) onToggle();\n          }\n        }}\n        className={cn(\n          \"inline-flex h-control-h w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-background px-control-px text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50\",\n          className,\n        )}\n      >\n        {content}\n        <Icon\n          icon={UiChevronDown}\n          className=\"ml-auto size-3 shrink-0 text-muted-foreground\"\n        />\n      </button>\n    </div>\n  );\n}\n\nexport function ComboboxMenuSearch({\n  inputRef,\n  value,\n  ariaLabel,\n  listId,\n  highlighted,\n  onChange,\n  onKeyDown,\n}: {\n  inputRef: RefObject<HTMLInputElement | null>;\n  value: string;\n  ariaLabel: string | undefined;\n  listId: string;\n  highlighted: number;\n  onChange: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n}) {\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n  return (\n    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        aria-label={`Search ${ariaLabel ?? \"options\"}`}\n        aria-controls={listId}\n        aria-activedescendant={\n          highlighted >= 0 ? `${listId}-${highlighted}` : undefined\n        }\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder=\"Search…\"\n        className=\"h-control-h w-full rounded-sm bg-transparent px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,SACE,oBAAC,OAAA,EAAI,KAAK,WAAW,WAAU,kBAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe,OAAO,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACxD,gBAAM,eAAA;AACN,cAAI,CAAC,KAAM,UAAA;AAAA,QACb;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,YAAU,MAAM;;AACd,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AACb,SACE,oBAAC,OAAA,EAAI,WAAU,2DACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY,UAAU,aAAa,SAAS;AAAA,MAC5C,iBAAe;AAAA,MACf,yBACE,eAAe,IAAI,GAAG,MAAM,IAAI,WAAW,KAAK;AAAA,MAElD;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;"}