motile-ui 1.0.2 → 1.0.4

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+.motile-accordion{overflow:hidden}.motile-accordion__header{width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background-color .2s ease;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;-webkit-user-select:none;user-select:none;padding:16px 20px;color:#111827;background-color:transparent;font-size:16px;font-weight:400;-webkit-text-size-adjust:100%}.motile-accordion__header:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}@media (hover: hover) and (pointer: fine){.motile-accordion__header:not(:disabled):hover{background-color:#f9fafb}}@media (hover: none) and (pointer: coarse){.motile-accordion__header:not(:disabled):active{background-color:#f3f4f6}}.motile-accordion__title{flex:1;min-width:0;text-align:left;font-size:16px;font-weight:400;color:#111827}.motile-accordion__chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);width:20px;height:20px;color:#9ca3af}.motile-accordion--expanded .motile-accordion__chevron,.motile-accordion[data-state=open] .motile-accordion__chevron{transform:rotate(180deg)}.motile-accordion__panel{overflow:hidden;height:0;transition:height .25s cubic-bezier(.4,0,.2,1)}.motile-accordion__content{line-height:1.6;opacity:0;transform:translateY(-8px);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);padding:14px 20px 20px;color:#374151;font-size:14px}.motile-accordion--expanded .motile-accordion__content,.motile-accordion[data-state=open] .motile-accordion__content{opacity:1;transform:translateY(0)}.motile-accordion--disabled,.motile-accordion[data-disabled]{cursor:not-allowed;opacity:.6}.motile-accordion--disabled .motile-accordion__header,.motile-accordion[data-disabled] .motile-accordion__header{cursor:not-allowed}.motile-accordion--outlined{border:1.5px solid #e5e7eb;border-radius:12px}.motile-accordion--outlined.motile-accordion--expanded .motile-accordion__header,.motile-accordion--outlined[data-state=open] .motile-accordion__header{border-bottom:1px solid #e5e7eb}@media (max-width: 768px){.motile-accordion__header{padding:16px 18px;font-size:16px;-webkit-text-size-adjust:100%}.motile-accordion__content{padding:14px 18px 18px;font-size:15px;-webkit-text-size-adjust:100%}.motile-accordion__title{font-size:16px}.motile-accordion__chevron{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){.motile-accordion__panel,.motile-accordion__content,.motile-accordion__chevron{transition:none!important}}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,121 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m, useState as _, useId as j, useRef as I, useCallback as v, createContext as N, useEffect as P, useContext as k } from "react";
+import { Slot as y } from "../../utils/Slot.js";
+import './Accordion.css';/* empty css              */
+const u = "motile-accordion", w = N(null), C = () => {
+  const n = k(w);
+  if (!n)
+    throw new Error("AccordionHeader/Content must be used within <Accordion>");
+  return n;
+}, $ = m(
+  ({
+    variant: n = "filled",
+    defaultExpanded: d = !1,
+    expanded: f,
+    onChange: o,
+    disabled: s = !1,
+    className: t,
+    children: h,
+    asChild: i = !1,
+    ...p
+  }, c) => {
+    const [g, e] = _(d), l = f !== void 0, a = l ? f : g, B = `accordion-panel-${j()}`, E = I(null), H = v(() => {
+      if (s) return;
+      const A = !a;
+      l || e(A), o == null || o(A);
+    }, [s, a, l, o]), x = {
+      ...p,
+      "data-state": a ? "open" : "closed",
+      "data-disabled": s ? "" : void 0,
+      "data-variant": n
+    }, O = [
+      u,
+      `${u}--${n}`,
+      a && `${u}--expanded`,
+      s && `${u}--disabled`,
+      t
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ r(
+      w.Provider,
+      {
+        value: { isOpen: a, toggle: H, disabled: s, variant: n, panelId: B, panelRef: E },
+        children: i ? /* @__PURE__ */ r(y, { ref: c, ...x, className: t, children: h }) : /* @__PURE__ */ r("div", { ...x, ref: c, className: O, children: h })
+      }
+    );
+  }
+);
+$.displayName = "Accordion";
+const R = m(
+  ({ className: n, children: d, asChild: f = !1, ...o }, s) => {
+    const { isOpen: t, toggle: h, disabled: i, panelId: p } = C(), c = {
+      ...o,
+      onClick: (e) => {
+        var l;
+        (l = o.onClick) == null || l.call(o, e), h();
+      },
+      "aria-expanded": t,
+      "aria-controls": p,
+      "aria-disabled": i,
+      type: "button",
+      disabled: i,
+      "data-state": t ? "open" : "closed",
+      "data-disabled": i ? "" : void 0
+    };
+    if (f)
+      return /* @__PURE__ */ r(y, { ref: s, ...c, className: n, children: d });
+    const g = [`${u}__header`, n].filter(Boolean).join(" ");
+    return /* @__PURE__ */ r("button", { ...c, ref: s, className: g, children: d });
+  }
+);
+R.displayName = "Accordion.Header";
+const b = m(
+  ({ className: n, children: d, asChild: f = !1, ...o }, s) => {
+    const { isOpen: t, panelId: h, panelRef: i } = C(), p = v(() => {
+      const e = i.current;
+      if (!e) return;
+      if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        e.style.height = t ? "auto" : "0px";
+        return;
+      }
+      if (t) {
+        (e.style.height === "" || e.style.height === "auto") && (e.style.height = "0px"), e.getBoundingClientRect(), e.style.height = `${e.scrollHeight}px`;
+        const a = () => {
+          t && (e.style.height = "auto"), e.removeEventListener("transitionend", a);
+        };
+        e.addEventListener("transitionend", a);
+      } else
+        (e.style.height === "" || e.style.height === "auto") && (e.style.height = `${e.scrollHeight}px`), e.getBoundingClientRect(), e.style.height = "0px";
+    }, [t, i]);
+    P(() => {
+      const e = i.current;
+      if (e)
+        return e.style.willChange = "height", p(), () => {
+          e.style.willChange = "";
+        };
+    }, [p, i]);
+    const c = {
+      ...o,
+      "aria-hidden": !t,
+      "data-state": t ? "open" : "closed"
+    }, g = [`${u}__content`, n].filter(Boolean).join(" ");
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        id: h,
+        ref: i,
+        className: `${u}__panel`,
+        "aria-hidden": !t,
+        "data-state": t ? "open" : "closed",
+        children: f ? /* @__PURE__ */ r(y, { ref: s, ...c, className: n, children: d }) : /* @__PURE__ */ r("div", { ...c, ref: s, className: g, children: d })
+      }
+    );
+  }
+);
+b.displayName = "Accordion.Content";
+const D = Object.assign($, {
+  Header: R,
+  Content: b
+});
+export {
+  D as Accordion
+};

