motile-ui 1.0.2 → 1.0.3

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,275 @@
+import { jsx as u } from "react/jsx-runtime";
+import W, { forwardRef as w, useRef as _, useState as E, useEffect as M, createContext as G, useContext as J } from "react";
+import { createPortal as Q } from "react-dom";
+import { Slot as Y } 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 t = J($);
+  if (!t)
+    throw new Error("Drawer components must be used within Drawer.Root");
+  return t;
+}, C = ({
+  children: t,
+  open: s,
+  defaultOpen: n = !1,
+  onOpenChange: r,
+  closeOnBackdrop: e = !0,
+  closeOnDrag: o = !0,
+  maxHeight: d = "70dvh",
+  width: c = "480px",
+  maxWidth: y,
+  zIndex: h = 9999
+}) => {
+  const a = _(null), m = _(null), l = _(null), v = _(0), b = _(!1), [A, g] = E(!1), [x, N] = E(n), [F, U] = E(n), D = s !== void 0 ? s : F, R = (i) => {
+    s === void 0 && U(i), r == null || r(i);
+  }, S = typeof e == "boolean" ? { escapeKey: e, clickOutside: e } : {
+    escapeKey: (e == null ? void 0 : e.escapeKey) ?? !1,
+    clickOutside: (e == null ? void 0 : e.clickOutside) ?? !1
+  };
+  X({
+    enabled: D,
+    allowedSelectors: ["[data-scroll-allowed]", ".motile-drawer__body"]
+  });
+  const p = () => {
+    if (!a.current) {
+      g(!1), setTimeout(() => {
+        N(!1), R(!1);
+      }, 300);
+      return;
+    }
+    a.current.style.transition = "transform 0.3s ease", a.current.style.transform = "translateY(100%)", g(!1), setTimeout(() => {
+      N(!1), R(!1);
+    }, 300);
+  };
+  M(() => {
+    D ? N(!0) : x && p();
+  }, [D]), M(() => {
+    if (!x || !a.current) return;
+    const i = a.current;
+    i.style.transition = "none", i.style.transform = "translateY(100%)", requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        i.style.transition = "transform 0.3s ease", i.style.transform = "translateY(0)", g(!0);
+      });
+    });
+  }, [x]), Z({
+    refs: [a],
+    handler: p,
+    enabled: D && S.clickOutside
+  }), k({
+    handler: p,
+    enabled: D && S.escapeKey
+  });
+  const j = {
+    open: x,
+    setOpen: R,
+    closeOnBackdrop: e,
+    closeOnDrag: o,
+    maxHeight: d,
+    width: c,
+    maxWidth: y,
+    zIndex: h,
+    drawerRef: a,
+    bodyRef: m,
+    isVisible: A,
+    handleClose: p,
+    handleDragStart: (i) => {
+      o && (l.current = i, b.current = !1);
+    },
+    handleDragMove: (i) => {
+      if (!o || !a.current || l.current === null || !m.current)
+        return;
+      const T = i - l.current;
+      m.current.scrollTop <= 0 && T > 0 && (b.current = !0, v.current = T, a.current.style.transition = "none", a.current.style.transform = `translateY(${T}px)`);
+    },
+    handleDragEnd: () => {
+      if (!o || !a.current) return;
+      const i = window.innerHeight * 0.2;
+      a.current.style.transition = "transform 0.3s ease", b.current && v.current > i ? p() : (a.current.style.transform = "translateY(0)", v.current = 0), b.current = !1, l.current = null;
+    }
+  };
+  return /* @__PURE__ */ u($.Provider, { value: j, children: t });
+};
+C.displayName = "Drawer.Root";
+const P = w(
+  ({ children: t, asChild: s, onClick: n, ...r }, e) => {
+    const { setOpen: o } = f(), d = (c) => {
+      n == null || n(c), o(!0);
+    };
+    return s ? /* @__PURE__ */ u(
+      Y,
+      {
+        ...r,
+        onClick: d,
+        ref: e,
+        children: t
+      }
+    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...r, children: t });
+  }
+);
+P.displayName = "Drawer.Trigger";
+const V = ({
+  children: t,
+  container: s
+}) => {
+  const { open: n } = f();
+  return !n || typeof document > "u" ? null : Q(t, s || document.body);
+};
+V.displayName = "Drawer.Portal";
+const H = w(
+  ({ className: t, ...s }, n) => {
+    const { isVisible: r, zIndex: e } = f();
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: n,
+        className: `motile-drawer__overlay ${r ? "motile-drawer__overlay--visible" : ""} ${t || ""}`,
+        style: { zIndex: e },
+        role: "presentation",
+        ...s
+      }
+    );
+  }
+);
+H.displayName = "Drawer.Overlay";
+const K = w(
+  ({ className: t, style: s, children: n, ...r }, e) => {
+    const { drawerRef: o, isVisible: d, maxHeight: c, width: y, maxWidth: h, zIndex: a } = f(), m = {
+      ...c !== "70dvh" && { "--drawer-max-height": c },
+      ...y !== "480px" && { "--drawer-width": y },
+      ...h && { "--drawer-max-width": h },
+      zIndex: a + 1,
+      ...s
+    };
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (l) => {
+          typeof e == "function" ? e(l) : e && (e.current = l), o.current = l;
+        },
+        className: `motile-drawer__content ${d ? "motile-drawer__content--visible" : ""} ${t || ""}`,
+        style: m,
+        onClick: (l) => l.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        ...r,
+        children: n
+      }
+    );
+  }
+);
+K.displayName = "Drawer.Content";
+const L = w(
+  ({ className: t, ...s }, n) => {
+    const { handleDragStart: r, handleDragMove: e, handleDragEnd: o } = f(), d = (a) => {
+      r(a.touches[0].clientY);
+    }, c = (a) => {
+      e(a.touches[0].clientY);
+    }, y = () => {
+      o();
+    }, h = (a) => {
+      r(a.clientY);
+      const m = (v) => {
+        e(v.clientY);
+      }, l = () => {
+        o(), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", l);
+      };
+      window.addEventListener("mousemove", m), window.addEventListener("mouseup", l);
+    };
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: n,
+        className: `motile-drawer__header ${t || ""}`,
+        onTouchStart: d,
+        onTouchMove: c,
+        onTouchEnd: y,
+        onMouseDown: h,
+        ...s,
+        children: /* @__PURE__ */ u("div", { className: "motile-drawer__handle", "aria-hidden": "true" })
+      }
+    );
+  }
+);
+L.displayName = "Drawer.Handle";
+const I = w(
+  ({ children: t, asChild: s, className: n, ...r }, e) => s && W.isValidElement(t) ? /* @__PURE__ */ u(
+    Y,
+    {
+      ...r,
+      className: `motile-drawer__title ${n || ""}`,
+      ref: e,
+      children: t
+    }
+  ) : /* @__PURE__ */ u("div", { className: "motile-drawer__title-wrapper", children: /* @__PURE__ */ u(
+    "h2",
+    {
+      ref: e,
+      id: "motile-drawer-title",
+      className: `motile-drawer__title ${n || ""}`,
+      ...r,
+      children: t
+    }
+  ) })
+);
+I.displayName = "Drawer.Title";
+const z = w(
+  ({ className: t, children: s, ...n }, r) => {
+    const { bodyRef: e } = f();
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (o) => {
+          typeof r == "function" ? r(o) : r && (r.current = o), e.current = o;
+        },
+        className: `motile-drawer__body ${t || ""}`,
+        "data-scroll-allowed": !0,
+        ...n,
+        children: s
+      }
+    );
+  }
+);
+z.displayName = "Drawer.Body";
+const q = w(
+  ({ children: t, asChild: s, onClick: n, ...r }, e) => {
+    const { handleClose: o } = f(), d = (c) => {
+      n == null || n(c), o();
+    };
+    return s ? /* @__PURE__ */ u(
+      Y,
+      {
+        ...r,
+        onClick: d,
+        ref: e,
+        children: t
+      }
+    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...r, children: t });
+  }
+);
+q.displayName = "Drawer.Close";
+const ue = {
+  Root: C,
+  Trigger: P,
+  Portal: V,
+  Overlay: H,
+  Content: K,
+  Handle: L,
+  Title: I,
+  Body: z,
+  Close: q
+};
+export {
+  ue as Drawer,
+  z as DrawerBody,
+  q as DrawerClose,
+  K as DrawerContent,
+  L as DrawerHandle,
+  H as DrawerOverlay,
+  V as DrawerPortal,
+  C as DrawerRoot,
+  I as DrawerTitle,
+  P as DrawerTrigger
+};

