@wow-two-beta/ui 0.0.55 → 0.0.57

package/dist/{chunk-S6RT24VI.js → chunk-JOOE4KS5.js}

@@ -1,20 +1,25 @@
-import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-CRKW4VXA.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-OMSOGGGK.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-3GZOE7JF.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-4QOCAFCA.js';
+import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-ZH6BB54G.js';
+import { useControlled } from './chunk-5PMOT5MD.js';
+import { Icon } from './chunk-MVMDDGW7.js';
+import { tv, CssExtensions, ColorExtensions, dataAttr, surfaceVariants, Equality } from './chunk-XDP6GEBA.js';
+import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-UI4RT5JF.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",
+  sm: "text-sm",
+  md: "text-sm"
+};
 var Label = forwardRef(
-  ({ className, required, htmlFor, id, children, ...props }, ref) => {
+  ({ className, required, size = "md", htmlFor, id, children, ...props }, ref) => {
     const ctx = useFormControl();
     const isRequired = required ?? ctx?.isRequired ?? false;
     return /* @__PURE__ */ jsxs(
@@ -24,7 +29,8 @@ var Label = forwardRef(
         htmlFor: htmlFor ?? ctx?.id,
         id: id ?? ctx?.labelId,
         className: cn(
-          "text-sm font-medium text-foreground",
+          SIZE[size],
+          "font-medium text-foreground",
           ctx?.isDisabled && "opacity-60",
           className
         ),
@@ -218,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 }));
     };
@@ -586,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(indeterminate);
+    }, [indeterminate]);
     const { preset: sizePreset, box: sizeBox } = CssExtensions.parseSizeUnion(
       size,
       CHECKBOX_SIZE_PRESETS
@@ -604,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": indeterminate ? "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",
@@ -662,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" })
         }
       )
     ] });
@@ -678,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) => {
@@ -707,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"
           ),
