@zag-js/combobox 1.34.0 → 1.35.0

package/dist/combobox.connect.mjs

@@ -0,0 +1,429 @@
+// src/combobox.connect.ts
+import {
+  ariaAttr,
+  dataAttr,
+  getEventKey,
+  isAnchorElement,
+  isComposingEvent,
+  isContextMenuEvent,
+  isDownloadingEvent,
+  isLeftClick,
+  isOpeningInNewTab
+} from "@zag-js/dom-query";
+import { getPlacementStyles } from "@zag-js/popper";
+import { ensure } from "@zag-js/utils";
+import { parts } from "./combobox.anatomy.mjs";
+import * as dom from "./combobox.dom.mjs";
+function connect(service, normalize) {
+  const { context, prop, state, send, scope, computed, event } = service;
+  const translations = prop("translations");
+  const collection = prop("collection");
+  const disabled = !!prop("disabled");
+  const interactive = computed("isInteractive");
+  const invalid = !!prop("invalid");
+  const required = !!prop("required");
+  const readOnly = !!prop("readOnly");
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
+  const composite = prop("composite");
+  const highlightedValue = context.get("highlightedValue");
+  const popperStyles = getPlacementStyles({
+    ...prop("positioning"),
+    placement: context.get("currentPlacement")
+  });
+  function getItemState(props) {
+    const itemDisabled = collection.getItemDisabled(props.item);
+    const value = collection.getItemValue(props.item);
+    ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props.item)}`);
+    return {
+      value,
+      disabled: Boolean(disabled || itemDisabled),
+      highlighted: highlightedValue === value,
+      selected: context.get("value").includes(value)
+    };
+  }
+  return {
+    focused,
+    open,
+    inputValue: context.get("inputValue"),
+    highlightedValue,
+    highlightedItem: context.get("highlightedItem"),
+    value: context.get("value"),
+    valueAsString: computed("valueAsString"),
+    hasSelectedItems: computed("hasSelectedItems"),
+    selectedItems: context.get("selectedItems"),
+    collection: prop("collection"),
+    multiple: !!prop("multiple"),
+    disabled: !!disabled,
+    syncSelectedItems() {
+      send({ type: "SELECTED_ITEMS.SYNC" });
+    },
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options });
+    },
+    setHighlightValue(value) {
+      send({ type: "HIGHLIGHTED_VALUE.SET", value });
+    },
+    clearHighlightValue() {
+      send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+    },
+    selectValue(value) {
+      send({ type: "ITEM.SELECT", value });
+    },
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    setInputValue(value, reason = "script") {
+      send({ type: "INPUT_VALUE.SET", value, src: reason });
+    },
+    clearValue(value) {
+      if (value != null) {
+        send({ type: "ITEM.CLEAR", value });
+      } else {
+        send({ type: "VALUE.CLEAR" });
+      }
+    },
+    focus() {
+      dom.getInputEl(scope)?.focus();
+    },
+    setOpen(nextOpen, reason = "script") {
+      const open2 = state.hasTag("open");
+      if (open2 === nextOpen) return;
+      send({ type: nextOpen ? "OPEN" : "CLOSE", src: reason });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        id: dom.getRootId(scope),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: prop("dir"),
+        htmlFor: dom.getInputId(scope),
+        id: dom.getLabelId(scope),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-required": dataAttr(required),
+        "data-focus": dataAttr(focused),
+        onClick(event2) {
+          if (composite) return;
+          event2.preventDefault();
+          dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: prop("dir"),
+        id: dom.getControlId(scope),
+        "data-state": open ? "open" : "closed",
+        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid)
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: prop("dir"),
+        id: dom.getPositionerId(scope),
+        style: popperStyles.floating
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        dir: prop("dir"),
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        "data-autofocus": dataAttr(prop("autoFocus")),
+        name: prop("name"),
+        form: prop("form"),
+        disabled,
+        required: prop("required"),
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "none",
+        spellCheck: "false",
+        readOnly,
+        placeholder: prop("placeholder"),
+        id: dom.getInputId(scope),
+        type: "text",
+        role: "combobox",
+        defaultValue: context.get("inputValue"),
+        "aria-autocomplete": computed("autoComplete") ? "both" : "list",
+        "aria-controls": dom.getContentId(scope),
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-activedescendant": highlightedValue ? dom.getItemId(scope, highlightedValue) : void 0,
+        onClick(event2) {
+          if (event2.defaultPrevented) return;
+          if (!prop("openOnClick")) return;
+          if (!interactive) return;
+          send({ type: "INPUT.CLICK", src: "input-click" });
+        },
+        onFocus() {
+          if (disabled) return;
+          send({ type: "INPUT.FOCUS" });
+        },
+        onBlur() {
+          if (disabled) return;
+          send({ type: "INPUT.BLUR" });
+        },
+        onChange(event2) {
+          send({ type: "INPUT.CHANGE", value: event2.currentTarget.value, src: "input-change" });
+        },
+        onKeyDown(event2) {
+          if (event2.defaultPrevented) return;
+          if (!interactive) return;
+          if (event2.ctrlKey || event2.shiftKey || isComposingEvent(event2)) return;
+          const openOnKeyPress = prop("openOnKeyPress");
+          const isModifierKey = event2.ctrlKey || event2.metaKey || event2.shiftKey;
+          const keypress = true;
+          const keymap = {
+            ArrowDown(event3) {
+              if (!openOnKeyPress && !open) return;
+              send({ type: event3.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress, src: "arrow-key" });
+              event3.preventDefault();
+            },
+            ArrowUp() {
+              if (!openOnKeyPress && !open) return;
+              send({ type: event2.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress, src: "arrow-key" });
+              event2.preventDefault();
+            },
+            Home(event3) {
+              if (isModifierKey) return;
+              send({ type: "INPUT.HOME", keypress });
+              if (open) {
+                event3.preventDefault();
+              }
+            },
+            End(event3) {
+              if (isModifierKey) return;
+              send({ type: "INPUT.END", keypress });
+              if (open) {
+                event3.preventDefault();
+              }
+            },
+            Enter(event3) {
+              send({ type: "INPUT.ENTER", keypress, src: "item-select" });
+              const submittable = computed("isCustomValue") && prop("allowCustomValue");
+              const hasHighlight = highlightedValue != null;
+              const alwaysSubmit = prop("alwaysSubmitOnEnter");
+              if (open && !submittable && !alwaysSubmit && hasHighlight) {
+                event3.preventDefault();
+              }
+              if (highlightedValue == null) return;
+              const itemEl = dom.getItemEl(scope, highlightedValue);
+              if (isAnchorElement(itemEl)) {
+                prop("navigate")?.({ value: highlightedValue, node: itemEl, href: itemEl.href });
+              }
+            },
+            Escape() {
+              send({ type: "INPUT.ESCAPE", keypress, src: "escape-key" });
+              event2.preventDefault();
+            }
+          };
+          const key = getEventKey(event2, { dir: prop("dir") });
+          const exec = keymap[key];
+          exec?.(event2);
+        }
+      });
+    },
+    getTriggerProps(props = {}) {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        dir: prop("dir"),
+        id: dom.getTriggerId(scope),
+        "aria-haspopup": composite ? "listbox" : "dialog",
+        type: "button",
+        tabIndex: props.focusable ? void 0 : -1,
+        "aria-label": translations.triggerLabel,
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": open ? dom.getContentId(scope) : void 0,
+        disabled,
+        "data-invalid": dataAttr(invalid),
+        "data-focusable": dataAttr(props.focusable),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        onFocus() {
+          if (!props.focusable) return;
+          send({ type: "INPUT.FOCUS", src: "trigger" });
+        },
+        onClick(event2) {
+          if (event2.defaultPrevented) return;
+          if (!interactive) return;
+          if (!isLeftClick(event2)) return;
+          send({ type: "TRIGGER.CLICK", src: "trigger-click" });
+        },
+        onPointerDown(event2) {
+          if (!interactive) return;
+          if (event2.pointerType === "touch") return;
+          if (!isLeftClick(event2)) return;
+          event2.preventDefault();
+          queueMicrotask(() => {
+            dom.focusInputEl(scope);
+          });
+        },
+        onKeyDown(event2) {
+          if (event2.defaultPrevented) return;
+          if (composite) return;
+          const keyMap = {
+            ArrowDown() {
+              send({ type: "INPUT.ARROW_DOWN", src: "arrow-key" });
+            },
+            ArrowUp() {
+              send({ type: "INPUT.ARROW_UP", src: "arrow-key" });
+            }
+          };
+          const key = getEventKey(event2, { dir: prop("dir") });
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event2);
+            event2.preventDefault();
+          }
+        }
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: prop("dir"),
+        id: dom.getContentId(scope),
+        role: !composite ? "dialog" : "listbox",
+        tabIndex: -1,
+        hidden: !open,
+        "data-state": open ? "open" : "closed",
+        "data-placement": context.get("currentPlacement"),
+        "aria-labelledby": dom.getLabelId(scope),
+        "aria-multiselectable": prop("multiple") && composite ? true : void 0,
+        "data-empty": dataAttr(collection.size === 0),
+        onPointerDown(event2) {
+          if (!isLeftClick(event2)) return;
+          event2.preventDefault();
+        }
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        role: !composite ? "listbox" : void 0,
+        "data-empty": dataAttr(collection.size === 0),
+        "aria-labelledby": dom.getLabelId(scope),
+        "aria-multiselectable": prop("multiple") && !composite ? true : void 0
+      });
+    },
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getClearTriggerId(scope),
+        type: "button",
+        tabIndex: -1,
+        disabled,
+        "data-invalid": dataAttr(invalid),
+        "aria-label": translations.clearTriggerLabel,
+        "aria-controls": dom.getInputId(scope),
+        hidden: !context.get("value").length,
+        onPointerDown(event2) {
+          if (!isLeftClick(event2)) return;
+          event2.preventDefault();
+        },
+        onClick(event2) {
+          if (event2.defaultPrevented) return;
+          if (!interactive) return;
+          send({ type: "VALUE.CLEAR", src: "clear-trigger" });
+        }
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const value = itemState.value;
+      return normalize.element({
+        ...parts.item.attrs,
+        dir: prop("dir"),
+        id: dom.getItemId(scope, value),
+        role: "option",
+        tabIndex: -1,
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "aria-selected": ariaAttr(itemState.selected),
+        "aria-disabled": ariaAttr(itemState.disabled),
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-value": itemState.value,
+        onPointerMove() {
+          if (itemState.disabled) return;
+          if (itemState.highlighted) return;
+          send({ type: "ITEM.POINTER_MOVE", value });
+        },
+        onPointerLeave() {
+          if (props.persistFocus) return;
+          if (itemState.disabled) return;
+          const prev = event.previous();
+          const mouseMoved = prev?.type.includes("POINTER");
+          if (!mouseMoved) return;
+          send({ type: "ITEM.POINTER_LEAVE", value });
+        },
+        onClick(event2) {
+          if (isDownloadingEvent(event2)) return;
+          if (isOpeningInNewTab(event2)) return;
+          if (isContextMenuEvent(event2)) return;
+          if (itemState.disabled) return;
+          send({ type: "ITEM.CLICK", src: "item-select", value });
+        }
+      });
+    },
+    getItemTextProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemText.attrs,
+        dir: prop("dir"),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted)
+      });
+    },
+    getItemIndicatorProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        "aria-hidden": true,
+        ...parts.itemIndicator.attrs,
+        dir: prop("dir"),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        hidden: !itemState.selected
+      });
+    },
+    getItemGroupProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.itemGroup.attrs,
+        dir: prop("dir"),
+        id: dom.getItemGroupId(scope, id),
+        "aria-labelledby": dom.getItemGroupLabelId(scope, id),
+        "data-empty": dataAttr(collection.size === 0),
+        role: "group"
+      });
+    },
+    getItemGroupLabelProps(props) {
+      const { htmlFor } = props;
+      return normalize.element({
+        ...parts.itemGroupLabel.attrs,
+        dir: prop("dir"),
+        id: dom.getItemGroupLabelId(scope, htmlFor),
+        role: "presentation"
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/combobox.dom.d.mts

@@ -0,0 +1,24 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope) => any;
+declare const getContentId: (ctx: Scope) => any;
+declare const getPositionerId: (ctx: Scope) => any;
+declare const getTriggerId: (ctx: Scope) => any;
+declare const getClearTriggerId: (ctx: Scope) => any;
+declare const getItemGroupId: (ctx: Scope, id: string | number) => any;
+declare const getItemGroupLabelId: (ctx: Scope, id: string | number) => any;
+declare const getItemId: (ctx: Scope, id: string) => any;
+declare const getContentEl: (ctx: Scope) => HTMLElement | null;
+declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const getPositionerEl: (ctx: Scope) => HTMLElement | null;
+declare const getControlEl: (ctx: Scope) => HTMLElement | null;
+declare const getTriggerEl: (ctx: Scope) => HTMLElement | null;
+declare const getClearTriggerEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemEl: (ctx: Scope, value: string | null) => HTMLElement | null;
+declare const focusInputEl: (ctx: Scope) => void;
+declare const focusTriggerEl: (ctx: Scope) => void;
+
+export { focusInputEl, focusTriggerEl, getClearTriggerEl, getClearTriggerId, getContentEl, getContentId, getControlEl, getControlId, getInputEl, getInputId, getItemEl, getItemGroupId, getItemGroupLabelId, getItemId, getLabelId, getPositionerEl, getPositionerId, getRootId, getTriggerEl, getTriggerId };

package/dist/combobox.dom.d.ts

@@ -0,0 +1,24 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope) => any;
+declare const getContentId: (ctx: Scope) => any;
+declare const getPositionerId: (ctx: Scope) => any;
+declare const getTriggerId: (ctx: Scope) => any;
+declare const getClearTriggerId: (ctx: Scope) => any;
+declare const getItemGroupId: (ctx: Scope, id: string | number) => any;
+declare const getItemGroupLabelId: (ctx: Scope, id: string | number) => any;
+declare const getItemId: (ctx: Scope, id: string) => any;
+declare const getContentEl: (ctx: Scope) => HTMLElement | null;
+declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const getPositionerEl: (ctx: Scope) => HTMLElement | null;
+declare const getControlEl: (ctx: Scope) => HTMLElement | null;
+declare const getTriggerEl: (ctx: Scope) => HTMLElement | null;
+declare const getClearTriggerEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemEl: (ctx: Scope, value: string | null) => HTMLElement | null;
+declare const focusInputEl: (ctx: Scope) => void;
+declare const focusTriggerEl: (ctx: Scope) => void;
+
+export { focusInputEl, focusTriggerEl, getClearTriggerEl, getClearTriggerId, getContentEl, getContentId, getControlEl, getControlId, getInputEl, getInputId, getItemEl, getItemGroupId, getItemGroupLabelId, getItemId, getLabelId, getPositionerEl, getPositionerId, getRootId, getTriggerEl, getTriggerId };

package/dist/combobox.dom.js

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/combobox.dom.ts
+var combobox_dom_exports = {};
+__export(combobox_dom_exports, {
+  focusInputEl: () => focusInputEl,
+  focusTriggerEl: () => focusTriggerEl,
+  getClearTriggerEl: () => getClearTriggerEl,
+  getClearTriggerId: () => getClearTriggerId,
+  getContentEl: () => getContentEl,
+  getContentId: () => getContentId,
+  getControlEl: () => getControlEl,
+  getControlId: () => getControlId,
+  getInputEl: () => getInputEl,
+  getInputId: () => getInputId,
+  getItemEl: () => getItemEl,
+  getItemGroupId: () => getItemGroupId,
+  getItemGroupLabelId: () => getItemGroupLabelId,
+  getItemId: () => getItemId,
+  getLabelId: () => getLabelId,
+  getPositionerEl: () => getPositionerEl,
+  getPositionerId: () => getPositionerId,
+  getRootId: () => getRootId,
+  getTriggerEl: () => getTriggerEl,
+  getTriggerId: () => getTriggerId
+});
+module.exports = __toCommonJS(combobox_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var getRootId = (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`;
+var getInputId = (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`;
+var getContentId = (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`;
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`;
+var getClearTriggerId = (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`;
+var getItemGroupId = (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`;
+var getItemGroupLabelId = (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`;
+var getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `combobox:${ctx.id}:option:${id}`;
+var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+var getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
+var getItemEl = (ctx, value) => {
+  if (value == null) return null;
+  const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
+  return (0, import_dom_query.query)(getContentEl(ctx), selector);
+};
+var focusInputEl = (ctx) => {
+  const inputEl = getInputEl(ctx);
+  if (!ctx.isActiveElement(inputEl)) {
+    inputEl?.focus({ preventScroll: true });
+  }
+  (0, import_dom_query.setCaretToEnd)(inputEl);
+};
+var focusTriggerEl = (ctx) => {
+  const triggerEl = getTriggerEl(ctx);
+  if (ctx.isActiveElement(triggerEl)) return;
+  triggerEl?.focus({ preventScroll: true });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  focusInputEl,
+  focusTriggerEl,
+  getClearTriggerEl,
+  getClearTriggerId,
+  getContentEl,
+  getContentId,
+  getControlEl,
+  getControlId,
+  getInputEl,
+  getInputId,
+  getItemEl,
+  getItemGroupId,
+  getItemGroupLabelId,
+  getItemId,
+  getLabelId,
+  getPositionerEl,
+  getPositionerId,
+  getRootId,
+  getTriggerEl,
+  getTriggerId
+});

package/dist/combobox.dom.mjs

@@ -0,0 +1,58 @@
+// src/combobox.dom.ts
+import { query, setCaretToEnd } from "@zag-js/dom-query";
+var getRootId = (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`;
+var getInputId = (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`;
+var getContentId = (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`;
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`;
+var getClearTriggerId = (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`;
+var getItemGroupId = (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`;
+var getItemGroupLabelId = (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`;
+var getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `combobox:${ctx.id}:option:${id}`;
+var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+var getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
+var getItemEl = (ctx, value) => {
+  if (value == null) return null;
+  const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
+  return query(getContentEl(ctx), selector);
+};
+var focusInputEl = (ctx) => {
+  const inputEl = getInputEl(ctx);
+  if (!ctx.isActiveElement(inputEl)) {
+    inputEl?.focus({ preventScroll: true });
+  }
+  setCaretToEnd(inputEl);
+};
+var focusTriggerEl = (ctx) => {
+  const triggerEl = getTriggerEl(ctx);
+  if (ctx.isActiveElement(triggerEl)) return;
+  triggerEl?.focus({ preventScroll: true });
+};
+export {
+  focusInputEl,
+  focusTriggerEl,
+  getClearTriggerEl,
+  getClearTriggerId,
+  getContentEl,
+  getContentId,
+  getControlEl,
+  getControlId,
+  getInputEl,
+  getInputId,
+  getItemEl,
+  getItemGroupId,
+  getItemGroupLabelId,
+  getItemId,
+  getLabelId,
+  getPositionerEl,
+  getPositionerId,
+  getRootId,
+  getTriggerEl,
+  getTriggerId
+};

package/dist/combobox.machine.d.mts

@@ -0,0 +1,10 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ComboboxSchema } from './combobox.types.mjs';
+import '@zag-js/collection';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
+
+export { machine };

package/dist/combobox.machine.d.ts

@@ -0,0 +1,10 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ComboboxSchema } from './combobox.types.js';
+import '@zag-js/collection';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
+
+export { machine };