@once-ui-system/core 1.3.14 → 1.4.0

package/dist/components/Cursor.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Flex } from ".";
+export const Cursor = ({ cursor, elementRef }) => {
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+    const [isHovering, setIsHovering] = useState(false);
+    const [isTouchDevice, setIsTouchDevice] = useState(false);
+    // Detect touch device
+    useEffect(() => {
+        const checkTouchDevice = () => {
+            // Check for touch capability
+            const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            // Check for pointer capability (some devices have both mouse and touch)
+            const hasPointer = window.matchMedia('(pointer: fine)').matches;
+            // Consider it a touch device if it has touch but no fine pointer (mouse)
+            setIsTouchDevice(hasTouch && !hasPointer);
+        };
+        checkTouchDevice();
+        // Listen for changes in pointer capability (e.g., when external mouse is connected)
+        const mediaQuery = window.matchMedia('(pointer: fine)');
+        const handlePointerChange = () => checkTouchDevice();
+        mediaQuery.addEventListener('change', handlePointerChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handlePointerChange);
+        };
+    }, []);
+    // Mouse tracking for custom cursor (only on non-touch devices)
+    useEffect(() => {
+        if (!cursor || !elementRef.current || isTouchDevice)
+            return;
+        let animationFrameId;
+        const handleMouseMove = (e) => {
+            // Cancel previous animation frame to prevent multiple updates
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            // Schedule the update for the next animation frame
+            animationFrameId = requestAnimationFrame(() => {
+                setMousePosition({ x: e.clientX, y: e.clientY });
+            });
+        };
+        const handleMouseEnter = () => {
+            setIsHovering(true);
+        };
+        const handleMouseLeave = () => {
+            setIsHovering(false);
+        };
+        const element = elementRef.current;
+        if (element) {
+            element.addEventListener('mouseenter', handleMouseEnter);
+            element.addEventListener('mouseleave', handleMouseLeave);
+            document.addEventListener('mousemove', handleMouseMove);
+        }
+        return () => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            if (element) {
+                element.removeEventListener('mouseenter', handleMouseEnter);
+                element.removeEventListener('mouseleave', handleMouseLeave);
+            }
+            document.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, [cursor, elementRef, isTouchDevice]);
+    // Don't render custom cursor on touch devices
+    if (isTouchDevice || !isHovering)
+        return null;
+    return createPortal(_jsx(Flex, { position: "fixed", pointerEvents: "none", zIndex: 10, style: {
+            left: mousePosition.x,
+            top: mousePosition.y,
+            transform: 'translate(-50%, -50%)',
+            transition: 'none'
+        }, children: cursor }), document.body);
+};
+Cursor.displayName = "Cursor";
+export default Cursor;
+//# sourceMappingURL=Cursor.js.map

package/dist/components/Cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cursor.js","sourceRoot":"","sources":["../../src/components/Cursor.tsx"],"names":[],"mappings":"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"}

package/dist/components/CursorCard.js