@@ -726,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) => {
@@ -746,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",
@@ -855,7 +873,7 @@ var CheckboxGroup = forwardRef(
     value,
     defaultValue,
     onValueChange,
-    isDisabled,
+    disabled,
     orientation = "vertical",
     className,
     children,
@@ -870,7 +888,7 @@ var CheckboxGroup = forwardRef(
       if (v === void 0) return;
       setSelected(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
     };
-    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled, className: cn(className), ...props, children: [
       legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
       /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
         if (!isValidElement(child)) return child;
@@ -892,7 +910,7 @@ var RadioGroup = forwardRef(
     value,
     defaultValue,
     onValueChange,
-    isDisabled,
+    disabled,
     orientation = "vertical",
     className,
     children,
@@ -905,7 +923,7 @@ var RadioGroup = forwardRef(
       default: defaultValue ?? null,
       onChange: onValueChange
     });
-    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled, className: cn(className), ...props, children: [
       legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
       /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
         if (!isValidElement(child)) return child;
@@ -921,7 +939,7 @@ var RadioGroup = forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var SIZE = {
+var SIZE2 = {
   sm: "h-9 w-9 text-base",
   md: "h-11 w-11 text-lg",
   lg: "h-14 w-14 text-xl"
@@ -936,32 +954,30 @@ var PinInput = forwardRef(
     type = "numeric",
     size = "md",
     mask,
-    isDisabled,
+    disabled,
     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) => {
@@ -980,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();
       }
@@ -995,7 +1011,7 @@ var PinInput = forwardRef(
         inputMode: type === "numeric" ? "numeric" : "text",
         autoComplete: "one-time-code",
         maxLength: 1,
-        disabled: isDisabled,
+        disabled,
         value: ch,
         onChange: (e) => handleChange(i, e.target.value),
         onKeyDown: (e) => handleKeyDown(i, e),
@@ -1003,7 +1019,7 @@ var PinInput = forwardRef(
         className: cn(
           inputBaseVariants({ state: "default" }),
           "text-center font-medium",
-          SIZE[size]
+          SIZE2[size]
         )
       },
       i
@@ -1166,7 +1182,7 @@ var LabeledInput = forwardRef(
   }
 );
 LabeledInput.displayName = "LabeledInput";
-var SIZE2 = {
+var SIZE3 = {
   sm: "p-3 text-xs",
   md: "p-4 text-sm",
   lg: "p-5 text-base"
@@ -1183,7 +1199,7 @@ var ChoiceCard = forwardRef(
           "group relative block cursor-pointer rounded-lg border border-input bg-card text-card-foreground transition-colors",
           "hover:border-border-strong has-[:checked]:border-primary has-[:checked]:bg-primary-soft/30",
           "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
-          SIZE2[size],
+          SIZE3[size],
           className
         ),
         children: [
@@ -1233,7 +1249,7 @@ var PasswordStrength = forwardRef(
   }
 );
 PasswordStrength.displayName = "PasswordStrength";
-var SIZE3 = {
+var SIZE4 = {
   sm: "h-8 px-3 text-sm",
   md: "h-10 px-4 text-sm",
   lg: "h-12 px-6 text-base"
@@ -1251,7 +1267,7 @@ var FilePicker = forwardRef(
           onClick: () => inputRef.current?.click(),
           className: cn(
             "inline-flex items-center gap-2 rounded-md border border-input bg-background font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-            SIZE3[size]
+            SIZE4[size]
           ),
           children: [
             /* @__PURE__ */ jsx(Icon, { icon: Upload, size: 16 }),
@@ -1266,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
         }
       ),
@@ -1354,7 +1373,10 @@ 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) {
+        setActiveId(nextEntry.id);
+        document.getElementById(nextEntry.id)?.scrollIntoView({ block: "nearest" });
+      }
     },
     [activeId]
   );
@@ -1410,7 +1432,8 @@ function ListboxImpl(props, ref) {
       registerItem,
       unregisterItem,
       setActiveId,
-      indicator: resolvedIndicator
+      indicator: resolvedIndicator,
+      disabled: disabled ?? false
     }),
     [
       multiple,
@@ -1420,7 +1443,8 @@ function ListboxImpl(props, ref) {
       onItemSelect,
       registerItem,
       unregisterItem,
-      resolvedIndicator
+      resolvedIndicator,
+      disabled
     ]
   );
   const resolvedPadding = padding ?? "xs";
@@ -1529,7 +1553,7 @@ var ListboxItem = forwardRef(function ListboxItem2({ value, disabled = false, in
       "data-disabled": disabled ? "" : void 0,
       onClick: (e) => {
         onClick?.(e);
-        if (e.defaultPrevented || disabled) return;
+        if (e.defaultPrevented || disabled || ctx.disabled) return;
         ctx.onItemSelect(value);
       },
       onPointerEnter: (e) => {
@@ -1592,9 +1616,9 @@ function useSelectContext() {
   return ctx;
 }
 function SelectImpl({
-  selected,
-  defaultSelected,
-  onChange,
+  value,
+  defaultValue,
+  onValueChange,
   keyEquals,
   disabled = false,
   isLoading = false,
@@ -1614,19 +1638,20 @@ function SelectImpl({
     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 [query, setQuery] = useState("");
+  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 onValueChangeRef = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
   const keyEqualsFn = useCallback((a, b) => {
     const fn = keyEqualsRef.current;
     return (fn ?? Equality.strictEquals)(a, b);
@@ -1664,13 +1689,14 @@ function SelectImpl({
   }, []);
   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({
@@ -1683,15 +1709,18 @@ 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,
@@ -1712,6 +1741,7 @@ function SelectImpl({
       setOpenState,
       keyState,
       hasSelection,
+      selectedLabel,
       onSelect,
       onClear,
       keyEqualsFn,
@@ -1727,7 +1757,7 @@ function SelectImpl({
       invalid
     ]
   );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     Popover,
     {
       open: openState,
@@ -1737,7 +1767,10 @@ function SelectImpl({
       },
       placement,
       offset: 4,
-      children
+      children: [
+        children,
+        name && hasSelection && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: serializeKeyFn(keyState) })
+      ]
     }
   ) });
 }
@@ -1760,6 +1793,12 @@ 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]"
+};
 var SelectTrigger = forwardRef(
   function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
     const ctx = useSelectContext();
@@ -1769,67 +1808,60 @@ var SelectTrigger = forwardRef(
     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];
+    return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-full", children: [
+      /* @__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", { "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": "Clear selection",
+          onClick: () => ctx.onClear(),
+          className: cn(
+            "absolute top-1/2 grid -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.serializeKey(ctx.selectedKey) : null);
   return /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
 function SelectContent({
@@ -1893,8 +1925,7 @@ function SelectContent({
               showEmpty && /* @__PURE__ */ jsx(ListboxEmpty, { children: noResultsLabel })
             ]
           }
-        ),
-        ctx.name && ctx.hasSelection && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.serializeKey(ctx.selectedKey) })
+        )
       ]
     }
   );
@@ -1998,14 +2029,17 @@ function MultiSelect({
       invalid
     ]
   );
-  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))
+      ]
     }
   ) });
 }
