@wow-two-beta/ui 0.0.56 → 0.0.58

package/dist/{chunk-BKWLS6V2.js → chunk-HG7NX6GP.js}

@@ -1,17 +1,17 @@
-import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-CRKW4VXA.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-IEAFEEZB.js';
-import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-VIWAIXVK.js';
-import { useControlled } from './chunk-NUMFGKPY.js';
-import { Icon } from './chunk-F227LKWK.js';
-import { tv, CssExtensions, ColorExtensions, dataAttr, surfaceVariants, Equality } from './chunk-RDDIOVK4.js';
-import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-BMABNEZX.js';
-import { useId } from './chunk-KDXJQNB6.js';
-import { cn, composeRefs } from './chunk-LDRFQG44.js';
+import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-577JZ2A2.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-MTD4RTGO.js';
+import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-XDATW7NF.js';
+import { useControlled, useTypeahead } from './chunk-V267IMBH.js';
+import { Icon } from './chunk-MVMDDGW7.js';
+import { tv, CssExtensions, ColorExtensions, dataAttr, surfaceVariants, Equality } from './chunk-JYGC5SRP.js';
+import { useFormControl, FormControlProvider, Announce, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-TTSJZEL7.js';
+import { useId } from './chunk-LGTGZ3RW.js';
+import { cn, composeRefs } from './chunk-X2MYOHOB.js';
 import * as React from 'react';
-import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useEffect, useMemo, useCallback, Fragment as Fragment$1, useContext } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, useEffect, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, Fragment as Fragment$1, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, Loader2, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, Zap, Wallet, Video, User, Trash, Tag as Tag$1, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Link2, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Code, Cloud, Camera, Bookmark, Bell, ChevronLeft, Heading1, Heading2, Bold, Italic, List, Quote } from 'lucide-react';
-import { marked } from 'marked';
+import { Marked } from 'marked';
 
 var SIZE = {
   xs: "text-xs",
@@ -19,9 +19,9 @@ var SIZE = {
   md: "text-sm"
 };
 var Label = forwardRef(
-  ({ className, required, size = "md", htmlFor, id, children, ...props }, ref) => {
+  ({ className, isRequired: isRequiredProp, size = "md", htmlFor, id, children, ...props }, ref) => {
     const ctx = useFormControl();
-    const isRequired = required ?? ctx?.isRequired ?? false;
+    const isRequired = isRequiredProp ?? ctx?.isRequired ?? false;
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -224,8 +224,8 @@ var NumberInput = forwardRef(
     const adjust = (direction) => {
       const el = inputRef.current;
       if (!el || typeof el.stepUp !== "function") return;
-      if (direction === 1) el.stepUp(step);
-      else el.stepDown(step);
+      if (direction === 1) el.stepUp();
+      else el.stepDown();
       el.dispatchEvent(new Event("input", { bubbles: true }));
       el.dispatchEvent(new Event("change", { bubbles: true }));
     };
@@ -285,7 +285,7 @@ var PasswordInput = forwardRef(
     disabled,
     required,
     readOnly,
-    toggleable = true,
+    hasToggle = true,
     autoComplete = "current-password",
     ...props
   }, ref) => {
@@ -307,11 +307,11 @@ var PasswordInput = forwardRef(
           readOnly: readOnly ?? ctx?.isReadOnly,
           "aria-invalid": ctx?.isInvalid || void 0,
           "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
-          className: cn(inputBaseVariants({ size, state: finalState }), toggleable && "pr-10"),
+          className: cn(inputBaseVariants({ size, state: finalState }), hasToggle && "pr-10"),
           ...props
         }
       ),
-      toggleable && /* @__PURE__ */ jsx(
+      hasToggle && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -336,7 +336,7 @@ var SearchInput = forwardRef(
     disabled,
     required,
     readOnly,
-    clearable = true,
+    isClearable = true,
     onClear,
     onChange,
     defaultValue,
@@ -351,7 +351,7 @@ var SearchInput = forwardRef(
     const isControlled = value !== void 0;
     const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
     const currentValue = isControlled ? value : uncontrolled;
-    const showClear = clearable && String(currentValue ?? "").length > 0;
+    const showClear = isClearable && String(currentValue ?? "").length > 0;
     const handleClear = () => {
       const el = inputRef.current;
       if (el) {
@@ -580,7 +580,7 @@ var Checkbox = forwardRef(
   ({
     className,
     size = "md",
-    indeterminate,
+    isIndeterminate,
     variant = "solid",
     tone = "primary",
     color,
@@ -592,6 +592,10 @@ var Checkbox = forwardRef(
   }, ref) => {
     const ctx = useFormControl();
     const isDisabled = disabled ?? ctx?.isDisabled;
+    const inputRef = useRef(null);
+    useEffect(() => {
+      if (inputRef.current) inputRef.current.indeterminate = Boolean(isIndeterminate);
+    }, [isIndeterminate]);
     const { preset: sizePreset, box: sizeBox } = CssExtensions.parseSizeUnion(
       size,
       CHECKBOX_SIZE_PRESETS
@@ -610,12 +614,13 @@ var Checkbox = forwardRef(
           /* @__PURE__ */ jsx(
             "input",
             {
-              ref,
+              ref: composeRefs(inputRef, ref),
               type: "checkbox",
               id: id ?? ctx?.id,
               disabled: isDisabled,
               required: required ?? ctx?.isRequired,
               checked,
+              "aria-checked": isIndeterminate ? "mixed" : void 0,
               "aria-invalid": ctx?.isInvalid || void 0,
               "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
               className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
@@ -628,9 +633,9 @@ var Checkbox = forwardRef(
               "aria-hidden": "true",
               className: cn(
                 checkboxVariants({ variant, tone }),
-                indeterminate ? INDETERMINATE_CHECKED_CLASS[variant][tone] : "[&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100"
+                isIndeterminate ? INDETERMINATE_CHECKED_CLASS[variant][tone] : "[&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100"
               ),
-              children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: iconClass }) : /* @__PURE__ */ jsx(Check, { className: iconClass })
+              children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, { className: iconClass }) : /* @__PURE__ */ jsx(Check, { className: iconClass })
             }
           )
         ]
@@ -668,10 +673,12 @@ var Radio = forwardRef(
           className: cn(
             "pointer-events-none grid h-full w-full place-items-center rounded-full border border-input bg-background transition-colors",
             "peer-checked:border-primary",
+            /* Dot opacity gate lives on this span (a peer sibling of the input) — child-selector targets the dot. peer-checked: cannot reach descendants directly. */
+            "[&>span]:opacity-0 peer-checked:[&>span]:opacity-100",
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
             "peer-disabled:opacity-50"
           ),
-          children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary opacity-0 peer-checked:opacity-100" })
+          children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary" })
         }
       )
     ] });
@@ -684,9 +691,14 @@ var TRACK_CLASS = {
   lg: "h-6 w-11"
 };
 var THUMB_CLASS = {
-  sm: "h-3 w-3 peer-checked:translate-x-3",
-  md: "h-4 w-4 peer-checked:translate-x-4",
-  lg: "h-5 w-5 peer-checked:translate-x-5"
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var TRACK_CHECKED_CLASS = {
+  sm: "peer-checked:[&>span]:translate-x-3",
+  md: "peer-checked:[&>span]:translate-x-4",
+  lg: "peer-checked:[&>span]:translate-x-5"
 };
 var Switch = forwardRef(
   ({ className, size = "md", id, disabled, required, ...props }, ref) => {
@@ -713,6 +725,7 @@ var Switch = forwardRef(
           className: cn(
             "pointer-events-none flex h-full w-full items-center rounded-full bg-input px-0.5 transition-colors",
             "peer-checked:bg-primary",
+            TRACK_CHECKED_CLASS[size],
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
             "peer-disabled:opacity-50"
           ),
@@ -732,9 +745,9 @@ var Switch = forwardRef(
 );
 Switch.displayName = "Switch";
 var TRACK_CLASS2 = {
-  sm: "h-1",
-  md: "h-1.5",
-  lg: "h-2"
+  sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
+  md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-moz-range-track]:h-1.5",
+  lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2"
 };
 var Slider = forwardRef(
   ({ className, size = "md", id, disabled, required, min = 0, max = 100, ...props }, ref) => {
@@ -752,12 +765,11 @@ var Slider = forwardRef(
         "aria-invalid": ctx?.isInvalid || void 0,
         className: cn(
           "w-full appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
+          TRACK_CLASS2[size],
           // WebKit
           "[&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted",
-          `[&::-webkit-slider-runnable-track]:${TRACK_CLASS2[size]}`,
           "[&::-webkit-slider-thumb]:mt-[-6px] [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
           // Firefox
-          `[&::-moz-range-track]:${TRACK_CLASS2[size]}`,
           "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted",
           "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background",
           "focus-visible:outline-none focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-ring",
@@ -941,33 +953,31 @@ var PinInput = forwardRef(
     onComplete,
     type = "numeric",
     size = "md",
-    mask,
+    isMasked,
     isDisabled,
     className,
     ...props
   }, ref) => {
-    const [val, setVal] = useControlled({
-      controlled: value,
-      default: defaultValue ?? "",
-      onChange: onValueChange
+    const toCells = (s) => Array.from({ length }, (_, i) => s[i] ?? "");
+    const [cells, setCells] = useControlled({
+      controlled: value === void 0 ? void 0 : toCells(value),
+      default: toCells(defaultValue ?? ""),
+      onChange: (next) => onValueChange?.(next.join(""))
     });
-    const cells = Array.from({ length }, (_, i) => val[i] ?? "");
     const inputs = useRef([]);
     const wrapperRef = useRef(null);
     useImperativeHandle(ref, () => wrapperRef.current);
     const isAllowed = (ch) => type === "numeric" ? /^[0-9]$/.test(ch) : /^[A-Za-z0-9]$/.test(ch);
     const update = (next) => {
-      const trimmed = next.slice(0, length);
-      setVal(trimmed);
-      if (trimmed.length === length) onComplete?.(trimmed);
+      setCells(next);
+      if (next.every(Boolean)) onComplete?.(next.join(""));
     };
     const handleChange = (i, raw) => {
       const ch = raw.slice(-1);
       if (ch && !isAllowed(ch)) return;
       const arr = cells.slice();
       arr[i] = ch;
-      const next = arr.join("").slice(0, length);
-      update(next);
+      update(arr);
       if (ch && i < length - 1) inputs.current[i + 1]?.focus();
     };
     const handleKeyDown = (i, e) => {
@@ -986,7 +996,7 @@ var PinInput = forwardRef(
       const filtered = pasted.split("").filter(isAllowed).join("");
       if (filtered) {
         e.preventDefault();
-        update(filtered);
+        update(toCells(filtered));
         const focusIdx = Math.min(filtered.length, length - 1);
         inputs.current[focusIdx]?.focus();
       }
@@ -997,7 +1007,7 @@ var PinInput = forwardRef(
         ref: (el) => {
           inputs.current[i] = el;
         },
-        type: mask ? "password" : "text",
+        type: isMasked ? "password" : "text",
         inputMode: type === "numeric" ? "numeric" : "text",
         autoComplete: "one-time-code",
         maxLength: 1,
@@ -1099,7 +1109,7 @@ var PercentInput = forwardRef(
 );
 PercentInput.displayName = "PercentInput";
 var CharacterCount = forwardRef(
-  ({ value, max, showMax = true, className, ...props }, ref) => {
+  ({ value, max, isMaxShown = true, className, ...props }, ref) => {
     const over = value > max;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1114,7 +1124,7 @@ var CharacterCount = forwardRef(
         ...props,
         children: [
           value,
-          showMax && ` / ${max}`
+          isMaxShown && ` / ${max}`
         ]
       }
     );
@@ -1219,7 +1229,7 @@ function scorePassword(pw) {
   return Math.min(4, score);
 }
 var PasswordStrength = forwardRef(
-  ({ value, score, hideLabel, className, ...props }, ref) => {
+  ({ value, score, isLabelHidden, className, ...props }, ref) => {
     const s = score ?? (value.length === 0 ? 0 : scorePassword(value));
     const label = LABELS[s] ?? "";
     const tone = TONE[s] ?? "bg-destructive";
@@ -1234,7 +1244,7 @@ var PasswordStrength = forwardRef(
         },
         i
       )) }),
-      !hideLabel && value && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: label })
+      !isLabelHidden && value && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: label })
     ] });
   }
 );
@@ -1272,7 +1282,10 @@ var FilePicker = forwardRef(
           type: "file",
           disabled,
           className: "sr-only",
-          onChange: (e) => onFilesChange?.(e.target.files),
+          onChange: (e) => {
+            onFilesChange?.(e.target.files);
+            e.target.value = "";
+          },
           ...props
         }
       ),
@@ -1290,26 +1303,27 @@ function useListboxContext() {
 }
 function ListboxImpl(props, ref) {
   const {
-    multiple = false,
+    isMultiple = false,
     value,
     defaultValue,
     onValueChange,
     isEqual,
     indicator,
+    onActiveChange,
     variant,
     tone,
     radius,
     padding,
     elevation,
-    disabled,
+    isDisabled,
     className,
     children,
     onKeyDown,
     ...rest
   } = props;
   const equals = isEqual ?? defaultEquals;
-  const resolvedIndicator = indicator ?? (multiple ? "checkbox" : "check");
-  const initial = defaultValue ?? (multiple ? [] : void 0);
+  const resolvedIndicator = indicator ?? (isMultiple ? "checkbox" : "check");
+  const initial = defaultValue ?? (isMultiple ? [] : void 0);
   const [current, setCurrent] = useControlled({
     controlled: value,
     default: initial,
@@ -1331,7 +1345,7 @@ function ListboxImpl(props, ref) {
   }, []);
   const onItemSelect = useCallback(
     (next) => {
-      if (multiple) {
+      if (isMultiple) {
         const cur = Array.isArray(current) ? current : [];
         const has = cur.some((v) => equals(v, next));
         const out = has ? cur.filter((v) => !equals(v, next)) : [...cur, next];
@@ -1340,19 +1354,28 @@ function ListboxImpl(props, ref) {
         setCurrent(next);
       }
     },
-    [multiple, current, setCurrent, equals]
+    [isMultiple, current, setCurrent, equals]
   );
   useEffect(() => {
     if (activeId) return;
     const firstSelected = items.current.find(
-      (i) => !i.disabled && values.some((v) => equals(v, i.value))
+      (i) => !i.isDisabled && values.some((v) => equals(v, i.value))
     );
-    const firstEnabled = items.current.find((i) => !i.disabled);
+    const firstEnabled = items.current.find((i) => !i.isDisabled);
     setActiveId((firstSelected ?? firstEnabled)?.id ?? null);
   }, []);
+  const onActiveChangeRef = useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  useEffect(() => {
+    onActiveChangeRef.current?.(activeId);
+  }, [activeId]);
+  const activateById = useCallback((id) => {
+    setActiveId(id);
+    document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+  }, []);
   const moveActive = useCallback(
     (direction, jump = 1) => {
-      const list = items.current.filter((i) => !i.disabled);
+      const list = items.current.filter((i) => !i.isDisabled);
       if (list.length === 0) return;
       const currentIdx = list.findIndex((i) => i.id === activeId);
       let nextIdx = currentIdx + direction * jump;
@@ -1360,14 +1383,25 @@ function ListboxImpl(props, ref) {
       if (nextIdx < 0) nextIdx = 0;
       if (nextIdx >= list.length) nextIdx = list.length - 1;
       const nextEntry = list[nextIdx];
-      if (nextEntry) setActiveId(nextEntry.id);
+      if (nextEntry) activateById(nextEntry.id);
     },
-    [activeId]
+    [activeId, activateById]
   );
+  const typeahead = useTypeahead({
+    items: () => items.current,
+    getLabel: (entry) => document.getElementById(entry.id)?.textContent ?? "",
+    isDisabled: (entry) => entry.isDisabled,
+    getActiveIndex: () => items.current.findIndex((i) => i.id === activeId),
+    onMatch: (entry) => activateById(entry.id)
+  });
   const handleKeyDown = useCallback(
     (event) => {
       onKeyDown?.(event);
-      if (event.defaultPrevented || disabled) return;
+      if (event.defaultPrevented || isDisabled) return;
+      if (typeahead.onKeyDown(event)) {
+        event.preventDefault();
+        return;
+      }
       switch (event.key) {
         case "ArrowDown":
           event.preventDefault();
@@ -1397,18 +1431,18 @@ function ListboxImpl(props, ref) {
         case " ": {
           if (!activeId) return;
           const entry = items.current.find((i) => i.id === activeId);
-          if (!entry || entry.disabled) return;
+          if (!entry || entry.isDisabled) return;
           event.preventDefault();
           onItemSelect(entry.value);
           break;
         }
       }
     },
-    [activeId, disabled, moveActive, onItemSelect, onKeyDown]
+    [activeId, isDisabled, moveActive, onItemSelect, onKeyDown, typeahead]
   );
   const ctx = useMemo(
     () => ({
-      multiple,
+      isMultiple,
       values,
       isEqual: equals,
       activeId,
@@ -1416,17 +1450,19 @@ function ListboxImpl(props, ref) {
       registerItem,
       unregisterItem,
       setActiveId,
-      indicator: resolvedIndicator
+      indicator: resolvedIndicator,
+      isDisabled: isDisabled ?? false
     }),
     [
-      multiple,
+      isMultiple,
       values,
       equals,
       activeId,
       onItemSelect,
       registerItem,
       unregisterItem,
-      resolvedIndicator
+      resolvedIndicator,
+      isDisabled
     ]
   );
   const resolvedPadding = padding ?? "xs";
@@ -1435,10 +1471,10 @@ function ListboxImpl(props, ref) {
     {
       ref,
       role: "listbox",
-      tabIndex: disabled ? -1 : 0,
-      "aria-multiselectable": multiple || void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-multiselectable": isMultiple || void 0,
       "aria-activedescendant": activeId ?? void 0,
-      "aria-disabled": disabled || void 0,
+      "aria-disabled": isDisabled || void 0,
       onKeyDown: handleKeyDown,
       className: cn(
         surfaceVariants({ variant, tone, radius, padding: resolvedPadding, elevation }),
@@ -1498,25 +1534,25 @@ function LeadingIndicator({
 function TrailingIndicator({
   indicator,
   isSelected,
-  multiple
+  isMultiple
 }) {
   if (indicator === "check" && isSelected) {
-    return /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 shrink-0", !multiple && "opacity-80") });
+    return /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 shrink-0", !isMultiple && "opacity-80") });
   }
   return null;
 }
-var ListboxItem = forwardRef(function ListboxItem2({ value, disabled = false, indicator: itemIndicator, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
+var ListboxItem = forwardRef(function ListboxItem2({ value, isDisabled = false, indicator: itemIndicator, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
   const ctx = useListboxContext();
   const id = useId$1();
   const ref = useRef(null);
   const indicator = itemIndicator ?? ctx.indicator;
   useEffect(() => {
-    ctx.registerItem({ id, value, disabled });
+    ctx.registerItem({ id, value, isDisabled });
     return () => ctx.unregisterItem(id);
-  }, [ctx, id, value, disabled]);
+  }, [ctx, id, value, isDisabled]);
   const isSelected = ctx.values.some((v) => ctx.isEqual(v, value));
   const isActive = ctx.activeId === id;
-  const state = disabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
+  const state = isDisabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
   const setRefs = (node) => {
     ref.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -1529,25 +1565,25 @@ var ListboxItem = forwardRef(function ListboxItem2({ value, disabled = false, in
       id,
       role: "option",
       "aria-selected": isSelected,
-      "aria-disabled": disabled || void 0,
+      "aria-disabled": isDisabled || void 0,
       "data-active": isActive ? "" : void 0,
       "data-selected": isSelected ? "" : void 0,
-      "data-disabled": disabled ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
       onClick: (e) => {
         onClick?.(e);
-        if (e.defaultPrevented || disabled) return;
+        if (e.defaultPrevented || isDisabled || ctx.isDisabled) return;
         ctx.onItemSelect(value);
       },
       onPointerEnter: (e) => {
         onPointerEnter?.(e);
-        if (!disabled) ctx.setActiveId(id);
+        if (!isDisabled) ctx.setActiveId(id);
       },
       className: cn(listboxItemVariants({ state }), className),
       ...rest,
       children: [
         /* @__PURE__ */ jsx(LeadingIndicator, { indicator, isSelected }),
-        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children }),
-        /* @__PURE__ */ jsx(TrailingIndicator, { indicator, isSelected, multiple: ctx.multiple })
+        /* @__PURE__ */ jsx("span", { "data-listbox-item-content": true, className: "flex min-w-0 flex-1 items-center gap-2", children }),
+        /* @__PURE__ */ jsx(TrailingIndicator, { indicator, isSelected, isMultiple: ctx.isMultiple })
       ]
     }
   );
@@ -1573,22 +1609,15 @@ Listbox.Empty = ListboxEmpty;
 
 // src/forms/select/Select.variants.ts
 var selectTriggerVariants = tv({
-  base: "flex w-full items-center justify-between gap-2 rounded-md border bg-popover text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 data-[state=open]:border-border-strong",
+  extend: inputBaseVariants,
+  base: "items-center justify-between gap-2 data-[state=open]:border-border-strong",
   variants: {
     size: {
-      xs: "h-7 gap-1.5 px-2.5 text-[11px]",
-      sm: "h-8 px-2.5 text-sm",
-      md: "h-10 px-3 text-sm",
-      lg: "h-12 px-4 text-base"
-    },
-    state: {
-      default: "border-input hover:border-border-strong",
-      invalid: "border-destructive focus-visible:ring-destructive"
+      xs: "gap-1.5",
+      sm: "",
+      md: "",
+      lg: ""
     }
-  },
-  defaultVariants: {
-    size: "md",
-    state: "default"
   }
 });
 var SelectContext = createContext(null);
@@ -1598,41 +1627,54 @@ function useSelectContext() {
   return ctx;
 }
 function SelectImpl({
-  selected,
-  defaultSelected,
-  onChange,
+  value,
+  defaultValue,
+  onValueChange,
   keyEquals,
-  disabled = false,
+  isDisabled,
   isLoading = false,
-  clearable = false,
+  loadingLabel = "Loading options\u2026",
+  isClearable = false,
+  clearLabel = "Clear selection",
   name,
   serializeKey,
-  invalid,
+  getOptionLabel,
+  isInvalid,
   defaultOpen = false,
   open: openProp,
   onOpenChange,
   placement = "bottom",
   children
 }) {
+  const field = useFormControl();
+  const finalDisabled = isDisabled ?? field?.isDisabled ?? false;
+  const finalInvalid = isInvalid ?? field?.isInvalid ?? false;
   const [openState, setOpenState] = useControlled({
     controlled: openProp,
     default: defaultOpen,
     onChange: onOpenChange
   });
   const [keyState, setKeyState] = useControlled({
-    controlled: selected,
-    default: defaultSelected ?? null,
+    controlled: value,
+    default: defaultValue ?? null,
     /* Emits via `emitChange` below — needs both key + value, not just key. */
     onChange: void 0
   });
   const [items, setItems] = useState([]);
+  const labelCacheRef = useRef(/* @__PURE__ */ new Map());
   const [query, setQuery] = useState("");
+  const [activeDescendant, setActiveDescendant] = useState(null);
+  const generatedListboxId = useId("select-listbox");
+  const listboxRef = useRef(null);
+  const [selectedEntry, setSelectedEntry] = useState(null);
   const keyEqualsRef = useRef(keyEquals);
   keyEqualsRef.current = keyEquals;
   const serializeKeyRef = useRef(serializeKey);
   serializeKeyRef.current = serializeKey;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  const getOptionLabelRef = useRef(getOptionLabel);
+  getOptionLabelRef.current = getOptionLabel;
+  const onValueChangeRef = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
   const keyEqualsFn = useCallback((a, b) => {
     const fn = keyEqualsRef.current;
     return (fn ?? Equality.strictEquals)(a, b);
@@ -1641,13 +1683,18 @@ function SelectImpl({
     const fn = serializeKeyRef.current;
     return (fn ?? ((x) => String(x)))(k);
   }, []);
+  const getOptionLabelFn = useCallback((k) => {
+    const fn = getOptionLabelRef.current;
+    return fn ? fn(k) : null;
+  }, []);
   const registerItem = useCallback(
     (entry) => {
+      labelCacheRef.current.set(serializeKeyFn(entry.itemKey), entry.label);
       setItems((prev) => {
         const idx = prev.findIndex((p) => Object.is(p.itemKey, entry.itemKey));
         if (idx >= 0) {
           const existing = prev[idx];
-          if (existing && existing.label === entry.label && existing.text === entry.text && Object.is(existing.value, entry.value)) {
+          if (existing && existing.label === entry.label && existing.text === entry.text && existing.isDisabled === entry.isDisabled && Object.is(existing.value, entry.value)) {
             return prev;
           }
           const next = prev.slice();
@@ -1657,7 +1704,7 @@ function SelectImpl({
         return [...prev, entry];
       });
     },
-    []
+    [serializeKeyFn]
   );
   const unregisterItem = useCallback((k) => {
     setItems((prev) => {
@@ -1668,15 +1715,20 @@ function SelectImpl({
       return next;
     });
   }, []);
+  const getCachedLabel = useCallback(
+    (k) => labelCacheRef.current.get(serializeKeyFn(k)),
+    [serializeKeyFn]
+  );
   const emitChange = useCallback(
     (next) => {
-      onChangeRef.current?.(next);
+      onValueChangeRef.current?.(next);
     },
     []
   );
   const onSelect = useCallback(
     (entry) => {
       setKeyState(entry.itemKey);
+      setSelectedEntry({ itemKey: entry.itemKey, label: entry.label });
       setOpenState(false);
       setQuery("");
       emitChange({
@@ -1689,61 +1741,89 @@ function SelectImpl({
   );
   const onClear = useCallback(() => {
     setKeyState(null);
+    setSelectedEntry(null);
     emitChange(null);
   }, [setKeyState, emitChange]);
   const hasSelection = keyState !== null && keyState !== void 0;
+  const selectedLabel = selectedEntry && hasSelection && keyEqualsFn(selectedEntry.itemKey, keyState) ? selectedEntry.label : null;
   const ctx = useMemo(
     () => ({
       open: openState,
       setOpen: setOpenState,
       selectedKey: keyState,
       hasSelection,
+      selectedLabel,
       onSelect,
       onClear,
       keyEquals: keyEqualsFn,
       items,
       registerItem,
       unregisterItem,
+      getCachedLabel,
       query,
       setQuery,
-      disabled,
+      isDisabled: finalDisabled,
       isLoading,
-      clearable,
+      loadingLabel,
+      isClearable,
+      clearLabel,
       serializeKey: serializeKeyFn,
+      getOptionLabel: getOptionLabelFn,
       name,
-      invalid
+      isInvalid: finalInvalid,
+      listboxId: generatedListboxId,
+      activeDescendant,
+      setActiveDescendant,
+      listboxRef,
+      fieldId: field?.id,
+      labelId: field?.labelId,
+      describedBy: field ? `${field.helperId} ${field.errorId}` : void 0
     }),
     [
       openState,
       setOpenState,
       keyState,
       hasSelection,
+      selectedLabel,
       onSelect,
       onClear,
       keyEqualsFn,
       items,
       registerItem,
       unregisterItem,
+      getCachedLabel,
       query,
-      disabled,
+      finalDisabled,
       isLoading,
-      clearable,
+      loadingLabel,
+      isClearable,
+      clearLabel,
       serializeKeyFn,
+      getOptionLabelFn,
       name,
-      invalid
+      finalInvalid,
+      generatedListboxId,
+      activeDescendant,
+      field
     ]
   );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     Popover,
     {
       open: openState,
       onOpenChange: (o) => {
         setOpenState(o);
-        if (!o) setQuery("");
+        if (!o) {
+          setQuery("");
+          setActiveDescendant(null);
+        }
       },
       placement,
       offset: 4,
-      children
+      children: [
+        children,
+        name && hasSelection && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: serializeKeyFn(keyState) })
+      ]
     }
   ) });
 }
@@ -1766,81 +1846,115 @@ var TRIGGER_DIVIDER_CLASSES = {
   md: "h-4",
   lg: "h-5"
 };
+var TRIGGER_CLEAR_OFFSET_CLASSES = {
+  xs: "right-[35px]",
+  sm: "right-[37px]",
+  md: "right-[41px]",
+  lg: "right-[49px]"
+};
+function triggerDataState(open, isLoading, isDisabled, isInvalid) {
+  if (open) return "open";
+  if (isLoading) return "loading";
+  if (isDisabled) return "disabled";
+  if (isInvalid) return "invalid";
+  return void 0;
+}
 var SelectTrigger = forwardRef(
-  function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
+  function SelectTrigger2({ size, state, className, children, "aria-label": ariaLabel, onKeyDown, ...rest }, ref) {
     const ctx = useSelectContext();
-    const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    const showClear = ctx.clearable && ctx.hasSelection && !ctx.isLoading && !ctx.disabled;
+    const triggerState = state ?? (ctx.isInvalid ? "invalid" : "default");
+    const triggerTypeahead = useTypeahead({
+      items: () => ctx.items,
+      getLabel: (entry) => entry.text,
+      isDisabled: (entry) => entry.isDisabled,
+      getActiveIndex: () => ctx.hasSelection ? ctx.items.findIndex((i) => ctx.keyEquals(i.itemKey, ctx.selectedKey)) : -1,
+      onMatch: (entry) => ctx.onSelect(entry),
+      enabled: !ctx.open && !ctx.isDisabled && !ctx.isLoading
+    });
+    const handleTriggerKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (!ctx.open && triggerTypeahead.onKeyDown(event)) {
+        event.preventDefault();
+      }
+    };
+    const showClear = ctx.isClearable && ctx.hasSelection && !ctx.isLoading && !ctx.isDisabled;
     const sizeKey = size ?? "md";
     const iconClass = TRIGGER_ICON_CLASSES[sizeKey];
     const clearBoxClass = TRIGGER_CLEAR_BOX_CLASSES[sizeKey];
     const dividerClass = TRIGGER_DIVIDER_CLASSES[sizeKey];
-    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        type: "button",
-        disabled: ctx.disabled || ctx.isLoading,
-        "aria-busy": ctx.isLoading || void 0,
-        className: cn(selectTriggerVariants({ size, state: triggerState }), className),
-        ...rest,
-        children: [
-          children ?? /* @__PURE__ */ jsx(SelectValue, {}),
-          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-            showClear && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
+    const clearOffsetClass = TRIGGER_CLEAR_OFFSET_CLASSES[sizeKey];
+    const labelledBy = !ariaLabel ? ctx.labelId : void 0;
+    return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-full", children: [
+      /* @__PURE__ */ jsx(Announce, { children: ctx.isLoading ? ctx.loadingLabel : "" }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          id: ctx.fieldId,
+          disabled: ctx.isDisabled || ctx.isLoading,
+          "aria-busy": ctx.isLoading || void 0,
+          "aria-haspopup": "listbox",
+          "aria-controls": ctx.listboxId,
+          "aria-activedescendant": ctx.open ? ctx.activeDescendant ?? void 0 : void 0,
+          "aria-invalid": triggerState === "invalid" || void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": labelledBy,
+          "aria-describedby": ctx.describedBy,
+          "data-state": triggerDataState(ctx.open, ctx.isLoading, ctx.isDisabled, ctx.isInvalid),
+          className: cn(selectTriggerVariants({ size, state: triggerState }), className),
+          onKeyDown: handleTriggerKeyDown,
+          ...rest,
+          children: [
+            children ?? /* @__PURE__ */ jsx(SelectValue, {}),
+            /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+              showClear && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: clearBoxClass }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("w-px bg-foreground/20", dividerClass) })
+              ] }),
+              ctx.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: cn(iconClass, "animate-spin text-subtle-foreground") }) : /* @__PURE__ */ jsx(
+                ChevronDown,
                 {
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Clear selection",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    ctx.onClear();
-                  },
-                  onPointerDown: (e) => e.stopPropagation(),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      ctx.onClear();
-                    }
-                  },
                   className: cn(
-                    "grid place-items-center rounded-full text-subtle-foreground transition-colors hover:bg-muted hover:text-foreground",
-                    clearBoxClass
-                  ),
-                  children: /* @__PURE__ */ jsx(X, { className: iconClass })
+                    iconClass,
+                    "text-muted-foreground transition-transform",
+                    ctx.open && "rotate-180"
+                  )
                 }
-              ),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("w-px bg-foreground/20", dividerClass) })
-            ] }),
-            ctx.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: cn(iconClass, "animate-spin text-subtle-foreground") }) : /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                className: cn(
-                  iconClass,
-                  "text-muted-foreground transition-transform",
-                  ctx.open && "rotate-180"
-                )
-              }
-            )
-          ] })
-        ]
-      }
-    ) });
+              )
+            ] })
+          ]
+        }
+      ) }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": ctx.clearLabel,
+          onClick: () => ctx.onClear(),
+          className: cn(
+            "absolute top-1/2 grid min-h-6 min-w-6 -translate-y-1/2 place-items-center rounded-full text-subtle-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            clearBoxClass,
+            clearOffsetClass
+          ),
+          children: /* @__PURE__ */ jsx(X, { className: iconClass })
+        }
+      )
+    ] });
   }
 );
 function SelectValue({ placeholder, children }) {
   const ctx = useSelectContext();
   if (children) return /* @__PURE__ */ jsx("span", { className: "truncate", children });
   const match = ctx.hasSelection ? ctx.items.find((i) => ctx.keyEquals(i.itemKey, ctx.selectedKey)) : void 0;
-  const label = match?.label ?? (ctx.hasSelection ? ctx.serializeKey(ctx.selectedKey) : null);
+  const label = match?.label ?? ctx.selectedLabel ?? (ctx.hasSelection ? ctx.getCachedLabel(ctx.selectedKey) : null) ?? (ctx.hasSelection ? ctx.getOptionLabel?.(ctx.selectedKey) : null) ?? (ctx.hasSelection ? ctx.serializeKey(ctx.selectedKey) : null);
   return /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
+var FORWARDED_NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp", "Enter"]);
 function SelectContent({
   className,
-  searchable = false,
+  isSearchable = false,
   searchPlaceholder = "Search\u2026",
   noResultsLabel = "No results",
   matchWidth = false,
@@ -1855,6 +1969,21 @@ function SelectContent({
   const hasItems = ctx.items.length > 0;
   const visibleCount = ctx.query ? ctx.items.filter((i) => i.text.toLowerCase().includes(ctx.query.toLowerCase())).length : ctx.items.length;
   const showEmpty = hasItems && visibleCount === 0;
+  const handleSearchKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        return;
+      }
+      if (!FORWARDED_NAV_KEYS.has(event.key)) return;
+      const node = ctx.listboxRef.current;
+      if (!node) return;
+      event.preventDefault();
+      node.dispatchEvent(
+        new KeyboardEvent("keydown", { key: event.key, bubbles: true, cancelable: true })
+      );
+    },
+    [ctx.listboxRef]
+  );
   return /* @__PURE__ */ jsxs(
     PopoverContent,
     {
@@ -1865,19 +1994,28 @@ function SelectContent({
       elevation,
       className: cn(
         "overflow-hidden",
-        matchWidth ? "w-(--anchor-width) [&_[role=option]>span.flex-1>:first-child]:truncate" : "w-auto min-w-(--anchor-width)",
+        /* Truncate the option's first content child (the label) so trailing meta stays visible.
+           Targets Listbox.Item's stable `data-listbox-item-content` wrapper rather than a deep
+           `[role=option]>span.flex-1>:first-child` chain that breaks if the markup shifts. */
+        matchWidth ? "w-(--anchor-width) [&_[data-listbox-item-content]>:first-child]:truncate" : "w-auto min-w-(--anchor-width)",
         className
       ),
       children: [
-        searchable && /* @__PURE__ */ jsx("div", { className: "border-b border-border p-1", children: /* @__PURE__ */ jsx(
+        isSearchable && /* @__PURE__ */ jsx("div", { className: "border-b border-border p-1", children: /* @__PURE__ */ jsx(
           SearchInput,
           {
             size: "sm",
             autoFocus: true,
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": ctx.listboxId,
+            "aria-activedescendant": ctx.activeDescendant ?? void 0,
+            "aria-autocomplete": "list",
             value: ctx.query,
             onChange: (e) => ctx.setQuery(e.target.value),
+            onKeyDown: handleSearchKeyDown,
             placeholder: searchPlaceholder,
-            clearable: true,
+            isClearable: true,
             onClear: () => ctx.setQuery(""),
             className: "rounded-sm"
           }
@@ -1885,6 +2023,10 @@ function SelectContent({
         /* @__PURE__ */ jsxs(
           Listbox,
           {
+            ref: ctx.listboxRef,
+            id: ctx.listboxId,
+            tabIndex: isSearchable ? -1 : 0,
+            onActiveChange: ctx.setActiveDescendant,
             value: ctx.selectedKey ?? void 0,
             onValueChange: (k) => {
               if (k === null || k === void 0) return;
@@ -1895,12 +2037,22 @@ function SelectContent({
             variant: "flat",
             radius: "none",
             children: [
+              ctx.isLoading && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "status",
+                  className: "flex items-center gap-2 px-2 py-2 text-sm text-subtle-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+                    /* @__PURE__ */ jsx("span", { children: ctx.loadingLabel })
+                  ]
+                }
+              ),
               children,
-              showEmpty && /* @__PURE__ */ jsx(ListboxEmpty, { children: noResultsLabel })
+              !ctx.isLoading && showEmpty && /* @__PURE__ */ jsx(ListboxEmpty, { children: noResultsLabel })
             ]
           }
-        ),
-        ctx.name && ctx.hasSelection && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.serializeKey(ctx.selectedKey) })
+        )
       ]
     }
   );
@@ -1915,20 +2067,22 @@ function extractText(node) {
   }
   return "";
 }
-var SelectItem = forwardRef(function SelectItem2({ itemKey, value, label, children, text, disabled, className }, ref) {
+var SelectItem = forwardRef(function SelectItem2({ itemKey, value, label, children, text, isDisabled, className }, ref) {
   const ctx = useSelectContext();
-  const { registerItem, query } = ctx;
+  const { registerItem, unregisterItem, query } = ctx;
   const resolvedValue = value === void 0 ? itemKey : value;
-  const itemText = useMemo(
-    () => text ?? extractText(label) ?? extractText(children),
-    [text, label, children]
-  );
+  const itemText = useMemo(() => {
+    if (text !== void 0) return text;
+    const fromLabel = extractText(label);
+    return fromLabel !== "" ? fromLabel : extractText(children);
+  }, [text, label, children]);
   useEffect(() => {
-    registerItem({ itemKey, value: resolvedValue, label, text: itemText });
-  }, [registerItem, itemKey, resolvedValue, label, itemText]);
+    registerItem({ itemKey, value: resolvedValue, label, text: itemText, isDisabled: isDisabled ?? false });
+    return () => unregisterItem(itemKey);
+  }, [registerItem, unregisterItem, itemKey, resolvedValue, label, itemText, isDisabled]);
   const matchesQuery = !query || itemText.toLowerCase().includes(query.toLowerCase());
   if (!matchesQuery) return null;
-  return /* @__PURE__ */ jsx(ListboxItem, { ref, value: itemKey, disabled, className, children: children ?? label });
+  return /* @__PURE__ */ jsx(ListboxItem, { ref, value: itemKey, isDisabled, className, children: children ?? label });
 });
 Select.Trigger = SelectTrigger;
 Select.Value = SelectValue;
@@ -1947,9 +2101,9 @@ function MultiSelect({
   value,
   defaultValue,
   onValueChange,
-  disabled = false,
+  isDisabled = false,
   name,
-  invalid,
+  isInvalid,
   defaultOpen = false,
   open: openProp,
   onOpenChange,
@@ -1987,9 +2141,9 @@ function MultiSelect({
       labels,
       registerLabel,
       unregisterLabel,
-      disabled,
+      isDisabled,
       name,
-      invalid
+      isInvalid
     }),
     [
       openState,
@@ -1999,32 +2153,35 @@ function MultiSelect({
       labels,
       registerLabel,
       unregisterLabel,
-      disabled,
+      isDisabled,
       name,
-      invalid
+      isInvalid
     ]
   );
-  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     Popover,
     {
       open: openState,
       onOpenChange: setOpenState,
       placement,
       offset: 6,
-      children
+      children: [
+        children,
+        name && valuesState.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v))
+      ]
     }
   ) });
 }
 var MultiSelectTrigger = forwardRef(
   function MultiSelectTrigger2({ size, state, className, onKeyDown, children, ...rest }, ref) {
     const ctx = useMultiSelectContext();
-    const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
+    const triggerState = state ?? (ctx.isInvalid ? "invalid" : "default");
     return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         type: "button",
-        disabled: ctx.disabled,
+        disabled: ctx.isDisabled,
         onKeyDown: (e) => {
           onKeyDown?.(e);
           if (e.defaultPrevented) return;
@@ -2065,7 +2222,7 @@ function MultiSelectTags({ placeholder }) {
       className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs",
       children: [
         ctx.labels[v] ?? v,
-        !ctx.disabled && /* @__PURE__ */ jsx(
+        !ctx.isDisabled && /* @__PURE__ */ jsx(
           "span",
           {
             role: "button",
@@ -2095,7 +2252,7 @@ function MultiSelectContent({
   children
 }) {
   const ctx = useMultiSelectContext();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     PopoverContent,
     {
       variant,
@@ -2104,31 +2261,27 @@ function MultiSelectContent({
       padding: padding ?? "none",
       elevation,
       className: cn("w-auto min-w-[var(--anchor-width)] overflow-hidden", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          Listbox,
-          {
-            multiple: true,
-            value: ctx.values,
-            onValueChange: (v) => ctx.setValues(v),
-            variant: "flat",
-            radius: "none",
-            children
-          }
-        ),
-        ctx.name && ctx.values.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: v }, v))
-      ]
+      children: /* @__PURE__ */ jsx(
+        Listbox,
+        {
+          isMultiple: true,
+          value: ctx.values,
+          onValueChange: (v) => ctx.setValues(v),
+          variant: "flat",
+          radius: "none",
+          children
+        }
+      )
     }
   );
 }
 var MultiSelectItem = forwardRef(
   function MultiSelectItem2(props, ref) {
     const ctx = useMultiSelectContext();
-    const { registerLabel, unregisterLabel } = ctx;
+    const { registerLabel } = ctx;
     useEffect(() => {
       registerLabel(props.value, props.children);
-      return () => unregisterLabel(props.value);
-    }, [registerLabel, unregisterLabel, props.value, props.children]);
+    }, [registerLabel, props.value, props.children]);
     return /* @__PURE__ */ jsx(ListboxItem, { ref, ...props });
   }
 );
@@ -2152,8 +2305,8 @@ function Combobox({
   inputValue,
   defaultInputValue,
   onInputChange,
-  disabled = false,
-  invalid,
+  isDisabled = false,
+  isInvalid,
   name,
   defaultOpen = false,
   open: openProp,
@@ -2178,6 +2331,7 @@ function Combobox({
   });
   const itemsRef = useRef([]);
   const inputRef = useRef(null);
+  const contentRef = useRef(null);
   const [activeId, setActiveId] = useState(null);
   const listboxId = useId$1();
   const registerItem = useCallback((entry) => {
@@ -2213,9 +2367,10 @@ function Combobox({
       unregisterItem,
       itemsRef,
       inputRef,
+      contentRef,
       listboxId,
-      disabled,
-      invalid,
+      isDisabled,
+      isInvalid,
       selectItem
     }),
     [
@@ -2229,8 +2384,8 @@ function Combobox({
       registerItem,
       unregisterItem,
       listboxId,
-      disabled,
-      invalid,
+      isDisabled,
+      isInvalid,
       selectItem
     ]
   );
@@ -2240,12 +2395,19 @@ function Combobox({
   ] });
 }
 var ComboboxInput = forwardRef(
-  function ComboboxInput2({ className, size, state, onKeyDown, onFocus, ...rest }, forwardedRef) {
+  function ComboboxInput2({ className, size, state, onKeyDown, onFocus, onBlur, ...rest }, forwardedRef) {
     const ctx = useComboboxContext();
-    const inputState = state ?? (ctx.invalid ? "invalid" : "default");
+    const inputState = state ?? (ctx.isInvalid ? "invalid" : "default");
+    const setActiveAndScroll = useCallback(
+      (id) => {
+        ctx.setActiveId(id);
+        document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+      },
+      [ctx]
+    );
     const moveActive = useCallback(
       (direction) => {
-        const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+        const list = ctx.itemsRef.current.filter((i) => !i.isDisabled);
         if (list.length === 0) return;
         const idx = list.findIndex((i) => i.id === ctx.activeId);
         let nextIdx = idx + direction;
@@ -2253,13 +2415,13 @@ var ComboboxInput = forwardRef(
         if (nextIdx < 0) nextIdx = list.length - 1;
         if (nextIdx >= list.length) nextIdx = 0;
         const next = list[nextIdx];
-        if (next) ctx.setActiveId(next.id);
+        if (next) setActiveAndScroll(next.id);
       },
-      [ctx]
+      [ctx, setActiveAndScroll]
     );
     const handleKeyDown = (e) => {
       onKeyDown?.(e);
-      if (e.defaultPrevented || ctx.disabled) return;
+      if (e.defaultPrevented || ctx.isDisabled) return;
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
@@ -2274,22 +2436,25 @@ var ComboboxInput = forwardRef(
         case "Home":
           if (ctx.open) {
             e.preventDefault();
-            const first = ctx.itemsRef.current.find((i) => !i.disabled);
-            if (first) ctx.setActiveId(first.id);
+            const first = ctx.itemsRef.current.find((i) => !i.isDisabled);
+            if (first) setActiveAndScroll(first.id);
           }
           break;
         case "End":
           if (ctx.open) {
             e.preventDefault();
-            const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+            const list = ctx.itemsRef.current.filter((i) => !i.isDisabled);
             const last = list[list.length - 1];
-            if (last) ctx.setActiveId(last.id);
+            if (last) setActiveAndScroll(last.id);
           }
           break;
+        case "Tab":
+          if (ctx.open) ctx.setOpen(false);
+          break;
         case "Enter": {
           if (!ctx.open || !ctx.activeId) return;
           const entry = ctx.itemsRef.current.find((i) => i.id === ctx.activeId);
-          if (!entry || entry.disabled) return;
+          if (!entry || entry.isDisabled) return;
           e.preventDefault();
           ctx.selectItem(entry);
           break;
@@ -2316,8 +2481,8 @@ var ComboboxInput = forwardRef(
         "aria-controls": ctx.listboxId,
         "aria-activedescendant": ctx.activeId ?? void 0,
         "aria-autocomplete": "list",
-        "aria-disabled": ctx.disabled || void 0,
-        disabled: ctx.disabled,
+        "aria-disabled": ctx.isDisabled || void 0,
+        disabled: ctx.isDisabled,
         value: ctx.inputValue,
         onChange: (e) => {
           ctx.setInputValue(e.target.value);
@@ -2328,6 +2493,14 @@ var ComboboxInput = forwardRef(
           onFocus?.(e);
           if (!ctx.open) ctx.setOpen(true);
         },
+        onBlur: (e) => {
+          onBlur?.(e);
+          const next = e.relatedTarget;
+          if (!next || !ctx.open) return;
+          if (ctx.inputRef.current?.contains(next)) return;
+          if (ctx.contentRef.current?.contains(next)) return;
+          ctx.setOpen(false);
+        },
         onKeyDown: handleKeyDown,
         className: cn(inputBaseVariants({ size, state: inputState }), className),
         ...rest
@@ -2347,6 +2520,13 @@ function ComboboxContent({
   children
 }) {
   const ctx = useComboboxContext();
+  useEffect(() => {
+    if (!ctx.open) return;
+    const list = ctx.itemsRef.current.filter((i) => !i.isDisabled);
+    if (ctx.activeId && !list.some((i) => i.id === ctx.activeId)) {
+      ctx.setActiveId(list[0]?.id ?? null);
+    }
+  });
   if (!ctx.open) return null;
   const resolvedPadding = padding ?? "xs";
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
@@ -2367,6 +2547,7 @@ function ComboboxContent({
           children: /* @__PURE__ */ jsx(
             "div",
             {
+              ref: ctx.contentRef,
               id: ctx.listboxId,
               role: "listbox",
               className: cn(
@@ -2389,22 +2570,22 @@ function ComboboxContent({
     }
   ) });
 }
-var ComboboxItem = forwardRef(function ComboboxItem2({ value, disabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
+var ComboboxItem = forwardRef(function ComboboxItem2({ value, isDisabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
   const ctx = useComboboxContext();
   const id = useId$1();
   useEffect(() => {
-    ctx.registerItem({ id, value, disabled, label: children });
+    ctx.registerItem({ id, value, isDisabled, label: children });
     return () => ctx.unregisterItem(id);
-  }, [ctx, id, value, disabled, children]);
+  }, [ctx, id, value, isDisabled, children]);
   useEffect(() => {
     if (!ctx.activeId) {
-      const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+      const list = ctx.itemsRef.current.filter((i) => !i.isDisabled);
       if (list[0]) ctx.setActiveId(list[0].id);
     }
   }, [ctx]);
   const isSelected = ctx.value === value;
   const isActive = ctx.activeId === id;
-  const state = disabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
+  const state = isDisabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2412,17 +2593,17 @@ var ComboboxItem = forwardRef(function ComboboxItem2({ value, disabled = false,
       id,
       role: "option",
       "aria-selected": isSelected,
-      "aria-disabled": disabled || void 0,
+      "aria-disabled": isDisabled || void 0,
       "data-active": isActive ? "" : void 0,
       "data-selected": isSelected ? "" : void 0,
       onClick: (e) => {
         onClick?.(e);
-        if (e.defaultPrevented || disabled) return;
-        ctx.selectItem({ id, value, disabled, label: children });
+        if (e.defaultPrevented || isDisabled) return;
+        ctx.selectItem({ id, value, isDisabled, label: children });
       },
       onPointerEnter: (e) => {
         onPointerEnter?.(e);
-        if (!disabled) ctx.setActiveId(id);
+        if (!isDisabled) ctx.setActiveId(id);
       },
       className: cn(listboxItemVariants({ state }), className),
       ...rest,
@@ -2452,6 +2633,7 @@ Combobox.Item = ComboboxItem;
 Combobox.Group = ComboboxGroup;
 Combobox.Separator = ComboboxSeparator;
 Combobox.Empty = ComboboxEmpty;
+var MAX_DISABLED_SKIP = 400;
 function MonthGrid({
   viewMonth,
   onViewMonthChange,
@@ -2463,56 +2645,84 @@ function MonthGrid({
   "aria-label": ariaLabel = "Calendar",
   className
 }) {
+  const rootRef = useRef(null);
   const gridRef = useRef(null);
+  const interactedRef = useRef(false);
   useEffect(() => {
+    if (!interactedRef.current) return;
     const cell = gridRef.current?.querySelector(
       `[data-date="${focusedDate.toDateString()}"]`
     );
     cell?.focus();
   }, [focusedDate]);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      if (!rootRef.current?.contains(document.activeElement)) return;
+      gridRef.current?.querySelector('button[tabindex="0"]')?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, []);
   const moveFocus = useCallback(
-    (next) => {
-      if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
-        onViewMonthChange(startOfMonth(next));
+    (next, dir) => {
+      let target = next;
+      if (isDayDisabled) {
+        let steps = 0;
+        while (isDayDisabled(target) && steps < MAX_DISABLED_SKIP) {
+          target = addDays(target, dir);
+          steps += 1;
+        }
+        if (isDayDisabled(target)) {
+          target = next;
+          steps = 0;
+          while (isDayDisabled(target) && steps < MAX_DISABLED_SKIP) {
+            target = addDays(target, -dir);
+            steps += 1;
+          }
+        }
+        if (isDayDisabled(target)) return;
+      }
+      interactedRef.current = true;
+      if (target.getMonth() !== viewMonth.getMonth() || target.getFullYear() !== viewMonth.getFullYear()) {
+        onViewMonthChange(startOfMonth(target));
       }
-      onFocusedDateChange(next);
+      onFocusedDateChange(target);
     },
-    [viewMonth, onViewMonthChange, onFocusedDateChange]
+    [isDayDisabled, viewMonth, onViewMonthChange, onFocusedDateChange]
   );
   const onCellKeyDown = useCallback(
     (e, date, outOfMonth) => {
       switch (e.key) {
         case "ArrowRight":
           e.preventDefault();
-          moveFocus(addDays(date, 1));
+          moveFocus(addDays(date, 1), 1);
           break;
         case "ArrowLeft":
           e.preventDefault();
-          moveFocus(addDays(date, -1));
+          moveFocus(addDays(date, -1), -1);
           break;
         case "ArrowDown":
           e.preventDefault();
-          moveFocus(addDays(date, 7));
+          moveFocus(addDays(date, 7), 1);
           break;
         case "ArrowUp":
           e.preventDefault();
-          moveFocus(addDays(date, -7));
+          moveFocus(addDays(date, -7), -1);
           break;
         case "Home":
           e.preventDefault();
-          moveFocus(addDays(date, -date.getDay()));
+          moveFocus(addDays(date, -date.getDay()), 1);
           break;
         case "End":
           e.preventDefault();
-          moveFocus(addDays(date, 6 - date.getDay()));
+          moveFocus(addDays(date, 6 - date.getDay()), -1);
           break;
         case "PageDown":
           e.preventDefault();
-          moveFocus(addMonths(date, e.shiftKey ? 12 : 1));
+          moveFocus(addMonths(date, e.shiftKey ? 12 : 1), 1);
           break;
         case "PageUp":
           e.preventDefault();
-          moveFocus(addMonths(date, e.shiftKey ? -12 : -1));
+          moveFocus(addMonths(date, e.shiftKey ? -12 : -1), -1);
           break;
         case "Enter":
         case " ":
@@ -2523,12 +2733,18 @@ function MonthGrid({
     },
     [moveFocus, onDayActivate, isDayDisabled]
   );
+  const dayDisabled = (date) => isDayDisabled?.(date) ?? false;
   const cells = buildMonthGrid(viewMonth.getFullYear(), viewMonth.getMonth());
+  const weeks = Array.from({ length: 6 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
+  let tabStopDate = focusedDate;
+  if (dayDisabled(focusedDate)) {
+    const fallback = cells.find((c) => !c.outOfMonth && !dayDisabled(c.date)) ?? cells.find((c) => !dayDisabled(c.date));
+    if (fallback) tabStopDate = fallback.date;
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "application",
-      "aria-label": ariaLabel,
+      ref: rootRef,
       className: cn(
         "inline-flex flex-col gap-2 rounded-md border border-border bg-popover p-3 text-popover-foreground",
         className
@@ -2569,9 +2785,9 @@ function MonthGrid({
           },
           w
         )) }),
-        /* @__PURE__ */ jsx("div", { ref: gridRef, className: "grid grid-cols-7 gap-0 px-1", role: "grid", children: cells.map(({ date, outOfMonth }) => {
-          const disabled = isDayDisabled?.(date) ?? false;
-          const isFocusedCell = isSameDay(focusedDate, date);
+        /* @__PURE__ */ jsx("div", { ref: gridRef, role: "grid", "aria-label": ariaLabel, className: "px-1", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-0", children: week.map(({ date, outOfMonth }) => {
+          const disabled = dayDisabled(date);
+          const isTabStop = isSameDay(tabStopDate, date);
           const consumerProps = dayProps?.(date, { outOfMonth }) ?? {};
           const { className: cellClassName, ...consumerRest } = consumerProps;
           return /* @__PURE__ */ jsx(
@@ -2584,10 +2800,10 @@ function MonthGrid({
               "data-today": isToday(date) ? "" : void 0,
               "data-out-of-month": outOfMonth ? "" : void 0,
               "data-disabled": disabled ? "" : void 0,
-              tabIndex: isFocusedCell ? 0 : -1,
-              disabled,
+              tabIndex: isTabStop ? 0 : -1,
               onClick: () => {
                 if (disabled) return;
+                interactedRef.current = true;
                 onDayActivate?.(date, { outOfMonth });
                 onFocusedDateChange(date);
                 if (outOfMonth) onViewMonthChange(startOfMonth(date));
@@ -2606,7 +2822,7 @@ function MonthGrid({
             },
             date.toDateString()
           );
-        }) })
+        }) }, weekIndex)) })
       ]
     }
   );
@@ -2614,7 +2830,7 @@ function MonthGrid({
 var Calendar = forwardRef(function Calendar2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   defaultMonth,
   min,
   max,
@@ -2626,7 +2842,7 @@ var Calendar = forwardRef(function Calendar2({
   const [selected, setSelected] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [viewMonth, setViewMonth] = useState(
     () => startOfMonth(defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
@@ -2657,12 +2873,12 @@ var Calendar = forwardRef(function Calendar2({
     }
   ) });
 });
-var DateField = forwardRef(function DateField2({ value, defaultValue, onChange, min, max, size, state, className, id, disabled, required, ...rest }, ref) {
+var DateField = forwardRef(function DateField2({ value, defaultValue, onValueChange, min, max, size, state, className, id, disabled, required, ...rest }, ref) {
   const ctx = useFormControl();
   const [current, setCurrent] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   return /* @__PURE__ */ jsx(
     "input",
@@ -2689,12 +2905,12 @@ function timeToString(t) {
   date.setHours(t.hours, t.minutes, 0, 0);
   return formatISOTime(date);
 }
-var TimeField = forwardRef(function TimeField2({ value, defaultValue, onChange, size, state, className, id, disabled, required, ...rest }, ref) {
+var TimeField = forwardRef(function TimeField2({ value, defaultValue, onValueChange, size, state, className, id, disabled, required, ...rest }, ref) {
   const ctx = useFormControl();
   const [current, setCurrent] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   return /* @__PURE__ */ jsx(
     "input",
@@ -2717,7 +2933,7 @@ var RangeCalendar = forwardRef(
   function RangeCalendar2({
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     defaultMonth,
     min,
     max,
@@ -2729,7 +2945,7 @@ var RangeCalendar = forwardRef(
     const [range, setRange] = useControlled({
       controlled: value,
       default: defaultValue ?? null,
-      onChange
+      onChange: onValueChange
     });
     const [viewMonth, setViewMonth] = useState(
       () => startOfMonth(defaultMonth ?? range?.start ?? /* @__PURE__ */ new Date())
@@ -2793,13 +3009,13 @@ var defaultFormat = (d) => d.toLocaleDateString(void 0, { year: "numeric", month
 var DatePicker = forwardRef(function DatePicker2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   placeholder = "Pick a date",
   format = defaultFormat,
   min,
   max,
   isDisabled: dayDisabled,
-  invalid,
+  isInvalid,
   name,
   size,
   state,
@@ -2810,13 +3026,13 @@ var DatePicker = forwardRef(function DatePicker2({
   const [date, setDate] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [open, setOpen] = useControlled({
     controlled: void 0,
     default: false
   });
-  const triggerState = state ?? (invalid ? "invalid" : "default");
+  const triggerState = state ?? (isInvalid ? "invalid" : "default");
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
@@ -2832,11 +3048,11 @@ var DatePicker = forwardRef(function DatePicker2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PopoverContent, { isBare: true, children: /* @__PURE__ */ jsx(
       Calendar,
       {
         value: date,
-        onChange: (d) => {
+        onValueChange: (d) => {
           setDate(d);
           setOpen(false);
         },
@@ -2854,11 +3070,11 @@ var HOURS = Array.from({ length: 24 }, (_, i) => i);
 var TimePicker = forwardRef(function TimePicker2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   minuteStep = 5,
   placeholder = "Pick a time",
   format = defaultFormat2,
-  invalid,
+  isInvalid,
   name,
   size,
   state,
@@ -2869,7 +3085,7 @@ var TimePicker = forwardRef(function TimePicker2({
   const [time, setTime] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [open, setOpen] = useControlled({
     controlled: void 0,
@@ -2889,7 +3105,7 @@ var TimePicker = forwardRef(function TimePicker2({
       minutesRef.current?.querySelector("[data-selected]")?.scrollIntoView({ block: "center" });
     });
   }, [open]);
-  const triggerState = state ?? (invalid ? "invalid" : "default");
+  const triggerState = state ?? (isInvalid ? "invalid" : "default");
   const update = (next) => {
     const merged = {
       hours: next.hours ?? time?.hours ?? 0,
@@ -2912,7 +3128,7 @@ var TimePicker = forwardRef(function TimePicker2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md", children: [
+    /* @__PURE__ */ jsx(PopoverContent, { isBare: true, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -2986,13 +3202,13 @@ var DateRangePicker = forwardRef(
   function DateRangePicker2({
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     placeholder = "Pick a range",
     format = defaultFormat3,
     min,
     max,
     isDisabled: dayDisabled,
-    invalid,
+    isInvalid,
     name,
     size,
     state,
@@ -3003,13 +3219,13 @@ var DateRangePicker = forwardRef(
     const [range, setRange] = useControlled({
       controlled: value,
       default: defaultValue ?? null,
-      onChange
+      onChange: onValueChange
     });
     const [open, setOpen] = useControlled({
       controlled: void 0,
       default: false
     });
-    const triggerState = state ?? (invalid ? "invalid" : "default");
+    const triggerState = state ?? (isInvalid ? "invalid" : "default");
     const wasComplete = useRef(false);
     useEffect(() => {
       const complete = !!(range?.start && range?.end);
@@ -3034,11 +3250,11 @@ var DateRangePicker = forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(PopoverContent, { isBare: true, children: /* @__PURE__ */ jsx(
         RangeCalendar,
         {
           value: range,
-          onChange: setRange,
+          onValueChange: setRange,
           defaultMonth: range?.start ?? /* @__PURE__ */ new Date(),
           min,
           max,
@@ -3071,11 +3287,11 @@ var colorSwatchVariants = tv({
       true: "cursor-pointer transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 hover:shadow-sm",
       false: ""
     },
-    selected: {
+    isSelected: {
       true: "ring-2 ring-ring ring-offset-1",
       false: ""
     },
-    disabled: {
+    isDisabled: {
       true: "cursor-not-allowed opacity-50",
       false: ""
     }
@@ -3084,14 +3300,14 @@ var colorSwatchVariants = tv({
     size: "md",
     shape: "square",
     interactive: false,
-    selected: false,
-    disabled: false
+    isSelected: false,
+    isDisabled: false
   }
 });
-var ColorSwatch = forwardRef(function ColorSwatch2({ color = "#000000", size, shape, selected, disabled, className, onClick, style, ...rest }, ref) {
+var ColorSwatch = forwardRef(function ColorSwatch2({ color = "#000000", size, shape, isSelected, isDisabled, className, onClick, style, ...rest }, ref) {
   const interactive = !!onClick;
   const classes = cn(
-    colorSwatchVariants({ size, shape, interactive, selected, disabled }),
+    colorSwatchVariants({ size, shape, interactive, isSelected, isDisabled }),
     className
   );
   const styleWithColor = {
@@ -3105,7 +3321,7 @@ var ColorSwatch = forwardRef(function ColorSwatch2({ color = "#000000", size, sh
       {
         ref,
         type: "button",
-        disabled,
+        disabled: isDisabled,
         onClick,
         style: styleWithColor,
         className: classes,
@@ -3215,18 +3431,18 @@ function parseColorToHsv(input) {
 function hsvToHex(hsv, options) {
   return formatHex(hsvToRgb(hsv), options);
 }
-function commitHex(text, withAlpha) {
+function commitHex(text, hasAlpha) {
   const normalised = text.startsWith("#") ? text : `#${text}`;
   const rgb = parseHex(normalised);
   if (!rgb) return null;
-  return formatHex(rgb, { withAlpha });
+  return formatHex(rgb, { withAlpha: hasAlpha });
 }
 var ColorField = forwardRef(function ColorField2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   swatchShape = "square",
-  withAlpha = false,
+  hasAlpha = false,
   size,
   state,
   className,
@@ -3241,7 +3457,7 @@ var ColorField = forwardRef(function ColorField2({
   const [committed, setCommitted] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [draft, setDraft] = useState(committed ?? "");
   useEffect(() => {
@@ -3252,7 +3468,7 @@ var ColorField = forwardRef(function ColorField2({
       setCommitted(null);
       return;
     }
-    const next = commitHex(draft, withAlpha);
+    const next = commitHex(draft, hasAlpha);
     if (next) {
       setCommitted(next);
       setDraft(next);
@@ -3331,10 +3547,10 @@ var ColorSlider = forwardRef(function ColorSlider2({
   channel = "hue",
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   color,
   step,
-  disabled = false,
+  isDisabled = false,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -3344,7 +3560,7 @@ var ColorSlider = forwardRef(function ColorSlider2({
   const [val, setVal] = useControlled({
     controlled: value,
     default: defaultValue ?? 0,
-    onChange
+    onChange: onValueChange
   });
   const trackRef = useRef(null);
   const updateFromClientX = useCallback(
@@ -3354,30 +3570,30 @@ var ColorSlider = forwardRef(function ColorSlider2({
       const rect = track.getBoundingClientRect();
       const ratio2 = clamp01((clientX - rect.left) / rect.width);
       const next = ratio2 * max;
-      setVal(channel === "hue" ? clampHue(next) : clamp01(next));
+      setVal(channel === "hue" ? next : clamp01(next));
     },
     [channel, max, setVal]
   );
   const handlePointerDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       e.preventDefault();
       e.target.setPointerCapture?.(e.pointerId);
       updateFromClientX(e.clientX);
     },
-    [disabled, updateFromClientX]
+    [isDisabled, updateFromClientX]
   );
   const handlePointerMove = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       if (e.buttons !== 1) return;
       updateFromClientX(e.clientX);
     },
-    [disabled, updateFromClientX]
+    [isDisabled, updateFromClientX]
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       let next = val;
       switch (e.key) {
         case "ArrowRight":
@@ -3395,20 +3611,19 @@ var ColorSlider = forwardRef(function ColorSlider2({
           next = val - stepValue * 10;
           break;
         case "Home":
-          next = 0;
-          break;
         case "End":
-          next = max;
-          break;
+          e.preventDefault();
+          setVal(e.key === "Home" ? 0 : max);
+          return;
         default:
           return;
       }
       e.preventDefault();
       setVal(channel === "hue" ? clampHue(next) : clamp01(next));
     },
-    [channel, disabled, max, setVal, stepValue, val]
+    [channel, isDisabled, max, setVal, stepValue, val]
   );
-  const ratio = channel === "hue" ? clampHue(val) / 360 : clamp01(val);
+  const ratio = channel === "hue" ? val >= 360 ? 1 : clampHue(val) / 360 : clamp01(val);
   const gradient = buildGradient(channel, color);
   const trackStyle = {
     backgroundImage: gradient,
@@ -3434,21 +3649,21 @@ var ColorSlider = forwardRef(function ColorSlider2({
           {
             ref: composeRefs(trackRef),
             role: "slider",
-            tabIndex: disabled ? -1 : 0,
+            tabIndex: isDisabled ? -1 : 0,
             "aria-label": ariaLabel ?? `${channel} slider`,
             "aria-valuemin": 0,
             "aria-valuemax": max,
             "aria-valuenow": Math.round(val * 100) / 100,
-            "aria-disabled": disabled || void 0,
+            "aria-disabled": isDisabled || void 0,
             "aria-orientation": "horizontal",
-            "data-disabled": disabled ? "" : void 0,
+            "data-disabled": isDisabled ? "" : void 0,
             onPointerDown: handlePointerDown,
             onPointerMove: handlePointerMove,
             onKeyDown: handleKeyDown,
             style: trackStyle,
             className: cn(
               "relative h-3 w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              disabled && "pointer-events-none opacity-50"
+              isDisabled && "pointer-events-none opacity-50"
             ),
             children: /* @__PURE__ */ jsx(
               "div",
@@ -3470,9 +3685,9 @@ var ColorArea = forwardRef(function ColorArea2({
   defaultSaturation,
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   step = 0.01,
-  disabled = false,
+  isDisabled = false,
   className,
   "aria-label": ariaLabel = "Saturation and value",
   ...rest
@@ -3492,9 +3707,9 @@ var ColorArea = forwardRef(function ColorArea2({
       const cv = clamp01(nextV);
       setS(cs);
       setV(cv);
-      onChange?.({ saturation: cs, value: cv });
+      onValueChange?.({ saturation: cs, value: cv });
     },
-    [onChange, setS, setV]
+    [onValueChange, setS, setV]
   );
   const updateFromClient = useCallback(
     (clientX, clientY) => {
@@ -3509,23 +3724,23 @@ var ColorArea = forwardRef(function ColorArea2({
   );
   const handlePointerDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       e.preventDefault();
       e.target.setPointerCapture?.(e.pointerId);
       updateFromClient(e.clientX, e.clientY);
     },
-    [disabled, updateFromClient]
+    [isDisabled, updateFromClient]
   );
   const handlePointerMove = useCallback(
     (e) => {
-      if (disabled || e.buttons !== 1) return;
+      if (isDisabled || e.buttons !== 1) return;
       updateFromClient(e.clientX, e.clientY);
     },
-    [disabled, updateFromClient]
+    [isDisabled, updateFromClient]
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       const big = step * 10;
       let nextS = s;
       let nextV = v;
@@ -3562,7 +3777,7 @@ var ColorArea = forwardRef(function ColorArea2({
       e.preventDefault();
       emit(nextS, nextV);
     },
-    [disabled, emit, s, step, v]
+    [isDisabled, emit, s, step, v]
   );
   const baseColor = `hsl(${hue}, 100%, 50%)`;
   const trackStyle = {
@@ -3580,18 +3795,18 @@ var ColorArea = forwardRef(function ColorArea2({
     {
       ref: composeRefs(forwardedRef, trackRef),
       role: "slider",
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: isDisabled ? -1 : 0,
       "aria-label": ariaLabel,
       "aria-valuetext": `saturation ${(s * 100).toFixed(0)}%, value ${(v * 100).toFixed(0)}%`,
-      "aria-disabled": disabled || void 0,
-      "data-disabled": disabled ? "" : void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-disabled": isDisabled ? "" : void 0,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onKeyDown: handleKeyDown,
       style: trackStyle,
       className: cn(
         "relative aspect-square w-full select-none rounded-md border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        disabled && "pointer-events-none opacity-50",
+        isDisabled && "pointer-events-none opacity-50",
         className
       ),
       ...rest,
@@ -3617,11 +3832,11 @@ function angleFromCenter(clientX, clientY, rect) {
 var ColorWheel = forwardRef(function ColorWheel2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   size = 200,
   thickness = 30,
   step = 1,
-  disabled = false,
+  isDisabled = false,
   className,
   "aria-label": ariaLabel = "Hue",
   ...rest
@@ -3629,7 +3844,7 @@ var ColorWheel = forwardRef(function ColorWheel2({
   const [hue, setHue] = useControlled({
     controlled: value,
     default: defaultValue ?? 0,
-    onChange
+    onChange: onValueChange
   });
   const trackRef = useRef(null);
   const updateFromClient = useCallback(
@@ -3642,23 +3857,23 @@ var ColorWheel = forwardRef(function ColorWheel2({
   );
   const handlePointerDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       e.preventDefault();
       e.target.setPointerCapture?.(e.pointerId);
       updateFromClient(e.clientX, e.clientY);
     },
-    [disabled, updateFromClient]
+    [isDisabled, updateFromClient]
   );
   const handlePointerMove = useCallback(
     (e) => {
-      if (disabled || e.buttons !== 1) return;
+      if (isDisabled || e.buttons !== 1) return;
       updateFromClient(e.clientX, e.clientY);
     },
-    [disabled, updateFromClient]
+    [isDisabled, updateFromClient]
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (disabled) return;
+      if (isDisabled) return;
       let next = hue;
       switch (e.key) {
         case "ArrowRight":
@@ -3687,7 +3902,7 @@ var ColorWheel = forwardRef(function ColorWheel2({
       e.preventDefault();
       setHue(clampHue(next));
     },
-    [disabled, hue, setHue, step]
+    [isDisabled, hue, setHue, step]
   );
   const radius = (size - thickness) / 2;
   const angleRad = hue * Math.PI / 180;
@@ -3705,20 +3920,20 @@ var ColorWheel = forwardRef(function ColorWheel2({
     {
       ref: composeRefs(forwardedRef, trackRef),
       role: "slider",
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: isDisabled ? -1 : 0,
       "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuemax": 360,
       "aria-valuenow": Math.round(hue),
-      "aria-disabled": disabled || void 0,
-      "data-disabled": disabled ? "" : void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-disabled": isDisabled ? "" : void 0,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onKeyDown: handleKeyDown,
       style: wheelStyle,
       className: cn(
         "relative inline-block select-none rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        disabled && "pointer-events-none opacity-50",
+        isDisabled && "pointer-events-none opacity-50",
         className
       ),
       ...rest,
@@ -3737,7 +3952,7 @@ var ColorWheel = forwardRef(function ColorWheel2({
     }
   );
 });
-function ColorSwatchItem({ color, selected, disabled, size, shape, onSelect }) {
+function ColorSwatchItem({ color, isSelected, isDisabled, size, shape, onSelect }) {
   const roving = useRovingFocusItem();
   return /* @__PURE__ */ jsx(
     ColorSwatch,
@@ -3746,8 +3961,8 @@ function ColorSwatchItem({ color, selected, disabled, size, shape, onSelect }) {
       color,
       size,
       shape,
-      selected,
-      disabled,
+      isSelected,
+      isDisabled,
       tabIndex: roving.tabIndex,
       onClick: () => onSelect(color),
       onKeyDown: (e) => {
@@ -3768,31 +3983,31 @@ function ColorSwatchPicker({
   colors,
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   swatchSize = "md",
   swatchShape = "square",
-  disabled = false,
+  isDisabled = false,
   className,
   ...rest
 }) {
   const [selected, setSelected] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   return /* @__PURE__ */ jsx(
     RovingFocusGroup,
     {
       orientation: "both",
-      loop: true,
+      canLoop: true,
       className: cn("flex flex-wrap gap-1.5", className),
       ...rest,
       children: colors.map((c) => /* @__PURE__ */ jsx(
         ColorSwatchItem,
         {
           color: c,
-          selected: selected === c,
-          disabled,
+          isSelected: selected === c,
+          isDisabled,
           size: swatchSize,
           shape: swatchShape,
           onSelect: (color) => setSelected(color)
@@ -3806,11 +4021,11 @@ var FALLBACK_HSV = { h: 217, s: 0.91, v: 0.96, a: 1 };
 var ColorPicker = forwardRef(function ColorPicker2({
   value,
   defaultValue = "#3b82f6",
-  onChange,
-  withAlpha = false,
+  onValueChange,
+  hasAlpha = false,
   presets,
   triggerSize = "md",
-  disabled = false,
+  isDisabled = false,
   name,
   className,
   "aria-label": ariaLabel = "Pick a color"
@@ -3818,21 +4033,21 @@ var ColorPicker = forwardRef(function ColorPicker2({
   const [hex, setHex] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [hsv, setHsvState] = useState(() => parseColorToHsv(hex) ?? FALLBACK_HSV);
   useEffect(() => {
     if (!hex) return;
     const parsed = parseColorToHsv(hex);
     if (!parsed) return;
-    const currentHex = hsvToHex(hsv, { withAlpha });
+    const currentHex = hsvToHex(hsv, { withAlpha: hasAlpha });
     if (currentHex.toLowerCase() !== hex.toLowerCase()) {
       setHsvState({ ...parsed, a: hsv.a });
     }
-  }, [hex, withAlpha]);
+  }, [hex, hasAlpha]);
   const updateHsv = (next) => {
     setHsvState(next);
-    setHex(hsvToHex(next, { withAlpha }));
+    setHex(hsvToHex(next, { withAlpha: hasAlpha }));
   };
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -3841,7 +4056,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
         ref,
         type: "button",
         "aria-label": ariaLabel,
-        disabled,
+        disabled: isDisabled,
         className: cn(
           "inline-flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-sm transition-colors hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
           className
@@ -3859,7 +4074,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
           hue: hsv.h,
           saturation: hsv.s,
           value: hsv.v,
-          onChange: ({ saturation, value: value2 }) => updateHsv({ ...hsv, s: saturation, v: value2 })
+          onValueChange: ({ saturation, value: value2 }) => updateHsv({ ...hsv, s: saturation, v: value2 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3867,17 +4082,17 @@ var ColorPicker = forwardRef(function ColorPicker2({
         {
           channel: "hue",
           value: hsv.h,
-          onChange: (h) => updateHsv({ ...hsv, h }),
+          onValueChange: (h) => updateHsv({ ...hsv, h }),
           "aria-label": "Hue"
         }
       ),
-      withAlpha && /* @__PURE__ */ jsx(
+      hasAlpha && /* @__PURE__ */ jsx(
         ColorSlider,
         {
           channel: "alpha",
           value: hsv.a ?? 1,
           color: hsv,
-          onChange: (a) => updateHsv({ ...hsv, a }),
+          onValueChange: (a) => updateHsv({ ...hsv, a }),
           "aria-label": "Alpha"
         }
       ),
@@ -3885,8 +4100,8 @@ var ColorPicker = forwardRef(function ColorPicker2({
         ColorField,
         {
           value: hex,
-          onChange: (next) => setHex(next),
-          withAlpha
+          onValueChange: (next) => setHex(next),
+          hasAlpha
         }
       ),
       presets && presets.length > 0 && /* @__PURE__ */ jsx(
@@ -3894,7 +4109,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
         {
           colors: presets,
           value: hex,
-          onChange: setHex,
+          onValueChange: setHex,
           swatchSize: "sm"
         }
       )
@@ -3976,7 +4191,7 @@ var StepperList = forwardRef(function StepperList2({ className, children, ...res
     }
   );
 });
-var StepperStep = forwardRef(function StepperStep2({ value, description, disabled = false, className, onClick, children, ...rest }, ref) {
+var StepperStep = forwardRef(function StepperStep2({ value, description, isDisabled = false, className, onClick, children, ...rest }, ref) {
   const ctx = useStepperContext();
   const roving = useRovingFocusItem();
   useEffect(() => {
@@ -4006,19 +4221,19 @@ var StepperStep = forwardRef(function StepperStep2({ value, description, disable
         "aria-controls": panelId,
         "aria-current": status === "active" ? "step" : void 0,
         "data-status": status,
-        "data-disabled": dataAttr(disabled),
+        "data-disabled": dataAttr(isDisabled),
         tabIndex: roving.tabIndex,
-        disabled,
+        disabled: isDisabled,
         onClick: (e) => {
           onClick?.(e);
-          if (e.defaultPrevented || disabled) return;
+          if (e.defaultPrevented || isDisabled) return;
           ctx.setValue(value);
         },
         onFocus: roving.onFocus,
         onKeyDown: roving.onKeyDown,
         className: cn(
           "group flex items-center gap-2 text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
-          disabled && "pointer-events-none opacity-50",
+          isDisabled && "pointer-events-none opacity-50",
           className
         ),
         ...rest,
@@ -4095,9 +4310,9 @@ var TagsInput = forwardRef(function TagsInput2({
   placeholder = "Add tag\u2026",
   delimiters = [","],
   validate = (t) => t.trim().length > 0,
-  allowDuplicates = false,
+  allowsDuplicates = false,
   max,
-  invalid,
+  isInvalid,
   disabled,
   readOnly,
   name,
@@ -4120,17 +4335,17 @@ var TagsInput = forwardRef(function TagsInput2({
   });
   const inputRef = useRef(null);
   const [pendingDelete, setPendingDelete] = useState(false);
-  const state = invalid ? "invalid" : "default";
+  const state = isInvalid ? "invalid" : "default";
   const commit = useCallback(
     (raw) => {
       const trimmed = raw.trim();
       if (!trimmed || !validate(trimmed)) return;
-      if (!allowDuplicates && tags.includes(trimmed)) return;
+      if (!allowsDuplicates && tags.includes(trimmed)) return;
       if (max != null && tags.length >= max) return;
       setTags([...tags, trimmed]);
       setText("");
     },
-    [tags, validate, allowDuplicates, max, setTags, setText]
+    [tags, validate, allowsDuplicates, max, setTags, setText]
   );
   const removeAt = useCallback(
     (idx) => {
@@ -4177,7 +4392,7 @@ var TagsInput = forwardRef(function TagsInput2({
       onClick: handleContainerClick,
       "data-disabled": disabled || void 0,
       "data-readonly": readOnly || void 0,
-      "data-invalid": invalid || void 0,
+      "data-invalid": isInvalid || void 0,
       className: cn(
         inputBaseVariants({ size, state }),
         "h-auto min-h-10 flex-wrap items-center gap-1.5 py-1.5",
@@ -4206,7 +4421,7 @@ var TagsInput = forwardRef(function TagsInput2({
             placeholder: tags.length === 0 ? placeholder : void 0,
             disabled,
             readOnly,
-            "aria-invalid": invalid || void 0,
+            "aria-invalid": isInvalid || void 0,
             onChange: (e) => setText(e.target.value),
             onKeyDown: handleKeyDown,
             onBlur: (e) => {
@@ -4242,7 +4457,7 @@ var FileUpload = forwardRef(function FileUpload2({
   maxFiles,
   onFilesChange,
   disabled,
-  invalid,
+  isInvalid,
   label = "Drop files here, or click to browse",
   hint,
   children,
@@ -4339,7 +4554,7 @@ var FileUpload = forwardRef(function FileUpload2({
       openPicker();
     }
   };
-  const showError = invalid || dragState === "reject";
+  const showError = isInvalid || dragState === "reject";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -4415,15 +4630,15 @@ function Editable({
   value: valueProp,
   defaultValue,
   onValueChange,
-  editing: editingProp,
+  isEditing: editingProp,
   defaultEditing = false,
   onEditingChange,
   placeholder = "Click to edit",
-  submitOnBlur = true,
-  submitOnEnter = true,
-  cancelOnEscape = true,
-  disabled = false,
-  readOnly = false,
+  canSubmitOnBlur = true,
+  canSubmitOnEnter = true,
+  canCancelOnEscape = true,
+  isDisabled = false,
+  isReadOnly = false,
   name,
   className,
   children
@@ -4456,16 +4671,16 @@ function Editable({
       value,
       draft,
       setDraft,
-      editing,
+      isEditing: editing,
       setEditing,
       submit,
       cancel,
       placeholder,
-      disabled,
-      readOnly,
-      submitOnBlur,
-      submitOnEnter,
-      cancelOnEscape,
+      isDisabled,
+      isReadOnly,
+      canSubmitOnBlur,
+      canSubmitOnEnter,
+      canCancelOnEscape,
       inputRef
     }),
     [
@@ -4476,11 +4691,11 @@ function Editable({
       submit,
       cancel,
       placeholder,
-      disabled,
-      readOnly,
-      submitOnBlur,
-      submitOnEnter,
-      cancelOnEscape
+      isDisabled,
+      isReadOnly,
+      canSubmitOnBlur,
+      canSubmitOnEnter,
+      canCancelOnEscape
     ]
   );
   return /* @__PURE__ */ jsx(EditableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-1.5", className), children: [
@@ -4491,9 +4706,9 @@ function Editable({
 var EditablePreview = forwardRef(
   function EditablePreview2({ className, onClick, onKeyDown, ...rest }, forwardedRef) {
     const ctx = useEditableContext();
-    if (ctx.editing) return null;
+    if (ctx.isEditing) return null;
     const isEmpty = !ctx.value;
-    const interactive = !ctx.disabled && !ctx.readOnly;
+    const interactive = !ctx.isDisabled && !ctx.isReadOnly;
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -4530,20 +4745,20 @@ var EditableInput = forwardRef(
   function EditableInput2({ className, size, state, onKeyDown, onBlur, ...rest }, forwardedRef) {
     const ctx = useEditableContext();
     useEffect(() => {
-      if (ctx.editing && ctx.inputRef.current) {
+      if (ctx.isEditing && ctx.inputRef.current) {
         ctx.inputRef.current.focus();
         const len = ctx.inputRef.current.value.length;
         ctx.inputRef.current.setSelectionRange(len, len);
       }
-    }, [ctx.editing, ctx.inputRef]);
-    if (!ctx.editing) return null;
+    }, [ctx.isEditing, ctx.inputRef]);
+    if (!ctx.isEditing) return null;
     const handleKeyDown = (e) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
-      if (ctx.submitOnEnter && e.key === "Enter") {
+      if (ctx.canSubmitOnEnter && e.key === "Enter") {
         e.preventDefault();
         ctx.submit();
-      } else if (ctx.cancelOnEscape && e.key === "Escape") {
+      } else if (ctx.canCancelOnEscape && e.key === "Escape") {
         e.preventDefault();
         ctx.cancel();
       }
@@ -4554,14 +4769,14 @@ var EditableInput = forwardRef(
         ref: composeRefs(forwardedRef, ctx.inputRef),
         type: "text",
         value: ctx.draft,
-        disabled: ctx.disabled,
-        readOnly: ctx.readOnly,
+        disabled: ctx.isDisabled,
+        readOnly: ctx.isReadOnly,
         onChange: (e) => ctx.setDraft(e.target.value),
         onKeyDown: handleKeyDown,
         onBlur: (e) => {
           onBlur?.(e);
           if (e.defaultPrevented) return;
-          if (ctx.submitOnBlur) ctx.submit();
+          if (ctx.canSubmitOnBlur) ctx.submit();
         },
         className: cn(inputBaseVariants({ size, state }), className),
         ...rest
@@ -4572,7 +4787,7 @@ var EditableInput = forwardRef(
 var EditableSubmit = forwardRef(
   function EditableSubmit2({ className, onClick, children, type = "button", ...rest }, forwardedRef) {
     const ctx = useEditableContext();
-    if (!ctx.editing) return null;
+    if (!ctx.isEditing) return null;
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -4598,7 +4813,7 @@ var EditableSubmit = forwardRef(
 var EditableCancel = forwardRef(
   function EditableCancel2({ className, onClick, children, type = "button", ...rest }, forwardedRef) {
     const ctx = useEditableContext();
-    if (!ctx.editing) return null;
+    if (!ctx.isEditing) return null;
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -4649,8 +4864,8 @@ var Wizard = forwardRef(function Wizard2({
     return {
       id: props.id,
       label: props.label,
-      optional: props.optional,
-      final: props.final
+      isOptional: props.isOptional,
+      isFinal: props.isFinal
     };
   });
   const [steps, setSteps] = useState(stepFromChildren);
@@ -4712,7 +4927,7 @@ var Wizard = forwardRef(function Wizard2({
         setIsPending(false);
       }
     }
-    if (currentStep.final) {
+    if (currentStep.isFinal) {
       setIsPending(true);
       try {
         await onComplete?.();
@@ -4794,7 +5009,7 @@ var WizardSteps = forwardRef(
               children: [
                 /* @__PURE__ */ jsx("span", { className: "grid h-5 w-5 place-items-center rounded-full bg-background/20 text-[10px]", children: i + 1 }),
                 step.label ?? step.id,
-                step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] opacity-70", children: "(optional)" })
+                step.isOptional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] opacity-70", children: "(optional)" })
               ]
             },
             step.id
@@ -4804,18 +5019,19 @@ var WizardSteps = forwardRef(
     );
   }
 );
-var WizardStep = forwardRef(function WizardStep2({ id, label, validate, optional, final, className, children, ...rest }, ref) {
+var WizardStep = forwardRef(function WizardStep2({ id, label, validate, isOptional, isFinal, className, children, ...rest }, ref) {
   const ctx = useWizard();
   const isCurrent = ctx.currentStep?.id === id;
-  useMemo(() => {
-    ctx.registerStep({ id, label, optional, final });
-    return id;
-  }, [id, label, optional, final]);
-  useMemo(() => {
-    if (validate) ctx.registerValidator(id, validate);
-    else ctx.unregisterValidator(id);
-    return validate;
-  }, [id, validate]);
+  const { registerStep, unregisterStep, registerValidator, unregisterValidator } = ctx;
+  useEffect(() => {
+    registerStep({ id, label, isOptional, isFinal });
+    return () => unregisterStep(id);
+  }, [registerStep, unregisterStep, id, label, isOptional, isFinal]);
+  useEffect(() => {
+    if (validate) registerValidator(id, validate);
+    else unregisterValidator(id);
+    return () => unregisterValidator(id);
+  }, [registerValidator, unregisterValidator, id, validate]);
   if (!isCurrent) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -4835,13 +5051,13 @@ var WizardFooter = forwardRef(
     prevLabel = "Back",
     nextLabel = "Next",
     submitLabel = "Finish",
-    showPrev = true,
+    hasPrev = true,
     className,
     ...rest
   }, ref) {
     const ctx = useWizard();
     const isFirst = ctx.currentIndex === 0;
-    const isFinal = ctx.currentStep?.final ?? false;
+    const isFinal = ctx.currentStep?.isFinal ?? false;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4849,7 +5065,7 @@ var WizardFooter = forwardRef(
         className: cn("mt-2 flex items-center justify-between gap-3", className),
         ...rest,
         children: [
-          showPrev && !isFirst && ctx.canGoBack ? /* @__PURE__ */ jsx(
+          hasPrev && !isFirst && ctx.canGoBack ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -4884,10 +5100,10 @@ var CodeEditor = forwardRef(
     onValueChange,
     language,
     tabSize = 2,
-    useTabs = false,
+    isTabIndented = false,
     disabled,
     readOnly,
-    invalid,
+    isInvalid,
     minHeight = "12rem",
     placeholder,
     className,
@@ -4903,9 +5119,8 @@ var CodeEditor = forwardRef(
     const textareaRef = useRef(null);
     const gutterRef = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
-    useImperativeHandle(forwardedRef, () => textareaRef.current);
     const lineCount = useMemo(() => value.split("\n").length, [value]);
-    const indentChar = useTabs ? "	" : " ".repeat(tabSize);
+    const indentChar = isTabIndented ? "	" : " ".repeat(tabSize);
     const insertAtSelection = useCallback(
       (insert, selStart, selEnd) => {
         const next = value.slice(0, selStart) + insert + value.slice(selEnd);
@@ -4926,7 +5141,7 @@ var CodeEditor = forwardRef(
           if (e.shiftKey) {
             const lineStart = value.lastIndexOf("\n", start - 1) + 1;
             const lineSlice = value.slice(lineStart, start);
-            const match = useTabs ? /^\t/ : new RegExp(`^ {1,${tabSize}}`);
+            const match = isTabIndented ? /^\t/ : new RegExp(`^ {1,${tabSize}}`);
             const m = match.exec(lineSlice);
             if (m) {
               const next = value.slice(0, lineStart) + lineSlice.slice(m[0].length) + value.slice(start);
@@ -4955,18 +5170,41 @@ var CodeEditor = forwardRef(
           const lineStartOffset = before.lastIndexOf("\n") + 1;
           const blockStart = before.slice(0, lineStartOffset);
           const block = before.slice(lineStartOffset) + between;
+          let newStart;
+          let newEnd;
           if (e.shiftKey) {
-            const re = useTabs ? /^\t/gm : new RegExp(`^ {1,${tabSize}}`, "gm");
-            const next = blockStart + block.replace(re, "") + after;
-            setValue(next);
+            const re = isTabIndented ? /^\t/gm : new RegExp(`^ {1,${tabSize}}`, "gm");
+            let removedTotal = 0;
+            let removedFirst = 0;
+            const outdented = block.replace(re, (m, offset) => {
+              removedTotal += m.length;
+              if (offset === 0) removedFirst = m.length;
+              return "";
+            });
+            setValue(blockStart + outdented + after);
+            newStart = Math.max(lineStartOffset, start - removedFirst);
+            newEnd = Math.max(newStart, end - removedTotal);
           } else {
-            const next = blockStart + block.replace(/^/gm, indentChar) + after;
-            setValue(next);
+            const relEnd = end - lineStartOffset;
+            let inserted = 0;
+            const indented = block.replace(/^/gm, (_m, offset) => {
+              if (offset < relEnd) inserted++;
+              return indentChar;
+            });
+            setValue(blockStart + indented + after);
+            newStart = start + indentChar.length;
+            newEnd = end + indentChar.length * inserted;
           }
+          requestAnimationFrame(() => {
+            if (textareaRef.current) {
+              textareaRef.current.selectionStart = newStart;
+              textareaRef.current.selectionEnd = newEnd;
+            }
+          });
         }
       }
     };
-    const state = invalid ? "invalid" : "default";
+    const state = isInvalid ? "invalid" : "default";
     const gutterText = useMemo(
       () => Array.from({ length: lineCount }, (_, i) => String(i + 1)).join("\n"),
       [lineCount]
@@ -4992,9 +5230,15 @@ var CodeEditor = forwardRef(
             {
               ref: gutterRef,
               "aria-hidden": "true",
-              className: "select-none whitespace-pre overflow-hidden border-r border-border bg-muted/40 px-3 py-2 text-right text-muted-foreground tabular-nums",
-              style: { transform: `translateY(${-scrollTop}px)` },
-              children: gutterText
+              className: "select-none overflow-hidden border-r border-border bg-muted/40 text-right text-muted-foreground tabular-nums",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "whitespace-pre px-3 py-2",
+                  style: { transform: `translateY(${-scrollTop}px)` },
+                  children: gutterText
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -5013,7 +5257,7 @@ var CodeEditor = forwardRef(
               readOnly,
               spellCheck: false,
               placeholder,
-              "aria-invalid": invalid || void 0,
+              "aria-invalid": isInvalid || void 0,
               className: "block flex-1 resize-none whitespace-pre overflow-auto bg-transparent px-3 py-2 outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed"
             }
           )
@@ -5037,6 +5281,29 @@ var linePrefix = (prefix) => ({ value, start, end }) => {
   const next = value.slice(0, lineStart) + updated + value.slice(lineEnd);
   return { value: next, selStart: lineStart + prefix.length, selEnd: lineStart + updated.length };
 };
+var escapeHtml = (html) => html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var SAFE_URL = /^(?:https?:|mailto:|tel:|[^a-z0-9.+-]|[a-z0-9.+-]*$)/i;
+var safeUrl = (href) => SAFE_URL.test(href.trim()) ? href : null;
+var previewMarked = new Marked({
+  renderer: {
+    html({ text }) {
+      return escapeHtml(text);
+    },
+    link({ href, title, tokens }) {
+      const url = safeUrl(href);
+      const text = this.parser.parseInline(tokens);
+      if (url === null) return text;
+      const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+      return `<a href="${escapeHtml(url)}"${titleAttr}>${text}</a>`;
+    },
+    image({ href, title, text }) {
+      const url = safeUrl(href);
+      if (url === null) return escapeHtml(text);
+      const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+      return `<img src="${escapeHtml(url)}" alt="${escapeHtml(text)}"${titleAttr}>`;
+    }
+  }
+});
 var ACTIONS = [
   { key: "h1", label: "Heading 1", icon: /* @__PURE__ */ jsx(Icon, { icon: Heading1, size: 14 }), apply: linePrefix("# ") },
   { key: "h2", label: "Heading 2", icon: /* @__PURE__ */ jsx(Icon, { icon: Heading2, size: 14 }), apply: linePrefix("## ") },
@@ -5058,7 +5325,7 @@ var MarkdownEditor = forwardRef(
     renderPreview,
     disabled,
     readOnly,
-    invalid,
+    isInvalid,
     minHeight = "18rem",
     placeholder,
     className,
@@ -5080,7 +5347,7 @@ var MarkdownEditor = forwardRef(
     const previewHtml = useMemo(() => {
       if (renderPreview) return null;
       try {
-        return marked.parse(value, { async: false });
+        return previewMarked.parse(value, { async: false });
       } catch {
         return "<p>Failed to render preview.</p>";
       }
@@ -5102,7 +5369,7 @@ var MarkdownEditor = forwardRef(
     };
     const showEdit = view === "split" || view === "edit";
     const showPreview = view === "split" || view === "preview";
-    const state = invalid ? "invalid" : "default";
+    const state = isInvalid ? "invalid" : "default";
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -5156,7 +5423,7 @@ var MarkdownEditor = forwardRef(
                 disabled,
                 readOnly,
                 spellCheck: false,
-                "aria-invalid": invalid || void 0,
+                "aria-invalid": isInvalid || void 0,
                 onChange: (e) => setValue(e.target.value),
                 className: cn(
                   "flex-1 resize-none whitespace-pre-wrap break-words bg-transparent p-3 font-mono text-sm outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed",
@@ -5185,7 +5452,7 @@ function describeType(v) {
   return typeof v;
 }
 function pathToString(path) {
-  return path.map((p) => typeof p === "number" ? `[${p}]` : path.indexOf(p) === 0 ? p : `.${p}`).join("");
+  return path.map((p, i) => typeof p === "number" ? `[${p}]` : i === 0 ? p : `.${p}`).join("");
 }
 function setAtPath(root, path, next) {
   if (path.length === 0) return next;
@@ -5209,9 +5476,9 @@ var JSONEditor = forwardRef(function JSONEditor2({
   mode: modeProp,
   defaultMode = "tree",
   onModeChange,
-  disabled,
-  readOnly,
-  invalid,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
   indent = 2,
   minHeight = "14rem",
   className,
@@ -5234,11 +5501,11 @@ var JSONEditor = forwardRef(function JSONEditor2({
     "div",
     {
       ref,
-      "data-state": invalid ? "invalid" : "default",
+      "data-state": isInvalid ? "invalid" : "default",
       className: cn(
         "flex flex-col overflow-hidden rounded-md border border-input bg-card text-card-foreground shadow-sm",
-        invalid && "border-destructive",
-        disabled && "opacity-60",
+        isInvalid && "border-destructive",
+        isDisabled && "opacity-60",
         className
       ),
       style: { minHeight },
@@ -5259,22 +5526,22 @@ var JSONEditor = forwardRef(function JSONEditor2({
           },
           m
         )) }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", style: { minHeight: 0 }, children: mode === "tree" ? /* @__PURE__ */ jsx(TreeView, { value, updateAt, disabled, readOnly }) : /* @__PURE__ */ jsx(TextView, { value, setValue, disabled, readOnly, indent }) })
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", style: { minHeight: 0 }, children: mode === "tree" ? /* @__PURE__ */ jsx(TreeView, { value, updateAt, isDisabled, isReadOnly }) : /* @__PURE__ */ jsx(TextView, { value, setValue, isDisabled, isReadOnly, indent }) })
       ]
     }
   );
 });
-function TreeView({ value, updateAt, disabled, readOnly }) {
-  return /* @__PURE__ */ jsx("ul", { role: "tree", className: "font-mono text-sm", children: /* @__PURE__ */ jsx(TreeNode, { keyName: null, value, path: [], updateAt, disabled, readOnly, depth: 0 }) });
+function TreeView({ value, updateAt, isDisabled, isReadOnly }) {
+  return /* @__PURE__ */ jsx("ul", { role: "tree", className: "font-mono text-sm", children: /* @__PURE__ */ jsx(TreeNode, { keyName: null, value, path: [], updateAt, isDisabled, isReadOnly, depth: 0 }) });
 }
-function TreeNode({ keyName, value, path, updateAt, disabled, readOnly, depth }) {
+function TreeNode({ keyName, value, path, updateAt, isDisabled, isReadOnly, depth }) {
   const type = describeType(value);
   const isObject = type === "object" || type === "array";
   const [open, setOpen] = useState(depth < 2);
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState("");
   const startEdit = () => {
-    if (disabled || readOnly || isObject) return;
+    if (isDisabled || isReadOnly || isObject) return;
     setEditing(true);
     setDraft(typeof value === "string" ? value : String(value));
   };
@@ -5336,7 +5603,7 @@ function TreeNode({ keyName, value, path, updateAt, disabled, readOnly, depth })
           onClick: startEdit,
           className: cn(
             "cursor-text rounded-sm px-1 text-left transition-colors",
-            !disabled && !readOnly && "hover:bg-muted",
+            !isDisabled && !isReadOnly && "hover:bg-muted",
             type === "string" && "text-info",
             type === "number" && "text-warning",
             type === "boolean" && "text-success",
@@ -5363,15 +5630,15 @@ function TreeNode({ keyName, value, path, updateAt, disabled, readOnly, depth })
         value: v,
         path: [...path, k],
         updateAt,
-        disabled,
-        readOnly,
+        isDisabled,
+        isReadOnly,
         depth: depth + 1
       },
       String(k)
     )) })
   ] });
 }
-function TextView({ value, setValue, disabled, readOnly, indent }) {
+function TextView({ value, setValue, isDisabled, isReadOnly, indent }) {
   const initial = useMemo(() => safeStringify(value, indent), [value, indent]);
   const [draft, setDraft] = useState(initial);
   const [error, setError] = useState(null);
@@ -5394,8 +5661,8 @@ function TextView({ value, setValue, disabled, readOnly, indent }) {
       "textarea",
       {
         value: draft,
-        disabled,
-        readOnly,
+        disabled: isDisabled,
+        readOnly: isReadOnly,
         spellCheck: false,
         onChange: (e) => {
           dirty.current = true;
@@ -5453,16 +5720,14 @@ function nextOccurrence(rule, prev) {
       if (!rule.byDay || rule.byDay.length === 0) return addDays(prev, 7 * rule.interval);
       const allowed = new Set(rule.byDay);
       let cursor = addDays(prev, 1);
-      let weekJumps = 0;
-      const maxIter = 7 * rule.interval + 1;
-      for (let i = 0; i < maxIter; i++) {
-        const wd = JS_TO_RRULE[cursor.getDay()];
-        if (allowed.has(wd)) {
-          return cursor;
-        }
+      while (cursor.getDay() !== 0) {
+        if (allowed.has(JS_TO_RRULE[cursor.getDay()])) return cursor;
+        cursor = addDays(cursor, 1);
+      }
+      cursor = addDays(cursor, 7 * (rule.interval - 1));
+      for (let i = 0; i < 7; i++) {
+        if (allowed.has(JS_TO_RRULE[cursor.getDay()])) return cursor;
         cursor = addDays(cursor, 1);
-        if (cursor.getDay() === 0) weekJumps++;
-        if (weekJumps >= rule.interval) ;
       }
       return null;
     }
@@ -5502,8 +5767,8 @@ var RecurrenceEditor = forwardRef(
     onValueChange,
     from = /* @__PURE__ */ new Date(),
     previewCount = 5,
-    disabled,
-    readOnly,
+    isDisabled,
+    isReadOnly,
     name,
     className,
     ...rest
@@ -5529,7 +5794,7 @@ var RecurrenceEditor = forwardRef(
         ref,
         className: cn(
           "flex flex-col gap-3 rounded-md border border-border bg-card p-4 text-card-foreground shadow-sm",
-          disabled && "opacity-60",
+          isDisabled && "opacity-60",
           className
         ),
         ...rest,
@@ -5543,8 +5808,8 @@ var RecurrenceEditor = forwardRef(
                 min: 1,
                 max: 999,
                 value: rule.interval,
-                disabled,
-                readOnly,
+                disabled: isDisabled,
+                readOnly: isReadOnly,
                 onChange: (e) => update({ interval: Math.max(1, Number(e.target.value) || 1) }),
                 className: cn(inputBaseVariants({ size: "sm" }), "w-16")
               }
@@ -5554,7 +5819,7 @@ var RecurrenceEditor = forwardRef(
               {
                 "aria-label": "Frequency",
                 value: rule.freq,
-                disabled,
+                disabled: isDisabled,
                 onChange: (e) => update({ freq: e.target.value }),
                 className: cn(inputBaseVariants({ size: "sm" }), "w-32"),
                 children: [
@@ -5576,7 +5841,7 @@ var RecurrenceEditor = forwardRef(
                   type: "button",
                   role: "checkbox",
                   "aria-checked": checked,
-                  disabled: disabled || readOnly,
+                  disabled: isDisabled || isReadOnly,
                   onClick: () => {
                     const set = new Set(rule.byDay ?? []);
                     if (set.has(wd)) set.delete(wd);
@@ -5602,8 +5867,8 @@ var RecurrenceEditor = forwardRef(
                 min: 1,
                 max: 31,
                 value: rule.byMonthDay ?? from.getDate(),
-                disabled,
-                readOnly,
+                disabled: isDisabled,
+                readOnly: isReadOnly,
                 onChange: (e) => update({ byMonthDay: Math.min(31, Math.max(1, Number(e.target.value) || 1)) }),
                 className: cn(inputBaseVariants({ size: "sm" }), "w-20")
               }
@@ -5618,7 +5883,7 @@ var RecurrenceEditor = forwardRef(
                   type: "radio",
                   name: `${name ?? "rule"}-end`,
                   checked: endMode === "never",
-                  disabled: disabled || readOnly,
+                  disabled: isDisabled || isReadOnly,
                   onChange: () => update({ count: void 0, until: null })
                 }
               ),
@@ -5631,7 +5896,7 @@ var RecurrenceEditor = forwardRef(
                   type: "radio",
                   name: `${name ?? "rule"}-end`,
                   checked: endMode === "count",
-                  disabled: disabled || readOnly,
+                  disabled: isDisabled || isReadOnly,
                   onChange: () => update({ count: rule.count ?? 10, until: null })
                 }
               ),
@@ -5642,7 +5907,7 @@ var RecurrenceEditor = forwardRef(
                   type: "number",
                   min: 1,
                   value: rule.count ?? "",
-                  disabled: disabled || readOnly || endMode !== "count",
+                  disabled: isDisabled || isReadOnly || endMode !== "count",
                   onChange: (e) => update({ count: Math.max(1, Number(e.target.value) || 1), until: null }),
                   className: cn(inputBaseVariants({ size: "sm" }), "w-20")
                 }
@@ -5656,7 +5921,7 @@ var RecurrenceEditor = forwardRef(
                   type: "radio",
                   name: `${name ?? "rule"}-end`,
                   checked: endMode === "until",
-                  disabled: disabled || readOnly,
+                  disabled: isDisabled || isReadOnly,
                   onChange: () => update({ until: addMonths(from, 6), count: void 0 })
                 }
               ),
@@ -5666,7 +5931,7 @@ var RecurrenceEditor = forwardRef(
                 {
                   type: "date",
                   value: formatISODate(rule.until ?? null),
-                  disabled: disabled || readOnly || endMode !== "until",
+                  disabled: isDisabled || isReadOnly || endMode !== "until",
                   onChange: (e) => update({ until: parseISODate(e.target.value), count: void 0 }),
                   className: cn(inputBaseVariants({ size: "sm" }), "w-44")
                 }
@@ -5705,8 +5970,8 @@ var Knob = forwardRef(function Knob2({
   arcDegrees = 270,
   tone = "brand",
   format = (v) => v.toFixed(2),
-  showValue = true,
-  disabled,
+  isValueShown = true,
+  isDisabled,
   name,
   className,
   "aria-label": ariaLabel = "Knob",
@@ -5729,12 +5994,12 @@ var Knob = forwardRef(function Knob2({
     [min, max, setValue]
   );
   const handlePointerDown = (e) => {
-    if (disabled || e.button !== 0) return;
+    if (isDisabled || e.button !== 0) return;
     dragStateRef.current = { startY: e.clientY, startValue: value };
     e.currentTarget.setPointerCapture(e.pointerId);
   };
   const handlePointerMove = (e) => {
-    if (disabled || !dragStateRef.current) return;
+    if (isDisabled || !dragStateRef.current) return;
     const dy = dragStateRef.current.startY - e.clientY;
     const range = max - min;
     const sensitivity = range / 200;
@@ -5745,14 +6010,20 @@ var Knob = forwardRef(function Knob2({
     dragStateRef.current = null;
     e.currentTarget.releasePointerCapture?.(e.pointerId);
   };
-  const handleWheel = (e) => {
-    if (disabled) return;
-    e.preventDefault();
-    const delta = e.deltaY < 0 ? step : -step;
-    setClamped(value + delta);
-  };
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      if (isDisabled) return;
+      e.preventDefault();
+      const delta = e.deltaY < 0 ? step : -step;
+      setClamped(value + delta);
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [isDisabled, step, value, setClamped]);
   const handleKey = (e) => {
-    if (disabled) return;
+    if (isDisabled) return;
     const s = e.shiftKey ? largeStep : step;
     switch (e.key) {
       case "ArrowUp":
@@ -5804,19 +6075,18 @@ var Knob = forwardRef(function Knob2({
       "aria-valuemin": min,
       "aria-valuemax": max,
       "aria-orientation": "vertical",
-      "aria-disabled": disabled || void 0,
-      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": isDisabled || void 0,
+      tabIndex: isDisabled ? -1 : 0,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
-      onWheel: handleWheel,
       onKeyDown: handleKey,
       style: { width: size, height: size, touchAction: "none" },
       className: cn(
         "relative inline-flex select-none items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         TONE_CLASS[tone],
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing",
+        isDisabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing",
         className
       ),
       ...rest,
@@ -5856,7 +6126,7 @@ var Knob = forwardRef(function Knob2({
             }
           )
         ] }),
-        showValue && /* @__PURE__ */ jsx(
+        isValueShown && /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": "true",
@@ -5869,9 +6139,10 @@ var Knob = forwardRef(function Knob2({
     }
   );
 });
+var IS_MAC = typeof navigator !== "undefined" && navigator.platform?.toLowerCase().includes("mac");
 var MODIFIER_NAMES = {
   Control: "Ctrl",
-  Meta: navigator?.platform?.toLowerCase?.().includes("mac") ? "\u2318" : "Meta",
+  Meta: IS_MAC ? "\u2318" : "Meta",
   Alt: "Alt",
   Shift: "Shift"
 };
@@ -6045,7 +6316,7 @@ var IconPicker = forwardRef(
     size = 20,
     iconButtonSize = 36,
     placeholder = "Search icons\u2026",
-    disabled,
+    isDisabled,
     name,
     className,
     ...rest
@@ -6078,7 +6349,7 @@ var IconPicker = forwardRef(
               type: "search",
               value: query,
               placeholder,
-              disabled,
+              disabled: isDisabled,
               onChange: (e) => setQuery(e.target.value),
               className: cn(inputBaseVariants({ size: "sm" }))
             }
@@ -6099,7 +6370,7 @@ var IconPicker = forwardRef(
                       type: "button",
                       "aria-pressed": selected,
                       "aria-label": key,
-                      disabled,
+                      disabled: isDisabled,
                       onClick: () => setValue(key),
                       style: { width: iconButtonSize, height: iconButtonSize },
                       className: cn(
@@ -6143,7 +6414,7 @@ var FontPicker = forwardRef(
     fonts = BUILT_IN_FONTS,
     placeholder = "Select font\u2026",
     previewText = "The quick brown fox",
-    disabled,
+    isDisabled,
     name,
     className,
     ...rest
@@ -6167,7 +6438,7 @@ var FontPicker = forwardRef(
           "button",
           {
             type: "button",
-            disabled,
+            disabled: isDisabled,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
             className: cn(
@@ -6179,7 +6450,7 @@ var FontPicker = forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs(PopoverContent, { bare: true, className: "w-[20rem] p-2", children: [
+        /* @__PURE__ */ jsxs(PopoverContent, { isBare: true, className: "w-[20rem] p-2", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -6322,10 +6593,10 @@ var CronInput = forwardRef(
     defaultValue,
     onValueChange,
     placeholder = "* * * * *",
-    invalid,
+    isInvalid,
     size,
     state,
-    showPreview = true,
+    hasPreview = true,
     disabled,
     readOnly,
     name,
@@ -6338,7 +6609,7 @@ var CronInput = forwardRef(
       onChange: onValueChange
     });
     const preview = useMemo(() => parseCron(value), [value]);
-    const isError = invalid || preview.startsWith("Invalid") || preview.startsWith("Cron");
+    const isError = isInvalid || preview.startsWith("Invalid") || preview.startsWith("Cron");
     const inputState = isError ? "invalid" : state ?? "default";
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsx(
@@ -6357,7 +6628,7 @@ var CronInput = forwardRef(
           className: cn(inputBaseVariants({ size, state: inputState }), "font-mono")
         }
       ),
-      showPreview && /* @__PURE__ */ jsx(
+      hasPreview && /* @__PURE__ */ jsx(
         "div",
         {
           "aria-live": "polite",
@@ -6388,7 +6659,7 @@ function gradientToCss(g) {
   return `conic-gradient(from ${g.angle}deg, ${stopsStr})`;
 }
 var GradientPicker = forwardRef(
-  function GradientPicker2({ value: valueProp, defaultValue, onValueChange, disabled, name, className, ...rest }, ref) {
+  function GradientPicker2({ value: valueProp, defaultValue, onValueChange, isDisabled, name, className, ...rest }, ref) {
     const [gradient, setGradient] = useControlled({
       controlled: valueProp,
       default: defaultValue ?? DEFAULT_GRADIENT,
@@ -6418,7 +6689,7 @@ var GradientPicker = forwardRef(
         ref,
         className: cn(
           "flex flex-col gap-3 rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm",
-          disabled && "opacity-60",
+          isDisabled && "opacity-60",
           className
         ),
         ...rest,
@@ -6430,7 +6701,7 @@ var GradientPicker = forwardRef(
                 type: "button",
                 role: "radio",
                 "aria-checked": gradient.kind === k,
-                disabled,
+                disabled: isDisabled,
                 onClick: () => update({ kind: k }),
                 className: cn(
                   "inline-flex h-6 items-center rounded px-2 text-xs font-medium transition-colors",
@@ -6449,7 +6720,7 @@ var GradientPicker = forwardRef(
                   min: 0,
                   max: 360,
                   value: gradient.angle,
-                  disabled,
+                  disabled: isDisabled,
                   onChange: (e) => update({ angle: Math.max(0, Math.min(360, Number(e.target.value) || 0)) }),
                   className: cn(inputBaseVariants({ size: "sm" }), "w-20")
                 }
@@ -6471,7 +6742,7 @@ var GradientPicker = forwardRef(
               {
                 type: "color",
                 value: stop.color,
-                disabled,
+                disabled: isDisabled,
                 onChange: (e) => updateStop(i, { color: e.target.value }),
                 className: "h-7 w-10 cursor-pointer rounded-sm border border-input bg-background"
               }
@@ -6481,7 +6752,7 @@ var GradientPicker = forwardRef(
               {
                 type: "text",
                 value: stop.color,
-                disabled,
+                disabled: isDisabled,
                 onChange: (e) => updateStop(i, { color: e.target.value }),
                 className: cn(inputBaseVariants({ size: "sm" }), "flex-1 font-mono")
               }
@@ -6493,7 +6764,7 @@ var GradientPicker = forwardRef(
                 min: 0,
                 max: 100,
                 value: stop.position,
-                disabled,
+                disabled: isDisabled,
                 onChange: (e) => updateStop(i, { position: Math.max(0, Math.min(100, Number(e.target.value) || 0)) }),
                 className: cn(inputBaseVariants({ size: "sm" }), "w-16")
               }
@@ -6504,7 +6775,7 @@ var GradientPicker = forwardRef(
               {
                 type: "button",
                 "aria-label": "Remove stop",
-                disabled: disabled || gradient.stops.length <= 2,
+                disabled: isDisabled || gradient.stops.length <= 2,
                 onClick: () => removeStop(i),
                 className: "inline-flex h-7 w-7 items-center justify-center rounded text-destructive hover:bg-destructive-soft disabled:pointer-events-none disabled:opacity-40",
                 children: /* @__PURE__ */ jsx(Icon, { icon: Trash, size: 12 })
@@ -6515,7 +6786,7 @@ var GradientPicker = forwardRef(
             "button",
             {
               type: "button",
-              disabled,
+              disabled: isDisabled,
               onClick: addStop,
               className: "inline-flex h-8 w-full items-center justify-center gap-1 rounded-md border border-dashed border-border text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
               children: [
@@ -6616,7 +6887,7 @@ function configFor(iso) {
 }
 var EMPTY = { country: "US", line1: "", city: "", region: "", postalCode: "" };
 var AddressForm = forwardRef(
-  function AddressForm2({ value: valueProp, defaultValue, onValueChange, disabled, readOnly, compact, name, className, ...rest }, ref) {
+  function AddressForm2({ value: valueProp, defaultValue, onValueChange, isDisabled, isReadOnly, isCompact, name, className, ...rest }, ref) {
     const [address, setAddress] = useControlled({
       controlled: valueProp,
       default: defaultValue ?? EMPTY,
@@ -6640,7 +6911,7 @@ var AddressForm = forwardRef(
           {
             id: ids.country,
             value: address.country,
-            disabled: disabled || readOnly,
+            disabled: isDisabled || isReadOnly,
             onChange: (e) => update({ country: e.target.value, region: "" }),
             className: cn(inputBaseVariants({ size: "md" })),
             children: [
@@ -6659,8 +6930,8 @@ var AddressForm = forwardRef(
             type: "text",
             autoComplete: "address-line1",
             value: address.line1,
-            disabled,
-            readOnly,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
             onChange: (e) => update({ line1: e.target.value }),
             className: cn(inputBaseVariants({ size: "md" }))
           }
@@ -6678,14 +6949,14 @@ var AddressForm = forwardRef(
             type: "text",
             autoComplete: "address-line2",
             value: address.line2 ?? "",
-            disabled,
-            readOnly,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
             onChange: (e) => update({ line2: e.target.value }),
             className: cn(inputBaseVariants({ size: "md" }))
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn("grid gap-3", compact ? "grid-cols-1" : "grid-cols-3"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("grid gap-3", isCompact ? "grid-cols-1" : "grid-cols-3"), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx("label", { htmlFor: ids.city, className: "text-xs font-medium text-foreground", children: "City" }),
           /* @__PURE__ */ jsx(
@@ -6695,8 +6966,8 @@ var AddressForm = forwardRef(
               type: "text",
               autoComplete: "address-level2",
               value: address.city,
-              disabled,
-              readOnly,
+              disabled: isDisabled,
+              readOnly: isReadOnly,
               onChange: (e) => update({ city: e.target.value }),
               className: cn(inputBaseVariants({ size: "md" }))
             }
@@ -6709,7 +6980,7 @@ var AddressForm = forwardRef(
             {
               id: ids.region,
               value: address.region,
-              disabled: disabled || readOnly,
+              disabled: isDisabled || isReadOnly,
               onChange: (e) => update({ region: e.target.value }),
               className: cn(inputBaseVariants({ size: "md" })),
               children: [
@@ -6724,8 +6995,8 @@ var AddressForm = forwardRef(
               type: "text",
               autoComplete: "address-level1",
               value: address.region,
-              disabled,
-              readOnly,
+              disabled: isDisabled,
+              readOnly: isReadOnly,
               onChange: (e) => update({ region: e.target.value }),
               className: cn(inputBaseVariants({ size: "md" }))
             }
@@ -6740,8 +7011,8 @@ var AddressForm = forwardRef(
               type: "text",
               autoComplete: "postal-code",
               value: address.postalCode,
-              disabled,
-              readOnly,
+              disabled: isDisabled,
+              readOnly: isReadOnly,
               onChange: (e) => update({ postalCode: e.target.value }),
               className: cn(inputBaseVariants({ size: "md" }))
             }
@@ -6829,9 +7100,9 @@ var PhoneInput = forwardRef(
     defaultValue,
     onValueChange,
     defaultCountry = "US",
-    disabled,
-    readOnly,
-    invalid,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
     placeholder = "(555) 555-5555",
     name,
     className,
@@ -6842,10 +7113,18 @@ var PhoneInput = forwardRef(
       default: defaultValue ?? "",
       onChange: onValueChange
     });
-    const { iso, national } = useMemo(() => splitE164(value, defaultCountry), [value, defaultCountry]);
+    const [selectedIso, setSelectedIso] = useState(defaultCountry);
+    const { iso, national } = useMemo(() => {
+      const selected = PHONE_COUNTRIES.find((c) => c.iso === selectedIso);
+      if (selected && (!value || value.startsWith(selected.dial))) {
+        return { iso: selected.iso, national: value.slice(selected.dial.length).replace(/\D/g, "") };
+      }
+      return splitE164(value, defaultCountry);
+    }, [value, selectedIso, defaultCountry]);
     const country = PHONE_COUNTRIES.find((c) => c.iso === iso) ?? PHONE_COUNTRIES[0];
     const setCountry = (nextIso) => {
       const next = PHONE_COUNTRIES.find((c) => c.iso === nextIso) ?? country;
+      setSelectedIso(next.iso);
       setValue(`${next.dial}${national}`);
     };
     const setNational = (raw) => {
@@ -6858,8 +7137,8 @@ var PhoneInput = forwardRef(
         ref,
         className: cn(
           "inline-flex items-stretch overflow-hidden rounded-md border bg-background",
-          invalid ? "border-destructive" : "border-input",
-          disabled && "opacity-60",
+          isInvalid ? "border-destructive" : "border-input",
+          isDisabled && "opacity-60",
           className
         ),
         ...rest,
@@ -6869,7 +7148,7 @@ var PhoneInput = forwardRef(
             {
               "aria-label": "Country",
               value: iso,
-              disabled: disabled || readOnly,
+              disabled: isDisabled || isReadOnly,
               onChange: (e) => setCountry(e.target.value),
               className: cn(
                 "h-10 cursor-pointer border-r border-input bg-card pl-2 pr-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
@@ -6890,9 +7169,9 @@ var PhoneInput = forwardRef(
               autoComplete: "tel-national",
               value: national,
               placeholder,
-              disabled,
-              readOnly,
-              "aria-invalid": invalid || void 0,
+              disabled: isDisabled,
+              readOnly: isReadOnly,
+              "aria-invalid": isInvalid || void 0,
               onChange: (e) => setNational(e.target.value),
               className: cn(
                 inputBaseVariants({ size: "md" }),
@@ -7190,7 +7469,7 @@ var EmojiPicker = forwardRef(
     columns = 8,
     cellSize = 28,
     categories = EMOJI,
-    disabled,
+    isDisabled,
     className,
     ...rest
   }, ref) {
@@ -7227,7 +7506,7 @@ var EmojiPicker = forwardRef(
         },
         className: cn(
           "flex flex-col rounded-md border border-border bg-card text-card-foreground shadow-sm",
-          disabled && "opacity-60",
+          isDisabled && "opacity-60",
           className
         ),
         style: { width: columns * cellSize + 24 },
@@ -7239,7 +7518,7 @@ var EmojiPicker = forwardRef(
               type: "search",
               value: query,
               placeholder,
-              disabled,
+              disabled: isDisabled,
               onChange: (e) => setQuery(e.target.value),
               className: cn(inputBaseVariants({ size: "sm" }))
             }
@@ -7267,9 +7546,9 @@ var EmojiPicker = forwardRef(
               "aria-label": "Emoji",
               className: "overflow-y-auto p-2",
               style: { maxHeight: 280 },
-              children: matches ? matches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No emoji match." }) : /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: matches.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, disabled, onSelect }, e.emoji)) }) : categories.map((cat) => /* @__PURE__ */ jsxs("div", { "data-cat": cat.id, id: `emoji-cat-${cat.id}`, className: "mb-3", children: [
+              children: matches ? matches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No emoji match." }) : /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: matches.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, isDisabled, onSelect }, e.emoji)) }) : categories.map((cat) => /* @__PURE__ */ jsxs("div", { "data-cat": cat.id, id: `emoji-cat-${cat.id}`, className: "mb-3", children: [
                 /* @__PURE__ */ jsx("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: cat.label }),
-                /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: cat.emojis.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, disabled, onSelect }, e.emoji)) })
+                /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: cat.emojis.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, isDisabled, onSelect }, e.emoji)) })
               ] }, cat.id))
             }
           )
@@ -7278,13 +7557,13 @@ var EmojiPicker = forwardRef(
     );
   }
 );
-function EmojiCell({ entry, cellSize, disabled, onSelect }) {
+function EmojiCell({ entry, cellSize, isDisabled, onSelect }) {
   return /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       "aria-label": entry.name,
-      disabled,
+      disabled: isDisabled,
       onClick: () => onSelect(entry.emoji),
       style: { width: cellSize, height: cellSize },
       className: "inline-flex items-center justify-center rounded-md text-lg transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -7304,7 +7583,7 @@ var ReactionPicker = forwardRef(
     selected,
     onSelect,
     onMore,
-    hideMore,
+    isMoreHidden,
     size = "md",
     className,
     ...props
@@ -7341,7 +7620,7 @@ var ReactionPicker = forwardRef(
             emoji
           );
         }),
-        !hideMore && onMore && /* @__PURE__ */ jsx(
+        !isMoreHidden && onMore && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -7367,11 +7646,11 @@ var ChatComposer = forwardRef(
     onValueChange,
     onSubmit,
     placeholder = "Write a message\u2026",
-    disabled,
+    isDisabled,
     leading,
     trailing,
     sendButton,
-    hideSendButton,
+    isSendButtonHidden,
     submitOn = "enter",
     maxHeight = 200,
     textareaProps,
@@ -7399,7 +7678,7 @@ var ChatComposer = forwardRef(
     const handleSubmit = (e) => {
       e?.preventDefault();
       const trimmed = value.trim();
-      if (!trimmed || disabled) return;
+      if (!trimmed || isDisabled) return;
       onSubmit?.(trimmed);
       if (valueProp === void 0) setValue("");
     };
@@ -7422,7 +7701,7 @@ var ChatComposer = forwardRef(
         className: cn(
           "flex w-full items-end gap-2 rounded-2xl border border-input bg-background px-3 py-2",
           "focus-within:ring-2 focus-within:ring-ring",
-          disabled && "cursor-not-allowed opacity-60",
+          isDisabled && "cursor-not-allowed opacity-60",
           className
         ),
         ...props,
@@ -7438,7 +7717,7 @@ var ChatComposer = forwardRef(
               onKeyDown: handleKeyDown,
               rows: 1,
               placeholder,
-              disabled,
+              disabled: isDisabled,
               className: cn(
                 "flex-1 resize-none bg-transparent py-1 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus:outline-none",
                 textareaProps?.className
@@ -7446,11 +7725,11 @@ var ChatComposer = forwardRef(
             }
           ),
           trailing && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1 self-end pb-1", children: trailing }),
-          !hideSendButton && (sendButton ?? /* @__PURE__ */ jsx(
+          !isSendButtonHidden && (sendButton ?? /* @__PURE__ */ jsx(
             "button",
             {
               type: "submit",
-              disabled: disabled || isEmpty,
+              disabled: isDisabled || isEmpty,
               "aria-label": "Send message",
               className: cn(
                 "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full self-end",
@@ -7469,5 +7748,5 @@ var ChatComposer = forwardRef(
 ChatComposer.displayName = "ChatComposer";
 
 export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, ChatComposer, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, ReactionPicker, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
-//# sourceMappingURL=chunk-BKWLS6V2.js.map
-//# sourceMappingURL=chunk-BKWLS6V2.js.map
+//# sourceMappingURL=chunk-HG7NX6GP.js.map
+//# sourceMappingURL=chunk-HG7NX6GP.js.map