motile-ui 1.0.1 → 1.0.3

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,111 @@
+import { jsxs as h, jsx as y } from "react/jsx-runtime";
+import { forwardRef as Q, useRef as U, useState as V, useMemo as X, useEffect as Z, useLayoutEffect as z } from "react";
+import './Textarea.css';/* empty css             */
+const F = Q(
+  ({
+    autoFocus: _ = !1,
+    autoSelect: b = !1,
+    isError: T,
+    errorMessage: o,
+    className: C,
+    value: c,
+    color: R,
+    style: j,
+    maxLength: m,
+    label: a,
+    placeholder: v,
+    rows: d = 4,
+    resize: I = "none",
+    autoSize: n = !1,
+    ...H
+  }, S) => {
+    const E = U(null), i = S || E, [f, W] = V({ height: void 0, isMaxHeight: !1 }), p = T ?? !!o, t = X(() => typeof n == "boolean" ? n ? { minRows: d, maxRows: void 0 } : void 0 : n ? {
+      minRows: n.minRows ?? d,
+      maxRows: n.maxRows
+    } : void 0, [n, d]);
+    Z(() => {
+      if (_ && i.current) {
+        const s = setTimeout(() => {
+          i.current && (i.current.focus(), b && i.current.select());
+        }, 50);
+        return () => clearTimeout(s);
+      }
+    }, [_, b]), z(() => {
+      if (!t || !i.current) return;
+      const s = i.current;
+      s.style.height = "auto";
+      const J = s.scrollHeight, l = window.getComputedStyle(s), B = parseInt(l.lineHeight, 10), K = parseInt(l.paddingTop, 10), L = parseInt(l.paddingBottom, 10), M = parseInt(l.borderTopWidth, 10), O = parseInt(l.borderBottomWidth, 10), N = K + L + M + O, g = t.minRows ? B * t.minRows + N : void 0, u = t.maxRows ? B * t.maxRows + N : void 0;
+      let r = J, w = !1;
+      g !== void 0 && r < g && (r = g), u !== void 0 && r > u && (r = u, w = !0), s.style.height = `${r}px`, W(($) => r !== $.height || w !== $.isMaxHeight ? { height: r, isMaxHeight: w } : $);
+    }, [c, t]);
+    const e = "motile-textarea", k = [
+      e,
+      p && `${e}--error`,
+      p && `${e}--shake`,
+      a && `${e}--with-label`,
+      C
+    ].filter(Boolean).join(" "), D = [
+      `${e}-wrapper`,
+      a && `${e}-wrapper--with-label`
+    ].filter(Boolean).join(" "), P = [
+      `${e}__label`,
+      p && `${e}__label--error`
+    ].filter(Boolean).join(" "), Y = R ? { "--motile-textarea-color": R } : void 0, q = {
+      ...j,
+      resize: t ? "none" : I,
+      ...t ? {
+        height: f.height !== void 0 ? f.height : "auto",
+        minHeight: "auto",
+        overflowY: f.isMaxHeight ? "auto" : "hidden"
+      } : {}
+    }, A = c ? String(c).length : 0, x = m !== void 0, G = [
+      H["aria-describedby"],
+      o ? `${e}-error` : void 0
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ h("div", { className: `${e}-root`, children: [
+      /* @__PURE__ */ h("div", { className: D, style: Y, children: [
+        a && /* @__PURE__ */ y("label", { className: P, children: a }),
+        /* @__PURE__ */ y(
+          "textarea",
+          {
+            ...H,
+            "aria-describedby": G,
+            ref: i,
+            className: k,
+            value: c,
+            maxLength: m,
+            rows: d,
+            style: q,
+            placeholder: a ? v || " " : v
+          }
+        )
+      ] }),
+      (o || x) && /* @__PURE__ */ h(
+        "div",
+        {
+          className: `${e}__helper-text ${o && x ? `${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
+              }
+            ),
+            x && /* @__PURE__ */ h("span", { className: `${e}__counter`, children: [
+              A,
+              "/",
+              m
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+F.displayName = "Textarea";
+export {
+  F 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,178 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as x, useEffect as g, useCallback as w, useMemo as p, createContext as L, useContext as y } from "react";
+import { createPortal as I } from "react-dom";
+import './Toast.css';/* empty css          */
+const C = L(null);
+function V() {
+  const e = y(C);
+  if (!e)
+    throw new Error("useToastContext must be used within ToastProvider");
+  return e;
+}
+function $({ toast: e, onRemove: a }) {
+  const [o, c] = x(!1), l = w(() => {
+    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}`,
+    o && `${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 [o, c] = x([]), [l, d] = x(!1);
+  g(() => {
+    d(!0);
+  }, []);
+  const n = w(
+    (r, m = "default", i) => {
+      const f = `toast-${Date.now()}-${Math.random()}`, T = {
+        id: f,
+        message: r,
+        variant: m,
+        duration: (i == null ? void 0 : i.duration) ?? 4e3,
+        zIndex: i == null ? void 0 : i.zIndex,
+        createdAt: Date.now()
+      };
+      return c((M) => [T, ...M]), f;
+    },
+    []
+  ), u = w((r) => {
+    c((m) => m.filter((i) => i.id !== r));
+  }, []), h = p(
+    () => ({
+      toasts: o,
+      addToast: n
+    }),
+    [o, n]
+  ), v = o.filter(
+    (r) => r.zIndex !== void 0
+  ), k = v.length > 0 ? Math.max(...v.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: k },
+          children: o.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)}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,321 @@
+import { jsxs as tt, jsx as W } from "react/jsx-runtime";
+import et, { useState as A, useEffect as H, useCallback as T, useId as ot, useRef as I, useLayoutEffect as nt, createContext as rt, useContext as it } from "react";
+import { createPortal as st } from "react-dom";
+import { Slot as at } from "../../utils/Slot.js";
+import { FloatingArrow as lt } from "../../utils/FloatingArrow.js";
+import './Tooltip.css';/* empty css            */
+const G = rt(null);
+function X() {
+  const t = it(G);
+  if (!t)
+    throw new Error("Tooltip components must be used within Tooltip.Root");
+  return t;
+}
+const s = 8;
+function D(t, e, r, i, a, m, u) {
+  switch (t) {
+    case "top":
+      return e.top - a.top - i >= s;
+    case "bottom":
+      return e.bottom + a.bottom + i <= u - s;
+    case "left":
+      return e.left - a.left - r >= s;
+    case "right":
+      return e.right + a.right + r <= m - s;
+  }
+}
+function ct(t) {
+  return [{
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  }[t]];
+}
+function ut(t, e, r, i) {
+  if (!(r < 768))
+    return ct(t);
+  const u = e.top + e.height / 2 < i / 2;
+  return t === "left" || t === "right" ? [u ? "bottom" : "top", u ? "top" : "bottom", t === "left" ? "right" : "left"] : t === "top" || t === "bottom" ? [t === "top" ? "bottom" : "top"] : [];
+}
+function pt(t, e, r, i) {
+  const a = {
+    top: t.top - e.top - s,
+    bottom: i - t.bottom - e.bottom - s,
+    left: t.left - e.left - s,
+    right: r - t.right - e.right - s
+  };
+  let m = "bottom", u = a.bottom;
+  for (const [n, l] of Object.entries(a))
+    l > u && (u = l, m = n);
+  return m;
+}
+function ft({
+  children: t,
+  position: e = "top",
+  align: r = "center",
+  variant: i = "filled",
+  color: a,
+  showArrow: m = !1,
+  keepOpen: u = !1,
+  offset: n
+}) {
+  const l = n === void 0 ? { top: 7, bottom: 6, left: 6, right: 6 } : typeof n == "number" ? { top: n, bottom: n, left: n, right: n } : {
+    top: n.top ?? 7,
+    bottom: n.bottom ?? 6,
+    left: n.left ?? 6,
+    right: n.right ?? 6
+  }, k = ot().replace(/:/g, ""), w = I(null), x = I(null), p = I(), [b, N] = A(!1), [P, Z] = A(e), [J, K] = A({}), F = I(null), B = T((M, E = 0) => {
+    p.current && (clearTimeout(p.current), p.current = void 0), !M && E > 0 ? p.current = window.setTimeout(
+      () => N(!1),
+      E
+    ) : N(M);
+  }, []);
+  nt(() => {
+    if (!b || !w.current || !x.current) return;
+    const M = () => {
+      if (!w.current || !x.current) return;
+      const o = w.current.getBoundingClientRect(), y = x.current;
+      y.classList.add("measuring"), y.offsetHeight;
+      const $ = window.getComputedStyle(y), V = parseFloat($.width), Y = parseFloat($.height);
+      let c = V, d = Y;
+      y.classList.remove("measuring");
+      const R = window.innerWidth, O = window.innerHeight;
+      (isNaN(c) || c <= 0) && (c = 100), (isNaN(d) || d <= 0) && (d = 50);
+      const _ = R - s * 2, z = O - s * 2;
+      c > _ && (c = _), d > z && (d = z);
+      let v = e;
+      if (o.width === 0 && o.height === 0 || D(e, o, c, d, l, R, O))
+        v = e;
+      else {
+        const L = ut(e, o, R, O);
+        let q = !1;
+        for (const U of L)
+          if (D(U, o, c, d, l, R, O)) {
+            v = U, q = !0;
+            break;
+          }
+        q || (v = pt(o, l, R, O));
+      }
+      let f = 0, g = 0;
+      if (v === "top" || v === "bottom") {
+        switch (r) {
+          case "start":
+            f = o.left;
+            break;
+          case "center":
+            f = o.left + o.width / 2 - c / 2;
+            break;
+          case "end":
+            f = o.right - c;
+            break;
+        }
+        f = Math.max(s, Math.min(f, R - s - c)), g = v === "top" ? o.top - l.top - d : o.bottom + l.bottom, g = Math.max(s, Math.min(g, O - s - d));
+      } else {
+        switch (r) {
+          case "start":
+            g = o.top;
+            break;
+          case "center":
+            g = o.top + o.height / 2 - d / 2;
+            break;
+          case "end":
+            g = o.bottom - d;
+            break;
+        }
+        g = Math.max(s, Math.min(g, O - s - d)), v === "left" ? (f = o.left - l.left - c, f < s && (c = o.left - l.left - s, f = s)) : (f = o.right + l.right, f + c > R - s && (c = R - s - f));
+      }
+      let h = 0;
+      const S = 12, C = 16;
+      if (v === "left" || v === "right") {
+        switch (r) {
+          case "start":
+            h = o.top - g + S;
+            break;
+          case "center":
+            h = o.top + o.height / 2 - g;
+            break;
+          case "end":
+            h = o.bottom - g - S;
+            break;
+        }
+        const L = Math.max(C, d - C);
+        h = Math.max(
+          C,
+          Math.min(h, L)
+        );
+      } else {
+        switch (r) {
+          case "start":
+            h = o.left - f + S;
+            break;
+          case "center":
+            h = o.left + o.width / 2 - f;
+            break;
+          case "end":
+            h = o.right - f - S;
+            break;
+        }
+        const L = Math.max(C, c - C);
+        h = Math.max(
+          C,
+          Math.min(h, L)
+        );
+      }
+      isNaN(h) && (h = C), Z(v), K({
+        left: Math.round(f),
+        top: Math.round(g),
+        ...c !== V && { maxWidth: c },
+        ...d !== Y && { maxHeight: z },
+        "--arrow-offset": `${Math.round(h)}px`,
+        ...a && { "--motile-tooltip-color": a }
+      });
+    }, E = () => {
+      F.current === null && (F.current = requestAnimationFrame(() => {
+        M(), F.current = null;
+      }));
+    };
+    M(), window.addEventListener("scroll", E, {
+      passive: !0,
+      capture: !0
+    }), window.addEventListener("resize", E, { passive: !0 });
+    const j = new ResizeObserver(E);
+    return w.current && j.observe(w.current), () => {
+      F.current !== null && (cancelAnimationFrame(F.current), F.current = null), window.removeEventListener("scroll", E, { capture: !0 }), window.removeEventListener("resize", E), j.disconnect();
+    };
+  }, [b, e, r, a, n]), H(() => {
+    if (!b) return;
+    const M = () => {
+      B(!1, 0);
+    };
+    return window.addEventListener("scroll", M, { capture: !0 }), () => {
+      window.removeEventListener("scroll", M, { capture: !0 });
+    };
+  }, [b, B]), H(() => () => {
+    p.current && clearTimeout(p.current);
+  }, []);
+  const Q = {
+    open: b,
+    setOpen: B,
+    position: e,
+    align: r,
+    variant: i,
+    showArrow: m,
+    color: a,
+    keepOpen: u,
+    tooltipId: `${k}-tooltip`,
+    triggerRef: w,
+    contentRef: x,
+    style: J,
+    placement: P
+  };
+  return /* @__PURE__ */ W(G.Provider, { value: Q, children: t });
+}
+function mt({ children: t, asChild: e = !1 }) {
+  const { open: r, setOpen: i, tooltipId: a, triggerRef: m, keepOpen: u } = X(), n = T(() => {
+    i(!0, 0);
+  }, [i]), l = T(() => {
+    u ? i(!1, 100) : i(!1, 0);
+  }, [i, u]), k = T(() => {
+    i(!0, 0);
+  }, [i]), w = T(() => {
+    i(!1, 0);
+  }, [i]), x = T(() => {
+    i(!r, 0);
+  }, [i, r]);
+  return e ? /* @__PURE__ */ W(
+    at,
+    {
+      ref: (p) => {
+        m.current = p;
+      },
+      className: "motile-tooltip-trigger",
+      "aria-describedby": r ? a : void 0,
+      tabIndex: 0,
+      onMouseEnter: n,
+      onMouseLeave: l,
+      onFocus: k,
+      onBlur: w,
+      onClick: x,
+      children: t
+    }
+  ) : et.cloneElement(t, {
+    ref: (p) => {
+      m.current = p;
+      const b = t.props.ref || t.ref;
+      b && (typeof b == "function" ? b(p) : typeof b == "object" && b !== null && (b.current = p));
+    },
+    className: `motile-tooltip-trigger ${t.props.className || ""}`.trim(),
+    "aria-describedby": r ? a : void 0,
+    tabIndex: t.props.tabIndex ?? 0,
+    onMouseEnter: n,
+    onMouseLeave: l,
+    onFocus: k,
+    onBlur: w,
+    onClick: x
+  });
+}
+function bt({ children: t }) {
+  const {
+    open: e,
+    setOpen: r,
+    tooltipId: i,
+    contentRef: a,
+    variant: m,
+    showArrow: u,
+    keepOpen: n,
+    align: l,
+    style: k,
+    placement: w
+  } = X(), [x, p] = A(!1);
+  H(() => {
+    e ? requestAnimationFrame(() => {
+      p(!0);
+    }) : p(!1);
+  }, [e]);
+  const b = T(() => {
+    n && r(!0, 0);
+  }, [n, r]), N = T(() => {
+    n && r(!1, 0);
+  }, [n, r]), P = k["--motile-tooltip-color"] || (m === "filled" ? "var(--motile-ui-tooltip, rgba(0, 0, 0, 0.9))" : "var(--motile-ui-tooltip, #3b82f6)");
+  return !e || typeof document > "u" ? null : st(
+    /* @__PURE__ */ tt(
+      "div",
+      {
+        ref: a,
+        id: i,
+        role: "tooltip",
+        className: `motile-tooltip-bubble motile-tooltip-bubble--${m}`,
+        "data-open": x || void 0,
+        "data-placement": w,
+        "data-align": l,
+        "data-show-arrow": u || void 0,
+        "data-keep-open": n || void 0,
+        style: k,
+        "aria-hidden": !e,
+        onMouseEnter: b,
+        onMouseLeave: N,
+        children: [
+          t,
+          u && /* @__PURE__ */ W(
+            lt,
+            {
+              className: "motile-tooltip-arrow",
+              variant: m,
+              color: P
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+const Mt = {
+  Root: ft,
+  Trigger: mt,
+  Content: bt
+};
+export {
+  Mt as Tooltip
+};