motile-ui 1.0.1 → 1.0.3

package/dist/components/Popover/Popover.js

@@ -0,0 +1,197 @@
+import { jsxs as $, jsx as g } from "react/jsx-runtime";
+import h, { useCallback as R, useId as k, useRef as I, useMemo as N, createContext as j, useContext as E } from "react";
+import './Popover.css';/* empty css            */
+import { Slot as T } from "../../utils/Slot.js";
+import { useClickOutside as A } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as B } from "../../hooks/useEscapeKey.js";
+import { FloatingArrow as F } from "../../utils/FloatingArrow.js";
+const S = j(null);
+function C() {
+  const t = E(S);
+  if (!t)
+    throw new Error("Popover components must be used within Popover.Root");
+  return t;
+}
+function K({
+  value: t,
+  defaultValue: s = !1,
+  onChange: o
+}) {
+  const e = t !== void 0, [r, i] = h.useState(s), l = e ? t : r, a = R(
+    (c) => {
+      const m = typeof c == "function" ? c(l) : c;
+      e || i(m), o == null || o(m);
+    },
+    [e, o, l]
+  );
+  return [l, a];
+}
+function M({
+  children: t,
+  position: s = "top",
+  align: o = "center",
+  variant: e = "filled",
+  showArrow: r = !1,
+  zIndex: i = 10,
+  color: l,
+  bounceCount: a = 0,
+  open: c,
+  defaultOpen: m = !1,
+  onOpenChange: f,
+  onClickOutside: u,
+  onDismiss: v,
+  autoClose: d = !0
+}) {
+  const n = k().replace(/:/g, ""), x = I(null), w = I(null), b = I(null), [P, p] = K({
+    value: c,
+    defaultValue: m,
+    onChange: f
+  }), y = N(
+    () => ({
+      open: P,
+      setOpen: p,
+      position: s,
+      align: o,
+      variant: e,
+      showArrow: r,
+      zIndex: i,
+      color: l,
+      autoClose: d,
+      bounceCount: a,
+      onOpenChange: f,
+      onClickOutside: u,
+      onDismiss: v,
+      triggerId: `${n}-trigger`,
+      contentId: `${n}-content`,
+      triggerRef: x,
+      contentRef: w,
+      wrapperRef: b
+    }),
+    [
+      P,
+      p,
+      s,
+      o,
+      e,
+      r,
+      i,
+      l,
+      d,
+      a,
+      f,
+      u,
+      v,
+      n
+    ]
+  );
+  return /* @__PURE__ */ g(S.Provider, { value: y, children: /* @__PURE__ */ g("div", { ref: b, className: "motile-popover-wrapper", children: t }) });
+}
+function V({ children: t, asChild: s = !1 }) {
+  const { open: o, setOpen: e, triggerId: r, contentId: i, triggerRef: l } = C(), a = R(() => {
+    e((c) => !c);
+  }, [e]);
+  return s ? /* @__PURE__ */ g(
+    T,
+    {
+      ref: (c) => {
+        l.current = c;
+      },
+      id: r,
+      "aria-expanded": o,
+      "aria-controls": i,
+      onClick: a,
+      children: t
+    }
+  ) : /* @__PURE__ */ g(
+    "button",
+    {
+      ref: l,
+      id: r,
+      type: "button",
+      "aria-expanded": o,
+      "aria-controls": i,
+      onClick: a,
+      children: t
+    }
+  );
+}
+function q({
+  children: t,
+  className: s = "",
+  style: o
+}) {
+  const {
+    open: e,
+    setOpen: r,
+    position: i,
+    align: l,
+    variant: a,
+    showArrow: c,
+    zIndex: m,
+    color: f,
+    autoClose: u,
+    bounceCount: v,
+    onClickOutside: d,
+    onDismiss: n,
+    contentId: x,
+    contentRef: w,
+    wrapperRef: b
+  } = C();
+  if (B({
+    handler: R(
+      (p) => {
+        u && (n == null || n(p), p.defaultPrevented || r(!1));
+      },
+      [u, n, r]
+    ),
+    enabled: e
+  }), A({
+    refs: [b],
+    handler: R(
+      (p) => {
+        u && (d == null || d(p), n == null || n(p), p.defaultPrevented || r(!1));
+      },
+      [u, d, n, r]
+    ),
+    enabled: e
+  }), !e) return null;
+  const P = v !== 0;
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      ref: w,
+      id: x,
+      role: "dialog",
+      "aria-modal": "false",
+      className: `motile-popover-content motile-popover-content--${a} ${s}`,
+      "data-placement": i,
+      "data-align": l,
+      "data-bounce": P ? "true" : "false",
+      style: {
+        zIndex: m,
+        ...f && { "--motile-popover-color": f },
+        "--bounce-count": v,
+        ...o
+      },
+      children: [
+        c && /* @__PURE__ */ g(
+          F,
+          {
+            className: "motile-popover-arrow",
+            variant: a,
+            color: f || (a === "filled" ? "var(--motile-ui-popover, var(--motile-theme, #3b82f6))" : "var(--motile-ui-popover, var(--motile-theme, #e5e7eb))")
+          }
+        ),
+        t
+      ]
+    }
+  );
+}
+const U = {
+  Root: M,
+  Trigger: V,
+  Content: q
+};
+export {
+  U as Popover
+};

