@x-plat/design-system 0.10.0 → 0.12.0

package/dist/components/DatePicker/index.js

@@ -1,5 +1,5 @@
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React6 from "react";
+import React7 from "react";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -167,11 +167,16 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx5(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx5(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx5("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx5(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx5(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -270,8 +275,12 @@ var Input = React.forwardRef((props, ref) => {
     suffix,
     disabled,
     validations,
+    label,
+    required,
     ...inputProps
   } = props;
+  const autoId = React.useId();
+  const fieldId = inputProps.id ?? autoId;
   const localValue = formatValue(type, value);
   const handleChange = (e) => {
     let val = e.target.value;
@@ -287,7 +296,7 @@ var Input = React.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ jsx6(Field, { label, required, htmlFor: fieldId, children: /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -298,6 +307,7 @@ var Input = React.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -310,7 +320,7 @@ var Input = React.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx6(FieldMessage_default, { validations })
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
 var Input_default = Input;
@@ -407,16 +417,96 @@ var PasswordInput = React2.forwardRef(
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Modal/Modal.tsx
-import React3 from "react";
+import React4 from "react";
 import { createPortal } from "react-dom";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React3 from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  React3.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
+// src/components/Modal/Modal.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React3.useState(false);
-  const [visible, setVisible] = React3.useState(false);
-  const [settled, setSettled] = React3.useState(false);
-  React3.useEffect(() => {
+  const [mounted, setMounted] = React4.useState(false);
+  const [visible, setVisible] = React4.useState(false);
+  const [settled, setSettled] = React4.useState(false);
+  const boxRef = React4.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(boxRef, isOpen && mounted, { trap: true });
+  React4.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -443,6 +533,7 @@ var Modal = (props) => {
         children: /* @__PURE__ */ jsx10(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",
@@ -1370,15 +1461,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 React5 from "react";
+import React6 from "react";
 
 // src/components/Calendar/useCalendar.ts
-import React4 from "react";
+import React5 from "react";
 var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
-  const [year, setYear] = React4.useState(initialYear ?? today.getFullYear());
-  const [month, setMonth] = React4.useState(initialMonth ?? today.getMonth());
-  const days = React4.useMemo(() => {
+  const [year, setYear] = React5.useState(initialYear ?? today.getFullYear());
+  const [month, setMonth] = React5.useState(initialMonth ?? today.getMonth());
+  const days = React5.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const startDayOfWeek = firstDay.getDay();
@@ -1421,7 +1512,7 @@ var useCalendar = (initialYear, initialMonth) => {
     }
     return result;
   }, [year, month]);
-  const goToPrevMonth = React4.useCallback(() => {
+  const goToPrevMonth = React5.useCallback(() => {
     setMonth((prev) => {
       if (prev === 0) {
         setYear((y) => y - 1);
@@ -1430,7 +1521,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev - 1;
     });
   }, []);
-  const goToNextMonth = React4.useCallback(() => {
+  const goToNextMonth = React5.useCallback(() => {
     setMonth((prev) => {
       if (prev === 11) {
         setYear((y) => y + 1);
@@ -1439,7 +1530,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev + 1;
     });
   }, []);
-  const goToToday = React4.useCallback(() => {
+  const goToToday = React5.useCallback(() => {
     setYear(today.getFullYear());
     setMonth(today.getMonth());
   }, []);
@@ -1474,7 +1565,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 = React5.memo(
+var DayCell = React6.memo(
   ({
     day,
     disabled,
@@ -1526,26 +1617,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React5.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React5.useState(
+  const [pickerMode, setPickerMode] = React6.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React6.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React5.useMemo(
+  const minTime = React6.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React5.useMemo(
+  const maxTime = React6.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React5.useMemo(() => {
+  const highlightSet = React6.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React5.useCallback(
+  const handleSelect = React6.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -1674,8 +1765,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [tempDate, setTempDate] = React6.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [tempDate, setTempDate] = React7.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -1724,23 +1815,27 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React10 from "react";
+import React11 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/components/Tab/Tab.tsx
-import React8 from "react";
+import React9 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React7 from "react";
+import React8 from "react";
 import { jsx as jsx302 } from "react/jsx-runtime";
-var TabItem = React7.forwardRef((props, ref) => {
+var TabItem = React8.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ jsx302(
-    "div",
+    "button",
     {
       ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
       className: clsx_default("tab-item", isActive ? "active" : null),
       onClick,
       children: title
@@ -1755,44 +1850,64 @@ 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] = React8.useState({
+  const [underlineStyle, setUnderlineStyle] = React9.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React8.useRef([]);
+  const itemRefs = React9.useRef([]);
+  const handleKeyDown = (e) => {
+    const last = tabs.length - 1;
+    let next = null;
+    if (e.key === "ArrowRight") next = activeIndex >= last ? 0 : activeIndex + 1;
+    else if (e.key === "ArrowLeft") next = activeIndex <= 0 ? last : activeIndex - 1;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    if (next === null) return;
+    e.preventDefault();
+    onChange(tabs[next], next);
+    itemRefs.current[next]?.focus();
+  };
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx303(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    shape === "toggle" && /* @__PURE__ */ jsx303(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs193(
+    "div",
+    {
+      className: clsx_default("lib-xplat-tab", `type-${shape}`, size),
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      children: [
+        tabs.map((tab, idx) => /* @__PURE__ */ jsx303(
+          TabItem_default,
+          {
+            onClick: () => handleChangeActiveTab(tab, idx),
+            isActive: activeIndex === idx,
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            title: tab.title
+          },
+          `${tab.value}_${idx}`
+        )),
+        shape === "toggle" && /* @__PURE__ */ jsx303(
+          "div",
+          {
+            className: "tab-toggle-underline",
+            style: {
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "Tab";
 var Tab_default = Tab;
@@ -1808,7 +1923,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = React9.useState("start");
+  const [activeTab, setActiveTab] = React10.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -1893,7 +2008,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] = React10.useState(false);
+  const [isOpen, setIsOpen] = React11.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -1902,7 +2017,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs195("div", { className: "lib-xplat-popup-datepicker", children: [
-    React10.cloneElement(component, { onClick: handleClick }),
+    React11.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,9 +35,84 @@ __export(Drawer_exports, {
 module.exports = __toCommonJS(Drawer_exports);
 
 // src/components/Drawer/Drawer.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  import_react.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -59,9 +134,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_react.default.useState(false);
-  const [visible, setVisible] = import_react.default.useState(false);
-  import_react.default.useEffect(() => {
+  const [mounted, setMounted] = import_react2.default.useState(false);
+  const [visible, setVisible] = import_react2.default.useState(false);
+  const panelRef = import_react2.default.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(panelRef, isOpen && mounted, { trap: true });
+  import_react2.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -83,6 +161,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
+            ref: panelRef,
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",

package/dist/components/Drawer/index.js

@@ -1,7 +1,82 @@
 // src/components/Drawer/Drawer.tsx
-import React from "react";
+import React2 from "react";
 import { createPortal } from "react-dom";
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  React.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  React.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -23,9 +98,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] = React.useState(false);
-  const [visible, setVisible] = React.useState(false);
-  React.useEffect(() => {
+  const [mounted, setMounted] = React2.useState(false);
+  const [visible, setVisible] = React2.useState(false);
+  const panelRef = React2.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(panelRef, isOpen && mounted, { trap: true });
+  React2.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -47,6 +125,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
+            ref: panelRef,
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",