motile-ui 1.0.2 → 1.0.4

package/dist/components/Switch/Switch.js

@@ -0,0 +1,31 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import './Switch.css';/* empty css           */
+const $ = p(
+  ({ variant: t = "smooth", color: o, className: c, disabled: a, style: i, ...n }, l) => {
+    const s = "motile-switch", r = [
+      `${s}-container`,
+      `${s}-container--${t}`,
+      a && `${s}-container--disabled`
+    ].filter(Boolean).join(" "), m = [s, `${s}--${t}`, c].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("div", { className: r, style: o ? { "--motile-switch-color": o } : void 0, children: /* @__PURE__ */ h("label", { className: `${s}-wrapper`, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ...n,
+          ref: l,
+          type: "checkbox",
+          className: m,
+          disabled: a,
+          style: i,
+          role: "switch"
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: `${s}__track`, children: /* @__PURE__ */ e("span", { className: `${s}__thumb` }) })
+    ] }) });
+  }
+);
+$.displayName = "Switch";
+export {
+  $ as Switch
+};

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1 @@
+.motile-textarea-root{display:block;width:100%}.motile-textarea{width:100%;border:2px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:16px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:120px;line-height:1.6;box-sizing:border-box;font-family:inherit;resize:none}.motile-textarea:hover:not(:disabled):not(:focus):not(.motile-textarea--error){border-color:#c9cdd2}.motile-textarea:focus{border:2px solid var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) )}.motile-textarea:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb;resize:none}.motile-textarea.motile-textarea--error{border:2px solid #ef4444;background:#fef5f5}.motile-textarea.motile-textarea--error:focus{border:2px solid #ef4444;background:#fef5f5}.motile-textarea--shake{animation:motile-textarea-shake .5s ease-in-out}@keyframes motile-textarea-shake{0%{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.motile-textarea::placeholder{color:#9ca3af;opacity:1}.motile-textarea-wrapper{position:relative;width:100%}.motile-textarea--with-clear{padding-right:40px}.motile-textarea--with-clear:focus{padding-right:40px}.motile-textarea__clear-button{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:background-color .2s ease,color .2s ease}.motile-textarea__clear-button:hover{background:#f3f4f6;color:#6b7280}.motile-textarea__clear-icon{width:16px;height:16px}@media (max-width: 768px){.motile-textarea{font-size:16px;padding:12px;min-height:100px}.motile-textarea:focus{border:2px solid var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) )}.motile-textarea--with-clear{padding-right:36px}.motile-textarea--with-clear:focus{padding-right:36px}}@supports (-webkit-touch-callout: none){.motile-textarea{-webkit-tap-highlight-color:transparent}}.motile-textarea__helper-text{display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}.motile-textarea__helper-text--both{justify-content:space-between}.motile-textarea__helper-text--error-only{justify-content:flex-start}.motile-textarea__helper-text--counter-only{justify-content:flex-end}.motile-textarea__error-message{font-size:12px;color:#ef4444;line-height:16px;flex:1}.motile-textarea__counter{font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}.motile-textarea__label{position:absolute;left:16px;top:16px;font-size:16px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}.motile-textarea--with-label::placeholder{opacity:0}.motile-textarea--with-label:focus::placeholder{opacity:1}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label{top:0;transform:translateY(-50%);font-size:12px;color:var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) );background:#fff;padding:0 4px}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label--error,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label--error{color:#ef4444}.motile-textarea.motile-textarea--with-label{padding-top:12px;padding-bottom:12px}@media (max-width: 768px){.motile-textarea__label{font-size:16px;left:12px;top:16px}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label{font-size:12px}}.motile-textarea{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.motile-textarea::-webkit-scrollbar{width:6px}.motile-textarea::-webkit-scrollbar-track{background:transparent}.motile-textarea::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px;transition:background-color .2s ease}.motile-textarea::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.motile-textarea::-webkit-scrollbar-thumb:active{background-color:#0006}@media (prefers-color-scheme: dark){.motile-textarea{scrollbar-color:rgba(255,255,255,.2) transparent}.motile-textarea::-webkit-scrollbar-thumb{background-color:#fff3}.motile-textarea::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}.motile-textarea::-webkit-scrollbar-thumb:active{background-color:#fff6}}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,115 @@
+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 z = Q(
+  ({
+    autoFocus: _ = !1,
+    autoSelect: R = !1,
+    isError: T,
+    errorMessage: o,
+    className: C,
+    value: n,
+    color: b,
+    style: j,
+    maxLength: f,
+    label: l,
+    placeholder: v,
+    rows: d = 4,
+    resize: I = "none",
+    autoSize: s = !1,
+    ...H
+  }, 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 a = setTimeout(() => {
+          i.current && (i.current.focus(), R && i.current.select());
+        }, 50);
+        return () => clearTimeout(a);
+      }
+    }, [_, R]), F(() => {
+      if (!t || !i.current) return;
+      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`,
+      l && `${e}--with-label`,
+      C
+    ].filter(Boolean).join(" "), D = [
+      `${e}-wrapper`,
+      l && `${e}-wrapper--with-label`
+    ].filter(Boolean).join(" "), P = [
+      `${e}__label`,
+      p && `${e}__label--error`
+    ].filter(Boolean).join(" "), Y = b ? { "--motile-textarea-color": b } : void 0, q = {
+      ...j,
+      resize: t ? "none" : I,
+      ...t ? {
+        // 계산된 후에만 height 적용 (첫 렌더에서는 native rows 사용)
+        ...c.height !== void 0 && { height: c.height },
+        // 계산된 후에만 minHeight 오버라이드
+        ...c.height !== void 0 && { minHeight: "auto" },
+        overflowY: c.isMaxHeight ? "auto" : "hidden"
+      } : {}
+    }, 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__ */ 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",
+          {
+            ...H,
+            "aria-describedby": G,
+            ref: i,
+            className: k,
+            value: n,
+            maxLength: f,
+            rows: (t == null ? void 0 : t.minRows) ?? d,
+            style: q,
+            placeholder: l ? v || " " : v
+          }
+        )
+      ] }),
+      (o || g) && /* @__PURE__ */ m(
+        "div",
+        {
+          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",
+              {
+                id: `${e}-error`,
+                className: `${e}__error-message`,
+                role: "alert",
+                children: o
+              }
+            ),
+            g && /* @__PURE__ */ m("span", { className: `${e}__counter`, children: [
+              A,
+              "/",
+              f
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+z.displayName = "Textarea";
+export {
+  z as Textarea
+};

package/dist/components/Toast/Toast.css

@@ -0,0 +1 @@
+.motile-toast-container{position:fixed;pointer-events:none;display:flex;flex-direction:column;gap:8px}.motile-toast-container{top:0;left:0;right:0;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px 16px}@media (min-width: 768px){.motile-toast-container{top:0;left:auto;right:0;align-items:flex-end;padding:16px;max-width:400px}}.motile-toast{pointer-events:auto;display:inline-flex;align-items:flex-start;width:calc(100vw - 32px);min-width:200px;padding:12px 16px;background:#000000d9;border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;animation:slideDown .3s ease-out}@media (min-width: 768px){.motile-toast{width:auto;max-width:320px;animation:slideInRight .3s ease-out}}.motile-toast--exiting{animation:fadeOut .15s ease-out forwards}.motile-toast__icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:8px;margin-top:1px}.motile-toast--success .motile-toast__icon{color:#4ade80}.motile-toast--error .motile-toast__icon{color:#f87171}.motile-toast--warning .motile-toast__icon{color:#fbbf24}.motile-toast--info .motile-toast__icon{color:#60a5fa}.motile-toast__message{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:1.4;color:#fff;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word}@keyframes slideDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOut{to{opacity:0;transform:scale(.95)}}@media (prefers-color-scheme: dark){.motile-toast{background:#fffffff2}.motile-toast__message,.motile-toast__icon{color:#18181b}.motile-toast--success .motile-toast__icon{color:#22c55e}.motile-toast--error .motile-toast__icon{color:#ef4444}.motile-toast--warning .motile-toast__icon{color:#f59e0b}.motile-toast--info .motile-toast__icon{color:#3b82f6}}@media (prefers-reduced-motion: reduce){.motile-toast{animation:none!important}}.motile-toast *{user-select:none;-webkit-user-select:none}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,184 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+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 (typeof window > "u")
+      return {
+        toasts: [],
+        addToast: () => ""
+      };
+    throw new Error("useToastContext must be used within ToastProvider");
+  }
+  return e;
+}
+function $({ toast: e, onRemove: a }) {
+  const [i, c] = w(!1), l = f(() => {
+    c(!0), setTimeout(() => {
+      a(e.id);
+    }, 250);
+  }, [e.id, a]);
+  g(() => {
+    const h = setTimeout(l, e.duration);
+    return () => {
+      clearTimeout(h);
+    };
+  }, [l, e.duration]);
+  const d = p(() => e.variant === "success" ? /* @__PURE__ */ s(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M6 10L8.5 12.5L14 7",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  ) : e.variant === "error" ? /* @__PURE__ */ s(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M7 7L13 13M13 7L7 13",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  ) : e.variant === "warning" ? /* @__PURE__ */ s(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ t("path", { d: "M10 2L2 17H18L10 2Z", fill: "currentColor", opacity: "0.2" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M10 7V11M10 14V14.5",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  ) : e.variant === "info" ? /* @__PURE__ */ s(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M10 7V7.5M10 10V14",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  ) : null, [e.variant]), n = "motile-toast", u = [
+    n,
+    `${n}--${e.variant}`,
+    i && `${n}--exiting`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: u,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-toast-id": e.id,
+      children: [
+        d && /* @__PURE__ */ t("div", { className: `${n}__icon`, children: d }),
+        /* @__PURE__ */ t("div", { className: `${n}__message`, children: e.message })
+      ]
+    }
+  );
+}
+function j({ children: e, zIndex: a = 9999 }) {
+  const [i, c] = w([]), [l, d] = w(!1);
+  g(() => {
+    d(!0);
+  }, []);
+  const n = f(
+    (r, m = "default", o) => {
+      const v = `toast-${Date.now()}-${Math.random()}`, k = {
+        id: v,
+        message: r,
+        variant: m,
+        duration: (o == null ? void 0 : o.duration) ?? 4e3,
+        zIndex: o == null ? void 0 : o.zIndex,
+        createdAt: Date.now()
+      };
+      return c((M) => [k, ...M]), v;
+    },
+    []
+  ), u = f((r) => {
+    c((m) => m.filter((o) => o.id !== r));
+  }, []), h = p(
+    () => ({
+      toasts: i,
+      addToast: n
+    }),
+    [i, n]
+  ), x = i.filter(
+    (r) => r.zIndex !== void 0
+  ), T = x.length > 0 ? Math.max(...x.map((r) => r.zIndex)) : a;
+  return /* @__PURE__ */ s(C.Provider, { value: h, children: [
+    e,
+    l && I(
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "motile-toast-container",
+          "aria-live": "polite",
+          "aria-label": "Notifications",
+          style: { zIndex: T },
+          children: i.map((r) => /* @__PURE__ */ t($, { toast: r, onRemove: u }, r.id))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  j as ToastProvider,
+  V as useToastContext
+};

package/dist/components/Toast/useToast.js

@@ -0,0 +1,30 @@
+import { useCallback as o } from "react";
+import { useToastContext as i } from "./Toast.js";
+function d() {
+  const { addToast: r } = i(), s = o(
+    (t, n) => r(t, "default", n),
+    [r]
+  ), e = o(
+    (t, n) => r(t, "success", n),
+    [r]
+  ), u = o(
+    (t, n) => r(t, "error", n),
+    [r]
+  ), c = o(
+    (t, n) => r(t, "warning", n),
+    [r]
+  ), a = o(
+    (t, n) => r(t, "info", n),
+    [r]
+  );
+  return {
+    show: s,
+    success: e,
+    error: u,
+    warning: c,
+    info: a
+  };
+}
+export {
+  d as useToast
+};

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+.motile-tooltip-trigger{position:relative;display:inline-block;line-height:normal;vertical-align:middle}.motile-tooltip-bubble{position:fixed;z-index:2147483647;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.4;box-shadow:0 6px 20px #0003;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1)}.motile-tooltip-bubble[data-placement=top]{transform:translateY(8px) scale(.96)}.motile-tooltip-bubble[data-placement=bottom]{transform:translateY(-8px) scale(.96)}.motile-tooltip-bubble[data-placement=left]{transform:translate(8px) scale(.96)}.motile-tooltip-bubble[data-placement=right]{transform:translate(-8px) scale(.96)}.motile-tooltip-bubble[data-open=true]{opacity:1;transform:translate(0) scale(1)}.motile-tooltip-bubble[data-keep-open]{pointer-events:auto}.motile-tooltip-bubble--filled{--arrow-color: var( --motile-tooltip-color, var(--motile-ui-tooltip, rgba(0, 0, 0, .9)) );background:var(--arrow-color);color:#fff}.motile-tooltip-bubble--outlined{--arrow-color: var(--motile-tooltip-color, var(--motile-ui-tooltip, #3b82f6));background:#fff;color:var(--arrow-color);border:1px solid var(--arrow-color)}.motile-tooltip-bubble.measuring{visibility:hidden!important;opacity:1!important;max-width:none!important;max-height:none!important;left:0!important;top:0!important}.motile-tooltip-arrow{position:absolute;pointer-events:none;z-index:1}.motile-tooltip-bubble[data-placement=top] .motile-tooltip-arrow{bottom:-7.25px;left:var(--arrow-offset, 50%);transform:translate(-50%) rotate(180deg)}.motile-tooltip-bubble[data-placement=bottom] .motile-tooltip-arrow{top:-7px;left:var(--arrow-offset, 50%);transform:translate(-50%) rotate(0)}.motile-tooltip-bubble[data-placement=left] .motile-tooltip-arrow{right:-9.25px;top:var(--arrow-offset, 50%);transform:translateY(-50%) rotate(90deg)}.motile-tooltip-bubble[data-placement=right] .motile-tooltip-arrow{left:-9.25px;top:var(--arrow-offset, 50%);transform:translateY(-50%) rotate(-90deg)}