@gunkin/uiify 0.0.1-alpha

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,541 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import {
+  useControllableState,
+  useId,
+  useIsomorphicLayoutEffect,
+  useMergedRefs
+} from "@gunkin/uiify/hooks";
+import { createPartContext, splitRef } from "@gunkin/uiify/core";
+import { useAnchorPosition } from "@gunkin/uiify/core/anchor-position";
+import {
+  CollectionProvider,
+  useCollection,
+  useCollectionItem
+} from "@gunkin/uiify/core/collection";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
+import { DismissableLayer } from "@gunkin/uiify/core/dismissable-layer";
+import { usePopover } from "@gunkin/uiify/core/popover";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import {
+  createComboboxActiveStore,
+  defaultComboboxFilter,
+  moveActiveId
+} from "./combobox-store.js";
+import {
+  canAddComboboxValue,
+  normalizeComboboxValue,
+  splitComboboxValues
+} from "./combobox-values.js";
+const [ComboboxProvider, useComboboxContext] = createPartContext("Combobox");
+const DEFAULT_MULTI_DELIMITERS = [","];
+const EMPTY_DELIMITERS = [];
+function getEnabledIds(collection) {
+  return collection.filter((entry) => !entry.data.disabled).map((entry) => entry.id);
+}
+function ComboboxRoot(props) {
+  const multiple = props.multiple === true;
+  let multiDefaultValue = [];
+  let multiValue;
+  let multiOnValueChange;
+  let singleOnValueChange;
+  let singleValue;
+  if (props.multiple === true) {
+    multiDefaultValue = props.defaultValue ?? [];
+    multiValue = props.value;
+    multiOnValueChange = props.onValueChange;
+  } else {
+    singleOnValueChange = props.onValueChange;
+    singleValue = props.value ?? props.defaultValue;
+  }
+  const {
+    children,
+    defaultInputValue,
+    defaultOpen,
+    filterFn = defaultComboboxFilter,
+    inputValue: controlledInputValue,
+    items,
+    onInputValueChange,
+    onOpenChange,
+    open: controlledOpen
+  } = props;
+  const addOnPaste = multiple ? props.addOnPaste ?? true : false;
+  const allowCustomValue = multiple ? props.allowCustomValue ?? false : false;
+  const delimiters = multiple ? props.delimiters ?? DEFAULT_MULTI_DELIMITERS : EMPTY_DELIMITERS;
+  const maxValues = multiple ? props.maxValues : void 0;
+  const validateValue = multiple ? props.validateValue : void 0;
+  const listboxId = useId();
+  const activeStoreRef = useRef(null);
+  activeStoreRef.current ??= createComboboxActiveStore();
+  const activeStore = activeStoreRef.current;
+  const inputRef = useRef(null);
+  const [inputNode, setInputNode] = useState(null);
+  const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? "");
+  const inputValue = controlledInputValue ?? internalInputValue;
+  const [selectedValues, setSelectedValues] = useControllableState({
+    defaultValue: [...multiDefaultValue],
+    ...multiValue !== void 0 ? { value: multiValue } : {},
+    ...multiOnValueChange ? { onChange: (next) => multiOnValueChange([...next]) } : {}
+  });
+  const popover = usePopover({
+    mode: "auto",
+    ...defaultOpen !== void 0 ? { defaultOpen } : {},
+    ...controlledOpen !== void 0 ? { open: controlledOpen } : {},
+    ...onOpenChange ? { onOpenChange } : {}
+  });
+  const anchor = useAnchorPosition();
+  const setInputElement = useCallback((element) => {
+    inputRef.current = element;
+    setInputNode(element);
+  }, []);
+  const setInputValue = useCallback(
+    (next) => {
+      if (controlledInputValue === void 0) setInternalInputValue(next);
+      onInputValueChange?.(next);
+    },
+    [controlledInputValue, onInputValueChange]
+  );
+  const isValueSelected = useCallback(
+    (value) => multiple && selectedValues.includes(value),
+    [multiple, selectedValues]
+  );
+  const getValueLabel = useCallback(
+    (value) => items.find((item) => item.value === value)?.label ?? value,
+    [items]
+  );
+  const removeValue = useCallback(
+    (value) => {
+      if (!multiple) return;
+      setSelectedValues((current) => {
+        if (!current.includes(value)) return current;
+        return current.filter((selectedValue) => selectedValue !== value);
+      });
+    },
+    [multiple, setSelectedValues]
+  );
+  const addValue = useCallback(
+    (value) => {
+      let added = false;
+      setSelectedValues((current) => {
+        if (!canAddComboboxValue(value, current, {
+          ...maxValues !== void 0 ? { maxValues } : {},
+          ...validateValue ? { validateValue } : {}
+        }))
+          return current;
+        added = true;
+        return [...current, value];
+      });
+      if (added) {
+        setInputValue("");
+        activeStore.setActiveId(null);
+      }
+      return added;
+    },
+    [activeStore, maxValues, setInputValue, setSelectedValues, validateValue]
+  );
+  const toggleValue = useCallback(
+    (item) => {
+      if (!multiple || item.disabled) return;
+      let added = false;
+      setSelectedValues((current) => {
+        if (current.includes(item.value)) {
+          return current.filter((value) => value !== item.value);
+        }
+        if (!canAddComboboxValue(item.value, current, {
+          ...maxValues !== void 0 ? { maxValues } : {},
+          ...validateValue ? { validateValue } : {}
+        }))
+          return current;
+        added = true;
+        return [...current, item.value];
+      });
+      if (added) setInputValue("");
+    },
+    [maxValues, multiple, setInputValue, setSelectedValues, validateValue]
+  );
+  const commitValue = useCallback(
+    (value) => {
+      if (!multiple) return false;
+      const normalizedValue = normalizeComboboxValue(value);
+      const item = items.find(
+        (candidate) => candidate.value === normalizedValue || candidate.label === normalizedValue
+      );
+      if (item?.disabled || !item && !allowCustomValue) return false;
+      return addValue(item?.value ?? normalizedValue);
+    },
+    [addValue, allowCustomValue, items, multiple]
+  );
+  const selectItem = useCallback(
+    (item) => {
+      if (multiple) {
+        toggleValue(item);
+        return;
+      }
+      singleOnValueChange?.(item.value);
+      setInputValue(item.label);
+      activeStore.setActiveId(null);
+      popover.close();
+    },
+    [activeStore, multiple, popover, setInputValue, singleOnValueChange, toggleValue]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!popover.open) activeStore.setActiveId(null);
+  }, [activeStore, popover.open]);
+  const contextValue = useMemo(
+    () => ({
+      activeStore,
+      addOnPaste,
+      anchorProps: anchor.anchorProps,
+      anchorRef: anchor.anchorRef,
+      close: popover.close,
+      filterFn,
+      inputNode,
+      inputValue,
+      items,
+      listboxId,
+      delimiters,
+      multiple,
+      selectedValues,
+      getValueLabel,
+      isValueSelected,
+      toggleValue,
+      removeValue,
+      commitValue,
+      open: popover.openPopover,
+      openState: popover.open,
+      popupProps: popover.popupProps,
+      popupRef: popover.popupRef,
+      positionerProps: anchor.positionerProps,
+      positionerRef: anchor.positionerRef,
+      selectItem,
+      setInputElement,
+      setInputValue,
+      ...multiple ? { value: selectedValues } : singleValue !== void 0 ? { value: singleValue } : {}
+    }),
+    [
+      activeStore,
+      addOnPaste,
+      anchor.anchorProps,
+      anchor.anchorRef,
+      anchor.positionerProps,
+      anchor.positionerRef,
+      commitValue,
+      delimiters,
+      filterFn,
+      getValueLabel,
+      inputNode,
+      inputValue,
+      items,
+      isValueSelected,
+      listboxId,
+      multiple,
+      popover.close,
+      popover.open,
+      popover.openPopover,
+      popover.popupProps,
+      popover.popupRef,
+      selectItem,
+      selectedValues,
+      setInputElement,
+      setInputValue,
+      removeValue,
+      singleValue,
+      toggleValue
+    ]
+  );
+  return /* @__PURE__ */ jsx(CollectionProvider, { children: /* @__PURE__ */ jsx(ComboboxProvider, { value: contextValue, children }) });
+}
+ComboboxRoot.displayName = "ComboboxRoot";
+function ComboboxControl(props) {
+  const { as, render, children, className, ...consumerProps } = props;
+  return useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      "data-part": "control",
+      ...className ? { className } : {},
+      children
+    },
+    render,
+    state: {}
+  });
+}
+ComboboxControl.displayName = "ComboboxControl";
+function ComboboxTagsMultiple(props) {
+  const { as, render, children, className, ...consumerProps } = props;
+  const { getValueLabel, removeValue, selectedValues } = useComboboxContext("Tags");
+  const tags = selectedValues.map((value) => {
+    const label = getValueLabel(value);
+    return /* @__PURE__ */ jsxs("span", { "data-part": "tag", children: [
+      label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": `Remove ${label}`,
+          "data-part": "tag-remove",
+          type: "button",
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => removeValue(value),
+          children: "\xD7"
+        }
+      )
+    ] }, value);
+  });
+  return useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      "data-part": "tags",
+      ...className ? { className } : {},
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        tags,
+        children
+      ] })
+    },
+    render,
+    state: {}
+  });
+}
+ComboboxTagsMultiple.displayName = "ComboboxTagsMultiple";
+function ComboboxTags(props) {
+  const { multiple } = useComboboxContext("Tags");
+  if (!multiple) return null;
+  return /* @__PURE__ */ jsx(ComboboxTagsMultiple, { ...props });
+}
+ComboboxTags.displayName = "ComboboxTags";
+function ComboboxInput(props) {
+  const { as, render, className, ...consumerProps } = props;
+  const {
+    activeStore,
+    addOnPaste,
+    anchorProps,
+    anchorRef,
+    close,
+    inputValue,
+    listboxId,
+    commitValue,
+    delimiters,
+    multiple,
+    open,
+    openState,
+    removeValue,
+    selectedValues,
+    selectItem,
+    setInputElement,
+    setInputValue
+  } = useComboboxContext("Input");
+  const collection = useCollection();
+  const activeId = useSyncExternalStore(activeStore.subscribe, activeStore.getActiveId, () => null);
+  const [consumerRef, withoutRef] = splitRef(consumerProps);
+  const mergedRef = useMergedRefs(anchorRef, setInputElement, consumerRef);
+  const {
+    onChange: consumerOnChange,
+    onKeyDown: consumerOnKeyDown,
+    onPaste: consumerOnPaste
+  } = withoutRef;
+  const navigate = (direction) => {
+    const nextId = moveActiveId(getEnabledIds(collection), activeId, direction);
+    activeStore.setActiveId(nextId);
+  };
+  const handleChange = (event) => {
+    setInputValue(event.currentTarget.value);
+    if (!openState) open();
+    activeStore.setActiveId(null);
+  };
+  const handleKeyDown = (event) => {
+    const isDelimiterKey = event.key.length === 1 && delimiters.includes(event.key);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!openState) open();
+      navigate(activeId ? "next" : "first");
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!openState) open();
+      navigate(activeId ? "prev" : "last");
+    } else if (event.key === "Enter" && openState && activeId) {
+      event.preventDefault();
+      const match = collection.find((entry) => entry.id === activeId);
+      if (match) selectItem(match.data);
+    } else if (multiple && (event.key === "Enter" || isDelimiterKey)) {
+      event.preventDefault();
+      commitValue(inputValue);
+    } else if (multiple && event.key === "Backspace" && !inputValue && selectedValues.length > 0) {
+      event.preventDefault();
+      const lastValue = selectedValues.at(-1);
+      if (lastValue !== void 0) removeValue(lastValue);
+    } else if (event.key === "Escape" && openState) {
+      event.preventDefault();
+      close();
+    }
+  };
+  const handlePaste = (event) => {
+    if (!multiple || !addOnPaste) return;
+    const text = event.clipboardData.getData("text");
+    const separators = [...delimiters, "\n", "\r", "	"];
+    if (!separators.some((delimiter) => delimiter.length > 0 && text.includes(delimiter))) return;
+    event.preventDefault();
+    for (const value of splitComboboxValues(text, delimiters)) commitValue(value);
+  };
+  return useRenderElement({
+    as,
+    defaultTag: "input",
+    props: {
+      ...withoutRef,
+      ...anchorProps,
+      ref: mergedRef,
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-controls": listboxId,
+      "aria-expanded": openState,
+      ...activeId ? { "aria-activedescendant": activeId } : {},
+      ...className ? { className } : {},
+      value: inputValue,
+      onChange: composeEventHandlers(consumerOnChange, handleChange),
+      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),
+      onPaste: composeEventHandlers(consumerOnPaste, handlePaste)
+    },
+    render,
+    state: { open: openState }
+  });
+}
+function ComboboxTrigger(props) {
+  const { as, render, children, className, ...consumerProps } = props;
+  const { close, inputNode, listboxId, open, openState } = useComboboxContext("Trigger");
+  const nativeButton = !as || as === "button";
+  const { onClick: consumerOnClick } = consumerProps;
+  const handleClick = () => {
+    if (openState) close();
+    else open();
+    inputNode?.focus({ preventScroll: true });
+  };
+  return useRenderElement({
+    as,
+    defaultTag: "button",
+    props: {
+      ...consumerProps,
+      "aria-expanded": openState,
+      "aria-controls": listboxId,
+      "aria-haspopup": "listbox",
+      ...nativeButton ? { type: "button" } : {},
+      ...className ? { className } : {},
+      children,
+      onClick: composeEventHandlers(consumerOnClick, handleClick)
+    },
+    render,
+    state: { open: openState }
+  });
+}
+function ComboboxContent(props) {
+  const { align = "start", children, className, side = "bottom" } = props;
+  const {
+    close,
+    filterFn,
+    inputNode,
+    inputValue,
+    items,
+    listboxId,
+    multiple,
+    openState,
+    popupProps,
+    popupRef,
+    positionerProps,
+    positionerRef
+  } = useComboboxContext("Content");
+  const filteredItems = useMemo(() => filterFn(items, inputValue), [filterFn, inputValue, items]);
+  const branches = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    if (inputNode) set.add(inputNode);
+    return set;
+  }, [inputNode]);
+  const mergedRef = useMergedRefs(popupRef, positionerRef);
+  return /* @__PURE__ */ jsx(
+    DismissableLayer,
+    {
+      branches,
+      onDismiss: () => close(),
+      ...popupProps,
+      ...positionerProps,
+      ref: mergedRef,
+      id: listboxId,
+      role: "listbox",
+      "aria-multiselectable": multiple ? true : void 0,
+      "data-align": align,
+      "data-side": side,
+      "data-state": openState ? "open" : "closed",
+      ...className ? { className } : {},
+      children: children(filteredItems)
+    }
+  );
+}
+ComboboxContent.displayName = "ComboboxContent";
+function ComboboxItem(props) {
+  const { className, item } = props;
+  const { activeStore, isValueSelected, multiple, selectItem } = useComboboxContext("Item");
+  const id = useId();
+  const ref = useCollectionItem({ data: item, id });
+  const active = useSyncExternalStore(
+    (onStoreChange) => activeStore.subscribeItem(id, onStoreChange),
+    () => activeStore.isActive(id),
+    () => false
+  );
+  const selected = multiple ? isValueSelected(item.value) : active;
+  return useRenderElement({
+    defaultTag: "div",
+    props: {
+      ref,
+      id,
+      role: "option",
+      "aria-disabled": item.disabled ? true : void 0,
+      "aria-selected": selected,
+      "data-disabled": item.disabled ? "" : void 0,
+      "data-highlighted": active ? "" : void 0,
+      "data-selected": multiple && selected ? "" : void 0,
+      ...className ? { className } : {},
+      children: item.label,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick: () => {
+        if (!item.disabled) selectItem(item);
+      }
+    },
+    state: { active, disabled: Boolean(item.disabled), selected }
+  });
+}
+function ComboboxEmpty(props) {
+  const { children, className } = props;
+  return useRenderElement({
+    defaultTag: "div",
+    props: {
+      role: "presentation",
+      ...className ? { className } : {},
+      children
+    },
+    state: {}
+  });
+}
+const Combobox = {
+  Control: ComboboxControl,
+  Content: ComboboxContent,
+  Empty: ComboboxEmpty,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  Root: ComboboxRoot,
+  Tags: ComboboxTags,
+  Trigger: ComboboxTrigger
+};
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxRoot,
+  ComboboxTags,
+  ComboboxTrigger
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/components/combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport type {\n  ClipboardEvent,\n  ElementType,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  useControllableState,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from \"@gunkin/uiify/hooks\";\nimport { createPartContext, splitRef } from \"@gunkin/uiify/core\";\nimport { useAnchorPosition } from \"@gunkin/uiify/core/anchor-position\";\nimport {\n  CollectionProvider,\n  useCollection,\n  useCollectionItem,\n} from \"@gunkin/uiify/core/collection\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { DismissableLayer } from \"@gunkin/uiify/core/dismissable-layer\";\nimport { usePopover } from \"@gunkin/uiify/core/popover\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport {\n  createComboboxActiveStore,\n  defaultComboboxFilter,\n  moveActiveId,\n} from \"./combobox-store.js\";\nimport {\n  canAddComboboxValue,\n  normalizeComboboxValue,\n  splitComboboxValues,\n} from \"./combobox-values.js\";\nimport type {\n  ComboboxActiveStore,\n  ComboboxControlProps,\n  ComboboxItemData,\n  ComboboxContextValue,\n  ComboboxRootProps,\n  ComboboxTagsProps,\n  ComboboxInputProps,\n  ComboboxTriggerProps,\n  ComboboxContentOwnProps,\n  ComboboxItemOwnProps,\n  ComboboxEmptyOwnProps,\n} from \"./types.js\";\n\nexport type { ComboboxItemData } from \"./types.js\";\n\nconst [ComboboxProvider, useComboboxContext] = createPartContext<ComboboxContextValue>(\"Combobox\");\nconst DEFAULT_MULTI_DELIMITERS = [\",\"] as const;\nconst EMPTY_DELIMITERS: readonly string[] = [];\n\nfunction getEnabledIds(collection: ReturnType<typeof useCollection<ComboboxItemData>>): string[] {\n  return collection.filter((entry) => !entry.data.disabled).map((entry) => entry.id);\n}\n\nexport function ComboboxRoot(props: ComboboxRootProps): ReactElement | null {\n  const multiple = props.multiple === true;\n  let multiDefaultValue: readonly string[] = [];\n  let multiValue: readonly string[] | undefined;\n  let multiOnValueChange: ((value: string[]) => void) | undefined;\n  let singleOnValueChange: ((value: string) => void) | undefined;\n  let singleValue: string | undefined;\n\n  if (props.multiple === true) {\n    multiDefaultValue = props.defaultValue ?? [];\n    multiValue = props.value;\n    multiOnValueChange = props.onValueChange;\n  } else {\n    singleOnValueChange = props.onValueChange;\n    singleValue = props.value ?? props.defaultValue;\n  }\n\n  const {\n    children,\n    defaultInputValue,\n    defaultOpen,\n    filterFn = defaultComboboxFilter,\n    inputValue: controlledInputValue,\n    items,\n    onInputValueChange,\n    onOpenChange,\n    open: controlledOpen,\n  } = props;\n  const addOnPaste = multiple ? (props.addOnPaste ?? true) : false;\n  const allowCustomValue = multiple ? (props.allowCustomValue ?? false) : false;\n  const delimiters = multiple ? (props.delimiters ?? DEFAULT_MULTI_DELIMITERS) : EMPTY_DELIMITERS;\n  const maxValues = multiple ? props.maxValues : undefined;\n  const validateValue = multiple ? props.validateValue : undefined;\n\n  const listboxId = useId();\n  const activeStoreRef = useRef<ComboboxActiveStore | null>(null);\n  activeStoreRef.current ??= createComboboxActiveStore();\n  const activeStore = activeStoreRef.current;\n  const inputRef = useRef<HTMLElement | null>(null);\n  const [inputNode, setInputNode] = useState<HTMLElement | null>(null);\n  const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? \"\");\n  const inputValue = controlledInputValue ?? internalInputValue;\n  const [selectedValues, setSelectedValues] = useControllableState<readonly string[]>({\n    defaultValue: [...multiDefaultValue],\n    ...(multiValue !== undefined ? { value: multiValue } : {}),\n    ...(multiOnValueChange\n      ? { onChange: (next: readonly string[]) => multiOnValueChange([...next]) }\n      : {}),\n  });\n\n  const popover = usePopover({\n    mode: \"auto\",\n    ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n    ...(controlledOpen !== undefined ? { open: controlledOpen } : {}),\n    ...(onOpenChange ? { onOpenChange } : {}),\n  });\n  const anchor = useAnchorPosition();\n\n  const setInputElement = useCallback((element: HTMLElement | null) => {\n    inputRef.current = element;\n    setInputNode(element);\n  }, []);\n\n  const setInputValue = useCallback(\n    (next: string) => {\n      if (controlledInputValue === undefined) setInternalInputValue(next);\n      onInputValueChange?.(next);\n    },\n    [controlledInputValue, onInputValueChange],\n  );\n\n  const isValueSelected = useCallback(\n    (value: string) => multiple && selectedValues.includes(value),\n    [multiple, selectedValues],\n  );\n\n  const getValueLabel = useCallback(\n    (value: string) => items.find((item) => item.value === value)?.label ?? value,\n    [items],\n  );\n\n  const removeValue = useCallback(\n    (value: string) => {\n      if (!multiple) return;\n      setSelectedValues((current) => {\n        if (!current.includes(value)) return current;\n        return current.filter((selectedValue) => selectedValue !== value);\n      });\n    },\n    [multiple, setSelectedValues],\n  );\n\n  const addValue = useCallback(\n    (value: string): boolean => {\n      let added = false;\n      setSelectedValues((current) => {\n        if (\n          !canAddComboboxValue(value, current, {\n            ...(maxValues !== undefined ? { maxValues } : {}),\n            ...(validateValue ? { validateValue } : {}),\n          })\n        )\n          return current;\n        added = true;\n        return [...current, value];\n      });\n      if (added) {\n        setInputValue(\"\");\n        activeStore.setActiveId(null);\n      }\n      return added;\n    },\n    [activeStore, maxValues, setInputValue, setSelectedValues, validateValue],\n  );\n\n  const toggleValue = useCallback(\n    (item: ComboboxItemData) => {\n      if (!multiple || item.disabled) return;\n      let added = false;\n      setSelectedValues((current) => {\n        if (current.includes(item.value)) {\n          return current.filter((value) => value !== item.value);\n        }\n        if (\n          !canAddComboboxValue(item.value, current, {\n            ...(maxValues !== undefined ? { maxValues } : {}),\n            ...(validateValue ? { validateValue } : {}),\n          })\n        )\n          return current;\n        added = true;\n        return [...current, item.value];\n      });\n      if (added) setInputValue(\"\");\n    },\n    [maxValues, multiple, setInputValue, setSelectedValues, validateValue],\n  );\n\n  const commitValue = useCallback(\n    (value: string): boolean => {\n      if (!multiple) return false;\n      const normalizedValue = normalizeComboboxValue(value);\n      const item = items.find(\n        (candidate) => candidate.value === normalizedValue || candidate.label === normalizedValue,\n      );\n      if (item?.disabled || (!item && !allowCustomValue)) return false;\n      return addValue(item?.value ?? normalizedValue);\n    },\n    [addValue, allowCustomValue, items, multiple],\n  );\n\n  const selectItem = useCallback(\n    (item: ComboboxItemData) => {\n      if (multiple) {\n        toggleValue(item);\n        return;\n      }\n      singleOnValueChange?.(item.value);\n      setInputValue(item.label);\n      activeStore.setActiveId(null);\n      popover.close();\n    },\n    [activeStore, multiple, popover, setInputValue, singleOnValueChange, toggleValue],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!popover.open) activeStore.setActiveId(null);\n  }, [activeStore, popover.open]);\n\n  const contextValue = useMemo<ComboboxContextValue>(\n    () => ({\n      activeStore,\n      addOnPaste,\n      anchorProps: anchor.anchorProps,\n      anchorRef: anchor.anchorRef,\n      close: popover.close,\n      filterFn,\n      inputNode,\n      inputValue,\n      items,\n      listboxId,\n      delimiters,\n      multiple,\n      selectedValues,\n      getValueLabel,\n      isValueSelected,\n      toggleValue,\n      removeValue,\n      commitValue,\n      open: popover.openPopover,\n      openState: popover.open,\n      popupProps: popover.popupProps,\n      popupRef: popover.popupRef,\n      positionerProps: anchor.positionerProps,\n      positionerRef: anchor.positionerRef,\n      selectItem,\n      setInputElement,\n      setInputValue,\n      ...(multiple\n        ? { value: selectedValues }\n        : singleValue !== undefined\n          ? { value: singleValue }\n          : {}),\n    }),\n    [\n      activeStore,\n      addOnPaste,\n      anchor.anchorProps,\n      anchor.anchorRef,\n      anchor.positionerProps,\n      anchor.positionerRef,\n      commitValue,\n      delimiters,\n      filterFn,\n      getValueLabel,\n      inputNode,\n      inputValue,\n      items,\n      isValueSelected,\n      listboxId,\n      multiple,\n      popover.close,\n      popover.open,\n      popover.openPopover,\n      popover.popupProps,\n      popover.popupRef,\n      selectItem,\n      selectedValues,\n      setInputElement,\n      setInputValue,\n      removeValue,\n      singleValue,\n      toggleValue,\n    ],\n  );\n\n  return (\n    <CollectionProvider>\n      <ComboboxProvider value={contextValue}>{children}</ComboboxProvider>\n    </CollectionProvider>\n  );\n}\nComboboxRoot.displayName = \"ComboboxRoot\";\n\nexport function ComboboxControl<TAs extends ElementType = \"div\">(\n  props: ComboboxControlProps<TAs>,\n): ReactElement | null {\n  const { as, render, children, className, ...consumerProps } =\n    props as ComboboxControlProps<ElementType>;\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-part\": \"control\",\n      ...(className ? { className } : {}),\n      children,\n    },\n    render,\n    state: {},\n  });\n}\nComboboxControl.displayName = \"ComboboxControl\";\n\nfunction ComboboxTagsMultiple<TAs extends ElementType = \"div\">(\n  props: ComboboxTagsProps<TAs>,\n): ReactElement | null {\n  const { as, render, children, className, ...consumerProps } =\n    props as ComboboxTagsProps<ElementType>;\n  const { getValueLabel, removeValue, selectedValues } = useComboboxContext(\"Tags\");\n\n  const tags = selectedValues.map((value) => {\n    const label = getValueLabel(value);\n    return (\n      <span data-part=\"tag\" key={value}>\n        {label}\n        <button\n          aria-label={`Remove ${label}`}\n          data-part=\"tag-remove\"\n          type=\"button\"\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => removeValue(value)}\n        >\n          ×\n        </button>\n      </span>\n    );\n  });\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-part\": \"tags\",\n      ...(className ? { className } : {}),\n      children: (\n        <>\n          {tags}\n          {children}\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nComboboxTagsMultiple.displayName = \"ComboboxTagsMultiple\";\n\nexport function ComboboxTags<TAs extends ElementType = \"div\">(\n  props: ComboboxTagsProps<TAs>,\n): ReactElement | null {\n  const { multiple } = useComboboxContext(\"Tags\");\n  if (!multiple) return null;\n\n  return <ComboboxTagsMultiple {...props} />;\n}\nComboboxTags.displayName = \"ComboboxTags\";\n\nexport function ComboboxInput<TAs extends ElementType = \"input\">(\n  props: ComboboxInputProps<TAs>,\n): ReactElement | null {\n  const { as, render, className, ...consumerProps } = props as ComboboxInputProps<\"input\">;\n  const {\n    activeStore,\n    addOnPaste,\n    anchorProps,\n    anchorRef,\n    close,\n    inputValue,\n    listboxId,\n    commitValue,\n    delimiters,\n    multiple,\n    open,\n    openState,\n    removeValue,\n    selectedValues,\n    selectItem,\n    setInputElement,\n    setInputValue,\n  } = useComboboxContext(\"Input\");\n  const collection = useCollection<ComboboxItemData>();\n  const activeId = useSyncExternalStore(activeStore.subscribe, activeStore.getActiveId, () => null);\n  const [consumerRef, withoutRef] = splitRef<HTMLInputElement, typeof consumerProps>(consumerProps);\n  const mergedRef = useMergedRefs(anchorRef, setInputElement, consumerRef);\n  const {\n    onChange: consumerOnChange,\n    onKeyDown: consumerOnKeyDown,\n    onPaste: consumerOnPaste,\n  } = withoutRef as {\n    onChange?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;\n  };\n\n  const navigate = (direction: \"first\" | \"last\" | \"next\" | \"prev\") => {\n    const nextId = moveActiveId(getEnabledIds(collection), activeId, direction);\n    activeStore.setActiveId(nextId);\n  };\n\n  const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n    setInputValue(event.currentTarget.value);\n    if (!openState) open();\n    activeStore.setActiveId(null);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const isDelimiterKey = event.key.length === 1 && delimiters.includes(event.key);\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      if (!openState) open();\n      navigate(activeId ? \"next\" : \"first\");\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!openState) open();\n      navigate(activeId ? \"prev\" : \"last\");\n    } else if (event.key === \"Enter\" && openState && activeId) {\n      event.preventDefault();\n      const match = collection.find((entry) => entry.id === activeId);\n      if (match) selectItem(match.data);\n    } else if (multiple && (event.key === \"Enter\" || isDelimiterKey)) {\n      event.preventDefault();\n      commitValue(inputValue);\n    } else if (multiple && event.key === \"Backspace\" && !inputValue && selectedValues.length > 0) {\n      event.preventDefault();\n      const lastValue = selectedValues.at(-1);\n      if (lastValue !== undefined) removeValue(lastValue);\n    } else if (event.key === \"Escape\" && openState) {\n      event.preventDefault();\n      close();\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    if (!multiple || !addOnPaste) return;\n    const text = event.clipboardData.getData(\"text\");\n    const separators = [...delimiters, \"\\n\", \"\\r\", \"\\t\"];\n    if (!separators.some((delimiter) => delimiter.length > 0 && text.includes(delimiter))) return;\n    event.preventDefault();\n    for (const value of splitComboboxValues(text, delimiters)) commitValue(value);\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"input\",\n    props: {\n      ...withoutRef,\n      ...anchorProps,\n      ref: mergedRef,\n      role: \"combobox\",\n      \"aria-autocomplete\": \"list\",\n      \"aria-controls\": listboxId,\n      \"aria-expanded\": openState,\n      ...(activeId ? { \"aria-activedescendant\": activeId } : {}),\n      ...(className ? { className } : {}),\n      value: inputValue,\n      onChange: composeEventHandlers(consumerOnChange, handleChange),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),\n      onPaste: composeEventHandlers(consumerOnPaste, handlePaste),\n    },\n    render,\n    state: { open: openState },\n  });\n}\n\nexport function ComboboxTrigger<TAs extends ElementType = \"button\">(\n  props: ComboboxTriggerProps<TAs>,\n): ReactElement | null {\n  const { as, render, children, className, ...consumerProps } =\n    props as ComboboxTriggerProps<\"button\">;\n  const { close, inputNode, listboxId, open, openState } = useComboboxContext(\"Trigger\");\n  const nativeButton = !as || as === \"button\";\n  const { onClick: consumerOnClick } = consumerProps as {\n    onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  };\n\n  const handleClick = () => {\n    if (openState) close();\n    else open();\n    inputNode?.focus({ preventScroll: true });\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"button\",\n    props: {\n      ...consumerProps,\n      \"aria-expanded\": openState,\n      \"aria-controls\": listboxId,\n      \"aria-haspopup\": \"listbox\",\n      ...(nativeButton ? { type: \"button\" } : {}),\n      ...(className ? { className } : {}),\n      children,\n      onClick: composeEventHandlers(consumerOnClick, handleClick),\n    },\n    render,\n    state: { open: openState },\n  });\n}\n\nexport function ComboboxContent(props: ComboboxContentOwnProps): ReactElement | null {\n  const { align = \"start\", children, className, side = \"bottom\" } = props;\n  const {\n    close,\n    filterFn,\n    inputNode,\n    inputValue,\n    items,\n    listboxId,\n    multiple,\n    openState,\n    popupProps,\n    popupRef,\n    positionerProps,\n    positionerRef,\n  } = useComboboxContext(\"Content\");\n\n  const filteredItems = useMemo(() => filterFn(items, inputValue), [filterFn, inputValue, items]);\n\n  const branches = useMemo(() => {\n    const set = new Set<Element>();\n    if (inputNode) set.add(inputNode);\n    return set;\n  }, [inputNode]);\n  const mergedRef = useMergedRefs(popupRef, positionerRef);\n\n  return (\n    <DismissableLayer\n      branches={branches}\n      onDismiss={() => close()}\n      {...popupProps}\n      {...positionerProps}\n      ref={mergedRef}\n      id={listboxId}\n      // Combobox pattern requires an ARIA listbox; native <select> cannot replace it.\n      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- ARIA combobox popup\n      role=\"listbox\"\n      aria-multiselectable={multiple ? true : undefined}\n      data-align={align}\n      data-side={side}\n      data-state={openState ? \"open\" : \"closed\"}\n      {...(className ? { className } : {})}\n    >\n      {children(filteredItems)}\n    </DismissableLayer>\n  );\n}\nComboboxContent.displayName = \"ComboboxContent\";\n\nexport function ComboboxItem(props: ComboboxItemOwnProps): ReactElement | null {\n  const { className, item } = props;\n  const { activeStore, isValueSelected, multiple, selectItem } = useComboboxContext(\"Item\");\n  const id = useId();\n  const ref = useCollectionItem({ data: item, id });\n  const active = useSyncExternalStore(\n    (onStoreChange) => activeStore.subscribeItem(id, onStoreChange),\n    () => activeStore.isActive(id),\n    () => false,\n  );\n  const selected = multiple ? isValueSelected(item.value) : active;\n\n  return useRenderElement({\n    defaultTag: \"div\",\n    props: {\n      ref,\n      id,\n      role: \"option\",\n      \"aria-disabled\": item.disabled ? true : undefined,\n      \"aria-selected\": selected,\n      \"data-disabled\": item.disabled ? \"\" : undefined,\n      \"data-highlighted\": active ? \"\" : undefined,\n      \"data-selected\": multiple && selected ? \"\" : undefined,\n      ...(className ? { className } : {}),\n      children: item.label,\n      onMouseDown(event: SyntheticEvent<HTMLElement>) {\n        event.preventDefault();\n      },\n      onClick: () => {\n        if (!item.disabled) selectItem(item);\n      },\n    },\n    state: { active, disabled: Boolean(item.disabled), selected },\n  });\n}\n\nexport function ComboboxEmpty(props: ComboboxEmptyOwnProps): ReactElement | null {\n  const { children, className } = props;\n  return useRenderElement({\n    defaultTag: \"div\",\n    props: {\n      role: \"presentation\",\n      ...(className ? { className } : {}),\n      children,\n    },\n    state: {},\n  });\n}\n\nexport const Combobox = {\n  Control: ComboboxControl,\n  Content: ComboboxContent,\n  Empty: ComboboxEmpty,\n  Input: ComboboxInput,\n  Item: ComboboxItem,\n  Root: ComboboxRoot,\n  Tags: ComboboxTags,\n  Trigger: ComboboxTrigger,\n};\n"],"mappings":";AA2SM,SA4DE,UA5DF,KAqCA,YArCA;AAzSN,SAAS,aAAa,SAAS,QAAQ,UAAU,4BAA4B;AAQ7E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,gBAAgB;AAC5C,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiBP,MAAM,CAAC,kBAAkB,kBAAkB,IAAI,kBAAwC,UAAU;AACjG,MAAM,2BAA2B,CAAC,GAAG;AACrC,MAAM,mBAAsC,CAAC;AAE7C,SAAS,cAAc,YAA0E;AAC/F,SAAO,WAAW,OAAO,CAAC,UAAU,CAAC,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAC,UAAU,MAAM,EAAE;AACnF;AAEO,SAAS,aAAa,OAA+C;AAC1E,QAAM,WAAW,MAAM,aAAa;AACpC,MAAI,oBAAuC,CAAC;AAC5C,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,MAAM,aAAa,MAAM;AAC3B,wBAAoB,MAAM,gBAAgB,CAAC;AAC3C,iBAAa,MAAM;AACnB,yBAAqB,MAAM;AAAA,EAC7B,OAAO;AACL,0BAAsB,MAAM;AAC5B,kBAAc,MAAM,SAAS,MAAM;AAAA,EACrC;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,IAAI;AACJ,QAAM,aAAa,WAAY,MAAM,cAAc,OAAQ;AAC3D,QAAM,mBAAmB,WAAY,MAAM,oBAAoB,QAAS;AACxE,QAAM,aAAa,WAAY,MAAM,cAAc,2BAA4B;AAC/E,QAAM,YAAY,WAAW,MAAM,YAAY;AAC/C,QAAM,gBAAgB,WAAW,MAAM,gBAAgB;AAEvD,QAAM,YAAY,MAAM;AACxB,QAAM,iBAAiB,OAAmC,IAAI;AAC9D,iBAAe,YAAY,0BAA0B;AACrD,QAAM,cAAc,eAAe;AACnC,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,qBAAqB,EAAE;AACpF,QAAM,aAAa,wBAAwB;AAC3C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,qBAAwC;AAAA,IAClF,cAAc,CAAC,GAAG,iBAAiB;AAAA,IACnC,GAAI,eAAe,SAAY,EAAE,OAAO,WAAW,IAAI,CAAC;AAAA,IACxD,GAAI,qBACA,EAAE,UAAU,CAAC,SAA4B,mBAAmB,CAAC,GAAG,IAAI,CAAC,EAAE,IACvE,CAAC;AAAA,EACP,CAAC;AAED,QAAM,UAAU,WAAW;AAAA,IACzB,MAAM;AAAA,IACN,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,IACnD,GAAI,mBAAmB,SAAY,EAAE,MAAM,eAAe,IAAI,CAAC;AAAA,IAC/D,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,EACzC,CAAC;AACD,QAAM,SAAS,kBAAkB;AAEjC,QAAM,kBAAkB,YAAY,CAAC,YAAgC;AACnE,aAAS,UAAU;AACnB,iBAAa,OAAO;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,UAAI,yBAAyB,OAAW,uBAAsB,IAAI;AAClE,2BAAqB,IAAI;AAAA,IAC3B;AAAA,IACA,CAAC,sBAAsB,kBAAkB;AAAA,EAC3C;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAAkB,YAAY,eAAe,SAAS,KAAK;AAAA,IAC5D,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAkB,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,KAAK,GAAG,SAAS;AAAA,IACxE,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAAkB;AACjB,UAAI,CAAC,SAAU;AACf,wBAAkB,CAAC,YAAY;AAC7B,YAAI,CAAC,QAAQ,SAAS,KAAK,EAAG,QAAO;AACrC,eAAO,QAAQ,OAAO,CAAC,kBAAkB,kBAAkB,KAAK;AAAA,MAClE,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,UAA2B;AAC1B,UAAI,QAAQ;AACZ,wBAAkB,CAAC,YAAY;AAC7B,YACE,CAAC,oBAAoB,OAAO,SAAS;AAAA,UACnC,GAAI,cAAc,SAAY,EAAE,UAAU,IAAI,CAAC;AAAA,UAC/C,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,QAC3C,CAAC;AAED,iBAAO;AACT,gBAAQ;AACR,eAAO,CAAC,GAAG,SAAS,KAAK;AAAA,MAC3B,CAAC;AACD,UAAI,OAAO;AACT,sBAAc,EAAE;AAChB,oBAAY,YAAY,IAAI;AAAA,MAC9B;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,WAAW,eAAe,mBAAmB,aAAa;AAAA,EAC1E;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,SAA2B;AAC1B,UAAI,CAAC,YAAY,KAAK,SAAU;AAChC,UAAI,QAAQ;AACZ,wBAAkB,CAAC,YAAY;AAC7B,YAAI,QAAQ,SAAS,KAAK,KAAK,GAAG;AAChC,iBAAO,QAAQ,OAAO,CAAC,UAAU,UAAU,KAAK,KAAK;AAAA,QACvD;AACA,YACE,CAAC,oBAAoB,KAAK,OAAO,SAAS;AAAA,UACxC,GAAI,cAAc,SAAY,EAAE,UAAU,IAAI,CAAC;AAAA,UAC/C,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,QAC3C,CAAC;AAED,iBAAO;AACT,gBAAQ;AACR,eAAO,CAAC,GAAG,SAAS,KAAK,KAAK;AAAA,MAChC,CAAC;AACD,UAAI,MAAO,eAAc,EAAE;AAAA,IAC7B;AAAA,IACA,CAAC,WAAW,UAAU,eAAe,mBAAmB,aAAa;AAAA,EACvE;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA2B;AAC1B,UAAI,CAAC,SAAU,QAAO;AACtB,YAAM,kBAAkB,uBAAuB,KAAK;AACpD,YAAM,OAAO,MAAM;AAAA,QACjB,CAAC,cAAc,UAAU,UAAU,mBAAmB,UAAU,UAAU;AAAA,MAC5E;AACA,UAAI,MAAM,YAAa,CAAC,QAAQ,CAAC,iBAAmB,QAAO;AAC3D,aAAO,SAAS,MAAM,SAAS,eAAe;AAAA,IAChD;AAAA,IACA,CAAC,UAAU,kBAAkB,OAAO,QAAQ;AAAA,EAC9C;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,SAA2B;AAC1B,UAAI,UAAU;AACZ,oBAAY,IAAI;AAChB;AAAA,MACF;AACA,4BAAsB,KAAK,KAAK;AAChC,oBAAc,KAAK,KAAK;AACxB,kBAAY,YAAY,IAAI;AAC5B,cAAQ,MAAM;AAAA,IAChB;AAAA,IACA,CAAC,aAAa,UAAU,SAAS,eAAe,qBAAqB,WAAW;AAAA,EAClF;AAEA,4BAA0B,MAAM;AAC9B,QAAI,CAAC,QAAQ,KAAM,aAAY,YAAY,IAAI;AAAA,EACjD,GAAG,CAAC,aAAa,QAAQ,IAAI,CAAC;AAE9B,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa,OAAO;AAAA,MACpB,WAAW,OAAO;AAAA,MAClB,OAAO,QAAQ;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,QAAQ;AAAA,MACd,WAAW,QAAQ;AAAA,MACnB,YAAY,QAAQ;AAAA,MACpB,UAAU,QAAQ;AAAA,MAClB,iBAAiB,OAAO;AAAA,MACxB,eAAe,OAAO;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI,WACA,EAAE,OAAO,eAAe,IACxB,gBAAgB,SACd,EAAE,OAAO,YAAY,IACrB,CAAC;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,sBACC,8BAAC,oBAAiB,OAAO,cAAe,UAAS,GACnD;AAEJ;AACA,aAAa,cAAc;AAEpB,SAAS,gBACd,OACqB;AACrB,QAAM,EAAE,IAAI,QAAQ,UAAU,WAAW,GAAG,cAAc,IACxD;AAEF,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa;AAAA,MACb,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AACA,gBAAgB,cAAc;AAE9B,SAAS,qBACP,OACqB;AACrB,QAAM,EAAE,IAAI,QAAQ,UAAU,WAAW,GAAG,cAAc,IACxD;AACF,QAAM,EAAE,eAAe,aAAa,eAAe,IAAI,mBAAmB,MAAM;AAEhF,QAAM,OAAO,eAAe,IAAI,CAAC,UAAU;AACzC,UAAM,QAAQ,cAAc,KAAK;AACjC,WACE,qBAAC,UAAK,aAAU,OACb;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,UAAU,KAAK;AAAA,UAC3B,aAAU;AAAA,UACV,MAAK;AAAA,UACL,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,UAC7C,SAAS,MAAM,YAAY,KAAK;AAAA,UACjC;AAAA;AAAA,MAED;AAAA,SAVyB,KAW3B;AAAA,EAEJ,CAAC;AAED,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa;AAAA,MACb,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC,UACE,iCACG;AAAA;AAAA,QACA;AAAA,SACH;AAAA,IAEJ;AAAA,IACA;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AACA,qBAAqB,cAAc;AAE5B,SAAS,aACd,OACqB;AACrB,QAAM,EAAE,SAAS,IAAI,mBAAmB,MAAM;AAC9C,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,oBAAC,wBAAsB,GAAG,OAAO;AAC1C;AACA,aAAa,cAAc;AAEpB,SAAS,cACd,OACqB;AACrB,QAAM,EAAE,IAAI,QAAQ,WAAW,GAAG,cAAc,IAAI;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,OAAO;AAC9B,QAAM,aAAa,cAAgC;AACnD,QAAM,WAAW,qBAAqB,YAAY,WAAW,YAAY,aAAa,MAAM,IAAI;AAChG,QAAM,CAAC,aAAa,UAAU,IAAI,SAAiD,aAAa;AAChG,QAAM,YAAY,cAAc,WAAW,iBAAiB,WAAW;AACvE,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,EACX,IAAI;AAMJ,QAAM,WAAW,CAAC,cAAkD;AAClE,UAAM,SAAS,aAAa,cAAc,UAAU,GAAG,UAAU,SAAS;AAC1E,gBAAY,YAAY,MAAM;AAAA,EAChC;AAEA,QAAM,eAAe,CAAC,UAA4C;AAChE,kBAAc,MAAM,cAAc,KAAK;AACvC,QAAI,CAAC,UAAW,MAAK;AACrB,gBAAY,YAAY,IAAI;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,UAA2C;AAChE,UAAM,iBAAiB,MAAM,IAAI,WAAW,KAAK,WAAW,SAAS,MAAM,GAAG;AAC9E,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,UAAI,CAAC,UAAW,MAAK;AACrB,eAAS,WAAW,SAAS,OAAO;AAAA,IACtC,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,UAAI,CAAC,UAAW,MAAK;AACrB,eAAS,WAAW,SAAS,MAAM;AAAA,IACrC,WAAW,MAAM,QAAQ,WAAW,aAAa,UAAU;AACzD,YAAM,eAAe;AACrB,YAAM,QAAQ,WAAW,KAAK,CAAC,UAAU,MAAM,OAAO,QAAQ;AAC9D,UAAI,MAAO,YAAW,MAAM,IAAI;AAAA,IAClC,WAAW,aAAa,MAAM,QAAQ,WAAW,iBAAiB;AAChE,YAAM,eAAe;AACrB,kBAAY,UAAU;AAAA,IACxB,WAAW,YAAY,MAAM,QAAQ,eAAe,CAAC,cAAc,eAAe,SAAS,GAAG;AAC5F,YAAM,eAAe;AACrB,YAAM,YAAY,eAAe,GAAG,EAAE;AACtC,UAAI,cAAc,OAAW,aAAY,SAAS;AAAA,IACpD,WAAW,MAAM,QAAQ,YAAY,WAAW;AAC9C,YAAM,eAAe;AACrB,YAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,UAA4C;AAC/D,QAAI,CAAC,YAAY,CAAC,WAAY;AAC9B,UAAM,OAAO,MAAM,cAAc,QAAQ,MAAM;AAC/C,UAAM,aAAa,CAAC,GAAG,YAAY,MAAM,MAAM,GAAI;AACnD,QAAI,CAAC,WAAW,KAAK,CAAC,cAAc,UAAU,SAAS,KAAK,KAAK,SAAS,SAAS,CAAC,EAAG;AACvF,UAAM,eAAe;AACrB,eAAW,SAAS,oBAAoB,MAAM,UAAU,EAAG,aAAY,KAAK;AAAA,EAC9E;AAEA,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN,qBAAqB;AAAA,MACrB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,GAAI,WAAW,EAAE,yBAAyB,SAAS,IAAI,CAAC;AAAA,MACxD,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC,OAAO;AAAA,MACP,UAAU,qBAAqB,kBAAkB,YAAY;AAAA,MAC7D,WAAW,qBAAqB,mBAAmB,aAAa;AAAA,MAChE,SAAS,qBAAqB,iBAAiB,WAAW;AAAA,IAC5D;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,UAAU;AAAA,EAC3B,CAAC;AACH;AAEO,SAAS,gBACd,OACqB;AACrB,QAAM,EAAE,IAAI,QAAQ,UAAU,WAAW,GAAG,cAAc,IACxD;AACF,QAAM,EAAE,OAAO,WAAW,WAAW,MAAM,UAAU,IAAI,mBAAmB,SAAS;AACrF,QAAM,eAAe,CAAC,MAAM,OAAO;AACnC,QAAM,EAAE,SAAS,gBAAgB,IAAI;AAIrC,QAAM,cAAc,MAAM;AACxB,QAAI,UAAW,OAAM;AAAA,QAChB,MAAK;AACV,eAAW,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,EAC1C;AAEA,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,GAAI,eAAe,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,MACzC,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,SAAS,qBAAqB,iBAAiB,WAAW;AAAA,IAC5D;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,UAAU;AAAA,EAC3B,CAAC;AACH;AAEO,SAAS,gBAAgB,OAAqD;AACnF,QAAM,EAAE,QAAQ,SAAS,UAAU,WAAW,OAAO,SAAS,IAAI;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,SAAS;AAEhC,QAAM,gBAAgB,QAAQ,MAAM,SAAS,OAAO,UAAU,GAAG,CAAC,UAAU,YAAY,KAAK,CAAC;AAE9F,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,MAAM,oBAAI,IAAa;AAC7B,QAAI,UAAW,KAAI,IAAI,SAAS;AAChC,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,YAAY,cAAc,UAAU,aAAa;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,MAAM,MAAM;AAAA,MACtB,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,IAAI;AAAA,MAGJ,MAAK;AAAA,MACL,wBAAsB,WAAW,OAAO;AAAA,MACxC,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,cAAY,YAAY,SAAS;AAAA,MAChC,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAEjC,mBAAS,aAAa;AAAA;AAAA,EACzB;AAEJ;AACA,gBAAgB,cAAc;AAEvB,SAAS,aAAa,OAAkD;AAC7E,QAAM,EAAE,WAAW,KAAK,IAAI;AAC5B,QAAM,EAAE,aAAa,iBAAiB,UAAU,WAAW,IAAI,mBAAmB,MAAM;AACxF,QAAM,KAAK,MAAM;AACjB,QAAM,MAAM,kBAAkB,EAAE,MAAM,MAAM,GAAG,CAAC;AAChD,QAAM,SAAS;AAAA,IACb,CAAC,kBAAkB,YAAY,cAAc,IAAI,aAAa;AAAA,IAC9D,MAAM,YAAY,SAAS,EAAE;AAAA,IAC7B,MAAM;AAAA,EACR;AACA,QAAM,WAAW,WAAW,gBAAgB,KAAK,KAAK,IAAI;AAE1D,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,iBAAiB,KAAK,WAAW,OAAO;AAAA,MACxC,iBAAiB;AAAA,MACjB,iBAAiB,KAAK,WAAW,KAAK;AAAA,MACtC,oBAAoB,SAAS,KAAK;AAAA,MAClC,iBAAiB,YAAY,WAAW,KAAK;AAAA,MAC7C,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC,UAAU,KAAK;AAAA,MACf,YAAY,OAAoC;AAC9C,cAAM,eAAe;AAAA,MACvB;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,MACrC;AAAA,IACF;AAAA,IACA,OAAO,EAAE,QAAQ,UAAU,QAAQ,KAAK,QAAQ,GAAG,SAAS;AAAA,EAC9D,CAAC;AACH;AAEO,SAAS,cAAc,OAAmD;AAC/E,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;","names":[]}

