@g4rcez/components 4.0.1 → 4.1.1

package/ai/docs/index.md

@@ -0,0 +1,183 @@
+---
+title: "@g4rcez/components — Component Index"
+description: Full component catalog for @g4rcez/components React design system
+package: "@g4rcez/components"
+---
+
+# @g4rcez/components — Component Index
+
+A design system library built on React, Tailwind CSS, and design tokens.
+
+**Installation:**
+
+```bash
+npm install @g4rcez/components
+```
+
+**Setup:**
+
+```tsx
+import "@g4rcez/components/index.css";
+```
+
+## All Components
+
+| Component      | Category | Import                                                             | Description                                                               |
+| -------------- | -------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| Button         | Core     | `import { Button } from "@g4rcez/components/button"`               | Versatile button with multiple variants, sizes, and polymorphic rendering |
+| Tag            | Core     | `import { Tag } from "@g4rcez/components/tag"`                     | Label/badge for metadata, status, and categorization                      |
+| Heading        | Core     | `import { Heading } from "@g4rcez/components"`                     | Semantic heading with consistent typography tokens                        |
+| Polymorph      | Core     | `import { Polymorph } from "@g4rcez/components"`                   | Polymorphic base component for rendering as any HTML element              |
+| RenderOnView   | Core     | `import { RenderOnView } from "@g4rcez/components"`                | Lazy-renders children when they scroll into the viewport                  |
+| Resizable      | Core     | `import { Resizable } from "@g4rcez/components"`                   | Drag-to-resize panel container                                            |
+| Slot           | Core     | `import { Slot } from "@g4rcez/components"`                        | Render-prop slot for component composition                                |
+| Typography     | Core     | `import { Typography } from "@g4rcez/components"`                  | Body text component with semantic token styling                           |
+| Alert          | Display  | `import { Alert } from "@g4rcez/components/alert"`                 | Dismissible alert for messages, warnings, and status updates              |
+| AnimatedList   | Display  | `import { AnimatedList } from "@g4rcez/components"`                | List with enter/exit animation for dynamic items                          |
+| Calendar       | Display  | `import { Calendar } from "@g4rcez/components/calendar"`           | Inline date picker calendar                                               |
+| Card           | Display  | `import { Card } from "@g4rcez/components/card"`                   | Surface container with card tokens and elevation                          |
+| Empty          | Display  | `import { Empty } from "@g4rcez/components"`                       | Empty state placeholder with optional icon and action                     |
+| List           | Display  | `import { List } from "@g4rcez/components/list"`                   | Virtualized scrollable list for large data sets                           |
+| Notifications  | Display  | `import { Notifications } from "@g4rcez/components/notifications"` | Toast notification system with queue management                           |
+| Progress       | Display  | `import { Progress } from "@g4rcez/components"`                    | Progress bar with themed fill                                             |
+| Shortcut       | Display  | `import { Shortcut } from "@g4rcez/components"`                    | Keyboard shortcut badge display                                           |
+| Skeleton       | Display  | `import { Skeleton } from "@g4rcez/components"`                    | Loading placeholder with pulse animation                                  |
+| Spinner        | Display  | `import { Spinner } from "@g4rcez/components"`                     | Animated loading spinner                                                  |
+| Stats          | Display  | `import { Stats } from "@g4rcez/components/stats"`                 | Metric/statistics display with label and value                            |
+| Step           | Display  | `import { Step } from "@g4rcez/components"`                        | Multi-step wizard progress indicator                                      |
+| Tabs           | Display  | `import { Tabs } from "@g4rcez/components/tabs"`                   | Tabbed navigation with panel switching                                    |
+| Timeline       | Display  | `import { Timeline } from "@g4rcez/components/timeline"`           | Vertical event timeline with themed markers                               |
+| Autocomplete   | Form     | `import { Autocomplete } from "@g4rcez/components/autocomplete"`   | Text input with dropdown suggestions                                      |
+| Checkbox       | Form     | `import { Checkbox } from "@g4rcez/components/checkbox"`           | Checkbox with indeterminate support                                       |
+| DatePicker     | Form     | `import { DatePicker } from "@g4rcez/components/date-picker"`      | Date input with calendar popover                                          |
+| FileUpload     | Form     | `import { FileUpload } from "@g4rcez/components/file-upload"`      | Drag-and-drop file upload with preview                                    |
+| Form           | Form     | `import { Form } from "@g4rcez/components/form"`                   | Form wrapper with Zod validation and field management                     |
+| FormReset      | Form     | `import { FormReset } from "@g4rcez/components"`                   | Reset button wired to the nearest Form context                            |
+| Input          | Form     | `import { Input } from "@g4rcez/components/input"`                 | Text input with mask, prefix/suffix, and error states                     |
+| InputField     | Form     | `import { InputField } from "@g4rcez/components"`                  | Input with label, helper text, and error message                          |
+| MultiSelect    | Form     | `import { MultiSelect } from "@g4rcez/components"`                 | Multi-value select with search and tag display                            |
+| Radiobox       | Form     | `import { Radiobox } from "@g4rcez/components/radiobox"`           | Styled radio button group                                                 |
+| Select         | Form     | `import { Select } from "@g4rcez/components/select"`               | Dropdown select with search and virtual scroll                            |
+| Slider         | Form     | `import { Slider } from "@g4rcez/components"`                      | Range slider input                                                        |
+| Switch         | Form     | `import { Switch } from "@g4rcez/components/switch"`               | Toggle switch for boolean values                                          |
+| TaskList       | Form     | `import { TaskList } from "@g4rcez/components/task-list"`          | Checklist with completion tracking                                        |
+| Textarea       | Form     | `import { Textarea } from "@g4rcez/components"`                    | Multi-line text input with auto-resize                                    |
+| CommandPalette | Floating | `import { CommandPalette } from "@g4rcez/components"`              | Spotlight-style command palette with keyboard navigation                  |
+| Dropdown       | Floating | `import { Dropdown } from "@g4rcez/components/dropdown"`           | Floating dropdown menu anchored to a trigger                              |
+| Expand         | Floating | `import { Expand } from "@g4rcez/components/expand"`               | Collapsible accordion/expand panel                                        |
+| Menu           | Floating | `import { Menu } from "@g4rcez/components/menu"`                   | Context menu or navigation menu                                           |
+| Modal          | Floating | `import { Modal } from "@g4rcez/components/modal"`                 | Dialog overlay with focus trap and scroll lock                            |
+| Toolbar        | Floating | `import { Toolbar } from "@g4rcez/components"`                     | Grouped action bar with button slots                                      |
+| Tooltip        | Floating | `import { Tooltip } from "@g4rcez/components/tooltip"`             | Hover tooltip with floating positioning                                   |
+| Wizard         | Floating | `import { Wizard } from "@g4rcez/components"`                      | Multi-step guided flow overlay                                            |
+| Table          | Table    | `import { Table } from "@g4rcez/components/table"`                 | Feature-rich data table with sorting, filtering, and virtualization       |
+| PageCalendar   | Calendar | `import { PageCalendar } from "@g4rcez/components"`                | Full-page calendar with month, week, and day views                        |
+
+---
+
+## Core
+
+| Component    | Import                                               | Description                                                               |
+| ------------ | ---------------------------------------------------- | ------------------------------------------------------------------------- |
+| Button       | `import { Button } from "@g4rcez/components/button"` | Versatile button with multiple variants, sizes, and polymorphic rendering |
+| Tag          | `import { Tag } from "@g4rcez/components/tag"`       | Label/badge for metadata, status, and categorization                      |
+| Heading      | `import { Heading } from "@g4rcez/components"`       | Semantic heading with consistent typography tokens                        |
+| Polymorph    | `import { Polymorph } from "@g4rcez/components"`     | Polymorphic base component for rendering as any HTML element              |
+| RenderOnView | `import { RenderOnView } from "@g4rcez/components"`  | Lazy-renders children when they scroll into the viewport                  |
+| Resizable    | `import { Resizable } from "@g4rcez/components"`     | Drag-to-resize panel container                                            |
+| Slot         | `import { Slot } from "@g4rcez/components"`          | Render-prop slot for component composition                                |
+| Typography   | `import { Typography } from "@g4rcez/components"`    | Body text component with semantic token styling                           |
+
+## Display
+
+| Component     | Import                                                             | Description                                                  |
+| ------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ |
+| Alert         | `import { Alert } from "@g4rcez/components/alert"`                 | Dismissible alert for messages, warnings, and status updates |
+| AnimatedList  | `import { AnimatedList } from "@g4rcez/components"`                | List with enter/exit animation for dynamic items             |
+| Calendar      | `import { Calendar } from "@g4rcez/components/calendar"`           | Inline date picker calendar                                  |
+| Card          | `import { Card } from "@g4rcez/components/card"`                   | Surface container with card tokens and elevation             |
+| Empty         | `import { Empty } from "@g4rcez/components"`                       | Empty state placeholder with optional icon and action        |
+| List          | `import { List } from "@g4rcez/components/list"`                   | Virtualized scrollable list for large data sets              |
+| Notifications | `import { Notifications } from "@g4rcez/components/notifications"` | Toast notification system with queue management              |
+| Progress      | `import { Progress } from "@g4rcez/components"`                    | Progress bar with themed fill                                |
+| Shortcut      | `import { Shortcut } from "@g4rcez/components"`                    | Keyboard shortcut badge display                              |
+| Skeleton      | `import { Skeleton } from "@g4rcez/components"`                    | Loading placeholder with pulse animation                     |
+| Spinner       | `import { Spinner } from "@g4rcez/components"`                     | Animated loading spinner                                     |
+| Stats         | `import { Stats } from "@g4rcez/components/stats"`                 | Metric/statistics display with label and value               |
+| Step          | `import { Step } from "@g4rcez/components"`                        | Multi-step wizard progress indicator                         |
+| Tabs          | `import { Tabs } from "@g4rcez/components/tabs"`                   | Tabbed navigation with panel switching                       |
+| Timeline      | `import { Timeline } from "@g4rcez/components/timeline"`           | Vertical event timeline with themed markers                  |
+
+## Form
+
+| Component    | Import                                                            | Description                                           |
+| ------------ | ----------------------------------------------------------------- | ----------------------------------------------------- |
+| Autocomplete | `import { Autocomplete } from "@g4rcez/components/autocomplete"`  | Text input with dropdown suggestions                  |
+| Checkbox     | `import { Checkbox } from "@g4rcez/components/checkbox"`          | Checkbox with indeterminate support                   |
+| DatePicker   | `import { DatePicker } from "@g4rcez/components/date-picker"`     | Date input with calendar popover                      |
+| FileUpload   | `import { FileUpload } from "@g4rcez/components/file-upload"`     | Drag-and-drop file upload with preview                |
+| Form         | `import { Form } from "@g4rcez/components/form"`                  | Form wrapper with Zod validation and field management |
+| FormReset    | `import { FormReset } from "@g4rcez/components"`                  | Reset button wired to the nearest Form context        |
+| Input        | `import { Input } from "@g4rcez/components/input"`                | Text input with mask, prefix/suffix, and error states |
+| InputField   | `import { InputField } from "@g4rcez/components"`                 | Input with label, helper text, and error message      |
+| MultiSelect  | `import { MultiSelect } from "@g4rcez/components"`                | Multi-value select with search and tag display        |
+| Radiobox     | `import { Radiobox } from "@g4rcez/components/radiobox"`          | Styled radio button group                             |
+| Select       | `import { Select } from "@g4rcez/components/select"`              | Dropdown select with search and virtual scroll        |
+| Slider       | `import { Slider } from "@g4rcez/components"`                     | Range slider input                                    |
+| Switch       | `import { Switch } from "@g4rcez/components/switch"`              | Toggle switch for boolean values                      |
+| TaskList     | `import { TaskList } from "@g4rcez/components/task-list"`         | Checklist with completion tracking                    |
+| Textarea     | `import { Textarea } from "@g4rcez/components"`                   | Multi-line text input with auto-resize                |
+
+## Floating
+
+| Component      | Import                                                   | Description                                              |
+| -------------- | -------------------------------------------------------- | -------------------------------------------------------- |
+| CommandPalette | `import { CommandPalette } from "@g4rcez/components"`    | Spotlight-style command palette with keyboard navigation |
+| Dropdown       | `import { Dropdown } from "@g4rcez/components/dropdown"` | Floating dropdown menu anchored to a trigger             |
+| Expand         | `import { Expand } from "@g4rcez/components/expand"`     | Collapsible accordion/expand panel                       |
+| Menu           | `import { Menu } from "@g4rcez/components/menu"`         | Context menu or navigation menu                          |
+| Modal          | `import { Modal } from "@g4rcez/components/modal"`       | Dialog overlay with focus trap and scroll lock           |
+| Toolbar        | `import { Toolbar } from "@g4rcez/components"`           | Grouped action bar with button slots                     |
+| Tooltip        | `import { Tooltip } from "@g4rcez/components/tooltip"`   | Hover tooltip with floating positioning                  |
+| Wizard         | `import { Wizard } from "@g4rcez/components"`            | Multi-step guided flow overlay                           |
+
+## Table
+
+| Component | Import                                             | Description                                                         |
+| --------- | -------------------------------------------------- | ------------------------------------------------------------------- |
+| Table     | `import { Table } from "@g4rcez/components/table"` | Feature-rich data table with sorting, filtering, and virtualization |
+
+## Calendar
+
+| Component    | Import                                              | Description                                        |
+| ------------ | --------------------------------------------------- | -------------------------------------------------- |
+| PageCalendar | `import { PageCalendar } from "@g4rcez/components"` | Full-page calendar with month, week, and day views |
+
+---
+
+## Design Token Quick Reference
+
+All components use CSS custom properties for theming. Override in your `@theme` block:
+
+```css
+@theme {
+    --primary: oklch(0.6 0.2 250); /* primary color */
+    --danger: oklch(0.6 0.2 30); /* danger/error color */
+    --button-primary-bg: var(--primary);
+    --button-primary-text: var(--primary-foreground);
+}
+```
+
+See individual component docs for the full token list per component.
+
+---
+
+## Setup
+
+```tsx
+// 1. Import the stylesheet in your app root
+import "@g4rcez/components/index.css";
+
+// 2. Apply theme class on your root element
+<div className="light"> ... </div>; // or "dark"
+```