@@ -2089,7 +2123,7 @@ function MultiSelectContent({
   children
 }) {
   const ctx = useMultiSelectContext();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     PopoverContent,
     {
       variant,
@@ -2098,31 +2132,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,
+        {
+          multiple: 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 });
   }
 );
@@ -2172,6 +2202,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) => {
@@ -2207,6 +2238,7 @@ function Combobox({
       unregisterItem,
       itemsRef,
       inputRef,
+      contentRef,
       listboxId,
       disabled,
       invalid,
@@ -2234,9 +2266,16 @@ 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 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);
@@ -2247,9 +2286,9 @@ 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);
@@ -2269,7 +2308,7 @@ var ComboboxInput = forwardRef(
           if (ctx.open) {
             e.preventDefault();
             const first = ctx.itemsRef.current.find((i) => !i.disabled);
-            if (first) ctx.setActiveId(first.id);
+            if (first) setActiveAndScroll(first.id);
           }
           break;
         case "End":
@@ -2277,9 +2316,12 @@ var ComboboxInput = forwardRef(
             e.preventDefault();
             const list = ctx.itemsRef.current.filter((i) => !i.disabled);
             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);
@@ -2322,6 +2364,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
@@ -2341,6 +2391,13 @@ function ComboboxContent({
   children
 }) {
   const ctx = useComboboxContext();
+  useEffect(() => {
+    if (!ctx.open) return;
+    const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+    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(
@@ -2361,6 +2418,7 @@ function ComboboxContent({
           children: /* @__PURE__ */ jsx(
             "div",
             {
+              ref: ctx.contentRef,
               id: ctx.listboxId,
               role: "listbox",
               className: cn(
@@ -2446,6 +2504,7 @@ Combobox.Item = ComboboxItem;
 Combobox.Group = ComboboxGroup;
 Combobox.Separator = ComboboxSeparator;
 Combobox.Empty = ComboboxEmpty;
+var MAX_DISABLED_SKIP = 400;
 function MonthGrid({
   viewMonth,
   onViewMonthChange,
@@ -2457,56 +2516,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 " ":
@@ -2517,12 +2604,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
@@ -2563,9 +2656,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(
@@ -2578,10 +2671,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));
@@ -2600,7 +2693,7 @@ function MonthGrid({
             },
             date.toDateString()
           );
-        }) })
+        }) }, weekIndex)) })
       ]
     }
   );