package/dist/components/combobox/combobox-store.d.ts

@@ -0,0 +1,5 @@
+import type { ActiveMoveDirection, ComboboxActiveStore, ComboboxItemData } from "./types.js";
+export declare function createComboboxActiveStore(): ComboboxActiveStore;
+export declare function moveActiveId(orderedIds: readonly string[], activeId: string | null, direction: ActiveMoveDirection): string | null;
+export declare function defaultComboboxFilter(items: readonly ComboboxItemData[], inputValue: string): ComboboxItemData[];
+//# sourceMappingURL=combobox-store.d.ts.map

package/dist/components/combobox/combobox-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-store.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE7F,wBAAgB,yBAAyB,IAAI,mBAAmB,CAoC/D;AAED,wBAAgB,YAAY,CAC1B,UAAU,EAAE,SAAS,MAAM,EAAE,EAC7B,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,SAAS,EAAE,mBAAmB,GAC7B,MAAM,GAAG,IAAI,CAmBf;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,gBAAgB,EAAE,EAClC,UAAU,EAAE,MAAM,GACjB,gBAAgB,EAAE,CAIpB"}

package/dist/components/combobox/combobox-store.js

@@ -0,0 +1,64 @@
+function createComboboxActiveStore() {
+  let activeId = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const itemListeners = /* @__PURE__ */ new Map();
+  const emitItem = (id) => {
+    itemListeners.get(id)?.forEach((listener) => listener());
+  };
+  return {
+    getActiveId: () => activeId,
+    isActive(id) {
+      return activeId === id;
+    },
+    setActiveId(next) {
+      if (activeId === next) return;
+      const previous = activeId;
+      activeId = next;
+      listeners.forEach((listener) => listener());
+      if (previous) emitItem(previous);
+      if (next) emitItem(next);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    subscribeItem(id, listener) {
+      const set = itemListeners.get(id) ?? /* @__PURE__ */ new Set();
+      set.add(listener);
+      itemListeners.set(id, set);
+      return () => {
+        set.delete(listener);
+        if (set.size === 0) itemListeners.delete(id);
+      };
+    }
+  };
+}
+function moveActiveId(orderedIds, activeId, direction) {
+  if (orderedIds.length === 0) return null;
+  const currentIndex = activeId ? orderedIds.indexOf(activeId) : -1;
+  switch (direction) {
+    case "first":
+      return orderedIds[0] ?? null;
+    case "last":
+      return orderedIds[orderedIds.length - 1] ?? null;
+    case "next": {
+      if (currentIndex < 0) return orderedIds[0] ?? null;
+      return orderedIds[Math.min(currentIndex + 1, orderedIds.length - 1)] ?? null;
+    }
+    case "prev": {
+      if (currentIndex < 0) return orderedIds[orderedIds.length - 1] ?? null;
+      return orderedIds[Math.max(currentIndex - 1, 0)] ?? null;
+    }
+  }
+}
+function defaultComboboxFilter(items, inputValue) {
+  const query = inputValue.trim().toLowerCase();
+  if (!query) return [...items];
+  return items.filter((item) => item.label.toLowerCase().includes(query));
+}
+export {
+  createComboboxActiveStore,
+  defaultComboboxFilter,
+  moveActiveId
+};
+//# sourceMappingURL=combobox-store.js.map