@inshorts/glint-ui 0.5.4 → 0.6.0

package/dist/chunk-PUTC52SI.js

@@ -0,0 +1,98 @@
+import {
+  Button
+} from "./chunk-KR3BCFP7.js";
+
+// src/pagination.tsx
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  loading = false,
+  showPageInfo = true
+}) {
+  const visiblePages = React.useMemo(() => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+    rangeWithDots.push(...range);
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  }, [currentPage, totalPages]);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+    showPageInfo ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground order-2 text-sm sm:order-1", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage <= 1 || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none", children: visiblePages.map(
+        (page, index) => page === "..." ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-8 w-8 shrink-0 items-center justify-center",
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+          },
+          `dots-${index}`
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: page === currentPage ? "default" : "outline",
+            size: "sm",
+            onClick: () => onPageChange(page),
+            disabled: loading,
+            className: "h-8 min-w-8 shrink-0 px-2",
+            "aria-current": page === currentPage ? "page" : void 0,
+            children: page
+          },
+          page
+        )
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage >= totalPages || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-PUTC52SI.js.map

package/dist/chunk-PUTC52SI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"./button\";\n\nexport type PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  loading?: boolean;\n  showPageInfo?: boolean;\n};\n\n/**\n * Numbered pager for list panels. Hides itself when there is only one page.\n */\nexport function Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  loading = false,\n  showPageInfo = true,\n}: PaginationProps) {\n  const visiblePages = React.useMemo(() => {\n    const delta = 2;\n    const range: number[] = [];\n    const rangeWithDots: Array<number | \"...\"> = [];\n\n    for (\n      let i = Math.max(2, currentPage - delta);\n      i <= Math.min(totalPages - 1, currentPage + delta);\n      i++\n    ) {\n      range.push(i);\n    }\n\n    if (currentPage - delta > 2) {\n      rangeWithDots.push(1, \"...\");\n    } else {\n      rangeWithDots.push(1);\n    }\n\n    rangeWithDots.push(...range);\n\n    if (currentPage + delta < totalPages - 1) {\n      rangeWithDots.push(\"...\", totalPages);\n    } else if (totalPages > 1) {\n      rangeWithDots.push(totalPages);\n    }\n\n    return rangeWithDots;\n  }, [currentPage, totalPages]);\n\n  if (totalPages <= 1) return null;\n\n  return (\n    <div className=\"flex flex-col items-center justify-between gap-4 sm:flex-row\">\n      {showPageInfo ? (\n        <div className=\"text-muted-foreground order-2 text-sm sm:order-1\">\n          Page {currentPage} of {totalPages}\n        </div>\n      ) : null}\n\n      <div className=\"order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage <= 1 || loading}\n          className=\"h-8 min-w-8 px-2\"\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n\n        <div className=\"flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none\">\n          {visiblePages.map((page, index) =>\n            page === \"...\" ? (\n              <div\n                key={`dots-${index}`}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center\"\n              >\n                <MoreHorizontal className=\"h-4 w-4\" />\n              </div>\n            ) : (\n              <Button\n                key={page}\n                variant={page === currentPage ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => onPageChange(page)}\n                disabled={loading}\n                className=\"h-8 min-w-8 shrink-0 px-2\"\n                aria-current={page === currentPage ? \"page\" : undefined}\n              >\n                {page}\n              </Button>\n            ),\n          )}\n        </div>\n\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage >= totalPages || loading}\n          className=\"h-8 min-w-8 px-2\"\n          aria-label=\"Next page\"\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,aAAa,cAAc,sBAAsB;AAC1D,YAAY,WAAW;AAyDf,SAcE,KAdF;AA1CD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe;AACjB,GAAoB;AAClB,QAAM,eAAqB,cAAQ,MAAM;AACvC,UAAM,QAAQ;AACd,UAAM,QAAkB,CAAC;AACzB,UAAM,gBAAuC,CAAC;AAE9C,aACM,IAAI,KAAK,IAAI,GAAG,cAAc,KAAK,GACvC,KAAK,KAAK,IAAI,aAAa,GAAG,cAAc,KAAK,GACjD,KACA;AACA,YAAM,KAAK,CAAC;AAAA,IACd;AAEA,QAAI,cAAc,QAAQ,GAAG;AAC3B,oBAAc,KAAK,GAAG,KAAK;AAAA,IAC7B,OAAO;AACL,oBAAc,KAAK,CAAC;AAAA,IACtB;AAEA,kBAAc,KAAK,GAAG,KAAK;AAE3B,QAAI,cAAc,QAAQ,aAAa,GAAG;AACxC,oBAAc,KAAK,OAAO,UAAU;AAAA,IACtC,WAAW,aAAa,GAAG;AACzB,oBAAc,KAAK,UAAU;AAAA,IAC/B;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,MAAI,cAAc,EAAG,QAAO;AAE5B,SACE,qBAAC,SAAI,WAAU,gEACZ;AAAA,mBACC,qBAAC,SAAI,WAAU,oDAAmD;AAAA;AAAA,MAC1D;AAAA,MAAY;AAAA,MAAK;AAAA,OACzB,IACE;AAAA,IAEJ,qBAAC,SAAI,WAAU,+DACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,UAC3C,UAAU,eAAe,KAAK;AAAA,UAC9B,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,8BAAC,eAAY,WAAU,WAAU;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,SAAI,WAAU,2EACZ,uBAAa;AAAA,QAAI,CAAC,MAAM,UACvB,SAAS,QACP;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV,8BAAC,kBAAe,WAAU,WAAU;AAAA;AAAA,UAH/B,QAAQ,KAAK;AAAA,QAIpB,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,SAAS,cAAc,YAAY;AAAA,YAC5C,MAAK;AAAA,YACL,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,UAAU;AAAA,YACV,WAAU;AAAA,YACV,gBAAc,SAAS,cAAc,SAAS;AAAA,YAE7C;AAAA;AAAA,UARI;AAAA,QASP;AAAA,MAEJ,GACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,UAC3C,UAAU,eAAe,cAAc;AAAA,UACvC,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,8BAAC,gBAAa,WAAU,WAAU;AAAA;AAAA,MACpC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-PVK4WQJZ.js