package/dist/autocomplete-DcTNOwyg.js

@@ -0,0 +1,393 @@
+import { jsx as d, jsxs as Y } from "react/jsx-runtime";
+import { u as Ve, o as $e, g as ze, h as Oe, b as Pe, i as _e, c as Ze, d as He, j as Ue, k as Be, F as We, m as je } from "./floating-ui.react-M2PGXLDp.js";
+import { e as Ke } from "./CaretDown.es-Cj7klWI3.js";
+import { useRef as I, useState as C, useEffect as L, forwardRef as G, useMemo as V, Fragment as Qe } from "react";
+import { flushSync as se } from "react-dom";
+import { Y as qe } from "./index-C-PuFUZi.js";
+import { h as Ge, o as Je, I as D, g as Xe, i as et, c as ie, s as tt, f as nt } from "./dom-CyQHY7ID.js";
+import { i as q, c as rt, s as ce } from "./fns-C7Dt27Qd.js";
+import { u as lt } from "./use-translations-DSltA7H_.js";
+import { I as ot } from "./input-field-CDCOODOl.js";
+import { m as J, A as at } from "./proxy-BZcQiBrp.js";
+const ue = () => window.matchMedia("@media (pointer: coarse)"), st = () => {
+  const t = I(q() ? null : ue()), [n, a] = C(q() ? !1 : t.current?.matches ?? !1);
+  return L(() => {
+    (t.current === null ? ue() : t.current).addEventListener("change", (l) => a(l.matches));
+  }, []), n;
+}, it = (t, n = "overflow-hidden") => {
+  const a = I(null), o = st(), l = I(q() ? "" : document.documentElement.style.overflowY);
+  return L(() => {
+    if (!(a.current === null && !t) && n !== "block-only" && n === "overflow-hidden")
+      if (t) {
+        if (l.current = document.documentElement.style.overflowY, document.documentElement.style.overflowY = "hidden", o || rt()) return;
+        document.documentElement.style.padding = Ge(document.documentElement) ? "0 15px 0 0" : "";
+      } else
+        document.documentElement.style.padding = "", document.documentElement.style.overflowY = l.current;
+  }, [t, o, n]), L(() => {
+    if (!t) return;
+    const s = a.current;
+    if (!s) return;
+    const u = new AbortController(), i = (b) => {
+      const p = s.getBoundingClientRect(), v = s.style.height ? Number(Je(s.style.height)) : null, x = D.number(v) ? v : p.height;
+      s.scrollHeight <= x && b.preventDefault();
+    };
+    return s.addEventListener("wheel", i, { signal: u.signal, passive: !1 }), () => u.abort();
+  }, [t]), a;
+}, ct = (t, n) => {
+  if (t = String(t).toLocaleLowerCase(), n = String(n).toLocaleLowerCase(), t === n) return 1;
+  const a = n[0];
+  if (!a) return null;
+  const o = [];
+  let l = 0;
+  for (; l < t.length; ) {
+    const u = t.indexOf(a, l);
+    if (u === -1) break;
+    let i = u + 1;
+    const b = [u];
+    let p = !0;
+    for (let v = 1; v < n.length; v++) {
+      const x = t.indexOf(n[v], i);
+      if (x === -1) {
+        p = !1;
+        break;
+      }
+      b.push(x), i = x + 1;
+    }
+    p && o.push(b), l = u + 1;
+  }
+  if (o.length === 0) return null;
+  const s = o.sort((u, i) => u.length === 1 ? u[0] - i[0] : u[u.length - 1] - u[0] - (i[i.length - 1] - i[0]))[0];
+  return s.length > 1 ? 2 + (s[s.length - 1] - s[0]) : 2 + s[0];
+}, de = (t, n, a) => {
+  const o = t.split(n).filter(Boolean);
+  let l = a;
+  for (const s of o) {
+    if (l == null)
+      return l;
+    l = l[s];
+  }
+  return l;
+}, fe = { basic: /[,[\]]+?/, extend: /[,[\].]+?/ }, me = (t, n) => {
+  const a = de(n, fe.basic, t);
+  return a !== void 0 && a !== t ? a : de(n, fe.extend, t);
+}, ge = (t) => t.replace(/[^0-9]/g, ""), Q = (t) => t.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), he = (t, n, a, o = "FUZZY") => o === "CONTAINS" ? t.includes(n) : o === "EQUAL" ? t === n : o === "CONTAINS_NUMBERS" ? ge(t).includes(ge(n)) : o === "STARTS_WITH" ? t.startsWith(n) : o === "ENDS_WITH" ? t.endsWith(n) : o === "FUZZY" ? ct(t, n) !== null : !1, ut = (t, n, a, o = "FUZZY") => Array.isArray(n) ? n.some((l) => he(t, l, a, o)) : he(t, n, a, o), dt = (t, n, a) => {
+  if (a.length === 0)
+    return t;
+  const o = /* @__PURE__ */ new Map(), l = a.map((s) => {
+    const u = D.array(s.value) ? s.value.map((i) => Q(`${i}`.toLocaleLowerCase()).trim()) : Q(`${s.value}`.toLocaleLowerCase()).trim();
+    return { ...s, target: u };
+  });
+  return t.forEach((s) => {
+    const u = me(s, n);
+    l.forEach((i) => {
+      const b = me(s, i.key);
+      if (!b) return;
+      const p = Q(`${b}`.toLocaleLowerCase()).trim();
+      if (ut(p, i.target, i.score, i.match))
+        return void o.set(u, s);
+      D.function(i.ifNotMatch) && i.ifNotMatch(i.target, p) && o.set(u, s);
+    });
+  }), Array.from(o.values());
+}, ft = (t) => /* @__PURE__ */ d(Qe, { children: t.children }), mt = {
+  duration: 200,
+  open: { transform: "scaleY(1)", opacity: 1 },
+  close: { transform: "scaleY(0)", opacity: 0 },
+  initial: { transform: "scaleY(0)", opacity: 0.2 }
+}, gt = G(function({ context: n, ...a }, o) {
+  return /* @__PURE__ */ d(J.ul, { ...a, ref: o, className: "max-h-96 w-full overscroll-contain rounded-lg", children: /* @__PURE__ */ d(at, { children: a.children }) });
+}), ht = G(function({ item: n, context: a, ...o }, l) {
+  return /* @__PURE__ */ d(J.li, { ...o, ref: l, className: "first:rounded-t-lg last:rounded-t-lg" });
+}), bt = { List: gt, Item: ht }, pt = [], $ = 40, Ft = G(
+  ({
+    left: t,
+    error: n,
+    right: a,
+    loading: o,
+    options: l,
+    container: s,
+    rightLabel: u,
+    interactive: i,
+    emptyMessage: b,
+    optionalText: p,
+    labelClassName: v,
+    feedback: x = null,
+    hideLeft: X = !1,
+    required: z = !1,
+    dynamicOption: M = !1,
+    ...c
+  }, be) => {
+    const pe = I(null), ee = I(null), O = I(null), P = c.value ?? c.defaultValue ?? "", _ = lt(), [f, A] = C(!1), [w, F] = C(""), [E, Z] = C(P), [ve, H] = C(() => l.find((e) => e.value === P)?.label ?? P), [g, T] = C(null), te = I(pt), [, we] = C(0), ye = it(f, "block-only"), U = V(
+      () => M && w !== "" ? [{ value: w, label: w, "data-dynamic": "true" }, ...l] : l,
+      [M, w, l]
+    ), ne = () => se(() => A(!0)), re = V(
+      () => w ? dt(U, "value", [
+        { key: "value", value: w },
+        { key: "label", value: w }
+      ]) : U,
+      [U, w]
+    ), [le, S] = C(() => Math.min(320, $ * l.length)), B = () => {
+      A(!1), S(0);
+    }, m = V(() => re.filter((e) => e.hidden !== !0), [re]), Ce = V(
+      () => M ? void 0 : `^(${l.map((e) => `${ce(e.value)}${e.label ? "|" + ce(e.label) : ""}`).join("|")})$`,
+      [M, l]
+    ), { x: xe, y: Ie, strategy: Le, refs: y, context: R, placement: oe } = Ve({
+      open: f,
+      transform: !0,
+      onOpenChange: A,
+      placement: "bottom-start",
+      whileElementsMounted: Pe,
+      middleware: [
+        $e(4),
+        ze({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
+        Oe({
+          padding: 10,
+          elementContext: "reference",
+          apply(e) {
+            const r = Xe(y.reference.current, window.innerHeight), h = `${ee.current?.getBoundingClientRect().width || r}px`;
+            Object.assign(e.elements.floating.style, { width: h, maxWidth: h });
+          }
+        })
+      ]
+    }), Ee = _e(R, mt), { getReferenceProps: Ne, getFloatingProps: ke, getItemProps: Ae } = Ze([
+      He(R, { role: "listbox" }),
+      Ue(R),
+      Be(R, {
+        cols: 0,
+        listRef: te,
+        loop: !0,
+        virtual: !0,
+        allowEscape: !0,
+        activeIndex: g,
+        selectedIndex: g,
+        focusItemOnOpen: "auto",
+        openOnArrowKeyDown: !0,
+        scrollItemIntoView: !0
+      })
+    ]);
+    L(() => {
+      if (c.value) {
+        const e = l.find((r) => r.value === c.value);
+        e && (H(e.label ?? e.value), Z(c.value));
+      }
+    }, [c.value, l.length]), L(() => {
+      const e = y.reference.current;
+      if (e)
+        return et(e);
+    }, []), L(() => {
+      if (!f) return;
+      const e = requestAnimationFrame(() => we((r) => r + 1));
+      return () => cancelAnimationFrame(e);
+    }, [f]), L(() => {
+      if (!f) {
+        S(0);
+        return;
+      }
+      const e = setTimeout(() => S(Math.min(320, m.length * $)), 100);
+      return () => clearTimeout(e);
+    }, [f, m.length]);
+    const W = (e, r) => {
+      Z(e.value);
+      const h = y.reference.current;
+      if (!h) return;
+      h?.setAttribute("data-value", e.value), h.value = e.value;
+      const k = new Event("change", { bubbles: !1, cancelable: !0 });
+      h.dispatchEvent(k), c.onChange && c.onChange(tt(h)), H(e.label ?? ""), B(), F(""), T(r);
+    }, Fe = (e) => {
+      const r = e.target.value;
+      return F(r), !f && r === "" ? A(!0) : (e.target.name = c.name || "", r ? A(!0) : c.onChange?.(e));
+    }, Se = () => {
+      ne(), F(""), y.reference.current?.focus();
+    }, Re = () => {
+      T((e) => e === null ? 0 : e), ne(), F("");
+    }, De = () => {
+      y.reference.current?.setAttribute("data-value", ""), F(""), Z(""), H(""), nt(y.reference.current), B();
+    }, N = c.id || c.name, j = `${N}-shadow`, K = m.length === 0, ae = oe === "top" || oe === "top-start";
+    return /* @__PURE__ */ Y(
+      ot,
+      {
+        ...c,
+        left: t,
+        error: n,
+        id: j,
+        form: c.form,
+        loading: o,
+        name: c.name,
+        hideLeft: X,
+        required: z,
+        title: c.title,
+        container: s,
+        rightLabel: u,
+        interactive: i,
+        optionalText: p,
+        componentName: "autocomplete",
+        labelClassName: v,
+        placeholder: c.placeholder,
+        ref: ee,
+        feedback: f && ae ? c.title : x,
+        right: /* @__PURE__ */ Y("span", { className: "flex items-center gap-0.5", children: [
+          a,
+          /* @__PURE__ */ Y("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: Se, children: [
+            /* @__PURE__ */ d(Ke, { size: 20 }),
+            /* @__PURE__ */ d("span", { className: "sr-only", children: _.inputCaretDown })
+          ] }),
+          E ? /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              onClick: De,
+              "aria-label": _.inputCloseValue,
+              className: "p-2 transition-colors link:text-danger md:p-1",
+              children: /* @__PURE__ */ d("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ d(
+                "path",
+                {
+                  d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd"
+                }
+              ) })
+            }
+          ) : null
+        ] }),
+        children: [
+          /* @__PURE__ */ d(
+            "input",
+            {
+              "data-shadow": "true",
+              ...Ne({
+                ...c,
+                onFocus: Re,
+                pattern: Ce,
+                onChange: Fe,
+                id: j,
+                name: j,
+                ref: y.setReference,
+                onClick: (e) => e.currentTarget.focus(),
+                onKeyDown(e) {
+                  if (e.key === "Escape")
+                    return e.currentTarget.blur(), B();
+                  if (f) {
+                    if (e.key === "ArrowDown") {
+                      let r = D.number(g) ? g + 1 : 0;
+                      return r > m.length - 1 && (r = 0), O.current?.scrollIntoView({ index: r }), T(r);
+                    }
+                    if (e.key === "ArrowUp") {
+                      let r = D.number(g) ? g - 1 : m.length - 1;
+                      return r < 0 && (r = m.length - 1), O.current?.scrollIntoView({ index: r }), T(r);
+                    }
+                    if (e.key === "Enter") {
+                      if (g !== null && m[g])
+                        return e.preventDefault(), W(m[g], g);
+                      if (m.length === 1)
+                        return e.preventDefault(), W(m[0], 0);
+                    }
+                  }
+                }
+              }),
+              "data-value": E,
+              "data-error": !!n,
+              "data-name": N,
+              "data-target": N,
+              required: z,
+              value: f ? w : l.length === 0 ? "" : ve || E,
+              "aria-autocomplete": "list",
+              autoComplete: "off",
+              className: ie(
+                "input placeholder-input-mask group h-input-height w-full flex-1",
+                "rounded-md bg-transparent px-input-x py-input-y text-foreground",
+                "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary",
+                "group-error:text-danger group-error:placeholder-input-mask-error",
+                "text-base group-focus-within:border-primary group-hover:border-primary",
+                c.className
+              )
+            }
+          ),
+          /* @__PURE__ */ d(
+            "input",
+            {
+              id: N,
+              name: N,
+              type: "hidden",
+              "data-origin": N,
+              ref: be,
+              required: z,
+              defaultValue: c.value || E || void 0
+            }
+          ),
+          /* @__PURE__ */ d(We, { preserveTabOrder: !0, children: f ? /* @__PURE__ */ d(je, { modal: !0, guards: !0, returnFocus: !1, context: R, initialFocus: -1, visuallyHiddenDismiss: !0, children: /* @__PURE__ */ Y(
+            J.div,
+            {
+              ...ke({
+                ref: y.setFloating,
+                style: { ...Ee.styles, left: xe, top: Ie ?? 0, position: Le, height: "auto" }
+              }),
+              initial: !1,
+              "data-floating": "true",
+              animate: { height: K ? "auto" : le },
+              onAnimationComplete: () => {
+                if (!f) {
+                  S(0);
+                  return;
+                }
+                const r = (y.floating.current?.querySelector("li")?.getBoundingClientRect().height ?? $) * m.length;
+                se(() => S(Math.min(320, r + 2)));
+              },
+              className: ie(
+                "shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out",
+                ae ? "origin-[bottom_center]" : "origin-[top_center]"
+              ),
+              children: [
+                K ? /* @__PURE__ */ d("div", { className: "w-full border-b border-tooltip-border", children: /* @__PURE__ */ d("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: b || _.autocompleteEmpty }) }) : null,
+                /* @__PURE__ */ d(
+                  qe,
+                  {
+                    overscan: 40,
+                    ref: O,
+                    hidden: K,
+                    data: m,
+                    style: { height: le },
+                    defaultItemHeight: $,
+                    components: bt,
+                    scrollerRef: (e) => {
+                      pe.current = e, ye.current = e;
+                    },
+                    className: "border-floating max-h-full overscroll-contain rounded-lg bg-floating-background p-0 text-foreground",
+                    itemContent: (e, r) => {
+                      const h = r.Render ?? ft, k = E === r.value || E === r.label, Me = g === e, Te = r.label ?? r.value;
+                      return /* @__PURE__ */ d(
+                        "button",
+                        {
+                          "data-value": r.value,
+                          ...Ae({
+                            ref: (Ye) => {
+                              te.current[e] = Ye;
+                            },
+                            role: "option",
+                            type: "button",
+                            "aria-checked": k,
+                            "aria-current": k,
+                            "aria-selected": k,
+                            "aria-disabled": r.disabled,
+                            onClick: () => W(r, e),
+                            className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${k ? "bg-primary-hover text-primary-foreground" : ""} ${Me ? "bg-floating-hover text-floating-foreground" : ""}`
+                          }),
+                          children: /* @__PURE__ */ d(h, { ...r, ref: void 0, label: r.label, value: r.value, children: Te })
+                        }
+                      );
+                    }
+                  }
+                )
+              ]
+            }
+          ) }) : null })
+        ]
+      }
+    );
+  }
+);
+export {
+  Ft as A,
+  dt as f,
+  it as u
+};
+//# sourceMappingURL=autocomplete-DcTNOwyg.js.map