package/dist/components/Badge/Badge.css

@@ -0,0 +1 @@
+.motile-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--large{padding:6px 16px;font-size:1rem;min-height:32px}.motile-badge--medium{padding:5px 12px;font-size:.875rem;min-height:26px}.motile-badge--small{padding:4px 8px;font-size:.75rem;min-height:24px}.motile-badge--primary{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--secondary{background:color-mix(in srgb,var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6))) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--secondary.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--secondary.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--secondary.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--outlined{background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--outlined.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--outlined.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--outlined.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--dot{background-color:transparent;padding:0;gap:6px;color:inherit}.motile-badge__dot{display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge__text{line-height:1.2}.motile-badge--dot.motile-badge--large .motile-badge__dot{width:12px;height:12px}.motile-badge--dot.motile-badge--medium .motile-badge__dot{width:10px;height:10px}.motile-badge--dot.motile-badge--small .motile-badge__dot{width:8px;height:8px}.motile-badge--shimmer{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}.motile-badge--shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){.motile-badge--shimmer:before{animation:none}}@media (max-width: 768px){.motile-badge:active{filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-badge{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,24 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import $ from "react";
+import './Badge.css';/* empty css          */
+const f = $.forwardRef(
+  ({ variant: e, size: d = "medium", color: t, className: r, children: o, style: i, ...m }, l) => {
+    const s = "motile-badge", c = [
+      s,
+      `${s}--${d}`,
+      e && `${s}--${e}`,
+      r
+    ].filter(Boolean).join(" "), n = {
+      ...i,
+      ...t && { "--motile-badge-color": t }
+    };
+    return e === "dot" ? /* @__PURE__ */ p("span", { ref: l, className: c, style: n, ...m, children: [
+      /* @__PURE__ */ a("span", { className: `${s}__dot` }),
+      /* @__PURE__ */ a("span", { className: `${s}__text`, children: o })
+    ] }) : /* @__PURE__ */ a("span", { ref: l, className: c, style: n, ...m, children: o });
+  }
+);
+f.displayName = "Badge";
+export {
+  f as Badge
+};

package/dist/components/Button/Button.css

@@ -0,0 +1 @@
+.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:52px;min-height:52px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:14px;height:48px;min-height:48px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}

package/dist/components/Button/Button.js

@@ -0,0 +1,73 @@
+import { jsx as t, jsxs as $ } from "react/jsx-runtime";
+import b from "react";
+import { Slot as h } from "../../utils/Slot.js";
+import './Button.css';/* empty css           */
+const j = b.forwardRef(
+  ({
+    variant: _ = "primary",
+    size: l = "large",
+    fullWidth: i,
+    color: e,
+    hoverOnTouch: u = !1,
+    isLoading: s = !1,
+    asChild: d = !1,
+    children: o,
+    className: f,
+    disabled: n,
+    style: N,
+    ...r
+  }, c) => {
+    const a = "motile-btn", y = i ?? l === "large", m = [
+      a,
+      `${a}--${_}`,
+      `${a}--${l}`,
+      y && `${a}--full-width`,
+      (n || s) && `${a}--disabled`,
+      s && `${a}--loading`,
+      u && `${a}--hover-on-touch`,
+      f
+    ].filter(Boolean).join(" "), p = {
+      ...N,
+      ...e && { "--motile-btn-color": e }
+    };
+    return d ? /* @__PURE__ */ t(h, { ref: c, className: m, style: p, ...r, children: o }) : /* @__PURE__ */ t(
+      "button",
+      {
+        ref: c,
+        type: "button",
+        className: m,
+        disabled: n || s,
+        "aria-busy": s || void 0,
+        style: p,
+        ...r,
+        children: /* @__PURE__ */ $("span", { className: `${a}__wrapper`, children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: `${a}__content`,
+              style: { opacity: s ? 0 : 1 },
+              children: o
+            }
+          ),
+          s && /* @__PURE__ */ t(
+            "span",
+            {
+              className: `${a}__loading`,
+              role: "status",
+              "aria-label": "Loading",
+              children: /* @__PURE__ */ $("span", { className: `${a}__dots`, children: [
+                /* @__PURE__ */ t("span", { className: `${a}__dot` }),
+                /* @__PURE__ */ t("span", { className: `${a}__dot` }),
+                /* @__PURE__ */ t("span", { className: `${a}__dot` })
+              ] })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+j.displayName = "Button";
+export {
+  j as Button
+};

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1 @@
+.motile-checkbox-container{display:inline-flex;flex-direction:column;gap:4px}.motile-checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.motile-checkbox-container--disabled .motile-checkbox-wrapper{cursor:not-allowed;opacity:.6}.motile-checkbox{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.motile-checkbox:focus{outline:none}.motile-checkbox__mark{position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid #d1d5db;border-radius:4px;background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.motile-checkbox--rounded+.motile-checkbox__mark{border-radius:50%}.motile-checkbox--square+.motile-checkbox__mark{border-radius:0}.motile-checkbox--large+.motile-checkbox__mark{width:24px;height:24px;min-width:24px;min-height:24px}.motile-checkbox--large+.motile-checkbox__mark .motile-checkbox__check-icon{width:14px;height:14px}.motile-checkbox--medium+.motile-checkbox__mark{width:20px;height:20px;min-width:20px;min-height:20px}.motile-checkbox--medium+.motile-checkbox__mark .motile-checkbox__check-icon{width:12px;height:12px}.motile-checkbox--small+.motile-checkbox__mark{width:16px;height:16px;min-width:16px;min-height:16px}.motile-checkbox--small+.motile-checkbox__mark .motile-checkbox__check-icon{width:10px;height:10px}.motile-checkbox__check-icon{width:12px;height:12px;color:#fff;flex-shrink:0;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.motile-checkbox__check-icon path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .05s}.motile-checkbox--filled+.motile-checkbox__mark{background-color:#e5e7eb;border-color:#e5e7eb}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );animation:checkboxBounce .4s cubic-bezier(.68,-.55,.265,1.55)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox--filled:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}@keyframes checkboxBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox-wrapper:hover .motile-checkbox__mark{border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox:checked+.motile-checkbox__mark:hover{background-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black);border-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black)}.motile-checkbox:disabled+.motile-checkbox__mark{background-color:#f3f4f6;border-color:#d1d5db;cursor:not-allowed}.motile-checkbox:disabled:checked+.motile-checkbox__mark{background-color:#d1d5db;border-color:#d1d5db}.motile-checkbox__label{font-size:14px;color:#374151;cursor:pointer;margin:0;padding:0}.motile-checkbox-container--large .motile-checkbox__label{font-size:16px}.motile-checkbox-container--medium .motile-checkbox__label{font-size:14px}.motile-checkbox-container--small .motile-checkbox__label{font-size:12px}.motile-checkbox__label--disabled{color:#9ca3af;cursor:not-allowed}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,69 @@
+import { jsx as o, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import './Checkbox.css';/* empty css             */
+const f = b(
+  ({
+    variant: s = "standard",
+    size: a = "medium",
+    label: c,
+    color: l,
+    filled: r = !1,
+    className: t,
+    disabled: n,
+    style: i,
+    ...d
+  }, m) => {
+    const e = "motile-checkbox", $ = [
+      `${e}-container`,
+      `${e}-container--${s}`,
+      `${e}-container--${a}`,
+      n && `${e}-container--disabled`,
+      r && `${e}-container--filled`
+    ].filter(Boolean).join(" "), h = [
+      e,
+      `${e}--${s}`,
+      `${e}--${a}`,
+      r && `${e}--filled`,
+      t
+    ].filter(Boolean).join(" "), p = [
+      `${e}__label`,
+      n && `${e}__label--disabled`
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ o("div", { className: $, style: l ? { "--motile-checkbox-color": l } : void 0, children: /* @__PURE__ */ k("label", { className: `${e}-wrapper`, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ...d,
+          ref: m,
+          type: "checkbox",
+          className: h,
+          disabled: n,
+          style: i
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: `${e}__mark`, children: /* @__PURE__ */ o(
+        "svg",
+        {
+          className: `${e}__check-icon`,
+          viewBox: "0 0 16 16",
+          fill: "none",
+          children: /* @__PURE__ */ o(
+            "path",
+            {
+              d: "M13.5 4L6 11.5L2.5 8",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }),
+      c && /* @__PURE__ */ o("span", { className: p, children: c })
+    ] }) });
+  }
+);
+f.displayName = "Checkbox";
+export {
+  f as Checkbox
+};

package/dist/components/Dock/Dock.css

@@ -0,0 +1 @@
+.motile-dock{display:inline-flex;align-items:center;gap:12px;padding:8px 16px;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:50px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000d,inset 0 0 0 1px #fff3;position:relative;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.motile-dock[data-position=top],.motile-dock[data-position=bottom]{flex-direction:row}.motile-dock[data-position=left],.motile-dock[data-position=right]{flex-direction:column}.motile-dock__item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:10px;background:transparent;color:#374151;cursor:pointer;transition:background .2s ease;outline:none;will-change:transform;transform:translateZ(0)}.motile-dock[data-position=top] .motile-dock__item{transform-origin:center top}.motile-dock[data-position=bottom] .motile-dock__item{transform-origin:center bottom}.motile-dock[data-position=left] .motile-dock__item{transform-origin:left center}.motile-dock[data-position=right] .motile-dock__item{transform-origin:right center}.motile-dock__item:hover{background:#fff6}.motile-dock__item:active{background:#fff9;filter:brightness(.9)}.motile-dock__item:focus-visible{outline:2px solid rgba(100,116,139,.6);outline-offset:2px}.motile-dock__item>*{pointer-events:none}.motile-dock__separator{position:relative;flex-shrink:0}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{width:1px;height:40px;margin:0 6px;background:linear-gradient(to bottom,#0000,#00000026 20%,#00000026 80%,#0000)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{height:1px;width:40px;margin:6px 0;background:linear-gradient(to right,#0000,#00000026 20%,#00000026 80%,#0000)}@media (prefers-color-scheme: dark){.motile-dock{background:#1e1e1eb3;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 0 0 1px #ffffff0d}.motile-dock__item{color:#e5e7eb}.motile-dock__item:hover{background:#ffffff1a}.motile-dock__item:active{background:#fff3;filter:brightness(.9)}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{background:linear-gradient(to bottom,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{background:linear-gradient(to right,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}}@media (prefers-contrast: high){.motile-dock{border:2px solid currentColor;background:#fffffff2}.motile-dock__item{border:1px solid currentColor}}@media (prefers-reduced-motion: reduce){.motile-dock,.motile-dock__item{transition:none}}@media (max-width: 768px){.motile-dock{gap:6px;padding:6px 12px;border-radius:40px}.motile-dock__item{width:36px;height:36px;min-width:36px;min-height:36px}}@media (hover: none) and (pointer: coarse){.motile-dock__item{min-width:44px;min-height:44px;transform:scale(1)!important}}.motile-dock:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50px;padding:1px;background:linear-gradient(135deg,#fff6,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@media (prefers-color-scheme: dark){.motile-dock:before{background:linear-gradient(135deg,#fff3,#ffffff0d)}}.motile-dock__item:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:14px;background:radial-gradient(circle at center,color-mix(in srgb,var( --motile-dock-color, var(--motile-ui-dock, var(--motile-theme, #3b82f6)) ) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.motile-dock__item:hover:before{opacity:1}@media (prefers-contrast: high){.motile-dock__item:before{display:none}.motile-dock:before{display:none}}

package/dist/components/Dock/Dock.js

@@ -0,0 +1,151 @@
+import { jsx as s, jsxs as X } from "react/jsx-runtime";
+import g, { forwardRef as N, useRef as b, useEffect as L, useState as Y, createContext as P, useContext as q } from "react";
+import { Tooltip as f } from "../Tooltip/Tooltip.js";
+import './Dock.css';/* empty css         */
+const $ = P(null), A = () => {
+  const o = q($);
+  if (!o)
+    throw new Error("Dock compound components must be used within Dock.Root");
+  return o;
+}, E = N(
+  ({
+    position: o = "bottom",
+    zIndex: e = 1e3,
+    color: a,
+    className: p,
+    children: R,
+    style: d,
+    ...v
+  }, u) => {
+    const [t, h] = Y(null), [l, m] = Y(null), r = b(null), x = 1.7, n = (c) => {
+      h(c.clientX), m(c.clientY);
+    }, k = () => {
+      h(null), m(null);
+    }, y = g.useMemo(
+      () => ({
+        magnification: x,
+        mouseX: t,
+        mouseY: l,
+        position: o,
+        color: a
+      }),
+      [x, t, l, o, a]
+    );
+    return /* @__PURE__ */ s($.Provider, { value: y, children: /* @__PURE__ */ s(
+      "div",
+      {
+        ref: (c) => {
+          typeof u == "function" ? u(c) : u && (u.current = c), r.current = c;
+        },
+        className: `motile-dock ${p || ""}`,
+        "data-position": o,
+        style: { ...d, zIndex: e },
+        onMouseMove: n,
+        onMouseLeave: k,
+        ...v,
+        children: R
+      }
+    ) });
+  }
+);
+E.displayName = "Dock.Root";
+const I = N(
+  ({ icon: o, label: e, asChild: a, color: p, className: R, children: d, style: v, ...u }, t) => {
+    const {
+      magnification: h,
+      mouseX: l,
+      mouseY: m,
+      position: r,
+      color: x
+    } = A(), n = b(null), k = b(), y = p || x;
+    L(() => {
+      if (!n.current || window.matchMedia(
+        "(hover: none) and (pointer: coarse)"
+      ).matches) return;
+      const D = () => {
+        if (n.current)
+          if (l !== null && m !== null) {
+            const M = n.current.getBoundingClientRect();
+            let w;
+            if (r === "top" || r === "bottom") {
+              const C = M.left + M.width / 2;
+              w = Math.abs(l - C);
+            } else {
+              const C = M.top + M.height / 2;
+              w = Math.abs(m - C);
+            }
+            const T = Math.max(0, 1 - w / 100), j = T * T, F = 1 + (h - 1) * j;
+            n.current.style.transform = `scale(${F})`;
+          } else
+            n.current.style.transform = "scale(1)";
+      };
+      return k.current = requestAnimationFrame(D), () => {
+        k.current && cancelAnimationFrame(k.current);
+      };
+    }, [l, m, h, r]);
+    const c = r === "top" ? "bottom" : r === "bottom" ? "top" : r === "left" ? "right" : "left", S = {
+      ...v,
+      ...y && { "--motile-dock-color": y }
+    };
+    if (a && g.isValidElement(d)) {
+      const i = g.cloneElement(d, {
+        ref: (D) => {
+          typeof t == "function" ? t(D) : t && (t.current = D), n.current = D;
+        },
+        className: `motile-dock__item ${R || ""}`,
+        style: S,
+        "aria-label": e
+      });
+      return e ? /* @__PURE__ */ X(f.Root, { position: c, showArrow: !0, children: [
+        /* @__PURE__ */ s(f.Trigger, { children: i }),
+        /* @__PURE__ */ s(f.Content, { children: e })
+      ] }) : i;
+    }
+    const _ = /* @__PURE__ */ s(
+      "button",
+      {
+        ref: (i) => {
+          typeof t == "function" ? t(i) : t && (t.current = i), n.current = i;
+        },
+        type: "button",
+        className: `motile-dock__item ${R || ""}`,
+        style: S,
+        "aria-label": e,
+        ...u,
+        children: o || d
+      }
+    );
+    return e ? /* @__PURE__ */ X(f.Root, { position: c, showArrow: !0, children: [
+      /* @__PURE__ */ s(f.Trigger, { children: _ }),
+      /* @__PURE__ */ s(f.Content, { children: e })
+    ] }) : _;
+  }
+);
+I.displayName = "Dock.Item";
+const V = N(
+  ({ className: o, ...e }, a) => {
+    const { position: p } = A();
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: a,
+        className: `motile-dock__separator ${o || ""}`,
+        "data-position": p,
+        "aria-hidden": "true",
+        ...e
+      }
+    );
+  }
+);
+V.displayName = "Dock.Separator";
+const K = {
+  Root: E,
+  Item: I,
+  Separator: V
+};
+export {
+  K as Dock,
+  I as DockItem,
+  E as DockRoot,
+  V as DockSeparator
+};

package/dist/components/Drawer/Drawer.css

@@ -0,0 +1 @@
+.motile-drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;touch-action:pan-y}.motile-drawer__overlay--visible{background-color:#0006}.motile-drawer__content{position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);width:100%;max-width:var(--drawer-max-width, var(--drawer-width, 480px));height:auto;max-height:var(--drawer-max-height, 70dvh);background-color:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-drawer__content--visible{transform:translateY(0)}@media (max-width: 768px){.motile-drawer__overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%}.motile-drawer__content{left:0;right:0;margin:0;width:100%;max-width:none;border-radius:20px 20px 0 0}}.motile-drawer__header{height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:grab;user-select:none;-webkit-user-select:none}.motile-drawer__header:active{cursor:grabbing}.motile-drawer__handle{width:40px;height:6px;background-color:#d1d5db;border-radius:3px;transition:background-color .2s ease}.motile-drawer__header:hover .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__header:active .motile-drawer__handle{background-color:#6b7280}.motile-drawer__title-wrapper{padding:0 24px 16px;flex-shrink:0;border-bottom:1px solid #e5e7eb;width:100%;box-sizing:border-box}.motile-drawer__title{margin:0;font-size:16px;font-weight:600;color:#111827;line-height:1.4}@media (max-width: 768px){.motile-drawer__title{font-size:15px}}.motile-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box}.motile-drawer__body::-webkit-scrollbar{width:6px}.motile-drawer__body::-webkit-scrollbar-track{background:transparent}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme: dark){.motile-drawer__content{background-color:#1f2937;box-shadow:0 -8px 30px #00000080}.motile-drawer__title{color:#f9fafb}.motile-drawer__title-wrapper{border-bottom-color:#374151}.motile-drawer__handle{background-color:#4b5563}.motile-drawer__header:hover .motile-drawer__handle{background-color:#6b7280}.motile-drawer__header:active .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}@media (prefers-reduced-motion: reduce){.motile-drawer__content,.motile-drawer__overlay{transition:none}}@media (hover: none) and (pointer: coarse){.motile-drawer__header{height:56px}.motile-drawer__handle{width:48px;height:7px}}