@@ -0,0 +1,513 @@
+import {
+  useHasMounted
+} from "./chunk-YSU4VWRD.js";
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/autocomplete.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Check, ChevronDown, Search, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PREFERRED_LIST_HEIGHT = 224;
+var MIN_LIST_HEIGHT = 120;
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 4;
+function normalizeQuery(query) {
+  return query.trim().toLowerCase();
+}
+function filterOptions(options, query) {
+  const normalized = normalizeQuery(query);
+  if (!normalized) return options;
+  return options.filter(
+    (option) => option.label.toLowerCase().includes(normalized) || option.value.toLowerCase().includes(normalized)
+  );
+}
+function getOptionLabel(options, value) {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+function parseTagTokens(raw) {
+  const seen = /* @__PURE__ */ new Set();
+  const tokens = [];
+  for (const part of raw.split(/[\s,]+/)) {
+    const token = part.trim();
+    if (!token || seen.has(token)) continue;
+    seen.add(token);
+    tokens.push(token);
+  }
+  return tokens;
+}
+function Autocomplete(props) {
+  const {
+    options,
+    placeholder = "Search\u2026",
+    disabled = false,
+    className,
+    emptyMessage = "No results found",
+    id,
+    ariaLabel,
+    size = "default",
+    creatable = false,
+    clearable = true
+  } = props;
+  const multiple = props.multiple ?? false;
+  const singleValue = multiple ? void 0 : props.value;
+  const multipleValue = multiple ? props.value : void 0;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) return multipleValue ?? [];
+    return singleValue ? [singleValue] : [];
+  }, [multiple, multipleValue, singleValue]);
+  const onSingleChange = !multiple ? props.onChange : void 0;
+  const onMultipleChange = multiple ? props.onChange : void 0;
+  const containerRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const ignoreBlurRef = React.useRef(false);
+  const mounted = useHasMounted();
+  const [open, setOpen] = React.useState(false);
+  const [position, setPosition] = React.useState(null);
+  const [query, setQuery] = React.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const filteredOptions = React.useMemo(
+    () => filterOptions(options, query),
+    [options, query]
+  );
+  const safeHighlightedIndex = highlightedIndex >= filteredOptions.length ? Math.max(filteredOptions.length - 1, 0) : highlightedIndex;
+  const close = React.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setHighlightedIndex(0);
+  }, []);
+  const openDropdown = React.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    setHighlightedIndex(0);
+  }, [disabled]);
+  const commitSingleValue = React.useCallback(
+    (value) => {
+      if (!multiple) {
+        onSingleChange?.(value);
+        close();
+      }
+    },
+    [close, multiple, onSingleChange]
+  );
+  const toggleMultipleValue = React.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(
+        selectedValues.includes(value) ? selectedValues.filter((item) => item !== value) : [...selectedValues, value]
+      );
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const commitCustomValues = React.useCallback(
+    (raw) => {
+      if (!creatable) return;
+      if (!multiple) {
+        const value = raw.trim();
+        if (!value) return;
+        commitSingleValue(value);
+        return;
+      }
+      if (!onMultipleChange) return;
+      const tokens = parseTagTokens(raw);
+      if (!tokens.length) return;
+      const next = [...selectedValues];
+      for (const token of tokens) {
+        if (!next.includes(token)) next.push(token);
+      }
+      onMultipleChange(next);
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [commitSingleValue, creatable, multiple, onMultipleChange, selectedValues]
+  );
+  const removeValue = React.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(selectedValues.filter((item) => item !== value));
+      window.requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const selectOption = React.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      ignoreBlurRef.current = true;
+      window.setTimeout(() => {
+        ignoreBlurRef.current = false;
+      }, 0);
+      if (multiple) {
+        toggleMultipleValue(option.value);
+        window.requestAnimationFrame(() => inputRef.current?.focus());
+        return;
+      }
+      commitSingleValue(option.value);
+    },
+    [commitSingleValue, multiple, toggleMultipleValue]
+  );
+  const selectHighlighted = React.useCallback(() => {
+    const option = filteredOptions[safeHighlightedIndex];
+    if (!option) return;
+    selectOption(option);
+  }, [filteredOptions, safeHighlightedIndex, selectOption]);
+  React.useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event) {
+      const target = event.target;
+      if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [close, open]);
+  React.useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const anchor = containerRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const above = rect.top - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const flip = below < Math.min(PREFERRED_LIST_HEIGHT, MIN_LIST_HEIGHT) && above > below;
+      const room = flip ? above : below;
+      const width = Math.max(rect.width, size === "compact" ? 220 : 0);
+      const left = Math.max(
+        VIEWPORT_MARGIN,
+        Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN)
+      );
+      setPosition({
+        left,
+        width,
+        maxHeight: Math.max(
+          MIN_LIST_HEIGHT,
+          Math.min(PREFERRED_LIST_HEIGHT, room)
+        ),
+        ...flip ? { bottom: window.innerHeight - rect.top + ANCHOR_GAP } : { top: rect.bottom + ANCHOR_GAP }
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, size]);
+  React.useEffect(() => {
+    if (!open || !listRef.current) return;
+    const highlighted = listRef.current.children[safeHighlightedIndex];
+    highlighted?.scrollIntoView({ block: "nearest" });
+  }, [safeHighlightedIndex, open]);
+  function handleInputKeyDown(event) {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(
+          Math.min(safeHighlightedIndex + 1, filteredOptions.length - 1)
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(Math.max(safeHighlightedIndex - 1, 0));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (creatable && query.trim()) {
+          if (multiple || filteredOptions.length === 0) {
+            commitCustomValues(query);
+            return;
+          }
+        }
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        selectHighlighted();
+        break;
+      case ",":
+        if (creatable && multiple && query.trim()) {
+          event.preventDefault();
+          commitCustomValues(query);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Backspace":
+        if (multiple && query.length === 0 && selectedValues.length > 0) {
+          event.preventDefault();
+          removeValue(selectedValues[selectedValues.length - 1]);
+        }
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        break;
+    }
+  }
+  const displayValue = !multiple && !open && !query && selectedValues[0] ? getOptionLabel(options, selectedValues[0]) : query;
+  const inputPlaceholder = multiple && selectedValues.length > 0 ? "" : placeholder;
+  const createLabel = query.trim();
+  const canCreate = creatable && Boolean(createLabel) && !selectedValues.includes(createLabel);
+  const listboxId = id ? `${id}-listbox` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative",
+        size === "compact" ? "w-auto min-w-24" : "w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "border-border bg-background flex w-full cursor-pointer items-center rounded-md border transition-colors",
+              "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-2",
+              size === "compact" ? "min-h-0 gap-0.5 border-transparent bg-transparent px-1 py-0.5 text-xs shadow-none" : "min-h-9 gap-1.5 px-2 py-1.5 text-sm shadow-sm",
+              disabled && "cursor-not-allowed opacity-50",
+              open && "border-ring ring-ring/30 ring-2"
+            ),
+            onPointerDown: (event) => {
+              if (disabled) return;
+              if (event.target.closest("[data-option]")) return;
+              if (event.target.closest("[data-chip-remove]"))
+                return;
+              if (!event.target.closest("input")) {
+                event.preventDefault();
+                inputRef.current?.focus();
+              }
+              openDropdown();
+            },
+            children: [
+              size === "compact" ? null : /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground size-4 shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+                multiple && selectedValues.map((value) => /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "bg-primary/10 text-primary inline-flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: getOptionLabel(options, value) }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-chip-remove": true,
+                          className: "text-primary/70 hover:bg-primary/15 hover:text-primary rounded-sm transition",
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            removeValue(value);
+                          },
+                          "aria-label": `Remove ${getOptionLabel(options, value)}`,
+                          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                        }
+                      )
+                    ]
+                  },
+                  value
+                )),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": ariaLabel,
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-autocomplete": "list",
+                    disabled,
+                    value: displayValue,
+                    placeholder: inputPlaceholder,
+                    className: cn(
+                      "placeholder:text-muted-foreground flex-1 bg-transparent outline-none",
+                      size === "compact" ? "min-w-0" : "min-w-[6rem]"
+                    ),
+                    onFocus: openDropdown,
+                    onBlur: () => {
+                      if (ignoreBlurRef.current) return;
+                      close();
+                    },
+                    onChange: (event) => {
+                      setQuery(event.target.value);
+                      setHighlightedIndex(0);
+                      if (!open) setOpen(true);
+                    },
+                    onKeyDown: handleInputKeyDown,
+                    onPaste: (event) => {
+                      if (!creatable || !multiple) return;
+                      const text = event.clipboardData.getData("text");
+                      if (!/[\s,]/.test(text)) return;
+                      event.preventDefault();
+                      commitCustomValues(text);
+                    }
+                  }
+                )
+              ] }),
+              clearable && !multiple && selectedValues[0] && !disabled && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded-sm p-0.5 transition",
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onSingleChange?.("");
+                    setQuery("");
+                    inputRef.current?.focus();
+                  },
+                  "aria-label": "Clear selection",
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn(
+                    "text-muted-foreground shrink-0 transition-transform",
+                    size === "compact" ? "size-3" : "size-4",
+                    open && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && mounted && position ? createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: dropdownRef,
+              "data-autocomplete-dropdown": true,
+              style: {
+                position: "fixed",
+                left: position.left,
+                width: position.width,
+                top: position.top,
+                bottom: position.bottom,
+                // Above the modal shell (z-100) it is usually opened inside.
+                zIndex: 200
+              },
+              className: "border-border bg-background overflow-hidden rounded-md border shadow-lg",
+              children: /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  ref: listRef,
+                  id: listboxId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  className: "overflow-y-auto p-1",
+                  style: { maxHeight: position.maxHeight },
+                  children: filteredOptions.length === 0 && !canCreate ? /* @__PURE__ */ jsx("li", { className: "text-muted-foreground px-3 py-6 text-center text-sm", children: emptyMessage }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    filteredOptions.map((option, index) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      const isHighlighted = index === safeHighlightedIndex;
+                      return /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          "data-option": true,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          "aria-disabled": option.disabled || void 0,
+                          className: cn(
+                            "flex cursor-pointer items-center gap-2 rounded-sm transition-colors",
+                            size === "compact" ? "px-2 py-1 text-xs" : "px-2.5 py-2 text-sm",
+                            isHighlighted && "bg-muted",
+                            option.disabled && "cursor-not-allowed opacity-50"
+                          ),
+                          onMouseEnter: () => setHighlightedIndex(index),
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            selectOption(option);
+                          },
+                          children: [
+                            multiple ? /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "border-border flex size-4 shrink-0 items-center justify-center rounded border",
+                                  isSelected && "border-primary bg-primary text-primary-foreground"
+                                ),
+                                children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : null
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              Check,
+                              {
+                                className: cn(
+                                  "text-primary size-4 shrink-0",
+                                  isSelected ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    }),
+                    canCreate ? /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        "data-option": true,
+                        role: "option",
+                        "aria-selected": false,
+                        className: "hover:bg-muted flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-sm transition-colors",
+                        onPointerDown: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          ignoreBlurRef.current = true;
+                          window.setTimeout(() => {
+                            ignoreBlurRef.current = false;
+                          }, 0);
+                          commitCustomValues(query);
+                          window.requestAnimationFrame(
+                            () => inputRef.current?.focus()
+                          );
+                        },
+                        children: [
+                          "Add \u201C",
+                          createLabel,
+                          "\u201D"
+                        ]
+                      }
+                    ) : null
+                  ] })
+                }
+              )
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
+
+export {
+  Autocomplete
+};
+//# sourceMappingURL=chunk-PVK4WQJZ.js.map