@@ -13,7 +13,7 @@ const CursorCard = forwardRef(({ trigger, overlay, placement = "bottom-left", cl
     useImperativeHandle(ref, () => cardRef.current);
     useEffect(() => {
         const checkTouchDevice = () => {
-            return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+            return "ontouchstart" in window;
         };
         setIsTouchDevice(checkTouchDevice());
     }, []);

package/dist/components/CursorCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorCard.js","sourceRoot":"","sources":["../../src/components/CursorCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,QAAQ,EACR,MAAM,EACN,SAAS,EAET,UAAU,EACV,mBAAmB,EACnB,WAAW,GACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAClF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAyB,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,OAAO,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,CAAC;QAClE,CAAC,CAAC;QAEF,gBAAgB,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAa,EAAE,EAAE;QAChB,IAAI,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC;YACjC,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,aAAa,CAAC,CAC5B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAExD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC7D,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,CAAC;IAErC,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,IAAI,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;YACpE,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAChD,eAAe,CAAC,EAAE,GAAG,oBAAoB,CAAC;gBAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;gBACpC,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;gBACtE,IAAI,eAAe,IAAI,eAAe,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;oBAC/D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACG,OAAO,IAAI,CACV,KAAC,IAAI,IACH,GAAG,EAAE,UAAU,EACf,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,IAAI,CAAC,EACzD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,YAEzD,OAAO,GACH,CACR,EACA,UAAU;gBACT,CAAC,aAAa;gBACd,OAAO,QAAQ,KAAK,WAAW;gBAC/B,YAAY,CACV,KAAC,IAAI,IACH,MAAM,EAAE,EAAE,EACV,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,GAAG,EACR,aAAa,EAAC,MAAM,EACpB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,IAAI,EAAE,EAAE,EAChD,KAAK,EAAE;wBACL,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,kBAAkB,aAAa,CAAC,CAAC,MAAM,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,WAAW,aAAa,CAAC,CAAC,MAAM,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI;wBAC1P,GAAG,KAAK;qBACT,KACG,IAAI,YAEP,OAAO,GACH,EACP,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,IAAI,QAAQ,CAAC,IAAI,CAC/D,IACF,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"CursorCard.js","sourceRoot":"","sources":["../../src/components/CursorCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateInput.d.ts

@@ -10,6 +10,8 @@ interface DateInputProps extends Omit<React.ComponentProps<typeof Input>, "onCha
     className?: string;
     style?: React.CSSProperties;
     timePicker?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
 }
 export declare const DateInput: React.FC<DateInputProps>;
 export {};

package/dist/components/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,EAAqC,MAAM,GAAG,CAAC;AAE7D,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAiBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwE9C,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,EAA+B,MAAM,GAAG,CAAC;AAEvD,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB;AAiBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoF9C,CAAC"}

package/dist/components/DateInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Input, DropdownWrapper, Flex, DatePicker } from ".";
+import { Input, DropdownWrapper, DatePicker } from ".";
 const formatDate = (date, timePicker) => {
     const options = {
         year: "numeric",
@@ -15,7 +15,7 @@ const formatDate = (date, timePicker) => {
     };
     return date.toLocaleString("en-US", options);
 };
-export const DateInput = ({ id, label, placeholder, value, onChange, error, minHeight, className, style, timePicker = false, ...rest }) => {
+export const DateInput = ({ id, label, placeholder, value, onChange, error, minHeight, className, style, timePicker = false, minDate, maxDate, ...rest }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState(value ? formatDate(value, timePicker) : "");
     useEffect(() => {
@@ -33,10 +33,11 @@ export const DateInput = ({ id, label, placeholder, value, onChange, error, minH
     const handleInputClick = useCallback(() => {
         setIsOpen(true);
     }, []);
-    const trigger = (_jsx(Input, { style: {
-            textOverflow: "ellipsis",
-        }, id: id, label: label, placeholder: placeholder, value: inputValue, error: error, readOnly: true, onClick: handleInputClick, ...rest }));
-    const dropdown = (_jsx(Flex, { padding: "20", children: _jsx(DatePicker, { value: value, onChange: handleDateChange, timePicker: timePicker }) }));
-    return (_jsx(DropdownWrapper, { fillWidth: true, trigger: trigger, minHeight: minHeight, dropdown: dropdown, isOpen: isOpen, onOpenChange: setIsOpen, className: className, closeAfterClick: !timePicker, style: { ...style } }));
+    const handleInputFocus = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    return (_jsx(DropdownWrapper, { trigger: _jsx(Input, { style: {
+                textOverflow: "ellipsis",
+            }, id: id, label: label, placeholder: placeholder, value: inputValue, error: error, readOnly: true, onFocus: handleInputFocus, ...rest }), dropdown: _jsx(DatePicker, { padding: "20", value: value, onChange: handleDateChange, timePicker: timePicker, minDate: minDate, maxDate: maxDate, autoFocus: true, isOpen: isOpen }, `datepicker-${isOpen ? 'open' : 'closed'}-${value?.getTime() || 0}`), fillWidth: true, minHeight: minHeight, isOpen: isOpen, onOpenChange: setIsOpen, className: className, closeAfterClick: !timePicker, disableTriggerClick: true, style: { ...style }, handleArrowNavigation: false }));
 };
 //# sourceMappingURL=DateInput.js.map

package/dist/components/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker.d.ts

@@ -14,6 +14,7 @@ export interface DatePickerProps extends Omit<React.ComponentProps<typeof Flex>,
         minutes: number;
     };
     size?: "s" | "m" | "l";
+    isNested?: boolean;
     className?: string;
     style?: React.CSSProperties;
     currentMonth?: number;
@@ -24,6 +25,8 @@ export interface DatePickerProps extends Omit<React.ComponentProps<typeof Flex>,
         endDate?: Date;
     };
     onHover?: (date: Date | null) => void;
+    autoFocus?: boolean;
+    isOpen?: boolean;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { DatePicker };

package/dist/components/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,IAAI,EAA2E,MAAM,GAAG,CAAC;AAGlG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,IAAI,CAAC;QACjB,OAAO,CAAC,EAAE,IAAI,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,UAAU,qGA4af,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,IAAI,EAAwI,MAAM,GAAG,CAAC;AAG/J,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,IAAI,CAAC;QACjB,OAAO,CAAC,EAAE,IAAI,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,UAAU,qGA40Bf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/DatePicker.js

@@ -1,18 +1,56 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef, useEffect } from "react";
+import { useState, forwardRef, useEffect, useCallback } from "react";
 import classNames from "classnames";
-import { Flex, Text, Button, Grid, SegmentedControl, IconButton, RevealFx, NumberInput } from ".";
+import { Flex, Text, Button, Grid, SegmentedControl, IconButton, RevealFx, NumberInput, DropdownWrapper, Option, Column, Icon, Row, ArrowNavigation } from ".";
 import styles from "./DatePicker.module.scss";
-const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMonth = true, nextMonth = true, minDate, maxDate, defaultDate, defaultTime, size = "m", className, style, currentMonth: propCurrentMonth, currentYear: propCurrentYear, onMonthChange, range, onHover, ...rest }, ref) => {
+const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMonth = true, nextMonth = true, minDate, maxDate, defaultDate, defaultTime, size = "m", isNested = false, className, style, currentMonth: propCurrentMonth, currentYear: propCurrentYear, onMonthChange, range, onHover, autoFocus = false, isOpen, ...rest }, ref) => {
     const today = new Date();
     const [selectedDate, setSelectedDate] = useState(value);
     const [selectedTime, setSelectedTime] = useState(defaultTime);
     const [isPM, setIsPM] = useState(defaultTime?.hours ? defaultTime.hours >= 12 : false);
     const [isTimeSelector, setIsTimeSelector] = useState(false);
     const [isTransitioning, setIsTransitioning] = useState(true);
+    const [isMonthOpen, setIsMonthOpen] = useState(false);
+    const [isYearOpen, setIsYearOpen] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const [hoveredDate, setHoveredDate] = useState(null);
     const [currentMonth, setCurrentMonth] = useState(value ? value.getMonth() : today.getMonth());
     const [currentYear, setCurrentYear] = useState(value ? value.getFullYear() : today.getFullYear());
+    // Calculate the initial focused index based on the selected date
+    const calculateInitialFocusedIndex = useCallback(() => {
+        if (!selectedDate || isTimeSelector)
+            return 0;
+        // Find the exact button that matches the selected date
+        const container = document.querySelector('[data-role="dropdown-portal"]') ||
+            document.querySelector('[data-dropdown-id]') ||
+            document.activeElement?.closest('[data-role="dropdown-portal"]') ||
+            document.activeElement?.closest('[data-role="dropdown-wrapper"]') ||
+            document.body;
+        if (container) {
+            const enabledButtons = Array.from(container.querySelectorAll('button[data-value]:not([disabled])'));
+            const selectedButtonIndex = enabledButtons.findIndex(button => {
+                const buttonDate = new Date(button.getAttribute('data-value') || '');
+                return buttonDate.getTime() === selectedDate.getTime();
+            });
+            if (selectedButtonIndex !== -1) {
+                return selectedButtonIndex;
+            }
+        }
+        // Fallback to day-based calculation
+        const selectedDay = selectedDate.getDate();
+        const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+        const offset = firstDayOfWeek;
+        const dayIndex = offset + selectedDay - 1;
+        return Math.max(0, dayIndex);
+    }, [selectedDate, isTimeSelector, currentMonth, currentYear]);
+    // Calculate the total number of days to display in the grid
+    const calculateTotalDays = () => {
+        const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+        // Since we're only selecting enabled buttons (current month days),
+        // the total is just the number of days in the current month
+        return daysInMonth;
+    };
     useEffect(() => {
         if (typeof propCurrentMonth === "number") {
             setCurrentMonth(propCurrentMonth);
@@ -21,6 +59,33 @@ const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMo
             setCurrentYear(propCurrentYear);
         }
     }, [propCurrentMonth, propCurrentYear]);
+    // Track if calendar is synced to selected value
+    const [isCalendarSynced, setIsCalendarSynced] = useState(false);
+    // Sync currentMonth/currentYear to value on mount and when value changes
+    useEffect(() => {
+        // Reset calendar sync to ensure proper re-sync
+        setIsCalendarSynced(false);
+        if (value) {
+            setCurrentMonth(value.getMonth());
+            setCurrentYear(value.getFullYear());
+            // Small delay to ensure state updates are processed
+            const timer = setTimeout(() => {
+                setIsCalendarSynced(true);
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setIsCalendarSynced(true);
+        }
+    }, [value]);
+    // Additional sync effect that runs when the component becomes ready
+    useEffect(() => {
+        if (isReady && value && !isCalendarSynced) {
+            setCurrentMonth(value.getMonth());
+            setCurrentYear(value.getFullYear());
+            setIsCalendarSynced(true);
+        }
+    }, [isReady, value, isCalendarSynced]);
     useEffect(() => {
         setSelectedDate(value);
         if (value) {
@@ -29,14 +94,48 @@ const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMo
                 minutes: value.getMinutes(),
             });
             setIsPM(value.getHours() >= 12);
+            // Update current month/year to match the selected date
+            setCurrentMonth(value.getMonth());
+            setCurrentYear(value.getFullYear());
         }
     }, [value]);
     useEffect(() => {
         const timer = setTimeout(() => {
             setIsTransitioning(true);
+            setIsReady(true);
         }, 100);
         return () => clearTimeout(timer);
     }, []);
+    // Effect to ensure proper highlighting when component mounts or selected date changes
+    useEffect(() => {
+        if (selectedDate && !isTimeSelector && isReady) {
+            // Only highlight if the current month/year matches the selected date's month/year
+            if (selectedDate.getMonth() === currentMonth && selectedDate.getFullYear() === currentYear) {
+                // Small delay to ensure the DOM is ready
+                const timer = setTimeout(() => {
+                    const container = document.querySelector('[data-role="dropdown-portal"]') ||
+                        document.querySelector('[data-dropdown-id]') ||
+                        document.activeElement?.closest('[data-role="dropdown-portal"]') ||
+                        document.activeElement?.closest('[data-role="dropdown-wrapper"]') ||
+                        document.body; // Fallback for standalone DatePicker
+                    if (container) {
+                        // Find the selected date button and focus it
+                        const enabledButtons = Array.from(container.querySelectorAll('button[data-value]:not([disabled])'));
+                        // Find the button that matches the selected date
+                        const selectedButton = enabledButtons.find(button => {
+                            const buttonDate = new Date(button.getAttribute('data-value') || '');
+                            return buttonDate.getTime() === selectedDate.getTime();
+                        });
+                        if (selectedButton) {
+                            // Focus the button without scrolling
+                            selectedButton.focus({ preventScroll: true });
+                        }
+                    }
+                }, 50);
+                return () => clearTimeout(timer);
+            }
+        }
+    }, [selectedDate, isTimeSelector, isReady, currentMonth, currentYear, isOpen]);
     const monthNames = [
         "January",
         "February",
@@ -94,6 +193,35 @@ const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMo
             }
         }
     };
+    const handleMonthSelect = (monthIndex) => {
+        setCurrentMonth(monthIndex);
+    };
+    const handleYearSelect = (year) => {
+        setCurrentYear(year);
+    };
+    const generateYearOptions = () => {
+        const currentYearNum = new Date().getFullYear();
+        const minYear = minDate ? minDate.getFullYear() : currentYearNum - 10;
+        const maxYear = maxDate ? maxDate.getFullYear() : currentYearNum + 10;
+        const years = [];
+        for (let i = minYear; i <= maxYear; i++) {
+            years.push(i);
+        }
+        return years;
+    };
+    const isMonthDisabled = (monthIndex, year) => {
+        if (!minDate && !maxDate)
+            return false;
+        const startOfMonth = new Date(year, monthIndex, 1);
+        const endOfMonth = new Date(year, monthIndex + 1, 0); // Last day of month
+        // If the entire month is before the minimum date
+        if (minDate && endOfMonth < minDate)
+            return true;
+        // If the entire month is after the maximum date
+        if (maxDate && startOfMonth > maxDate)
+            return true;
+        return false;
+    };
     const convert24to12 = (hour24) => {
         if (hour24 === 0)
             return 12;
@@ -134,46 +262,175 @@ const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMo
         // Previous month's days
         for (let i = 0; i < firstDay; i++) {
             const prevMonthDay = daysInPrevMonth - firstDay + i + 1;
-            days.push(_jsx(Flex, { paddingY: "2", width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", children: _jsx(Button, { fillWidth: true, weight: "default", variant: "tertiary", size: size, type: "button", disabled: true, children: prevMonthDay }) }, `prev-${currentYear}-${currentMonth}-${i}`));
+            days.push(_jsx(Flex, { width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", children: _jsx(Button, { fillWidth: true, weight: "default", variant: "tertiary", radius: firstDay === 1 ? undefined : i === 0 ? "left" : i === firstDay - 1 ? "right" : "none", size: size, type: "button", disabled: true, children: prevMonthDay }) }, `prev-${currentYear}-${currentMonth}-${i}`));
         }
         // Current month's days
         for (let day = 1; day <= daysInMonth; day++) {
+            // Create date consistently - normalize to midnight in local timezone
             const currentDate = new Date(currentYear, currentMonth, day);
-            const isSelected = (selectedDate?.getDate() === day &&
-                selectedDate?.getMonth() === currentMonth &&
-                selectedDate?.getFullYear() === currentYear) ||
-                (value instanceof Date && value.getTime() === currentDate.getTime()) ||
-                range?.startDate?.getTime() === currentDate.getTime() ||
-                range?.endDate?.getTime() === currentDate.getTime();
+            const normalizedCurrentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
+            const isSelected = selectedDate ? ((selectedDate.getDate() === day &&
+                selectedDate.getMonth() === currentMonth &&
+                selectedDate.getFullYear() === currentYear) ||
+                (value instanceof Date && value.getTime() === normalizedCurrentDate.getTime()) ||
+                range?.startDate?.getTime() === normalizedCurrentDate.getTime() ||
+                range?.endDate?.getTime() === normalizedCurrentDate.getTime()) : false;
+            // Check if this date is being hovered
+            const isHovered = hoveredDate ? (hoveredDate.getDate() === day &&
+                hoveredDate.getMonth() === currentMonth &&
+                hoveredDate.getFullYear() === currentYear) : false;
             const isFirstInRange = range?.startDate && currentDate.getTime() === range.startDate.getTime();
             const isLastInRange = range?.endDate && currentDate.getTime() === range.endDate.getTime();
             // Check if the current date is out of the minDate and maxDate range
             const isDisabled = (minDate && currentDate < minDate) || (maxDate && currentDate > maxDate);
-            days.push(_jsx(Flex, { paddingY: "2", children: _jsx(Flex, { width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", background: isInRange(currentDate) ? "neutral-alpha-weak" : undefined, borderTop: isInRange(currentDate) ? "neutral-alpha-weak" : "transparent", borderBottom: isInRange(currentDate) ? "neutral-alpha-weak" : "transparent", leftRadius: isFirstInRange ? "m" : undefined, rightRadius: isLastInRange ? "m" : undefined, children: _jsx(Button, { fillWidth: true, weight: isSelected ? "strong" : "default", variant: isSelected ? "primary" : "tertiary", size: size, onClick: (e) => {
-                            if (!isDisabled) {
-                                if (timePicker) {
-                                    // Stop propagation to prevent DropdownWrapper from closing
-                                    e.stopPropagation();
-                                }
-                                handleDateSelect(currentDate);
+            // Calculate border radius for disabled days
+            let disabledRadius = undefined;
+            if (isDisabled) {
+                // Find consecutive disabled days
+                let consecutiveDisabledStart = day;
+                let consecutiveDisabledEnd = day;
+                // Look backwards for start of consecutive disabled days
+                while (consecutiveDisabledStart > 1) {
+                    const prevDate = new Date(currentYear, currentMonth, consecutiveDisabledStart - 1);
+                    const isPrevDisabled = (minDate && prevDate < minDate) || (maxDate && prevDate > maxDate);
+                    if (isPrevDisabled) {
+                        consecutiveDisabledStart--;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Look forwards for end of consecutive disabled days
+                while (consecutiveDisabledEnd < daysInMonth) {
+                    const nextDate = new Date(currentYear, currentMonth, consecutiveDisabledEnd + 1);
+                    const isNextDisabled = (minDate && nextDate < minDate) || (maxDate && nextDate > maxDate);
+                    if (isNextDisabled) {
+                        consecutiveDisabledEnd++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                const totalConsecutiveDisabled = consecutiveDisabledEnd - consecutiveDisabledStart + 1;
+                if (totalConsecutiveDisabled === 1) {
+                    disabledRadius = undefined;
+                }
+                else if (day === consecutiveDisabledStart) {
+                    disabledRadius = "left";
+                }
+                else if (day === consecutiveDisabledEnd) {
+                    disabledRadius = "right";
+                }
+                else {
+                    disabledRadius = "none";
+                }
+            }
+            days.push(_jsx(Row, { width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", background: isInRange(currentDate) ? "neutral-alpha-weak" : undefined, borderTop: isInRange(currentDate) ? "neutral-alpha-weak" : "transparent", borderBottom: isInRange(currentDate) ? "neutral-alpha-weak" : "transparent", leftRadius: isFirstInRange ? "m" : undefined, rightRadius: isLastInRange ? "m" : undefined, children: _jsx(Button, { fillWidth: true, weight: isSelected ? "strong" : "default", variant: isSelected ? "primary" : isHovered ? "secondary" : "tertiary", radius: disabledRadius, tabIndex: -1, size: size, "data-value": currentDate.toISOString(), onClick: (e) => {
+                        if (!isDisabled) {
+                            if (timePicker) {
+                                // Stop propagation to prevent DropdownWrapper from closing
+                                e.stopPropagation();
                             }
-                        }, onMouseEnter: () => onHover?.(currentDate), onMouseLeave: () => onHover?.(null), disabled: isDisabled, children: day }) }) }, `day-${currentYear}-${currentMonth}-${day}`));
+                            handleDateSelect(currentDate);
+                        }
+                    }, onMouseEnter: (e) => {
+                        onHover?.(currentDate);
+                        setHoveredDate(currentDate);
+                    }, onMouseLeave: () => {
+                        onHover?.(null);
+                        setHoveredDate(null);
+                    }, disabled: isDisabled, children: day }) }, `day-${currentYear}-${currentMonth}-${day}`));
         }
         const remainingDays = totalGridSpots - days.length;
         for (let i = 1; i <= remainingDays; i++) {
-            days.push(_jsx(Flex, { marginTop: "2", width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", children: _jsx(Button, { fillWidth: true, weight: "default", variant: "tertiary", size: size, type: "button", disabled: true, children: i }) }, `next-${currentYear}-${currentMonth}-${i}`));
+            days.push(_jsx(Row, { marginTop: "2", width: size === "s" ? "32" : size === "m" ? "40" : "48", height: size === "s" ? "32" : size === "m" ? "40" : "48", children: _jsx(Button, { fillWidth: true, weight: "default", variant: "tertiary", radius: remainingDays === 1 ? undefined : i === 1 ? "left" : i === remainingDays ? "right" : "none", size: size, type: "button", disabled: true, children: i }) }, `next-${currentYear}-${currentMonth}-${i}`));
         }
         return days;
     };
-    return (_jsxs(Flex, { ref: ref, className: classNames(styles.calendar, className), style: style, direction: "column", fillWidth: true, horizontal: "center", gap: size, ...rest, children: [_jsx(Flex, { fillWidth: true, center: true, children: isTimeSelector ? (_jsxs(Flex, { horizontal: "center", fillWidth: true, direction: "column", gap: "8", children: [_jsxs(Text, { variant: `label-default-${size}`, onBackground: "neutral-strong", children: [monthNames[currentMonth], " ", currentYear] }), _jsx(Text, { className: "cursor-interactive", variant: "label-default-s", onBackground: "brand-weak", onClick: () => handleTimeToggle(false), children: "Back to calendar" })] })) : (_jsxs(_Fragment, { children: [previousMonth && (_jsx(IconButton, { variant: "tertiary", size: size, icon: "chevronLeft", onClick: (event) => {
+    return (_jsxs(Column, { onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            // Close any open nested dropdowns when clicking on the DatePicker background
+            if (isMonthOpen) {
+                setIsMonthOpen(false);
+            }
+            if (isYearOpen) {
+                setIsYearOpen(false);
+            }
+        }, ref: ref, className: classNames(styles.calendar, className), style: style, fillWidth: true, horizontal: "center", gap: size, ...rest, children: [_jsx(Flex, { fillWidth: true, center: true, children: isTimeSelector ? (_jsxs(Column, { horizontal: "center", fillWidth: true, gap: "8", children: [_jsxs(Text, { variant: `label-default-${size}`, onBackground: "neutral-strong", children: [monthNames[currentMonth], " ", currentYear] }), _jsx(Row, { paddingX: "2", cursor: "interactive", textVariant: "label-default-s", radius: "m", onBackground: "brand-weak", tabIndex: 0, onClick: () => handleTimeToggle(false), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleTimeToggle(false);
+                                }
+                            }, role: "button", "aria-label": "Back to calendar", children: "Back to calendar" })] })) : (_jsxs(_Fragment, { children: [previousMonth && (_jsx(IconButton, { variant: "tertiary", size: size, icon: "chevronLeft", onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 handleMonthChange(-1);
-                            } })), _jsxs(Flex, { fillWidth: true, direction: "column", horizontal: "center", gap: "8", children: [_jsxs(Text, { variant: `body-default-${size}`, onBackground: "neutral-strong", children: [monthNames[currentMonth], " ", currentYear] }), timePicker && selectedTime && (_jsx(Text, { variant: "label-default-s", onBackground: "neutral-weak", children: `${selectedTime.hours.toString().padStart(2, "0")}:${selectedTime.minutes.toString().padStart(2, "0")} ${isPM ? "PM" : "AM"}` }))] }), nextMonth && (_jsx(IconButton, { variant: "tertiary", size: size, icon: "chevronRight", onClick: (event) => {
+                            } })), _jsxs(Column, { fillWidth: true, horizontal: "center", gap: "8", children: [_jsxs(Row, { gap: "4", horizontal: "center", children: [_jsx(DropdownWrapper, { isNested: isNested, placement: "bottom-start", isOpen: isMonthOpen, dropdownId: "month-dropdown", onOpenChange: (open) => {
+                                                setIsMonthOpen(open);
+                                                // Update global tracking for keyboard navigation
+                                                if (open) {
+                                                    // Set this as the last opened dropdown
+                                                    window.lastOpenedDropdown = 'month-dropdown';
+                                                }
+                                                else if (window.lastOpenedDropdown === 'month-dropdown') {
+                                                    window.lastOpenedDropdown = null;
+                                                }
+                                            }, trigger: _jsx(Button, { onClick: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    setIsMonthOpen(true);
+                                                    // Update global tracking
+                                                    window.lastOpenedDropdown = 'month-dropdown';
+                                                }, variant: "secondary", size: "s", children: _jsxs(Row, { vertical: "center", gap: "4", children: [monthNames[currentMonth], _jsx(Icon, { name: "chevronDown", onBackground: "neutral-weak", size: "xs" })] }) }), dropdown: _jsx(Column, { fillWidth: true, gap: "2", padding: "4", onClick: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                }, children: monthNames.map((month, index) => {
+                                                    const monthDisabled = isMonthDisabled(index, currentYear);
+                                                    return (_jsx(Option, { value: index.toString(), disabled: monthDisabled, label: _jsx(Text, { color: monthDisabled ? "neutral-weak" : undefined, children: month }), selected: index === currentMonth, onClick: (value) => {
+                                                            if (!monthDisabled) {
+                                                                handleMonthSelect(index);
+                                                                setIsMonthOpen(false);
+                                                                // Clear global tracking
+                                                                window.lastOpenedDropdown = null;
+                                                            }
+                                                        } }, month));
+                                                }) }), "data-dropdown-id": "month-dropdown" }), _jsx(DropdownWrapper, { navigationLayout: "grid", optionsCount: generateYearOptions().length, columns: generateYearOptions().length < 6 ? 1 : 6, isNested: isNested, isOpen: isYearOpen, dropdownId: "year-dropdown", onOpenChange: (open) => {
+                                                setIsYearOpen(open);
+                                                // Update global tracking for keyboard navigation
+                                                if (open) {
+                                                    // Set this as the last opened dropdown
+                                                    window.lastOpenedDropdown = 'year-dropdown';
+                                                }
+                                                else if (window.lastOpenedDropdown === 'year-dropdown') {
+                                                    window.lastOpenedDropdown = null;
+                                                }
+                                            }, placement: "bottom-start", trigger: _jsx(Button, { variant: "secondary", size: "s", onClick: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    setIsYearOpen(true);
+                                                    // Update global tracking
+                                                    window.lastOpenedDropdown = 'year-dropdown';
+                                                }, children: _jsxs(Row, { vertical: "center", gap: "4", children: [currentYear.toString(), _jsx(Icon, { name: "chevronDown", onBackground: "neutral-weak", size: "xs" })] }) }), dropdown: _jsx(Grid, { columns: generateYearOptions().length < 6 ? "1" : 6, gap: "2", padding: "4", onClick: (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                }, children: generateYearOptions().map((year) => {
+                                                    // Check if all months in this year are disabled
+                                                    const allMonthsDisabled = Array.from({ length: 12 }, (_, i) => i)
+                                                        .every(month => isMonthDisabled(month, year));
+                                                    return (_jsx(Option, { value: year.toString(), disabled: allMonthsDisabled, label: _jsx(Text, { color: allMonthsDisabled ? "neutral-weak" : undefined, children: year }), selected: year === currentYear, onClick: (value) => {
+                                                            if (!allMonthsDisabled) {
+                                                                handleYearSelect(year);
+                                                                setIsYearOpen(false);
+                                                                // Clear global tracking
+                                                                window.lastOpenedDropdown = null;
+                                                            }
+                                                        } }, year));
+                                                }) }), "data-dropdown-id": "year-dropdown" })] }), timePicker && selectedTime && (_jsx(Text, { variant: "label-default-s", onBackground: "neutral-weak", children: `${selectedTime.hours.toString().padStart(2, "0")}:${selectedTime.minutes.toString().padStart(2, "0")} ${isPM ? "PM" : "AM"}` }))] }), nextMonth && (_jsx(IconButton, { variant: "tertiary", size: size, icon: "chevronRight", onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 handleMonthChange(1);
-                            } }))] })) }), _jsx(RevealFx, { fillWidth: true, horizontal: "center", vertical: "center", trigger: isTransitioning, speed: "fast", children: isTimeSelector ? (_jsxs(Flex, { maxWidth: 24, horizontal: "center", vertical: "center", direction: "column", padding: "32", gap: "32", children: [_jsx(SegmentedControl, { buttons: [
+                            } }))] })) }), _jsx(RevealFx, { fillWidth: true, center: true, trigger: isTransitioning, speed: 250, children: isTimeSelector ? (_jsxs(Column, { maxWidth: 24, center: true, padding: "32", gap: "32", children: [_jsx(SegmentedControl, { buttons: [
                                 {
                                     value: "AM",
                                     label: "AM",
@@ -190,7 +447,24 @@ const DatePicker = forwardRef(({ value, onChange, timePicker = false, previousMo
                                         if (value >= 0 && value <= 59) {
                                             handleTimeChange(selectedTime?.hours ?? 0, value);
                                         }
-                                    }, "aria-label": "Minutes" })] })] })) : (_jsxs(Grid, { fitWidth: true, columns: "7", children: [dayNames.map((day) => (_jsx(Text, { marginBottom: "16", variant: "label-default-m", onBackground: "neutral-medium", align: "center", children: day }, day))), renderCalendarGrid()] })) }, isTimeSelector ? "time" : "date")] }));
+                                    }, "aria-label": "Minutes" })] })] })) : (isMonthOpen || isYearOpen ? (_jsxs(Grid, { fitWidth: true, columns: "7", children: [dayNames.map((day) => (_jsx(Text, { marginBottom: "16", variant: "label-default-m", onBackground: "neutral-medium", align: "center", children: day }, day))), renderCalendarGrid()] })) : (isCalendarSynced && (_jsx(ArrowNavigation, { layout: "grid", columns: 7, itemCount: calculateTotalDays(), initialFocusedIndex: isReady ? calculateInitialFocusedIndex() : 0, wrap: true, itemSelector: 'button[data-value]:not([disabled])', role: "grid", "aria-label": "Calendar", disableHighlighting: true, autoFocus: autoFocus, onSelect: (index) => {
+                        // Find the actual button element at this index and click it
+                        // Try multiple selectors for different scenarios (dropdown vs standalone)
+                        const container = document.querySelector('[data-role="dropdown-portal"]') ||
+                            document.querySelector('[data-dropdown-id]') ||
+                            document.activeElement?.closest('[data-role="dropdown-portal"]') ||
+                            document.activeElement?.closest('[data-role="dropdown-wrapper"]') ||
+                            document.body; // Fallback for standalone DatePicker
+                        if (container) {
+                            const buttons = Array.from(container.querySelectorAll('button[data-value]:not([disabled])'));
+                            if (buttons[index]) {
+                                buttons[index].click();
+                            }
+                        }
+                    }, onFocusChange: (index) => {
+                        // Let React handle highlighting through props only
+                        // No DOM manipulation needed
+                    }, children: _jsxs(Grid, { fitWidth: true, columns: "7", children: [dayNames.map((day) => (_jsx(Text, { marginBottom: "16", variant: "label-default-m", onBackground: "neutral-medium", align: "center", children: day }, day))), renderCalendarGrid()] }) }, `calendar-${currentYear}-${currentMonth}-${selectedDate?.getTime() || 0}`)))) }, isTimeSelector ? "time" : "date")] }));
 });
 DatePicker.displayName = "DatePicker";
 export { DatePicker };