motile-ui 1.2.0 → 1.2.2

package/dist/components/Sheet/Sheet.js

@@ -1,14 +1,14 @@
 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 { useCallback as k, useState as v, useEffect as b, useId as A, useRef as I, useMemo as F, createContext as N, useContext as T } from "react";
 import { createPortal as w } from "react-dom";
 import { useEscapeKey as K } from "../../hooks/useEscapeKey.js";
 import { useHistoryClose as H } from "../../hooks/useHistoryClose.js";
 import { useScrollLock as P } from "../../hooks/useScrollLock.js";
 import { Slot as O } from "../../utils/Slot.js";
 import './Sheet.css';/* empty css          */
-const I = N(null);
-function v() {
-  const e = T(I);
+const R = N(null);
+function _() {
+  const e = T(R);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
@@ -18,7 +18,7 @@ function V({
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [i, l] = S(n), s = t ? e : i, r = k(
+  const t = e !== void 0, [i, l] = v(n), s = t ? e : i, r = k(
     (a) => {
       const f = typeof a == "function" ? a(s) : a;
       t || l(f), o == null || o(f);
@@ -38,18 +38,18 @@ function q({
   onOpenChange: r,
   enableHistoryClose: a = !0
 }) {
-  const f = A().replace(/:/g, ""), h = g(null), m = g(null), [c, p] = V({
+  const f = A().replace(/:/g, ""), p = I(null), m = I(null), [c, h] = V({
     value: l,
     defaultValue: s,
     onChange: r
-  }), { isClosingFromHistory: y, navigateAndClose: u } = H({
+  }), { isClosingFromHistory: y, close: u, navigateAndClose: S } = H({
     isOpen: c,
-    onClose: () => p(!1),
+    onClose: () => h(!1),
     enabled: a
-  }), _ = F(
+  }), C = F(
     () => ({
       open: c,
-      setOpen: p,
+      setOpen: h,
       position: n,
       closeOnBackdrop: o,
       maxWidth: t,
@@ -57,30 +57,32 @@ function q({
       onOpenChange: r,
       triggerId: `${f}-trigger`,
       contentId: `${f}-content`,
-      overlayRef: h,
+      overlayRef: p,
       sheetRef: m,
       isClosingFromHistory: y,
-      navigateAndClose: u
+      close: u,
+      navigateAndClose: S
     }),
     [
       c,
-      p,
+      h,
       n,
       o,
       t,
       i,
       r,
       f,
-      h,
+      p,
       m,
       y,
-      u
+      u,
+      S
     ]
   );
-  return /* @__PURE__ */ d(I.Provider, { value: _, children: e });
+  return /* @__PURE__ */ d(R.Provider, { value: C, children: e });
 }
 function z({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: i, contentId: l } = v(), s = k(() => {
+  const { open: o, setOpen: t, triggerId: i, contentId: l } = _(), s = k(() => {
     t((r) => !r);
   }, [t]);
   return n ? /* @__PURE__ */ d(
@@ -105,13 +107,13 @@ function z({ children: e, asChild: n = !1 }) {
   );
 }
 function B({ children: e, container: n }) {
-  const { open: o } = v(), [t, i] = S(!1);
+  const { open: o } = _(), [t, i] = v(!1);
   return b(() => {
     i(!0);
   }, []), !t || !o ? null : w(e, n || document.body);
 }
 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 } : {
+  const { open: o, close: t, position: i, closeOnBackdrop: l, zIndex: s, overlayRef: r } = _(), [a, f] = v(!1), [p, m] = v(!1), c = typeof l == "boolean" ? { clickOutside: l } : {
     escapeKey: l.escapeKey ?? !1,
     clickOutside: l.clickOutside ?? !1
   };
@@ -128,16 +130,16 @@ function j({ className: e = "", style: n }) {
   }, [o, a]), b(() => {
     if (!a || !o) return;
     const u = requestAnimationFrame(() => {
-      const _ = requestAnimationFrame(() => {
+      const S = requestAnimationFrame(() => {
         m(!0);
       });
-      return () => cancelAnimationFrame(_);
+      return () => cancelAnimationFrame(S);
     });
     return () => cancelAnimationFrame(u);
   }, [a, o]);
-  const p = k(
+  const h = k(
     (u) => {
-      c.clickOutside && u.target === r.current && (u.stopPropagation(), t(!1));
+      c.clickOutside && u.target === r.current && (u.stopPropagation(), t());
     },
     [c.clickOutside, t, r]
   );
@@ -151,9 +153,9 @@ function j({ className: e = "", style: n }) {
     "div",
     {
       ref: r,
-      className: `motile-sheet__overlay ${h ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
+      className: `motile-sheet__overlay ${p ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
       style: y,
-      onClick: p,
+      onClick: h,
       role: "presentation"
     }
   );
@@ -161,15 +163,15 @@ function j({ className: e = "", style: n }) {
 function E({ children: e, className: n = "", style: o }) {
   const {
     open: t,
-    setOpen: i,
+    close: i,
     position: l,
     closeOnBackdrop: s,
     maxWidth: r,
     zIndex: a,
     contentId: f,
-    sheetRef: h,
+    sheetRef: p,
     isClosingFromHistory: m
-  } = v(), [c, p] = S(!1), [y, u] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s } : {
+  } = _(), [c, h] = v(!1), [y, u] = v(!1), S = typeof s == "boolean" ? { escapeKey: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
@@ -177,30 +179,30 @@ function E({ children: e, className: n = "", style: o }) {
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), K({
-    handler: () => i(!1),
-    enabled: t && _.escapeKey
+    handler: i,
+    enabled: t && S.escapeKey
   }), b(() => {
     if (t)
-      p(!0);
+      h(!0);
     else if (c) {
       u(!1);
-      const C = setTimeout(() => {
-        p(!1);
+      const x = setTimeout(() => {
+        h(!1);
       }, m ? 0 : 300);
-      return () => clearTimeout(C);
+      return () => clearTimeout(x);
     }
   }, [t, c, m]), b(() => {
     if (!c || !t || m) return;
-    const x = requestAnimationFrame(() => {
-      const C = requestAnimationFrame(() => {
+    const g = requestAnimationFrame(() => {
+      const x = requestAnimationFrame(() => {
         u(!0);
       });
-      return () => cancelAnimationFrame(C);
+      return () => cancelAnimationFrame(x);
     });
-    return () => cancelAnimationFrame(x);
+    return () => cancelAnimationFrame(g);
   }, [c, t, m]), !c)
     return null;
-  const R = {
+  const C = {
     ...r !== "600px" && { "--sheet-max-width": r },
     zIndex: a + 1,
     ...o
@@ -208,10 +210,10 @@ function E({ children: e, className: n = "", style: o }) {
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: h,
+      ref: p,
       id: f,
       className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
-      style: R,
+      style: C,
       role: "dialog",
       "aria-modal": "true",
       children: e
@@ -228,8 +230,8 @@ function M({ children: e, className: n = "" }) {
   return /* @__PURE__ */ d("div", { className: `motile-sheet__body ${n}`, children: e });
 }
 function W({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = v(), t = k(() => {
-    o(!1);
+  const { close: o } = _(), t = k(() => {
+    o();
   }, [o]);
   return n ? /* @__PURE__ */ d(
     O,
@@ -267,7 +269,7 @@ function W({ children: e, asChild: n = !1 }) {
   );
 }
 function te() {
-  const { navigateAndClose: e } = v();
+  const { navigateAndClose: e } = _();
   return e;
 }
 const oe = {

package/dist/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-.motile-timepicker{display:flex;position:relative;user-select:none;-webkit-user-select:none;overflow:hidden}.motile-timepicker--disabled{pointer-events:none}.motile-timepicker--full-width{width:100%}.motile-timepicker__column{flex:1;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;cursor:grab}@media (hover: none) and (pointer: coarse){.motile-timepicker__column{scroll-snap-type:y mandatory;cursor:default}}.motile-timepicker__column::-webkit-scrollbar{display:none}.motile-timepicker__item{display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-variant-numeric:tabular-nums;color:#d1d5db}.motile-timepicker__item--selected{color:inherit}.motile-timepicker__spacer{flex-shrink:0;pointer-events:none}.motile-timepicker__highlight{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;background-color:#0000000d;border-radius:8px}@media (prefers-reduced-motion: reduce){.motile-timepicker__column{scroll-behavior:auto}}
+.motile-timepicker{display:flex;position:relative;user-select:none;-webkit-user-select:none;overflow:hidden;width:200px;height:120px}.motile-timepicker--disabled{pointer-events:none}.motile-timepicker__column{flex:1;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;cursor:grab}@media (hover: none) and (pointer: coarse){.motile-timepicker__column{scroll-snap-type:y mandatory;cursor:default}}.motile-timepicker__column::-webkit-scrollbar{display:none}.motile-timepicker__item{display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-variant-numeric:tabular-nums;color:#d1d5db}.motile-timepicker__item--selected{color:inherit}.motile-timepicker__spacer{flex-shrink:0;pointer-events:none}.motile-timepicker__highlight{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;background-color:#0000000d;border-radius:8px;z-index:0}.motile-timepicker__column{position:relative;z-index:1}@media (prefers-reduced-motion: reduce){.motile-timepicker__column{scroll-behavior:auto}}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -15,7 +15,6 @@ export interface TimePickerRootProps extends Omit<React.HTMLAttributes<HTMLDivEl
     minuteStep?: MinuteStep;
     disabled?: boolean;
     itemHeight?: number;
-    fullWidth?: boolean;
     children: React.ReactNode;
 }
 export declare const TimePickerRoot: React.ForwardRefExoticComponent<TimePickerRootProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -11,188 +11,187 @@ const W = ee(null), q = () => {
 }, z = U(
   ({
     value: t,
-    defaultValue: w,
+    defaultValue: R,
     onChange: v,
-    format: l = "12",
-    minuteStep: a = 5,
+    format: s = "12",
+    minuteStep: l = 5,
     disabled: p = !1,
-    itemHeight: n = 40,
-    fullWidth: g = !1,
-    children: $,
+    itemHeight: o = 40,
+    children: g,
     className: D,
     style: I,
-    ...m
-  }, M) => {
-    const [P, E] = Z(() => t || w || {
-      hour: l === "12" ? 12 : 0,
+    ...$
+  }, a) => {
+    const [x, w] = Z(() => t || R || {
+      hour: s === "12" ? 12 : 0,
       minute: 0,
-      period: l === "12" ? "AM" : void 0
-    }), k = t !== void 0, b = k ? t : P, L = O(() => l === "12" ? Array.from({ length: 12 }, (x, u) => u + 1) : Array.from({ length: 24 }, (x, u) => u), [l]), _ = O(() => {
-      const x = 60 / a;
-      return Array.from({ length: x }, (u, s) => s * a);
-    }, [a]), V = O(() => ["AM", "PM"], []), A = T(
-      (x, u) => {
-        const s = { ...b };
-        x === "hour" ? s.hour = u : x === "minute" ? s.minute = u : s.period = u, k || E(s), v == null || v(s);
+      period: s === "12" ? "AM" : void 0
+    }), M = t !== void 0, k = M ? t : x, E = O(() => s === "12" ? Array.from({ length: 12 }, (n, h) => h + 1) : Array.from({ length: 24 }, (n, h) => h), [s]), L = O(() => {
+      const n = 60 / l;
+      return Array.from({ length: n }, (h, u) => u * l);
+    }, [l]), b = O(() => ["AM", "PM"], []), V = T(
+      (n, h) => {
+        const u = { ...k };
+        n === "hour" ? u.hour = h : n === "minute" ? u.minute = h : u.period = h, M || w(u), v == null || v(u);
       },
-      [b, k, v]
-    ), o = {
-      value: b,
-      format: l,
-      minuteStep: a,
+      [k, M, v]
+    ), A = {
+      value: k,
+      format: s,
+      minuteStep: l,
       disabled: p,
-      itemHeight: n,
-      updateValue: A,
-      hourOptions: L,
-      minuteOptions: _,
-      periodOptions: V
-    }, c = {
-      "--timepicker-item-height": `${n}px`,
+      itemHeight: o,
+      updateValue: V,
+      hourOptions: E,
+      minuteOptions: L,
+      periodOptions: b
+    }, i = {
+      "--timepicker-item-height": `${o}px`,
       ...I
     };
-    return /* @__PURE__ */ S(W.Provider, { value: o, children: /* @__PURE__ */ S(
+    return /* @__PURE__ */ S(W.Provider, { value: A, children: /* @__PURE__ */ S(
       "div",
       {
-        ref: M,
-        className: `motile-timepicker ${p ? "motile-timepicker--disabled" : ""} ${g ? "motile-timepicker--full-width" : ""} ${D || ""}`,
-        style: c,
+        ref: a,
+        className: `motile-timepicker ${p ? "motile-timepicker--disabled" : ""} ${D || ""}`,
+        style: i,
         "aria-disabled": p,
         role: "group",
         "aria-label": "시간 선택",
-        ...m,
-        children: $
+        ...$,
+        children: g
       }
     ) });
   }
 );
 z.displayName = "TimePicker.Root";
-const B = U(({ type: t, className: w, ...v }, l) => {
+const B = U(({ type: t, className: R, ...v }, s) => {
   const {
-    value: a,
+    value: l,
     disabled: p,
-    itemHeight: n,
+    itemHeight: o,
     updateValue: g,
-    hourOptions: $,
-    minuteOptions: D,
-    periodOptions: I
-  } = q(), m = f(null), M = f(null), P = f(!1), E = f(!1), k = f(0), b = f(null), L = f(!0), _ = f(!1), V = f(0), A = f(0), o = O(() => {
+    hourOptions: D,
+    minuteOptions: I,
+    periodOptions: $
+  } = q(), a = f(null), x = f(null), w = f(!1), M = f(!1), k = f(0), E = f(null), L = f(!0), b = f(!1), V = f(0), A = f(0), i = O(() => {
     switch (t) {
       case "hour":
-        return $;
-      case "minute":
         return D;
-      case "period":
+      case "minute":
         return I;
+      case "period":
+        return $;
       default:
         return [];
     }
-  }, [t, $, D, I]), c = O(() => {
+  }, [t, D, I, $]), n = O(() => {
     switch (t) {
       case "hour":
-        return a.hour;
+        return l.hour;
       case "minute":
-        return a.minute;
+        return l.minute;
       case "period":
-        return a.period;
+        return l.period;
       default:
         return;
     }
-  }, [t, a]), x = T(
+  }, [t, l]), h = T(
     (e) => t === "period" ? e : e.toString().padStart(2, "0"),
     [t]
   ), u = T(
     (e, r = !0) => {
-      const i = m.current;
-      if (!i || e === void 0) return;
-      const d = o.indexOf(e);
-      if (d === -1) return;
-      const R = d * n;
-      i.scrollTo({
-        top: R,
+      const c = a.current;
+      if (!c || e === void 0) return;
+      const m = i.indexOf(e);
+      if (m === -1) return;
+      const _ = m * o;
+      c.scrollTo({
+        top: _,
         behavior: r ? "smooth" : "auto"
       });
     },
-    [o, n]
-  ), s = T(() => typeof window < "u" && window.matchMedia("(hover: none) and (pointer: coarse)").matches, []), Y = T(
+    [i, o]
+  ), P = T(() => typeof window < "u" && window.matchMedia("(hover: none) and (pointer: coarse)").matches, []), Y = T(
     (e) => {
-      if (s()) return;
+      if (P()) return;
       e.preventDefault();
-      const r = m.current;
-      r && (k.current += e.deltaY, b.current && clearTimeout(b.current), E.current = !0, b.current = setTimeout(() => {
-        const i = k.current, d = 20, R = 80;
-        let h = 0;
-        if (Math.abs(i) >= d && (h = Math.sign(i) * Math.max(1, Math.round(Math.abs(i) / R))), h !== 0) {
-          const H = o.indexOf(c), j = Math.max(
+      const r = a.current;
+      r && (k.current += e.deltaY, E.current && clearTimeout(E.current), M.current = !0, E.current = setTimeout(() => {
+        const c = k.current, m = 20, _ = 80;
+        let d = 0;
+        if (Math.abs(c) >= m && (d = Math.sign(c) * Math.max(1, Math.round(Math.abs(c) / _))), d !== 0) {
+          const H = i.indexOf(n), j = Math.max(
             0,
-            Math.min(H + h, o.length - 1)
+            Math.min(H + d, i.length - 1)
           );
           if (j !== H) {
-            const K = o[j], Q = j * n;
+            const K = i[j], Q = j * o;
             r.scrollTo({ top: Q, behavior: "smooth" }), g(t, K);
           }
         }
         k.current = 0, setTimeout(() => {
-          E.current = !1;
+          M.current = !1;
         }, 150);
       }, 50));
     },
-    [o, n, c, g, t, s]
+    [i, o, n, g, t, P]
   ), G = T(
     (e) => {
-      if (s() || p) return;
-      const r = m.current;
-      r && (_.current = !0, V.current = e.clientY, A.current = r.scrollTop, r.style.cursor = "grabbing", e.preventDefault());
+      if (P() || p) return;
+      const r = a.current;
+      r && (b.current = !0, V.current = e.clientY, A.current = r.scrollTop, r.style.cursor = "grabbing", e.preventDefault());
     },
-    [s, p]
+    [P, p]
   ), y = T((e) => {
-    if (!_.current) return;
-    const r = m.current;
+    if (!b.current) return;
+    const r = a.current;
     if (!r) return;
-    const i = V.current - e.clientY;
-    r.scrollTop = A.current + i;
+    const c = V.current - e.clientY;
+    r.scrollTop = A.current + c;
   }, []), C = T(() => {
-    if (!_.current) return;
-    _.current = !1;
-    const e = m.current;
+    if (!b.current) return;
+    b.current = !1;
+    const e = a.current;
     if (!e) return;
     e.style.cursor = "grab";
-    const r = e.scrollTop, i = Math.round(r / n), d = Math.max(0, Math.min(i, o.length - 1)), R = d * n;
-    e.scrollTo({ top: R, behavior: "smooth" });
-    const h = o[d];
-    h !== void 0 && h !== c && g(t, h);
-  }, [o, n, c, g, t]), J = T(() => {
-    if (E.current || _.current) return;
-    M.current && clearTimeout(M.current);
-    const e = s() ? 50 : 100;
-    M.current = setTimeout(() => {
-      const r = m.current;
+    const r = e.scrollTop, c = Math.round(r / o), m = Math.max(0, Math.min(c, i.length - 1)), _ = m * o;
+    e.scrollTo({ top: _, behavior: "smooth" });
+    const d = i[m];
+    d !== void 0 && d !== n && g(t, d);
+  }, [i, o, n, g, t]), J = T(() => {
+    if (M.current || b.current) return;
+    x.current && clearTimeout(x.current);
+    const e = P() ? 50 : 100;
+    x.current = setTimeout(() => {
+      const r = a.current;
       if (!r) return;
-      if (P.current) {
-        P.current = !1;
+      if (w.current) {
+        w.current = !1;
         return;
       }
-      const i = r.scrollTop, d = Math.round(i / n), R = Math.max(0, Math.min(d, o.length - 1)), h = o[R];
-      h !== void 0 && h !== c && g(t, h);
+      const c = r.scrollTop, m = Math.round(c / o), _ = Math.max(0, Math.min(m, i.length - 1)), d = i[_];
+      d !== void 0 && d !== n && g(t, d);
     }, e);
-  }, [o, n, c, g, t, s]);
+  }, [i, o, n, g, t, P]);
   return N(() => {
     if (!L.current) return;
     L.current = !1;
     const e = setTimeout(() => {
-      u(c, !1);
+      u(n, !1);
     }, 0);
     return () => clearTimeout(e);
-  }, [u, c]), N(() => {
-    const e = m.current;
-    if (!e || c === void 0) return;
-    const r = o.indexOf(c);
+  }, [u, n]), N(() => {
+    const e = a.current;
+    if (!e || n === void 0) return;
+    const r = i.indexOf(n);
     if (r === -1) return;
-    const i = r * n, d = e.scrollTop;
-    Math.abs(d - i) > 1 && (P.current = !0, u(c, !0), setTimeout(() => {
-      P.current = !1;
+    const c = r * o, m = e.scrollTop;
+    Math.abs(m - c) > 1 && (w.current = !0, u(n, !0), setTimeout(() => {
+      w.current = !1;
     }, 200));
-  }, [c, u, o, n]), N(() => {
-    const e = m.current;
+  }, [n, u, i, o]), N(() => {
+    const e = a.current;
     if (e)
       return e.addEventListener("wheel", Y, { passive: !1 }), () => {
         e.removeEventListener("wheel", Y);
@@ -200,14 +199,14 @@ const B = U(({ type: t, className: w, ...v }, l) => {
   }, [Y]), N(() => (document.addEventListener("mousemove", y), document.addEventListener("mouseup", C), () => {
     document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", C);
   }), [y, C]), N(() => () => {
-    M.current !== null && clearTimeout(M.current);
+    x.current !== null && clearTimeout(x.current);
   }, []), /* @__PURE__ */ X(
     "div",
     {
       ref: (e) => {
-        typeof l == "function" ? l(e) : l && (l.current = e), m.current = e;
+        typeof s == "function" ? s(e) : s && (s.current = e), a.current = e;
       },
-      className: `motile-timepicker__column ${w || ""}`,
+      className: `motile-timepicker__column ${R || ""}`,
       onScroll: J,
       onMouseDown: G,
       role: "listbox",
@@ -219,21 +218,21 @@ const B = U(({ type: t, className: w, ...v }, l) => {
           "div",
           {
             className: "motile-timepicker__spacer",
-            style: { height: n },
+            style: { height: o },
             "aria-hidden": "true"
           }
         ),
-        o.map((e, r) => {
-          const i = e === c;
+        i.map((e, r) => {
+          const c = e === n;
           return /* @__PURE__ */ S(
             "div",
             {
-              className: `motile-timepicker__item ${i ? "motile-timepicker__item--selected" : ""} ${p ? "motile-timepicker__item--disabled" : ""}`,
-              style: { height: n },
+              className: `motile-timepicker__item ${c ? "motile-timepicker__item--selected" : ""} ${p ? "motile-timepicker__item--disabled" : ""}`,
+              style: { height: o },
               role: "option",
-              "aria-selected": i,
+              "aria-selected": c,
               "data-value": e,
-              children: x(e)
+              children: h(e)
             },
             r
           );
@@ -242,7 +241,7 @@ const B = U(({ type: t, className: w, ...v }, l) => {
           "div",
           {
             className: "motile-timepicker__spacer",
-            style: { height: n },
+            style: { height: o },
             "aria-hidden": "true"
           }
         )
@@ -251,15 +250,15 @@ const B = U(({ type: t, className: w, ...v }, l) => {
   );
 });
 B.displayName = "TimePicker.Column";
-const F = U(({ className: t, style: w, ...v }, l) => {
-  const { itemHeight: a } = q(), p = {
-    height: a,
-    ...w
+const F = U(({ className: t, style: R, ...v }, s) => {
+  const { itemHeight: l } = q(), p = {
+    height: l,
+    ...R
   };
   return /* @__PURE__ */ S(
     "div",
     {
-      ref: l,
+      ref: s,
       className: `motile-timepicker__highlight ${t || ""}`,
       style: p,
       "aria-hidden": "true",

package/dist/hooks/useHistoryClose.d.ts

@@ -40,6 +40,25 @@ export interface UseHistoryCloseReturn {
      * 히스토리 기반 닫기 여부
      */
     isClosingFromHistory: boolean;
+    /**
+     * Sheet/Modal을 닫는 함수
+     * 히스토리 기반 닫기가 활성화된 경우 history.back()을 통해 닫아
+     * 더미 히스토리를 확실하게 제거합니다.
+     *
+     * @description
+     * - enableHistoryClose=true: history.back() → popstate → onClose
+     * - enableHistoryClose=false: 직접 onClose() 호출
+     *
+     * Sheet.Close, 닫기 버튼 등에서 사용하세요.
+     *
+     * @example
+     * ```tsx
+     * const { close } = useHistoryClose({ isOpen, onClose });
+     *
+     * <button onClick={close}>닫기</button>
+     * ```
+     */
+    close: () => void;
     /**
      * Sheet을 닫으면서 페이지 네비게이션을 수행하는 함수
      * 히스토리를 깔끔하게 유지하면서 네비게이션을 처리합니다.

package/dist/hooks/useHistoryClose.js

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

package/package.json

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