@aviala-design/spiral 1.0.0 → 2.0.0

package/dist/index.cjs

@@ -4276,7 +4276,7 @@ function ColorPickerInputs({
       }
     ) : null,
     format === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { children: "#" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "#" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
@@ -4315,7 +4315,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { children: "%" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "%" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       Select,
@@ -4835,6 +4835,7 @@ function Cascader({
   const isValueControlled = valueProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const selectedPath = isValueControlled ? valueProp ?? [] : internalValue;
+  const wasOpenRef = (0, import_react35.useRef)(open);
   (0, import_react35.useEffect)(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
@@ -4843,10 +4844,20 @@ function Cascader({
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
   (0, import_react35.useEffect)(() => {
-    if (open) {
-      setActivePath(selectedPath.length > 0 ? selectedPath.slice(0, -1) : []);
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!justOpened) return;
+    if (selectedPath.length === 0) {
+      setActivePath([]);
+      return;
+    }
+    const selectedOption = findOptionPath(options, selectedPath);
+    if (selectedOption?.children?.length) {
+      setActivePath(selectedPath);
+      return;
     }
-  }, [open, selectedPath]);
+    setActivePath(selectedPath.slice(0, -1));
+  }, [open, options, selectedPath]);
   (0, import_react35.useEffect)(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
@@ -6120,12 +6131,19 @@ function DatePicker(props) {
       setActivePanel("date");
       return;
     }
+    setFocusedDay((current) => {
+      if (current) return current;
+      if (mode === "single" && singleValue) return startOfDay(singleValue);
+      const rangeAnchor = mode === "range" ? rangeValue.from ?? rangeValue.to : void 0;
+      if (rangeAnchor) return startOfDay(rangeAnchor);
+      return startOfDay(/* @__PURE__ */ new Date());
+    });
     const markPointerDown = () => {
       pointerDownCloseRef.current = true;
     };
     document.addEventListener("pointerdown", markPointerDown, true);
     return () => document.removeEventListener("pointerdown", markPointerDown, true);
-  }, [open]);
+  }, [mode, open, rangeValue.from, rangeValue.to, singleValue]);
   const handleOpenChange = (0, import_react39.useCallback)(
     (nextOpen) => {
       if (disabled && nextOpen) return;
@@ -6226,19 +6244,21 @@ function DatePicker(props) {
     ]
   );
   const selectDate = (0, import_react39.useCallback)(
-    (date) => {
+    (date, options) => {
       if (disabled || isDateDisabled(date, minDate, maxDate)) return;
       const day = startOfDay(date);
       setFocusedDay(day);
       if (!isSameMonth(day, viewMonth)) {
         setViewMonth(new Date(day.getFullYear(), day.getMonth(), 1));
       }
+      const switchToTime = options?.switchToTime ?? enableTime;
+      const shouldClose = options?.close ?? !enableTime;
       if (mode === "single") {
         const next = enableTime ? applyTimeToDate(day, timeValue.hours, timeValue.minutes) : day;
         commitSingle(next);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6254,9 +6274,9 @@ function DatePicker(props) {
       if (isSameDay(day, currentFrom)) {
         commitRange({ from: withTime(day), to: withTime(day) });
         setRangeDraftFrom(void 0);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6267,9 +6287,9 @@ function DatePicker(props) {
         to: normalized.to ? withTime(normalized.to) : void 0
       });
       setRangeDraftFrom(void 0);
-      if (enableTime) {
+      if (switchToTime) {
         setActivePanel("time");
-      } else {
+      } else if (shouldClose) {
         handleOpenChange(false);
       }
     },
@@ -6675,7 +6695,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6706,7 +6726,7 @@ function DatePickerPanelFooter() {
         )
       ]
     }
-  );
+  ) });
 }
 function monthDiff(from, to) {
   return (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
@@ -6734,6 +6754,8 @@ function DatePickerCalendar({ className }) {
   const today = (0, import_react39.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const days = (0, import_react39.useMemo)(() => getCalendarDays(viewMonth), [viewMonth]);
   const prevViewMonthRef = (0, import_react39.useRef)(viewMonth);
+  const dayGridRef = (0, import_react39.useRef)(null);
+  const pendingDayFocusRef = (0, import_react39.useRef)(false);
   const [monthSlide, setMonthSlide] = (0, import_react39.useState)(null);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
@@ -6790,40 +6812,40 @@ function DatePickerCalendar({ className }) {
       outgoingMonth: previous
     });
   }, [contentView, panel, viewMonth]);
+  (0, import_react39.useLayoutEffect)(() => {
+    if (!pendingDayFocusRef.current || !focusedDay) return;
+    const grid = dayGridRef.current;
+    if (!grid) return;
+    const target = grid.querySelector(
+      `button[data-day="${formatIsoDate(focusedDay)}"]`
+    );
+    if (!target || target.disabled) return;
+    pendingDayFocusRef.current = false;
+    target.focus();
+  }, [focusedDay, days, monthSlide]);
   const outgoingDays = (0, import_react39.useMemo)(
     () => monthSlide ? getCalendarDays(monthSlide.outgoingMonth) : null,
     [monthSlide]
   );
   const handleDayKeyDown = (event, date) => {
-    let next = null;
+    let deltaDays = 0;
     switch (event.key) {
       case "ArrowLeft":
-        next = new Date(date);
-        next.setDate(next.getDate() - 1);
+        deltaDays = -1;
         break;
       case "ArrowRight":
-        next = new Date(date);
-        next.setDate(next.getDate() + 1);
+        deltaDays = 1;
         break;
       case "ArrowUp":
-        next = new Date(date);
-        next.setDate(next.getDate() - 7);
+        deltaDays = -7;
         break;
       case "ArrowDown":
-        next = new Date(date);
-        next.setDate(next.getDate() + 7);
+        deltaDays = 7;
         break;
       case "Home":
-        next = new Date(date.getFullYear(), date.getMonth(), 1);
-        break;
       case "End":
-        next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-        break;
       case "PageUp":
-        next = addMonths(date, event.shiftKey ? -12 : -1);
-        break;
       case "PageDown":
-        next = addMonths(date, event.shiftKey ? 12 : 1);
         break;
       case "Enter":
       case " ":
@@ -6834,8 +6856,31 @@ function DatePickerCalendar({ className }) {
         return;
     }
     event.preventDefault();
-    if (!next) return;
+    let next;
+    if (event.key === "Home") {
+      next = new Date(date.getFullYear(), date.getMonth(), 1);
+    } else if (event.key === "End") {
+      next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    } else if (event.key === "PageUp") {
+      next = addMonths(date, event.shiftKey ? -12 : -1);
+    } else if (event.key === "PageDown") {
+      next = addMonths(date, event.shiftKey ? 12 : 1);
+    } else {
+      next = new Date(date);
+      next.setDate(next.getDate() + deltaDays);
+      let guard = 0;
+      while (isDateDisabled(next, minDate, maxDate) && guard < 366) {
+        next.setDate(next.getDate() + (deltaDays > 0 ? 1 : -1));
+        guard += 1;
+      }
+    }
     const normalized = startOfDay(next);
+    if (isDateDisabled(normalized, minDate, maxDate)) return;
+    pendingDayFocusRef.current = true;
+    if (mode === "single") {
+      selectDate(normalized, { close: false, switchToTime: false });
+      return;
+    }
     setFocusedDay(normalized);
     if (!isSameMonth(normalized, viewMonth)) {
       setViewMonth(new Date(normalized.getFullYear(), normalized.getMonth(), 1));
@@ -6889,6 +6934,7 @@ function DatePickerCalendar({ className }) {
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
+          ref: dayGridRef,
           className: "aviala-datepicker-calendar__grid",
           role: "grid",
           "aria-labelledby": `${calendarId}-label`,
@@ -6908,11 +6954,13 @@ function DatePickerCalendar({ className }) {
             const isToday = isSameDay(day, today);
             const dayDisabled = isDateDisabled(day, minDate, maxDate);
             const focused = focusedDay ? isSameDay(day, focusedDay) : false;
+            const dayKey = formatIsoDate(day);
             return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
               "button",
               {
                 type: "button",
                 role: "gridcell",
+                "data-day": dayKey,
                 tabIndex: focused || !focusedDay && isToday ? 0 : -1,
                 className: "aviala-datepicker-day aviala-focus-ring",
                 "data-outside": outside ? "true" : void 0,
@@ -6942,7 +6990,7 @@ function DatePickerCalendar({ className }) {
                   isToday ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
-              day.toISOString()
+              dayKey
             );
           })
         },
@@ -7606,21 +7654,27 @@ var ModalContent = (0, import_react43.forwardRef)(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalOverlay, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        DialogPrimitive.Content,
-        {
-          ref,
-          className: cn(modalContentVariants({ size }), className),
-          onOpenAutoFocus,
-          ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aviala-modal-content__surface", children })
-        }
-      )
+    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(modalContentVariants({ size }), className),
+        onOpenAutoFocus,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aviala-modal-content__surface", children })
+      }
+    );
+    if (!portalled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+        overlay,
+        panel
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DialogPrimitive.Portal, { children: [
+      overlay,
+      panel
     ] });
-    if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Portal, { children: content });
   }
 );
 ModalContent.displayName = DialogPrimitive.Content.displayName;
@@ -7637,9 +7691,9 @@ var ModalHeader = (0, import_react43.forwardRef)(
     showIcon ? renderModalIcon(icon) : null,
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aviala-modal__header-main", children }),
     showClose ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      Link,
+      Button,
       {
-        level: "text",
+        type: "button",
         mode: "noBackgroundCustom",
         iconOnly: true,
         "aria-label": closeLabel,