@page-speed/forms 0.5.2 → 0.5.3

package/dist/chunk-5NT5T5XY.js

@@ -0,0 +1,4136 @@
+import { cn, INPUT_AUTOFILL_RESET_CLASSES, Field, FieldLabel, FieldDescription, LabelGroup, Button, buttonVariants } from './chunk-232KNGJI.js';
+import * as React21 from 'react';
+import { Dialog as Dialog$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1, Popover as Popover$1 } from 'radix-ui';
+import { Command as Command$1 } from 'cmdk';
+import { useDirection } from '@radix-ui/react-direction';
+import { Slot } from '@radix-ui/react-slot';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+
+var Input = React21.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React21.createElement(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          // Core structure - no hardcoded colors, uses CSS variables
+          "flex h-9 w-full min-w-0 rounded-md border border-input",
+          "bg-transparent px-3 py-1 text-base shadow-sm",
+          "transition-colors outline-none md:text-sm",
+          // Focus state - uses ring-ring CSS variable (adapts to theme)
+          "focus-visible:ring-1 focus-visible:ring-ring",
+          // Error state - uses destructive CSS variables (adapts to theme)
+          "aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive",
+          // Disabled state - no color hardcoding
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          // File input specific - inherits text color from parent
+          "file:inline-flex file:h-7 file:border-0 file:bg-transparent",
+          "file:text-sm file:font-medium",
+          // Autofill reset - prevents browser from overriding our dynamic colors
+          INPUT_AUTOFILL_RESET_CLASSES,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/inputs/TextInput.tsx
+function TextInput({
+  name,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  type = "text",
+  id = "text",
+  ...props
+}) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const hasValue = String(value ?? "").trim().length > 0;
+  return /* @__PURE__ */ React21.createElement(
+    Input,
+    {
+      type,
+      id,
+      name,
+      value: value ?? "",
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      required,
+      className: cn(
+        // Valid value indicator - ring-2 when has value and no error
+        !error && hasValue && "ring-2 ring-ring",
+        // Error state - handled by Input component via aria-invalid
+        className
+      ),
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  );
+}
+TextInput.displayName = "TextInput";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ React21.createElement(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        // Core structure - uses CSS variables only
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input",
+        "bg-transparent px-3 py-2 text-base shadow-xs",
+        "transition-[color,box-shadow] outline-none md:text-sm",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/inputs/TextArea.tsx
+function TextArea({
+  name,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  rows = 3,
+  cols,
+  maxLength,
+  minLength,
+  wrap = "soft",
+  ...props
+}) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const hasValue = String(value ?? "").trim().length > 0;
+  return /* @__PURE__ */ React21.createElement(
+    Textarea,
+    {
+      name,
+      value: value ?? "",
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      required,
+      className: cn(
+        // Valid value indicator - ring-2 when has value and no error
+        !error && hasValue && "ring-2 ring-ring",
+        // Error state - handled by Textarea component via aria-invalid
+        className
+      ),
+      rows,
+      cols,
+      maxLength,
+      minLength,
+      wrap,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  );
+}
+TextArea.displayName = "TextArea";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        // Core structure - uses CSS variables
+        "peer size-4 shrink-0 rounded-[4px] border border-input bg-transparent shadow-xs",
+        "transition-shadow outline-none",
+        // Checked state - uses primary CSS variables
+        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "data-[state=checked]:border-primary",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      Checkbox$1.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "grid place-content-center text-current transition-none"
+      },
+      /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React21.createElement("polyline", { points: "20 6 9 17 4 12" })
+      )
+    )
+  );
+}
+
+// src/inputs/Checkbox.tsx
+function Checkbox2({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  label,
+  description,
+  useChoiceCard = false,
+  ...props
+}) {
+  const checkboxId = props.id || `checkbox-${name}`;
+  const handleCheckedChange = (checked) => {
+    onChange(checked);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const showChoiceCard = useChoiceCard || !!description;
+  const checkbox = /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      type: "checkbox",
+      name,
+      checked: value,
+      onChange: () => {
+      },
+      disabled,
+      required,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: 0,
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: 0
+      }
+    }
+  ), /* @__PURE__ */ React21.createElement(
+    Checkbox,
+    {
+      id: checkboxId,
+      checked: value,
+      onCheckedChange: handleCheckedChange,
+      onBlur: handleBlur,
+      disabled,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  ));
+  if (!label) {
+    return /* @__PURE__ */ React21.createElement(Field, { className }, checkbox);
+  }
+  return /* @__PURE__ */ React21.createElement(Field, { className: "gap-0", invalid: Boolean(error) }, /* @__PURE__ */ React21.createElement(
+    FieldLabel,
+    {
+      htmlFor: checkboxId,
+      className: cn(
+        "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
+        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
+        showChoiceCard && value && "ring-2 ring-ring",
+        showChoiceCard && error && "border-destructive",
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        className
+      )
+    },
+    /* @__PURE__ */ React21.createElement(
+      "div",
+      {
+        className: cn(
+          "flex w-full gap-3",
+          showChoiceCard ? "items-start" : "items-center"
+        )
+      },
+      checkbox,
+      /* @__PURE__ */ React21.createElement(Field, { className: "flex-1 gap-1" }, /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React21.createElement(
+        FieldDescription,
+        {
+          id: `${checkboxId}-description`,
+          className: "leading-snug"
+        },
+        description
+      ))
+    )
+  ));
+}
+Checkbox2.displayName = "Checkbox";
+function CheckboxGroup({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  layout = "stacked",
+  label,
+  description,
+  options,
+  showSelectAll = false,
+  selectAllLabel = "Select all",
+  minSelections,
+  maxSelections,
+  renderOption,
+  gridColumns = 2,
+  ...props
+}) {
+  const enabledOptions = options.filter((opt) => !opt.disabled);
+  const enabledValues = enabledOptions.map((opt) => opt.value);
+  const selectedEnabledCount = value.filter(
+    (v) => enabledValues.includes(v)
+  ).length;
+  const allSelected = selectedEnabledCount === enabledOptions.length;
+  const someSelected = selectedEnabledCount > 0 && !allSelected;
+  const useChoiceCard = React21.useMemo(() => {
+    if (!options) return false;
+    return options?.some((opt) => opt.description);
+  }, [options]);
+  const countableValue = React21.useMemo(() => {
+    if (value?.length > 0) {
+      return value.length;
+    }
+    return 0;
+  }, [value]);
+  const handleChange = (optionValue, checked) => {
+    const newValues = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    if (maxSelections && checked && newValues.length > maxSelections) {
+      return;
+    }
+    onChange(newValues);
+  };
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      const allValues = enabledOptions.map((opt) => opt.value);
+      onChange(allValues);
+    } else {
+      onChange([]);
+    }
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
+  const containerClass = React21.useMemo(() => {
+    return cn(
+      "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
+      (layout === "grid" || layout === "inline") && "md:grid-cols-2",
+      className
+    );
+  }, [layout, className]);
+  const groupDescriptionId = description ? `${name}-description` : void 0;
+  const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ React21.createElement(
+    "fieldset",
+    {
+      className: containerClass,
+      role: "group",
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": groupAriaDescribedBy,
+      "aria-required": required || props["aria-required"],
+      "aria-label": typeof label === "string" ? label : props["aria-label"]
+    },
+    /* @__PURE__ */ React21.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "legend",
+        secondaryId: groupDescriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React21.createElement(
+      Checkbox2,
+      {
+        name: `${name}-select-all`,
+        id: `${name}-select-all`,
+        value: allSelected,
+        onChange: handleSelectAll,
+        onBlur: handleBlur,
+        indeterminate: someSelected,
+        label: selectAllLabel,
+        useChoiceCard,
+        disabled,
+        "aria-label": selectAllLabel
+      }
+    ),
+    options.map((option) => {
+      const isChecked = value.includes(option.value);
+      const isDisabled = disabled || option.disabled || maxReached && !isChecked;
+      return /* @__PURE__ */ React21.createElement(
+        Checkbox2,
+        {
+          key: option.value,
+          name,
+          id: `${name}-${option.value}`,
+          value: isChecked,
+          onChange: (checked) => handleChange(option.value, checked),
+          onBlur: handleBlur,
+          disabled: isDisabled,
+          required: required && minSelections ? value.length < minSelections : false,
+          error,
+          label: renderOption ? renderOption(option) : option.label,
+          description: renderOption ? void 0 : option.description,
+          useChoiceCard
+        }
+      );
+    }),
+    (minSelections || maxSelections) && /* @__PURE__ */ React21.createElement(
+      FieldDescription,
+      {
+        className: cn(
+          "p-2 rounded-lg border font-semibold mt-2 leading-snug",
+          minSelections && countableValue < minSelections ? "border-destructive bg-destructive/80 text-destructive-foreground" : "border-border bg-card text-card-foreground"
+        ),
+        "aria-live": "polite"
+      },
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React21.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React21.createElement("span", null, countableValue, "/", maxSelections, " selected")
+    )
+  );
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    RadioGroup$1.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    RadioGroup$1.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        // Core structure - uses CSS variables
+        "aspect-square size-4 shrink-0 rounded-full border border-input bg-transparent shadow-xs",
+        "text-primary transition-[color,box-shadow] outline-none",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      RadioGroup$1.Indicator,
+      {
+        "data-slot": "radio-group-indicator",
+        className: "relative flex items-center justify-center"
+      },
+      /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React21.createElement("circle", { cx: "12", cy: "12", r: "12" })
+      )
+    )
+  );
+}
+
+// src/inputs/Radio.tsx
+function Radio({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  layout = "stacked",
+  label,
+  description,
+  options,
+  ...props
+}) {
+  const handleValueChange = (selectedValue) => {
+    onChange(selectedValue);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const useChoiceCard = React21.useMemo(() => {
+    return options.some((option) => option.description);
+  }, [options]);
+  const groupDescriptionId = description ? `${name}-description` : void 0;
+  return /* @__PURE__ */ React21.createElement(Field, { className: cn("w-full", className), invalid: Boolean(error) }, (label || description) && /* @__PURE__ */ React21.createElement(Field, { className: "mb-3 gap-1" }, label && /* @__PURE__ */ React21.createElement("div", { className: "text-base font-medium leading-none" }, label), description && /* @__PURE__ */ React21.createElement(
+    FieldDescription,
+    {
+      id: groupDescriptionId,
+      className: "leading-snug"
+    },
+    description
+  )), /* @__PURE__ */ React21.createElement(
+    RadioGroup,
+    {
+      name,
+      value,
+      onValueChange: handleValueChange,
+      onBlur: handleBlur,
+      disabled,
+      required,
+      className: cn(
+        "gap-3",
+        layout === "grid" && "grid grid-cols-1 md:grid-cols-2",
+        layout === "inline" && "flex flex-wrap"
+      ),
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": groupDescriptionId || props["aria-describedby"],
+      "aria-required": required || props["aria-required"]
+    },
+    options.map((option) => {
+      const isSelected = value === option.value;
+      const isDisabled = disabled || option.disabled;
+      const radioId = `${name}-${option.value}`;
+      const hasDescription = !!option.description;
+      return /* @__PURE__ */ React21.createElement(
+        FieldLabel,
+        {
+          key: option.value,
+          htmlFor: radioId,
+          className: cn(
+            "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
+            useChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
+            useChoiceCard && isSelected && "ring-2 ring-ring",
+            useChoiceCard && error && "border-destructive",
+            isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+          )
+        },
+        /* @__PURE__ */ React21.createElement(
+          Field,
+          {
+            orientation: "horizontal",
+            className: cn(
+              "flex w-full gap-3",
+              useChoiceCard ? "items-start" : "items-center"
+            )
+          },
+          /* @__PURE__ */ React21.createElement(
+            RadioGroupItem,
+            {
+              value: option.value,
+              id: radioId,
+              disabled: isDisabled,
+              className: "mt-0.5",
+              "aria-describedby": hasDescription ? `${radioId}-description` : void 0
+            }
+          ),
+          /* @__PURE__ */ React21.createElement(Field, { className: "flex-1 gap-1" }, /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-medium leading-none" }, option.label), option.description && /* @__PURE__ */ React21.createElement(
+            FieldDescription,
+            {
+              id: `${radioId}-description`,
+              className: "leading-snug"
+            },
+            option.description
+          ))
+        )
+      );
+    })
+  ));
+}
+Radio.displayName = "Radio";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        // Core structure - uses CSS variables
+        "peer group/switch inline-flex shrink-0 items-center rounded-full",
+        "border border-transparent shadow-xs transition-all outline-none",
+        // State-based backgrounds - use CSS variables
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        // Focus state
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Size variants
+        "data-[size=default]:h-[1.15rem] data-[size=default]:w-8",
+        "data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      Switch$1.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn(
+          // Thumb appearance - inherits from parent theme
+          "bg-background pointer-events-none block rounded-full ring-0 transition-transform",
+          // Size variants
+          "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3",
+          // Position based on state
+          "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  );
+}
+
+// src/inputs/Switch.tsx
+function Switch2({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  label,
+  description,
+  size = "default",
+  ...props
+}) {
+  const switchId = props.id || `switch-${name}`;
+  const handleCheckedChange = (checked) => {
+    onChange(checked);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const switchElement = /* @__PURE__ */ React21.createElement(
+    Switch,
+    {
+      id: switchId,
+      checked: value,
+      onCheckedChange: handleCheckedChange,
+      onBlur: handleBlur,
+      disabled,
+      size,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": description ? `${switchId}-description` : props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ React21.createElement(Field, { className }, switchElement);
+  }
+  return /* @__PURE__ */ React21.createElement(Field, { className: "gap-0", invalid: Boolean(error) }, /* @__PURE__ */ React21.createElement(
+    FieldLabel,
+    {
+      htmlFor: switchId,
+      className: cn(
+        "flex items-center gap-3 cursor-pointer select-auto font-normal leading-normal",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )
+    },
+    switchElement,
+    /* @__PURE__ */ React21.createElement(Field, { className: "gap-1" }, /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React21.createElement(
+      FieldDescription,
+      {
+        id: `${switchId}-description`,
+        className: "leading-snug"
+      },
+      description
+    ))
+  ));
+}
+Switch2.displayName = "Switch";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Select$1.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        // Core structure - uses CSS variables
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input",
+        "bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
+        "transition-[color,box-shadow] outline-none",
+        // Focus state
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Size variants
+        "data-[size=default]:h-9 data-[size=sm]:h-8",
+        // Value styling
+        "*:data-[slot=select-value]:line-clamp-1",
+        "*:data-[slot=select-value]:flex",
+        "*:data-[slot=select-value]:items-center",
+        "*:data-[slot=select-value]:gap-2",
+        // SVG styling
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React21.createElement(Select$1.Icon, { asChild: true }, /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        className: "size-4 opacity-50",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React21.createElement("polyline", { points: "6 9 12 15 18 9" })
+    ))
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Select$1.Portal, null, /* @__PURE__ */ React21.createElement(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(SelectScrollUpButton, null),
+    /* @__PURE__ */ React21.createElement(
+      Select$1.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+        )
+      },
+      children
+    ),
+    /* @__PURE__ */ React21.createElement(SelectScrollDownButton, null)
+  ));
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Select$1.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("px-2 py-1.5 text-xs opacity-70", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        // Core structure - inherits text color
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm",
+        "py-1.5 pr-8 pl-2 text-sm outline-hidden select-none",
+        // Focus state - uses accent CSS variable
+        "focus:bg-accent focus:text-accent-foreground",
+        // Disabled state
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // SVG styling
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Span styling
+        "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      "span",
+      {
+        "data-slot": "select-item-indicator",
+        className: "absolute right-2 flex size-3.5 items-center justify-center"
+      },
+      /* @__PURE__ */ React21.createElement(Select$1.ItemIndicator, null, /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          className: "size-4",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React21.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ))
+    ),
+    /* @__PURE__ */ React21.createElement(Select$1.ItemText, null, children)
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        className: "size-4",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React21.createElement("polyline", { points: "18 15 12 9 6 15" })
+    )
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        className: "size-4",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React21.createElement("polyline", { points: "6 9 12 15 18 9" })
+    )
+  );
+}
+
+// src/inputs/Select.tsx
+function Select2({
+  name,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select...",
+  options = [],
+  optionGroups = [],
+  renderOption,
+  ...props
+}) {
+  const [hasInteracted, setHasInteracted] = React21.useState(false);
+  const allOptions = React21.useMemo(() => {
+    if (optionGroups.length > 0) {
+      return optionGroups.flatMap((group) => group.options);
+    }
+    return options;
+  }, [options, optionGroups]);
+  const hasValue = Boolean(value);
+  const selectValue = value ? String(value) : void 0;
+  const handleValueChange = (newValue) => {
+    onChange(newValue);
+  };
+  const handleOpenChange = (open) => {
+    if (open) {
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
+      onFocus?.();
+    } else if (hasInteracted) {
+      onBlur?.();
+    }
+  };
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      type: "hidden",
+      name,
+      value: value ?? "",
+      disabled,
+      required,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: "0"
+      }
+    }
+  ), /* @__PURE__ */ React21.createElement(
+    Select,
+    {
+      value: selectValue,
+      onValueChange: handleValueChange,
+      onOpenChange: handleOpenChange,
+      disabled
+    },
+    /* @__PURE__ */ React21.createElement(
+      SelectTrigger,
+      {
+        className: cn(
+          // Valid value indicator - ring-2 when has value and no error
+          !error && hasValue && "ring-2 ring-ring",
+          // Error state - handled by SelectTrigger via aria-invalid
+          className
+        ),
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-required": required || props["aria-required"]
+      },
+      /* @__PURE__ */ React21.createElement(SelectValue, { placeholder })
+    ),
+    /* @__PURE__ */ React21.createElement(SelectContent, null, optionGroups.length > 0 ? (
+      // Render grouped options
+      optionGroups.map((group, groupIndex) => /* @__PURE__ */ React21.createElement(SelectGroup, { key: groupIndex }, /* @__PURE__ */ React21.createElement(SelectLabel, null, group.label), group.options.map((option) => /* @__PURE__ */ React21.createElement(
+        SelectItem,
+        {
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
+        },
+        renderOption ? renderOption(option) : option.label
+      ))))
+    ) : (
+      // Render flat options
+      allOptions.map((option) => /* @__PURE__ */ React21.createElement(
+        SelectItem,
+        {
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
+        },
+        renderOption ? renderOption(option) : option.label
+      ))
+    ))
+  ));
+}
+Select2.displayName = "Select";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+}
+var DialogOverlay = React21.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React21.createElement(
+    Dialog$1.Overlay,
+    {
+      ref,
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogOverlay.displayName = Dialog$1.Overlay.displayName;
+var DialogContent = React21.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => {
+  return /* @__PURE__ */ React21.createElement(DialogPortal, { "data-slot": "dialog-portal" }, /* @__PURE__ */ React21.createElement(DialogOverlay, null), /* @__PURE__ */ React21.createElement(
+    Dialog$1.Content,
+    {
+      ref,
+      "data-slot": "dialog-content",
+      className: cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+        className
+      ),
+      ...props
+    },
+    children,
+    showCloseButton && /* @__PURE__ */ React21.createElement(
+      Dialog$1.Close,
+      {
+        "data-slot": "dialog-close",
+        className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      },
+      /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          className: "size-4",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React21.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ React21.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ),
+      /* @__PURE__ */ React21.createElement("span", { className: "sr-only" }, "Close")
+    )
+  ));
+});
+DialogContent.displayName = Dialog$1.Content.displayName;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/command.tsx
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3"
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        className: "size-4 shrink-0 opacity-50",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React21.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ React21.createElement("path", { d: "m21 21-4.3-4.3" })
+    ),
+    /* @__PURE__ */ React21.createElement(
+      Command$1.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    Command$1.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:opacity-70",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(Popover$1.Portal, null, /* @__PURE__ */ React21.createElement(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ));
+}
+
+// src/inputs/MultiSelect.tsx
+function ensureResizeObserver() {
+  if (typeof window === "undefined") return;
+  const windowWithResizeObserver = window;
+  if (windowWithResizeObserver.ResizeObserver) return;
+  windowWithResizeObserver.ResizeObserver = class ResizeObserverMock {
+    observe() {
+    }
+    unobserve() {
+    }
+    disconnect() {
+    }
+  };
+  if (typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.scrollIntoView !== "function") {
+    HTMLElement.prototype.scrollIntoView = () => {
+    };
+  }
+}
+function optionLabelText(option) {
+  if (typeof option.label === "string") {
+    return option.label;
+  }
+  return String(option.label);
+}
+function MultiSelect({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select...",
+  searchable = true,
+  clearable = true,
+  loading = false,
+  maxSelections,
+  showSelectAll = false,
+  options = [],
+  optionGroups = [],
+  renderOption,
+  renderValue,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [searchQuery, setSearchQuery] = React21.useState("");
+  const [focusedIndex, setFocusedIndex] = React21.useState(-1);
+  const [hasInteracted, setHasInteracted] = React21.useState(false);
+  const triggerRef = React21.useRef(null);
+  const dropdownId = `${name}-dropdown`;
+  const searchInputId = `${name}-search`;
+  ensureResizeObserver();
+  const allOptions = React21.useMemo(() => {
+    if (optionGroups.length > 0) {
+      return optionGroups.flatMap((group) => group.options);
+    }
+    return options;
+  }, [options, optionGroups]);
+  const filteredOptions = React21.useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allOptions;
+    }
+    const query = searchQuery.toLowerCase();
+    return allOptions.filter(
+      (option) => optionLabelText(option).toLowerCase().includes(query)
+    );
+  }, [allOptions, searchQuery]);
+  const selectedOptions = React21.useMemo(() => {
+    return allOptions.filter((option) => value.includes(option.value));
+  }, [allOptions, value]);
+  const hasValue = value.length > 0;
+  const isMaxReached = React21.useMemo(() => {
+    return maxSelections !== void 0 && value.length >= maxSelections;
+  }, [maxSelections, value.length]);
+  const getEnabledOptions = React21.useCallback(() => {
+    return filteredOptions.filter(
+      (option) => !option.disabled && (!isMaxReached || value.includes(option.value))
+    );
+  }, [filteredOptions, isMaxReached, value]);
+  React21.useEffect(() => {
+    if (!isOpen) return;
+    if (!searchable) return;
+    const id = window.setTimeout(() => {
+      const searchInput = document.getElementById(
+        searchInputId
+      );
+      searchInput?.focus();
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+    };
+  }, [isOpen, searchable, searchInputId]);
+  const handleToggleOption = React21.useCallback(
+    (optionValue) => {
+      const isSelected = value.includes(optionValue);
+      if (isSelected) {
+        onChange(value.filter((entry) => entry !== optionValue));
+      } else if (!isMaxReached) {
+        onChange([...value, optionValue]);
+      }
+      setSearchQuery("");
+    },
+    [isMaxReached, onChange, value]
+  );
+  const handleSelectAll = React21.useCallback(() => {
+    const enabledOptions = filteredOptions.filter((option) => !option.disabled);
+    onChange(enabledOptions.map((option) => option.value));
+    setSearchQuery("");
+  }, [filteredOptions, onChange]);
+  const handleClearAll = React21.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange([]);
+      setSearchQuery("");
+      setFocusedIndex(-1);
+    },
+    [onChange]
+  );
+  const handleRemoveValue = React21.useCallback(
+    (optionValue, e) => {
+      e.stopPropagation();
+      onChange(value.filter((entry) => entry !== optionValue));
+    },
+    [onChange, value]
+  );
+  const handleOpenChange = React21.useCallback(
+    (nextOpen) => {
+      if (disabled) {
+        setIsOpen(false);
+        return;
+      }
+      if (nextOpen) {
+        if (!hasInteracted) {
+          setHasInteracted(true);
+        }
+        setIsOpen(true);
+        onFocus?.();
+        return;
+      }
+      if (isOpen && hasInteracted) {
+        onBlur?.();
+      }
+      setIsOpen(false);
+      setSearchQuery("");
+      setFocusedIndex(-1);
+    },
+    [disabled, hasInteracted, isOpen, onBlur, onFocus]
+  );
+  const handleTriggerBlur = React21.useCallback(() => {
+    if (!isOpen) {
+      onBlur?.();
+    }
+  }, [isOpen, onBlur]);
+  const handleKeyDown = React21.useCallback(
+    (event) => {
+      if (disabled) return;
+      const enabledOptions = getEnabledOptions();
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          if (!isOpen) {
+            setHasInteracted(true);
+            setIsOpen(true);
+            onFocus?.();
+            if (enabledOptions.length > 0) {
+              setFocusedIndex(filteredOptions.indexOf(enabledOptions[0]));
+            }
+            return;
+          }
+          if (enabledOptions.length === 0) return;
+          const currentOption = filteredOptions[focusedIndex];
+          const currentEnabledIndex = enabledOptions.findIndex(
+            (option) => option === currentOption
+          );
+          const nextEnabledIndex = currentEnabledIndex === -1 ? 0 : (currentEnabledIndex + 1) % enabledOptions.length;
+          setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextEnabledIndex]));
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          if (!isOpen || enabledOptions.length === 0) return;
+          const currentOption = filteredOptions[focusedIndex];
+          const currentEnabledIndex = enabledOptions.findIndex(
+            (option) => option === currentOption
+          );
+          const previousEnabledIndex = currentEnabledIndex === -1 ? enabledOptions.length - 1 : (currentEnabledIndex - 1 + enabledOptions.length) % enabledOptions.length;
+          setFocusedIndex(
+            filteredOptions.indexOf(enabledOptions[previousEnabledIndex])
+          );
+          break;
+        }
+        case "Enter": {
+          event.preventDefault();
+          if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            const focusedOption = filteredOptions[focusedIndex];
+            const optionDisabled = focusedOption.disabled || isMaxReached && !value.includes(focusedOption.value);
+            if (!optionDisabled) {
+              handleToggleOption(focusedOption.value);
+            }
+            return;
+          }
+          if (!isOpen) {
+            setHasInteracted(true);
+            setIsOpen(true);
+            onFocus?.();
+          }
+          break;
+        }
+        case "Escape": {
+          if (!isOpen) return;
+          event.preventDefault();
+          setIsOpen(false);
+          setSearchQuery("");
+          setFocusedIndex(-1);
+          break;
+        }
+        case " ": {
+          if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            event.preventDefault();
+            const focusedOption = filteredOptions[focusedIndex];
+            const optionDisabled = focusedOption.disabled || isMaxReached && !value.includes(focusedOption.value);
+            if (!optionDisabled) {
+              handleToggleOption(focusedOption.value);
+            }
+            return;
+          }
+          if (!isOpen && !searchable) {
+            event.preventDefault();
+            setHasInteracted(true);
+            setIsOpen(true);
+            onFocus?.();
+          }
+          break;
+        }
+      }
+    },
+    [
+      disabled,
+      filteredOptions,
+      focusedIndex,
+      getEnabledOptions,
+      handleToggleOption,
+      isMaxReached,
+      isOpen,
+      onFocus,
+      searchable,
+      value
+    ]
+  );
+  const combinedClassName = cn("relative w-full", className);
+  return /* @__PURE__ */ React21.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React21.createElement(
+    "select",
+    {
+      name,
+      value,
+      onChange: () => {
+      },
+      disabled,
+      required,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      style: { display: "none" },
+      multiple: true
+    },
+    /* @__PURE__ */ React21.createElement("option", { value: "" }, "Select..."),
+    allOptions.map((option) => /* @__PURE__ */ React21.createElement("option", { key: option.value, value: option.value }, optionLabelText(option)))
+  ), /* @__PURE__ */ React21.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React21.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      ref: triggerRef,
+      className: cn(
+        "flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
+        "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        !error && hasValue && "ring-2 ring-ring",
+        disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      onKeyDown: handleKeyDown,
+      onBlur: handleTriggerBlur,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-controls": dropdownId,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0
+    },
+    /* @__PURE__ */ React21.createElement("div", { className: "flex flex-1 items-center overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React21.createElement(
+      "span",
+      {
+        key: option.value,
+        className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium"
+      },
+      renderValue ? renderValue(option) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex h-3.5 w-3.5 items-center justify-center rounded-sm border-none bg-transparent p-0 text-[0.625rem] transition-opacity hover:opacity-70",
+          onClick: (e) => handleRemoveValue(option.value, e),
+          "aria-label": `Remove ${optionLabelText(option)}`,
+          tabIndex: -1
+        },
+        "\u2715"
+      ))
+    ))) : /* @__PURE__ */ React21.createElement("span", { className: "relative" }, placeholder)),
+    /* @__PURE__ */ React21.createElement("div", { className: "ml-2 flex items-center gap-1" }, loading && /* @__PURE__ */ React21.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React21.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex h-4 w-4 items-center justify-center rounded-sm border-none bg-transparent p-0 text-xs transition-opacity hover:opacity-70",
+        onClick: handleClearAll,
+        "aria-label": "Clear all selections",
+        tabIndex: -1
+      },
+      "\u2715"
+    ), /* @__PURE__ */ React21.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+  )), isOpen && /* @__PURE__ */ React21.createElement(
+    PopoverContent,
+    {
+      id: dropdownId,
+      align: "start",
+      sideOffset: 4,
+      className: "w-full min-w-[var(--radix-popover-trigger-width)] p-0",
+      onOpenAutoFocus: (event) => {
+        event.preventDefault();
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Command,
+      {
+        shouldFilter: false,
+        className: "max-h-80",
+        onKeyDown: handleKeyDown
+      },
+      searchable && /* @__PURE__ */ React21.createElement(
+        CommandInput,
+        {
+          id: searchInputId,
+          className: cn(INPUT_AUTOFILL_RESET_CLASSES),
+          placeholder: "Search...",
+          value: searchQuery,
+          onValueChange: (nextValue) => {
+            setSearchQuery(nextValue);
+            setFocusedIndex(0);
+          },
+          "aria-label": "Search options"
+        }
+      ),
+      showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "flex gap-2 border-b border-input p-2" }, /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 rounded border border-input bg-transparent px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+          onClick: handleSelectAll,
+          disabled
+        },
+        "Select All"
+      ), value.length > 0 && /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 rounded border border-input bg-transparent px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+          onClick: handleClearAll,
+          disabled
+        },
+        "Clear All"
+      )),
+      isMaxReached && /* @__PURE__ */ React21.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      /* @__PURE__ */ React21.createElement(CommandList, { role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React21.createElement(CommandEmpty, null, "No options found"), optionGroups.length > 0 ? optionGroups.map((group, groupIndex) => {
+        const groupOptions = group.options.filter(
+          (option) => filteredOptions.includes(option)
+        );
+        if (groupOptions.length === 0) return null;
+        return /* @__PURE__ */ React21.createElement(
+          CommandGroup,
+          {
+            key: `${group.label}-${groupIndex}`,
+            heading: group.label
+          },
+          groupOptions.map((option) => {
+            const globalIndex = filteredOptions.indexOf(option);
+            const isSelected = value.includes(option.value);
+            const isFocused = globalIndex === focusedIndex;
+            const optionDisabled = option.disabled || isMaxReached && !isSelected;
+            return /* @__PURE__ */ React21.createElement(
+              "div",
+              {
+                key: option.value,
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": optionDisabled,
+                onMouseEnter: () => {
+                  setFocusedIndex(globalIndex);
+                },
+                onClick: () => {
+                  if (!optionDisabled) {
+                    handleToggleOption(option.value);
+                  }
+                },
+                className: cn(
+                  "relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent",
+                  isFocused && "bg-accent",
+                  isSelected && "bg-accent font-medium",
+                  optionDisabled && "pointer-events-none opacity-50"
+                )
+              },
+              /* @__PURE__ */ React21.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+              /* @__PURE__ */ React21.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+            );
+          })
+        );
+      }) : filteredOptions.map((option, index) => {
+        const isSelected = value.includes(option.value);
+        const isFocused = index === focusedIndex;
+        const optionDisabled = option.disabled || isMaxReached && !isSelected;
+        return /* @__PURE__ */ React21.createElement(
+          "div",
+          {
+            key: option.value,
+            role: "option",
+            "aria-selected": isSelected,
+            "aria-disabled": optionDisabled,
+            onMouseEnter: () => {
+              setFocusedIndex(index);
+            },
+            onClick: () => {
+              if (!optionDisabled) {
+                handleToggleOption(option.value);
+              }
+            },
+            className: cn(
+              "relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent",
+              isFocused && "bg-accent",
+              isSelected && "bg-accent font-medium",
+              optionDisabled && "pointer-events-none opacity-50"
+            )
+          },
+          /* @__PURE__ */ React21.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+          /* @__PURE__ */ React21.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+        );
+      }))
+    )
+  )));
+}
+MultiSelect.displayName = "MultiSelect";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React21.useLayoutEffect : React21.useEffect;
+
+// src/hooks/use-as-ref.ts
+function useAsRef(props) {
+  const ref = React21.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+function useLazyRef(fn) {
+  const ref = React21.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+
+// src/components/ui/file-upload.tsx
+var ROOT_NAME = "FileUpload";
+var DROPZONE_NAME = "FileUploadDropzone";
+var LIST_NAME = "FileUploadList";
+var ITEM_NAME = "FileUploadItem";
+var ITEM_PREVIEW_NAME = "FileUploadItemPreview";
+var ITEM_METADATA_NAME = "FileUploadItemMetadata";
+var ITEM_DELETE_NAME = "FileUploadItemDelete";
+function BaseFileIcon({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("size-5", className),
+      "aria-hidden": "true"
+    },
+    children
+  );
+}
+function FileVideoIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("rect", { x: "8", y: "12", width: "6", height: "4", rx: "1" }), /* @__PURE__ */ React21.createElement("path", { d: "m14 13 3-1.5v5L14 15" }));
+}
+function FileAudioIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("path", { d: "M10 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" }), /* @__PURE__ */ React21.createElement("path", { d: "M13 17V11l3-1" }));
+}
+function FileTextIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("line", { x1: "8", y1: "13", x2: "16", y2: "13" }), /* @__PURE__ */ React21.createElement("line", { x1: "8", y1: "17", x2: "14", y2: "17" }));
+}
+function FileCodeIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("polyline", { points: "11 14 9 16 11 18" }), /* @__PURE__ */ React21.createElement("polyline", { points: "13 14 15 16 13 18" }));
+}
+function FileArchiveIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("rect", { x: "9", y: "11", width: "6", height: "2" }), /* @__PURE__ */ React21.createElement("path", { d: "M12 13v5" }));
+}
+function FileCogIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React21.createElement("circle", { cx: "12", cy: "16", r: "2" }), /* @__PURE__ */ React21.createElement("path", { d: "m12 12 .4.9m2.7 1.1 .9.4m-.9 2.7-.9.4m-2.7 1.1-.4.9m-2.3-.9-.4-.9m-2.7-1.1-.9-.4m.9-2.7.9-.4m2.7-1.1.4-.9" }));
+}
+function FileIcon() {
+  return /* @__PURE__ */ React21.createElement(BaseFileIcon, null, /* @__PURE__ */ React21.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React21.createElement("polyline", { points: "14 2 14 8 20 8" }));
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
+}
+function getFileIcon(file) {
+  const type = file.type;
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  if (type.startsWith("video/")) {
+    return /* @__PURE__ */ React21.createElement(FileVideoIcon, null);
+  }
+  if (type.startsWith("audio/")) {
+    return /* @__PURE__ */ React21.createElement(FileAudioIcon, null);
+  }
+  if (type.startsWith("text/") || ["txt", "md", "rtf", "pdf"].includes(extension)) {
+    return /* @__PURE__ */ React21.createElement(FileTextIcon, null);
+  }
+  if ([
+    "html",
+    "css",
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "json",
+    "xml",
+    "php",
+    "py",
+    "rb",
+    "java",
+    "c",
+    "cpp",
+    "cs"
+  ].includes(extension)) {
+    return /* @__PURE__ */ React21.createElement(FileCodeIcon, null);
+  }
+  if (["zip", "rar", "7z", "tar", "gz", "bz2"].includes(extension)) {
+    return /* @__PURE__ */ React21.createElement(FileArchiveIcon, null);
+  }
+  if (["exe", "msi", "app", "apk", "deb", "rpm"].includes(extension) || type.startsWith("application/")) {
+    return /* @__PURE__ */ React21.createElement(FileCogIcon, null);
+  }
+  return /* @__PURE__ */ React21.createElement(FileIcon, null);
+}
+var StoreContext = React21.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React21.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector) {
+  const store = useStoreContext("useStore");
+  const lastValueRef = useLazyRef(
+    () => null
+  );
+  const getSnapshot = React21.useCallback(() => {
+    const state = store.getState();
+    const prevValue = lastValueRef.current;
+    if (prevValue && prevValue.state === state) {
+      return prevValue.value;
+    }
+    const nextValue = selector(state);
+    lastValueRef.current = { value: nextValue, state };
+    return nextValue;
+  }, [store, selector, lastValueRef]);
+  return React21.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var FileUploadContext = React21.createContext(
+  null
+);
+function useFileUploadContext(consumerName) {
+  const context = React21.useContext(FileUploadContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function FileUpload(props) {
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    onAccept,
+    onFileAccept,
+    onFileReject,
+    onFileValidate,
+    onUpload,
+    accept,
+    maxFiles,
+    maxSize,
+    dir: dirProp,
+    label,
+    name,
+    asChild,
+    disabled = false,
+    invalid = false,
+    multiple = false,
+    required = false,
+    inputProps,
+    children,
+    className,
+    ...rootProps
+  } = props;
+  const inputId = React21.useId();
+  const dropzoneId = React21.useId();
+  const listId = React21.useId();
+  const labelId = React21.useId();
+  const dir = useDirection(dirProp);
+  const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
+  const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
+  const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
+  const inputRef = React21.useRef(null);
+  const isControlled = value !== void 0;
+  const propsRef = useAsRef({
+    onValueChange,
+    onAccept,
+    onFileAccept,
+    onFileReject,
+    onFileValidate,
+    onUpload
+  });
+  const store = React21.useMemo(() => {
+    let state = {
+      files,
+      dragOver: false,
+      invalid
+    };
+    function reducer(state2, action) {
+      switch (action.type) {
+        case "ADD_FILES": {
+          for (const file of action.files) {
+            files.set(file, {
+              file,
+              progress: 0,
+              status: "idle"
+            });
+          }
+          if (propsRef.current.onValueChange) {
+            const fileList = Array.from(files.values()).map(
+              (fileState) => fileState.file
+            );
+            propsRef.current.onValueChange(fileList);
+          }
+          return { ...state2, files };
+        }
+        case "SET_FILES": {
+          const newFileSet = new Set(action.files);
+          for (const existingFile of files.keys()) {
+            if (!newFileSet.has(existingFile)) {
+              files.delete(existingFile);
+            }
+          }
+          for (const file of action.files) {
+            const existingState = files.get(file);
+            if (!existingState) {
+              files.set(file, {
+                file,
+                progress: 0,
+                status: "idle"
+              });
+            }
+          }
+          return { ...state2, files };
+        }
+        case "SET_PROGRESS": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              progress: action.progress,
+              status: "uploading"
+            });
+          }
+          return { ...state2, files };
+        }
+        case "SET_SUCCESS": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              progress: 100,
+              status: "success"
+            });
+          }
+          return { ...state2, files };
+        }
+        case "SET_ERROR": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              error: action.error,
+              status: "error"
+            });
+          }
+          return { ...state2, files };
+        }
+        case "REMOVE_FILE": {
+          const cachedUrl = urlCache.get(action.file);
+          if (cachedUrl) {
+            URL.revokeObjectURL(cachedUrl);
+            urlCache.delete(action.file);
+          }
+          files.delete(action.file);
+          if (propsRef.current.onValueChange) {
+            const fileList = Array.from(files.values()).map(
+              (fileState) => fileState.file
+            );
+            propsRef.current.onValueChange(fileList);
+          }
+          return { ...state2, files };
+        }
+        case "SET_DRAG_OVER": {
+          return { ...state2, dragOver: action.dragOver };
+        }
+        case "SET_INVALID": {
+          return { ...state2, invalid: action.invalid };
+        }
+        case "CLEAR": {
+          for (const file of files.keys()) {
+            const cachedUrl = urlCache.get(file);
+            if (cachedUrl) {
+              URL.revokeObjectURL(cachedUrl);
+              urlCache.delete(file);
+            }
+          }
+          files.clear();
+          if (propsRef.current.onValueChange) {
+            propsRef.current.onValueChange([]);
+          }
+          return { ...state2, files, invalid: false };
+        }
+        default:
+          return state2;
+      }
+    }
+    return {
+      getState: () => state,
+      dispatch: (action) => {
+        state = reducer(state, action);
+        for (const listener of listeners) {
+          listener();
+        }
+      },
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      }
+    };
+  }, [listeners, files, invalid, propsRef, urlCache]);
+  const acceptTypes = React21.useMemo(
+    () => accept?.split(",").map((t) => t.trim()) ?? null,
+    [accept]
+  );
+  const onProgress = useLazyRef(() => {
+    let frame = 0;
+    return (file, progress) => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        store.dispatch({
+          type: "SET_PROGRESS",
+          file,
+          progress: Math.min(Math.max(0, progress), 100)
+        });
+      });
+    };
+  }).current;
+  React21.useEffect(() => {
+    if (isControlled) {
+      store.dispatch({ type: "SET_FILES", files: value });
+    } else if (defaultValue && defaultValue.length > 0 && !store.getState().files.size) {
+      store.dispatch({ type: "SET_FILES", files: defaultValue });
+    }
+  }, [value, defaultValue, isControlled, store]);
+  React21.useEffect(() => {
+    return () => {
+      for (const file of files.keys()) {
+        const cachedUrl = urlCache.get(file);
+        if (cachedUrl) {
+          URL.revokeObjectURL(cachedUrl);
+        }
+      }
+    };
+  }, [files, urlCache]);
+  const onFilesUpload = React21.useCallback(
+    async (files2) => {
+      try {
+        for (const file of files2) {
+          store.dispatch({ type: "SET_PROGRESS", file, progress: 0 });
+        }
+        if (propsRef.current.onUpload) {
+          await propsRef.current.onUpload(files2, {
+            onProgress,
+            onSuccess: (file) => {
+              store.dispatch({ type: "SET_SUCCESS", file });
+            },
+            onError: (file, error) => {
+              store.dispatch({
+                type: "SET_ERROR",
+                file,
+                error: error.message ?? "Upload failed"
+              });
+            }
+          });
+        } else {
+          for (const file of files2) {
+            store.dispatch({ type: "SET_SUCCESS", file });
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Upload failed";
+        for (const file of files2) {
+          store.dispatch({
+            type: "SET_ERROR",
+            file,
+            error: errorMessage
+          });
+        }
+      }
+    },
+    [store, propsRef, onProgress]
+  );
+  const onFilesChange = React21.useCallback(
+    (originalFiles) => {
+      if (disabled) return;
+      let filesToProcess = [...originalFiles];
+      let invalid2 = false;
+      if (maxFiles) {
+        const currentCount = store.getState().files.size;
+        const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+        if (remainingSlotCount < filesToProcess.length) {
+          const rejectedFiles2 = filesToProcess.slice(remainingSlotCount);
+          invalid2 = true;
+          filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+          for (const file of rejectedFiles2) {
+            let rejectionMessage = `Maximum ${maxFiles} files allowed`;
+            if (propsRef.current.onFileValidate) {
+              const validationMessage = propsRef.current.onFileValidate(file);
+              if (validationMessage) {
+                rejectionMessage = validationMessage;
+              }
+            }
+            propsRef.current.onFileReject?.(file, rejectionMessage);
+          }
+        }
+      }
+      const acceptedFiles = [];
+      for (const file of filesToProcess) {
+        let rejected = false;
+        let rejectionMessage = "";
+        if (propsRef.current.onFileValidate) {
+          const validationMessage = propsRef.current.onFileValidate(file);
+          if (validationMessage) {
+            rejectionMessage = validationMessage;
+            propsRef.current.onFileReject?.(file, rejectionMessage);
+            rejected = true;
+            invalid2 = true;
+            continue;
+          }
+        }
+        if (acceptTypes) {
+          const fileType = file.type;
+          const fileExtension = `.${file.name.split(".").pop()}`;
+          if (!acceptTypes.some(
+            (type) => type === fileType || type === fileExtension || type.includes("/*") && fileType.startsWith(type.replace("/*", "/"))
+          )) {
+            rejectionMessage = "File type not accepted";
+            propsRef.current.onFileReject?.(file, rejectionMessage);
+            rejected = true;
+            invalid2 = true;
+          }
+        }
+        if (maxSize && file.size > maxSize) {
+          rejectionMessage = "File too large";
+          propsRef.current.onFileReject?.(file, rejectionMessage);
+          rejected = true;
+          invalid2 = true;
+        }
+        if (!rejected) {
+          acceptedFiles.push(file);
+        }
+      }
+      if (invalid2) {
+        store.dispatch({ type: "SET_INVALID", invalid: invalid2 });
+        setTimeout(() => {
+          store.dispatch({ type: "SET_INVALID", invalid: false });
+        }, 2e3);
+      }
+      if (acceptedFiles.length > 0) {
+        store.dispatch({ type: "ADD_FILES", files: acceptedFiles });
+        if (isControlled && propsRef.current.onValueChange) {
+          const currentFiles = Array.from(store.getState().files.values()).map(
+            (f) => f.file
+          );
+          propsRef.current.onValueChange([...currentFiles]);
+        }
+        if (propsRef.current.onAccept) {
+          propsRef.current.onAccept(acceptedFiles);
+        }
+        for (const file of acceptedFiles) {
+          propsRef.current.onFileAccept?.(file);
+        }
+        if (propsRef.current.onUpload) {
+          requestAnimationFrame(() => {
+            onFilesUpload(acceptedFiles);
+          });
+        }
+      }
+    },
+    [
+      store,
+      isControlled,
+      propsRef,
+      onFilesUpload,
+      maxFiles,
+      acceptTypes,
+      maxSize,
+      disabled
+    ]
+  );
+  const onInputChange = React21.useCallback(
+    (event) => {
+      const files2 = Array.from(event.target.files ?? []);
+      onFilesChange(files2);
+      event.target.value = "";
+    },
+    [onFilesChange]
+  );
+  const contextValue = React21.useMemo(
+    () => ({
+      dropzoneId,
+      inputId,
+      listId,
+      labelId,
+      dir,
+      disabled,
+      inputRef,
+      urlCache
+    }),
+    [dropzoneId, inputId, listId, labelId, dir, disabled, urlCache]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  const inputAriaDescribedBy = [
+    contextValue.dropzoneId,
+    inputProps?.["aria-describedby"]
+  ].filter(Boolean).join(" ").trim();
+  return /* @__PURE__ */ React21.createElement(StoreContext.Provider, { value: store }, /* @__PURE__ */ React21.createElement(FileUploadContext.Provider, { value: contextValue }, /* @__PURE__ */ React21.createElement(
+    RootPrimitive,
+    {
+      "data-disabled": disabled ? "" : void 0,
+      "data-slot": "file-upload",
+      dir,
+      ...rootProps,
+      className: cn("relative flex flex-col gap-2", className)
+    },
+    children,
+    /* @__PURE__ */ React21.createElement(
+      "input",
+      {
+        type: "file",
+        id: inputId,
+        "aria-labelledby": inputProps?.["aria-labelledby"] ? `${labelId} ${inputProps["aria-labelledby"]}` : labelId,
+        "aria-describedby": inputAriaDescribedBy || void 0,
+        ref: inputRef,
+        tabIndex: -1,
+        accept,
+        name,
+        className: "sr-only",
+        disabled,
+        multiple,
+        required,
+        onChange: onInputChange,
+        ...inputProps
+      }
+    ),
+    /* @__PURE__ */ React21.createElement("div", { id: labelId, className: "sr-only" }, label ?? "File upload")
+  )));
+}
+function FileUploadDropzone(props) {
+  const {
+    asChild,
+    className,
+    onClick: onClickProp,
+    onDragOver: onDragOverProp,
+    onDragEnter: onDragEnterProp,
+    onDragLeave: onDragLeaveProp,
+    onDrop: onDropProp,
+    onPaste: onPasteProp,
+    onKeyDown: onKeyDownProp,
+    ...dropzoneProps
+  } = props;
+  const context = useFileUploadContext(DROPZONE_NAME);
+  const store = useStoreContext(DROPZONE_NAME);
+  const dragOver = useStore((state) => state.dragOver);
+  const invalid = useStore((state) => state.invalid);
+  const propsRef = useAsRef({
+    onClick: onClickProp,
+    onDragOver: onDragOverProp,
+    onDragEnter: onDragEnterProp,
+    onDragLeave: onDragLeaveProp,
+    onDrop: onDropProp,
+    onPaste: onPasteProp,
+    onKeyDown: onKeyDownProp
+  });
+  const onClick = React21.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const target = event.target;
+      const isFromTrigger = target instanceof HTMLElement && target.closest('[data-slot="file-upload-trigger"]');
+      if (!isFromTrigger) {
+        context.inputRef.current?.click();
+      }
+    },
+    [context.inputRef, propsRef]
+  );
+  const onDragOver = React21.useCallback(
+    (event) => {
+      propsRef.current.onDragOver?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragEnter = React21.useCallback(
+    (event) => {
+      propsRef.current.onDragEnter?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragLeave = React21.useCallback(
+    (event) => {
+      propsRef.current.onDragLeave?.(event);
+      if (event.defaultPrevented) return;
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) {
+        return;
+      }
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+    },
+    [store, propsRef]
+  );
+  const onDrop = React21.useCallback(
+    (event) => {
+      propsRef.current.onDrop?.(event);
+      if (event.defaultPrevented) return;
+      if (context.disabled) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+      const files = Array.from(event.dataTransfer.files);
+      const inputElement = context.inputRef.current;
+      if (!inputElement) return;
+      if (typeof DataTransfer === "undefined") return;
+      const dataTransfer = new DataTransfer();
+      for (const file of files) {
+        dataTransfer.items.add(file);
+      }
+      inputElement.files = dataTransfer.files;
+      inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    [store, context.inputRef, propsRef]
+  );
+  const onPaste = React21.useCallback(
+    (event) => {
+      propsRef.current.onPaste?.(event);
+      if (event.defaultPrevented) return;
+      if (context.disabled) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+      const items = event.clipboardData?.items;
+      if (!items) return;
+      const files = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item?.kind === "file") {
+          const file = item.getAsFile();
+          if (file) {
+            files.push(file);
+          }
+        }
+      }
+      if (files.length === 0) return;
+      const inputElement = context.inputRef.current;
+      if (!inputElement) return;
+      if (typeof DataTransfer === "undefined") return;
+      const dataTransfer = new DataTransfer();
+      for (const file of files) {
+        dataTransfer.items.add(file);
+      }
+      inputElement.files = dataTransfer.files;
+      inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    [store, context.inputRef, propsRef]
+  );
+  const onKeyDown = React21.useCallback(
+    (event) => {
+      propsRef.current.onKeyDown?.(event);
+      if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        context.inputRef.current?.click();
+      }
+    },
+    [context.inputRef, propsRef]
+  );
+  const DropzonePrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ React21.createElement(
+    DropzonePrimitive,
+    {
+      role: "region",
+      id: context.dropzoneId,
+      "aria-controls": `${context.inputId} ${context.listId}`,
+      "aria-disabled": context.disabled,
+      "aria-invalid": invalid,
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-dragging": dragOver ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "data-slot": "file-upload-dropzone",
+      dir: context.dir,
+      tabIndex: context.disabled ? -1 : 0,
+      ...dropzoneProps,
+      className: cn(
+        "relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-dragging:bg-accent/30 data-invalid:ring-destructive/20",
+        className
+      ),
+      onClick,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onKeyDown,
+      onPaste
+    }
+  );
+}
+function FileUploadList(props) {
+  const {
+    className,
+    orientation = "vertical",
+    asChild,
+    forceMount,
+    ...listProps
+  } = props;
+  const context = useFileUploadContext(LIST_NAME);
+  const fileCount = useStore((state) => state.files.size);
+  const shouldRender = forceMount || fileCount > 0;
+  if (!shouldRender) return null;
+  const ListPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ React21.createElement(
+    ListPrimitive,
+    {
+      role: "list",
+      id: context.listId,
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      "data-slot": "file-upload-list",
+      "data-state": shouldRender ? "active" : "inactive",
+      dir: context.dir,
+      ...listProps,
+      className: cn(
+        "data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out",
+        orientation === "horizontal" && "flex-row overflow-x-auto p-1.5",
+        className
+      )
+    }
+  );
+}
+var FileUploadItemContext = React21.createContext(null);
+function useFileUploadItemContext(consumerName) {
+  const context = React21.useContext(FileUploadItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function FileUploadItem(props) {
+  const { value, asChild, className, ...itemProps } = props;
+  const id = React21.useId();
+  const statusId = `${id}-status`;
+  const nameId = `${id}-name`;
+  const sizeId = `${id}-size`;
+  const messageId = `${id}-message`;
+  const context = useFileUploadContext(ITEM_NAME);
+  const fileState = useStore((state) => state.files.get(value));
+  const fileCount = useStore((state) => state.files.size);
+  const fileIndex = useStore((state) => {
+    const files = Array.from(state.files.keys());
+    return files.indexOf(value) + 1;
+  });
+  const itemContext = React21.useMemo(
+    () => ({
+      id,
+      fileState,
+      nameId,
+      sizeId,
+      statusId,
+      messageId
+    }),
+    [id, fileState, statusId, nameId, sizeId, messageId]
+  );
+  if (!fileState) return null;
+  const statusText = fileState.error ? `Error: ${fileState.error}` : fileState.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState.status === "success" ? "Upload complete" : "Ready to upload";
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ React21.createElement(FileUploadItemContext.Provider, { value: itemContext }, /* @__PURE__ */ React21.createElement(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      id,
+      "aria-setsize": fileCount,
+      "aria-posinset": fileIndex,
+      "aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState.error ? messageId : ""}`,
+      "aria-labelledby": nameId,
+      "data-slot": "file-upload-item",
+      dir: context.dir,
+      ...itemProps,
+      className: cn(
+        "relative flex items-center gap-2.5 rounded-md border p-3",
+        className
+      )
+    },
+    props.children,
+    /* @__PURE__ */ React21.createElement("span", { id: statusId, className: "sr-only" }, statusText)
+  ));
+}
+function FileUploadItemPreview(props) {
+  const { render, asChild, children, className, ...previewProps } = props;
+  const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+  const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+  const getDefaultRender = React21.useCallback(
+    (file) => {
+      if (itemContext.fileState?.file.type.startsWith("image/")) {
+        let url = context.urlCache.get(file);
+        if (!url) {
+          url = URL.createObjectURL(file);
+          context.urlCache.set(file, url);
+        }
+        return (
+          // biome-ignore lint/performance/noImgElement: dynamic file URLs from user uploads don't work well with Next.js Image optimization
+          /* @__PURE__ */ React21.createElement("img", { src: url, alt: file.name, className: "size-full object-cover" })
+        );
+      }
+      return getFileIcon(file);
+    },
+    [itemContext.fileState?.file.type, context.urlCache]
+  );
+  const onPreviewRender = React21.useCallback(
+    (file) => {
+      if (render) {
+        return render(file, () => getDefaultRender(file));
+      }
+      return getDefaultRender(file);
+    },
+    [render, getDefaultRender]
+  );
+  if (!itemContext.fileState) return null;
+  const ItemPreviewPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ React21.createElement(
+    ItemPreviewPrimitive,
+    {
+      "aria-labelledby": itemContext.nameId,
+      "data-slot": "file-upload-preview",
+      ...previewProps,
+      className: cn(
+        "relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10",
+        className
+      )
+    },
+    onPreviewRender(itemContext.fileState.file),
+    children
+  );
+}
+function FileUploadItemMetadata(props) {
+  const {
+    asChild,
+    size = "default",
+    children,
+    className,
+    ...metadataProps
+  } = props;
+  const context = useFileUploadContext(ITEM_METADATA_NAME);
+  const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
+  if (!itemContext.fileState) return null;
+  const ItemMetadataPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ React21.createElement(
+    ItemMetadataPrimitive,
+    {
+      "data-slot": "file-upload-metadata",
+      dir: context.dir,
+      ...metadataProps,
+      className: cn("flex min-w-0 flex-1 flex-col", className)
+    },
+    children ?? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+      "span",
+      {
+        id: itemContext.nameId,
+        className: cn(
+          "truncate font-medium text-sm",
+          size === "sm" && "font-normal text-[13px] leading-snug"
+        )
+      },
+      itemContext.fileState.file.name
+    ), /* @__PURE__ */ React21.createElement(
+      "span",
+      {
+        id: itemContext.sizeId,
+        className: cn(
+          "truncate text-xs opacity-70",
+          size === "sm" && "text-[11px] leading-snug"
+        )
+      },
+      formatBytes(itemContext.fileState.file.size)
+    ), itemContext.fileState.error && /* @__PURE__ */ React21.createElement(
+      "span",
+      {
+        id: itemContext.messageId,
+        className: "text-destructive text-xs"
+      },
+      itemContext.fileState.error
+    ))
+  );
+}
+function FileUploadItemDelete(props) {
+  const { asChild, onClick: onClickProp, ...deleteProps } = props;
+  const store = useStoreContext(ITEM_DELETE_NAME);
+  const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+  const onClick = React21.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (!itemContext.fileState || event.defaultPrevented) return;
+      store.dispatch({
+        type: "REMOVE_FILE",
+        file: itemContext.fileState.file
+      });
+    },
+    [store, itemContext.fileState, onClickProp]
+  );
+  if (!itemContext.fileState) return null;
+  const ItemDeletePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ React21.createElement(
+    ItemDeletePrimitive,
+    {
+      type: "button",
+      "aria-controls": itemContext.id,
+      "aria-describedby": itemContext.nameId,
+      "data-slot": "file-upload-item-delete",
+      ...deleteProps,
+      onClick
+    }
+  );
+}
+
+// src/inputs/FileInput.tsx
+function FileInput({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  placeholder = "Choose file...",
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  accept,
+  maxSize = 5 * 1024 * 1024,
+  // 5MB default
+  maxFiles = 1,
+  multiple = false,
+  showPreview = true,
+  showProgress = true,
+  uploadProgress = {},
+  enableCropping = false,
+  cropAspectRatio,
+  onCropComplete,
+  onValidationError,
+  onFileRemove,
+  ...props
+}) {
+  const normalizedValue = React21.useMemo(() => {
+    const safeValue = Array.isArray(value) ? value : [];
+    return multiple ? safeValue : safeValue.slice(0, 1);
+  }, [multiple, value]);
+  const [cropperOpen, setCropperOpen] = React21.useState(false);
+  const [imageToCrop, setImageToCrop] = React21.useState(null);
+  const [crop, setCrop] = React21.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React21.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React21.useState(null);
+  const validateFile = React21.useCallback(
+    (file) => {
+      if (accept) {
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+        const isValidType = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return file.name.toLowerCase().endsWith(type.toLowerCase());
+          }
+          if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return file.type.startsWith(`${baseType}/`);
+          }
+          return file.type === type;
+        });
+        if (!isValidType) {
+          return {
+            file,
+            error: "type",
+            message: `File type "${file.type}" is not accepted. Accepted types: ${accept}`
+          };
+        }
+      }
+      if (file.size > maxSize) {
+        const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(2);
+        const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
+        return {
+          file,
+          error: "size",
+          message: `File size ${fileSizeMB}MB exceeds maximum ${maxSizeMB}MB`
+        };
+      }
+      return null;
+    },
+    [accept, maxSize]
+  );
+  const mapRejectedFileError = React21.useCallback(
+    (file, message) => {
+      const normalizedMessage = message.toLowerCase();
+      if (normalizedMessage.includes("maximum") && normalizedMessage.includes("files")) {
+        return { file, error: "count", message };
+      }
+      if (normalizedMessage.includes("size") || normalizedMessage.includes("large")) {
+        return { file, error: "size", message };
+      }
+      if (normalizedMessage.includes("type") || normalizedMessage.includes("accept")) {
+        return { file, error: "type", message };
+      }
+      if (file.size > maxSize) {
+        return { file, error: "size", message };
+      }
+      return { file, error: "type", message };
+    },
+    [maxSize]
+  );
+  const handleFileValidate = React21.useCallback(
+    (file) => {
+      const validationError = validateFile(file);
+      return validationError?.message ?? null;
+    },
+    [validateFile]
+  );
+  const handleFileReject = React21.useCallback(
+    (file, message) => {
+      const validationError = mapRejectedFileError(file, message);
+      onValidationError?.([validationError]);
+    },
+    [mapRejectedFileError, onValidationError]
+  );
+  const handleBlur = React21.useCallback(() => {
+    onBlur?.();
+  }, [onBlur]);
+  const fileIdentity = React21.useCallback((file) => {
+    return `${file.name}-${file.size}-${file.lastModified}`;
+  }, []);
+  const handleValueChange = React21.useCallback(
+    (incomingFiles) => {
+      const nextFiles = multiple ? incomingFiles : incomingFiles.slice(-1);
+      if (onFileRemove && nextFiles.length < normalizedValue.length) {
+        const nextFileIds = new Set(nextFiles.map((file) => fileIdentity(file)));
+        normalizedValue.forEach((file, index) => {
+          if (!nextFileIds.has(fileIdentity(file))) {
+            onFileRemove(file, index);
+          }
+        });
+      }
+      if (enableCropping && !multiple) {
+        const nextImageFile = nextFiles[0];
+        const previousFile = normalizedValue[0];
+        const isNewSingleImage = Boolean(
+          nextImageFile && nextImageFile.type.startsWith("image/") && nextImageFile !== previousFile
+        );
+        if (isNewSingleImage) {
+          const previewUrl = URL.createObjectURL(nextImageFile);
+          setImageToCrop({ file: nextImageFile, url: previewUrl });
+          setCropperOpen(true);
+          return;
+        }
+      }
+      onChange(nextFiles);
+    },
+    [
+      enableCropping,
+      maxFiles,
+      multiple,
+      normalizedValue,
+      onChange,
+      onFileRemove,
+      fileIdentity
+    ]
+  );
+  const createCroppedImage = React21.useCallback(
+    async (imageUrl, cropArea) => {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          canvas.width = cropArea.width;
+          canvas.height = cropArea.height;
+          ctx.drawImage(
+            image,
+            cropArea.x,
+            cropArea.y,
+            cropArea.width,
+            cropArea.height,
+            0,
+            0,
+            cropArea.width,
+            cropArea.height
+          );
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(blob);
+              } else {
+                reject(new Error("Failed to create blob from canvas"));
+              }
+            },
+            "image/jpeg",
+            0.95
+          );
+        };
+        image.onerror = () => {
+          reject(new Error("Failed to load image"));
+        };
+        image.src = imageUrl;
+      });
+    },
+    []
+  );
+  const handleCropSave = React21.useCallback(async () => {
+    if (!imageToCrop || !croppedAreaPixels) return;
+    try {
+      const croppedBlob = await createCroppedImage(
+        imageToCrop.url,
+        croppedAreaPixels
+      );
+      if (onCropComplete) {
+        onCropComplete(croppedBlob, imageToCrop.file);
+      }
+      const croppedFile = new File([croppedBlob], imageToCrop.file.name, {
+        type: "image/jpeg"
+      });
+      let updatedFiles;
+      if (!multiple) {
+        updatedFiles = [croppedFile];
+      } else {
+        const existingIndex = normalizedValue.findIndex(
+          (file) => file === imageToCrop.file
+        );
+        if (existingIndex === -1) {
+          updatedFiles = [...normalizedValue, croppedFile].slice(0, maxFiles);
+        } else {
+          updatedFiles = normalizedValue.map(
+            (file, index) => index === existingIndex ? croppedFile : file
+          );
+        }
+      }
+      onChange(updatedFiles);
+      setCropperOpen(false);
+      URL.revokeObjectURL(imageToCrop.url);
+      setImageToCrop(null);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setCroppedAreaPixels(null);
+    } catch (cropError) {
+      console.error("Failed to crop image:", cropError);
+    }
+  }, [
+    createCroppedImage,
+    croppedAreaPixels,
+    imageToCrop,
+    maxFiles,
+    multiple,
+    normalizedValue,
+    onChange,
+    onCropComplete
+  ]);
+  const handleCropCancel = React21.useCallback(() => {
+    if (imageToCrop) {
+      URL.revokeObjectURL(imageToCrop.url);
+    }
+    setCropperOpen(false);
+    setImageToCrop(null);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+  }, [imageToCrop]);
+  const handleCrop = React21.useCallback((file) => {
+    if (!file.type.startsWith("image/")) return;
+    const previewUrl = URL.createObjectURL(file);
+    setImageToCrop({ file, url: previewUrl });
+    setCropperOpen(true);
+  }, []);
+  const onCropChange = React21.useCallback((nextCrop) => {
+    setCrop(nextCrop);
+  }, []);
+  const onZoomChange = React21.useCallback((nextZoom) => {
+    setZoom(nextZoom);
+  }, []);
+  const onCropCompleteInternal = React21.useCallback(
+    (_, nextCroppedAreaPixels) => {
+      setCroppedAreaPixels(nextCroppedAreaPixels);
+    },
+    []
+  );
+  const formatFileSize = React21.useCallback((bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const unit = 1024;
+    const units = ["Bytes", "KB", "MB", "GB"];
+    const index = Math.floor(Math.log(bytes) / Math.log(unit));
+    return Math.round(bytes / Math.pow(unit, index) * 100) / 100 + " " + units[index];
+  }, []);
+  React21.useEffect(() => {
+    return () => {
+      if (imageToCrop) {
+        URL.revokeObjectURL(imageToCrop.url);
+      }
+    };
+  }, [imageToCrop]);
+  const fileCountLabel = normalizedValue.length > 0 ? `${normalizedValue.length} file(s) selected` : placeholder;
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    FileUpload,
+    {
+      name,
+      value: normalizedValue,
+      onValueChange: handleValueChange,
+      onFileValidate: handleFileValidate,
+      onFileReject: handleFileReject,
+      accept,
+      maxSize,
+      maxFiles: multiple ? maxFiles : void 0,
+      multiple,
+      disabled,
+      required: required && normalizedValue.length === 0,
+      invalid: Boolean(error || props["aria-invalid"]),
+      label: "File upload",
+      className: cn(className),
+      inputProps: {
+        ...props,
+        onBlur: handleBlur,
+        style: { display: "none" },
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-required": required || props["aria-required"],
+        "aria-describedby": props["aria-describedby"]
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      FileUploadDropzone,
+      {
+        role: "button",
+        "aria-label": placeholder,
+        className: cn(
+          "flex min-h-32 w-full cursor-pointer items-center justify-center border-input bg-transparent p-6 transition-colors",
+          "hover:bg-accent/50 hover:border-ring",
+          "data-[dragging]:bg-accent data-[dragging]:border-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          error && "border-destructive"
+        )
+      },
+      /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          width: "48",
+          height: "48",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React21.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ React21.createElement("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ React21.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+      ), /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium" }, fileCountLabel), accept && /* @__PURE__ */ React21.createElement("p", { className: "text-xs" }, "Accepted: ", accept), /* @__PURE__ */ React21.createElement("p", { className: "text-xs" }, "Max size: ", formatFileSize(maxSize)))
+    ),
+    /* @__PURE__ */ React21.createElement(FileUploadList, { className: "mt-4" }, normalizedValue.map((file, index) => {
+      const progressValue = uploadProgress[file.name];
+      const hasProgress = showProgress && typeof progressValue === "number";
+      return /* @__PURE__ */ React21.createElement(
+        FileUploadItem,
+        {
+          key: `${file.name}-${index}`,
+          value: file,
+          className: "flex items-center gap-3 border-border bg-card text-card-foreground hover:bg-primary/50 transition-colors"
+        },
+        showPreview ? /* @__PURE__ */ React21.createElement(FileUploadItemPreview, { className: "h-12 w-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
+        /* @__PURE__ */ React21.createElement("div", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React21.createElement(FileUploadItemMetadata, { className: "min-w-0" }), /* @__PURE__ */ React21.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), hasProgress ? /* @__PURE__ */ React21.createElement("div", { className: "mt-1 flex items-center gap-2" }, /* @__PURE__ */ React21.createElement(
+          "div",
+          {
+            className: "h-1.5 flex-1 overflow-hidden rounded-full bg-accent/40",
+            role: "progressbar",
+            "aria-valuenow": progressValue,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": `Upload progress: ${progressValue}%`
+          },
+          /* @__PURE__ */ React21.createElement(
+            "div",
+            {
+              className: "h-full bg-primary transition-all",
+              style: { width: `${progressValue}%` }
+            }
+          )
+        ), /* @__PURE__ */ React21.createElement("span", { className: "text-xs" }, progressValue, "%")) : null),
+        enableCropping && file.type.startsWith("image/") ? /* @__PURE__ */ React21.createElement(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            onClick: (event) => {
+              event.stopPropagation();
+              handleCrop(file);
+            },
+            disabled,
+            className: "h-8 w-8 p-0",
+            "aria-label": `Crop ${file.name}`
+          },
+          /* @__PURE__ */ React21.createElement(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true"
+            },
+            /* @__PURE__ */ React21.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+            /* @__PURE__ */ React21.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+          )
+        ) : null,
+        /* @__PURE__ */ React21.createElement(FileUploadItemDelete, { asChild: true }, /* @__PURE__ */ React21.createElement(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            disabled,
+            className: "h-8 w-8 p-0",
+            "aria-label": `Remove ${file.name}`
+          },
+          /* @__PURE__ */ React21.createElement(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true"
+            },
+            /* @__PURE__ */ React21.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ React21.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          )
+        ))
+      );
+    }))
+  ), /* @__PURE__ */ React21.createElement(
+    Dialog,
+    {
+      open: cropperOpen && Boolean(imageToCrop),
+      onOpenChange: (open) => {
+        if (!open) {
+          handleCropCancel();
+        }
+      }
+    },
+    imageToCrop ? /* @__PURE__ */ React21.createElement(
+      DialogContent,
+      {
+        showCloseButton: false,
+        className: "max-w-3xl gap-0 p-0",
+        "aria-describedby": void 0
+      },
+      /* @__PURE__ */ React21.createElement(DialogHeader, { className: "flex-row items-center justify-between border-b border-border px-4 py-3" }, /* @__PURE__ */ React21.createElement(DialogTitle, null, "Crop Image"), /* @__PURE__ */ React21.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React21.createElement(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 p-0",
+          "aria-label": "Close"
+        },
+        /* @__PURE__ */ React21.createElement(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true"
+          },
+          /* @__PURE__ */ React21.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React21.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        )
+      ))),
+      /* @__PURE__ */ React21.createElement("div", { className: "p-4" }, /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: "relative h-96 w-full overflow-hidden rounded-md bg-accent/40",
+          onMouseDown: (event) => {
+            event.preventDefault();
+            const startX = event.clientX - crop.x;
+            const startY = event.clientY - crop.y;
+            const handleMouseMove = (moveEvent) => {
+              onCropChange({
+                x: moveEvent.clientX - startX,
+                y: moveEvent.clientY - startY
+              });
+            };
+            const handleMouseUp = () => {
+              document.removeEventListener("mousemove", handleMouseMove);
+              document.removeEventListener("mouseup", handleMouseUp);
+            };
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+          }
+        },
+        /* @__PURE__ */ React21.createElement(
+          "img",
+          {
+            src: imageToCrop.url,
+            alt: "Crop preview",
+            className: "absolute inset-0 h-full w-full object-contain",
+            style: {
+              transform: `translate(${crop.x}px, ${crop.y}px) scale(${zoom})`
+            },
+            draggable: false,
+            onLoad: (event) => {
+              const image = event.currentTarget;
+              const containerWidth = 600;
+              const containerHeight = 400;
+              const cropWidth = cropAspectRatio ? Math.min(
+                containerWidth * 0.8,
+                containerHeight * 0.8 * cropAspectRatio
+              ) : containerWidth * 0.8;
+              const cropHeight = cropAspectRatio ? cropWidth / cropAspectRatio : containerHeight * 0.8;
+              const imageWidth = image.naturalWidth;
+              const imageHeight = image.naturalHeight;
+              const scale = zoom;
+              const centerX = containerWidth / 2;
+              const centerY = containerHeight / 2;
+              const cropX = (centerX - crop.x - cropWidth / 2) / scale;
+              const cropY = (centerY - crop.y - cropHeight / 2) / scale;
+              onCropCompleteInternal(null, {
+                x: Math.max(0, cropX),
+                y: Math.max(0, cropY),
+                width: Math.min(cropWidth / scale, imageWidth),
+                height: Math.min(cropHeight / scale, imageHeight)
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ React21.createElement(
+          "div",
+          {
+            className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded border-2 border-primary",
+            style: {
+              width: cropAspectRatio ? `${Math.min(80, 80 * cropAspectRatio)}%` : "80%",
+              aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
+            }
+          },
+          /* @__PURE__ */ React21.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React21.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React21.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React21.createElement("div", null))
+        )
+      ), /* @__PURE__ */ React21.createElement("div", { className: "mt-4 flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(
+        "label",
+        {
+          htmlFor: "zoom-slider",
+          className: "whitespace-nowrap text-sm font-medium"
+        },
+        "Zoom: ",
+        zoom.toFixed(1),
+        "x"
+      ), /* @__PURE__ */ React21.createElement(
+        "input",
+        {
+          id: "zoom-slider",
+          type: "range",
+          min: "1",
+          max: "3",
+          step: "0.1",
+          value: zoom,
+          onChange: (event) => onZoomChange(parseFloat(event.target.value)),
+          className: "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-accent/60",
+          "aria-label": "Zoom level"
+        }
+      ))),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-end gap-2 border-t border-border p-4" }, /* @__PURE__ */ React21.createElement(Button, { type: "button", variant: "outline", onClick: handleCropCancel }, "Cancel"), /* @__PURE__ */ React21.createElement(Button, { type: "button", onClick: handleCropSave }, "Save"))
+    ) : null
+  ));
+}
+FileInput.displayName = "FileInput";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ React21.createElement(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:opacity-70 [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "opacity-70 rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none opacity-70",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "opacity-50",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ React21.createElement(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ React21.createElement(
+              "svg",
+              {
+                className: cn("size-4", className2),
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                ...props2
+              },
+              /* @__PURE__ */ React21.createElement("polyline", { points: "15 18 9 12 15 6" })
+            );
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ React21.createElement(
+              "svg",
+              {
+                className: cn("size-4", className2),
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                ...props2
+              },
+              /* @__PURE__ */ React21.createElement("polyline", { points: "9 18 15 12 9 6" })
+            );
+          }
+          return /* @__PURE__ */ React21.createElement(
+            "svg",
+            {
+              className: cn("size-4", className2),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              ...props2
+            },
+            /* @__PURE__ */ React21.createElement("polyline", { points: "6 9 12 15 18 9" })
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ React21.createElement("td", { ...props2 }, /* @__PURE__ */ React21.createElement("div", { className: "flex size-(--cell-size) items-center justify-center text-center" }, children));
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React21.useRef(null);
+  React21.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ React21.createElement(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        // Core structure
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal",
+        // Selected states - uses CSS variables
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground",
+        "data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
+        "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
+        "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
+        // Focus state
+        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10",
+        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 group-data-[focused=true]/day:ring-[3px]",
+        // Rounding based on position
+        "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md",
+        "data-[range-middle=true]:rounded-none",
+        "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md",
+        // Nested span styling
+        "[&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/inputs/DatePicker.tsx
+function formatDate(date, format) {
+  if (!date) return "";
+  const d = new Date(date);
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const year = d.getFullYear();
+  return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
+}
+function DatePickerDayButton({
+  day,
+  modifiers,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
+        "hover:bg-accent",
+        modifiers.selected && "bg-primary text-primary-foreground font-semibold",
+        !modifiers.selected && modifiers.today && "border border-primary",
+        modifiers.disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+        className
+      ),
+      ...props
+    },
+    children ?? day.date.getDate()
+  );
+}
+function DatePicker({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select date...",
+  format = "MM/dd/yyyy",
+  minDate,
+  maxDate,
+  disabledDates = [],
+  isDateDisabled,
+  clearable = true,
+  showIcon = true,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [hasInteracted, setHasInteracted] = React21.useState(false);
+  const [selectedMonth, setSelectedMonth] = React21.useState(
+    value || /* @__PURE__ */ new Date()
+  );
+  const inputRef = React21.useRef(null);
+  React21.useEffect(() => {
+    if (value) {
+      setSelectedMonth(value);
+    }
+  }, [value]);
+  const disabledMatchers = React21.useMemo(() => {
+    const matchers = [];
+    if (minDate) {
+      matchers.push({ before: minDate });
+    }
+    if (maxDate) {
+      matchers.push({ after: maxDate });
+    }
+    if (disabledDates.length > 0) {
+      matchers.push(disabledDates);
+    }
+    if (isDateDisabled) {
+      matchers.push(isDateDisabled);
+    }
+    return matchers;
+  }, [disabledDates, isDateDisabled, maxDate, minDate]);
+  const handleDateSelect = React21.useCallback(
+    (date) => {
+      if (!date) return;
+      onChange(date);
+      setSelectedMonth(date);
+      setIsOpen(false);
+      onBlur?.();
+    },
+    [onBlur, onChange]
+  );
+  const handleClear = React21.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange(null);
+      setIsOpen(false);
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+  const handleOpenChange = React21.useCallback(
+    (nextOpen) => {
+      if (disabled) {
+        setIsOpen(false);
+        return;
+      }
+      if (nextOpen) {
+        if (!hasInteracted) {
+          setHasInteracted(true);
+        }
+        setIsOpen(true);
+        return;
+      }
+      if (isOpen && hasInteracted) {
+        onBlur?.();
+      }
+      setIsOpen(false);
+    },
+    [disabled, hasInteracted, isOpen, onBlur]
+  );
+  const handleInputBlur = React21.useCallback(() => {
+    if (!isOpen) {
+      onBlur?.();
+    }
+  }, [isOpen, onBlur]);
+  const handleInputClick = React21.useCallback(() => {
+    if (!hasInteracted) {
+      setHasInteracted(true);
+    }
+  }, [hasInteracted]);
+  const hasValue = Boolean(value);
+  const displayValue = formatDate(value, format);
+  const combinedClassName = cn("relative", className);
+  return /* @__PURE__ */ React21.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      type: "hidden",
+      name,
+      value: value ? value.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React21.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React21.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React21.createElement(
+    "span",
+    {
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React21.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+    )
+  ), /* @__PURE__ */ React21.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      ref: inputRef,
+      id: props.id,
+      type: "text",
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        INPUT_AUTOFILL_RESET_CLASSES,
+        showIcon ? "pl-10" : "pl-3",
+        clearable && value ? "pr-10" : "pr-3",
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      value: displayValue,
+      onClick: handleInputClick,
+      onBlur: handleInputBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      readOnly: true
+    }
+  )), clearable && value && !disabled && /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 transition-colors",
+      onClick: handleClear,
+      "aria-label": "Clear date",
+      tabIndex: -1
+    },
+    "\u2715"
+  )), !disabled && /* @__PURE__ */ React21.createElement(
+    PopoverContent,
+    {
+      align: "start",
+      sideOffset: 4,
+      className: "w-auto p-0",
+      onOpenAutoFocus: (event) => {
+        event.preventDefault();
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Calendar,
+      {
+        mode: "single",
+        selected: value ?? void 0,
+        onSelect: handleDateSelect,
+        month: selectedMonth,
+        onMonthChange: setSelectedMonth,
+        disabled: disabledMatchers,
+        showOutsideDays: true,
+        labels: {
+          labelGrid: () => "Calendar",
+          labelDayButton: (date) => formatDate(date, format),
+          labelPrevious: () => "Previous month",
+          labelNext: () => "Next month"
+        },
+        components: {
+          DayButton: DatePickerDayButton
+        },
+        classNames: {
+          today: "border border-primary rounded-md bg-transparent"
+        }
+      }
+    )
+  )));
+}
+DatePicker.displayName = "DatePicker";
+function normalizeToNativeTime(value) {
+  if (!value) return "";
+  const twelveHourMatch = value.match(
+    /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)$/i
+  );
+  if (twelveHourMatch) {
+    const rawHour = parseInt(twelveHourMatch[1], 10);
+    const minute = parseInt(twelveHourMatch[2], 10);
+    const period = twelveHourMatch[4].toUpperCase();
+    if (Number.isNaN(rawHour) || Number.isNaN(minute) || rawHour < 1 || rawHour > 12 || minute < 0 || minute > 59) {
+      return "";
+    }
+    const normalizedHour = period === "PM" ? rawHour === 12 ? 12 : rawHour + 12 : rawHour === 12 ? 0 : rawHour;
+    return `${String(normalizedHour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+  const twentyFourHourMatch = value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+  if (twentyFourHourMatch) {
+    const hour = parseInt(twentyFourHourMatch[1], 10);
+    const minute = parseInt(twentyFourHourMatch[2], 10);
+    if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+      return "";
+    }
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+  return "";
+}
+function formatFromNativeTime(nativeValue, use24Hour) {
+  if (!nativeValue) return "";
+  const [hourValue, minuteValue] = nativeValue.split(":");
+  const hour = parseInt(hourValue, 10);
+  const minute = parseInt(minuteValue, 10);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) {
+    return "";
+  }
+  if (use24Hour) {
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour % 12 || 12;
+  return `${hour12}:${String(minute).padStart(2, "0")} ${period}`;
+}
+function TimePicker({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select time...",
+  use24Hour = false,
+  minuteStep = 1,
+  clearable = true,
+  showIcon = true,
+  ...props
+}) {
+  const inputRef = React21.useRef(null);
+  const [nativeValue, setNativeValue] = React21.useState(
+    normalizeToNativeTime(value)
+  );
+  React21.useEffect(() => {
+    setNativeValue(normalizeToNativeTime(value));
+  }, [value]);
+  const handleChange = (e) => {
+    const nextNativeValue = e.target.value;
+    setNativeValue(nextNativeValue);
+    onChange(formatFromNativeTime(nextNativeValue, use24Hour));
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setNativeValue("");
+    onChange("");
+    inputRef.current?.focus();
+  };
+  const hasValue = Boolean(value);
+  const stepInSeconds = Math.max(1, minuteStep * 60);
+  return /* @__PURE__ */ React21.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React21.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React21.createElement(
+    "span",
+    {
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React21.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React21.createElement("path", { d: "M12 6v6l4 2" })
+    )
+  ), /* @__PURE__ */ React21.createElement(
+    Input,
+    {
+      ref: inputRef,
+      type: "time",
+      className: cn(
+        "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
+        INPUT_AUTOFILL_RESET_CLASSES,
+        showIcon ? "pl-10" : "pl-3",
+        clearable && value ? "pr-10" : "pr-3",
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      value: nativeValue,
+      onChange: handleChange,
+      onBlur,
+      disabled,
+      required,
+      step: stepInSeconds,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  ), clearable && value && !disabled && /* @__PURE__ */ React21.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      className: "absolute right-1.5 top-1/2 h-7 w-7 -translate-y-1/2 p-0",
+      onClick: handleClear,
+      "aria-label": "Clear time",
+      tabIndex: -1
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React21.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ React21.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    )
+  )));
+}
+TimePicker.displayName = "TimePicker";
+function formatDate2(date, format) {
+  if (!date) return "";
+  const d = new Date(date);
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const year = d.getFullYear();
+  return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
+}
+function toDayTimestamp(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function isSameDay(date, target) {
+  if (!target) return false;
+  return toDayTimestamp(date) === toDayTimestamp(target);
+}
+function isDateInRange(date, start, end) {
+  if (!start || !end) return false;
+  const value = toDayTimestamp(date);
+  const startTs = toDayTimestamp(start);
+  const endTs = toDayTimestamp(end);
+  return value >= Math.min(startTs, endTs) && value <= Math.max(startTs, endTs);
+}
+function DateRangePicker({
+  name,
+  value = { start: null, end: null },
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select date range...",
+  format = "MM/dd/yyyy",
+  minDate,
+  maxDate,
+  disabledDates = [],
+  isDateDisabled,
+  clearable = true,
+  showIcon = true,
+  separator = " - ",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [hasInteracted, setHasInteracted] = React21.useState(false);
+  const [selectedMonth, setSelectedMonth] = React21.useState(
+    value.start || /* @__PURE__ */ new Date()
+  );
+  const [rangeStart, setRangeStart] = React21.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React21.useState(value.end);
+  const [hoverDate, setHoverDate] = React21.useState(null);
+  const inputRef = React21.useRef(null);
+  React21.useEffect(() => {
+    setRangeStart(value.start);
+    setRangeEnd(value.end);
+    if (value.start) {
+      setSelectedMonth(value.start);
+    }
+  }, [value]);
+  const disabledMatchers = React21.useMemo(() => {
+    const matchers = [];
+    if (minDate) {
+      matchers.push({ before: minDate });
+    }
+    if (maxDate) {
+      matchers.push({ after: maxDate });
+    }
+    if (disabledDates.length > 0) {
+      matchers.push(disabledDates);
+    }
+    if (isDateDisabled) {
+      matchers.push(isDateDisabled);
+    }
+    return matchers;
+  }, [disabledDates, isDateDisabled, maxDate, minDate]);
+  const handleDateSelect = React21.useCallback(
+    (date) => {
+      if (!rangeStart || rangeEnd) {
+        setRangeStart(date);
+        setRangeEnd(null);
+        setHoverDate(null);
+        setSelectedMonth(date);
+        onChange({ start: date, end: null });
+        onBlur?.();
+        return;
+      }
+      if (toDayTimestamp(date) < toDayTimestamp(rangeStart)) {
+        setRangeStart(date);
+        setRangeEnd(rangeStart);
+        setHoverDate(null);
+        setSelectedMonth(date);
+        onChange({ start: date, end: rangeStart });
+        setIsOpen(false);
+        onBlur?.();
+        return;
+      }
+      setRangeEnd(date);
+      setHoverDate(null);
+      setSelectedMonth(date);
+      onChange({ start: rangeStart, end: date });
+      setIsOpen(false);
+      onBlur?.();
+    },
+    [onBlur, onChange, rangeEnd, rangeStart]
+  );
+  const handleClear = React21.useCallback(
+    (e) => {
+      e.stopPropagation();
+      setRangeStart(null);
+      setRangeEnd(null);
+      setHoverDate(null);
+      setIsOpen(false);
+      onChange({ start: null, end: null });
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+  const handleOpenChange = React21.useCallback(
+    (nextOpen) => {
+      if (disabled) {
+        setIsOpen(false);
+        return;
+      }
+      if (nextOpen) {
+        if (!hasInteracted) {
+          setHasInteracted(true);
+        }
+        setIsOpen(true);
+        return;
+      }
+      if (isOpen && hasInteracted) {
+        onBlur?.();
+      }
+      setHoverDate(null);
+      setIsOpen(false);
+    },
+    [disabled, hasInteracted, isOpen, onBlur]
+  );
+  const handleInputBlur = React21.useCallback(() => {
+    if (!isOpen) {
+      onBlur?.();
+    }
+  }, [isOpen, onBlur]);
+  const handleInputClick = React21.useCallback(() => {
+    if (!hasInteracted) {
+      setHasInteracted(true);
+    }
+  }, [hasInteracted]);
+  const RangeDayButton = React21.useCallback(
+    ({
+      day,
+      modifiers,
+      className: dayClassName,
+      children,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      ...rest
+    }) => {
+      const date = day.date;
+      const isStart = isSameDay(date, rangeStart);
+      const isEnd = isSameDay(date, rangeEnd);
+      const isRangeEndpoint = isStart || isEnd;
+      const isInCommittedRange = isDateInRange(date, rangeStart, rangeEnd);
+      const isInHoverRange = !!rangeStart && !rangeEnd && !!hoverDate && isDateInRange(date, rangeStart, hoverDate);
+      const isRangeHighlight = (isInCommittedRange || isInHoverRange) && !isRangeEndpoint;
+      const isToday = isSameDay(date, /* @__PURE__ */ new Date());
+      return /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "button",
+          ...rest,
+          className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
+            "hover:bg-accent",
+            isRangeEndpoint && "bg-primary text-primary-foreground font-semibold",
+            isRangeHighlight && "bg-accent",
+            !isRangeEndpoint && !isRangeHighlight && isToday && "border border-primary",
+            modifiers.disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+            dayClassName
+          ),
+          onClick: (event) => {
+            onClick?.(event);
+            if (modifiers.disabled) return;
+            handleDateSelect(date);
+          },
+          onMouseEnter: (event) => {
+            onMouseEnter?.(event);
+            if (modifiers.disabled) {
+              setHoverDate(null);
+              return;
+            }
+            setHoverDate(date);
+          },
+          onMouseLeave: (event) => {
+            onMouseLeave?.(event);
+            setHoverDate(null);
+          }
+        },
+        children ?? date.getDate()
+      );
+    },
+    [handleDateSelect, hoverDate, rangeEnd, rangeStart]
+  );
+  const hasValue = Boolean(rangeStart || rangeEnd);
+  const selectedRange = rangeStart || rangeEnd ? {
+    from: rangeStart ?? void 0,
+    to: rangeEnd ?? void 0
+  } : void 0;
+  const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
+  const combinedClassName = cn("relative", className);
+  return /* @__PURE__ */ React21.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      type: "hidden",
+      name: `${name}[start]`,
+      value: rangeStart ? rangeStart.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      type: "hidden",
+      name: `${name}[end]`,
+      value: rangeEnd ? rangeEnd.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React21.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React21.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React21.createElement(
+    "span",
+    {
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React21.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React21.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+    )
+  ), /* @__PURE__ */ React21.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React21.createElement(
+    "input",
+    {
+      ref: inputRef,
+      id: props.id,
+      type: "text",
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        INPUT_AUTOFILL_RESET_CLASSES,
+        showIcon ? "pl-10" : "pl-3",
+        clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      value: displayValue,
+      onClick: handleInputClick,
+      onBlur: handleInputBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      readOnly: true
+    }
+  )), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 transition-colors",
+      onClick: handleClear,
+      "aria-label": "Clear date range",
+      tabIndex: -1
+    },
+    "\u2715"
+  )), !disabled && /* @__PURE__ */ React21.createElement(
+    PopoverContent,
+    {
+      align: "start",
+      sideOffset: 4,
+      className: "w-auto p-0",
+      onOpenAutoFocus: (event) => {
+        event.preventDefault();
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Calendar,
+      {
+        mode: "range",
+        selected: selectedRange,
+        month: selectedMonth,
+        onMonthChange: setSelectedMonth,
+        disabled: disabledMatchers,
+        labels: {
+          labelGrid: () => "Calendar",
+          labelDayButton: (date) => formatDate2(date, format),
+          labelPrevious: () => "Previous month",
+          labelNext: () => "Next month"
+        },
+        components: {
+          DayButton: RangeDayButton
+        },
+        classNames: {
+          today: "border border-primary rounded-md bg-transparent"
+        },
+        showOutsideDays: true
+      }
+    ),
+    rangeStart && !rangeEnd && /* @__PURE__ */ React21.createElement("div", { className: "border-t border-input px-3 py-2 text-center text-xs opacity-70" }, "Select end date")
+  )));
+}
+DateRangePicker.displayName = "DateRangePicker";
+
+export { Checkbox2 as Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select2 as Select, Switch2 as Switch, TextArea, TextInput, TimePicker };
+//# sourceMappingURL=chunk-5NT5T5XY.js.map
+//# sourceMappingURL=chunk-5NT5T5XY.js.map