motile-ui 1.1.3 → 1.2.1

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

@@ -96,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, };

package/dist/components/Sheet/Sheet.js

@@ -1,10 +1,10 @@
 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 { 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 { useScrollLock as K } from "../../hooks/useScrollLock.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 v() {
@@ -42,7 +42,7 @@ function q({
     value: l,
     defaultValue: s,
     onChange: r
-  }), { isClosingFromHistory: y, navigateAndClose: u } = P({
+  }), { isClosingFromHistory: y, navigateAndClose: u } = H({
     isOpen: c,
     onClose: () => p(!1),
     enabled: a
@@ -173,10 +173,10 @@ function E({ children: e, className: n = "", style: o }) {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
-  if (K({
+  if (P({
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
-  }), H({
+  }), K({
     handler: () => i(!1),
     enabled: t && _.escapeKey
   }), b(() => {

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

@@ -1,2 +1,2 @@
+export type { CloseOnBackdropOptions, SheetBodyProps, SheetCloseProps, SheetContentProps, SheetHeaderProps, SheetOverlayProps, SheetPortalProps, SheetPosition, SheetRootProps, SheetTitleProps, SheetTriggerProps, } from './Sheet';
 export { Sheet } from './Sheet';
-export type { SheetPosition, CloseOnBackdropOptions, SheetRootProps, SheetTriggerProps, SheetPortalProps, SheetOverlayProps, SheetContentProps, SheetHeaderProps, SheetTitleProps, SheetBodyProps, SheetCloseProps, } from './Sheet';

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

@@ -1,2 +1,2 @@
-export { Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
+export { Skeleton } from './Skeleton';

package/dist/components/SpeedDial/SpeedDial.js

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import m, { forwardRef as c, useRef as y, useId as b, createContext as R, useContext as h } from "react";
-import { Slot as f } from "../../utils/Slot.js";
 import { useClickOutside as v } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as A } from "../../hooks/useEscapeKey.js";
+import { Slot as f } from "../../utils/Slot.js";
 import './SpeedDial.css';/* empty css              */
 const _ = R(null), g = () => {
   const e = h(_);

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

@@ -1,2 +1,2 @@
-export { SpeedDial, SpeedDialRoot, SpeedDialTrigger, SpeedDialActions, SpeedDialAction, } from './SpeedDial';
-export type { SpeedDialDirection, SpeedDialRootProps, SpeedDialTriggerProps, SpeedDialActionsProps, SpeedDialActionProps, } from './SpeedDial';
+export type { SpeedDialActionProps, SpeedDialActionsProps, SpeedDialDirection, SpeedDialRootProps, SpeedDialTriggerProps, } from './SpeedDial';
+export { SpeedDial, SpeedDialAction, SpeedDialActions, SpeedDialRoot, SpeedDialTrigger, } from './SpeedDial';

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

@@ -1,2 +1,2 @@
-export { Switch } from './Switch';
 export type { SwitchProps } from './Switch';
+export { Switch } from './Switch';

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

@@ -1,2 +1,2 @@
+export type { AutoSizeConfig, TextareaProps } from './Textarea';
 export { Textarea } from './Textarea';
-export type { TextareaProps, AutoSizeConfig } from './Textarea';

package/dist/components/TimePicker/TimePicker.css

@@ -0,0 +1 @@
+.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

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export type TimeFormat = "12" | "24";
+export type TimePeriod = "AM" | "PM";
+export type MinuteStep = 1 | 5 | 10 | 15 | 30;
+export interface TimeValue {
+    hour: number;
+    minute: number;
+    period?: TimePeriod;
+}
+export interface TimePickerRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    value?: TimeValue;
+    defaultValue?: TimeValue;
+    onChange?: (time: TimeValue) => void;
+    format?: TimeFormat;
+    minuteStep?: MinuteStep;
+    disabled?: boolean;
+    itemHeight?: number;
+    children: React.ReactNode;
+}
+export declare const TimePickerRoot: React.ForwardRefExoticComponent<TimePickerRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface TimePickerColumnProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    type: "hour" | "minute" | "period";
+}
+export declare const TimePickerColumn: React.ForwardRefExoticComponent<TimePickerColumnProps & React.RefAttributes<HTMLDivElement>>;
+export interface TimePickerHighlightProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const TimePickerHighlight: React.ForwardRefExoticComponent<TimePickerHighlightProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TimePicker: {
+    Root: React.ForwardRefExoticComponent<TimePickerRootProps & React.RefAttributes<HTMLDivElement>>;
+    Column: React.ForwardRefExoticComponent<TimePickerColumnProps & React.RefAttributes<HTMLDivElement>>;
+    Highlight: React.ForwardRefExoticComponent<TimePickerHighlightProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,280 @@
+import { jsx as S, jsxs as X } from "react/jsx-runtime";
+import { forwardRef as U, useRef as f, useMemo as O, useCallback as T, useEffect as N, useState as Z, createContext as ee, useContext as te } from "react";
+import './TimePicker.css';/* empty css               */
+const W = ee(null), q = () => {
+  const t = te(W);
+  if (!t)
+    throw new Error(
+      "TimePicker components must be used within TimePicker.Root"
+    );
+  return t;
+}, z = U(
+  ({
+    value: t,
+    defaultValue: R,
+    onChange: v,
+    format: s = "12",
+    minuteStep: l = 5,
+    disabled: p = !1,
+    itemHeight: o = 40,
+    children: g,
+    className: D,
+    style: I,
+    ...$
+  }, a) => {
+    const [x, w] = Z(() => t || R || {
+      hour: s === "12" ? 12 : 0,
+      minute: 0,
+      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);
+      },
+      [k, M, v]
+    ), A = {
+      value: k,
+      format: s,
+      minuteStep: l,
+      disabled: p,
+      itemHeight: o,
+      updateValue: V,
+      hourOptions: E,
+      minuteOptions: L,
+      periodOptions: b
+    }, i = {
+      "--timepicker-item-height": `${o}px`,
+      ...I
+    };
+    return /* @__PURE__ */ S(W.Provider, { value: A, children: /* @__PURE__ */ S(
+      "div",
+      {
+        ref: a,
+        className: `motile-timepicker ${p ? "motile-timepicker--disabled" : ""} ${D || ""}`,
+        style: i,
+        "aria-disabled": p,
+        role: "group",
+        "aria-label": "시간 선택",
+        ...$,
+        children: g
+      }
+    ) });
+  }
+);
+z.displayName = "TimePicker.Root";
+const B = U(({ type: t, className: R, ...v }, s) => {
+  const {
+    value: l,
+    disabled: p,
+    itemHeight: o,
+    updateValue: g,
+    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 D;
+      case "minute":
+        return I;
+      case "period":
+        return $;
+      default:
+        return [];
+    }
+  }, [t, D, I, $]), n = O(() => {
+    switch (t) {
+      case "hour":
+        return l.hour;
+      case "minute":
+        return l.minute;
+      case "period":
+        return l.period;
+      default:
+        return;
+    }
+  }, [t, l]), h = T(
+    (e) => t === "period" ? e : e.toString().padStart(2, "0"),
+    [t]
+  ), u = T(
+    (e, r = !0) => {
+      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"
+      });
+    },
+    [i, o]
+  ), P = T(() => typeof window < "u" && window.matchMedia("(hover: none) and (pointer: coarse)").matches, []), Y = T(
+    (e) => {
+      if (P()) return;
+      e.preventDefault();
+      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 + d, i.length - 1)
+          );
+          if (j !== H) {
+            const K = i[j], Q = j * o;
+            r.scrollTo({ top: Q, behavior: "smooth" }), g(t, K);
+          }
+        }
+        k.current = 0, setTimeout(() => {
+          M.current = !1;
+        }, 150);
+      }, 50));
+    },
+    [i, o, n, g, t, P]
+  ), G = T(
+    (e) => {
+      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());
+    },
+    [P, p]
+  ), y = T((e) => {
+    if (!b.current) return;
+    const r = a.current;
+    if (!r) return;
+    const c = V.current - e.clientY;
+    r.scrollTop = A.current + c;
+  }, []), C = T(() => {
+    if (!b.current) return;
+    b.current = !1;
+    const e = a.current;
+    if (!e) return;
+    e.style.cursor = "grab";
+    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 (w.current) {
+        w.current = !1;
+        return;
+      }
+      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);
+  }, [i, o, n, g, t, P]);
+  return N(() => {
+    if (!L.current) return;
+    L.current = !1;
+    const e = setTimeout(() => {
+      u(n, !1);
+    }, 0);
+    return () => clearTimeout(e);
+  }, [u, n]), N(() => {
+    const e = a.current;
+    if (!e || n === void 0) return;
+    const r = i.indexOf(n);
+    if (r === -1) return;
+    const c = r * o, m = e.scrollTop;
+    Math.abs(m - c) > 1 && (w.current = !0, u(n, !0), setTimeout(() => {
+      w.current = !1;
+    }, 200));
+  }, [n, u, i, o]), N(() => {
+    const e = a.current;
+    if (e)
+      return e.addEventListener("wheel", Y, { passive: !1 }), () => {
+        e.removeEventListener("wheel", Y);
+      };
+  }, [Y]), N(() => (document.addEventListener("mousemove", y), document.addEventListener("mouseup", C), () => {
+    document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", C);
+  }), [y, C]), N(() => () => {
+    x.current !== null && clearTimeout(x.current);
+  }, []), /* @__PURE__ */ X(
+    "div",
+    {
+      ref: (e) => {
+        typeof s == "function" ? s(e) : s && (s.current = e), a.current = e;
+      },
+      className: `motile-timepicker__column ${R || ""}`,
+      onScroll: J,
+      onMouseDown: G,
+      role: "listbox",
+      "aria-label": `${t} selector`,
+      "aria-orientation": "vertical",
+      ...v,
+      children: [
+        /* @__PURE__ */ S(
+          "div",
+          {
+            className: "motile-timepicker__spacer",
+            style: { height: o },
+            "aria-hidden": "true"
+          }
+        ),
+        i.map((e, r) => {
+          const c = e === n;
+          return /* @__PURE__ */ S(
+            "div",
+            {
+              className: `motile-timepicker__item ${c ? "motile-timepicker__item--selected" : ""} ${p ? "motile-timepicker__item--disabled" : ""}`,
+              style: { height: o },
+              role: "option",
+              "aria-selected": c,
+              "data-value": e,
+              children: h(e)
+            },
+            r
+          );
+        }),
+        /* @__PURE__ */ S(
+          "div",
+          {
+            className: "motile-timepicker__spacer",
+            style: { height: o },
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+});
+B.displayName = "TimePicker.Column";
+const F = U(({ className: t, style: R, ...v }, s) => {
+  const { itemHeight: l } = q(), p = {
+    height: l,
+    ...R
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: s,
+      className: `motile-timepicker__highlight ${t || ""}`,
+      style: p,
+      "aria-hidden": "true",
+      ...v
+    }
+  );
+});
+F.displayName = "TimePicker.Highlight";
+const ie = {
+  Root: z,
+  Column: B,
+  Highlight: F
+};
+export {
+  ie as TimePicker,
+  B as TimePickerColumn,
+  F as TimePickerHighlight,
+  z as TimePickerRoot
+};

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

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

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

@@ -0,0 +1,2 @@
+export type { MinuteStep, TimeFormat, TimePeriod, TimePickerColumnProps, TimePickerHighlightProps, TimePickerRootProps, TimeValue, } from './TimePicker';
+export { TimePicker } from './TimePicker';

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

@@ -1,4 +1,4 @@
+export type { Toast, ToastOptions, ToastProviderProps, ToastVariant, } from './Toast';
 export { ToastProvider, useToastContext } from './Toast';
-export type { ToastVariant, Toast, ToastOptions, ToastProviderProps, } from './Toast';
-export { useToast } from './useToast';
 export type { UseToastReturn } from './useToast';
+export { useToast } from './useToast';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -88,4 +88,4 @@ export declare const Tooltip: {
     Trigger: typeof TooltipTrigger;
     Content: typeof TooltipContent;
 };
-export type { TooltipRootProps, TooltipTriggerProps, TooltipContentProps, TooltipVariant, TooltipPosition, TooltipAlign, };
+export type { TooltipAlign, TooltipContentProps, TooltipPosition, TooltipRootProps, TooltipTriggerProps, TooltipVariant, };

package/dist/components/Tooltip/Tooltip.js

@@ -1,8 +1,8 @@
 import { jsxs as tt, jsx as V } from "react/jsx-runtime";
 import et, { useState as A, useEffect as B, useCallback as C, useId as ot, useRef as y, useLayoutEffect as nt, createContext as rt, useContext as st } from "react";
 import { createPortal as it } from "react-dom";
-import { Slot as at } from "../../utils/Slot.js";
-import { FloatingArrow as lt } from "../../utils/FloatingArrow.js";
+import { FloatingArrow as at } from "../../utils/FloatingArrow.js";
+import { Slot as lt } from "../../utils/Slot.js";
 import './Tooltip.css';/* empty css            */
 const Z = rt(null);
 function J() {
@@ -225,7 +225,7 @@ function mt({ children: t, asChild: e = !1 }) {
   }, [s, r]);
   if (e)
     return /* @__PURE__ */ V(
-      at,
+      lt,
       {
         ref: (c) => {
           m.current = c;
@@ -311,7 +311,7 @@ function bt({ children: t }) {
         children: [
           t,
           p && /* @__PURE__ */ V(
-            lt,
+            at,
             {
               className: "motile-tooltip-arrow",
               variant: m,

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

@@ -1,2 +1,2 @@
+export type { TooltipAlign, TooltipContentProps, TooltipPosition, TooltipRootProps, TooltipTriggerProps, TooltipVariant, } from './Tooltip';
 export { Tooltip } from './Tooltip';
-export type { TooltipRootProps, TooltipTriggerProps, TooltipContentProps, TooltipVariant, TooltipPosition, TooltipAlign, } from './Tooltip';

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
-export { useScrollLock } from './useScrollLock';
-export { useClickOutside } from './useClickOutside';
 export type { UseClickOutsideOptions } from './useClickOutside';
-export { useEscapeKey } from './useEscapeKey';
+export { useClickOutside } from './useClickOutside';
 export type { UseEscapeKeyOptions } from './useEscapeKey';
+export { useEscapeKey } from './useEscapeKey';
+export { useScrollLock } from './useScrollLock';

package/dist/hooks/index.js

@@ -1,8 +1,8 @@
-import { useScrollLock as r } from "./useScrollLock.js";
-import { useClickOutside as c } from "./useClickOutside.js";
-import { useEscapeKey as t } from "./useEscapeKey.js";
+import { useClickOutside as r } from "./useClickOutside.js";
+import { useEscapeKey as c } from "./useEscapeKey.js";
+import { useScrollLock as t } from "./useScrollLock.js";
 export {
-  c as useClickOutside,
-  t as useEscapeKey,
-  r as useScrollLock
+  r as useClickOutside,
+  c as useEscapeKey,
+  t as useScrollLock
 };

package/dist/index.d.ts

@@ -1,32 +1,36 @@
-export { Button } from './components/Button';
-export type { ButtonProps } from './components/Button';
-export { Input } from './components/Input';
-export type { InputProps } from './components/Input';
-export { Textarea } from './components/Textarea';
-export type { TextareaProps, AutoSizeConfig } from './components/Textarea';
-export { Checkbox } from './components/Checkbox';
-export type { CheckboxProps } from './components/Checkbox';
-export { Switch } from './components/Switch';
-export type { SwitchProps } from './components/Switch';
+export type { AccordionContentProps, AccordionHeaderProps, AccordionProps, } from './components/Accordion';
 export { Accordion } from './components/Accordion';
-export type { AccordionProps, AccordionHeaderProps, AccordionContentProps, } from './components/Accordion';
-export { Skeleton } from './components/Skeleton';
-export type { SkeletonProps } from './components/Skeleton';
-export { Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
-export { Tooltip } from './components/Tooltip';
-export type { TooltipRootProps, TooltipTriggerProps, TooltipContentProps, TooltipPosition, TooltipAlign, TooltipVariant, } from './components/Tooltip';
-export { Popover } from './components/Popover';
-export type { PopoverRootProps, PopoverTriggerProps, PopoverContentProps, } from './components/Popover';
+export { Badge } from './components/Badge';
+export type { ButtonProps } from './components/Button';
+export { Button } from './components/Button';
+export type { CheckboxProps } from './components/Checkbox';
+export { Checkbox } from './components/Checkbox';
+export type { DockItemProps, DockPosition, DockRootProps, DockSeparatorProps, } from './components/Dock';
+export { Dock } from './components/Dock';
+export type { CloseOnBackdropOptions, DrawerBodyProps, DrawerCloseProps, DrawerContentProps, DrawerHandleProps, DrawerOverlayProps, DrawerPortalProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, } from './components/Drawer';
 export { Drawer } from './components/Drawer';
-export type { CloseOnBackdropOptions, DrawerRootProps, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerHandleProps, DrawerTitleProps, DrawerBodyProps, DrawerCloseProps, } from './components/Drawer';
-export { Sheet } from './components/Sheet';
-export type { SheetPosition, SheetRootProps, SheetTriggerProps, SheetPortalProps, SheetOverlayProps, SheetContentProps, SheetHeaderProps, SheetTitleProps, SheetBodyProps, SheetCloseProps, } from './components/Sheet';
+export type { InputProps } from './components/Input';
+export { Input } from './components/Input';
+export type { ModalBodyProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalRootProps, ModalTitleProps, ModalVariant, } from './components/Modal';
 export { Modal } from './components/Modal';
-export type { ModalVariant, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, } from './components/Modal';
-export { ToastProvider, useToast } from './components/Toast';
-export type { ToastVariant, Toast, ToastOptions, ToastProviderProps, UseToastReturn, } from './components/Toast';
-export { Dock } from './components/Dock';
-export type { DockRootProps, DockItemProps, DockSeparatorProps, DockPosition, } from './components/Dock';
+export type { NumberFlowProps } from './components/NumberFlow';
+export { NumberFlow } from './components/NumberFlow';
+export type { PopoverContentProps, PopoverRootProps, PopoverTriggerProps, } from './components/Popover';
+export { Popover } from './components/Popover';
+export type { SheetBodyProps, SheetCloseProps, SheetContentProps, SheetHeaderProps, SheetOverlayProps, SheetPortalProps, SheetPosition, SheetRootProps, SheetTitleProps, SheetTriggerProps, } from './components/Sheet';
+export { Sheet } from './components/Sheet';
+export type { SkeletonProps } from './components/Skeleton';
+export { Skeleton } from './components/Skeleton';
+export type { SpeedDialActionProps, SpeedDialActionsProps, SpeedDialDirection, SpeedDialRootProps, SpeedDialTriggerProps, } from './components/SpeedDial';
 export { SpeedDial } from './components/SpeedDial';
-export type { SpeedDialDirection, SpeedDialRootProps, SpeedDialTriggerProps, SpeedDialActionsProps, SpeedDialActionProps, } from './components/SpeedDial';
+export type { SwitchProps } from './components/Switch';
+export { Switch } from './components/Switch';
+export type { AutoSizeConfig, TextareaProps } from './components/Textarea';
+export { Textarea } from './components/Textarea';
+export type { MinuteStep, TimeFormat, TimePeriod, TimePickerColumnProps, TimePickerHighlightProps, TimePickerRootProps, TimeValue, } from './components/TimePicker';
+export { TimePicker } from './components/TimePicker';
+export type { Toast, ToastOptions, ToastProviderProps, ToastVariant, UseToastReturn, } from './components/Toast';
+export { ToastProvider, useToast } from './components/Toast';
+export type { TooltipAlign, TooltipContentProps, TooltipPosition, TooltipRootProps, TooltipTriggerProps, TooltipVariant, } from './components/Tooltip';
+export { Tooltip } from './components/Tooltip';

package/dist/index.js

@@ -1,36 +1,40 @@
-import { Button as e } from "./components/Button/Button.js";
-import { Input as p } from "./components/Input/Input.js";
-import { Textarea as f } from "./components/Textarea/Textarea.js";
+import { Accordion as e } from "./components/Accordion/Accordion.js";
+import { Badge as p } from "./components/Badge/Badge.js";
+import { Button as x } from "./components/Button/Button.js";
 import { Checkbox as a } from "./components/Checkbox/Checkbox.js";
-import { Switch as d } from "./components/Switch/Switch.js";
-import { Accordion as l } from "./components/Accordion/Accordion.js";
-import { Skeleton as S } from "./components/Skeleton/Skeleton.js";
-import { Badge as h } from "./components/Badge/Badge.js";
-import { Tooltip as s } from "./components/Tooltip/Tooltip.js";
-import { Popover as D } from "./components/Popover/Popover.js";
-import { Drawer as w } from "./components/Drawer/Drawer.js";
+import { Dock as c } from "./components/Dock/Dock.js";
+import { Drawer as l } from "./components/Drawer/Drawer.js";
+import { Input as k } from "./components/Input/Input.js";
+import { Modal as u } from "./components/Modal/Modal.js";
+import { NumberFlow as h } from "./components/NumberFlow/NumberFlow.js";
+import { Popover as w } from "./components/Popover/Popover.js";
 import { Sheet as P } from "./components/Sheet/Sheet.js";
-import { Modal as g } from "./components/Modal/Modal.js";
-import { ToastProvider as C } from "./components/Toast/Toast.js";
-import { useToast as M } from "./components/Toast/useToast.js";
-import { Dock as q } from "./components/Dock/Dock.js";
-import { SpeedDial as z } from "./components/SpeedDial/SpeedDial.js";
+import { Skeleton as v } from "./components/Skeleton/Skeleton.js";
+import { SpeedDial as g } from "./components/SpeedDial/SpeedDial.js";
+import { Switch as C } from "./components/Switch/Switch.js";
+import { Textarea as I } from "./components/Textarea/Textarea.js";
+import { TimePicker as N } from "./components/TimePicker/TimePicker.js";
+import { ToastProvider as q } from "./components/Toast/Toast.js";
+import { useToast as z } from "./components/Toast/useToast.js";
+import { Tooltip as G } from "./components/Tooltip/Tooltip.js";
 export {
-  l as Accordion,
-  h as Badge,
-  e as Button,
+  e as Accordion,
+  p as Badge,
+  x as Button,
   a as Checkbox,
-  q as Dock,
-  w as Drawer,
-  p as Input,
-  g as Modal,
-  D as Popover,
+  c as Dock,
+  l as Drawer,
+  k as Input,
+  u as Modal,
+  h as NumberFlow,
+  w as Popover,
   P as Sheet,
-  S as Skeleton,
-  z as SpeedDial,
-  d as Switch,
-  f as Textarea,
-  C as ToastProvider,
-  s as Tooltip,
-  M as useToast
+  v as Skeleton,
+  g as SpeedDial,
+  C as Switch,
+  I as Textarea,
+  N as TimePicker,
+  q as ToastProvider,
+  G as Tooltip,
+  z as useToast
 };

package/dist/test/utils.d.ts

@@ -1,5 +1,5 @@
-import { RenderOptions } from '@testing-library/react';
 import { ReactElement } from 'react';
+import { RenderOptions } from '@testing-library/react';
 /**
  * Custom render function with common providers
  * 필요시 ThemeProvider, ToastProvider 등 추가 가능

package/dist/utils/Slot.js

@@ -1,10 +1,10 @@
-import i from "react";
-const r = i.forwardRef(
+import c from "react";
+const r = c.forwardRef(
   ({ children: e, ...a }, t) => {
-    if (!i.isValidElement(e))
+    if (!c.isValidElement(e))
       return null;
     const n = o(e);
-    return i.cloneElement(e, {
+    return c.cloneElement(e, {
       ...l(a, e.props),
       ref: t ? m(t, n) : n
     });
@@ -13,7 +13,7 @@ const r = i.forwardRef(
 r.displayName = "Slot";
 function o(e) {
   var n;
-  let a = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get;
+  const a = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get;
   return a && "isReactWarning" in a && a.isReactWarning ? e.ref : e.props.ref || e.ref;
 }
 function l(e, a) {
@@ -24,8 +24,8 @@ function l(e, a) {
   });
   for (const n in a) {
     const f = e[n], s = a[n];
-    /^on[A-Z]/.test(n) ? typeof f == "function" && typeof s == "function" ? t[n] = (...c) => {
-      s(...c), f(...c);
+    /^on[A-Z]/.test(n) ? typeof f == "function" && typeof s == "function" ? t[n] = (...i) => {
+      s(...i), f(...i);
     } : typeof f == "function" && (t[n] = f) : n !== "className" && n !== "style" && (t[n] = f ?? s);
   }
   for (const n in e)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",
@@ -43,6 +43,10 @@
       "types": "./dist/components/Modal/Modal.d.ts",
       "import": "./dist/components/Modal/Modal.js"
     },
+    "./NumberFlow": {
+      "types": "./dist/components/NumberFlow/NumberFlow.d.ts",
+      "import": "./dist/components/NumberFlow/NumberFlow.js"
+    },
     "./Popover": {
       "types": "./dist/components/Popover/Popover.d.ts",
       "import": "./dist/components/Popover/Popover.js"
@@ -67,6 +71,10 @@
       "types": "./dist/components/Textarea/Textarea.d.ts",
       "import": "./dist/components/Textarea/Textarea.js"
     },
+    "./TimePicker": {
+      "types": "./dist/components/TimePicker/TimePicker.d.ts",
+      "import": "./dist/components/TimePicker/TimePicker.js"
+    },
     "./Toast": {
       "types": "./dist/components/Toast/Toast.d.ts",
       "import": "./dist/components/Toast/Toast.js"
@@ -100,6 +108,10 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepublishOnly": "npm run build"
@@ -109,6 +121,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.1",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
@@ -126,12 +139,19 @@
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
     "chromatic": "^13.3.3",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "happy-dom": "^20.0.10",
     "jsdom": "^27.0.1",
+    "prettier": "^3.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.4.7",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.48.1",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-lib-inject-css": "^2.2.2",