@arun-dev/headless 4.6.0 → 4.8.0

package/dist/combobox/index.js

@@ -0,0 +1,873 @@
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
+import {
+  anchorNameFor,
+  anchoredDataAttributes,
+  anchoredPopupStyle
+} from "../chunk-HCOCPQXS.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/combobox/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Chip: () => ComboboxChip,
+  ChipRemove: () => ComboboxChipRemove,
+  Clear: () => ComboboxClear,
+  Empty: () => ComboboxEmpty,
+  Input: () => ComboboxInput,
+  Item: () => ComboboxItem,
+  List: () => ComboboxList,
+  Popup: () => ComboboxPopup,
+  Root: () => ComboboxRoot,
+  Status: () => ComboboxStatus,
+  Trigger: () => ComboboxTrigger
+});
+
+// src/combobox/ComboboxRoot.tsx
+import { useCallback, useDeferredValue, useEffect, useId, useMemo, useRef, useState } from "react";
+
+// src/combobox/defaultFilter.ts
+function fold(text) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
+}
+function defaultFilter(items, query, itemToString) {
+  const needle = fold(query.trim());
+  if (needle === "") return [...items];
+  return items.filter((item) => fold(itemToString(item)).includes(needle));
+}
+
+// src/combobox/ComboboxRootContext.ts
+import { createContext, useContext } from "react";
+function createHighlightStore() {
+  let current = { index: -1, reason: "none" };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => current,
+    set(next) {
+      if (next.index === current.index && next.reason === current.reason) return;
+      current = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var ComboboxRootContext = createContext(null);
+function useComboboxRootContext(part) {
+  const context = useContext(ComboboxRootContext);
+  if (context === null) {
+    throw new Error(`<Combobox.${part}> must be rendered inside <Combobox.Root>.`);
+  }
+  return context;
+}
+
+// src/combobox/ComboboxRoot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function defaultItemToString(item) {
+  if (typeof item === "string") return item;
+  if (item !== null && typeof item === "object" && "label" in item) return String(item.label);
+  return String(item);
+}
+function ComboboxRoot({
+  items,
+  itemToString: itemToStringProp,
+  itemToKey: itemToKeyProp,
+  filter,
+  multiple: multipleProp,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  inputValue: inputValueProp,
+  defaultInputValue,
+  onInputValueChange,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  onItemHighlighted,
+  onLoadMore,
+  loading = false,
+  disabled = false,
+  name,
+  form,
+  children
+}) {
+  const multiple = multipleProp === true;
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? itemToString;
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? (multiple ? [] : null),
+    name: "Combobox.Root",
+    state: "value"
+  });
+  const selectedItems = useMemo(
+    () => multiple ? value : value == null ? [] : [value],
+    [multiple, value]
+  );
+  const selectedKeys = useMemo(
+    () => new Set(selectedItems.map((item) => itemToKey(item))),
+    [selectedItems, itemToKey]
+  );
+  const selectedLabel = !multiple && selectedItems[0] != null ? itemToString(selectedItems[0]) : "";
+  const [inputValue, setInputValueState] = useControlled({
+    controlled: inputValueProp,
+    default: defaultInputValue ?? selectedLabel,
+    name: "Combobox.Root",
+    state: "inputValue"
+  });
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Combobox.Root",
+    state: "open"
+  });
+  const query = !multiple && inputValue === selectedLabel ? "" : inputValue;
+  const deferredQuery = useDeferredValue(query);
+  const filteredItems = useMemo(() => {
+    if (filter === null) return items;
+    const run = filter ?? defaultFilter;
+    return run(items, deferredQuery, itemToString);
+  }, [items, filter, deferredQuery, itemToString]);
+  const indexByKey = useMemo(
+    () => new Map(filteredItems.map((item, index) => [itemToKey(item), index])),
+    [filteredItems, itemToKey]
+  );
+  const [highlight] = useState(createHighlightStore);
+  const setHighlight = useCallback(
+    (index, reason) => {
+      if (highlight.get().index === index && highlight.get().reason === reason) return;
+      highlight.set({ index, reason });
+      onItemHighlighted?.(filteredItems[index], { index, reason });
+    },
+    [highlight, filteredItems, onItemHighlighted]
+  );
+  useEffect(() => {
+    if (highlight.get().index !== -1) setHighlight(-1, "none");
+  }, [filteredItems]);
+  const setValue = useCallback(
+    (next, reason) => {
+      setValueState(next);
+      onValueChange?.(next, {
+        reason
+      });
+    },
+    [setValueState, onValueChange]
+  );
+  const setInputValue = useCallback(
+    (next, reason) => {
+      if (next === inputValue) return;
+      setInputValueState(next);
+      onInputValueChange?.(next, { reason });
+    },
+    [inputValue, setInputValueState, onInputValueChange]
+  );
+  const setOpen = useCallback(
+    (next, reason) => {
+      if (next === open) return;
+      setOpenState(next);
+      onOpenChange?.(next, { reason });
+      if (!next) setHighlight(-1, "none");
+    },
+    [open, setOpenState, onOpenChange, setHighlight]
+  );
+  const close = useCallback(
+    (reason) => {
+      setOpen(false, reason);
+      setInputValue(selectedLabel, reason);
+    },
+    [setOpen, setInputValue, selectedLabel]
+  );
+  const select = useCallback(
+    (item) => {
+      const key = itemToKey(item);
+      if (multiple) {
+        const current = value;
+        setValue(
+          selectedKeys.has(key) ? current.filter((i) => itemToKey(i) !== key) : [...current, item],
+          "item-press"
+        );
+        setInputValue("", "item-press");
+      } else {
+        if (!selectedKeys.has(key)) setValue(item, "item-press");
+        setInputValue(itemToString(item), "item-press");
+      }
+      setOpen(false, "item-press");
+    },
+    [multiple, value, selectedKeys, itemToKey, itemToString, setValue, setInputValue, setOpen]
+  );
+  const remove = useCallback(
+    (item, reason) => {
+      if (!multiple) return;
+      const key = itemToKey(item);
+      setValue(
+        value.filter((i) => itemToKey(i) !== key),
+        reason
+      );
+    },
+    [multiple, value, itemToKey, setValue]
+  );
+  const clearSelection = useCallback(
+    (reason) => setValue(multiple ? [] : null, reason),
+    [multiple, setValue]
+  );
+  const clear = useCallback(() => {
+    setInputValue("", "clear");
+    clearSelection("clear");
+    setHighlight(-1, "none");
+  }, [setInputValue, clearSelection, setHighlight]);
+  const selectedKey = !multiple && selectedItems[0] != null ? itemToKey(selectedItems[0]) : null;
+  const lastSelectedKeyRef = useRef(selectedKey);
+  useEffect(() => {
+    if (lastSelectedKeyRef.current === selectedKey) return;
+    lastSelectedKeyRef.current = selectedKey;
+    setInputValueState(selectedLabel);
+  }, [selectedKey]);
+  const [chips, setChips] = useState([]);
+  const registerChip = useCallback((entry) => {
+    setChips((current) => [...current, entry].sort(byDocumentOrder));
+    return () => setChips((current) => current.filter((c) => c !== entry));
+  }, []);
+  const [disabledKeys] = useState(() => /* @__PURE__ */ new Set());
+  const [insideRefs] = useState(() => /* @__PURE__ */ new Set());
+  const registerInside = useCallback(
+    (ref) => {
+      insideRefs.add(ref);
+      return () => {
+        insideRefs.delete(ref);
+      };
+    },
+    [insideRefs]
+  );
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+  const { current: initial } = useRef({ value, inputValue });
+  useEffect(() => {
+    const owner = inputRef.current?.form;
+    if (!owner) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (value !== initial.value) setValue(initial.value, "form-reset");
+        setInputValue(initial.inputValue, "form-reset");
+      });
+    }
+    owner.addEventListener("reset", onReset);
+    return () => owner.removeEventListener("reset", onReset);
+  }, [value, initial, setValue, setInputValue]);
+  const isInside = useCallback(
+    (node) => [inputRef, popupRef, ...insideRefs, ...chips.map((chip) => chip.ref)].some(
+      (ref) => ref.current?.contains(node) ?? false
+    ),
+    [insideRefs, chips]
+  );
+  const id = useId();
+  const context = useMemo(
+    () => ({
+      open,
+      multiple,
+      disabled,
+      inputValue,
+      loading,
+      filteredItems,
+      itemToString,
+      itemToKey,
+      indexByKey,
+      selectedKeys,
+      selectedItems,
+      disabledKeys,
+      highlight,
+      setHighlight,
+      setOpen,
+      setInputValue,
+      select,
+      remove,
+      clearSelection,
+      clear,
+      close,
+      registerChip,
+      chips,
+      registerInside,
+      isInside,
+      onLoadMore,
+      inputId: `${id}-input`,
+      listId: `${id}-list`,
+      optionId: (index) => `${id}-option-${index}`,
+      anchorName: anchorNameFor(id),
+      inputRef,
+      popupRef
+    }),
+    [
+      open,
+      multiple,
+      disabled,
+      inputValue,
+      loading,
+      filteredItems,
+      itemToString,
+      itemToKey,
+      indexByKey,
+      selectedKeys,
+      selectedItems,
+      disabledKeys,
+      highlight,
+      setHighlight,
+      setOpen,
+      setInputValue,
+      select,
+      remove,
+      clearSelection,
+      clear,
+      close,
+      registerChip,
+      chips,
+      registerInside,
+      isInside,
+      onLoadMore,
+      id
+    ]
+  );
+  return /* @__PURE__ */ jsxs(ComboboxRootContext.Provider, { value: context, children: [
+    children,
+    name !== void 0 && (multiple ? selectedItems : [selectedItems[0] ?? null]).map((item, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name,
+        form,
+        disabled,
+        value: item === null ? "" : itemToKey(item)
+      },
+      item === null ? index : itemToKey(item)
+    ))
+  ] });
+}
+
+// src/combobox/ComboboxInput.tsx
+import { useSyncExternalStore } from "react";
+
+// src/combobox/comboboxDataAttributes.ts
+function comboboxDataAttributes({ open, disabled }) {
+  return {
+    "data-open": open ? "" : void 0,
+    "data-closed": open ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+function comboboxItemDataAttributes({
+  selected,
+  highlighted,
+  disabled
+}) {
+  return {
+    "data-selected": selected ? "" : void 0,
+    "data-highlighted": highlighted ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+function comboboxClearDataAttributes(visible) {
+  return { "data-visible": visible ? "" : void 0 };
+}
+
+// src/combobox/ComboboxInput.tsx
+function ComboboxInput({ className, render, ...rest }) {
+  const {
+    open,
+    multiple,
+    disabled,
+    inputValue,
+    filteredItems,
+    itemToKey,
+    selectedItems,
+    selectedKeys,
+    disabledKeys,
+    highlight,
+    setHighlight,
+    setOpen,
+    setInputValue,
+    select,
+    remove,
+    clearSelection,
+    close,
+    chips,
+    inputId,
+    listId,
+    optionId,
+    anchorName,
+    inputRef,
+    popupRef
+  } = useComboboxRootContext("Input");
+  const highlighted = useSyncExternalStore(
+    highlight.subscribe,
+    () => highlight.get().index,
+    () => -1
+  );
+  function enabledIndices() {
+    const indices = [];
+    filteredItems.forEach((item, index) => {
+      if (!disabledKeys.has(itemToKey(item))) indices.push(index);
+    });
+    return indices;
+  }
+  function openingIndex(key, enabled) {
+    if (!multiple && selectedItems[0] != null) {
+      const selected = enabled.find((i) => selectedKeys.has(itemToKey(filteredItems[i])));
+      if (selected !== void 0) return selected;
+    }
+    return (key === "ArrowDown" ? enabled[0] : enabled.at(-1)) ?? -1;
+  }
+  function moveHighlight(key) {
+    const enabled = enabledIndices();
+    const next = rovingIndex(key, {
+      count: enabled.length,
+      current: enabled.indexOf(highlighted),
+      orientation: "vertical",
+      rtl: false
+    });
+    if (next !== null) setHighlight(enabled[next] ?? -1, "keyboard");
+  }
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      id: inputId,
+      type: "text",
+      role: "combobox",
+      autoComplete: "off",
+      "aria-autocomplete": "list",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-activedescendant": open && highlighted >= 0 ? optionId(highlighted) : void 0,
+      disabled: disabled || void 0,
+      value: inputValue,
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: { anchorName },
+      className,
+      ref: inputRef,
+      onChange(event) {
+        const text = event.target.value;
+        setInputValue(text, "input");
+        if (!multiple && text === "" && selectedItems.length > 0) clearSelection("input");
+        setOpen(true, "input");
+      },
+      onClick() {
+        if (!disabled) setOpen(true, "input-press");
+      },
+      onKeyDown(event) {
+        const { key } = event;
+        if (key === "ArrowDown" || key === "ArrowUp") {
+          event.preventDefault();
+          if (!open) {
+            setOpen(true, "keyboard");
+            if (!event.altKey) setHighlight(openingIndex(key, enabledIndices()), "keyboard");
+            return;
+          }
+          moveHighlight(key);
+          return;
+        }
+        if ((key === "Home" || key === "End") && open) {
+          event.preventDefault();
+          moveHighlight(key);
+          return;
+        }
+        if (key === "Enter") {
+          if (!open || highlighted < 0) return;
+          event.preventDefault();
+          const item = filteredItems[highlighted];
+          if (!disabledKeys.has(itemToKey(item))) select(item);
+          return;
+        }
+        if (key === "Escape") {
+          if (!open) return;
+          event.preventDefault();
+          close("escape");
+          return;
+        }
+        if (!multiple) return;
+        if (key === "Backspace" && inputValue === "" && selectedItems.length > 0) {
+          remove(selectedItems.at(-1), "chip-remove");
+          return;
+        }
+        const input = event.currentTarget;
+        if (key === "ArrowLeft" && chips.length > 0 && input.selectionStart === 0 && input.selectionEnd === 0) {
+          event.preventDefault();
+          chips.at(-1)?.ref.current?.focus();
+        }
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (next && popupRef.current?.contains(next)) return;
+        if (next && chips.some((chip) => chip.ref.current === next)) {
+          setOpen(false, "blur");
+          return;
+        }
+        close("blur");
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxTrigger.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+function ComboboxTrigger({ className, children, render, ...rest }) {
+  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+  const elementRef = useRef2(null);
+  useLayoutEffect(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      "aria-expanded": open,
+      "aria-controls": listId,
+      disabled: disabled || void 0,
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (open) close("trigger-press");
+        else setOpen(true, "trigger-press");
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxClear.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+function ComboboxClear({ className, children, render, ...rest }) {
+  const { disabled, selectedItems, clear, inputRef, registerInside } = useComboboxRootContext("Clear");
+  const elementRef = useRef3(null);
+  useLayoutEffect2(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled || void 0,
+      ...comboboxClearDataAttributes(selectedItems.length > 0),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (disabled) return;
+        clear();
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxPopup.tsx
+import { useEffect as useEffect2, useReducer } from "react";
+function ComboboxPopup({
+  side = "bottom",
+  align = "start",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { open, multiple, disabled, setOpen, close, isInside, anchorName, inputRef, popupRef } = useComboboxRootContext("Popup");
+  useEffect2(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (event.target instanceof Node && isInside(event.target)) return;
+      close("outside-press");
+    }
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, isInside, close]);
+  const [, resync] = useReducer((n) => n + 1, 0);
+  useEffect2(() => {
+    const popup = popupRef.current;
+    if (!popup || typeof popup.showPopover !== "function") return;
+    const shown = popup.matches(":popover-open");
+    if (open && !shown) {
+      popup.showPopover({ source: inputRef.current ?? void 0 });
+      if (!popup.matches(":popover-open")) setOpen(false, "outside-press");
+    } else if (!open && shown) {
+      popup.hidePopover();
+    }
+  });
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      popover: "manual",
+      ...anchoredDataAttributes(side, align),
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: anchoredPopupStyle(anchorName, side, align),
+      className,
+      children,
+      ref: popupRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onToggle(event) {
+        if (event.target !== event.currentTarget) return;
+        if (event.nativeEvent.newState !== "closed") return;
+        close("outside-press");
+        resync();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxList.tsx
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ComboboxList({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { multiple, loading, filteredItems, onLoadMore, listId } = useComboboxRootContext("List");
+  const content = typeof children === "function" ? filteredItems.map((item, index) => children(item, index)) : children;
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      id: listId,
+      role: "listbox",
+      "aria-multiselectable": multiple || void 0,
+      "aria-busy": loading || void 0,
+      className,
+      children: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        content,
+        onLoadMore && /* @__PURE__ */ jsx2(LoadMoreSentinel, {})
+      ] })
+    },
+    consumerProps: rest
+  });
+}
+function LoadMoreSentinel() {
+  const { open, loading, filteredItems, onLoadMore } = useComboboxRootContext("List");
+  const ref = useRef4(null);
+  const onLoadMoreRef = useRef4(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
+  useEffect3(() => {
+    const element = ref.current;
+    if (!element || !open || loading || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) onLoadMoreRef.current?.();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [open, loading, filteredItems.length]);
+  return /* @__PURE__ */ jsx2("div", { ref, "aria-hidden": "true", "data-load-more": "", style: { blockSize: 1 } });
+}
+
+// src/combobox/ComboboxItem.tsx
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function ComboboxItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    indexByKey,
+    selectedKeys,
+    disabledKeys,
+    highlight,
+    setHighlight,
+    select,
+    optionId
+  } = useComboboxRootContext("Item");
+  const key = itemToKey(value);
+  const index = indexByKey.get(key) ?? -1;
+  const selected = selectedKeys.has(key);
+  const highlighted = useSyncExternalStore2(
+    highlight.subscribe,
+    () => index >= 0 && highlight.get().index === index,
+    () => false
+  );
+  const elementRef = useRef5(null);
+  useLayoutEffect3(() => {
+    if (!disabled) return;
+    disabledKeys.add(key);
+    return () => {
+      disabledKeys.delete(key);
+    };
+  }, [disabled, disabledKeys, key]);
+  useEffect4(() => {
+    if (highlighted && highlight.get().reason === "keyboard") {
+      elementRef.current?.scrollIntoView?.({ block: "nearest" });
+    }
+  }, [highlighted, highlight]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      id: index >= 0 ? optionId(index) : void 0,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      ...comboboxItemDataAttributes({ selected, highlighted, disabled }),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onPointerMove() {
+        if (!disabled && !highlighted && index >= 0) setHighlight(index, "pointer");
+      },
+      onClick() {
+        if (!disabled) select(value);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxEmpty.tsx
+function ComboboxEmpty({ className, children, render, ...rest }) {
+  const { filteredItems, loading } = useComboboxRootContext("Empty");
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { className, children },
+    consumerProps: rest
+  });
+  return filteredItems.length === 0 && !loading ? element : null;
+}
+
+// src/combobox/ComboboxStatus.tsx
+function ComboboxStatus({ className, children, render, ...rest }) {
+  useComboboxRootContext("Status");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "status", "aria-live": "polite", "aria-atomic": true, className, children },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxChip.tsx
+import { createContext as createContext2, useContext as useContext2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef6 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ComboboxChipContext = createContext2(null);
+function useComboboxChipContext() {
+  const context = useContext2(ComboboxChipContext);
+  if (context === null) {
+    throw new Error("<Combobox.ChipRemove> must be rendered inside <Combobox.Chip>.");
+  }
+  return context;
+}
+function ComboboxChip({
+  value,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { disabled, itemToKey, remove, registerChip, chips, inputRef } = useComboboxRootContext("Chip");
+  const key = itemToKey(value);
+  const elementRef = useRef6(null);
+  useLayoutEffect4(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
+  const chipContext = useMemo2(() => ({ value }), [value]);
+  function focusAt(index) {
+    const chip = chips[index];
+    if (chip) chip.ref.current?.focus();
+    else inputRef.current?.focus();
+  }
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      tabIndex: -1,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children,
+      ref: elementRef,
+      onKeyDown(event) {
+        const index = chips.findIndex((chip) => chip.ref.current === elementRef.current);
+        switch (event.key) {
+          case "ArrowLeft":
+            event.preventDefault();
+            if (index > 0) focusAt(index - 1);
+            return;
+          case "ArrowRight":
+            event.preventDefault();
+            focusAt(index + 1);
+            return;
+          case "Backspace":
+          case "Delete":
+            event.preventDefault();
+            if (disabled) return;
+            remove(value, "chip-remove");
+            focusAt(index + 1 < chips.length ? index + 1 : chips.length);
+            return;
+          case "Escape":
+            inputRef.current?.focus();
+            return;
+        }
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx3(ComboboxChipContext.Provider, { value: chipContext, children: element });
+}
+
+// src/combobox/ComboboxChipRemove.tsx
+function ComboboxChipRemove({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { disabled, remove, inputRef } = useComboboxRootContext("ChipRemove");
+  const { value } = useComboboxChipContext();
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled || void 0,
+      className,
+      children,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (disabled) return;
+        remove(value, "chip-remove");
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as Combobox,
+  defaultFilter
+};