@glob-ui/combobox 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/combobox
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A text input with a filtered list: type to search, arrows to move, Enter to choose. The API mirrors Select.
+
+## Install
+
+```bash
+pnpm add @glob-ui/combobox
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Combobox](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/combobox.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** A second, muted line under the label. Searched too. */
+    description?: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    /** Selected option value, or `null` for none. */
+    value?: string | null;
+    defaultValue?: string | null;
+    /** Called with the selected value, or `null` when cleared. */
+    onChange?: (value: string | null) => void;
+    /** The text in the field. Pass it (with onInputChange) to search on a server. */
+    inputValue?: string;
+    onInputChange?: (text: string) => void;
+    /** Commit the typed text as the value when no option is active (Enter), or on blur. */
+    allowCustomValue?: boolean;
+    /** `false`: the consumer filters `options` itself. A function: `(option, query) => boolean`. Default: accent-insensitive word match on label, value and description. */
+    filter?: false | ((option: ComboboxOption, query: string) => boolean);
+    /** Shows a "Loading…" row with a spinner under the options, announced to screen readers. */
+    loading?: boolean;
+    /** Shown when nothing matches. Default "No results.". */
+    emptyMessage?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Submitted with native forms through a hidden input. */
+    name?: string;
+    /** Shows an X button while there is text. Default true. */
+    clearable?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    id?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+}
+/**
+ * An editable combobox (WAI-ARIA list autocomplete). Focus stays in the input; the active option is
+ * announced through aria-activedescendant.
+ */
+declare function Combobox({ options, value, defaultValue, onChange, inputValue, onInputChange, allowCustomValue, filter, loading, emptyMessage, placeholder, disabled, name, clearable, size, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** A second, muted line under the label. Searched too. */
+    description?: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    /** Selected option value, or `null` for none. */
+    value?: string | null;
+    defaultValue?: string | null;
+    /** Called with the selected value, or `null` when cleared. */
+    onChange?: (value: string | null) => void;
+    /** The text in the field. Pass it (with onInputChange) to search on a server. */
+    inputValue?: string;
+    onInputChange?: (text: string) => void;
+    /** Commit the typed text as the value when no option is active (Enter), or on blur. */
+    allowCustomValue?: boolean;
+    /** `false`: the consumer filters `options` itself. A function: `(option, query) => boolean`. Default: accent-insensitive word match on label, value and description. */
+    filter?: false | ((option: ComboboxOption, query: string) => boolean);
+    /** Shows a "Loading…" row with a spinner under the options, announced to screen readers. */
+    loading?: boolean;
+    /** Shown when nothing matches. Default "No results.". */
+    emptyMessage?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Submitted with native forms through a hidden input. */
+    name?: string;
+    /** Shows an X button while there is text. Default true. */
+    clearable?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    id?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+}
+/**
+ * An editable combobox (WAI-ARIA list autocomplete). Focus stays in the input; the active option is
+ * announced through aria-activedescendant.
+ */
+declare function Combobox({ options, value, defaultValue, onChange, inputValue, onInputChange, allowCustomValue, filter, loading, emptyMessage, placeholder, disabled, name, clearable, size, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/index.js

@@ -0,0 +1,320 @@
+"use client"
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Combobox: () => Combobox
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/combobox.tsx
+var import_react = require("react");
+var import_utils = require("@glob-ui/utils");
+var import_hooks = require("@glob-ui/hooks");
+var import_input = require("@glob-ui/input");
+var import_spinner = require("@glob-ui/spinner");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CUSTOM_KEY = "\0custom";
+function highlight(label, query) {
+  const q = query.trim();
+  if (!q) return label;
+  const index = label.toLowerCase().indexOf(q.toLowerCase());
+  if (index < 0) return label;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    label.slice(0, index),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", { className: "bg-transparent font-semibold text-glob-text", children: label.slice(index, index + q.length) }),
+    label.slice(index + q.length)
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onChange,
+  inputValue,
+  onInputChange,
+  allowCustomValue = false,
+  filter,
+  loading = false,
+  emptyMessage = "No results.",
+  placeholder,
+  disabled = false,
+  name,
+  clearable = true,
+  size,
+  className,
+  id,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel
+}) {
+  var _a, _b;
+  const baseId = (0, import_react.useId)();
+  const inputId = id != null ? id : `${baseId}-input`;
+  const listId = `${baseId}-listbox`;
+  const inputRef = (0, import_react.useRef)(null);
+  const [selected, setSelected] = (0, import_hooks.useControllableState)(value, defaultValue, onChange);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [typed, setTyped] = (0, import_react.useState)(null);
+  const controlledText = inputValue !== void 0;
+  const selectedOption = options.find((o) => o.value === selected);
+  const selectedLabel = (_b = (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : selected) != null ? _b : "";
+  const text = controlledText ? inputValue : typed != null ? typed : selectedLabel;
+  const query = controlledText ? inputValue : typed != null ? typed : "";
+  function setText(next) {
+    if (!controlledText) setTyped(next);
+    onInputChange == null ? void 0 : onInputChange(next);
+  }
+  const visible = (0, import_react.useMemo)(() => {
+    if (filter === false) return options;
+    const match = filter != null ? filter : ((o, q) => {
+      var _a2;
+      return (0, import_utils.matchesSearch)(q, o.label, o.value, (_a2 = o.description) != null ? _a2 : "");
+    });
+    return options.filter((o) => match(o, query));
+  }, [options, filter, query]);
+  const trimmed = text.trim();
+  const hasExact = options.some((o) => (0, import_utils.normalizeText)(o.label) === (0, import_utils.normalizeText)(trimmed));
+  const rows = [
+    ...visible.map((option) => ({ key: option.value, label: option.label, disabled: option.disabled, option })),
+    ...allowCustomValue && trimmed !== "" && !hasExact ? [{ key: CUSTOM_KEY, label: trimmed }] : []
+  ];
+  const listbox = (0, import_hooks.useListbox)({
+    id: baseId,
+    items: rows,
+    getKey: (row) => row.key,
+    getText: (row) => row.label,
+    isDisabled: (row) => Boolean(row.disabled),
+    open
+  });
+  const { setTrigger, setPanel, floatingStyles } = (0, import_hooks.useFloatingPanel)({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    offset: 4,
+    matchTriggerWidth: true,
+    // Focus stays in the input, so the browser must not return focus on close.
+    restoreFocus: false
+  });
+  function openList(active) {
+    if (disabled) return;
+    listbox.setActiveKey(active);
+    setOpen(true);
+  }
+  function commitValue(next, label) {
+    setSelected(next);
+    setTyped(null);
+    setOpen(false);
+    if (controlledText) onInputChange == null ? void 0 : onInputChange(label);
+  }
+  function commitRow(row) {
+    if (row.key === CUSTOM_KEY) commitValue(row.label, row.label);
+    else if (row.option) commitValue(row.option.value, row.option.label);
+  }
+  function clear() {
+    var _a2;
+    setSelected(null);
+    setText("");
+    setOpen(false);
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }
+  function onBlur() {
+    setOpen(false);
+    if (allowCustomValue) {
+      if (trimmed === "") {
+        if (selected !== null) commitValue(null, "");
+        else setText("");
+      } else if (trimmed !== selected) {
+        commitValue(trimmed, trimmed);
+      } else {
+        setTyped(null);
+      }
+      return;
+    }
+    setTyped(null);
+    if (controlledText && text !== selectedLabel) onInputChange == null ? void 0 : onInputChange(selectedLabel);
+  }
+  function onKeyDown(e) {
+    if (disabled) return;
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openList(selected);
+        return;
+      }
+    } else if (listbox.navigate(e, { homeEnd: false })) {
+      return;
+    }
+    if (e.key === "Enter" && open) {
+      e.preventDefault();
+      if (listbox.activeItem) commitRow(listbox.activeItem);
+      else if (allowCustomValue && trimmed !== "") commitValue(trimmed, trimmed);
+      else setOpen(false);
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      } else if (text !== "" || selected !== null) {
+        e.preventDefault();
+        clear();
+      }
+    } else if ((0, import_hooks.isPrintable)(e) && !open) {
+      setOpen(true);
+    }
+  }
+  const hasText = text !== "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("relative w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: setTrigger, className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: inputId,
+          type: "text",
+          role: "combobox",
+          autoComplete: "off",
+          "aria-autocomplete": "list",
+          "aria-expanded": open,
+          "aria-controls": listId,
+          "aria-activedescendant": open ? listbox.activeDescendant : void 0,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": ariaDescribedBy,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-label": ariaLabel,
+          "aria-disabled": disabled || void 0,
+          disabled,
+          placeholder,
+          value: text,
+          onChange: (e) => {
+            setText(e.target.value);
+            setOpen(true);
+            listbox.setActiveKey(null);
+          },
+          onClick: () => {
+            if (!open) openList(selected);
+          },
+          onKeyDown,
+          onBlur,
+          className: (0, import_utils.cn)((0, import_input.inputVariants)({ size }), "pr-16")
+        }
+      ),
+      clearable && hasText && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: clear,
+          className: "absolute right-8 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-3.5 w-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show options",
+          tabIndex: -1,
+          disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            var _a2;
+            if (open) setOpen(false);
+            else openList(selected);
+            (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+          },
+          className: "absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-glob-text-secondary disabled:opacity-50",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: (0, import_utils.cn)("h-4 w-4 transition-transform", open && "rotate-180"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6" })
+            }
+          )
+        }
+      )
+    ] }),
+    name !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name, value: selected != null ? selected : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: setPanel,
+        popover: "manual",
+        style: floatingStyles,
+        className: (0, import_utils.cn)(
+          // Reset the UA popover box (inset:0 + margin:auto would center it).
+          "m-0 overflow-visible rounded-glob-md border border-glob-border bg-glob-surface text-sm text-glob-text shadow-glob-md outline-none",
+          "opacity-0 transition-[opacity,overlay,display] transition-discrete duration-150 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: listId, role: "listbox", "aria-labelledby": ariaLabelledBy != null ? ariaLabelledBy : inputId, className: "max-h-60 overflow-y-auto p-1", children: rows.map((row) => {
+            var _a2;
+            const isSelected = row.key !== CUSTOM_KEY && row.key === selected;
+            const isActive = listbox.activeKey === row.key;
+            const isCustom = row.key === CUSTOM_KEY;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                id: listbox.optionId(row.key),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": row.disabled || void 0,
+                onMouseDown: (e) => e.preventDefault(),
+                onPointerMove: () => {
+                  if (!row.disabled) listbox.setActiveKey(row.key);
+                },
+                onClick: () => {
+                  if (!row.disabled) commitRow(row);
+                },
+                className: (0, import_utils.cn)(
+                  "flex w-full cursor-pointer items-center gap-2 rounded-glob-sm px-2 py-2 text-left text-sm select-none",
+                  row.disabled && "cursor-not-allowed opacity-50",
+                  isActive && !row.disabled && "bg-glob-surface-hover",
+                  isSelected && "font-medium"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate", children: isCustom ? `Use "${row.label}"` : highlight(row.label, query) }),
+                  ((_a2 = row.option) == null ? void 0 : _a2.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-xs text-glob-text-secondary", children: row.option.description })
+                ] })
+              },
+              row.key
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "status", "aria-live": "polite", className: "empty:hidden", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 px-3 py-3 text-sm text-glob-text-secondary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { size: "sm", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading\u2026" })
+          ] }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-3 text-sm text-glob-text-secondary", children: emptyMessage }) : null })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Combobox
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/combobox.tsx"],"sourcesContent":["export { Combobox } from \"./combobox\"\nexport type { ComboboxProps, ComboboxOption } from \"./combobox\"\n","\"use client\"\n\nimport { useId, useMemo, useRef, useState } from \"react\"\nimport { cn, matchesSearch, normalizeText } from \"@glob-ui/utils\"\nimport { useControllableState, useFloatingPanel, useListbox, isPrintable } from \"@glob-ui/hooks\"\nimport { inputVariants } from \"@glob-ui/input\"\nimport { Spinner } from \"@glob-ui/spinner\"\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  disabled?: boolean\n  /** A second, muted line under the label. Searched too. */\n  description?: string\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[]\n  /** Selected option value, or `null` for none. */\n  value?: string | null\n  defaultValue?: string | null\n  /** Called with the selected value, or `null` when cleared. */\n  onChange?: (value: string | null) => void\n  /** The text in the field. Pass it (with onInputChange) to search on a server. */\n  inputValue?: string\n  onInputChange?: (text: string) => void\n  /** Commit the typed text as the value when no option is active (Enter), or on blur. */\n  allowCustomValue?: boolean\n  /** `false`: the consumer filters `options` itself. A function: `(option, query) => boolean`. Default: accent-insensitive word match on label, value and description. */\n  filter?: false | ((option: ComboboxOption, query: string) => boolean)\n  /** Shows a \"Loading…\" row with a spinner under the options, announced to screen readers. */\n  loading?: boolean\n  /** Shown when nothing matches. Default \"No results.\". */\n  emptyMessage?: React.ReactNode\n  placeholder?: string\n  disabled?: boolean\n  /** Submitted with native forms through a hidden input. */\n  name?: string\n  /** Shows an X button while there is text. Default true. */\n  clearable?: boolean\n  size?: \"sm\" | \"md\" | \"lg\"\n  className?: string\n  id?: string\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n  \"aria-describedby\"?: string\n  \"aria-labelledby\"?: string\n  \"aria-label\"?: string\n}\n\nconst CUSTOM_KEY = \"\\u0000custom\"\n\ntype Row = { key: string; label: string; disabled?: boolean; option?: ComboboxOption }\n\n/** The label with the first occurrence of the query in `<mark>`. Cosmetic: the name stays the label. */\nfunction highlight(label: string, query: string) {\n  const q = query.trim()\n  if (!q) return label\n  const index = label.toLowerCase().indexOf(q.toLowerCase())\n  if (index < 0) return label\n  return (\n    <>\n      {label.slice(0, index)}\n      <mark className=\"bg-transparent font-semibold text-glob-text\">{label.slice(index, index + q.length)}</mark>\n      {label.slice(index + q.length)}\n    </>\n  )\n}\n\n/**\n * An editable combobox (WAI-ARIA list autocomplete). Focus stays in the input; the active option is\n * announced through aria-activedescendant.\n */\nexport function Combobox({\n  options,\n  value,\n  defaultValue = null,\n  onChange,\n  inputValue,\n  onInputChange,\n  allowCustomValue = false,\n  filter,\n  loading = false,\n  emptyMessage = \"No results.\",\n  placeholder,\n  disabled = false,\n  name,\n  clearable = true,\n  size,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-label\": ariaLabel,\n}: ComboboxProps) {\n  const baseId = useId()\n  const inputId = id ?? `${baseId}-input`\n  const listId = `${baseId}-listbox`\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [selected, setSelected] = useControllableState<string | null>(value, defaultValue, onChange)\n  const [open, setOpen] = useState(false)\n  // null: not editing, so the field shows the selected label. A string: what the user typed.\n  const [typed, setTyped] = useState<string | null>(null)\n  const controlledText = inputValue !== undefined\n\n  const selectedOption = options.find((o) => o.value === selected)\n  const selectedLabel = selectedOption?.label ?? selected ?? \"\"\n  const text = controlledText ? inputValue : (typed ?? selectedLabel)\n  const query = controlledText ? inputValue : (typed ?? \"\")\n\n  function setText(next: string) {\n    if (!controlledText) setTyped(next)\n    onInputChange?.(next)\n  }\n\n  const visible = useMemo(() => {\n    if (filter === false) return options\n    const match = filter ?? ((o: ComboboxOption, q: string) => matchesSearch(q, o.label, o.value, o.description ?? \"\"))\n    return options.filter((o) => match(o, query))\n  }, [options, filter, query])\n\n  const trimmed = text.trim()\n  const hasExact = options.some((o) => normalizeText(o.label) === normalizeText(trimmed))\n  // The \"Use ...\" row goes last, so with matches the first match stays the active option.\n  const rows: Row[] = [\n    ...visible.map((option) => ({ key: option.value, label: option.label, disabled: option.disabled, option })),\n    ...(allowCustomValue && trimmed !== \"\" && !hasExact ? [{ key: CUSTOM_KEY, label: trimmed }] : []),\n  ]\n\n  const listbox = useListbox({\n    id: baseId,\n    items: rows,\n    getKey: (row) => row.key,\n    getText: (row) => row.label,\n    isDisabled: (row) => Boolean(row.disabled),\n    open,\n  })\n\n  const { setTrigger, setPanel, floatingStyles } = useFloatingPanel({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    offset: 4,\n    matchTriggerWidth: true,\n    // Focus stays in the input, so the browser must not return focus on close.\n    restoreFocus: false,\n  })\n\n  function openList(active: string | null) {\n    if (disabled) return\n    listbox.setActiveKey(active)\n    setOpen(true)\n  }\n\n  function commitValue(next: string | null, label: string) {\n    setSelected(next)\n    setTyped(null)\n    setOpen(false)\n    if (controlledText) onInputChange?.(label)\n  }\n\n  function commitRow(row: Row) {\n    if (row.key === CUSTOM_KEY) commitValue(row.label, row.label)\n    else if (row.option) commitValue(row.option.value, row.option.label)\n  }\n\n  function clear() {\n    setSelected(null)\n    setText(\"\")\n    setOpen(false)\n    inputRef.current?.focus()\n  }\n\n  function onBlur() {\n    setOpen(false)\n    if (allowCustomValue) {\n      // The typed text is the value: never leave text that looks selected but is not.\n      if (trimmed === \"\") {\n        if (selected !== null) commitValue(null, \"\")\n        else setText(\"\")\n      } else if (trimmed !== selected) {\n        commitValue(trimmed, trimmed)\n      } else {\n        setTyped(null)\n      }\n      return\n    }\n    // Not committed: show the selected label again (or nothing).\n    setTyped(null)\n    if (controlledText && text !== selectedLabel) onInputChange?.(selectedLabel)\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return\n    if (!open) {\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault()\n        openList(selected)\n        return\n      }\n    } else if (listbox.navigate(e, { homeEnd: false })) {\n      return\n    }\n\n    if (e.key === \"Enter\" && open) {\n      e.preventDefault()\n      if (listbox.activeItem) commitRow(listbox.activeItem)\n      else if (allowCustomValue && trimmed !== \"\") commitValue(trimmed, trimmed)\n      else setOpen(false)\n    } else if (e.key === \"Escape\") {\n      if (open) {\n        e.preventDefault()\n        setOpen(false)\n      } else if (text !== \"\" || selected !== null) {\n        e.preventDefault()\n        clear()\n      }\n    } else if (isPrintable(e) && !open) {\n      // Typing opens the list (the change handler filters it).\n      setOpen(true)\n    }\n  }\n\n  const hasText = text !== \"\"\n\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <div ref={setTrigger} className=\"relative w-full\">\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"text\"\n          role=\"combobox\"\n          autoComplete=\"off\"\n          aria-autocomplete=\"list\"\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-activedescendant={open ? listbox.activeDescendant : undefined}\n          aria-invalid={ariaInvalid}\n          aria-describedby={ariaDescribedBy}\n          aria-labelledby={ariaLabelledBy}\n          aria-label={ariaLabel}\n          aria-disabled={disabled || undefined}\n          disabled={disabled}\n          placeholder={placeholder}\n          value={text}\n          onChange={(e) => {\n            setText(e.target.value)\n            setOpen(true)\n            listbox.setActiveKey(null)\n          }}\n          onClick={() => {\n            if (!open) openList(selected)\n          }}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          className={cn(inputVariants({ size }), \"pr-16\")}\n        />\n        {clearable && hasText && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear\"\n            // Keep focus in the input while clicking.\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={clear}\n            className=\"absolute right-8 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n          >\n            <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-3.5 w-3.5\">\n              <path d=\"M18 6L6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n        <button\n          type=\"button\"\n          aria-label=\"Show options\"\n          tabIndex={-1}\n          disabled={disabled}\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => {\n            if (open) setOpen(false)\n            else openList(selected)\n            inputRef.current?.focus()\n          }}\n          className=\"absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-glob-text-secondary disabled:opacity-50\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          >\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </div>\n\n      {name !== undefined && <input type=\"hidden\" name={name} value={selected ?? \"\"} />}\n\n      <div\n        ref={setPanel}\n        popover=\"manual\"\n        style={floatingStyles}\n        className={cn(\n          // Reset the UA popover box (inset:0 + margin:auto would center it).\n          \"m-0 overflow-visible rounded-glob-md border border-glob-border bg-glob-surface text-sm text-glob-text shadow-glob-md outline-none\",\n          \"opacity-0 transition-[opacity,overlay,display] transition-discrete duration-150 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none\"\n        )}\n      >\n        <div id={listId} role=\"listbox\" aria-labelledby={ariaLabelledBy ?? inputId} className=\"max-h-60 overflow-y-auto p-1\">\n          {rows.map((row) => {\n            const isSelected = row.key !== CUSTOM_KEY && row.key === selected\n            const isActive = listbox.activeKey === row.key\n            const isCustom = row.key === CUSTOM_KEY\n            return (\n              <div\n                key={row.key}\n                id={listbox.optionId(row.key)}\n                role=\"option\"\n                aria-selected={isSelected}\n                aria-disabled={row.disabled || undefined}\n                onMouseDown={(e) => e.preventDefault()}\n                onPointerMove={() => {\n                  if (!row.disabled) listbox.setActiveKey(row.key)\n                }}\n                onClick={() => {\n                  if (!row.disabled) commitRow(row)\n                }}\n                className={cn(\n                  \"flex w-full cursor-pointer items-center gap-2 rounded-glob-sm px-2 py-2 text-left text-sm select-none\",\n                  row.disabled && \"cursor-not-allowed opacity-50\",\n                  isActive && !row.disabled && \"bg-glob-surface-hover\",\n                  isSelected && \"font-medium\"\n                )}\n              >\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate\">\n                    {isCustom ? `Use \"${row.label}\"` : highlight(row.label, query)}\n                  </span>\n                  {row.option?.description && (\n                    <span className=\"block truncate text-xs text-glob-text-secondary\">{row.option.description}</span>\n                  )}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n        {/* Always mounted, so screen readers hear loading and empty states as they appear. */}\n        <div role=\"status\" aria-live=\"polite\" className=\"empty:hidden\">\n          {loading ? (\n            <div className=\"flex items-center gap-2 px-3 py-3 text-sm text-glob-text-secondary\">\n              <Spinner size=\"sm\" aria-hidden=\"true\" />\n              <span>Loading…</span>\n            </div>\n          ) : rows.length === 0 ? (\n            <div className=\"px-3 py-3 text-sm text-glob-text-secondary\">{emptyMessage}</div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/dist/index.mjs

