@wow-two-beta/ui 0.0.13 → 0.0.14

package/dist/{chunk-A4N52LL6.js → chunk-BQTO7XY6.js}

@@ -1,4 +1,4 @@
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-EU6JT5B4.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-FS6DTWWH.js';
 import { useControlled } from './chunk-4P2TFUVW.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-YMSAS7M7.js';
 import { useId } from './chunk-KDXJQNB6.js';
@@ -9,8 +9,7 @@ import { cn } from './chunk-KZ4VFY2T.js';
 import * as React from 'react';
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, ChevronLeft, ChevronRight, Calendar as Calendar$1, Clock } from 'lucide-react';
-import { FocusScope } from '@radix-ui/react-focus-scope';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -1389,6 +1388,7 @@ function Select({
   defaultOpen = false,
   open: openProp,
   onOpenChange,
+  placement = "bottom",
   children
 }) {
   const [openState, setOpenState] = useControlled({
@@ -1401,7 +1401,6 @@ function Select({
     default: defaultValue ?? "",
     onChange: onValueChange
   });
-  const triggerRef = useRef(null);
   const [labels, setLabels] = useState({});
   const registerLabel = useCallback((v, label) => {
     setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
@@ -1418,7 +1417,6 @@ function Select({
     (next) => {
       setValueState(next);
       setOpenState(false);
-      requestAnimationFrame(() => triggerRef.current?.focus());
     },
     [setValueState, setOpenState]
   );
@@ -1428,7 +1426,6 @@ function Select({
       setOpen: setOpenState,
       value: valueState,
       onSelect,
-      triggerRef,
       labels,
       registerLabel,
       unregisterLabel,
@@ -1449,26 +1446,27 @@ function Select({
       invalid
     ]
   );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: openState,
+      onOpenChange: setOpenState,
+      placement,
+      offset: 6,
+      children
+    }
+  ) });
 }
 var SelectTrigger = forwardRef(
-  function SelectTrigger2({ size, state, className, onClick, children, ...rest }, forwardedRef) {
+  function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
     const ctx = useSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        ref,
         type: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": ctx.open,
-        "data-state": ctx.open ? "open" : "closed",
         disabled: ctx.disabled,
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          ctx.setOpen(!ctx.open);
-        },
         className: cn(selectTriggerVariants({ size, state: triggerState }), className),
         ...rest,
         children: [
@@ -1484,7 +1482,7 @@ var SelectTrigger = forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 function SelectValue({ placeholder, children }) {
@@ -1493,35 +1491,18 @@ function SelectValue({ placeholder, children }) {
   const label = ctx.value ? ctx.labels[ctx.value] ?? ctx.value : null;
   return /* @__PURE__ */ jsx("span", { className: cn("truncate", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
-function SelectContent({
-  className,
-  placement = "bottom",
-  offset = 6,
-  children
-}) {
+function SelectContent({ className, children }) {
   const ctx = useSelectContext();
-  if (!ctx.open) return null;
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
-      DismissableLayer,
+  return /* @__PURE__ */ jsxs(PopoverContent, { bare: true, children: [
+    /* @__PURE__ */ jsx(
+      Listbox,
       {
-        onEscape: () => ctx.setOpen(false),
-        onOutsidePointerDown: (e) => {
-          if (ctx.triggerRef.current?.contains(e.target)) return;
-          ctx.setOpen(false);
-        },
-        children: /* @__PURE__ */ jsx(
-          Listbox,
-          {
-            value: ctx.value,
-            onValueChange: (v) => ctx.onSelect(v),
-            className: cn("min-w-[var(--radix-anchor-width)]", className),
-            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
-            children
-          }
-        )
+        value: ctx.value,
+        onValueChange: (v) => ctx.onSelect(v),
+        className: cn("min-w-[var(--anchor-width)]", className),
+        children
       }
-    ) }) }),
+    ),
     ctx.name && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.value })
   ] });
 }
@@ -1556,6 +1537,7 @@ function MultiSelect({
   defaultOpen = false,
   open: openProp,
   onOpenChange,
+  placement = "bottom",
   children
 }) {
   const [openState, setOpenState] = useControlled({
@@ -1568,7 +1550,6 @@ function MultiSelect({
     default: defaultValue ?? [],
     onChange: onValueChange
   });
-  const triggerRef = useRef(null);
   const [labels, setLabels] = useState({});
   const registerLabel = useCallback((v, label) => {
     setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
@@ -1587,7 +1568,6 @@ function MultiSelect({
       setOpen: setOpenState,
       values: valuesState,
       setValues: setValuesState,
-      triggerRef,
       labels,
       registerLabel,
       unregisterLabel,
@@ -1608,26 +1588,27 @@ function MultiSelect({
       invalid
     ]
   );
-  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: openState,
+      onOpenChange: setOpenState,
+      placement,
+      offset: 6,
+      children
+    }
+  ) });
 }
 var MultiSelectTrigger = forwardRef(
-  function MultiSelectTrigger2({ size, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+  function MultiSelectTrigger2({ size, state, className, onKeyDown, children, ...rest }, ref) {
     const ctx = useMultiSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        ref,
         type: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": ctx.open,
-        "data-state": ctx.open ? "open" : "closed",
         disabled: ctx.disabled,
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          ctx.setOpen(!ctx.open);
-        },
         onKeyDown: (e) => {
           onKeyDown?.(e);
           if (e.defaultPrevented) return;
@@ -1654,7 +1635,7 @@ var MultiSelectTrigger = forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 function MultiSelectTags({ placeholder }) {
@@ -1688,39 +1669,19 @@ function MultiSelectTags({ placeholder }) {
     v
   )) });
 }
-function MultiSelectContent({
-  className,
-  placement = "bottom",
-  offset = 6,
-  children
-}) {
+function MultiSelectContent({ className, children }) {
   const ctx = useMultiSelectContext();
-  if (!ctx.open) return null;
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
-      DismissableLayer,
+  return /* @__PURE__ */ jsxs(PopoverContent, { bare: true, children: [
+    /* @__PURE__ */ jsx(
+      Listbox,
       {
-        onEscape: () => {
-          ctx.setOpen(false);
-          requestAnimationFrame(() => ctx.triggerRef.current?.focus());
-        },
-        onOutsidePointerDown: (e) => {
-          if (ctx.triggerRef.current?.contains(e.target)) return;
-          ctx.setOpen(false);
-        },
-        children: /* @__PURE__ */ jsx(
-          Listbox,
-          {
-            multiple: true,
-            value: ctx.values,
-            onValueChange: (v) => ctx.setValues(v),
-            className: cn(className),
-            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
-            children
-          }
-        )
+        multiple: true,
+        value: ctx.values,
+        onValueChange: (v) => ctx.setValues(v),
+        className: cn("min-w-[var(--anchor-width)]", className),
+        children
       }
-    ) }) }),
+    ),
     ctx.name && ctx.values.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: v }, v))
   ] });
 }
@@ -2130,29 +2091,17 @@ function isInRange(d, start, end) {
   const e = startOfDay(end).getTime();
   return t >= Math.min(s, e) && t <= Math.max(s, e);
 }
-var Calendar = forwardRef(function Calendar2({
-  value,
-  defaultValue,
-  onChange,
-  defaultMonth,
-  min,
-  max,
-  isDisabled,
+function MonthGrid({
+  viewMonth,
+  onViewMonthChange,
+  focusedDate,
+  onFocusedDateChange,
+  isDayDisabled,
+  onDayActivate,
+  dayProps,
   "aria-label": ariaLabel = "Calendar",
-  className,
-  ...rest
-}, ref) {
-  const [selected, setSelected] = useControlled({
-    controlled: value,
-    default: defaultValue ?? null,
-    onChange
-  });
-  const [viewMonth, setViewMonth] = useState(
-    () => startOfMonth(defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
-  );
-  const [focusedDate, setFocusedDate] = useState(
-    () => selected ?? /* @__PURE__ */ new Date()
-  );
+  className
+}) {
   const gridRef = useRef(null);
   useEffect(() => {
     const cell = gridRef.current?.querySelector(
@@ -2163,14 +2112,14 @@ var Calendar = forwardRef(function Calendar2({
   const moveFocus = useCallback(
     (next) => {
       if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
-        setViewMonth(startOfMonth(next));
+        onViewMonthChange(startOfMonth(next));
       }
-      setFocusedDate(next);
+      onFocusedDateChange(next);
     },
-    [viewMonth]
+    [viewMonth, onViewMonthChange, onFocusedDateChange]
   );
   const onCellKeyDown = useCallback(
-    (e, date) => {
+    (e, date, outOfMonth) => {
       switch (e.key) {
         case "ArrowRight":
           e.preventDefault();
@@ -2207,26 +2156,22 @@ var Calendar = forwardRef(function Calendar2({
         case "Enter":
         case " ":
           e.preventDefault();
-          if (!isDateDisabled(date, { min, max, isDisabled })) {
-            setSelected(date);
-          }
+          if (!isDayDisabled?.(date)) onDayActivate?.(date, { outOfMonth });
           break;
       }
     },
-    [moveFocus, setSelected, min, max, isDisabled]
+    [moveFocus, onDayActivate, isDayDisabled]
   );
   const cells = buildMonthGrid(viewMonth.getFullYear(), viewMonth.getMonth());
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
       role: "application",
       "aria-label": ariaLabel,
       className: cn(
         "inline-flex flex-col gap-2 rounded-md border border-border bg-popover p-3 text-popover-foreground",
         className
       ),
-      ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
           /* @__PURE__ */ jsx(
@@ -2234,7 +2179,7 @@ var Calendar = forwardRef(function Calendar2({
             {
               type: "button",
               "aria-label": "Previous month",
-              onClick: () => setViewMonth((m) => addMonths(m, -1)),
+              onClick: () => onViewMonthChange(addMonths(viewMonth, -1)),
               className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
             }
@@ -2249,7 +2194,7 @@ var Calendar = forwardRef(function Calendar2({
             {
               type: "button",
               "aria-label": "Next month",
-              onClick: () => setViewMonth((m) => addMonths(m, 1)),
+              onClick: () => onViewMonthChange(addMonths(viewMonth, 1)),
               className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
             }
@@ -2264,18 +2209,17 @@ var Calendar = forwardRef(function Calendar2({
           w
         )) }),
         /* @__PURE__ */ jsx("div", { ref: gridRef, className: "grid grid-cols-7 gap-0 px-1", role: "grid", children: cells.map(({ date, outOfMonth }) => {
-          const disabled = isDateDisabled(date, { min, max, isDisabled });
-          const isSelectedCell = isSameDay(selected, date);
+          const disabled = isDayDisabled?.(date) ?? false;
           const isFocusedCell = isSameDay(focusedDate, date);
+          const consumerProps = dayProps?.(date, { outOfMonth }) ?? {};
+          const { className: cellClassName, ...consumerRest } = consumerProps;
           return /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
               "data-date": date.toDateString(),
-              "aria-selected": isSelectedCell,
               "aria-disabled": disabled || void 0,
-              "data-selected": isSelectedCell ? "" : void 0,
               "data-today": isToday(date) ? "" : void 0,
               "data-out-of-month": outOfMonth ? "" : void 0,
               "data-disabled": disabled ? "" : void 0,
@@ -2283,19 +2227,19 @@ var Calendar = forwardRef(function Calendar2({
               disabled,
               onClick: () => {
                 if (disabled) return;
-                setSelected(date);
-                setFocusedDate(date);
-                if (outOfMonth) setViewMonth(startOfMonth(date));
+                onDayActivate?.(date, { outOfMonth });
+                onFocusedDateChange(date);
+                if (outOfMonth) onViewMonthChange(startOfMonth(date));
               },
-              onKeyDown: (e) => onCellKeyDown(e, date),
+              onKeyDown: (e) => onCellKeyDown(e, date, outOfMonth),
+              ...consumerRest,
               className: cn(
-                "grid h-9 w-9 place-items-center rounded-sm text-sm transition-colors",
+                "grid h-9 w-9 place-items-center text-sm transition-colors",
                 "hover:bg-muted hover:text-foreground",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 outOfMonth && "text-muted-foreground/60",
-                isToday(date) && !isSelectedCell && "border border-border",
-                isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary",
-                disabled && "pointer-events-none opacity-40"
+                disabled && "pointer-events-none opacity-40",
+                cellClassName
               ),
               children: date.getDate()
             },
@@ -2305,6 +2249,52 @@ var Calendar = forwardRef(function Calendar2({
       ]
     }
   );
+}
+var Calendar = forwardRef(function Calendar2({
+  value,
+  defaultValue,
+  onChange,
+  defaultMonth,
+  min,
+  max,
+  isDisabled,
+  "aria-label": ariaLabel = "Calendar",
+  className,
+  ...rest
+}, ref) {
+  const [selected, setSelected] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [viewMonth, setViewMonth] = useState(
+    () => startOfMonth(defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
+  );
+  const [focusedDate, setFocusedDate] = useState(() => selected ?? /* @__PURE__ */ new Date());
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...rest, children: /* @__PURE__ */ jsx(
+    MonthGrid,
+    {
+      viewMonth,
+      onViewMonthChange: setViewMonth,
+      focusedDate,
+      onFocusedDateChange: setFocusedDate,
+      isDayDisabled: (d) => isDateDisabled(d, { min, max, isDisabled }),
+      onDayActivate: (d) => setSelected(d),
+      dayProps: (date) => {
+        const isSelectedCell = isSameDay(selected, date);
+        return {
+          "aria-selected": isSelectedCell,
+          "data-selected": isSelectedCell ? "" : void 0,
+          className: cn(
+            "rounded-sm",
+            isToday(date) && !isSelectedCell && "border border-border",
+            isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary"
+          )
+        };
+      },
+      "aria-label": ariaLabel
+    }
+  ) });
 });
 var DateField = forwardRef(function DateField2({ value, defaultValue, onChange, min, max, size, state, className, id, disabled, required, ...rest }, ref) {
   const ctx = useFormControl();
@@ -2383,190 +2373,59 @@ var RangeCalendar = forwardRef(
     const [viewMonth, setViewMonth] = useState(
       () => startOfMonth(defaultMonth ?? range?.start ?? /* @__PURE__ */ new Date())
     );
-    const [focusedDate, setFocusedDate] = useState(
-      () => range?.start ?? /* @__PURE__ */ new Date()
-    );
+    const [focusedDate, setFocusedDate] = useState(() => range?.start ?? /* @__PURE__ */ new Date());
     const [hoveredDate, setHoveredDate] = useState(null);
     const [pendingStart, setPendingStart] = useState(null);
-    const gridRef = useRef(null);
-    useEffect(() => {
-      const cell = gridRef.current?.querySelector(
-        `[data-date="${focusedDate.toDateString()}"]`
-      );
-      cell?.focus();
-    }, [focusedDate]);
-    const moveFocus = useCallback(
-      (next) => {
-        if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
-          setViewMonth(startOfMonth(next));
-        }
-        setFocusedDate(next);
-      },
-      [viewMonth]
-    );
-    const onSelectDay = useCallback(
-      (date) => {
-        if (isDateDisabled(date, { min, max, isDisabled })) return;
-        if (!pendingStart) {
-          setPendingStart(date);
-          setRange({ start: date, end: null });
-          return;
-        }
-        const startTime = startOfDay(pendingStart).getTime();
-        const endTime = startOfDay(date).getTime();
-        const finalStart = startTime <= endTime ? pendingStart : date;
-        const finalEnd = startTime <= endTime ? date : pendingStart;
-        setRange({ start: finalStart, end: finalEnd });
-        setPendingStart(null);
-      },
-      [pendingStart, setRange, min, max, isDisabled]
-    );
-    const onCellKeyDown = useCallback(
-      (e, date) => {
-        switch (e.key) {
-          case "ArrowRight":
-            e.preventDefault();
-            moveFocus(addDays(date, 1));
-            break;
-          case "ArrowLeft":
-            e.preventDefault();
-            moveFocus(addDays(date, -1));
-            break;
-          case "ArrowDown":
-            e.preventDefault();
-            moveFocus(addDays(date, 7));
-            break;
-          case "ArrowUp":
-            e.preventDefault();
-            moveFocus(addDays(date, -7));
-            break;
-          case "Home":
-            e.preventDefault();
-            moveFocus(addDays(date, -date.getDay()));
-            break;
-          case "End":
-            e.preventDefault();
-            moveFocus(addDays(date, 6 - date.getDay()));
-            break;
-          case "PageDown":
-            e.preventDefault();
-            moveFocus(addMonths(date, e.shiftKey ? 12 : 1));
-            break;
-          case "PageUp":
-            e.preventDefault();
-            moveFocus(addMonths(date, e.shiftKey ? -12 : -1));
-            break;
-          case "Enter":
-          case " ":
-            e.preventDefault();
-            onSelectDay(date);
-            break;
-        }
-      },
-      [moveFocus, onSelectDay]
-    );
-    const cells = buildMonthGrid(viewMonth.getFullYear(), viewMonth.getMonth());
+    const handleActivate = (date) => {
+      if (!pendingStart) {
+        setPendingStart(date);
+        setRange({ start: date, end: null });
+        return;
+      }
+      const startTime = startOfDay(pendingStart).getTime();
+      const endTime = startOfDay(date).getTime();
+      const finalStart = startTime <= endTime ? pendingStart : date;
+      const finalEnd = startTime <= endTime ? date : pendingStart;
+      setRange({ start: finalStart, end: finalEnd });
+      setPendingStart(null);
+    };
     const previewEnd = pendingStart ? hoveredDate : range?.end;
     const isStart = (d) => isSameDay(d, range?.start ?? null) || isSameDay(d, pendingStart);
     const isEnd = (d) => isSameDay(d, range?.end ?? null);
     const inRange = (d) => isInRange(d, pendingStart ?? range?.start, previewEnd ?? null);
-    return /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...rest, children: /* @__PURE__ */ jsx(
+      MonthGrid,
       {
-        ref,
-        role: "application",
-        "aria-label": ariaLabel,
-        className: cn(
-          "inline-flex flex-col gap-2 rounded-md border border-border bg-popover p-3 text-popover-foreground",
-          className
-        ),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Previous month",
-                onClick: () => setViewMonth((m) => addMonths(m, -1)),
-                className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", "aria-live": "polite", children: [
-              MONTHS_LONG[viewMonth.getMonth()],
-              " ",
-              viewMonth.getFullYear()
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Next month",
-                onClick: () => setViewMonth((m) => addMonths(m, 1)),
-                className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-              }
+        viewMonth,
+        onViewMonthChange: setViewMonth,
+        focusedDate,
+        onFocusedDateChange: setFocusedDate,
+        isDayDisabled: (d) => isDateDisabled(d, { min, max, isDisabled }),
+        onDayActivate: handleActivate,
+        dayProps: (date) => {
+          const startCell = isStart(date);
+          const endCell = isEnd(date);
+          const rangeCell = inRange(date) && !startCell && !endCell;
+          const selected = startCell || endCell;
+          return {
+            "aria-selected": selected,
+            "data-range-start": startCell ? "" : void 0,
+            "data-range-end": endCell ? "" : void 0,
+            "data-in-range": rangeCell ? "" : void 0,
+            onPointerEnter: () => setHoveredDate(date),
+            onPointerLeave: () => setHoveredDate((h) => isSameDay(h, date) ? null : h),
+            className: cn(
+              isToday(date) && !startCell && !endCell && "border border-border rounded-sm",
+              rangeCell && "bg-primary-soft text-primary-soft-foreground",
+              startCell && "bg-primary text-primary-foreground rounded-l-sm",
+              endCell && "bg-primary text-primary-foreground rounded-r-sm",
+              !startCell && !endCell && !rangeCell && "rounded-sm"
             )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0 px-1", children: WEEKDAYS_SHORT.map((w) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "grid h-7 w-9 place-items-center text-xs font-medium text-muted-foreground",
-              children: w
-            },
-            w
-          )) }),
-          /* @__PURE__ */ jsx("div", { ref: gridRef, className: "grid grid-cols-7 gap-0 px-1", role: "grid", children: cells.map(({ date, outOfMonth }) => {
-            const disabled = isDateDisabled(date, { min, max, isDisabled });
-            const startCell = isStart(date);
-            const endCell = isEnd(date);
-            const rangeCell = inRange(date) && !startCell && !endCell;
-            const isFocusedCell = isSameDay(focusedDate, date);
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                role: "gridcell",
-                "data-date": date.toDateString(),
-                "data-range-start": startCell ? "" : void 0,
-                "data-range-end": endCell ? "" : void 0,
-                "data-in-range": rangeCell ? "" : void 0,
-                "data-today": isToday(date) ? "" : void 0,
-                "data-out-of-month": outOfMonth ? "" : void 0,
-                "data-disabled": disabled ? "" : void 0,
-                "aria-selected": startCell || endCell,
-                "aria-disabled": disabled || void 0,
-                tabIndex: isFocusedCell ? 0 : -1,
-                disabled,
-                onPointerEnter: () => setHoveredDate(date),
-                onPointerLeave: () => setHoveredDate((h) => isSameDay(h, date) ? null : h),
-                onClick: () => {
-                  onSelectDay(date);
-                  setFocusedDate(date);
-                  if (outOfMonth) setViewMonth(startOfMonth(date));
-                },
-                onKeyDown: (e) => onCellKeyDown(e, date),
-                className: cn(
-                  "grid h-9 w-9 place-items-center text-sm transition-colors",
-                  "hover:bg-muted hover:text-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  outOfMonth && "text-muted-foreground/60",
-                  isToday(date) && !startCell && !endCell && "border border-border rounded-sm",
-                  rangeCell && "bg-primary-soft text-primary-soft-foreground",
-                  startCell && "bg-primary text-primary-foreground rounded-l-sm",
-                  endCell && "bg-primary text-primary-foreground rounded-r-sm",
-                  !startCell && !endCell && !rangeCell && "rounded-sm",
-                  disabled && "pointer-events-none opacity-40"
-                ),
-                children: date.getDate()
-              },
-              date.toDateString()
-            );
-          }) })
-        ]
+          };
+        },
+        "aria-label": ariaLabel
       }
-    );
+    ) });
   }
 );
 var defaultFormat = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
@@ -3868,5 +3727,5 @@ Stepper.Step = StepperStep;
 Stepper.Panel = StepperPanel;
 
 export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
-//# sourceMappingURL=chunk-A4N52LL6.js.map
-//# sourceMappingURL=chunk-A4N52LL6.js.map
+//# sourceMappingURL=chunk-BQTO7XY6.js.map
+//# sourceMappingURL=chunk-BQTO7XY6.js.map