motile-ui 1.1.1 → 1.1.3

package/dist/components/Button/Button.css

@@ -1 +1 @@
-.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:52px;min-height:52px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:14px;height:48px;min-height:48px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}
+.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:54px;min-height:54px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:15px;height:52px;min-height:52px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}

package/dist/components/Sheet/Sheet.d.ts

@@ -26,8 +26,14 @@ interface SheetRootProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 히스토리 기반 뒤로가기 닫기 기능 활성화 여부
+     * URL로 Sheet를 제어하는 경우 false로 설정하세요.
+     * @default true
+     */
+    enableHistoryClose?: boolean;
 }
-declare function SheetRoot({ children, position, closeOnBackdrop, maxWidth, zIndex, open: controlledOpen, defaultOpen, onOpenChange, }: SheetRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetRoot({ children, position, closeOnBackdrop, maxWidth, zIndex, open: controlledOpen, defaultOpen, onOpenChange, enableHistoryClose, }: SheetRootProps): import("react/jsx-runtime").JSX.Element;
 interface SheetTriggerProps {
     children: React.ReactElement;
     asChild?: boolean;

package/dist/components/Sheet/Sheet.js

@@ -1,155 +1,156 @@
-import { jsx as u, jsxs as $ } from "react/jsx-runtime";
-import { useCallback as b, useState as S, useEffect as v, useId as A, useRef as x, useMemo as F, createContext as N, useContext as T } from "react";
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+import { useCallback as k, useState as S, useEffect as b, useId as A, useRef as g, useMemo as F, createContext as N, useContext as T } from "react";
 import { createPortal as w } from "react-dom";
-import { Slot as g } from "../../utils/Slot.js";
+import { Slot as O } from "../../utils/Slot.js";
 import { useScrollLock as K } from "../../hooks/useScrollLock.js";
-import { useClickOutside as H } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as V } from "../../hooks/useEscapeKey.js";
-import { useHistoryClose as q } from "../../hooks/useHistoryClose.js";
+import { useEscapeKey as H } from "../../hooks/useEscapeKey.js";
+import { useHistoryClose as P } from "../../hooks/useHistoryClose.js";
 import './Sheet.css';/* empty css          */
 const I = N(null);
-function k() {
+function v() {
   const e = T(I);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
 }
-function z({
+function V({
   value: e,
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [i, a] = S(n), s = t ? e : i, l = b(
-    (r) => {
-      const f = typeof r == "function" ? r(s) : r;
-      t || a(f), o == null || o(f);
+  const t = e !== void 0, [i, l] = S(n), s = t ? e : i, r = k(
+    (a) => {
+      const f = typeof a == "function" ? a(s) : a;
+      t || l(f), o == null || o(f);
     },
     [t, o, s]
   );
-  return [s, l];
+  return [s, r];
 }
-function B({
+function q({
   children: e,
   position: n = "right",
   closeOnBackdrop: o = !0,
   maxWidth: t = "600px",
   zIndex: i = 1e3,
-  open: a,
+  open: l,
   defaultOpen: s = !1,
-  onOpenChange: l
+  onOpenChange: r,
+  enableHistoryClose: a = !0
 }) {
-  const r = A().replace(/:/g, ""), f = x(null), h = x(null), [d, c] = z({
-    value: a,
+  const f = A().replace(/:/g, ""), h = g(null), m = g(null), [c, p] = V({
+    value: l,
     defaultValue: s,
-    onChange: l
-  }), { isClosingFromHistory: p, navigateAndClose: y } = q({
-    isOpen: d,
-    onClose: () => c(!1)
-  }), m = F(
+    onChange: r
+  }), { isClosingFromHistory: y, navigateAndClose: u } = P({
+    isOpen: c,
+    onClose: () => p(!1),
+    enabled: a
+  }), _ = F(
     () => ({
-      open: d,
-      setOpen: c,
+      open: c,
+      setOpen: p,
       position: n,
       closeOnBackdrop: o,
       maxWidth: t,
       zIndex: i,
-      onOpenChange: l,
-      triggerId: `${r}-trigger`,
-      contentId: `${r}-content`,
-      overlayRef: f,
-      sheetRef: h,
-      isClosingFromHistory: p,
-      navigateAndClose: y
+      onOpenChange: r,
+      triggerId: `${f}-trigger`,
+      contentId: `${f}-content`,
+      overlayRef: h,
+      sheetRef: m,
+      isClosingFromHistory: y,
+      navigateAndClose: u
     }),
     [
-      d,
       c,
+      p,
       n,
       o,
       t,
       i,
-      l,
       r,
       f,
       h,
-      p,
-      y
+      m,
+      y,
+      u
     ]
   );
-  return /* @__PURE__ */ u(I.Provider, { value: m, children: e });
+  return /* @__PURE__ */ d(I.Provider, { value: _, children: e });
 }
-function P({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: i, contentId: a } = k(), s = b(() => {
-    t((l) => !l);
+function z({ children: e, asChild: n = !1 }) {
+  const { open: o, setOpen: t, triggerId: i, contentId: l } = v(), s = k(() => {
+    t((r) => !r);
   }, [t]);
-  return n ? /* @__PURE__ */ u(
-    g,
+  return n ? /* @__PURE__ */ d(
+    O,
     {
       id: i,
       "aria-expanded": o,
-      "aria-controls": a,
+      "aria-controls": l,
       onClick: s,
       children: e
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ d(
     "button",
     {
       id: i,
       type: "button",
       "aria-expanded": o,
-      "aria-controls": a,
+      "aria-controls": l,
       onClick: s,
       children: e
     }
   );
 }
-function j({ children: e, container: n }) {
-  const { open: o } = k(), [t, i] = S(!1);
-  return v(() => {
+function B({ children: e, container: n }) {
+  const { open: o } = v(), [t, i] = S(!1);
+  return b(() => {
     i(!0);
   }, []), !t || !o ? null : w(e, n || document.body);
 }
-function E({ className: e = "", style: n }) {
-  const { open: o, setOpen: t, position: i, closeOnBackdrop: a, zIndex: s, overlayRef: l } = k(), [r, f] = S(!1), [h, d] = S(!1), c = typeof a == "boolean" ? { clickOutside: a } : {
-    escapeKey: a.escapeKey ?? !1,
-    clickOutside: a.clickOutside ?? !1
+function j({ className: e = "", style: n }) {
+  const { open: o, setOpen: t, position: i, closeOnBackdrop: l, zIndex: s, overlayRef: r } = v(), [a, f] = S(!1), [h, m] = S(!1), c = typeof l == "boolean" ? { clickOutside: l } : {
+    escapeKey: l.escapeKey ?? !1,
+    clickOutside: l.clickOutside ?? !1
   };
-  v(() => {
+  b(() => {
     if (o)
       f(!0);
-    else if (r) {
-      d(!1);
-      const m = setTimeout(() => {
+    else if (a) {
+      m(!1);
+      const u = setTimeout(() => {
         f(!1);
       }, 300);
-      return () => clearTimeout(m);
+      return () => clearTimeout(u);
     }
-  }, [o, r]), v(() => {
-    if (!r || !o) return;
-    const m = requestAnimationFrame(() => {
+  }, [o, a]), b(() => {
+    if (!a || !o) return;
+    const u = requestAnimationFrame(() => {
       const _ = requestAnimationFrame(() => {
-        d(!0);
+        m(!0);
       });
       return () => cancelAnimationFrame(_);
     });
-    return () => cancelAnimationFrame(m);
-  }, [r, o]);
-  const p = b(
-    (m) => {
-      c.clickOutside && m.target === l.current && t(!1);
+    return () => cancelAnimationFrame(u);
+  }, [a, o]);
+  const p = k(
+    (u) => {
+      c.clickOutside && u.target === r.current && (u.stopPropagation(), t(!1));
     },
-    [c.clickOutside, t, l]
+    [c.clickOutside, t, r]
   );
-  if (!r)
+  if (!a)
     return null;
   const y = {
     zIndex: s,
     ...n
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: l,
+      ref: r,
       className: `motile-sheet__overlay ${h ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
       style: y,
       onClick: p,
@@ -157,18 +158,18 @@ function E({ className: e = "", style: n }) {
     }
   );
 }
-function L({ children: e, className: n = "", style: o }) {
+function E({ children: e, className: n = "", style: o }) {
   const {
     open: t,
     setOpen: i,
-    position: a,
+    position: l,
     closeOnBackdrop: s,
-    maxWidth: l,
-    zIndex: r,
+    maxWidth: r,
+    zIndex: a,
     contentId: f,
     sheetRef: h,
-    isClosingFromHistory: d
-  } = k(), [c, p] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
+    isClosingFromHistory: m
+  } = v(), [c, p] = S(!1), [y, u] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
@@ -176,44 +177,40 @@ function L({ children: e, className: n = "", style: o }) {
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), H({
-    refs: [h],
-    handler: () => i(!1),
-    enabled: t && _.clickOutside
-  }), V({
     handler: () => i(!1),
     enabled: t && _.escapeKey
-  }), v(() => {
+  }), b(() => {
     if (t)
       p(!0);
     else if (c) {
-      m(!1);
+      u(!1);
       const C = setTimeout(() => {
         p(!1);
-      }, d ? 0 : 300);
+      }, m ? 0 : 300);
       return () => clearTimeout(C);
     }
-  }, [t, c, d]), v(() => {
-    if (!c || !t || d) return;
-    const O = requestAnimationFrame(() => {
+  }, [t, c, m]), b(() => {
+    if (!c || !t || m) return;
+    const x = requestAnimationFrame(() => {
       const C = requestAnimationFrame(() => {
-        m(!0);
+        u(!0);
       });
       return () => cancelAnimationFrame(C);
     });
-    return () => cancelAnimationFrame(O);
-  }, [c, t, d]), !c)
+    return () => cancelAnimationFrame(x);
+  }, [c, t, m]), !c)
     return null;
   const R = {
-    ...l !== "600px" && { "--sheet-max-width": l },
-    zIndex: r + 1,
+    ...r !== "600px" && { "--sheet-max-width": r },
+    zIndex: a + 1,
     ...o
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: h,
       id: f,
-      className: `motile-sheet__content motile-sheet__content--${a} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
+      className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
       style: R,
       role: "dialog",
       "aria-modal": "true",
@@ -221,28 +218,28 @@ function L({ children: e, className: n = "", style: o }) {
     }
   );
 }
+function L({ children: e, className: n = "" }) {
+  return /* @__PURE__ */ d("div", { className: `motile-sheet__header ${n}`, children: e });
+}
 function D({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("div", { className: `motile-sheet__header ${n}`, children: e });
+  return /* @__PURE__ */ d("h2", { id: "sheet-title", className: `motile-sheet__title ${n}`, children: e });
 }
 function M({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("h2", { id: "sheet-title", className: `motile-sheet__title ${n}`, children: e });
-}
-function W({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("div", { className: `motile-sheet__body ${n}`, children: e });
+  return /* @__PURE__ */ d("div", { className: `motile-sheet__body ${n}`, children: e });
 }
-function G({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = k(), t = b(() => {
+function W({ children: e, asChild: n = !1 }) {
+  const { setOpen: o } = v(), t = k(() => {
     o(!1);
   }, [o]);
-  return n ? /* @__PURE__ */ u(
-    g,
+  return n ? /* @__PURE__ */ d(
+    O,
     {
       className: "motile-sheet__close",
       onClick: t,
       "aria-label": "닫기",
       children: e
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ d(
     "button",
     {
       className: "motile-sheet__close",
@@ -261,30 +258,30 @@ function G({ children: e, asChild: n = !1 }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ u("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ u("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            /* @__PURE__ */ d("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ d("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
           ]
         }
       )
     }
   );
 }
-function ne() {
-  const { navigateAndClose: e } = k();
+function te() {
+  const { navigateAndClose: e } = v();
   return e;
 }
-const se = {
-  Root: B,
-  Trigger: P,
-  Portal: j,
-  Overlay: E,
-  Content: L,
-  Header: D,
-  Title: M,
-  Body: W,
-  Close: G
+const oe = {
+  Root: q,
+  Trigger: z,
+  Portal: B,
+  Overlay: j,
+  Content: E,
+  Header: L,
+  Title: D,
+  Body: M,
+  Close: W
 };
 export {
-  se as Sheet,
-  ne as useSheetNavigation
+  oe as Sheet,
+  te as useSheetNavigation
 };

package/dist/hooks/useHistoryClose.d.ts

@@ -28,6 +28,12 @@ export interface UseHistoryCloseProps {
      * 모달/Sheet 닫기 핸들러
      */
     onClose: () => void;
+    /**
+     * 히스토리 기반 닫기 기능 활성화 여부
+     * URL로 Sheet를 제어하는 경우 false로 설정
+     * @default true
+     */
+    enabled?: boolean;
 }
 export interface UseHistoryCloseReturn {
     /**
@@ -51,4 +57,4 @@ export interface UseHistoryCloseReturn {
      */
     navigateAndClose: (navigationFn: () => void) => void;
 }
-export declare function useHistoryClose({ onClose, isOpen, }: UseHistoryCloseProps): UseHistoryCloseReturn;
+export declare function useHistoryClose({ onClose, isOpen, enabled, }: UseHistoryCloseProps): UseHistoryCloseReturn;

package/dist/hooks/useHistoryClose.js

@@ -1,42 +1,47 @@
-import { useRef as r, useState as w, useEffect as l } from "react";
-function p({
-  onClose: o,
-  isOpen: s
+import { useRef as i, useState as h, useEffect as c } from "react";
+function m({
+  onClose: s,
+  isOpen: n,
+  enabled: r = !0
 }) {
-  const i = r(o), n = r(!1), [a, c] = w(!1), u = r(0), e = r(null);
-  return l(() => {
-    i.current = o;
-  }, [o]), l(() => {
-    if (s && !n.current) {
-      const t = (f) => {
-        c(!0), i.current();
-      };
-      return u.current = window.history.length, window.history.pushState({ modal: !0 }, ""), n.current = !0, window.addEventListener("popstate", t), () => {
-        window.removeEventListener("popstate", t);
-      };
+  const u = i(s), o = i(!1), [a, l] = h(!1), f = i(0), e = i(null);
+  return c(() => {
+    u.current = s;
+  }, [s]), c(() => {
+    if (!r || !n) return;
+    const t = (d) => {
+      l(!0), u.current();
+    };
+    return o.current || (f.current = window.history.length, window.history.pushState({ modal: !0 }, ""), o.current = !0), window.addEventListener("popstate", t), () => {
+      window.removeEventListener("popstate", t);
+    };
+  }, [n, r]), c(() => {
+    if (!r || n || !o.current) return;
+    let t = null;
+    if (!a) {
+      const d = f.current + 1;
+      if (window.history.length !== d)
+        e.current = null;
+      else if (e.current) {
+        const w = e.current;
+        e.current = null, t = () => {
+          window.removeEventListener("popstate", t), t = null, setTimeout(() => {
+            w();
+          }, 0);
+        }, window.addEventListener("popstate", t), window.history.back();
+      } else
+        window.history.back();
     }
-    if (!s && n.current) {
-      if (!a) {
-        const t = u.current + 1;
-        if (window.history.length !== t)
-          e.current = null;
-        else if (e.current) {
-          const d = () => {
-            window.removeEventListener("popstate", d), e.current && (e.current(), e.current = null);
-          };
-          window.addEventListener("popstate", d), window.history.back();
-        } else
-          window.history.back();
-      }
-      n.current = !1, c(!1);
-    }
-  }, [s, a]), {
+    return o.current = !1, l(!1), () => {
+      t && window.removeEventListener("popstate", t);
+    };
+  }, [n, a, r]), {
     isClosingFromHistory: a,
     navigateAndClose: (t) => {
-      e.current = t, i.current();
+      e.current = t, u.current();
     }
   };
 }
 export {
-  p as useHistoryClose
+  m as useHistoryClose
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",