@kamod-ch/ui 0.2.1

package/dist/chunk-PU5J5EPY.js

@@ -0,0 +1,733 @@
+import { Command, CommandInput, CommandItem, CommandList, CommandEmpty, useCommand } from './chunk-CP55TVOV.js';
+import { Popover, PopoverTrigger, usePopover, PopoverContent } from './chunk-U2UNWXBC.js';
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { signal } from '@preact/signals';
+import { createContext } from 'preact';
+import { useContext, useMemo, useState, useRef, useCallback, useLayoutEffect } from 'preact/hooks';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+
+// src/components/combobox/combobox-utils.ts
+function flattenComboboxItems(items) {
+  const out = [];
+  for (const el of items) {
+    if (el !== null && typeof el === "object" && "items" in el) {
+      const sub = el.items;
+      if (Array.isArray(sub)) {
+        out.push(...sub);
+        continue;
+      }
+    }
+    out.push(el);
+  }
+  return out;
+}
+function defaultComboboxItemKey(item) {
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (item && typeof item === "object" && "value" in item) {
+    const v = item.value;
+    return v === void 0 || v === null ? "" : String(v);
+  }
+  return JSON.stringify(item);
+}
+function defaultComboboxItemString(item, custom) {
+  if (custom) return custom(item);
+  if (typeof item === "string") return item;
+  if (item && typeof item === "object" && "label" in item) {
+    const l = item.label;
+    return l === void 0 || l === null ? "" : String(l);
+  }
+  return String(item);
+}
+function normalizeInitialKeys(multiple, defaultValue) {
+  if (defaultValue === void 0 || defaultValue === "") return [];
+  if (multiple) return Array.isArray(defaultValue) ? [...defaultValue] : [defaultValue];
+  return typeof defaultValue === "string" ? [defaultValue] : [];
+}
+function keysFromValueProp(multiple, valueProp) {
+  if (valueProp === void 0) return [];
+  if (multiple) return Array.isArray(valueProp) ? [...valueProp] : [];
+  return typeof valueProp === "string" && valueProp ? [valueProp] : [];
+}
+var ComboboxContext = createContext(null);
+var useCombobox = () => {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) throw new Error("Combobox components must be used within Combobox");
+  return ctx;
+};
+function comboboxSelectionLabel(ctx) {
+  if (ctx.selectedKeys.length === 0) return "";
+  const labels = ctx.selectedKeys.map((k) => {
+    const it = ctx.leafItems.find((i) => ctx.itemKey(i) === k);
+    return it !== void 0 ? ctx.itemToString(it) : k;
+  });
+  return labels.join(", ");
+}
+var Combobox = ({
+  items = [],
+  itemToStringValue,
+  itemKey: itemKeyProp,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Select\u2026",
+  disabled = false,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  multiple: multipleProp = false,
+  liftedFilter = false,
+  autoHighlight = false,
+  showClear = false,
+  closeOnSelect: closeOnSelectProp,
+  class: className,
+  children,
+  ...rest
+}) => {
+  const multiple = Boolean(multipleProp);
+  const closeOnSelect = closeOnSelectProp ?? !multiple;
+  const itemToString = useMemo(
+    () => (item) => defaultComboboxItemString(item, itemToStringValue),
+    [itemToStringValue]
+  );
+  const itemKey = useMemo(
+    () => (item) => itemKeyProp ? itemKeyProp(item) : defaultComboboxItemKey(item),
+    [itemKeyProp]
+  );
+  const leafItems = useMemo(() => flattenComboboxItems(items), [items]);
+  const isValueControlled = valueProp !== void 0;
+  const [internalKeys, setInternalKeys] = useState(
+    () => normalizeInitialKeys(multiple, defaultValue)
+  );
+  const selectedKeys = isValueControlled ? keysFromValueProp(multiple, valueProp) : internalKeys;
+  const selectedKey = selectedKeys[0] ?? "";
+  const filterQuery = useMemo(() => liftedFilter ? signal("") : null, [liftedFilter]);
+  const hasVisibleItemsSig = useMemo(() => liftedFilter ? signal(true) : null, [liftedFilter]);
+  const comboboxListRef = useMemo(() => ({ current: null }), []);
+  const commandNavRef = useMemo(() => ({ current: null }), []);
+  const isOpenRef = useRef(false);
+  const selectedKeysRef = useRef(selectedKeys);
+  selectedKeysRef.current = selectedKeys;
+  const emitKeys = useCallback(
+    (next) => {
+      if (!isValueControlled) setInternalKeys(next);
+      if (multiple) onValueChange?.(next);
+      else onValueChange?.(next[0] ?? "");
+    },
+    [isValueControlled, multiple, onValueChange]
+  );
+  const selectByItem = useCallback(
+    (item) => {
+      const key = itemKey(item);
+      emitKeys(key ? [key] : []);
+    },
+    [itemKey, emitKeys]
+  );
+  const toggleByItem = useCallback(
+    (item) => {
+      const key = itemKey(item);
+      const exists = selectedKeysRef.current.includes(key);
+      const next = exists ? selectedKeysRef.current.filter((k) => k !== key) : [...selectedKeysRef.current, key];
+      emitKeys(next);
+    },
+    [itemKey, emitKeys]
+  );
+  const removeKey = useCallback(
+    (key) => {
+      emitKeys(selectedKeysRef.current.filter((k) => k !== key));
+    },
+    [emitKeys]
+  );
+  const clearSelection = useCallback(() => {
+    emitKeys([]);
+  }, [emitKeys]);
+  const isSelected = useCallback(
+    (key) => {
+      return selectedKeys.includes(key);
+    },
+    [selectedKeys]
+  );
+  const handleOpenChange = useCallback(
+    (open) => {
+      isOpenRef.current = open;
+      onOpenChange?.(open);
+      if (!liftedFilter || !filterQuery) return;
+      if (open) {
+        filterQuery.value = "";
+      } else if (multiple) {
+        filterQuery.value = "";
+      } else {
+        const k = selectedKeysRef.current[0];
+        if (!k) filterQuery.value = "";
+        else {
+          const it = leafItems.find((i) => itemKey(i) === k);
+          filterQuery.value = it !== void 0 ? itemToString(it) : k;
+        }
+      }
+    },
+    [liftedFilter, filterQuery, onOpenChange, multiple, leafItems, itemKey, itemToString]
+  );
+  useLayoutEffect(() => {
+    if (!liftedFilter || !filterQuery || multiple || isOpenRef.current) return;
+    const k = selectedKeys[0];
+    if (!k) {
+      filterQuery.value = "";
+      return;
+    }
+    const it = leafItems.find((i) => itemKey(i) === k);
+    filterQuery.value = it !== void 0 ? itemToString(it) : k;
+  }, [liftedFilter, filterQuery, multiple, selectedKeys, leafItems, itemKey, itemToString]);
+  const contextValue = useMemo(
+    () => ({
+      items,
+      leafItems,
+      itemToString,
+      itemKey,
+      selectedKeys,
+      selectedKey,
+      multiple,
+      isSelected,
+      selectByItem,
+      toggleByItem,
+      removeKey,
+      clearSelection,
+      placeholder,
+      disabled,
+      liftedFilter,
+      filterQuery,
+      hasVisibleItems: hasVisibleItemsSig,
+      autoHighlight,
+      showClear,
+      closeOnSelect,
+      comboboxListRef,
+      commandNavRef
+    }),
+    [
+      items,
+      leafItems,
+      itemToString,
+      itemKey,
+      selectedKeys,
+      selectedKey,
+      multiple,
+      isSelected,
+      selectByItem,
+      toggleByItem,
+      removeKey,
+      clearSelection,
+      placeholder,
+      disabled,
+      liftedFilter,
+      filterQuery,
+      hasVisibleItemsSig,
+      autoHighlight,
+      showClear,
+      closeOnSelect,
+      comboboxListRef,
+      commandNavRef
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-slot": "combobox", class: cn("relative", className), ...rest, children: /* @__PURE__ */ jsx(Popover, { open: openProp, defaultOpen, onOpenChange: handleOpenChange, children }) }) });
+};
+var ComboboxChip = ({
+  itemKey: chipKey,
+  children,
+  class: className,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "combobox-chip",
+      class: cn(
+        "bg-secondary text-secondary-foreground inline-flex max-w-full items-center gap-0.5 rounded-md px-2 py-0.5 text-xs",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { class: "min-w-0 truncate", children }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "text-muted-foreground hover:text-foreground shrink-0 rounded p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+            "aria-label": "Remove",
+            onClick: (event) => {
+              event.stopPropagation();
+              ctx.removeKey(chipKey);
+            },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var ComboboxChips = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "combobox-chips",
+    class: cn(
+      "border-input bg-background flex min-h-8 w-full min-w-44 flex-wrap items-center gap-1 rounded-md border px-2 py-1 shadow-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+      className
+    ),
+    ...rest,
+    children
+  }
+) });
+var ComboboxChipsInput = ({
+  class: className,
+  onKeyDown,
+  onInput,
+  onFocus,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const popover = usePopover();
+  if (!ctx.filterQuery) {
+    throw new Error("ComboboxChipsInput must be used with Combobox liftedFilter={true}");
+  }
+  void ctx.filterQuery.value;
+  void popover.open.value;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      "data-slot": "combobox-chips-input",
+      class: cn(
+        "placeholder:text-muted-foreground min-w-[6rem] flex-1 border-0 bg-transparent px-1 py-1 text-sm outline-none",
+        className
+      ),
+      value: ctx.filterQuery.value,
+      onInput: (event) => {
+        ctx.filterQuery.value = event.currentTarget.value;
+        popover.setOpen(true);
+        onInput?.(event);
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        popover.setOpen(true);
+      },
+      onKeyDown: (event) => {
+        const nav = ctx.commandNavRef.current;
+        if (ctx.autoHighlight && nav) {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            popover.setOpen(true);
+            nav.moveHighlight(1);
+            return;
+          }
+          if (event.key === "ArrowUp") {
+            event.preventDefault();
+            popover.setOpen(true);
+            nav.moveHighlight(-1);
+            return;
+          }
+          if (event.key === "Enter") {
+            event.preventDefault();
+            if (popover.open.value) nav.activateHighlighted();
+            return;
+          }
+        }
+        onKeyDown?.(event);
+      }
+    }
+  );
+};
+var ComboboxClear = ({ class: className, onClick, ...rest }) => {
+  const ctx = useCombobox();
+  const has = ctx.selectedKeys.length > 0;
+  if (!has || !ctx.showClear) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "combobox-clear",
+      "aria-label": "Clear selection",
+      class: cn(
+        "text-muted-foreground hover:text-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        ctx.clearSelection();
+        if (ctx.filterQuery) ctx.filterQuery.value = "";
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+        }
+      )
+    }
+  );
+};
+function CommandNavBridge() {
+  const cmd = useCommand();
+  const combo = useCombobox();
+  const navRef = combo.commandNavRef;
+  useLayoutEffect(() => {
+    navRef.current = {
+      moveHighlight: cmd.moveHighlight,
+      activateHighlighted: cmd.activateHighlighted
+    };
+    return () => {
+      navRef.current = null;
+    };
+  }, [cmd.moveHighlight, cmd.activateHighlighted, navRef]);
+  return null;
+}
+var ComboboxCommand = ({
+  autoHighlight: autoHighlightProp,
+  class: className,
+  children,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const query = ctx.liftedFilter && ctx.filterQuery ? ctx.filterQuery : void 0;
+  const hasVis = ctx.liftedFilter && ctx.hasVisibleItems ? ctx.hasVisibleItems : void 0;
+  const autoHighlight = autoHighlightProp ?? ctx.autoHighlight;
+  return /* @__PURE__ */ jsxs(
+    Command,
+    {
+      ...rest,
+      class: cn("rounded-lg border-0 bg-transparent shadow-none", className),
+      autoHighlight,
+      query,
+      hasVisibleItems: hasVis,
+      children: [
+        /* @__PURE__ */ jsx(CommandNavBridge, {}),
+        children
+      ]
+    }
+  );
+};
+var ComboboxContent = ({
+  forceMount: forceMountProp,
+  class: className,
+  ...rest
+}) => {
+  const popover = usePopover();
+  const ctx = useCombobox();
+  const forceMount = forceMountProp ?? ctx.liftedFilter;
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      forceMount,
+      class: cn(
+        "w-64 max-w-[calc(100vw-1.5rem)] gap-0 overflow-hidden p-0",
+        ctx.liftedFilter && !popover.open.value && "pointer-events-none invisible max-h-0 min-h-0 border-0 p-0 opacity-0 shadow-none",
+        className
+      ),
+      ...rest
+    }
+  );
+};
+var ComboboxInlineInput = ({
+  class: className,
+  onKeyDown,
+  onInput,
+  onFocus,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const popover = usePopover();
+  if (!ctx.filterQuery) {
+    throw new Error("ComboboxInlineInput must be used with Combobox liftedFilter={true}");
+  }
+  void ctx.filterQuery.value;
+  void popover.open.value;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      "data-slot": "combobox-inline-input",
+      class: cn(
+        "border-input bg-background placeholder:text-muted-foreground flex h-10 w-full min-w-0 rounded-md border px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      value: ctx.filterQuery.value,
+      onInput: (event) => {
+        ctx.filterQuery.value = event.currentTarget.value;
+        popover.setOpen(true);
+        onInput?.(event);
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        popover.setOpen(true);
+      },
+      onKeyDown: (event) => {
+        const nav = ctx.commandNavRef.current;
+        if (ctx.autoHighlight && nav) {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            popover.setOpen(true);
+            nav.moveHighlight(1);
+            return;
+          }
+          if (event.key === "ArrowUp") {
+            event.preventDefault();
+            popover.setOpen(true);
+            nav.moveHighlight(-1);
+            return;
+          }
+          if (event.key === "Enter") {
+            event.preventDefault();
+            if (popover.open.value) nav.activateHighlighted();
+            return;
+          }
+        }
+        onKeyDown?.(event);
+      }
+    }
+  );
+};
+var ComboboxInput = ({ class: className, ...rest }) => /* @__PURE__ */ jsx(CommandInput, { class: cn(className), ...rest });
+var ComboboxItem = ({
+  item,
+  class: className,
+  children,
+  disabled,
+  onClick,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const popover = usePopover();
+  const filterValue = ctx.itemToString(item);
+  const key = ctx.itemKey(item);
+  const selected = ctx.multiple ? ctx.selectedKeys.includes(key) : ctx.selectedKey === key;
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      value: filterValue,
+      disabled,
+      class: cn(selected && "bg-accent/60", className),
+      onSelect: () => {
+        if (ctx.multiple) {
+          ctx.toggleByItem(item);
+          if (ctx.closeOnSelect) popover.setOpen(false);
+        } else {
+          ctx.selectByItem(item);
+          popover.setOpen(false);
+        }
+      },
+      onClick,
+      ...rest,
+      children
+    }
+  );
+};
+var ComboboxList = ({
+  items: itemsProp,
+  children,
+  onMount,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const list = itemsProp !== void 0 ? itemsProp : ctx.items;
+  const body = typeof children === "function" ? list.map(
+    (item, index) => children(item, index)
+  ) : children;
+  return /* @__PURE__ */ jsx(
+    CommandList,
+    {
+      ...rest,
+      onMount: (el) => {
+        ctx.comboboxListRef.current = el;
+        onMount?.(el);
+      },
+      children: body
+    }
+  );
+};
+var ComboboxTrigger = ({ class: className, disabled, ...rest }) => {
+  const ctx = useCombobox();
+  return /* @__PURE__ */ jsx(
+    PopoverTrigger,
+    {
+      class: cn(
+        "border-input bg-background hover:bg-muted/50 flex h-8 w-full min-w-44 items-center justify-between gap-2 rounded-md border px-3 py-1 text-start text-sm font-normal shadow-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      disabled: disabled ?? ctx.disabled,
+      ...rest
+    }
+  );
+};
+var ComboboxValue = ({
+  placeholder: placeholderProp,
+  children,
+  class: className,
+  ...rest
+}) => {
+  const ctx = useCombobox();
+  const label = comboboxSelectionLabel(ctx);
+  const empty = ctx.selectedKeys.length === 0;
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx(Fragment, { children: children({ label, empty, keys: ctx.selectedKeys }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "combobox-value",
+      class: cn("truncate", empty && "text-muted-foreground", className),
+      ...rest,
+      children: empty ? placeholderProp ?? ctx.placeholder : label
+    }
+  );
+};
+var ChevronDownIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "aria-hidden": true,
+    class: "shrink-0 opacity-50",
+    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var ComboboxSelect = ({
+  options,
+  searchPlaceholder = "Search\u2026",
+  emptyText = "No results found.",
+  triggerClass,
+  showClear = false,
+  autoHighlight = false,
+  liftedFilter = false,
+  multiple = false,
+  class: className,
+  placeholder,
+  ...rest
+}) => {
+  const useLifted = Boolean(liftedFilter || multiple);
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        class: className,
+        items: options,
+        itemKey: (o) => o.value,
+        itemToStringValue: (o) => o.label,
+        multiple: true,
+        liftedFilter: true,
+        autoHighlight,
+        showClear,
+        placeholder,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(ComboboxChips, { class: triggerClass, children: [
+            /* @__PURE__ */ jsx(ComboboxValue, { placeholder: placeholder ?? "Select\u2026", children: ({ keys, empty }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              keys.map((k) => {
+                const o = options.find((x) => x.value === k);
+                if (!o) return null;
+                return /* @__PURE__ */ jsx(ComboboxChip, { itemKey: k, children: o.label }, k);
+              }),
+              empty ? /* @__PURE__ */ jsx("span", { class: "text-muted-foreground px-1 py-0.5 text-sm", children: placeholder ?? "Select\u2026" }) : null
+            ] }) }),
+            showClear ? /* @__PURE__ */ jsx(ComboboxClear, { class: "shrink-0" }) : null,
+            /* @__PURE__ */ jsx(ComboboxChipsInput, { placeholder: searchPlaceholder })
+          ] }),
+          /* @__PURE__ */ jsx(ComboboxContent, { children: /* @__PURE__ */ jsxs(ComboboxCommand, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (opt) => {
+              const o = opt;
+              return /* @__PURE__ */ jsx(ComboboxItem, { item: o, children: o.label }, o.value);
+            } })
+          ] }) })
+        ]
+      }
+    );
+  }
+  if (useLifted) {
+    return /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        class: className,
+        items: options,
+        itemKey: (o) => o.value,
+        itemToStringValue: (o) => o.label,
+        liftedFilter: true,
+        autoHighlight,
+        showClear,
+        placeholder,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ComboboxTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { class: cn("relative flex w-full min-w-44 items-center", triggerClass), children: [
+            /* @__PURE__ */ jsx(ComboboxInlineInput, { placeholder: searchPlaceholder, class: "pe-16" }),
+            showClear ? /* @__PURE__ */ jsx(ComboboxClear, { class: "absolute end-9 top-1/2 z-10 -translate-y-1/2" }) : null,
+            /* @__PURE__ */ jsx("span", { class: "pointer-events-none absolute end-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+          ] }) }),
+          /* @__PURE__ */ jsx(ComboboxContent, { children: /* @__PURE__ */ jsxs(ComboboxCommand, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (opt) => {
+              const o = opt;
+              return /* @__PURE__ */ jsx(ComboboxItem, { item: o, children: o.label }, o.value);
+            } })
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      class: className,
+      items: options,
+      itemKey: (o) => o.value,
+      itemToStringValue: (o) => o.label,
+      autoHighlight,
+      showClear,
+      placeholder,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(ComboboxTrigger, { class: cn(triggerClass), children: [
+          /* @__PURE__ */ jsx(ComboboxValue, {}),
+          /* @__PURE__ */ jsxs("span", { class: "ms-auto flex shrink-0 items-center gap-0.5", children: [
+            showClear ? /* @__PURE__ */ jsx(ComboboxClear, {}) : null,
+            /* @__PURE__ */ jsx(ChevronDownIcon, {})
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ComboboxContent, { children: /* @__PURE__ */ jsxs(ComboboxCommand, { children: [
+          /* @__PURE__ */ jsx(ComboboxInput, { placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (opt) => {
+            const o = opt;
+            return /* @__PURE__ */ jsx(ComboboxItem, { item: o, children: o.label }, o.value);
+          } })
+        ] }) })
+      ]
+    }
+  );
+};
+
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCommand, ComboboxContent, ComboboxInlineInput, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSelect, ComboboxTrigger, ComboboxValue, comboboxSelectionLabel, defaultComboboxItemKey, defaultComboboxItemString, flattenComboboxItems, useCombobox };
+//# sourceMappingURL=chunk-PU5J5EPY.js.map
+//# sourceMappingURL=chunk-PU5J5EPY.js.map