@@ -0,0 +1,294 @@
+"use client"
+
+// src/combobox.tsx
+import { useId, useMemo, useRef, useState } from "react";
+import { cn, matchesSearch, normalizeText } from "@glob-ui/utils";
+import { useControllableState, useFloatingPanel, useListbox, isPrintable } from "@glob-ui/hooks";
+import { inputVariants } from "@glob-ui/input";
+import { Spinner } from "@glob-ui/spinner";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CUSTOM_KEY = "\0custom";
+function highlight(label, query) {
+  const q = query.trim();
+  if (!q) return label;
+  const index = label.toLowerCase().indexOf(q.toLowerCase());
+  if (index < 0) return label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label.slice(0, index),
+    /* @__PURE__ */ jsx("mark", { className: "bg-transparent font-semibold text-glob-text", children: label.slice(index, index + q.length) }),
+    label.slice(index + q.length)
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onChange,
+  inputValue,
+  onInputChange,
+  allowCustomValue = false,
+  filter,
+  loading = false,
+  emptyMessage = "No results.",
+  placeholder,
+  disabled = false,
+  name,
+  clearable = true,
+  size,
+  className,
+  id,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel
+}) {
+  var _a, _b;
+  const baseId = useId();
+  const inputId = id != null ? id : `${baseId}-input`;
+  const listId = `${baseId}-listbox`;
+  const inputRef = useRef(null);
+  const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
+  const [open, setOpen] = useState(false);
+  const [typed, setTyped] = useState(null);
+  const controlledText = inputValue !== void 0;
+  const selectedOption = options.find((o) => o.value === selected);
+  const selectedLabel = (_b = (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : selected) != null ? _b : "";
+  const text = controlledText ? inputValue : typed != null ? typed : selectedLabel;
+  const query = controlledText ? inputValue : typed != null ? typed : "";
+  function setText(next) {
+    if (!controlledText) setTyped(next);
+    onInputChange == null ? void 0 : onInputChange(next);
+  }
+  const visible = useMemo(() => {
+    if (filter === false) return options;
+    const match = filter != null ? filter : ((o, q) => {
+      var _a2;
+      return matchesSearch(q, o.label, o.value, (_a2 = o.description) != null ? _a2 : "");
+    });
+    return options.filter((o) => match(o, query));
+  }, [options, filter, query]);
+  const trimmed = text.trim();
+  const hasExact = options.some((o) => normalizeText(o.label) === normalizeText(trimmed));
+  const rows = [
+    ...visible.map((option) => ({ key: option.value, label: option.label, disabled: option.disabled, option })),
+    ...allowCustomValue && trimmed !== "" && !hasExact ? [{ key: CUSTOM_KEY, label: trimmed }] : []
+  ];
+  const listbox = useListbox({
+    id: baseId,
+    items: rows,
+    getKey: (row) => row.key,
+    getText: (row) => row.label,
+    isDisabled: (row) => Boolean(row.disabled),
+    open
+  });
+  const { setTrigger, setPanel, floatingStyles } = useFloatingPanel({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    offset: 4,
+    matchTriggerWidth: true,
+    // Focus stays in the input, so the browser must not return focus on close.
+    restoreFocus: false
+  });
+  function openList(active) {
+    if (disabled) return;
+    listbox.setActiveKey(active);
+    setOpen(true);
+  }
+  function commitValue(next, label) {
+    setSelected(next);
+    setTyped(null);
+    setOpen(false);
+    if (controlledText) onInputChange == null ? void 0 : onInputChange(label);
+  }
+  function commitRow(row) {
+    if (row.key === CUSTOM_KEY) commitValue(row.label, row.label);
+    else if (row.option) commitValue(row.option.value, row.option.label);
+  }
+  function clear() {
+    var _a2;
+    setSelected(null);
+    setText("");
+    setOpen(false);
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }
+  function onBlur() {
+    setOpen(false);
+    if (allowCustomValue) {
+      if (trimmed === "") {
+        if (selected !== null) commitValue(null, "");
+        else setText("");
+      } else if (trimmed !== selected) {
+        commitValue(trimmed, trimmed);
+      } else {
+        setTyped(null);
+      }
+      return;
+    }
+    setTyped(null);
+    if (controlledText && text !== selectedLabel) onInputChange == null ? void 0 : onInputChange(selectedLabel);
+  }
+  function onKeyDown(e) {
+    if (disabled) return;
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openList(selected);
+        return;
+      }
+    } else if (listbox.navigate(e, { homeEnd: false })) {
+      return;
+    }
+    if (e.key === "Enter" && open) {
+      e.preventDefault();
+      if (listbox.activeItem) commitRow(listbox.activeItem);
+      else if (allowCustomValue && trimmed !== "") commitValue(trimmed, trimmed);
+      else setOpen(false);
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      } else if (text !== "" || selected !== null) {
+        e.preventDefault();
+        clear();
+      }
+    } else if (isPrintable(e) && !open) {
+      setOpen(true);
+    }
+  }
+  const hasText = text !== "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { ref: setTrigger, className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: inputId,
+          type: "text",
+          role: "combobox",
+          autoComplete: "off",
+          "aria-autocomplete": "list",
+          "aria-expanded": open,
+          "aria-controls": listId,
+          "aria-activedescendant": open ? listbox.activeDescendant : void 0,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": ariaDescribedBy,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-label": ariaLabel,
+          "aria-disabled": disabled || void 0,
+          disabled,
+          placeholder,
+          value: text,
+          onChange: (e) => {
+            setText(e.target.value);
+            setOpen(true);
+            listbox.setActiveKey(null);
+          },
+          onClick: () => {
+            if (!open) openList(selected);
+          },
+          onKeyDown,
+          onBlur,
+          className: cn(inputVariants({ size }), "pr-16")
+        }
+      ),
+      clearable && hasText && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: clear,
+          className: "absolute right-8 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+          children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show options",
+          tabIndex: -1,
+          disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            var _a2;
+            if (open) setOpen(false);
+            else openList(selected);
+            (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+          },
+          className: "absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-glob-text-secondary disabled:opacity-50",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: cn("h-4 w-4 transition-transform", open && "rotate-180"),
+              children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+            }
+          )
+        }
+      )
+    ] }),
+    name !== void 0 && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected != null ? selected : "" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setPanel,
+        popover: "manual",
+        style: floatingStyles,
+        className: cn(
+          // Reset the UA popover box (inset:0 + margin:auto would center it).
+          "m-0 overflow-visible rounded-glob-md border border-glob-border bg-glob-surface text-sm text-glob-text shadow-glob-md outline-none",
+          "opacity-0 transition-[opacity,overlay,display] transition-discrete duration-150 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { id: listId, role: "listbox", "aria-labelledby": ariaLabelledBy != null ? ariaLabelledBy : inputId, className: "max-h-60 overflow-y-auto p-1", children: rows.map((row) => {
+            var _a2;
+            const isSelected = row.key !== CUSTOM_KEY && row.key === selected;
+            const isActive = listbox.activeKey === row.key;
+            const isCustom = row.key === CUSTOM_KEY;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: listbox.optionId(row.key),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": row.disabled || void 0,
+                onMouseDown: (e) => e.preventDefault(),
+                onPointerMove: () => {
+                  if (!row.disabled) listbox.setActiveKey(row.key);
+                },
+                onClick: () => {
+                  if (!row.disabled) commitRow(row);
+                },
+                className: cn(
+                  "flex w-full cursor-pointer items-center gap-2 rounded-glob-sm px-2 py-2 text-left text-sm select-none",
+                  row.disabled && "cursor-not-allowed opacity-50",
+                  isActive && !row.disabled && "bg-glob-surface-hover",
+                  isSelected && "font-medium"
+                ),
+                children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate", children: isCustom ? `Use "${row.label}"` : highlight(row.label, query) }),
+                  ((_a2 = row.option) == null ? void 0 : _a2.description) && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-glob-text-secondary", children: row.option.description })
+                ] })
+              },
+              row.key
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "empty:hidden", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-sm text-glob-text-secondary", children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+          ] }) : rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-sm text-glob-text-secondary", children: emptyMessage }) : null })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Combobox
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/combobox.tsx"],"sourcesContent":["\"use client\"\n\nimport { useId, useMemo, useRef, useState } from \"react\"\nimport { cn, matchesSearch, normalizeText } from \"@glob-ui/utils\"\nimport { useControllableState, useFloatingPanel, useListbox, isPrintable } from \"@glob-ui/hooks\"\nimport { inputVariants } from \"@glob-ui/input\"\nimport { Spinner } from \"@glob-ui/spinner\"\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  disabled?: boolean\n  /** A second, muted line under the label. Searched too. */\n  description?: string\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[]\n  /** Selected option value, or `null` for none. */\n  value?: string | null\n  defaultValue?: string | null\n  /** Called with the selected value, or `null` when cleared. */\n  onChange?: (value: string | null) => void\n  /** The text in the field. Pass it (with onInputChange) to search on a server. */\n  inputValue?: string\n  onInputChange?: (text: string) => void\n  /** Commit the typed text as the value when no option is active (Enter), or on blur. */\n  allowCustomValue?: boolean\n  /** `false`: the consumer filters `options` itself. A function: `(option, query) => boolean`. Default: accent-insensitive word match on label, value and description. */\n  filter?: false | ((option: ComboboxOption, query: string) => boolean)\n  /** Shows a \"Loading…\" row with a spinner under the options, announced to screen readers. */\n  loading?: boolean\n  /** Shown when nothing matches. Default \"No results.\". */\n  emptyMessage?: React.ReactNode\n  placeholder?: string\n  disabled?: boolean\n  /** Submitted with native forms through a hidden input. */\n  name?: string\n  /** Shows an X button while there is text. Default true. */\n  clearable?: boolean\n  size?: \"sm\" | \"md\" | \"lg\"\n  className?: string\n  id?: string\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n  \"aria-describedby\"?: string\n  \"aria-labelledby\"?: string\n  \"aria-label\"?: string\n}\n\nconst CUSTOM_KEY = \"\\u0000custom\"\n\ntype Row = { key: string; label: string; disabled?: boolean; option?: ComboboxOption }\n\n/** The label with the first occurrence of the query in `<mark>`. Cosmetic: the name stays the label. */\nfunction highlight(label: string, query: string) {\n  const q = query.trim()\n  if (!q) return label\n  const index = label.toLowerCase().indexOf(q.toLowerCase())\n  if (index < 0) return label\n  return (\n    <>\n      {label.slice(0, index)}\n      <mark className=\"bg-transparent font-semibold text-glob-text\">{label.slice(index, index + q.length)}</mark>\n      {label.slice(index + q.length)}\n    </>\n  )\n}\n\n/**\n * An editable combobox (WAI-ARIA list autocomplete). Focus stays in the input; the active option is\n * announced through aria-activedescendant.\n */\nexport function Combobox({\n  options,\n  value,\n  defaultValue = null,\n  onChange,\n  inputValue,\n  onInputChange,\n  allowCustomValue = false,\n  filter,\n  loading = false,\n  emptyMessage = \"No results.\",\n  placeholder,\n  disabled = false,\n  name,\n  clearable = true,\n  size,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-label\": ariaLabel,\n}: ComboboxProps) {\n  const baseId = useId()\n  const inputId = id ?? `${baseId}-input`\n  const listId = `${baseId}-listbox`\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [selected, setSelected] = useControllableState<string | null>(value, defaultValue, onChange)\n  const [open, setOpen] = useState(false)\n  // null: not editing, so the field shows the selected label. A string: what the user typed.\n  const [typed, setTyped] = useState<string | null>(null)\n  const controlledText = inputValue !== undefined\n\n  const selectedOption = options.find((o) => o.value === selected)\n  const selectedLabel = selectedOption?.label ?? selected ?? \"\"\n  const text = controlledText ? inputValue : (typed ?? selectedLabel)\n  const query = controlledText ? inputValue : (typed ?? \"\")\n\n  function setText(next: string) {\n    if (!controlledText) setTyped(next)\n    onInputChange?.(next)\n  }\n\n  const visible = useMemo(() => {\n    if (filter === false) return options\n    const match = filter ?? ((o: ComboboxOption, q: string) => matchesSearch(q, o.label, o.value, o.description ?? \"\"))\n    return options.filter((o) => match(o, query))\n  }, [options, filter, query])\n\n  const trimmed = text.trim()\n  const hasExact = options.some((o) => normalizeText(o.label) === normalizeText(trimmed))\n  // The \"Use ...\" row goes last, so with matches the first match stays the active option.\n  const rows: Row[] = [\n    ...visible.map((option) => ({ key: option.value, label: option.label, disabled: option.disabled, option })),\n    ...(allowCustomValue && trimmed !== \"\" && !hasExact ? [{ key: CUSTOM_KEY, label: trimmed }] : []),\n  ]\n\n  const listbox = useListbox({\n    id: baseId,\n    items: rows,\n    getKey: (row) => row.key,\n    getText: (row) => row.label,\n    isDisabled: (row) => Boolean(row.disabled),\n    open,\n  })\n\n  const { setTrigger, setPanel, floatingStyles } = useFloatingPanel({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    offset: 4,\n    matchTriggerWidth: true,\n    // Focus stays in the input, so the browser must not return focus on close.\n    restoreFocus: false,\n  })\n\n  function openList(active: string | null) {\n    if (disabled) return\n    listbox.setActiveKey(active)\n    setOpen(true)\n  }\n\n  function commitValue(next: string | null, label: string) {\n    setSelected(next)\n    setTyped(null)\n    setOpen(false)\n    if (controlledText) onInputChange?.(label)\n  }\n\n  function commitRow(row: Row) {\n    if (row.key === CUSTOM_KEY) commitValue(row.label, row.label)\n    else if (row.option) commitValue(row.option.value, row.option.label)\n  }\n\n  function clear() {\n    setSelected(null)\n    setText(\"\")\n    setOpen(false)\n    inputRef.current?.focus()\n  }\n\n  function onBlur() {\n    setOpen(false)\n    if (allowCustomValue) {\n      // The typed text is the value: never leave text that looks selected but is not.\n      if (trimmed === \"\") {\n        if (selected !== null) commitValue(null, \"\")\n        else setText(\"\")\n      } else if (trimmed !== selected) {\n        commitValue(trimmed, trimmed)\n      } else {\n        setTyped(null)\n      }\n      return\n    }\n    // Not committed: show the selected label again (or nothing).\n    setTyped(null)\n    if (controlledText && text !== selectedLabel) onInputChange?.(selectedLabel)\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return\n    if (!open) {\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault()\n        openList(selected)\n        return\n      }\n    } else if (listbox.navigate(e, { homeEnd: false })) {\n      return\n    }\n\n    if (e.key === \"Enter\" && open) {\n      e.preventDefault()\n      if (listbox.activeItem) commitRow(listbox.activeItem)\n      else if (allowCustomValue && trimmed !== \"\") commitValue(trimmed, trimmed)\n      else setOpen(false)\n    } else if (e.key === \"Escape\") {\n      if (open) {\n        e.preventDefault()\n        setOpen(false)\n      } else if (text !== \"\" || selected !== null) {\n        e.preventDefault()\n        clear()\n      }\n    } else if (isPrintable(e) && !open) {\n      // Typing opens the list (the change handler filters it).\n      setOpen(true)\n    }\n  }\n\n  const hasText = text !== \"\"\n\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      <div ref={setTrigger} className=\"relative w-full\">\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"text\"\n          role=\"combobox\"\n          autoComplete=\"off\"\n          aria-autocomplete=\"list\"\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-activedescendant={open ? listbox.activeDescendant : undefined}\n          aria-invalid={ariaInvalid}\n          aria-describedby={ariaDescribedBy}\n          aria-labelledby={ariaLabelledBy}\n          aria-label={ariaLabel}\n          aria-disabled={disabled || undefined}\n          disabled={disabled}\n          placeholder={placeholder}\n          value={text}\n          onChange={(e) => {\n            setText(e.target.value)\n            setOpen(true)\n            listbox.setActiveKey(null)\n          }}\n          onClick={() => {\n            if (!open) openList(selected)\n          }}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          className={cn(inputVariants({ size }), \"pr-16\")}\n        />\n        {clearable && hasText && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear\"\n            // Keep focus in the input while clicking.\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={clear}\n            className=\"absolute right-8 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n          >\n            <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-3.5 w-3.5\">\n              <path d=\"M18 6L6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n        <button\n          type=\"button\"\n          aria-label=\"Show options\"\n          tabIndex={-1}\n          disabled={disabled}\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => {\n            if (open) setOpen(false)\n            else openList(selected)\n            inputRef.current?.focus()\n          }}\n          className=\"absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-glob-text-secondary disabled:opacity-50\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          >\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </div>\n\n      {name !== undefined && <input type=\"hidden\" name={name} value={selected ?? \"\"} />}\n\n      <div\n        ref={setPanel}\n        popover=\"manual\"\n        style={floatingStyles}\n        className={cn(\n          // Reset the UA popover box (inset:0 + margin:auto would center it).\n          \"m-0 overflow-visible rounded-glob-md border border-glob-border bg-glob-surface text-sm text-glob-text shadow-glob-md outline-none\",\n          \"opacity-0 transition-[opacity,overlay,display] transition-discrete duration-150 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none\"\n        )}\n      >\n        <div id={listId} role=\"listbox\" aria-labelledby={ariaLabelledBy ?? inputId} className=\"max-h-60 overflow-y-auto p-1\">\n          {rows.map((row) => {\n            const isSelected = row.key !== CUSTOM_KEY && row.key === selected\n            const isActive = listbox.activeKey === row.key\n            const isCustom = row.key === CUSTOM_KEY\n            return (\n              <div\n                key={row.key}\n                id={listbox.optionId(row.key)}\n                role=\"option\"\n                aria-selected={isSelected}\n                aria-disabled={row.disabled || undefined}\n                onMouseDown={(e) => e.preventDefault()}\n                onPointerMove={() => {\n                  if (!row.disabled) listbox.setActiveKey(row.key)\n                }}\n                onClick={() => {\n                  if (!row.disabled) commitRow(row)\n                }}\n                className={cn(\n                  \"flex w-full cursor-pointer items-center gap-2 rounded-glob-sm px-2 py-2 text-left text-sm select-none\",\n                  row.disabled && \"cursor-not-allowed opacity-50\",\n                  isActive && !row.disabled && \"bg-glob-surface-hover\",\n                  isSelected && \"font-medium\"\n                )}\n              >\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate\">\n                    {isCustom ? `Use \"${row.label}\"` : highlight(row.label, query)}\n                  </span>\n                  {row.option?.description && (\n                    <span className=\"block truncate text-xs text-glob-text-secondary\">{row.option.description}</span>\n                  )}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n        {/* Always mounted, so screen readers hear loading and empty states as they appear. */}\n        <div role=\"status\" aria-live=\"polite\" className=\"empty:hidden\">\n          {loading ? (\n            <div className=\"flex items-center gap-2 px-3 py-3 text-sm text-glob-text-secondary\">\n              <Spinner size=\"sm\" aria-hidden=\"true\" />\n              <span>Loading…</span>\n            </div>\n          ) : rows.length === 0 ? (\n            <div className=\"px-3 py-3 text-sm text-glob-text-secondary\">{emptyMessage}</div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@glob-ui/combobox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/hooks": "0.1.0",
+    "@glob-ui/input": "0.1.0",
+    "@glob-ui/spinner": "0.1.0",
+    "@glob-ui/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A text input with a filtered list: type to search, arrows to move, Enter to choose. The API mirrors Select.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "combobox"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/combobox"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }