@x-plat/design-system 0.14.14 → 0.14.16

package/dist/components/DatePicker/index.cjs

@@ -38,7 +38,7 @@ __export(DatePicker_exports, {
 module.exports = __toCommonJS(DatePicker_exports);
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -456,11 +456,16 @@ var PasswordInput = import_react2.default.forwardRef(
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Modal/Modal.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+var import_react4 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
 var import_react3 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -474,7 +479,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -488,8 +493,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = import_react3.default.useRef(null);
-  import_react3.default.useEffect(() => {
+  const restoreRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -507,7 +512,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -539,13 +544,13 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const [settled, setSettled] = import_react4.default.useState(false);
-  const boxRef = import_react4.default.useRef(null);
+  const [mounted, setMounted] = import_react5.default.useState(false);
+  const [visible, setVisible] = import_react5.default.useState(false);
+  const [settled, setSettled] = import_react5.default.useState(false);
+  const boxRef = import_react5.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -1500,15 +1505,15 @@ var import_jsx_runtime298 = require("react/jsx-runtime");
 var import_jsx_runtime299 = require("react/jsx-runtime");
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/components/Calendar/useCalendar.ts
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
-  const [year, setYear] = import_react5.default.useState(initialYear ?? today.getFullYear());
-  const [month, setMonth] = import_react5.default.useState(initialMonth ?? today.getMonth());
-  const days = import_react5.default.useMemo(() => {
+  const [year, setYear] = import_react6.default.useState(initialYear ?? today.getFullYear());
+  const [month, setMonth] = import_react6.default.useState(initialMonth ?? today.getMonth());
+  const days = import_react6.default.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const startDayOfWeek = firstDay.getDay();
@@ -1551,7 +1556,7 @@ var useCalendar = (initialYear, initialMonth) => {
     }
     return result;
   }, [year, month]);
-  const goToPrevMonth = import_react5.default.useCallback(() => {
+  const goToPrevMonth = import_react6.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 0) {
         setYear((y) => y - 1);
@@ -1560,7 +1565,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev - 1;
     });
   }, []);
-  const goToNextMonth = import_react5.default.useCallback(() => {
+  const goToNextMonth = import_react6.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 11) {
         setYear((y) => y + 1);
@@ -1569,7 +1574,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev + 1;
     });
   }, []);
-  const goToToday = import_react5.default.useCallback(() => {
+  const goToToday = import_react6.default.useCallback(() => {
     setYear(today.getFullYear());
     setMonth(today.getMonth());
   }, []);
@@ -1604,7 +1609,7 @@ var MONTH_LABELS = {
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
-var DayCell = import_react6.default.memo(
+var DayCell = import_react7.default.memo(
   ({
     day,
     disabled,
@@ -1653,33 +1658,33 @@ var SingleDatePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = import_react6.default.useId();
+  const labelId = import_react7.default.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react6.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react6.default.useState(
+  const [pickerMode, setPickerMode] = import_react7.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react7.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react6.default.useMemo(
+  const minTime = import_react7.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react6.default.useMemo(
+  const maxTime = import_react7.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react6.default.useMemo(() => {
+  const highlightSet = import_react7.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react6.default.useCallback(
+  const handleSelect = import_react7.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -1822,8 +1827,8 @@ var InputDatePicker = (props) => {
     required,
     validations
   } = props;
-  const [isOpen, setIsOpen] = import_react7.default.useState(false);
-  const [tempDate, setTempDate] = import_react7.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react8.default.useState(false);
+  const [tempDate, setTempDate] = import_react8.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -1875,18 +1880,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var TabItem = import_react8.default.forwardRef((props, ref) => {
+var TabItem = import_react9.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
     "button",
@@ -1910,11 +1915,11 @@ var import_jsx_runtime303 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = import_react9.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react10.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react9.default.useRef([]);
+  const itemRefs = import_react10.default.useRef([]);
   const handleKeyDown = (e) => {
     const last = tabs.length - 1;
     let next = null;
@@ -1930,7 +1935,7 @@ var Tab = (props) => {
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react9.default.useEffect(() => {
+  import_react10.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -1986,8 +1991,8 @@ var RangePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = import_react10.default.useId();
-  const [activeTab, setActiveTab] = import_react10.default.useState("start");
+  const labelId = import_react11.default.useId();
+  const [activeTab, setActiveTab] = import_react11.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -2081,7 +2086,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime305 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react11.default.useState(false);
+  const [isOpen, setIsOpen] = import_react12.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -2090,7 +2095,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react11.default.cloneElement(component, { onClick: handleClick }),
+    import_react12.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(

package/dist/components/DatePicker/index.js

@@ -1,5 +1,5 @@
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React7 from "react";
+import React8 from "react";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -417,11 +417,16 @@ var PasswordInput = React2.forwardRef(
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Modal/Modal.tsx
-import React4 from "react";
+import React5 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+import React4 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
 import React3 from "react";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -435,7 +440,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -449,8 +454,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const restoreRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -468,7 +473,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -500,13 +505,13 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React4.useState(false);
-  const [visible, setVisible] = React4.useState(false);
-  const [settled, setSettled] = React4.useState(false);
-  const boxRef = React4.useRef(null);
+  const [mounted, setMounted] = React5.useState(false);
+  const [visible, setVisible] = React5.useState(false);
+  const [settled, setSettled] = React5.useState(false);
+  const boxRef = React5.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -1461,15 +1466,15 @@ import { jsx as jsx298, jsxs as jsxs189 } from "react/jsx-runtime";
 import { jsx as jsx299, jsxs as jsxs190 } from "react/jsx-runtime";
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/components/Calendar/useCalendar.ts
-import React5 from "react";
+import React6 from "react";
 var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
-  const [year, setYear] = React5.useState(initialYear ?? today.getFullYear());
-  const [month, setMonth] = React5.useState(initialMonth ?? today.getMonth());
-  const days = React5.useMemo(() => {
+  const [year, setYear] = React6.useState(initialYear ?? today.getFullYear());
+  const [month, setMonth] = React6.useState(initialMonth ?? today.getMonth());
+  const days = React6.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const startDayOfWeek = firstDay.getDay();
@@ -1512,7 +1517,7 @@ var useCalendar = (initialYear, initialMonth) => {
     }
     return result;
   }, [year, month]);
-  const goToPrevMonth = React5.useCallback(() => {
+  const goToPrevMonth = React6.useCallback(() => {
     setMonth((prev) => {
       if (prev === 0) {
         setYear((y) => y - 1);
@@ -1521,7 +1526,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev - 1;
     });
   }, []);
-  const goToNextMonth = React5.useCallback(() => {
+  const goToNextMonth = React6.useCallback(() => {
     setMonth((prev) => {
       if (prev === 11) {
         setYear((y) => y + 1);
@@ -1530,7 +1535,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev + 1;
     });
   }, []);
-  const goToToday = React5.useCallback(() => {
+  const goToToday = React6.useCallback(() => {
     setYear(today.getFullYear());
     setMonth(today.getMonth());
   }, []);
@@ -1565,7 +1570,7 @@ var MONTH_LABELS = {
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import { Fragment as Fragment2, jsx as jsx300, jsxs as jsxs191 } from "react/jsx-runtime";
-var DayCell = React6.memo(
+var DayCell = React7.memo(
   ({
     day,
     disabled,
@@ -1614,33 +1619,33 @@ var SingleDatePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = React6.useId();
+  const labelId = React7.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React6.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React6.useState(
+  const [pickerMode, setPickerMode] = React7.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React7.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React6.useMemo(
+  const minTime = React7.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React6.useMemo(
+  const maxTime = React7.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React6.useMemo(() => {
+  const highlightSet = React7.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React6.useCallback(
+  const handleSelect = React7.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -1783,8 +1788,8 @@ var InputDatePicker = (props) => {
     required,
     validations
   } = props;
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [tempDate, setTempDate] = React7.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [tempDate, setTempDate] = React8.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -1836,18 +1841,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React11 from "react";
+import React12 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React10 from "react";
+import React11 from "react";
 
 // src/components/Tab/Tab.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React8 from "react";
+import React9 from "react";
 import { jsx as jsx302 } from "react/jsx-runtime";
-var TabItem = React8.forwardRef((props, ref) => {
+var TabItem = React9.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ jsx302(
     "button",
@@ -1871,11 +1876,11 @@ import { jsx as jsx303, jsxs as jsxs193 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = React9.useState({
+  const [underlineStyle, setUnderlineStyle] = React10.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React9.useRef([]);
+  const itemRefs = React10.useRef([]);
   const handleKeyDown = (e) => {
     const last = tabs.length - 1;
     let next = null;
@@ -1891,7 +1896,7 @@ var Tab = (props) => {
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -1947,8 +1952,8 @@ var RangePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = React10.useId();
-  const [activeTab, setActiveTab] = React10.useState("start");
+  const labelId = React11.useId();
+  const [activeTab, setActiveTab] = React11.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -2042,7 +2047,7 @@ var RangePicker_default = RangePicker;
 import { jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React11.useState(false);
+  const [isOpen, setIsOpen] = React12.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -2051,7 +2056,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs195("div", { className: "lib-xplat-popup-datepicker", children: [
-    React11.cloneElement(component, { onClick: handleClick }),
+    React12.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ jsx305(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs195("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx305(

package/dist/components/Drawer/index.cjs

@@ -35,11 +35,16 @@ __export(Drawer_exports, {
 module.exports = __toCommonJS(Drawer_exports);
 
 // src/components/Drawer/Drawer.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+var import_react2 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -53,7 +58,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -67,8 +72,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = import_react.default.useRef(null);
-  import_react.default.useEffect(() => {
+  const restoreRef = import_react2.default.useRef(null);
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -86,7 +91,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -134,12 +139,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = import_react2.default.useState(false);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const panelRef = import_react2.default.useRef(null);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const panelRef = import_react3.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(panelRef, isOpen && mounted, { trap: true });
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);

package/dist/components/Drawer/index.js

@@ -1,9 +1,14 @@
 // src/components/Drawer/Drawer.tsx
-import React2 from "react";
+import React3 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+import React2 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -17,7 +22,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -31,8 +36,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = React.useRef(null);
-  React.useEffect(() => {
+  const restoreRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -50,7 +55,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -98,12 +103,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = React2.useState(false);
-  const [visible, setVisible] = React2.useState(false);
-  const panelRef = React2.useRef(null);
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const panelRef = React3.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(panelRef, isOpen && mounted, { trap: true });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);