motile-ui 1.1.2 → 1.2.0

package/dist/components/Sheet/Sheet.js

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

package/dist/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}.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}}

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

@@ -0,0 +1,33 @@
+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;
+    fullWidth?: boolean;
+    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>>;
+};