mainstack-design-system 1.14.3 → 1.15.1

package/dist/mainstack-design-system621.js

@@ -1,446 +1,262 @@
 'use client';
-import { jsx as x, jsxs as Y } from "react/jsx-runtime";
-import { D as K } from "./index-eeqUt-Tb.js";
-import { c as ce } from "./index-RoCFhqzC.js";
-import { useEffect as ne } from "react";
-import { useResponsivePopoverDrawerContext as me } from "./mainstack-design-system604.js";
-import { V as J } from "./index-DJT9m8v7.js";
-import { c as Q } from "./utils-D85wpvmd.js";
-import "./mainstack-design-system391.js";
-import "./mainstack-design-system392.js";
-import "./mainstack-design-system393.js";
-import "./mainstack-design-system394.js";
-import { Button as fe } from "./mainstack-design-system395.js";
-import { u as Z, b as de } from "./use-presence-Dept-wE7.js";
-import { i as pe, r as he, m as ge, a as se, b as re, d as ye, c as Ae, f as ve, e as Ee, s as Se, g as L, p as be, V as Ve, h as we, j as De, k as xe, S as Te, H as Me, v as R, l as Ce, n as Oe, o as ie } from "./single-value-DEX77ciI.js";
-const je = (e, t, n) => {
-  const s = t - e;
-  return ((n - e) % s + s) % s + e;
-};
-function ae(e, t) {
-  return pe(e) ? e[je(0, e.length, t)] : e;
-}
-class Ge {
-  constructor(t) {
-    this.stop = () => this.runAll("stop"), this.animations = t.filter(Boolean);
-  }
-  get finished() {
-    return Promise.all(this.animations.map((t) => t.finished));
-  }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(t) {
-    return this.animations[0][t];
-  }
-  setAll(t, n) {
-    for (let s = 0; s < this.animations.length; s++)
-      this.animations[s][t] = n;
-  }
-  attachTimeline(t) {
-    const n = this.animations.map((s) => s.attachTimeline(t));
-    return () => {
-      n.forEach((s, r) => {
-        s && s(), this.animations[r].stop();
-      });
-    };
-  }
-  get time() {
-    return this.getAll("time");
-  }
-  set time(t) {
-    this.setAll("time", t);
-  }
-  get speed() {
-    return this.getAll("speed");
-  }
-  set speed(t) {
-    this.setAll("speed", t);
-  }
-  get state() {
-    return this.getAll("state");
-  }
-  get startTime() {
-    return this.getAll("startTime");
-  }
-  get duration() {
-    return $(this.animations, "duration");
-  }
-  get iterationDuration() {
-    return $(this.animations, "iterationDuration");
-  }
-  runAll(t) {
-    this.animations.forEach((n) => n[t]());
-  }
-  play() {
-    this.runAll("play");
-  }
-  pause() {
-    this.runAll("pause");
-  }
-  cancel() {
-    this.runAll("cancel");
-  }
-  complete() {
-    this.runAll("complete");
-  }
-}
-function $(e, t) {
-  let n = 0;
-  for (let s = 0; s < e.length; s++) {
-    const r = e[s][t];
-    r !== null && r > n && (n = r);
-  }
-  return n;
-}
-class Ie extends Ge {
-  then(t, n) {
-    return this.finished.finally(t).then(() => {
-    });
-  }
-}
-function Ne(e) {
-  return ne(() => () => e(), []);
-}
-function W(e) {
-  return typeof e == "object" && !Array.isArray(e);
-}
-function oe(e, t, n, s) {
-  return typeof e == "string" && W(t) ? he(e, n, s) : e instanceof NodeList ? Array.from(e) : Array.isArray(e) ? e : [e];
-}
-function Pe(e, t, n) {
-  return e * (t + 1);
-}
-function q(e, t, n, s) {
-  return typeof t == "number" ? t : t.startsWith("-") || t.startsWith("+") ? Math.max(0, e + parseFloat(t)) : t === "<" ? n : t.startsWith("<") ? Math.max(0, n + parseFloat(t.slice(1))) : s.get(t) ?? e;
-}
-function Re(e, t, n) {
-  for (let s = 0; s < e.length; s++) {
-    const r = e[s];
-    r.at > t && r.at < n && (se(e, r), s--);
-  }
-}
-function Be(e, t, n, s, r, l) {
-  Re(e, r, l);
-  for (let i = 0; i < t.length; i++)
-    e.push({
-      value: t[i],
-      at: ge(r, l, s[i]),
-      easing: ae(n, i)
-    });
-}
-function Fe(e, t) {
-  for (let n = 0; n < e.length; n++)
-    e[n] = e[n] / (t + 1);
-}
-function Ke(e, t) {
-  return e.at === t.at ? e.value === null ? 1 : t.value === null ? -1 : 0 : e.at - t.at;
-}
-const Le = "easeInOut", We = 20;
-function ze(e, { defaultTransition: t = {}, ...n } = {}, s, r) {
-  const l = t.duration || 0.3, i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = {}, d = /* @__PURE__ */ new Map();
-  let b = 0, o = 0, h = 0;
-  for (let g = 0; g < e.length; g++) {
-    const m = e[g];
-    if (typeof m == "string") {
-      d.set(m, o);
-      continue;
-    } else if (!Array.isArray(m)) {
-      d.set(m.name, q(o, m.at, b, d));
-      continue;
+import { jsx as c, jsxs as L, Fragment as O } from "react/jsx-runtime";
+import * as d from "react";
+import { forwardRef as H } from "react";
+import { u as S } from "./index-DLcqcWxM.js";
+import { c as G, P, a as N } from "./index-DMumqyNN.js";
+import { u as K } from "./index-437EL2iq.js";
+import { u as U } from "./index-BZPx6jYI.js";
+import { u as X } from "./index-BGQepRFJ.js";
+import { P as $ } from "./index-BpWB3aFK.js";
+import "./mainstack-design-system366.js";
+import J from "./mainstack-design-system104.js";
+import "./player-DtDfxekb.js";
+import { c as Q } from "./utils-BWBRqOem.js";
+var y = "Checkbox", [V] = G(y), [W, _] = V(y);
+function Y(r) {
+  const {
+    __scopeCheckbox: s,
+    checked: t,
+    children: l,
+    defaultChecked: a,
+    disabled: e,
+    form: p,
+    name: f,
+    onCheckedChange: i,
+    required: h,
+    value: k = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: u
+  } = r, [m, x] = K({
+    prop: t,
+    defaultProp: a ?? !1,
+    onChange: i,
+    caller: y
+  }), [C, v] = d.useState(null), [g, o] = d.useState(null), n = d.useRef(!1), I = C ? !!p || !!C.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), R = {
+    checked: m,
+    disabled: e,
+    setChecked: x,
+    control: C,
+    setControl: v,
+    name: f,
+    form: p,
+    value: k,
+    hasConsumerStoppedPropagationRef: n,
+    required: h,
+    defaultChecked: b(a) ? !1 : a,
+    isFormControl: I,
+    bubbleInput: g,
+    setBubbleInput: o
+  };
+  return /* @__PURE__ */ c(
+    W,
+    {
+      scope: s,
+      ...R,
+      children: Z(u) ? u(R) : l
     }
-    let [D, y, f = {}] = m;
-    f.at !== void 0 && (o = q(o, f.at, b, d));
-    let p = 0;
-    const T = (A, v, V, M = 0, C = 0) => {
-      const u = He(A), { delay: B = 0, times: E = ye(u), type: F = "keyframes", repeat: O, repeatType: nt, repeatDelay: st = 0, ...ue } = v;
-      let { ease: w = t.ease || "easeOut", duration: S } = v;
-      const z = typeof B == "function" ? B(M, C) : B, H = u.length, _ = Ee(F) ? F : r?.[F || "keyframes"];
-      if (H <= 2 && _) {
-        let j = 100;
-        if (H === 2 && Ue(u)) {
-          const G = u[1] - u[0];
-          j = Math.abs(G);
-        }
-        const N = { ...ue };
-        S !== void 0 && (N.duration = Se(S));
-        const P = Ae(N, j, _);
-        w = P.ease, S = P.duration;
+  );
+}
+var w = "CheckboxTrigger", z = d.forwardRef(
+  ({ __scopeCheckbox: r, onKeyDown: s, onClick: t, ...l }, a) => {
+    const {
+      control: e,
+      value: p,
+      disabled: f,
+      checked: i,
+      required: h,
+      setControl: k,
+      setChecked: u,
+      hasConsumerStoppedPropagationRef: m,
+      isFormControl: x,
+      bubbleInput: C
+    } = _(w, r), v = S(a, k), g = d.useRef(i);
+    return d.useEffect(() => {
+      const o = e?.form;
+      if (o) {
+        const n = () => u(g.current);
+        return o.addEventListener("reset", n), () => o.removeEventListener("reset", n);
       }
-      S ?? (S = l);
-      const k = o + z;
-      E.length === 1 && E[0] === 0 && (E[1] = 1);
-      const U = E.length - u.length;
-      if (U > 0 && ve(E, U), u.length === 1 && u.unshift(null), O) {
-        L(O < We, "Repeat count too high, must be less than 20", "repeat-count-high"), S = Pe(S, O);
-        const j = [...u], N = [...E];
-        w = Array.isArray(w) ? [...w] : [w];
-        const P = [...w];
-        for (let G = 0; G < O; G++) {
-          u.push(...j);
-          for (let I = 0; I < j.length; I++)
-            E.push(N[I] + (G + 1)), w.push(I === 0 ? "linear" : ae(P, I - 1));
-        }
-        Fe(E, O);
+    }, [e, u]), /* @__PURE__ */ c(
+      P.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": b(i) ? "mixed" : i,
+        "aria-required": h,
+        "data-state": j(i),
+        "data-disabled": f ? "" : void 0,
+        disabled: f,
+        value: p,
+        ...l,
+        ref: v,
+        onKeyDown: N(s, (o) => {
+          o.key === "Enter" && o.preventDefault();
+        }),
+        onClick: N(t, (o) => {
+          u((n) => b(n) ? !0 : !n), C && x && (m.current = o.isPropagationStopped(), m.current || o.stopPropagation());
+        })
       }
-      const X = k + S;
-      Be(V, u, w, E, k, X), p = Math.max(z + S, p), h = Math.max(X, h);
-    };
-    if (re(D)) {
-      const A = ee(D, a);
-      T(y, f, te("default", A));
-    } else {
-      const A = oe(D, y, s, c), v = A.length;
-      for (let V = 0; V < v; V++) {
-        y = y, f = f;
-        const M = A[V], C = ee(M, a);
-        for (const u in y)
-          T(y[u], _e(f, u), te(u, C), V, v);
+    );
+  }
+);
+z.displayName = w;
+var B = d.forwardRef(
+  (r, s) => {
+    const {
+      __scopeCheckbox: t,
+      name: l,
+      checked: a,
+      defaultChecked: e,
+      required: p,
+      disabled: f,
+      value: i,
+      onCheckedChange: h,
+      form: k,
+      ...u
+    } = r;
+    return /* @__PURE__ */ c(
+      Y,
+      {
+        __scopeCheckbox: t,
+        checked: a,
+        defaultChecked: e,
+        disabled: f,
+        required: p,
+        onCheckedChange: h,
+        name: l,
+        form: k,
+        value: i,
+        internal_do_not_use_render: ({ isFormControl: m }) => /* @__PURE__ */ L(O, { children: [
+          /* @__PURE__ */ c(
+            z,
+            {
+              ...u,
+              ref: s,
+              __scopeCheckbox: t
+            }
+          ),
+          m && /* @__PURE__ */ c(
+            A,
+            {
+              __scopeCheckbox: t
+            }
+          )
+        ] })
       }
-    }
-    b = o, o += p;
-  }
-  return a.forEach((g, m) => {
-    for (const D in g) {
-      const y = g[D];
-      y.sort(Ke);
-      const f = [], p = [], T = [];
-      for (let v = 0; v < y.length; v++) {
-        const { at: V, value: M, easing: C } = y[v];
-        f.push(M), p.push(be(0, h, V)), T.push(C || "easeOut");
+    );
+  }
+);
+B.displayName = y;
+var M = "CheckboxIndicator", T = d.forwardRef(
+  (r, s) => {
+    const { __scopeCheckbox: t, forceMount: l, ...a } = r, e = _(M, t);
+    return /* @__PURE__ */ c(
+      $,
+      {
+        present: l || b(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ c(
+          P.span,
+          {
+            "data-state": j(e.checked),
+            "data-disabled": e.disabled ? "" : void 0,
+            ...a,
+            ref: s,
+            style: { pointerEvents: "none", ...r.style }
+          }
+        )
       }
-      p[0] !== 0 && (p.unshift(0), f.unshift(f[0]), T.unshift(Le)), p[p.length - 1] !== 1 && (p.push(1), f.push(null)), i.has(m) || i.set(m, {
-        keyframes: {},
-        transition: {}
-      });
-      const A = i.get(m);
-      A.keyframes[D] = f, A.transition[D] = {
-        ...t,
-        duration: h,
-        ease: T,
-        times: p,
-        ...n
-      };
-    }
-  }), i;
-}
-function ee(e, t) {
-  return !t.has(e) && t.set(e, {}), t.get(e);
-}
-function te(e, t) {
-  return t[e] || (t[e] = []), t[e];
-}
-function He(e) {
-  return Array.isArray(e) ? e : [e];
-}
-function _e(e, t) {
-  return e && e[t] ? {
-    ...e,
-    ...e[t]
-  } : { ...e };
-}
-const ke = (e) => typeof e == "number", Ue = (e) => e.every(ke);
-function Xe(e, t) {
-  return e in t;
-}
-class Ye extends Ve {
-  constructor() {
-    super(...arguments), this.type = "object";
-  }
-  readValueFromInstance(t, n) {
-    if (Xe(n, t)) {
-      const s = t[n];
-      if (typeof s == "string" || typeof s == "number")
-        return s;
-    }
-  }
-  getBaseTargetFromProps() {
-  }
-  removeValueFromRenderState(t, n) {
-    delete n.output[t];
-  }
-  measureInstanceViewportBox() {
-    return we();
-  }
-  build(t, n) {
-    Object.assign(t.output, n);
-  }
-  renderInstance(t, { output: n }) {
-    Object.assign(t, n);
-  }
-  sortInstanceNodePosition() {
-    return 0;
-  }
-}
-function Je(e) {
-  const t = {
-    presenceContext: null,
-    props: {},
-    visualState: {
-      renderState: {
-        transform: {},
-        transformOrigin: {},
-        style: {},
-        vars: {},
-        attrs: {}
-      },
-      latestValues: {}
-    }
-  }, n = De(e) && !xe(e) ? new Te(t) : new Me(t);
-  n.mount(e), R.set(e, n);
-}
-function Qe(e) {
-  const t = {
-    presenceContext: null,
-    props: {},
-    visualState: {
-      renderState: {
-        output: {}
-      },
-      latestValues: {}
-    }
-  }, n = new Ye(t);
-  n.mount(e), R.set(e, n);
-}
-function Ze(e, t) {
-  return re(e) || typeof e == "number" || typeof e == "string" && !W(t);
-}
-function le(e, t, n, s) {
-  const r = [];
-  if (Ze(e, t))
-    r.push(Ce(e, W(t) && t.default || t, n && (n.default || n)));
-  else {
-    const l = oe(e, t, s), i = l.length;
-    L(!!i, "No valid elements provided.", "no-valid-elements");
-    for (let a = 0; a < i; a++) {
-      const c = l[a];
-      L(c !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
-      const d = c instanceof Element ? Je : Qe;
-      R.has(c) || d(c);
-      const b = R.get(c), o = { ...n };
-      "delay" in o && typeof o.delay == "function" && (o.delay = o.delay(a, i)), r.push(...Oe(b, { ...t, transition: o }, {}));
-    }
+    );
+  }
+);
+T.displayName = M;
+var q = "CheckboxBubbleInput", A = d.forwardRef(
+  ({ __scopeCheckbox: r, ...s }, t) => {
+    const {
+      control: l,
+      hasConsumerStoppedPropagationRef: a,
+      checked: e,
+      defaultChecked: p,
+      required: f,
+      disabled: i,
+      name: h,
+      value: k,
+      form: u,
+      bubbleInput: m,
+      setBubbleInput: x
+    } = _(q, r), C = S(t, x), v = U(e), g = X(l);
+    d.useEffect(() => {
+      const n = m;
+      if (!n) return;
+      const I = window.HTMLInputElement.prototype, E = Object.getOwnPropertyDescriptor(
+        I,
+        "checked"
+      ).set, D = !a.current;
+      if (v !== e && E) {
+        const F = new Event("click", { bubbles: D });
+        n.indeterminate = b(e), E.call(n, b(e) ? !1 : e), n.dispatchEvent(F);
+      }
+    }, [m, v, e, a]);
+    const o = d.useRef(b(e) ? !1 : e);
+    return /* @__PURE__ */ c(
+      P.input,
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: p ?? o.current,
+        required: f,
+        disabled: i,
+        name: h,
+        value: k,
+        form: u,
+        ...s,
+        tabIndex: -1,
+        ref: C,
+        style: {
+          ...s.style,
+          ...g,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
   }
-  return r;
-}
-function $e(e, t, n) {
-  const s = [];
-  return ze(e, t, n, { spring: ie }).forEach(({ keyframes: l, transition: i }, a) => {
-    s.push(...le(a, l, i));
-  }), s;
+);
+A.displayName = q;
+function Z(r) {
+  return typeof r == "function";
 }
-function qe(e) {
-  return Array.isArray(e) && e.some(Array.isArray);
-}
-function et(e) {
-  function t(n, s, r) {
-    let l = [], i;
-    if (qe(n))
-      l = $e(n, s, e);
-    else {
-      const { onComplete: c, ...d } = r || {};
-      typeof c == "function" && (i = c), l = le(n, s, d, e);
-    }
-    const a = new Ie(l);
-    return i && a.finished.then(i), e && (e.animations.push(a), a.finished.then(() => {
-      se(e.animations, a);
-    })), a;
-  }
-  return t;
+function b(r) {
+  return r === "indeterminate";
 }
-function tt() {
-  const e = Z(() => ({
-    current: null,
-    // Will be hydrated by React
-    animations: []
-  })), t = Z(() => et(e));
-  return Ne(() => {
-    e.animations.forEach((n) => n.stop()), e.animations.length = 0;
-  }), [e, t];
+function j(r) {
+  return b(r) ? "indeterminate" : r ? "checked" : "unchecked";
 }
-const At = ({
-  sideOffset: e = 6,
-  side: t,
-  sticky: n,
-  className: s,
-  children: r,
-  showCloseButton: l = !0,
-  ...i
-}) => {
-  const { open: a, isDesktop: c, onOpenChange: d } = me(), [b, o] = de(), [h, g] = tt();
-  return ne(() => {
-    a && b ? (async () => await g(
-      h.current,
-      {
-        opacity: [0, 1],
-        scale: [0, 1]
-      },
-      { type: ie, bounce: 0.4, duration: 0.8 }
-    ))() : (async () => (await g(
-      h.current,
-      {
-        opacity: 0,
-        scale: [1, 0]
-      },
-      { duration: 0.4 }
-    ), o && o()))();
-  }, [g, a, b, o, h]), c ? /* @__PURE__ */ x(
-    ce,
+const ee = H(
+  ({ className: r, ...s }, t) => /* @__PURE__ */ c(
+    B,
     {
-      "data-slot": "responsive-popover-drawer-content",
-      sideOffset: e,
-      side: t,
-      sticky: n,
-      ...i,
-      children: /* @__PURE__ */ x(
-        "div",
-        {
-          className: Q(
-            "mds:origin-(--radix-popover-content-transform-origin) mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",
-            s
-          ),
-          ref: h,
-          children: r
-        }
-      )
+      "data-slot": "checkbox-indicator",
+      className: Q(
+        "mds:peer mds:relative mds:flex mds:justify-center mds:items-center mds:cursor-pointer  mds:gap-12 mds:border mds:rounded-6 mds:border-border-interactive-neutral mds:bg-on-primary mds:active:transition-transform mds:ease-out-cubic mds:duration-150 mds:active:scale-[0.85] mds:focus:ring-2 mds:active:ring-2 mds:focus:ring-border-surface-spread-focus mds:active:ring-border-surface-spread-neutral mds:ring-offset-0 mds:size-24 mds:group-data-[checkbox-shape=full-radius]:rounded-full mds:group-data-[error=true]:border-border-surface-error-l1 mds:group-data-[checkbox-size=large]:size-32 mds:group-data-[checkbox-size=extra-small]:size-18 mds:disabled:cursor-not-allowed mds:disabled:bg-interactive-primary-disabled mds:group-hover:border-border-interactive-neutral-active-hover mds:aria-checked:bg-interactive-primary mds:disabled:aria-checked:bg-disabled mds:disabled:border-bg-interactive-primary-disabled ",
+        r
+      ),
+      ref: t,
+      ...s,
+      children: /* @__PURE__ */ c(T, { children: /* @__PURE__ */ c(J, { className: "mds:size-24 mds:text-on-primary mds:group-data-[checkbox-size=extra-small]:size-14" }) })
     }
-  ) : /* @__PURE__ */ Y(
-    K.Content,
-    {
-      "data-slot": "responsive-popover-drawer-content",
-      className: "mds:group/drawer-content mds:w-full mds:fixed mds:left-0 mds:bottom-0 mds:z-100   mds:overflow-hidden",
-      ...i,
-      children: [
-        /* @__PURE__ */ Y(
-          "div",
-          {
-            className: Q(
-              "mds:m-20 mds:flex mds:h-auto mds:flex-col mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",
-              s
-            ),
-            ref: h,
-            children: [
-              r,
-              l && /* @__PURE__ */ x(
-                fe,
-                {
-                  variant: "secondary",
-                  rounded: "sm",
-                  onClick: () => {
-                    d && d(!1);
-                  },
-                  children: "Close"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ x(J, { children: /* @__PURE__ */ x(K.Title, {}) }),
-        /* @__PURE__ */ x(J, { children: /* @__PURE__ */ x(K.Description, {}) })
-      ]
-    }
-  );
-};
+  )
+);
+ee.displayName = "CheckboxIndicator";
 export {
-  At as ResponsivePopoverDrawerContent
+  ee as CheckboxIndicator
 };