@@ -2608,7 +2701,7 @@ function MonthGrid({
 var Calendar = forwardRef(function Calendar2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   defaultMonth,
   min,
   max,
@@ -2620,7 +2713,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())
@@ -2651,12 +2744,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",
@@ -2683,12 +2776,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",
@@ -2711,7 +2804,7 @@ var RangeCalendar = forwardRef(
   function RangeCalendar2({
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     defaultMonth,
     min,
     max,
@@ -2723,7 +2816,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())
@@ -2787,7 +2880,7 @@ 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,
@@ -2804,7 +2897,7 @@ var DatePicker = forwardRef(function DatePicker2({
   const [date, setDate] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [open, setOpen] = useControlled({
     controlled: void 0,
@@ -2830,7 +2923,7 @@ var DatePicker = forwardRef(function DatePicker2({
       Calendar,
       {
         value: date,
-        onChange: (d) => {
+        onValueChange: (d) => {
           setDate(d);
           setOpen(false);
         },
@@ -2848,7 +2941,7 @@ 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,
@@ -2863,7 +2956,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,
@@ -2980,7 +3073,7 @@ var DateRangePicker = forwardRef(
   function DateRangePicker2({
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     placeholder = "Pick a range",
     format = defaultFormat3,
     min,
@@ -2997,7 +3090,7 @@ var DateRangePicker = forwardRef(
     const [range, setRange] = useControlled({
       controlled: value,
       default: defaultValue ?? null,
-      onChange
+      onChange: onValueChange
     });
     const [open, setOpen] = useControlled({
       controlled: void 0,
@@ -3032,7 +3125,7 @@ var DateRangePicker = forwardRef(
         RangeCalendar,
         {
           value: range,
-          onChange: setRange,
+          onValueChange: setRange,
           defaultMonth: range?.start ?? /* @__PURE__ */ new Date(),
           min,
           max,
@@ -3218,7 +3311,7 @@ function commitHex(text, withAlpha) {
 var ColorField = forwardRef(function ColorField2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   swatchShape = "square",
   withAlpha = false,
   size,
@@ -3235,7 +3328,7 @@ var ColorField = forwardRef(function ColorField2({
   const [committed, setCommitted] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   const [draft, setDraft] = useState(committed ?? "");
   useEffect(() => {
@@ -3325,7 +3418,7 @@ var ColorSlider = forwardRef(function ColorSlider2({
   channel = "hue",
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   color,
   step,
   disabled = false,
@@ -3338,7 +3431,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(
@@ -3348,7 +3441,7 @@ 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]
   );
@@ -3389,11 +3482,10 @@ 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;
       }
@@ -3402,7 +3494,7 @@ var ColorSlider = forwardRef(function ColorSlider2({
     },
     [channel, disabled, 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,
@@ -3464,7 +3556,7 @@ var ColorArea = forwardRef(function ColorArea2({
   defaultSaturation,
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   step = 0.01,
   disabled = false,
   className,
@@ -3486,9 +3578,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) => {
@@ -3611,7 +3703,7 @@ function angleFromCenter(clientX, clientY, rect) {
 var ColorWheel = forwardRef(function ColorWheel2({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   size = 200,
   thickness = 30,
   step = 1,
@@ -3623,7 +3715,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(
@@ -3762,7 +3854,7 @@ function ColorSwatchPicker({
   colors,
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   swatchSize = "md",
   swatchShape = "square",
   disabled = false,
@@ -3772,7 +3864,7 @@ function ColorSwatchPicker({
   const [selected, setSelected] = useControlled({
     controlled: value,
     default: defaultValue ?? null,
-    onChange
+    onChange: onValueChange
   });
   return /* @__PURE__ */ jsx(
     RovingFocusGroup,
@@ -3800,7 +3892,7 @@ var FALLBACK_HSV = { h: 217, s: 0.91, v: 0.96, a: 1 };
 var ColorPicker = forwardRef(function ColorPicker2({
   value,
   defaultValue = "#3b82f6",
-  onChange,
+  onValueChange,
   withAlpha = false,
   presets,
   triggerSize = "md",
@@ -3812,7 +3904,7 @@ 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(() => {
@@ -3853,7 +3945,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(
@@ -3861,7 +3953,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
         {
           channel: "hue",
           value: hsv.h,
-          onChange: (h) => updateHsv({ ...hsv, h }),
+          onValueChange: (h) => updateHsv({ ...hsv, h }),
           "aria-label": "Hue"
         }
       ),
@@ -3871,7 +3963,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
           channel: "alpha",
           value: hsv.a ?? 1,
           color: hsv,
-          onChange: (a) => updateHsv({ ...hsv, a }),
+          onValueChange: (a) => updateHsv({ ...hsv, a }),
           "aria-label": "Alpha"
         }
       ),
@@ -3879,7 +3971,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
         ColorField,
         {
           value: hex,
-          onChange: (next) => setHex(next),
+          onValueChange: (next) => setHex(next),
           withAlpha
         }
       ),
@@ -3888,7 +3980,7 @@ var ColorPicker = forwardRef(function ColorPicker2({
         {
           colors: presets,
           value: hex,
-          onChange: setHex,
+          onValueChange: setHex,
           swatchSize: "sm"
         }
       )
@@ -4801,15 +4893,16 @@ var WizardSteps = forwardRef(
 var WizardStep = forwardRef(function WizardStep2({ id, label, validate, optional, final, 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, optional, final });
+    return () => unregisterStep(id);
+  }, [registerStep, unregisterStep, id, label, optional, final]);
+  useEffect(() => {
+    if (validate) registerValidator(id, validate);
+    else unregisterValidator(id);
+    return () => unregisterValidator(id);
+  }, [registerValidator, unregisterValidator, id, validate]);
   if (!isCurrent) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -4897,7 +4990,6 @@ 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 insertAtSelection = useCallback(
@@ -4949,14 +5041,37 @@ 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);
+            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;
+            }
+          });
         }
       }
     };
@@ -4986,9 +5101,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(
@@ -5031,6 +5152,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("## ") },
@@ -5074,7 +5218,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>";
       }
@@ -5179,7 +5323,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;
@@ -5447,16 +5591,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;
     }
@@ -5739,12 +5881,18 @@ 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 (disabled) return;
+      e.preventDefault();
+      const delta = e.deltaY < 0 ? step : -step;
+      setClamped(value + delta);
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [disabled, step, value, setClamped]);
   const handleKey = (e) => {
     if (disabled) return;
     const s = e.shiftKey ? largeStep : step;
@@ -5804,7 +5952,6 @@ var Knob = forwardRef(function Knob2({
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
-      onWheel: handleWheel,
       onKeyDown: handleKey,
       style: { width: size, height: size, touchAction: "none" },
       className: cn(
@@ -5863,9 +6010,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"
 };
@@ -6836,10 +6984,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) => {
@@ -7288,7 +7444,7 @@ function EmojiCell({ entry, cellSize, disabled, onSelect }) {
 }
 var BUILT_IN_EMOJI = EMOJI;
 var DEFAULT_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F62E}", "\u{1F622}", "\u{1F680}"];
-var SIZE4 = {
+var SIZE5 = {
   sm: "h-7 w-7 text-base",
   md: "h-8 w-8 text-lg"
 };
@@ -7328,7 +7484,7 @@ var ReactionPicker = forwardRef(
                 "inline-flex items-center justify-center rounded-full leading-none transition-transform",
                 "hover:scale-125 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 active && "bg-primary-soft",
-                SIZE4[size]
+                SIZE5[size]
               ),
               children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji })
             },
@@ -7344,7 +7500,7 @@ var ReactionPicker = forwardRef(
             className: cn(
               "inline-flex items-center justify-center rounded-full text-muted-foreground transition-colors",
               "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              SIZE4[size]
+              SIZE5[size]
             ),
             children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
           }
@@ -7463,5 +7619,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-S6RT24VI.js.map
-//# sourceMappingURL=chunk-S6RT24VI.js.map
+//# sourceMappingURL=chunk-JOOE4KS5.js.map
+//# sourceMappingURL=chunk-JOOE4KS5.js.map