@wow-two-beta/ui 0.0.7 → 0.0.9

package/dist/chunk-SBVWECJP.js

@@ -0,0 +1,2034 @@
+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, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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) => {
+    const ctx = useFormControl();
+    const isRequired = required ?? ctx?.isRequired ?? false;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        htmlFor: htmlFor ?? ctx?.id,
+        id: id ?? ctx?.labelId,
+        className: cn(
+          "text-sm font-medium text-foreground",
+          ctx?.isDisabled && "opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          isRequired && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-destructive", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var FormHelperText = forwardRef(
+  ({ className, id, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: id ?? ctx?.helperId,
+        className: cn("text-sm text-muted-foreground", className),
+        ...props
+      }
+    );
+  }
+);
+FormHelperText.displayName = "FormHelperText";
+var FormErrorMessage = forwardRef(
+  ({ className, id, ...props }, ref) => {
+    const ctx = useFormControl();
+    if (ctx && !ctx.isInvalid) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: id ?? ctx?.errorId,
+        role: "alert",
+        className: cn("text-sm text-destructive", className),
+        ...props
+      }
+    );
+  }
+);
+FormErrorMessage.displayName = "FormErrorMessage";
+var Fieldset = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      ref,
+      className: cn("m-0 min-w-0 border-0 p-0", className),
+      ...props
+    }
+  )
+);
+Fieldset.displayName = "Fieldset";
+var Legend = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "legend",
+    {
+      ref,
+      className: cn("mb-2 text-sm font-medium text-foreground", className),
+      ...props
+    }
+  )
+);
+Legend.displayName = "Legend";
+
+// src/forms/_styles.ts
+var inputBaseVariants = tv({
+  base: "flex w-full rounded-md border bg-background text-foreground placeholder:text-subtle-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted",
+  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 TextInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+TextInput.displayName = "TextInput";
+var EmailInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "email",
+        autoComplete: "email",
+        inputMode: "email",
+        spellCheck: false,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+EmailInput.displayName = "EmailInput";
+var TelInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "tel",
+        autoComplete: "tel",
+        inputMode: "tel",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+TelInput.displayName = "TelInput";
+var UrlInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "url",
+        autoComplete: "url",
+        inputMode: "url",
+        spellCheck: false,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+UrlInput.displayName = "UrlInput";
+var NumberInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, step = 1, ...props }, forwardedRef) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const adjust = (direction) => {
+      const el = inputRef.current;
+      if (!el || typeof el.stepUp !== "function") return;
+      if (direction === 1) el.stepUp(step);
+      else el.stepDown(step);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          inputMode: "decimal",
+          step,
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(inputBaseVariants({ size, state: finalState }), "pr-12 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            onClick: () => adjust(-1),
+            "aria-label": "Decrement",
+            className: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+            children: /* @__PURE__ */ jsx(Icon, { icon: Minus, size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            onClick: () => adjust(1),
+            "aria-label": "Increment",
+            className: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+            children: /* @__PURE__ */ jsx(Icon, { icon: Plus, size: 14 })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+var PasswordInput = forwardRef(
+  ({
+    className,
+    size,
+    state,
+    id,
+    disabled,
+    required,
+    readOnly,
+    toggleable = true,
+    autoComplete = "current-password",
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: visible ? "text" : "password",
+          autoComplete,
+          spellCheck: false,
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(inputBaseVariants({ size, state: finalState }), toggleable && "pr-10"),
+          ...props
+        }
+      ),
+      toggleable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: () => setVisible((v) => !v),
+          "aria-label": visible ? "Hide password" : "Show password",
+          "aria-pressed": visible,
+          className: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+          children: /* @__PURE__ */ jsx(Icon, { icon: visible ? EyeOff : Eye, size: 16 })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var SearchInput = forwardRef(
+  ({
+    className,
+    size,
+    state,
+    id,
+    disabled,
+    required,
+    readOnly,
+    clearable = true,
+    onClear,
+    onChange,
+    defaultValue,
+    value,
+    ...props
+  }, forwardedRef) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const isControlled = value !== void 0;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolled;
+    const showClear = clearable && String(currentValue ?? "").length > 0;
+    const handleClear = () => {
+      const el = inputRef.current;
+      if (el) {
+        const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+        setter?.call(el, "");
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.focus();
+      }
+      if (!isControlled) setUncontrolled("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: Search,
+          size: 16,
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-subtle-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          id: id ?? ctx?.id,
+          value: isControlled ? value : void 0,
+          defaultValue: !isControlled ? defaultValue : void 0,
+          onChange: (e) => {
+            if (!isControlled) setUncontrolled(e.target.value);
+            onChange?.(e);
+          },
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(
+            inputBaseVariants({ size, state: finalState }),
+            "pl-9",
+            showClear && "pr-9",
+            "[&::-webkit-search-cancel-button]:appearance-none"
+          ),
+          ...props
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: handleClear,
+          "aria-label": "Clear search",
+          className: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-subtle-foreground hover:bg-muted hover:text-muted-foreground",
+          children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 14 })
+        }
+      )
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+var Textarea = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, rows = 3, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        rows,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(
+          inputBaseVariants({ size, state: finalState }),
+          "h-auto resize-y py-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var SIZE_CLASS = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Checkbox = forwardRef(
+  ({ className, size = "md", indeterminate, id, disabled, required, checked, ...props }, ref) => {
+    const ctx = useFormControl();
+    const isDisabled = disabled ?? ctx?.isDisabled;
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          checked,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none grid h-full w-full place-items-center rounded-sm border border-input bg-background text-primary-foreground transition-colors",
+            "peer-checked:border-primary peer-checked:bg-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50",
+            indeterminate && "border-primary bg-primary"
+          ),
+          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { size: Math.round(SIZE_CLASS[size].length * 1.4), className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 opacity-0 peer-checked:opacity-100" })
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var SIZE_CLASS2 = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Radio = forwardRef(
+  ({ className, size = "md", id, disabled, required, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS2[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "radio",
+          id: id ?? ctx?.id,
+          disabled: disabled ?? ctx?.isDisabled,
+          required: required ?? ctx?.isRequired,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none grid h-full w-full place-items-center rounded-full border border-input bg-background transition-colors",
+            "peer-checked:border-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary opacity-0 peer-checked:opacity-100" })
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var TRACK_CLASS = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9",
+  lg: "h-6 w-11"
+};
+var THUMB_CLASS = {
+  sm: "h-3 w-3 peer-checked:translate-x-3",
+  md: "h-4 w-4 peer-checked:translate-x-4",
+  lg: "h-5 w-5 peer-checked:translate-x-5"
+};
+var Switch = forwardRef(
+  ({ className, size = "md", id, disabled, required, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", TRACK_CLASS[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          role: "switch",
+          id: id ?? ctx?.id,
+          disabled: disabled ?? ctx?.isDisabled,
+          required: required ?? ctx?.isRequired,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none flex h-full w-full items-center rounded-full bg-input px-0.5 transition-colors",
+            "peer-checked:bg-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "rounded-full bg-background shadow-sm transition-transform duration-150",
+                THUMB_CLASS[size]
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var TRACK_CLASS2 = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2"
+};
+var Slider = forwardRef(
+  ({ className, size = "md", id, disabled, required, min = 0, max = 100, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "range",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        min,
+        max,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        className: cn(
+          "w-full appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
+          // WebKit
+          "[&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted",
+          `[&::-webkit-slider-runnable-track]:${TRACK_CLASS2[size]}`,
+          "[&::-webkit-slider-thumb]:mt-[-6px] [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
+          // Firefox
+          `[&::-moz-range-track]:${TRACK_CLASS2[size]}`,
+          "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted",
+          "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background",
+          "focus-visible:outline-none focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-ring",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var FormField = forwardRef(
+  ({ label, helper, error, isRequired, isDisabled, isReadOnly, children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    FormControlProvider,
+    {
+      isInvalid: Boolean(error),
+      isRequired,
+      isDisabled,
+      isReadOnly,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col gap-1.5", className),
+          ...props,
+          children: [
+            label && /* @__PURE__ */ jsx(Label, { children: label }),
+            children,
+            error ? /* @__PURE__ */ jsx(FormErrorMessage, { children: error }) : helper && /* @__PURE__ */ jsx(FormHelperText, { children: helper })
+          ]
+        }
+      )
+    }
+  )
+);
+FormField.displayName = "FormField";
+var CheckboxField = forwardRef(
+  ({ label, description, id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn("flex items-start gap-2.5 cursor-pointer", wrapperClassName),
+        children: [
+          /* @__PURE__ */ jsx(Checkbox, { ref, id: inputId, className, ...props }),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CheckboxField.displayName = "CheckboxField";
+var RadioField = forwardRef(
+  ({ label, description, id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("flex items-start gap-2.5 cursor-pointer", wrapperClassName), children: [
+      /* @__PURE__ */ jsx(Radio, { ref, id: inputId, className, ...props }),
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+      ] })
+    ] });
+  }
+);
+RadioField.displayName = "RadioField";
+var SwitchField = forwardRef(
+  ({ label, description, side = "left", id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    const text = /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "flex cursor-pointer items-start gap-3",
+          side === "right" && "flex-row-reverse justify-between",
+          wrapperClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Switch, { ref, id: inputId, className, ...props }),
+          text
+        ]
+      }
+    );
+  }
+);
+SwitchField.displayName = "SwitchField";
+var CheckboxGroup = forwardRef(
+  ({
+    legend,
+    value,
+    defaultValue,
+    onValueChange,
+    isDisabled,
+    orientation = "vertical",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [selected, setSelected] = useControlled({
+      controlled: value,
+      default: defaultValue ?? [],
+      onChange: onValueChange
+    });
+    const toggle = (v) => {
+      if (v === void 0) return;
+      setSelected(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+    };
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+      legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const c = child;
+        const v = c.props.value;
+        return cloneElement(c, {
+          checked: v !== void 0 && selected.includes(v),
+          onChange: () => toggle(v)
+        });
+      }) })
+    ] });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var RadioGroup = forwardRef(
+  ({
+    legend,
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    isDisabled,
+    orientation = "vertical",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const generatedName = useId$1();
+    const groupName = name ?? generatedName;
+    const [selected, setSelected] = useControlled({
+      controlled: value,
+      default: defaultValue ?? null,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+      legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const c = child;
+        const v = c.props.value;
+        return cloneElement(c, {
+          name: groupName,
+          checked: v !== void 0 && selected === v,
+          onChange: () => setSelected(v ?? null)
+        });
+      }) })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var SIZE = {
+  sm: "h-9 w-9 text-base",
+  md: "h-11 w-11 text-lg",
+  lg: "h-14 w-14 text-xl"
+};
+var PinInput = forwardRef(
+  ({
+    length = 6,
+    value,
+    defaultValue,
+    onValueChange,
+    onComplete,
+    type = "numeric",
+    size = "md",
+    mask,
+    isDisabled,
+    className,
+    ...props
+  }, ref) => {
+    const [val, setVal] = useControlled({
+      controlled: value,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    const cells = Array.from({ length }, (_, i) => val[i] ?? "");
+    const inputs = useRef([]);
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => wrapperRef.current);
+    const isAllowed = (ch) => type === "numeric" ? /^[0-9]$/.test(ch) : /^[A-Za-z0-9]$/.test(ch);
+    const update = (next) => {
+      const trimmed = next.slice(0, length);
+      setVal(trimmed);
+      if (trimmed.length === length) onComplete?.(trimmed);
+    };
+    const handleChange = (i, raw) => {
+      const ch = raw.slice(-1);
+      if (ch && !isAllowed(ch)) return;
+      const arr = cells.slice();
+      arr[i] = ch;
+      const next = arr.join("").slice(0, length);
+      update(next);
+      if (ch && i < length - 1) inputs.current[i + 1]?.focus();
+    };
+    const handleKeyDown = (i, e) => {
+      if (e.key === "Backspace" && !cells[i] && i > 0) {
+        inputs.current[i - 1]?.focus();
+      } else if (e.key === "ArrowLeft" && i > 0) {
+        e.preventDefault();
+        inputs.current[i - 1]?.focus();
+      } else if (e.key === "ArrowRight" && i < length - 1) {
+        e.preventDefault();
+        inputs.current[i + 1]?.focus();
+      }
+    };
+    const handlePaste = (e) => {
+      const pasted = e.clipboardData.getData("text").replace(/\s+/g, "");
+      const filtered = pasted.split("").filter(isAllowed).join("");
+      if (filtered) {
+        e.preventDefault();
+        update(filtered);
+        const focusIdx = Math.min(filtered.length, length - 1);
+        inputs.current[focusIdx]?.focus();
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: cn("inline-flex gap-2", className), ...props, children: cells.map((ch, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputs.current[i] = el;
+        },
+        type: mask ? "password" : "text",
+        inputMode: type === "numeric" ? "numeric" : "text",
+        autoComplete: "one-time-code",
+        maxLength: 1,
+        disabled: isDisabled,
+        value: ch,
+        onChange: (e) => handleChange(i, e.target.value),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: handlePaste,
+        className: cn(
+          inputBaseVariants({ state: "default" }),
+          "text-center font-medium",
+          SIZE[size]
+        )
+      },
+      i
+    )) });
+  }
+);
+PinInput.displayName = "PinInput";
+function applyMask(raw, mask) {
+  let out = "";
+  let r = 0;
+  for (let m = 0; m < mask.length && r < raw.length; m++) {
+    const tok = mask[m];
+    const ch = raw[r];
+    if (!tok || !ch) break;
+    if (tok === "#") {
+      if (/[0-9]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else if (tok === "A") {
+      if (/[A-Za-z]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else if (tok === "*") {
+      if (/[A-Za-z0-9]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else {
+      out += tok;
+      if (ch === tok) r++;
+    }
+  }
+  return out;
+}
+var MaskedInput = forwardRef(
+  ({ className, size, state, mask, value, defaultValue, onValueChange, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const [val, setVal] = useControlled({
+      controlled: value,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        value: val,
+        onChange: (e) => setVal(applyMask(e.target.value, mask)),
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+MaskedInput.displayName = "MaskedInput";
+var CurrencyInput = forwardRef(
+  ({ symbol = "$", className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: symbol }),
+    /* @__PURE__ */ jsx(NumberInput, { ref, ...props, className: "pl-7" })
+  ] })
+);
+CurrencyInput.displayName = "CurrencyInput";
+var PercentInput = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(NumberInput, { ref, ...props, className: "pr-16" }),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "%" })
+  ] })
+);
+PercentInput.displayName = "PercentInput";
+var CharacterCount = forwardRef(
+  ({ value, max, showMax = true, className, ...props }, ref) => {
+    const over = value > max;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "aria-live": "polite",
+        className: cn(
+          "text-right text-xs",
+          over ? "text-destructive" : "text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          value,
+          showMax && ` / ${max}`
+        ]
+      }
+    );
+  }
+);
+CharacterCount.displayName = "CharacterCount";
+var InputAddon = forwardRef(
+  ({ leading, trailing, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex w-full items-stretch [&>*]:rounded-none",
+        "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+        "[&>*:not(:first-child)]:-ml-px",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground", children: leading }),
+        children,
+        trailing && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground", children: trailing })
+      ]
+    }
+  )
+);
+InputAddon.displayName = "InputAddon";
+var InputGroup = forwardRef(
+  ({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex w-full",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px",
+        className
+      ),
+      ...props
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+var LabeledInput = forwardRef(
+  ({ label, children, trailing, className, ...props }, ref) => {
+    const generated = useId();
+    const id = children.props.id ?? generated;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: trailing })
+      ] }),
+      React.cloneElement(children, { id })
+    ] });
+  }
+);
+LabeledInput.displayName = "LabeledInput";
+var SIZE2 = {
+  sm: "p-3 text-xs",
+  md: "p-4 text-sm",
+  lg: "p-5 text-base"
+};
+var ChoiceCard = forwardRef(
+  ({ label, description, icon, size = "md", id, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "group relative block cursor-pointer rounded-lg border border-input bg-card text-card-foreground transition-colors",
+          "hover:border-border-strong has-[:checked]:border-primary has-[:checked]:bg-primary-soft/30",
+          "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+          SIZE2[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Radio, { ref, id: inputId, className: "absolute right-3 top-3", ...props }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 pr-7", children: [
+            icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: icon }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: label }),
+              description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-muted-foreground", children: description })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChoiceCard.displayName = "ChoiceCard";
+var LABELS = ["Too weak", "Weak", "Fair", "Strong", "Excellent"];
+var TONE = ["bg-destructive", "bg-destructive", "bg-warning", "bg-success", "bg-success"];
+function scorePassword(pw) {
+  let score = 0;
+  if (pw.length >= 8) score++;
+  if (pw.length >= 12) score++;
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
+  if (/\d/.test(pw)) score++;
+  if (/[^A-Za-z0-9]/.test(pw)) score++;
+  return Math.min(4, score);
+}
+var PasswordStrength = forwardRef(
+  ({ value, score, hideLabel, className, ...props }, ref) => {
+    const s = score ?? (value.length === 0 ? 0 : scorePassword(value));
+    const label = LABELS[s] ?? "";
+    const tone = TONE[s] ?? "bg-destructive";
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1", "aria-hidden": "true", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-1 flex-1 rounded-full bg-muted transition-colors",
+            i < s && tone
+          )
+        },
+        i
+      )) }),
+      !hideLabel && value && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: label })
+    ] });
+  }
+);
+PasswordStrength.displayName = "PasswordStrength";
+var SIZE3 = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+var FilePicker = forwardRef(
+  ({ label = "Choose file", onFilesChange, preview, size = "md", className, disabled, ...props }, ref) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-3", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => inputRef.current?.click(),
+          className: cn(
+            "inline-flex items-center gap-2 rounded-md border border-input bg-background font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            SIZE3[size]
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: Upload, size: 16 }),
+            label
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          disabled,
+          className: "sr-only",
+          onChange: (e) => onFilesChange?.(e.target.files),
+          ...props
+        }
+      ),
+      preview && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: preview })
+    ] });
+  }
+);
+FilePicker.displayName = "FilePicker";
+
+// 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