package/dist/components/Sheet/Sheet.css

@@ -0,0 +1 @@
+.motile-sheet__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;display:flex}.motile-sheet__overlay--left{justify-content:flex-start}.motile-sheet__overlay--right{justify-content:flex-end}.motile-sheet__overlay--visible{background-color:#0006}.motile-sheet__content{position:fixed;top:0;bottom:0;margin:0;width:100%;max-width:var(--sheet-max-width, 600px);height:100vh;height:100dvh;background-color:#fff;box-shadow:0 0 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-sheet__content--left{left:0;border-right:1px solid #e5e7eb;transform:translate(-100%)}.motile-sheet__content--left.motile-sheet__content--visible{transform:translate(0)}.motile-sheet__content--right{right:0;border-left:1px solid #e5e7eb;transform:translate(100%)}.motile-sheet__content--right.motile-sheet__content--visible{transform:translate(0)}@media (max-width: 768px){.motile-sheet__content{max-width:none;width:100%}}.motile-sheet__header{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;flex-shrink:0;border-bottom:1px solid #e5e7eb;background-color:#fff;user-select:none;-webkit-user-select:none}.motile-sheet__header button{color:inherit}@media (min-width: 769px){.motile-sheet__header{height:64px;padding:0 24px}}.motile-sheet__back-button{display:flex;align-items:center;gap:12px;background:none;border:none;padding:8px 12px 8px 4px;margin-left:-4px;cursor:pointer;border-radius:8px;color:#111827;transition:all .2s ease;font-size:16px;font-weight:600}.motile-sheet__back-button:hover{background-color:#f3f4f6}.motile-sheet__back-button:active{transform:scale(.98)}.motile-sheet__chevron{width:24px;height:24px;flex-shrink:0}.motile-sheet__title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:600;color:#111827;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.motile-sheet__title{font-size:16px}}.motile-sheet__close{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:0;margin:0;background:none;border:none;border-radius:6px;cursor:pointer;color:#6b7280;transition:all .15s ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.motile-sheet__close:hover{background-color:#f3f4f6;color:#111827}.motile-sheet__close:active{transform:scale(.95);background-color:#e5e7eb}.motile-sheet__close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.motile-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box;background-color:#fff}@media (min-width: 769px){.motile-sheet__body{padding:20px 24px}}.motile-sheet__body::-webkit-scrollbar{width:6px}.motile-sheet__body::-webkit-scrollbar-track{background:transparent}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme: dark){.motile-sheet__content{background-color:#1f2937;box-shadow:0 0 30px #00000080}.motile-sheet__content--left{border-right-color:#374151}.motile-sheet__content--right{border-left-color:#374151}.motile-sheet__header{background-color:#1f2937;border-bottom-color:#374151}.motile-sheet__back-button{color:#f9fafb}.motile-sheet__back-button:hover{background-color:#374151}.motile-sheet__title{color:#f9fafb}.motile-sheet__body{background-color:#1f2937}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}.motile-sheet__close{color:#9ca3af}.motile-sheet__close:hover{background-color:#374151;color:#f9fafb}.motile-sheet__close:active{background-color:#4b5563}}@media (prefers-reduced-motion: reduce){.motile-sheet__content,.motile-sheet__overlay{transition:none}}@media (hover: none) and (pointer: coarse){.motile-sheet__header{height:60px}.motile-sheet__chevron{width:26px;height:26px}}

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,283 @@
+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 { Slot as g } from "../../utils/Slot.js";
+import { useScrollLock as N } 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);
+function k() {
+  const e = w(I);
+  if (!e)
+    throw new Error("Sheet components must be used within Sheet.Root");
+  return e;
+}
+function z({
+  value: e,
+  defaultValue: n = !1,
+  onChange: o
+}) {
+  const t = e !== void 0, [a, l] = S(n), s = t ? e : a, i = v(
+    (r) => {
+      const f = typeof r == "function" ? r(s) : r;
+      t || l(f), o == null || o(f);
+    },
+    [t, o, s]
+  );
+  return [s, i];
+}
+function B({
+  children: e,
+  position: n = "right",
+  closeOnBackdrop: o = !0,
+  maxWidth: t = "600px",
+  zIndex: a = 1e3,
+  open: l,
+  defaultOpen: s = !1,
+  onOpenChange: i
+}) {
+  const r = F().replace(/:/g, ""), f = x(null), p = x(null), [d, c] = z({
+    value: l,
+    defaultValue: s,
+    onChange: i
+  }), { isClosingFromHistory: h, navigateAndClose: y } = q({
+    isOpen: d,
+    onClose: () => c(!1)
+  }), m = A(
+    () => ({
+      open: d,
+      setOpen: c,
+      position: n,
+      closeOnBackdrop: o,
+      maxWidth: t,
+      zIndex: a,
+      onOpenChange: i,
+      triggerId: `${r}-trigger`,
+      contentId: `${r}-content`,
+      overlayRef: f,
+      sheetRef: p,
+      isClosingFromHistory: h,
+      navigateAndClose: y
+    }),
+    [
+      d,
+      c,
+      n,
+      o,
+      t,
+      a,
+      i,
+      r,
+      f,
+      p,
+      h,
+      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);
+  }, [t]);
+  return n ? /* @__PURE__ */ u(
+    g,
+    {
+      id: a,
+      "aria-expanded": o,
+      "aria-controls": l,
+      onClick: s,
+      children: e
+    }
+  ) : /* @__PURE__ */ u(
+    "button",
+    {
+      id: a,
+      type: "button",
+      "aria-expanded": o,
+      "aria-controls": l,
+      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);
+}
+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
+  };
+  b(() => {
+    if (o)
+      f(!0);
+    else if (r) {
+      d(!1);
+      const m = setTimeout(() => {
+        f(!1);
+      }, 300);
+      return () => clearTimeout(m);
+    }
+  }, [o, r]), b(() => {
+    if (!r || !o) return;
+    const m = requestAnimationFrame(() => {
+      const _ = requestAnimationFrame(() => {
+        d(!0);
+      });
+      return () => cancelAnimationFrame(_);
+    });
+    return () => cancelAnimationFrame(m);
+  }, [r, o]);
+  const h = v(
+    (m) => {
+      c.clickOutside && m.target === i.current && t(!1);
+    },
+    [c.clickOutside, t, i]
+  );
+  if (!r)
+    return null;
+  const y = {
+    zIndex: s,
+    ...n
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: i,
+      className: `motile-sheet__overlay ${p ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${a} ${e}`,
+      style: y,
+      onClick: h,
+      role: "presentation"
+    }
+  );
+}
+function L({ children: e, className: n = "", style: o }) {
+  const {
+    open: t,
+    setOpen: a,
+    position: l,
+    closeOnBackdrop: s,
+    maxWidth: i,
+    zIndex: r,
+    contentId: f,
+    sheetRef: p,
+    isClosingFromHistory: d
+  } = k(), [c, h] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
+    escapeKey: s.escapeKey ?? !1,
+    clickOutside: s.clickOutside ?? !1
+  };
+  if (N({
+    enabled: t,
+    allowedSelectors: [".motile-sheet__body"]
+  }), H({
+    refs: [p],
+    handler: () => a(!1),
+    enabled: t && _.clickOutside
+  }), V({
+    handler: () => a(!1),
+    enabled: t && _.escapeKey
+  }), b(() => {
+    if (t)
+      h(!0);
+    else if (c) {
+      m(!1);
+      const C = setTimeout(() => {
+        h(!1);
+      }, d ? 0 : 300);
+      return () => clearTimeout(C);
+    }
+  }, [t, c, d]), b(() => {
+    if (!c || !t || d) return;
+    const O = requestAnimationFrame(() => {
+      const C = requestAnimationFrame(() => {
+        m(!0);
+      });
+      return () => cancelAnimationFrame(C);
+    });
+    return () => cancelAnimationFrame(O);
+  }, [c, t, d]), !c)
+    return null;
+  const R = {
+    ...i !== "600px" && { "--sheet-max-width": i },
+    zIndex: r + 1,
+    ...o
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: p,
+      id: f,
+      className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
+      style: R,
+      role: "dialog",
+      "aria-modal": "true",
+      children: e
+    }
+  );
+}
+function D({ children: e, className: n = "" }) {
+  return /* @__PURE__ */ u("div", { className: `motile-sheet__header ${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 });
+}
+function G({ children: e, asChild: n = !1 }) {
+  const { setOpen: o } = k(), t = v(() => {
+    o(!1);
+  }, [o]);
+  return n ? /* @__PURE__ */ u(
+    g,
+    {
+      className: "motile-sheet__close",
+      onClick: t,
+      "aria-label": "닫기",
+      children: e
+    }
+  ) : /* @__PURE__ */ u(
+    "button",
+    {
+      className: "motile-sheet__close",
+      onClick: t,
+      "aria-label": "닫기",
+      type: "button",
+      children: e || /* @__PURE__ */ $(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          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" })
+          ]
+        }
+      )
+    }
+  );
+}
+const ne = {
+  Root: B,
+  Trigger: P,
+  Portal: j,
+  Overlay: E,
+  Content: L,
+  Header: D,
+  Title: M,
+  Body: W,
+  Close: G
+};
+export {
+  ne as Sheet
+};

package/dist/components/Skeleton/Skeleton.css

@@ -0,0 +1 @@
+.motile-skeleton{display:inline-block;position:relative;overflow:hidden;background-color:#e5e7eb}.motile-skeleton:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#fff0,#fff6,#fff0);transform:translate(-100%);animation:motile-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes motile-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.motile-skeleton:after{animation:none;display:none}}@media (prefers-color-scheme: dark){.motile-skeleton{background-color:#374151}.motile-skeleton:after{background:linear-gradient(90deg,#fff0,#ffffff1a,#fff0)}}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx as p } from "react/jsx-runtime";
+import './Skeleton.css';/* empty css             */
+const f = ({
+  width: o = "100%",
+  height: r = "1rem",
+  borderRadius: s = "4px",
+  className: a,
+  style: i,
+  ...l
+}) => {
+  const n = ["motile-skeleton", a].filter(Boolean).join(" "), t = (e, c) => e === void 0 ? c : typeof e == "number" ? `${e}px` : e, m = {
+    ...i,
+    width: t(o, "100%"),
+    height: t(r, "1rem"),
+    borderRadius: t(s, "4px")
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: n,
+      style: m,
+      "aria-busy": "true",
+      "aria-live": "polite",
+      ...l
+    }
+  );
+};
+export {
+  f as Skeleton
+};

package/dist/components/SpeedDial/SpeedDial.css

@@ -0,0 +1 @@
+.motile-speed-dial{position:relative;display:inline-flex;align-items:center;justify-content:center}.motile-speed-dial__trigger{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:none;border-radius:50%;background-color:var(--motile-speeddial-color, var(--motile-theme, #3b82f6));color:#fff;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:16px;font-weight:500}.motile-speed-dial__trigger:hover{filter:brightness(.9);box-shadow:0 6px 16px #0003,0 3px 6px #00000026;transform:scale(1.05)}.motile-speed-dial__trigger:active{filter:brightness(.85);transform:scale(.95);box-shadow:0 2px 8px #00000026,0 1px 3px #0000001a}.motile-speed-dial__trigger[aria-expanded=true]{filter:brightness(.75);transform:rotate(45deg)}.motile-speed-dial__actions{position:absolute;display:flex;gap:12px;z-index:1}.motile-speed-dial__actions[data-direction=up]{flex-direction:column-reverse;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px}.motile-speed-dial__actions[data-direction=down]{flex-direction:column;top:100%;left:50%;transform:translate(-50%);margin-top:12px}.motile-speed-dial__actions[data-direction=left]{flex-direction:row-reverse;right:100%;top:50%;transform:translateY(-50%);margin-right:12px}.motile-speed-dial__actions[data-direction=right]{flex-direction:row;left:100%;top:50%;transform:translateY(-50%);margin-left:12px}.motile-speed-dial__action{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:none;border-radius:50%;background-color:#fff;color:#374151;box-shadow:0 2px 8px #0000001a,0 1px 3px #00000014;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:14px}.motile-speed-dial__action:hover{background-color:#f3f4f6;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;transform:scale(1.08)}.motile-speed-dial__action:active{transform:scale(.95);box-shadow:0 1px 4px #0000001a,0 0 2px #00000014}.motile-speed-dial__actions[data-direction=up] .motile-speed-dial__action{animation:motile-speed-dial-slide-up .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=down] .motile-speed-dial__action{animation:motile-speed-dial-slide-down .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=left] .motile-speed-dial__action{animation:motile-speed-dial-slide-left .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=right] .motile-speed-dial__action{animation:motile-speed-dial-slide-right .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}@keyframes motile-speed-dial-slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes motile-speed-dial-slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes motile-speed-dial-slide-left{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes motile-speed-dial-slide-right{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.motile-speed-dial__actions[data-direction=up] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=down] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=left] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=right] .motile-speed-dial__action{animation:none}}.motile-speed-dial__trigger:focus-visible,.motile-speed-dial__action:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-color-scheme: dark){.motile-speed-dial__trigger{box-shadow:0 4px 12px #0000004d,0 2px 4px #0003}.motile-speed-dial__trigger:hover{box-shadow:0 6px 16px #0006,0 3px 6px #0000004d}.motile-speed-dial__action{background-color:#374151;color:#f9fafb;box-shadow:0 2px 8px #0000004d,0 1px 3px #0003}.motile-speed-dial__action:hover{background-color:#4b5563;box-shadow:0 4px 12px #0006,0 2px 4px #0000004d}}

package/dist/components/SpeedDial/SpeedDial.js

@@ -0,0 +1,149 @@
+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 './SpeedDial.css';/* empty css              */
+const _ = R(null), g = () => {
+  const e = h(_);
+  if (!e)
+    throw new Error(
+      "SpeedDial compound components must be used within SpeedDial.Root"
+    );
+  return e;
+}, I = ({
+  open: e,
+  onOpenChange: t,
+  direction: i = "up",
+  color: d,
+  closeOnClickOutside: n = !0,
+  closeOnEscapeKey: a = !0,
+  children: o
+}) => {
+  const l = y(null), r = b();
+  v({
+    refs: [l],
+    handler: () => {
+      n && t(!1);
+    },
+    enabled: e
+  }), A({
+    handler: () => {
+      a && t(!1);
+    },
+    enabled: e
+  });
+  const p = m.useMemo(
+    () => ({
+      open: e,
+      onOpenChange: t,
+      direction: i,
+      triggerId: r
+    }),
+    [e, t, i, r]
+  ), u = d ? { "--motile-speeddial-color": d } : void 0;
+  return /* @__PURE__ */ s(_.Provider, { value: p, children: /* @__PURE__ */ s(
+    "div",
+    {
+      ref: l,
+      className: "motile-speed-dial",
+      style: u,
+      children: o
+    }
+  ) });
+}, S = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...n }, a) => {
+  const { open: o, onOpenChange: l, triggerId: r } = g(), p = (u) => {
+    t == null || t(u), u.defaultPrevented || l(!o);
+  };
+  return d ? /* @__PURE__ */ s(
+    f,
+    {
+      ref: a,
+      id: r,
+      className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
+      "aria-expanded": o,
+      "aria-haspopup": "menu",
+      onClick: p,
+      ...n,
+      children: i
+    }
+  ) : /* @__PURE__ */ s(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      id: r,
+      className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
+      "aria-expanded": o,
+      "aria-haspopup": "menu",
+      onClick: p,
+      ...n,
+      children: i
+    }
+  );
+});
+S.displayName = "SpeedDial.Trigger";
+const x = c(({ className: e, children: t, ...i }, d) => {
+  const { open: n, direction: a, triggerId: o } = g();
+  if (!n) return null;
+  const l = m.Children.map(t, (r, p) => m.isValidElement(r) ? m.cloneElement(r, {
+    style: {
+      "--action-index": p,
+      ...r.props.style || {}
+    }
+  }) : r);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: d,
+      role: "menu",
+      "aria-labelledby": o,
+      className: e ? `motile-speed-dial__actions ${e}` : "motile-speed-dial__actions",
+      "data-direction": a,
+      ...i,
+      children: l
+    }
+  );
+});
+x.displayName = "SpeedDial.Actions";
+const D = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...n }, a) => {
+  const o = (l) => {
+    t == null || t(l);
+  };
+  return d ? /* @__PURE__ */ s(
+    f,
+    {
+      ref: a,
+      role: "menuitem",
+      className: e ? `motile-speed-dial__action ${e}` : "motile-speed-dial__action",
+      onClick: o,
+      ...n,
+      children: i
+    }
+  ) : /* @__PURE__ */ s(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      role: "menuitem",
+      className: e ? `motile-speed-dial__action ${e}` : "motile-speed-dial__action",
+      onClick: o,
+      ...n,
+      children: i
+    }
+  );
+});
+D.displayName = "SpeedDial.Action";
+const P = {
+  Root: I,
+  Trigger: S,
+  Actions: x,
+  Action: D
+};
+export {
+  P as SpeedDial,
+  D as SpeedDialAction,
+  x as SpeedDialActions,
+  I as SpeedDialRoot,
+  S as SpeedDialTrigger
+};

package/dist/components/Switch/Switch.css

@@ -0,0 +1 @@
+.motile-switch-container{display:inline-flex;flex-direction:column;gap:4px}.motile-switch-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.motile-switch-container--disabled .motile-switch-wrapper{cursor:not-allowed;opacity:.6}.motile-switch{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.motile-switch:focus{outline:none}.motile-switch__track{position:relative;width:44px;height:24px;background-color:#e5e7eb;border-radius:24px;transition:background-color .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.motile-switch__thumb{position:absolute;width:18px;height:18px;background-color:#fff;border-radius:50%;left:3px;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0000001a}.motile-switch:checked+.motile-switch__track{background-color:var( --motile-switch-color, var(--motile-ui-switch, var(--motile-theme, #3b82f6)) )}.motile-switch:checked+.motile-switch__track .motile-switch__thumb{transform:translate(20px)}.motile-switch:not(:checked)+.motile-switch__track:hover{background-color:#d1d5db}.motile-switch:checked+.motile-switch__track:hover{background-color:color-mix(in srgb,var( --motile-switch-color, var(--motile-ui-switch, var(--motile-theme, #3b82f6)) ) 90%,black)}.motile-switch:disabled+.motile-switch__track{background-color:#f3f4f6;cursor:not-allowed}.motile-switch:disabled:checked+.motile-switch__track{background-color:#d1d5db}.motile-switch:disabled+.motile-switch__track .motile-switch__thumb{box-shadow:none}.motile-switch--elastic+.motile-switch__track .motile-switch__thumb{transition:none;will-change:transform}.motile-switch--elastic:checked+.motile-switch__track .motile-switch__thumb{animation:switch-slide-on .35s cubic-bezier(.25,.1,.25,1);transform:translate(20px);transform-origin:left center}.motile-switch--elastic:not(:checked)+.motile-switch__track .motile-switch__thumb{animation:switch-slide-off .35s cubic-bezier(.25,.1,.25,1);transform:translate(0);transform-origin:right center}@keyframes switch-slide-on{0%{transform:translate(0) scaleX(1)}10%{transform:translate(.5px) scaleX(1.05)}25%{transform:translate(3px) scaleX(1.25)}45%{transform:translate(8px) scaleX(1.4)}65%{transform:translate(14px) scaleX(1.3)}85%{transform:translate(18.5px) scaleX(1.08)}95%{transform:translate(19.8px) scaleX(1.02)}to{transform:translate(20px) scaleX(1)}}@keyframes switch-slide-off{0%{transform:translate(20px) scaleX(1)}10%{transform:translate(19.5px) scaleX(1.05)}25%{transform:translate(17px) scaleX(1.25)}45%{transform:translate(12px) scaleX(1.4)}65%{transform:translate(6px) scaleX(1.3)}85%{transform:translate(1.5px) scaleX(1.08)}95%{transform:translate(.2px) scaleX(1.02)}to{transform:translate(0) scaleX(1)}}.motile-switch--bounce+.motile-switch__track .motile-switch__thumb{transition:none;will-change:transform}.motile-switch--bounce:checked+.motile-switch__track .motile-switch__thumb{animation:switch-bounce-on .65s cubic-bezier(.68,-.55,.27,1.55);transform:translate(20px)}.motile-switch--bounce:not(:checked)+.motile-switch__track .motile-switch__thumb{animation:switch-bounce-off .65s cubic-bezier(.68,-.55,.27,1.55);transform:translate(0)}@keyframes switch-bounce-on{0%{transform:translate(0)}60%{transform:translate(23px)}80%{transform:translate(18px)}95%{transform:translate(20.5px)}to{transform:translate(20px)}}@keyframes switch-bounce-off{0%{transform:translate(20px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}95%{transform:translate(-.5px)}to{transform:translate(0)}}