motile-ui 1.1.2 → 1.2.0

package/README.md

@@ -37,7 +37,7 @@
 
 ## ✨ 주요 기능
 
-- 🎨 **16개의 고품질 컴포넌트** - 웹뷰 애플리케이션을 위해 세심하게 제작
+- 🎨 **18개의 고품질 컴포넌트** - 웹뷰 애플리케이션을 위해 세심하게 제작
 - 💪 **TypeScript 우선** - 포괄적인 타입 정의 완벽 지원
 - 🎭 **커스터마이징 가능** - CSS 변수로 쉬운 테마 설정
 - 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
@@ -187,6 +187,8 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (기본값)
 - **Tooltip** - 툴팁
 - **Accordion** - 접을 수 있는 패널
 - **Dock** - 독 스타일 네비게이션 바
+- **NumberFlow** - 숫자 애니메이션 컴포넌트
+- **TimePicker** - 휠 스크롤 방식 타임피커
 
 ---
 
@@ -217,7 +219,7 @@ MIT © [Innopers](https://github.com/Innopers)
 
 ## ✨ Features
 
-- 🎨 **16 High-Quality Components** - Carefully crafted for webview applications
+- 🎨 **18 High-Quality Components** - Carefully crafted for webview applications
 - 💪 **TypeScript First** - Full TypeScript support with comprehensive type definitions
 - 🎭 **Customizable** - Easy theming with CSS variables
 - 📱 **Mobile Optimized** - Touch-friendly interactions and responsive design
@@ -367,6 +369,8 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (default)
 - **Tooltip** - Tooltip
 - **Accordion** - Collapsible panel
 - **Dock** - Dock-style navigation bar
+- **NumberFlow** - Animated number transition component
+- **TimePicker** - Wheel scroll style time picker
 
 ---
 

package/dist/components/Accordion/index.d.ts

@@ -1,2 +1,2 @@
+export type { AccordionContentProps, AccordionHeaderProps, AccordionProps, } from './Accordion';
 export { Accordion } from './Accordion';
-export type { AccordionProps, AccordionHeaderProps, AccordionContentProps, } from './Accordion';

package/dist/components/Badge/Badge.css

@@ -1 +1 @@
-.motile-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--large{padding:6px 16px;font-size:1rem;min-height:32px}.motile-badge--medium{padding:5px 12px;font-size:.875rem;min-height:26px}.motile-badge--small{padding:4px 8px;font-size:.75rem;min-height:24px}.motile-badge--primary{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--secondary{background:color-mix(in srgb,var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6))) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--secondary.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--secondary.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--secondary.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--outlined{background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--outlined.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--outlined.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--outlined.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--dot{background-color:transparent;padding:0;gap:6px;color:inherit}.motile-badge__dot{display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge__text{line-height:1.2}.motile-badge--dot.motile-badge--large .motile-badge__dot{width:12px;height:12px}.motile-badge--dot.motile-badge--medium .motile-badge__dot{width:10px;height:10px}.motile-badge--dot.motile-badge--small .motile-badge__dot{width:8px;height:8px}.motile-badge--shimmer{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}.motile-badge--shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){.motile-badge--shimmer:before{animation:none}}@media (max-width: 768px){.motile-badge:active{filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-badge{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}
+.motile-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--large{padding:6px 16px;font-size:1rem;min-height:32px}.motile-badge--medium{padding:5px 12px;font-size:.875rem;min-height:26px}.motile-badge--small{padding:4px 8px;font-size:.75rem;min-height:24px}.motile-badge--primary{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--secondary{background:color-mix(in srgb,var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) ) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge--secondary.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--secondary.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--secondary.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--outlined{background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge--outlined.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--outlined.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--outlined.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--dot{background-color:transparent;padding:0;gap:6px;color:inherit}.motile-badge__dot{display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge__text{line-height:1.2}.motile-badge--dot.motile-badge--large .motile-badge__dot{width:12px;height:12px}.motile-badge--dot.motile-badge--medium .motile-badge__dot{width:10px;height:10px}.motile-badge--dot.motile-badge--small .motile-badge__dot{width:8px;height:8px}.motile-badge--shimmer{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}.motile-badge--shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){.motile-badge--shimmer:before{animation:none}}@media (max-width: 768px){.motile-badge:active{filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-badge{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}

package/dist/components/Badge/index.d.ts

@@ -1,2 +1,2 @@
-export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';
+export { Badge } from './Badge';

package/dist/components/Button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
 export type { ButtonProps } from './Button';
+export { Button } from './Button';

package/dist/components/Checkbox/index.d.ts

@@ -1,2 +1,2 @@
-export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';

package/dist/components/Dock/index.d.ts

@@ -1,2 +1,2 @@
-export { Dock, DockRoot, DockItem, DockSeparator } from './Dock';
-export type { DockRootProps, DockItemProps, DockSeparatorProps, DockPosition, } from './Dock';
+export type { DockItemProps, DockPosition, DockRootProps, DockSeparatorProps, } from './Dock';
+export { Dock, DockItem, DockRoot, DockSeparator } from './Dock';

package/dist/components/Drawer/Drawer.js

@@ -1,10 +1,10 @@
 import { jsx as u } from "react/jsx-runtime";
 import W, { forwardRef as w, useState as g, useEffect as Y, useRef as _, createContext as G, useContext as J } from "react";
 import { createPortal as Q } from "react-dom";
+import { useClickOutside as X } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as Z } from "../../hooks/useEscapeKey.js";
+import { useScrollLock as k } from "../../hooks/useScrollLock.js";
 import { Slot as M } from "../../utils/Slot.js";
-import { useScrollLock as X } from "../../hooks/useScrollLock.js";
-import { useClickOutside as Z } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as k } from "../../hooks/useEscapeKey.js";
 import './Drawer.css';/* empty css           */
 const $ = G(null), f = () => {
   const r = J($);
@@ -29,7 +29,7 @@ const $ = G(null), f = () => {
     escapeKey: (e == null ? void 0 : e.escapeKey) ?? !1,
     clickOutside: (e == null ? void 0 : e.clickOutside) ?? !1
   };
-  X({
+  k({
     enabled: D,
     allowedSelectors: ["[data-scroll-allowed]", ".motile-drawer__body"]
   });
@@ -54,11 +54,11 @@ const $ = G(null), f = () => {
         i.style.transition = "transform 0.3s ease", i.style.transform = "translateY(0)", N(!0);
       });
     });
-  }, [x]), Z({
+  }, [x]), X({
     refs: [a],
     handler: p,
     enabled: D && S.clickOutside
-  }), k({
+  }), Z({
     handler: p,
     enabled: D && S.escapeKey
   });

package/dist/components/Drawer/index.d.ts

@@ -1,2 +1,2 @@
+export type { CloseOnBackdropOptions, DrawerBodyProps, DrawerCloseProps, DrawerContentProps, DrawerHandleProps, DrawerOverlayProps, DrawerPortalProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, } from './Drawer';
 export { Drawer } from './Drawer';
-export type { CloseOnBackdropOptions, DrawerRootProps, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerHandleProps, DrawerTitleProps, DrawerBodyProps, DrawerCloseProps, } from './Drawer';

package/dist/components/Input/index.d.ts

@@ -1,2 +1,2 @@
-export { Input } from './Input';
 export type { InputProps } from './Input';
+export { Input } from './Input';

package/dist/components/Modal/Modal.d.ts

@@ -148,4 +148,4 @@ export declare const Modal: {
     Footer: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
 };
-export type { ModalVariant, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, };
+export type { ModalBodyProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalRootProps, ModalTitleProps, ModalVariant, };

package/dist/components/Modal/Modal.js

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as L } from "react/jsx-runtime";
 import n, { useRef as k, useState as O, useEffect as P, useId as h, createContext as V, useContext as q } from "react";
 import { createPortal as z } from "react-dom";
-import { Slot as A } from "../../utils/Slot.js";
-import { useClickOutside as D } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as G } from "../../hooks/useEscapeKey.js";
-import { useScrollLock as J } from "../../hooks/useScrollLock.js";
+import { useClickOutside as A } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as D } from "../../hooks/useEscapeKey.js";
+import { useScrollLock as G } from "../../hooks/useScrollLock.js";
+import { Slot as J } from "../../utils/Slot.js";
 import './Modal.css';/* empty css          */
 const v = V(null), m = () => {
   const o = q(v);
@@ -45,16 +45,16 @@ const v = V(null), m = () => {
       E(!0);
     }, []);
     const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, T = typeof e == "boolean" ? e : e.escapeKey ?? !1;
-    J({
+    G({
       enabled: c && !a,
       allowedSelectors: [".motile-modal__content"]
-    }), D({
+    }), A({
       refs: [M],
       handler: () => {
         b && f(!1);
       },
       enabled: c
-    }), G({
+    }), D({
       handler: () => {
         T && f(!1);
       },
@@ -152,7 +152,7 @@ const R = n.forwardRef(
       e == null || e(i), s(!1);
     };
     return o ? /* @__PURE__ */ l(
-      A,
+      J,
       {
         ...d,
         onClick: u,

package/dist/components/Modal/index.d.ts

@@ -1,2 +1,2 @@
+export type { CloseOnBackdropOptions, ModalBodyProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalRootProps, ModalTitleProps, ModalVariant, } from './Modal';
 export { Modal } from './Modal';
-export type { ModalVariant, CloseOnBackdropOptions, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, } from './Modal';

package/dist/components/NumberFlow/NumberFlow.css

@@ -0,0 +1 @@
+.motile-number-flow{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;line-height:1}.motile-number-flow__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.motile-number-flow__value{display:inline-flex;align-items:center}.motile-number-flow__digit{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top}.motile-number-flow__digit-column{display:flex;flex-direction:column;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.motile-number-flow__digit-value{display:flex;align-items:center;justify-content:center;height:1em;line-height:1}.motile-number-flow__separator{display:inline-block;line-height:1}@media (prefers-reduced-motion: reduce){.motile-number-flow__digit-column{transition:none!important}}

package/dist/components/NumberFlow/NumberFlow.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface NumberFlowProps {
+    /**
+     * 표시할 숫자 값
+     */
+    value: number;
+    /**
+     * 로케일 (기본값: 'ko-KR')
+     * @example 'en-US', 'ko-KR', 'ja-JP'
+     */
+    locale?: string;
+    /**
+     * 애니메이션 지속 시간 (ms)
+     * @default 600
+     */
+    duration?: number;
+    /**
+     * 컨테이너 className
+     */
+    className?: string;
+    /**
+     * 인라인 스타일
+     */
+    style?: React.CSSProperties;
+    /**
+     * 마운트 시 애니메이션 적용 여부
+     * @default true
+     */
+    animateOnMount?: boolean;
+}
+export declare const NumberFlow: React.ForwardRefExoticComponent<NumberFlowProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/NumberFlow/NumberFlow.js

@@ -0,0 +1,128 @@
+import { jsx as l, jsxs as M } from "react/jsx-runtime";
+import g, { useRef as y, useMemo as _, useEffect as R, useState as C } from "react";
+import './NumberFlow.css';/* empty css               */
+function O(t, a) {
+  return new Intl.NumberFormat(a).format(t);
+}
+function x(t) {
+  return /^\d$/.test(t);
+}
+const T = [
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9"
+], S = g.memo(
+  ({ value: t, prevValue: a, direction: i, duration: N, index: b, animateOnMount: p }) => {
+    const r = parseInt(t, 10), e = a === null ? p ? 0 : r : parseInt(a, 10), [s, u] = C(e), c = b * 50;
+    R(() => {
+      if (e === r)
+        return;
+      let n;
+      i === "up" ? n = r >= e ? r - e : 10 - e + r : n = e >= r ? e - r : e + 10 - r;
+      const o = setTimeout(() => {
+        u(
+          (f) => i === "up" ? f + n : f - n
+        );
+      }, c + 10);
+      return () => clearTimeout(o);
+    }, [t, e, r, i, c]);
+    const w = {
+      transform: `translateY(${-((s % 30 + 30) % 30) * (100 / 30)}%)`,
+      transition: `transform ${N}ms ease-out`
+    };
+    return /* @__PURE__ */ l("span", { className: "motile-number-flow__digit", children: /* @__PURE__ */ l("span", { className: "motile-number-flow__digit-column", style: w, children: T.map((n, o) => /* @__PURE__ */ l("span", { className: "motile-number-flow__digit-value", children: n }, o)) }) });
+  }
+);
+S.displayName = "NumberFlow.Digit";
+const $ = g.memo(({ value: t }) => /* @__PURE__ */ l("span", { className: "motile-number-flow__separator", children: t }));
+$.displayName = "NumberFlow.Separator";
+const Y = g.forwardRef(
+  ({
+    value: t,
+    locale: a = "ko-KR",
+    duration: i = 600,
+    className: N,
+    style: b,
+    animateOnMount: p = !0
+  }, r) => {
+    const d = y(null), e = y(null), s = _(
+      () => O(t, a),
+      [t, a]
+    ), u = e.current, c = _(() => {
+      if (d.current === null) return "up";
+      const m = d.current;
+      return m < 0 && t < 0 ? Math.abs(t) >= Math.abs(m) ? "up" : "down" : t >= m ? "up" : "down";
+    }, [t]);
+    R(() => {
+      d.current = t, e.current = s;
+    }, [t, s]);
+    const h = _(() => {
+      const m = s.split(""), w = (u == null ? void 0 : u.split("")) || [];
+      let n = 0;
+      return m.map((o, f) => {
+        const I = `${f}-${o}`, D = w[f] || null;
+        if (x(o)) {
+          const F = n;
+          return n++, /* @__PURE__ */ l(
+            S,
+            {
+              value: o,
+              prevValue: x(D || "") ? D : null,
+              direction: c,
+              duration: i,
+              index: F,
+              animateOnMount: p
+            },
+            I
+          );
+        }
+        return /* @__PURE__ */ l($, { value: o }, I);
+      });
+    }, [s, u, c, i, p]);
+    return /* @__PURE__ */ M(
+      "span",
+      {
+        ref: r,
+        className: `motile-number-flow ${N || ""}`,
+        style: b,
+        "aria-label": s,
+        role: "text",
+        children: [
+          /* @__PURE__ */ l("span", { className: "motile-number-flow__sr-only", children: s }),
+          /* @__PURE__ */ l("span", { className: "motile-number-flow__value", "aria-hidden": "true", children: h })
+        ]
+      }
+    );
+  }
+);
+Y.displayName = "NumberFlow";
+export {
+  Y as NumberFlow
+};

package/dist/components/NumberFlow/NumberFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NumberFlow/index.d.ts

@@ -0,0 +1,2 @@
+export type { NumberFlowProps } from './NumberFlow';
+export { NumberFlow } from './NumberFlow';

package/dist/components/Popover/Popover.d.ts

@@ -68,4 +68,4 @@ export declare const Popover: {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;
 };
-export type { PopoverRootProps, PopoverTriggerProps, PopoverContentProps, Placement, Align, PopoverVariant, };
+export type { Align, Placement, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, PopoverVariant, };

package/dist/components/Popover/Popover.js

@@ -1,10 +1,10 @@
 import { jsxs as $, jsx as g } from "react/jsx-runtime";
 import h, { useCallback as R, useId as k, useRef as I, useMemo as N, createContext as j, useContext as E } from "react";
+import { useClickOutside as T } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as A } from "../../hooks/useEscapeKey.js";
+import { FloatingArrow as B } from "../../utils/FloatingArrow.js";
+import { Slot as F } from "../../utils/Slot.js";
 import './Popover.css';/* empty css            */
-import { Slot as T } from "../../utils/Slot.js";
-import { useClickOutside as A } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as B } from "../../hooks/useEscapeKey.js";
-import { FloatingArrow as F } from "../../utils/FloatingArrow.js";
 const S = j(null);
 function C() {
   const t = E(S);
@@ -91,7 +91,7 @@ function V({ children: t, asChild: s = !1 }) {
     e((c) => !c);
   }, [e]);
   return s ? /* @__PURE__ */ g(
-    T,
+    F,
     {
       ref: (c) => {
         l.current = c;
@@ -137,7 +137,7 @@ function q({
     contentRef: w,
     wrapperRef: b
   } = C();
-  if (B({
+  if (A({
     handler: R(
       (p) => {
         u && (n == null || n(p), p.defaultPrevented || r(!1));
@@ -145,7 +145,7 @@ function q({
       [u, n, r]
     ),
     enabled: e
-  }), A({
+  }), T({
     refs: [b],
     handler: R(
       (p) => {
@@ -175,7 +175,7 @@ function q({
       },
       children: [
         c && /* @__PURE__ */ g(
-          F,
+          B,
           {
             className: "motile-popover-arrow",
             variant: a,

package/dist/components/Popover/index.d.ts

@@ -1,2 +1,2 @@
+export type { Align, Placement, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, PopoverVariant, } from './Popover';
 export { Popover } from './Popover';
-export type { PopoverRootProps, PopoverTriggerProps, PopoverContentProps, Placement, Align, PopoverVariant, } from './Popover';

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;
@@ -90,4 +96,4 @@ export declare const Sheet: {
     Body: typeof SheetBody;
     Close: typeof SheetClose;
 };
-export type { SheetRootProps, SheetTriggerProps, SheetPortalProps, SheetOverlayProps, SheetContentProps, SheetHeaderProps, SheetTitleProps, SheetBodyProps, SheetCloseProps, };
+export type { SheetBodyProps, SheetCloseProps, SheetContentProps, SheetHeaderProps, SheetOverlayProps, SheetPortalProps, SheetRootProps, SheetTitleProps, SheetTriggerProps, };