package/dist/components/Input/Input.css

@@ -0,0 +1 @@
+.motile-input-root{display:block;width:100%}.motile-input{width:100%;border:1px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:48px;line-height:1.4;box-sizing:border-box}.motile-input:hover:not(:disabled):not(:focus):not(.motile-input--error){border-color:#c9cdd2}.motile-input--outlined{border:2px solid #e5e8eb}.motile-input--outlined:focus{border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input--outlined:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb}.motile-input--underline:disabled{background:transparent;color:#9ca3af;cursor:not-allowed;border-bottom-color:#e5e7eb;opacity:.5}.motile-input--outlined.motile-input--error{border:2px solid #ef4444;background:#fef5f5}.motile-input--outlined.motile-input--error:focus{border:2px solid #ef4444;background:#fef5f5}.motile-input-wrapper--shake{animation:motile-input-shake .5s ease-in-out}@keyframes motile-input-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-input::placeholder{color:#9ca3af;opacity:1}.motile-input-wrapper{position:relative;width:100%}.motile-input--underline{border:none;border-bottom:2px solid #e5e8eb;border-radius:0;background:transparent;padding:18px 4px 4px;height:48px;line-height:1.5;transition:border-color .2s ease}.motile-input--underline:hover:not(:disabled):not(:focus):not(.motile-input--error){border-bottom-color:#9ca3af}.motile-input--underline:focus{border:none;border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline.motile-input--error{border-bottom-color:#ef4444}.motile-input--underline.motile-input--error:focus{border-bottom:2px solid #ef4444;padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:40px}.motile-input--outlined.motile-input--with-right-content:focus{padding-right:40px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}.motile-input__left-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{left:4px;top:calc(50% + 7px)}.motile-input__left-icon svg{width:100%;height:100%}.motile-input__right-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{right:4px;top:calc(50% + 7px)}.motile-input__right-icon svg{width:100%;height:100%}.motile-input__clear-button{position:absolute;right:12px;top:50%;transform:translateY(-50%);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-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{right:4px;top:calc(50% + 7px)}.motile-input__clear-button:hover{background:#f3f4f6;color:#6b7280}.motile-input__clear-icon{width:16px;height:16px}@media (max-width: 768px){.motile-input{font-size:16px;padding:12px;min-height:44px}.motile-input--outlined{border:2px solid #e5e8eb}.motile-input--outlined:focus{border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input--underline{padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline:focus{border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:36px}.motile-input--outlined.motile-input--with-right-content:focus{padding-right:36px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}}@supports (-webkit-touch-callout: none){.motile-input{-webkit-tap-highlight-color:transparent}}.motile-input__helper-text{display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}.motile-input__helper-text--both{justify-content:space-between}.motile-input__helper-text--error-only{justify-content:flex-start}.motile-input__helper-text--counter-only{justify-content:flex-end}.motile-input__error-message{font-size:12px;color:#ef4444;line-height:16px;flex:1}.motile-input__counter{font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}.motile-input__label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}.motile-input--with-label::placeholder{opacity:0}.motile-input--with-label:focus::placeholder{opacity:1}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:0;transform:translateY(-50%);font-size:12px;background:#fff;padding:0 4px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:14px;transform:translateY(-100%);font-size:12px}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input:focus) .motile-input__label--error,.motile-input-wrapper:has(.motile-input:not(:placeholder-shown)) .motile-input__label--error{color:#ef4444}.motile-input--outlined.motile-input--with-label{padding-top:12px;padding-bottom:12px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:44px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}@media (max-width: 768px){.motile-input__label{font-size:16px;left:12px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px;top:14px;transform:translateY(-100%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:36px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}}

package/dist/components/Input/Input.js

@@ -0,0 +1,122 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { forwardRef as D, useId as F, useRef as G, useEffect as H } from "react";
+import './Input.css';/* empty css          */
+const J = D(
+  ({
+    id: N,
+    autoFocus: $ = !1,
+    autoSelect: _ = !1,
+    variant: v = "outlined",
+    isError: y,
+    errorMessage: r,
+    onClear: m,
+    leftIcon: d,
+    rightIcon: p,
+    className: C,
+    value: o,
+    color: f,
+    style: B,
+    maxLength: h,
+    label: i,
+    placeholder: b,
+    ...w
+  }, j) => {
+    const x = F().replace(/:/g, ""), n = N ?? `motile-input-${x}`, R = G(null), l = j || R, s = y ?? !!r;
+    H(() => {
+      if ($ && l.current) {
+        const A = setTimeout(() => {
+          l.current && (l.current.focus(), _ && l.current.select());
+        }, 50);
+        return () => clearTimeout(A);
+      }
+    }, [$, _]);
+    const e = "motile-input", u = m && o, L = !!d, k = u || p, E = [
+      e,
+      `${e}--${v}`,
+      s && `${e}--error`,
+      L && `${e}--with-left-icon`,
+      k && `${e}--with-right-content`,
+      i && `${e}--with-label`,
+      C
+    ].filter(Boolean).join(" "), S = [
+      `${e}-wrapper`,
+      i && `${e}-wrapper--with-label`,
+      s && `${e}-wrapper--shake`
+    ].filter(Boolean).join(" "), T = [
+      `${e}__label`,
+      s && `${e}__label--error`
+    ].filter(Boolean).join(" "), z = f ? { "--motile-input-color": f } : void 0, I = {
+      ...B
+    }, g = o ? String(o).length : 0, c = h !== void 0, q = [
+      w["aria-describedby"],
+      r ? `${n}-error` : void 0,
+      c ? `${n}-counter` : void 0
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ a("div", { className: `${e}-root`, children: [
+      /* @__PURE__ */ a("div", { className: S, style: z, children: [
+        i && /* @__PURE__ */ t("label", { className: T, htmlFor: n, children: i }),
+        d && /* @__PURE__ */ t("div", { className: `${e}__left-icon`, children: d }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            id: n,
+            ...w,
+            "aria-describedby": q,
+            "aria-invalid": s || void 0,
+            ref: l,
+            className: E,
+            value: o,
+            maxLength: h,
+            style: I,
+            placeholder: i ? b || " " : b
+          }
+        ),
+        p && !u && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
+        u && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: m,
+            className: `${e}__clear-button`,
+            "aria-label": "지우기",
+            children: /* @__PURE__ */ t(
+              "svg",
+              {
+                className: `${e}__clear-icon`,
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ t("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+              }
+            )
+          }
+        )
+      ] }),
+      (r || c) && /* @__PURE__ */ a(
+        "div",
+        {
+          className: `${e}__helper-text ${r && c ? `${e}__helper-text--both` : r ? `${e}__helper-text--error-only` : `${e}__helper-text--counter-only`}`,
+          children: [
+            r && /* @__PURE__ */ t(
+              "span",
+              {
+                id: `${n}-error`,
+                className: `${e}__error-message`,
+                role: "alert",
+                children: r
+              }
+            ),
+            c && /* @__PURE__ */ a("span", { id: `${n}-counter`, className: `${e}__counter`, children: [
+              g,
+              "/",
+              h
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+J.displayName = "Input";
+export {
+  J as Input
+};

package/dist/components/Modal/Modal.css

@@ -0,0 +1 @@
+.motile-modal__backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:0 16px;box-sizing:border-box;overscroll-behavior:contain}.motile-modal__backdrop[data-variant=scale]{animation:motile-modal-fade-in .2s ease-out}.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp]{animation:motile-modal-fade-in .3s ease-out}.motile-modal__backdrop[data-variant=bottomSheet]{animation:motile-modal-fade-in .3s ease-out;align-items:flex-end;padding:0}@media (min-width: 769px){.motile-modal__backdrop{padding:0 24px}}.motile-modal{position:relative;z-index:1001;width:var(--modal-width);max-width:var(--modal-max-width, 100%)}.motile-modal[data-variant=scale]{animation:motile-modal-scale-in .25s ease-out}.motile-modal[data-variant=slideDown]{animation:motile-modal-slide-down .55s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=slideUp]{animation:motile-modal-slide-up .5s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=bottomSheet]{animation:motile-modal-bottom-sheet .35s cubic-bezier(.32,.72,0,1);width:var(--modal-width, 100%);max-width:var(--modal-max-width, 100%)}@media (min-width: 769px){.motile-modal[data-variant=bottomSheet]{width:var(--modal-width, 100%);max-width:var(--modal-max-width, var(--modal-width, 480px))}}@media (max-width: 768px){.motile-modal[data-variant=bottomSheet]{width:100%;max-width:none}}.motile-modal__content{background-color:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.motile-modal[data-variant=bottomSheet] .motile-modal__content{border-radius:20px 20px 0 0;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top));max-height:calc(90dvh - env(safe-area-inset-top));box-shadow:0 -10px 25px -5px #0000001a,0 -4px 10px -5px #0000000a}.motile-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.motile-modal__title{font-size:1rem;font-weight:600;color:#111827;margin:0;line-height:1.4}.motile-modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;border-radius:8px;color:#6b7280;transition:all .15s ease}.motile-modal__close:hover{background-color:#f3f4f6;color:#111827}.motile-modal__close:active{transform:scale(.95)}.motile-modal__close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.motile-modal__body{padding:24px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;color:#374151;line-height:1.6;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.motile-modal__body::-webkit-scrollbar{width:6px}.motile-modal__body::-webkit-scrollbar-track{background:transparent}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.motile-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-top:1px solid #e5e7eb;flex-shrink:0}@keyframes motile-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes motile-modal-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes motile-modal-slide-down{0%{opacity:0;transform:translateY(-100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-slide-up{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-bottom-sheet{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.motile-modal__backdrop[data-variant=scale],.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp],.motile-modal__backdrop[data-variant=bottomSheet]{animation:none}.motile-modal[data-variant=scale],.motile-modal[data-variant=slideDown],.motile-modal[data-variant=slideUp],.motile-modal[data-variant=bottomSheet]{animation:none;opacity:1;transform:none}.motile-modal__close:active{transform:none}}@media (prefers-contrast: high){.motile-modal__content{border:2px solid #000000}.motile-modal__header{border-bottom-width:2px}.motile-modal__footer{border-top-width:2px}.motile-modal__title{font-weight:700}}@media (max-width: 768px){.motile-modal__content{border-radius:16px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:20px}.motile-modal__title{font-size:1.125rem}.motile-modal__close:active{background-color:#e5e7eb}}@media (max-width: 390px){.motile-modal__backdrop{padding:0 12px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px}.motile-modal__title{font-size:1rem}}@media (hover: none) and (pointer: coarse){.motile-modal__close{min-width:44px;min-height:44px;padding:10px}}@supports (-webkit-touch-callout: none){.motile-modal__close{-webkit-tap-highlight-color:transparent}.motile-modal__content{margin-bottom:env(safe-area-inset-bottom)}}@media (max-height: 600px) and (orientation: landscape){.motile-modal__content{max-height:85vh;max-height:85dvh;border-radius:8px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px 24px}.motile-modal__title{font-size:1rem}}@media (prefers-color-scheme: dark){.motile-modal__backdrop{background-color:#000000bf}.motile-modal__content{background-color:#1f2937;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000004d}.motile-modal__header{border-bottom-color:#374151}.motile-modal__title{color:#f9fafb}.motile-modal__close{color:#9ca3af}.motile-modal__close:hover{background-color:#374151;color:#f9fafb}.motile-modal__body{color:#e5e7eb}.motile-modal__footer{border-top-color:#374151}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,231 @@
+import { jsx as l, jsxs as H } from "react/jsx-runtime";
+import n, { useRef as K, useId as h, createContext as L, useContext as k } from "react";
+import { createPortal as O } from "react-dom";
+import { Slot as P } from "../../utils/Slot.js";
+import { useClickOutside as V } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as q } from "../../hooks/useEscapeKey.js";
+import { useScrollLock as z } from "../../hooks/useScrollLock.js";
+import './Modal.css';/* empty css          */
+const v = L(null), m = () => {
+  const o = k(v);
+  if (!o)
+    throw new Error("Modal compound components must be used within Modal.Root");
+  return o;
+}, A = ({
+  open: o,
+  onOpenChange: t,
+  children: e
+}) => {
+  const a = h(), d = h(), r = n.useMemo(
+    () => ({
+      open: o,
+      onOpenChange: t,
+      titleId: a,
+      descriptionId: d
+    }),
+    [o, t, a, d]
+  );
+  return /* @__PURE__ */ l(v.Provider, { value: r, children: e });
+}, _ = n.forwardRef(
+  ({
+    container: o,
+    variant: t = "scale",
+    closeOnBackdrop: e = !0,
+    disableScrollLock: a = !1,
+    width: d,
+    maxWidth: r,
+    zIndex: s = 1e3,
+    className: f,
+    onClick: i,
+    style: $,
+    ...p
+  }, g) => {
+    const { open: c, onOpenChange: u } = m(), M = K(null), b = typeof e == "boolean" ? e : e.clickOutside ?? !1, S = typeof e == "boolean" ? e : e.escapeKey ?? !1;
+    z({
+      enabled: c && !a,
+      allowedSelectors: [".motile-modal__content"]
+    }), V({
+      refs: [M],
+      handler: () => {
+        b && u(!1);
+      },
+      enabled: c
+    }), q({
+      handler: () => {
+        S && u(!1);
+      },
+      enabled: c
+    });
+    const T = (y) => {
+      i == null || i(y), y.target === y.currentTarget && b && u(!1);
+    };
+    if (!c || typeof document > "u") return null;
+    const j = {
+      zIndex: s,
+      ...$
+    }, E = {
+      ...d && { "--modal-width": d },
+      ...r && { "--modal-max-width": r },
+      zIndex: s + 1
+    }, F = /* @__PURE__ */ l(
+      "div",
+      {
+        ref: g,
+        className: `motile-modal__backdrop ${f || ""}`,
+        "data-state": c ? "open" : "closed",
+        "data-variant": t,
+        onClick: T,
+        style: j,
+        ...p,
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            ref: M,
+            className: "motile-modal",
+            "data-variant": t,
+            style: E,
+            children: p.children
+          }
+        )
+      }
+    );
+    return O(F, o || document.body);
+  }
+);
+_.displayName = "Modal.Overlay";
+const N = n.forwardRef(
+  ({ className: o, forceMount: t, ...e }, a) => {
+    const { open: d, titleId: r, descriptionId: s } = m();
+    return !d && !t ? null : /* @__PURE__ */ l(
+      "div",
+      {
+        ref: a,
+        className: `motile-modal__content ${o || ""}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": r,
+        "aria-describedby": s,
+        "data-state": d ? "open" : "closed",
+        ...e
+      }
+    );
+  }
+);
+N.displayName = "Modal.Content";
+const w = n.forwardRef(
+  ({ className: o, ...t }, e) => {
+    const { titleId: a } = m();
+    return /* @__PURE__ */ l(
+      "h2",
+      {
+        ref: e,
+        id: a,
+        className: `motile-modal__title ${o || ""}`,
+        ...t
+      }
+    );
+  }
+);
+w.displayName = "Modal.Title";
+const x = n.forwardRef(
+  ({ className: o, ...t }, e) => {
+    const { descriptionId: a } = m();
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: e,
+        id: a,
+        className: `motile-modal__body ${o || ""}`,
+        ...t
+      }
+    );
+  }
+);
+x.displayName = "Modal.Body";
+const R = n.forwardRef(
+  ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
+    const { onOpenChange: s } = m(), f = (i) => {
+      e == null || e(i), s(!1);
+    };
+    return o ? /* @__PURE__ */ l(
+      P,
+      {
+        ...d,
+        onClick: f,
+        ref: r,
+        children: a
+      }
+    ) : /* @__PURE__ */ l(
+      "button",
+      {
+        ref: r,
+        type: "button",
+        className: `motile-modal__close ${t || ""}`,
+        onClick: f,
+        "aria-label": "닫기",
+        ...d,
+        children: a || /* @__PURE__ */ H(
+          "svg",
+          {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ l("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ l("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+R.displayName = "Modal.Close";
+const C = n.forwardRef(
+  ({ className: o, ...t }, e) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: e,
+      className: `motile-modal__footer ${o || ""}`,
+      ...t
+    }
+  )
+);
+C.displayName = "Modal.Footer";
+const I = n.forwardRef(
+  ({ className: o, ...t }, e) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: e,
+      className: `motile-modal__header ${o || ""}`,
+      ...t
+    }
+  )
+);
+I.displayName = "Modal.Header";
+const Z = {
+  Root: A,
+  Overlay: _,
+  Content: N,
+  Title: w,
+  Body: x,
+  Close: R,
+  Footer: C,
+  Header: I
+};
+export {
+  Z as Modal,
+  x as ModalBody,
+  R as ModalClose,
+  N as ModalContent,
+  C as ModalFooter,
+  I as ModalHeader,
+  _ as ModalOverlay,
+  A as ModalRoot,
+  w as ModalTitle
+};

package/dist/components/Popover/Popover.css

@@ -0,0 +1 @@
+.motile-popover-wrapper{position:relative;display:inline-block}.motile-popover-content{position:absolute;z-index:10;border-radius:12px;font-size:14px;line-height:1.5;padding:12px 16px;box-shadow:0 4px 12px #0000001a;pointer-events:auto;width:max-content;max-width:min(90vw,420px);box-sizing:border-box;overflow:visible;will-change:transform;backface-visibility:hidden}.motile-popover-content--filled{background:var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #3b82f6)) );color:#fff;border:1px solid var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #3b82f6)) )}.motile-popover-content--outlined{background:#fff;color:#111827;border:1px solid var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #e5e7eb)) )}.motile-popover-content[data-placement=top][data-align=start]{bottom:calc(100% + 5.5px);left:0;animation:popover-fade-in-top .2s ease-out}.motile-popover-content[data-placement=top][data-align=center]{bottom:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-top-center .2s ease-out}.motile-popover-content[data-placement=top][data-align=end]{bottom:calc(100% + 5.5px);right:0;animation:popover-fade-in-top .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=start]{top:calc(100% + 5.5px);left:0;animation:popover-fade-in-bottom .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=center]{top:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-bottom-center .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=end]{top:calc(100% + 5.5px);right:0;animation:popover-fade-in-bottom .2s ease-out}.motile-popover-content[data-placement=left][data-align=start]{right:calc(100% + 5.5px);top:0;animation:popover-fade-in-left .2s ease-out}.motile-popover-content[data-placement=left][data-align=center]{right:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-left-center .2s ease-out}.motile-popover-content[data-placement=left][data-align=end]{right:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-left .2s ease-out}.motile-popover-content[data-placement=right][data-align=start]{left:calc(100% + 5.5px);top:0;animation:popover-fade-in-right .2s ease-out}.motile-popover-content[data-placement=right][data-align=center]{left:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-right-center .2s ease-out}.motile-popover-content[data-placement=right][data-align=end]{left:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-right .2s ease-out}@keyframes popover-fade-in-top{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-top-center{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-bottom{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-bottom-center{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-left{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-left-center{0%{opacity:0;transform:translate(8px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes popover-fade-in-right{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-right-center{0%{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}.motile-popover-content[data-placement=top][data-align=start][data-bounce=true],.motile-popover-content[data-placement=top][data-align=end][data-bounce=true]{animation:popover-bounce-top .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=top][data-align=center][data-bounce=true]{animation:popover-bounce-top-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=start][data-bounce=true],.motile-popover-content[data-placement=bottom][data-align=end][data-bounce=true]{animation:popover-bounce-bottom .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=center][data-bounce=true]{animation:popover-bounce-bottom-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=start][data-bounce=true],.motile-popover-content[data-placement=left][data-align=end][data-bounce=true]{animation:popover-bounce-left .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=center][data-bounce=true]{animation:popover-bounce-left-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=start][data-bounce=true],.motile-popover-content[data-placement=right][data-align=end][data-bounce=true]{animation:popover-bounce-right .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=center][data-bounce=true]{animation:popover-bounce-right-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-top{0%,to{transform:translateY(0)}30%{transform:translateY(-10px)}50%{transform:translateY(0)}65%{transform:translateY(-3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-top-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,-10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,-3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-bottom{0%,to{transform:translateY(0)}30%{transform:translateY(10px)}50%{transform:translateY(0)}65%{transform:translateY(3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-bottom-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-left{0%,to{transform:translate(0)}30%{transform:translate(-10px)}50%{transform:translate(0)}65%{transform:translate(-3px)}80%{transform:translate(0)}}@keyframes popover-bounce-left-center{0%,to{transform:translateY(-50%)}30%{transform:translate(-10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(-3px,-50%)}80%{transform:translateY(-50%)}}@keyframes popover-bounce-right{0%,to{transform:translate(0)}30%{transform:translate(10px)}50%{transform:translate(0)}65%{transform:translate(3px)}80%{transform:translate(0)}}@keyframes popover-bounce-right-center{0%,to{transform:translateY(-50%)}30%{transform:translate(10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(3px,-50%)}80%{transform:translateY(-50%)}}.motile-popover-arrow{position:absolute;pointer-events:none;z-index:1}.motile-popover-content[data-placement=top] .motile-popover-arrow{bottom:-7.25px;transform:rotate(180deg)}.motile-popover-content[data-placement=top][data-align=start] .motile-popover-arrow{left:20px}.motile-popover-content[data-placement=top][data-align=center] .motile-popover-arrow{left:50%;margin-left:-6px}.motile-popover-content[data-placement=top][data-align=end] .motile-popover-arrow{right:20px}.motile-popover-content[data-placement=bottom] .motile-popover-arrow{top:-7.25px;transform:rotate(0)}.motile-popover-content[data-placement=bottom][data-align=start] .motile-popover-arrow{left:20px}.motile-popover-content[data-placement=bottom][data-align=center] .motile-popover-arrow{left:50%;margin-left:-6px}.motile-popover-content[data-placement=bottom][data-align=end] .motile-popover-arrow{right:20px}.motile-popover-content[data-placement=left] .motile-popover-arrow{right:-9.25px;transform:rotate(90deg)}.motile-popover-content[data-placement=left][data-align=start] .motile-popover-arrow{top:12px}.motile-popover-content[data-placement=left][data-align=center] .motile-popover-arrow{top:50%;margin-top:-4px}.motile-popover-content[data-placement=left][data-align=end] .motile-popover-arrow{bottom:12px}.motile-popover-content[data-placement=right] .motile-popover-arrow{left:-9.25px;transform:rotate(-90deg)}.motile-popover-content[data-placement=right][data-align=start] .motile-popover-arrow{top:12px}.motile-popover-content[data-placement=right][data-align=center] .motile-popover-arrow{top:50%;margin-top:-4px}.motile-popover-content[data-placement=right][data-align=end] .motile-popover-arrow{bottom:12px}