motile-ui 1.0.3 → 1.1.0

package/dist/components/Sheet/Sheet.js

@@ -1,15 +1,15 @@
 import { jsx as u, jsxs as $ } from "react/jsx-runtime";
-import { useCallback as v, useState as S, useEffect as b, useId as F, useRef as x, useMemo as A, createContext as T, useContext as w } from "react";
-import { createPortal as K } from "react-dom";
+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 { createPortal as w } from "react-dom";
 import { Slot as g } from "../../utils/Slot.js";
-import { useScrollLock as N } from "../../hooks/useScrollLock.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 './Sheet.css';/* empty css          */
-const I = T(null);
+const I = N(null);
 function k() {
-  const e = w(I);
+  const e = T(I);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
@@ -19,46 +19,46 @@ function z({
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [a, l] = S(n), s = t ? e : a, i = v(
+  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 || l(f), o == null || o(f);
+      t || a(f), o == null || o(f);
     },
     [t, o, s]
   );
-  return [s, i];
+  return [s, l];
 }
 function B({
   children: e,
   position: n = "right",
   closeOnBackdrop: o = !0,
   maxWidth: t = "600px",
-  zIndex: a = 1e3,
-  open: l,
+  zIndex: i = 1e3,
+  open: a,
   defaultOpen: s = !1,
-  onOpenChange: i
+  onOpenChange: l
 }) {
-  const r = F().replace(/:/g, ""), f = x(null), p = x(null), [d, c] = z({
-    value: l,
+  const r = A().replace(/:/g, ""), f = x(null), h = x(null), [d, c] = z({
+    value: a,
     defaultValue: s,
-    onChange: i
-  }), { isClosingFromHistory: h, navigateAndClose: y } = q({
+    onChange: l
+  }), { isClosingFromHistory: p, navigateAndClose: y } = q({
     isOpen: d,
     onClose: () => c(!1)
-  }), m = A(
+  }), m = F(
     () => ({
       open: d,
       setOpen: c,
       position: n,
       closeOnBackdrop: o,
       maxWidth: t,
-      zIndex: a,
-      onOpenChange: i,
+      zIndex: i,
+      onOpenChange: l,
       triggerId: `${r}-trigger`,
       contentId: `${r}-content`,
       overlayRef: f,
-      sheetRef: p,
-      isClosingFromHistory: h,
+      sheetRef: h,
+      isClosingFromHistory: p,
       navigateAndClose: y
     }),
     [
@@ -67,52 +67,54 @@ function B({
       n,
       o,
       t,
-      a,
       i,
+      l,
       r,
       f,
-      p,
       h,
+      p,
       y
     ]
   );
   return /* @__PURE__ */ u(I.Provider, { value: m, children: e });
 }
 function P({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: a, contentId: l } = k(), s = v(() => {
-    t((i) => !i);
+  const { open: o, setOpen: t, triggerId: i, contentId: a } = k(), s = b(() => {
+    t((l) => !l);
   }, [t]);
   return n ? /* @__PURE__ */ u(
     g,
     {
-      id: a,
+      id: i,
       "aria-expanded": o,
-      "aria-controls": l,
+      "aria-controls": a,
       onClick: s,
       children: e
     }
   ) : /* @__PURE__ */ u(
     "button",
     {
-      id: a,
+      id: i,
       type: "button",
       "aria-expanded": o,
-      "aria-controls": l,
+      "aria-controls": a,
       onClick: s,
       children: e
     }
   );
 }
 function j({ children: e, container: n }) {
-  const { open: o } = k();
-  return !o || typeof document > "u" ? null : K(e, n || document.body);
+  const { open: o } = k(), [t, i] = S(!1);
+  return v(() => {
+    i(!0);
+  }, []), !t || !o ? null : w(e, n || document.body);
 }
 function E({ className: e = "", style: n }) {
-  const { open: o, setOpen: t, position: a, closeOnBackdrop: l, zIndex: s, overlayRef: i } = k(), [r, f] = S(!1), [p, d] = S(!1), c = typeof l == "boolean" ? { clickOutside: l } : {
-    escapeKey: l.escapeKey ?? !1,
-    clickOutside: l.clickOutside ?? !1
+  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
   };
-  b(() => {
+  v(() => {
     if (o)
       f(!0);
     else if (r) {
@@ -122,7 +124,7 @@ function E({ className: e = "", style: n }) {
       }, 300);
       return () => clearTimeout(m);
     }
-  }, [o, r]), b(() => {
+  }, [o, r]), v(() => {
     if (!r || !o) return;
     const m = requestAnimationFrame(() => {
       const _ = requestAnimationFrame(() => {
@@ -132,11 +134,11 @@ function E({ className: e = "", style: n }) {
     });
     return () => cancelAnimationFrame(m);
   }, [r, o]);
-  const h = v(
+  const p = b(
     (m) => {
-      c.clickOutside && m.target === i.current && t(!1);
+      c.clickOutside && m.target === l.current && t(!1);
     },
-    [c.clickOutside, t, i]
+    [c.clickOutside, t, l]
   );
   if (!r)
     return null;
@@ -147,10 +149,10 @@ function E({ className: e = "", style: n }) {
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: i,
-      className: `motile-sheet__overlay ${p ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${a} ${e}`,
+      ref: l,
+      className: `motile-sheet__overlay ${h ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
       style: y,
-      onClick: h,
+      onClick: p,
       role: "presentation"
     }
   );
@@ -158,39 +160,39 @@ function E({ className: e = "", style: n }) {
 function L({ children: e, className: n = "", style: o }) {
   const {
     open: t,
-    setOpen: a,
-    position: l,
+    setOpen: i,
+    position: a,
     closeOnBackdrop: s,
-    maxWidth: i,
+    maxWidth: l,
     zIndex: r,
     contentId: f,
-    sheetRef: p,
+    sheetRef: h,
     isClosingFromHistory: d
-  } = k(), [c, h] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
+  } = k(), [c, p] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
-  if (N({
+  if (K({
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), H({
-    refs: [p],
-    handler: () => a(!1),
+    refs: [h],
+    handler: () => i(!1),
     enabled: t && _.clickOutside
   }), V({
-    handler: () => a(!1),
+    handler: () => i(!1),
     enabled: t && _.escapeKey
-  }), b(() => {
+  }), v(() => {
     if (t)
-      h(!0);
+      p(!0);
     else if (c) {
       m(!1);
       const C = setTimeout(() => {
-        h(!1);
+        p(!1);
       }, d ? 0 : 300);
       return () => clearTimeout(C);
     }
-  }, [t, c, d]), b(() => {
+  }, [t, c, d]), v(() => {
     if (!c || !t || d) return;
     const O = requestAnimationFrame(() => {
       const C = requestAnimationFrame(() => {
@@ -202,16 +204,16 @@ function L({ children: e, className: n = "", style: o }) {
   }, [c, t, d]), !c)
     return null;
   const R = {
-    ...i !== "600px" && { "--sheet-max-width": i },
+    ...l !== "600px" && { "--sheet-max-width": l },
     zIndex: r + 1,
     ...o
   };
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: p,
+      ref: h,
       id: f,
-      className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
+      className: `motile-sheet__content motile-sheet__content--${a} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
       style: R,
       role: "dialog",
       "aria-modal": "true",
@@ -229,7 +231,7 @@ function W({ children: e, className: n = "" }) {
   return /* @__PURE__ */ u("div", { className: `motile-sheet__body ${n}`, children: e });
 }
 function G({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = k(), t = v(() => {
+  const { setOpen: o } = k(), t = b(() => {
     o(!1);
   }, [o]);
   return n ? /* @__PURE__ */ u(
@@ -267,7 +269,11 @@ function G({ children: e, asChild: n = !1 }) {
     }
   );
 }
-const ne = {
+function ne() {
+  const { navigateAndClose: e } = k();
+  return e;
+}
+const se = {
   Root: B,
   Trigger: P,
   Portal: j,
@@ -279,5 +285,6 @@ const ne = {
   Close: G
 };
 export {
-  ne as Sheet
+  se as Sheet,
+  ne as useSheetNavigation
 };

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

@@ -0,0 +1 @@
+export { useSheetNavigation } from './Sheet';

package/dist/components/Sheet/useSheetNavigation.js

@@ -0,0 +1,4 @@
+import { useSheetNavigation as t } from "./Sheet.js";
+export {
+  t as useSheetNavigation
+};

package/dist/components/Textarea/Textarea.js

@@ -1,70 +1,74 @@
-import { jsxs as h, jsx as y } from "react/jsx-runtime";
-import { forwardRef as Q, useRef as U, useState as V, useMemo as X, useEffect as Z, useLayoutEffect as z } from "react";
+import { jsxs as m, jsx as y } from "react/jsx-runtime";
+import { forwardRef as Q, useRef as U, useState as V, useMemo as X, useEffect as Z, useLayoutEffect as F } from "react";
 import './Textarea.css';/* empty css             */
-const F = Q(
+const z = Q(
   ({
     autoFocus: _ = !1,
-    autoSelect: b = !1,
+    autoSelect: R = !1,
     isError: T,
     errorMessage: o,
     className: C,
-    value: c,
-    color: R,
+    value: n,
+    color: b,
     style: j,
-    maxLength: m,
-    label: a,
+    maxLength: f,
+    label: l,
     placeholder: v,
     rows: d = 4,
     resize: I = "none",
-    autoSize: n = !1,
+    autoSize: s = !1,
     ...H
-  }, S) => {
-    const E = U(null), i = S || E, [f, W] = V({ height: void 0, isMaxHeight: !1 }), p = T ?? !!o, t = X(() => typeof n == "boolean" ? n ? { minRows: d, maxRows: void 0 } : void 0 : n ? {
-      minRows: n.minRows ?? d,
-      maxRows: n.maxRows
-    } : void 0, [n, d]);
+  }, E) => {
+    const S = U(null), i = E || S, [c, W] = V({ height: void 0, isMaxHeight: !1 }), p = T ?? !!o, t = X(() => typeof s == "boolean" ? s ? { minRows: d, maxRows: void 0 } : void 0 : s ? {
+      minRows: s.minRows ?? d,
+      maxRows: s.maxRows
+    } : void 0, [s, d]);
     Z(() => {
       if (_ && i.current) {
-        const s = setTimeout(() => {
-          i.current && (i.current.focus(), b && i.current.select());
+        const a = setTimeout(() => {
+          i.current && (i.current.focus(), R && i.current.select());
         }, 50);
-        return () => clearTimeout(s);
+        return () => clearTimeout(a);
       }
-    }, [_, b]), z(() => {
+    }, [_, R]), F(() => {
       if (!t || !i.current) return;
-      const s = i.current;
-      s.style.height = "auto";
-      const J = s.scrollHeight, l = window.getComputedStyle(s), B = parseInt(l.lineHeight, 10), K = parseInt(l.paddingTop, 10), L = parseInt(l.paddingBottom, 10), M = parseInt(l.borderTopWidth, 10), O = parseInt(l.borderBottomWidth, 10), N = K + L + M + O, g = t.minRows ? B * t.minRows + N : void 0, u = t.maxRows ? B * t.maxRows + N : void 0;
-      let r = J, w = !1;
-      g !== void 0 && r < g && (r = g), u !== void 0 && r > u && (r = u, w = !0), s.style.height = `${r}px`, W(($) => r !== $.height || w !== $.isMaxHeight ? { height: r, isMaxHeight: w } : $);
-    }, [c, t]);
+      const a = i.current;
+      if (!(n && String(n).length > 0) && c.height === void 0)
+        return;
+      a.style.height = "auto";
+      const J = a.scrollHeight, h = window.getComputedStyle(a), B = parseInt(h.lineHeight, 10), K = parseInt(h.paddingTop, 10), L = parseInt(h.paddingBottom, 10), M = parseInt(h.borderTopWidth, 10), O = parseInt(h.borderBottomWidth, 10), N = K + L + M + O, x = t.minRows ? B * t.minRows + N : void 0, w = t.maxRows ? B * t.maxRows + N : void 0;
+      let r = J, u = !1;
+      x !== void 0 && r < x && (r = x), w !== void 0 && r > w && (r = w, u = !0), a.style.height = `${r}px`, W(($) => r !== $.height || u !== $.isMaxHeight ? { height: r, isMaxHeight: u } : $);
+    }, [n, t]);
     const e = "motile-textarea", k = [
       e,
       p && `${e}--error`,
       p && `${e}--shake`,
-      a && `${e}--with-label`,
+      l && `${e}--with-label`,
       C
     ].filter(Boolean).join(" "), D = [
       `${e}-wrapper`,
-      a && `${e}-wrapper--with-label`
+      l && `${e}-wrapper--with-label`
     ].filter(Boolean).join(" "), P = [
       `${e}__label`,
       p && `${e}__label--error`
-    ].filter(Boolean).join(" "), Y = R ? { "--motile-textarea-color": R } : void 0, q = {
+    ].filter(Boolean).join(" "), Y = b ? { "--motile-textarea-color": b } : void 0, q = {
       ...j,
       resize: t ? "none" : I,
       ...t ? {
-        height: f.height !== void 0 ? f.height : "auto",
-        minHeight: "auto",
-        overflowY: f.isMaxHeight ? "auto" : "hidden"
+        // 계산된 후에만 height 적용 (첫 렌더에서는 native rows 사용)
+        ...c.height !== void 0 && { height: c.height },
+        // 계산된 후에만 minHeight 오버라이드
+        ...c.height !== void 0 && { minHeight: "auto" },
+        overflowY: c.isMaxHeight ? "auto" : "hidden"
       } : {}
-    }, A = c ? String(c).length : 0, x = m !== void 0, G = [
+    }, A = n ? String(n).length : 0, g = f !== void 0, G = [
       H["aria-describedby"],
       o ? `${e}-error` : void 0
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ h("div", { className: `${e}-root`, children: [
-      /* @__PURE__ */ h("div", { className: D, style: Y, children: [
-        a && /* @__PURE__ */ y("label", { className: P, children: a }),
+    return /* @__PURE__ */ m("div", { className: `${e}-root`, children: [
+      /* @__PURE__ */ m("div", { className: D, style: Y, children: [
+        l && /* @__PURE__ */ y("label", { className: P, children: l }),
         /* @__PURE__ */ y(
           "textarea",
           {
@@ -72,18 +76,18 @@ const F = Q(
             "aria-describedby": G,
             ref: i,
             className: k,
-            value: c,
-            maxLength: m,
-            rows: d,
+            value: n,
+            maxLength: f,
+            rows: (t == null ? void 0 : t.minRows) ?? d,
             style: q,
-            placeholder: a ? v || " " : v
+            placeholder: l ? v || " " : v
           }
         )
       ] }),
-      (o || x) && /* @__PURE__ */ h(
+      (o || g) && /* @__PURE__ */ m(
         "div",
         {
-          className: `${e}__helper-text ${o && x ? `${e}__helper-text--both` : o ? `${e}__helper-text--error-only` : `${e}__helper-text--counter-only`}`,
+          className: `${e}__helper-text ${o && g ? `${e}__helper-text--both` : o ? `${e}__helper-text--error-only` : `${e}__helper-text--counter-only`}`,
           children: [
             o && /* @__PURE__ */ y(
               "span",
@@ -94,10 +98,10 @@ const F = Q(
                 children: o
               }
             ),
-            x && /* @__PURE__ */ h("span", { className: `${e}__counter`, children: [
+            g && /* @__PURE__ */ m("span", { className: `${e}__counter`, children: [
               A,
               "/",
-              m
+              f
             ] })
           ]
         }
@@ -105,7 +109,7 @@ const F = Q(
     ] });
   }
 );
-F.displayName = "Textarea";
+z.displayName = "Textarea";
 export {
-  F as Textarea
+  z as Textarea
 };

package/dist/components/Toast/Toast.js

@@ -1,16 +1,22 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as x, useEffect as g, useCallback as w, useMemo as p, createContext as L, useContext as y } from "react";
+import { useState as w, useEffect as g, useCallback as f, useMemo as p, createContext as L, useContext as y } from "react";
 import { createPortal as I } from "react-dom";
 import './Toast.css';/* empty css          */
 const C = L(null);
 function V() {
   const e = y(C);
-  if (!e)
+  if (!e) {
+    if (typeof window > "u")
+      return {
+        toasts: [],
+        addToast: () => ""
+      };
     throw new Error("useToastContext must be used within ToastProvider");
+  }
   return e;
 }
 function $({ toast: e, onRemove: a }) {
-  const [o, c] = x(!1), l = w(() => {
+  const [i, c] = w(!1), l = f(() => {
     c(!0), setTimeout(() => {
       a(e.id);
     }, 250);
@@ -109,7 +115,7 @@ function $({ toast: e, onRemove: a }) {
   ) : null, [e.variant]), n = "motile-toast", u = [
     n,
     `${n}--${e.variant}`,
-    o && `${n}--exiting`
+    i && `${n}--exiting`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ s(
     "div",
@@ -127,34 +133,34 @@ function $({ toast: e, onRemove: a }) {
   );
 }
 function j({ children: e, zIndex: a = 9999 }) {
-  const [o, c] = x([]), [l, d] = x(!1);
+  const [i, c] = w([]), [l, d] = w(!1);
   g(() => {
     d(!0);
   }, []);
-  const n = w(
-    (r, m = "default", i) => {
-      const f = `toast-${Date.now()}-${Math.random()}`, T = {
-        id: f,
+  const n = f(
+    (r, m = "default", o) => {
+      const v = `toast-${Date.now()}-${Math.random()}`, k = {
+        id: v,
         message: r,
         variant: m,
-        duration: (i == null ? void 0 : i.duration) ?? 4e3,
-        zIndex: i == null ? void 0 : i.zIndex,
+        duration: (o == null ? void 0 : o.duration) ?? 4e3,
+        zIndex: o == null ? void 0 : o.zIndex,
         createdAt: Date.now()
       };
-      return c((M) => [T, ...M]), f;
+      return c((M) => [k, ...M]), v;
     },
     []
-  ), u = w((r) => {
-    c((m) => m.filter((i) => i.id !== r));
+  ), u = f((r) => {
+    c((m) => m.filter((o) => o.id !== r));
   }, []), h = p(
     () => ({
-      toasts: o,
+      toasts: i,
       addToast: n
     }),
-    [o, n]
-  ), v = o.filter(
+    [i, n]
+  ), x = i.filter(
     (r) => r.zIndex !== void 0
-  ), k = v.length > 0 ? Math.max(...v.map((r) => r.zIndex)) : a;
+  ), T = x.length > 0 ? Math.max(...x.map((r) => r.zIndex)) : a;
   return /* @__PURE__ */ s(C.Provider, { value: h, children: [
     e,
     l && I(
@@ -164,8 +170,8 @@ function j({ children: e, zIndex: a = 9999 }) {
           className: "motile-toast-container",
           "aria-live": "polite",
           "aria-label": "Notifications",
-          style: { zIndex: k },
-          children: o.map((r) => /* @__PURE__ */ t($, { toast: r, onRemove: u }, r.id))
+          style: { zIndex: T },
+          children: i.map((r) => /* @__PURE__ */ t($, { toast: r, onRemove: u }, r.id))
         }
       ),
       document.body