@wow-two-beta/ui 0.0.8 → 0.0.9

package/dist/{chunk-X2LTOZ7F.js → chunk-SBVWECJP.js}

@@ -1,13 +1,15 @@
-import { useFormControl, FormControlProvider } from './chunk-WEM32VIJ.js';
+import { useFormControl, FormControlProvider, Portal, AnchoredPositioner, DismissableLayer } from './chunk-CZ6FQILQ.js';
 import { useControlled } from './chunk-4P2TFUVW.js';
 import { useId } from './chunk-KDXJQNB6.js';
 import { tv } from './chunk-BMBIZLO4.js';
 import { Icon } from './chunk-TDX22OWF.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
 import { cn } from './chunk-KZ4VFY2T.js';
 import * as React from 'react';
-import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1 } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload } from 'lucide-react';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown } from 'lucide-react';
+import { FocusScope } from '@radix-ui/react-focus-scope';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -1114,6 +1116,919 @@ var FilePicker = forwardRef(
 );
 FilePicker.displayName = "FilePicker";
 
-export { CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CurrencyInput, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, MaskedInput, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, SearchInput, Slider, Switch, SwitchField, TelInput, TextInput, Textarea, UrlInput };
-//# sourceMappingURL=chunk-X2LTOZ7F.js.map
-//# sourceMappingURL=chunk-X2LTOZ7F.js.map
+// src/forms/listbox/Listbox.variants.ts
+var listboxVariants = tv({
+  base: "flex max-h-72 flex-col gap-0.5 overflow-y-auto rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md outline-none"
+});
+var listboxItemVariants = tv({
+  base: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+  variants: {
+    state: {
+      default: "text-popover-foreground",
+      active: "bg-muted text-foreground",
+      selected: "bg-primary-soft text-primary-soft-foreground",
+      disabled: "pointer-events-none opacity-50"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+var listboxGroupLabelVariants = tv({
+  base: "px-2 py-1.5 text-xs font-semibold text-muted-foreground"
+});
+var listboxSeparatorVariants = tv({
+  base: "-mx-1 my-1 h-px bg-border"
+});
+var listboxEmptyVariants = tv({
+  base: "px-2 py-6 text-center text-sm text-muted-foreground"
+});
+var ListboxContext = createContext(null);
+function useListboxContext() {
+  const ctx = useContext(ListboxContext);
+  if (!ctx) throw new Error("Listbox.Item / Group / Separator must be used inside <Listbox>");
+  return ctx;
+}
+var Listbox = forwardRef(function Listbox2(props, ref) {
+  const {
+    multiple = false,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    className,
+    children,
+    onKeyDown,
+    ...rest
+  } = props;
+  const initial = defaultValue ?? (multiple ? [] : "");
+  const [current, setCurrent] = useControlled({
+    controlled: value,
+    default: initial,
+    onChange: onValueChange
+  });
+  const values = useMemo(
+    () => Array.isArray(current) ? current : current ? [current] : [],
+    [current]
+  );
+  const items = useRef([]);
+  const [activeId, setActiveId] = useState(null);
+  const registerItem = useCallback((entry) => {
+    if (!items.current.some((i) => i.id === entry.id)) items.current.push(entry);
+  }, []);
+  const updateItem = useCallback((entry) => {
+    const idx = items.current.findIndex((i) => i.id === entry.id);
+    if (idx >= 0) items.current[idx] = entry;
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    items.current = items.current.filter((i) => i.id !== id);
+  }, []);
+  const onItemSelect = useCallback(
+    (next) => {
+      if (multiple) {
+        const cur = Array.isArray(current) ? current : [];
+        const has = cur.includes(next);
+        setCurrent(has ? cur.filter((v) => v !== next) : [...cur, next]);
+      } else {
+        setCurrent(next);
+      }
+    },
+    [multiple, current, setCurrent]
+  );
+  useEffect(() => {
+    if (activeId) return;
+    const firstSelected = items.current.find(
+      (i) => !i.disabled && values.includes(i.value)
+    );
+    const firstEnabled = items.current.find((i) => !i.disabled);
+    setActiveId((firstSelected ?? firstEnabled)?.id ?? null);
+  }, []);
+  const moveActive = useCallback(
+    (direction, jump = 1) => {
+      const list = items.current.filter((i) => !i.disabled);
+      if (list.length === 0) return;
+      const currentIdx = list.findIndex((i) => i.id === activeId);
+      let nextIdx = currentIdx + direction * jump;
+      if (currentIdx === -1) nextIdx = direction === 1 ? 0 : list.length - 1;
+      if (nextIdx < 0) nextIdx = 0;
+      if (nextIdx >= list.length) nextIdx = list.length - 1;
+      const nextEntry = list[nextIdx];
+      if (nextEntry) setActiveId(nextEntry.id);
+    },
+    [activeId]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveActive(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveActive(-1);
+          break;
+        case "Home":
+          event.preventDefault();
+          moveActive(-1, items.current.length);
+          break;
+        case "End":
+          event.preventDefault();
+          moveActive(1, items.current.length);
+          break;
+        case "PageDown":
+          event.preventDefault();
+          moveActive(1, 10);
+          break;
+        case "PageUp":
+          event.preventDefault();
+          moveActive(-1, 10);
+          break;
+        case "Enter":
+        case " ": {
+          if (!activeId) return;
+          const entry = items.current.find((i) => i.id === activeId);
+          if (!entry || entry.disabled) return;
+          event.preventDefault();
+          onItemSelect(entry.value);
+          break;
+        }
+      }
+    },
+    [activeId, disabled, moveActive, onItemSelect, onKeyDown]
+  );
+  const ctx = useMemo(
+    () => ({
+      multiple,
+      values,
+      activeId,
+      onItemSelect,
+      registerItem: (e) => {
+        const existing = items.current.find((i) => i.id === e.id);
+        if (existing) updateItem(e);
+        else registerItem(e);
+      },
+      unregisterItem,
+      setActiveId
+    }),
+    [multiple, values, activeId, onItemSelect, registerItem, unregisterItem, updateItem]
+  );
+  return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "listbox",
+      tabIndex: disabled ? -1 : 0,
+      "aria-multiselectable": multiple || void 0,
+      "aria-activedescendant": activeId ?? void 0,
+      "aria-disabled": disabled || void 0,
+      onKeyDown: handleKeyDown,
+      className: cn(listboxVariants(), className),
+      ...rest,
+      children
+    }
+  ) });
+});
+var ListboxItem = forwardRef(function ListboxItem2({ value, disabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
+  const ctx = useListboxContext();
+  const id = useId$1();
+  const ref = useRef(null);
+  useEffect(() => {
+    ctx.registerItem({ id, value, disabled, ref: ref.current });
+    return () => ctx.unregisterItem(id);
+  }, [ctx, id, value, disabled]);
+  const isSelected = ctx.values.includes(value);
+  const isActive = ctx.activeId === id;
+  const state = disabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
+  const setRefs = (node) => {
+    ref.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRefs,
+      id,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": disabled || void 0,
+      "data-active": isActive ? "" : void 0,
+      "data-selected": isSelected ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || disabled) return;
+        ctx.onItemSelect(value);
+      },
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        if (!disabled) ctx.setActiveId(id);
+      },
+      className: cn(listboxItemVariants({ state }), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        ctx.multiple && isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+        !ctx.multiple && isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 opacity-80" })
+      ]
+    }
+  );
+});
+function ListboxGroup({ label, children, className, ...rest }) {
+  const labelId = useId$1();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label ? labelId : void 0, className, ...rest, children: [
+    label && /* @__PURE__ */ jsx("div", { id: labelId, className: listboxGroupLabelVariants(), children: label }),
+    children
+  ] });
+}
+function ListboxSeparator(props) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: listboxSeparatorVariants(), ...props });
+}
+function ListboxEmpty({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "presentation", className: cn(listboxEmptyVariants(), className), ...rest, children });
+}
+Listbox.Item = ListboxItem;
+Listbox.Group = ListboxGroup;
+Listbox.Separator = ListboxSeparator;
+Listbox.Empty = ListboxEmpty;
+
+// src/forms/select/Select.variants.ts
+var selectTriggerVariants = tv({
+  base: "flex w-full items-center justify-between gap-2 rounded-md border bg-background text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 data-[state=open]:border-border-strong",
+  variants: {
+    size: {
+      sm: "h-8 px-2.5 text-sm",
+      md: "h-10 px-3 text-sm",
+      lg: "h-12 px-4 text-base"
+    },
+    state: {
+      default: "border-input hover:border-border-strong",
+      invalid: "border-destructive focus-visible:ring-destructive"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    state: "default"
+  }
+});
+var SelectContext = createContext(null);
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error("Select.* must be used inside <Select>");
+  return ctx;
+}
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  name,
+  invalid,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  children
+}) {
+  const [openState, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [valueState, setValueState] = useControlled({
+    controlled: value,
+    default: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const triggerRef = useRef(null);
+  const [labels, setLabels] = useState({});
+  const registerLabel = useCallback((v, label) => {
+    setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
+  }, []);
+  const unregisterLabel = useCallback((v) => {
+    setLabels((prev) => {
+      if (!(v in prev)) return prev;
+      const next = { ...prev };
+      delete next[v];
+      return next;
+    });
+  }, []);
+  const onSelect = useCallback(
+    (next) => {
+      setValueState(next);
+      setOpenState(false);
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [setValueState, setOpenState]
+  );
+  const ctx = useMemo(
+    () => ({
+      open: openState,
+      setOpen: setOpenState,
+      value: valueState,
+      onSelect,
+      triggerRef,
+      labels,
+      registerLabel,
+      unregisterLabel,
+      disabled,
+      name,
+      invalid
+    }),
+    [
+      openState,
+      setOpenState,
+      valueState,
+      onSelect,
+      labels,
+      registerLabel,
+      unregisterLabel,
+      disabled,
+      name,
+      invalid
+    ]
+  );
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children });
+}
+var SelectTrigger = forwardRef(
+  function SelectTrigger2({ size, state, className, onClick, children, ...rest }, forwardedRef) {
+    const ctx = useSelectContext();
+    const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        disabled: ctx.disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setOpen(!ctx.open);
+        },
+        className: cn(selectTriggerVariants({ size, state: triggerState }), className),
+        ...rest,
+        children: [
+          children ?? /* @__PURE__ */ jsx(SelectValue, {}),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 text-muted-foreground transition-transform",
+                ctx.open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function SelectValue({ placeholder, children }) {
+  const ctx = useSelectContext();
+  if (children) return /* @__PURE__ */ jsx("span", { className: "truncate", children });
+  const label = ctx.value ? ctx.labels[ctx.value] ?? ctx.value : null;
+  return /* @__PURE__ */ jsx("span", { className: cn("truncate", !label && "text-subtle-foreground"), children: label ?? placeholder });
+}
+function SelectContent({
+  className,
+  placement = "bottom",
+  offset = 6,
+  children
+}) {
+  const ctx = useSelectContext();
+  if (!ctx.open) return null;
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+      DismissableLayer,
+      {
+        onEscape: () => ctx.setOpen(false),
+        onOutsidePointerDown: (e) => {
+          if (ctx.triggerRef.current?.contains(e.target)) return;
+          ctx.setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx(
+          Listbox,
+          {
+            value: ctx.value,
+            onValueChange: (v) => ctx.onSelect(v),
+            className: cn("min-w-[var(--radix-anchor-width)]", className),
+            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
+            children
+          }
+        )
+      }
+    ) }) }),
+    ctx.name && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.value })
+  ] });
+}
+var SelectItem = forwardRef(function SelectItem2(props, ref) {
+  const ctx = useSelectContext();
+  useEffect(() => {
+    ctx.registerLabel(props.value, props.children);
+    return () => ctx.unregisterLabel(props.value);
+  }, [ctx, props.value, props.children]);
+  return /* @__PURE__ */ jsx(ListboxItem, { ref, ...props });
+});
+Select.Trigger = SelectTrigger;
+Select.Value = SelectValue;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
+Select.Group = ListboxGroup;
+Select.Separator = ListboxSeparator;
+Select.Empty = ListboxEmpty;
+var MultiSelectContext = createContext(null);
+function useMultiSelectContext() {
+  const ctx = useContext(MultiSelectContext);
+  if (!ctx) throw new Error("MultiSelect.* must be used inside <MultiSelect>");
+  return ctx;
+}
+function MultiSelect({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  name,
+  invalid,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  children
+}) {
+  const [openState, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [valuesState, setValuesState] = useControlled({
+    controlled: value,
+    default: defaultValue ?? [],
+    onChange: onValueChange
+  });
+  const triggerRef = useRef(null);
+  const [labels, setLabels] = useState({});
+  const registerLabel = useCallback((v, label) => {
+    setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
+  }, []);
+  const unregisterLabel = useCallback((v) => {
+    setLabels((prev) => {
+      if (!(v in prev)) return prev;
+      const next = { ...prev };
+      delete next[v];
+      return next;
+    });
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      open: openState,
+      setOpen: setOpenState,
+      values: valuesState,
+      setValues: setValuesState,
+      triggerRef,
+      labels,
+      registerLabel,
+      unregisterLabel,
+      disabled,
+      name,
+      invalid
+    }),
+    [
+      openState,
+      setOpenState,
+      valuesState,
+      setValuesState,
+      labels,
+      registerLabel,
+      unregisterLabel,
+      disabled,
+      name,
+      invalid
+    ]
+  );
+  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children });
+}
+var MultiSelectTrigger = forwardRef(
+  function MultiSelectTrigger2({ size, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+    const ctx = useMultiSelectContext();
+    const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        disabled: ctx.disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setOpen(!ctx.open);
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented) return;
+          if (e.key === "Backspace" && ctx.values.length > 0) {
+            ctx.setValues(ctx.values.slice(0, -1));
+          }
+        },
+        className: cn(
+          selectTriggerVariants({ size, state: triggerState }),
+          "h-auto min-h-10 flex-wrap py-1.5",
+          className
+        ),
+        ...rest,
+        children: [
+          children ?? /* @__PURE__ */ jsx(MultiSelectTags, {}),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 self-center text-muted-foreground transition-transform",
+                ctx.open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function MultiSelectTags({ placeholder }) {
+  const ctx = useMultiSelectContext();
+  if (ctx.values.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "text-subtle-foreground", children: placeholder });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "flex flex-1 flex-wrap items-center gap-1", children: ctx.values.map((v) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs",
+      children: [
+        ctx.labels[v] ?? v,
+        !ctx.disabled && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: -1,
+            "aria-label": `Remove ${typeof ctx.labels[v] === "string" ? ctx.labels[v] : v}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              ctx.setValues(ctx.values.filter((x) => x !== v));
+            },
+            onPointerDown: (e) => e.stopPropagation(),
+            className: "cursor-pointer rounded-sm p-0.5 hover:bg-border",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    },
+    v
+  )) });
+}
+function MultiSelectContent({
+  className,
+  placement = "bottom",
+  offset = 6,
+  children
+}) {
+  const ctx = useMultiSelectContext();
+  if (!ctx.open) return null;
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+      DismissableLayer,
+      {
+        onEscape: () => {
+          ctx.setOpen(false);
+          requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+        },
+        onOutsidePointerDown: (e) => {
+          if (ctx.triggerRef.current?.contains(e.target)) return;
+          ctx.setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx(
+          Listbox,
+          {
+            multiple: true,
+            value: ctx.values,
+            onValueChange: (v) => ctx.setValues(v),
+            className: cn(className),
+            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
+            children
+          }
+        )
+      }
+    ) }) }),
+    ctx.name && ctx.values.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: v }, v))
+  ] });
+}
+var MultiSelectItem = forwardRef(
+  function MultiSelectItem2(props, ref) {
+    const ctx = useMultiSelectContext();
+    useEffect(() => {
+      ctx.registerLabel(props.value, props.children);
+      return () => ctx.unregisterLabel(props.value);
+    }, [ctx, props.value, props.children]);
+    return /* @__PURE__ */ jsx(ListboxItem, { ref, ...props });
+  }
+);
+MultiSelect.Trigger = MultiSelectTrigger;
+MultiSelect.Tags = MultiSelectTags;
+MultiSelect.Content = MultiSelectContent;
+MultiSelect.Item = MultiSelectItem;
+MultiSelect.Group = ListboxGroup;
+MultiSelect.Separator = ListboxSeparator;
+MultiSelect.Empty = ListboxEmpty;
+var ComboboxContext = createContext(null);
+function useComboboxContext() {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) throw new Error("Combobox.* must be used inside <Combobox>");
+  return ctx;
+}
+function Combobox({
+  value,
+  defaultValue,
+  onValueChange,
+  inputValue,
+  defaultInputValue,
+  onInputChange,
+  disabled = false,
+  invalid,
+  name,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  fillInputOnSelect = true,
+  children
+}) {
+  const [openState, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [valueState, setValueState] = useControlled({
+    controlled: value,
+    default: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const [inputState, setInputState] = useControlled({
+    controlled: inputValue,
+    default: defaultInputValue ?? "",
+    onChange: onInputChange
+  });
+  const itemsRef = useRef([]);
+  const inputRef = useRef(null);
+  const [activeId, setActiveId] = useState(null);
+  const listboxId = useId$1();
+  const registerItem = useCallback((entry) => {
+    const idx = itemsRef.current.findIndex((i) => i.id === entry.id);
+    if (idx >= 0) itemsRef.current[idx] = entry;
+    else itemsRef.current.push(entry);
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+  }, []);
+  const selectItem = useCallback(
+    (entry, opts) => {
+      setValueState(entry.value);
+      if (fillInputOnSelect) {
+        const text = typeof entry.label === "string" ? entry.label : entry.value;
+        setInputState(text);
+      }
+      if (opts?.close ?? true) setOpenState(false);
+    },
+    [setValueState, setInputState, setOpenState, fillInputOnSelect]
+  );
+  const ctx = useMemo(
+    () => ({
+      open: openState,
+      setOpen: setOpenState,
+      value: valueState,
+      setValue: setValueState,
+      inputValue: inputState,
+      setInputValue: setInputState,
+      activeId,
+      setActiveId,
+      registerItem,
+      unregisterItem,
+      itemsRef,
+      inputRef,
+      listboxId,
+      disabled,
+      invalid,
+      selectItem
+    }),
+    [
+      openState,
+      setOpenState,
+      valueState,
+      setValueState,
+      inputState,
+      setInputState,
+      activeId,
+      registerItem,
+      unregisterItem,
+      listboxId,
+      disabled,
+      invalid,
+      selectItem
+    ]
+  );
+  return /* @__PURE__ */ jsxs(ComboboxContext.Provider, { value: ctx, children: [
+    children,
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: valueState })
+  ] });
+}
+var ComboboxInput = forwardRef(
+  function ComboboxInput2({ className, size, state, onKeyDown, onFocus, ...rest }, forwardedRef) {
+    const ctx = useComboboxContext();
+    const inputState = state ?? (ctx.invalid ? "invalid" : "default");
+    const moveActive = useCallback(
+      (direction) => {
+        const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+        if (list.length === 0) return;
+        const idx = list.findIndex((i) => i.id === ctx.activeId);
+        let nextIdx = idx + direction;
+        if (idx === -1) nextIdx = direction === 1 ? 0 : list.length - 1;
+        if (nextIdx < 0) nextIdx = list.length - 1;
+        if (nextIdx >= list.length) nextIdx = 0;
+        const next = list[nextIdx];
+        if (next) ctx.setActiveId(next.id);
+      },
+      [ctx]
+    );
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || ctx.disabled) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!ctx.open) ctx.setOpen(true);
+          else moveActive(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!ctx.open) ctx.setOpen(true);
+          else moveActive(-1);
+          break;
+        case "Home":
+          if (ctx.open) {
+            e.preventDefault();
+            const first = ctx.itemsRef.current.find((i) => !i.disabled);
+            if (first) ctx.setActiveId(first.id);
+          }
+          break;
+        case "End":
+          if (ctx.open) {
+            e.preventDefault();
+            const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+            const last = list[list.length - 1];
+            if (last) ctx.setActiveId(last.id);
+          }
+          break;
+        case "Enter": {
+          if (!ctx.open || !ctx.activeId) return;
+          const entry = ctx.itemsRef.current.find((i) => i.id === ctx.activeId);
+          if (!entry || entry.disabled) return;
+          e.preventDefault();
+          ctx.selectItem(entry);
+          break;
+        }
+        case "Escape":
+          if (ctx.open) {
+            e.preventDefault();
+            ctx.setOpen(false);
+          } else if (ctx.inputValue) {
+            e.preventDefault();
+            ctx.setInputValue("");
+            ctx.setValue("");
+          }
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: composeRefs(forwardedRef, ctx.inputRef),
+        type: "text",
+        role: "combobox",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.listboxId,
+        "aria-activedescendant": ctx.activeId ?? void 0,
+        "aria-autocomplete": "list",
+        "aria-disabled": ctx.disabled || void 0,
+        disabled: ctx.disabled,
+        value: ctx.inputValue,
+        onChange: (e) => {
+          ctx.setInputValue(e.target.value);
+          if (!ctx.open) ctx.setOpen(true);
+          ctx.setActiveId(null);
+        },
+        onFocus: (e) => {
+          onFocus?.(e);
+          if (!ctx.open) ctx.setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        className: cn(inputBaseVariants({ size, state: inputState }), className),
+        ...rest
+      }
+    );
+  }
+);
+function ComboboxContent({
+  className,
+  placement = "bottom",
+  offset = 6,
+  children
+}) {
+  const ctx = useComboboxContext();
+  if (!ctx.open) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.inputRef.current, placement, offset, children: /* @__PURE__ */ jsx(
+    DismissableLayer,
+    {
+      onEscape: () => ctx.setOpen(false),
+      onOutsidePointerDown: (e) => {
+        if (ctx.inputRef.current?.contains(e.target)) return;
+        ctx.setOpen(false);
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: ctx.listboxId,
+          role: "listbox",
+          className: cn(listboxVariants(), className),
+          style: ctx.inputRef.current ? { minWidth: ctx.inputRef.current.offsetWidth } : void 0,
+          children
+        }
+      )
+    }
+  ) }) });
+}
+var ComboboxItem = forwardRef(function ComboboxItem2({ value, disabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
+  const ctx = useComboboxContext();
+  const id = useId$1();
+  useEffect(() => {
+    ctx.registerItem({ id, value, disabled, label: children });
+    return () => ctx.unregisterItem(id);
+  }, [ctx, id, value, disabled, children]);
+  useEffect(() => {
+    if (!ctx.activeId) {
+      const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+      if (list[0]) ctx.setActiveId(list[0].id);
+    }
+  }, [ctx]);
+  const isSelected = ctx.value === value;
+  const isActive = ctx.activeId === id;
+  const state = disabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: forwardedRef,
+      id,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": disabled || void 0,
+      "data-active": isActive ? "" : void 0,
+      "data-selected": isSelected ? "" : void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || disabled) return;
+        ctx.selectItem({ id, value, disabled, label: children });
+      },
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        if (!disabled) ctx.setActiveId(id);
+      },
+      className: cn(listboxItemVariants({ state }), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 opacity-80" })
+      ]
+    }
+  );
+});
+function ComboboxGroup({ label, children, className, ...rest }) {
+  const labelId = useId$1();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label ? labelId : void 0, className, ...rest, children: [
+    label && /* @__PURE__ */ jsx("div", { id: labelId, className: listboxGroupLabelVariants(), children: label }),
+    children
+  ] });
+}
+function ComboboxSeparator(props) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: listboxSeparatorVariants(), ...props });
+}
+function ComboboxEmpty({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "presentation", className: cn(listboxEmptyVariants(), className), ...rest, children });
+}
+Combobox.Input = ComboboxInput;
+Combobox.Content = ComboboxContent;
+Combobox.Item = ComboboxItem;
+Combobox.Group = ComboboxGroup;
+Combobox.Separator = ComboboxSeparator;
+Combobox.Empty = ComboboxEmpty;
+
+export { CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch, SwitchField, TelInput, TextInput, Textarea, UrlInput };
+//# sourceMappingURL=chunk-SBVWECJP.js.map
+//# sourceMappingURL=chunk-SBVWECJP.js.map