@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/scrolling-list/index.mjs

@@ -1,448 +1,283 @@
-import { jsxs as oe, jsx as f } from "react/jsx-runtime";
-import { useScrollOverflow as ne } from "@spark-ui/hooks/use-scroll-overflow";
-import { a as w } from "../index-BmAFn37q.mjs";
-import { useState as V, useCallback as $, useLayoutEffect as j, useEffect as k, useMemo as se, createContext as re, useRef as z, useContext as T, Children as le, cloneElement as ie, isValidElement as ae } from "react";
-import { a as ce } from "../Slot-C98rL4yy.mjs";
-import { ArrowVerticalRight as de } from "@spark-ui/icons/ArrowVerticalRight";
-import { I as K } from "../Icon-D1RueiPY.mjs";
-import { I as U } from "../IconButton-BY3gYXtU.mjs";
-import { ArrowVerticalLeft as ue } from "@spark-ui/icons/ArrowVerticalLeft";
-import { B as ge } from "../Button-D32Avk2j.mjs";
-var fe = typeof document < "u" ? j : k, pe = ({
-  axis: o = "x",
-  initialPages: n = []
-} = {}) => {
-  const e = o === "x" ? "width" : "height", r = o === "x" ? "scrollWidth" : "scrollHeight", t = o === "x" ? "clientWidth" : "clientHeight", s = o === "x" ? "left" : "top", c = o === "x" ? "right" : "bottom", d = o === "x" ? "scrollLeft" : "scrollTop", [l, h] = V(null), [{ pages: i, activePageIndex: u }, b] = V({
-    pages: n,
-    activePageIndex: 0
-  }), y = $(
-    (a) => {
-      if (!l)
-        return;
-      if (Math.floor(l[r] - l[d]) <= l[t]) {
-        b({ pages: a, activePageIndex: a.length - 1 });
-        return;
-      }
-      const x = Array.from(l.children), R = l.getBoundingClientRect(), p = a.map((L) => {
-        const M = L[0], B = x[M];
-        E(B instanceof HTMLElement, "Expected HTMLElement");
-        const ee = H(
-          l,
-          B,
-          s
-        ), te = B.getBoundingClientRect()[s] - R[s] - ee;
-        return Math.abs(te);
-      }), g = Math.min(...p), S = p.indexOf(g);
-      b({ pages: a, activePageIndex: S });
-    },
-    [l, t, s, r, d]
-  ), m = $(() => {
-    if (!l)
-      return;
-    const a = Array.from(l.children), v = l.getBoundingClientRect();
-    let x;
-    const R = a.reduce((p, g, S) => {
-      E(g instanceof HTMLElement, "Expected HTMLElement");
-      const L = p[p.length - 1], M = W(g, g.parentElement);
-      if (!L || g.dataset.shouldSnap === "true" || M[c] - x > Math.ceil(v[e])) {
-        p.push([S]);
-        const B = H(
-          l,
-          g,
-          s
-        );
-        x = M[s] - B;
-      } else
-        L.push(S);
-      return p;
-    }, []);
-    y(R);
-  }, [y, l, e, c, s]);
-  fe(() => {
-    m();
-  }, [m]), k(() => {
-    const a = () => {
-      m();
-    };
-    return window.addEventListener("resize", a), window.addEventListener("orientationchange", a), () => {
-      window.removeEventListener("resize", a), window.removeEventListener("orientationchange", a);
-    };
-  }, [m]), k(() => {
-    if (!l)
-      return;
-    const a = () => {
-      y(i);
-    };
-    return l.addEventListener("scroll", a), () => {
-      l.removeEventListener("scroll", a);
-    };
-  }, [y, i, l]);
-  const N = (a, v) => {
-    if (!l)
-      return;
-    const x = i[a];
-    if (!x)
-      return;
-    const R = Array.from(l.children), p = x[0], g = R[p];
-    if (!(g instanceof HTMLElement))
-      return;
-    const S = H(
-      l,
-      g,
-      s
-    ), L = v?.behavior || "smooth";
-    l.scrollTo({
-      behavior: L,
-      [s]: W(g, g.parentElement)[s] - S
-    });
-  }, O = (a) => {
-    N(u - 1, a);
-  }, C = (a) => {
-    N(u + 1, a);
-  }, P = se(
-    () => new Set(i.map((a) => a[0])),
-    [i]
-  ), F = u > 0, A = u < i.length - 1;
-  return {
-    hasPrevPage: F,
-    hasNextPage: A,
-    prev: O,
-    next: C,
-    goTo: N,
-    refresh: m,
-    pages: i,
-    activePageIndex: u,
-    snapPointIndexes: P,
-    scrollRef: h
-  };
-}, W = (o, n) => {
-  const e = D(o);
-  if (!n)
-    return e;
-  const r = D(n);
-  return {
-    left: e.left - r.left,
-    top: e.top - r.top,
-    right: e.right - r.left,
-    bottom: e.bottom - r.top,
-    width: e.width,
-    height: e.height
-  };
-}, D = (o) => {
-  const n = o.getBoundingClientRect();
-  let e = 0, r = 0, t = o.parentElement;
-  for (; t; )
-    e += t.scrollLeft, r += t.scrollTop, t = t.parentElement;
-  const s = n.left + e, c = n.top + r;
-  return {
-    left: s,
-    top: c,
-    right: s + n.width,
-    bottom: c + n.height,
-    width: n.width,
-    height: n.height
-  };
-}, he = (o, n) => {
-  const r = window.getComputedStyle(o).getPropertyValue(`scroll-padding-${n}`) || "0px";
-  if (r === "auto")
-    return 0;
-  const t = `Unsupported scroll padding value, expected <length> or <percentage> value, received ${r}`;
-  if (r.endsWith("px")) {
-    const s = parseInt(r);
-    return E(!Number.isNaN(s), t), s;
-  }
-  if (r.endsWith("%")) {
-    const s = parseInt(r);
-    return E(!Number.isNaN(s), t), o.clientWidth / 100 * s;
-  }
-  throw new q(t);
-}, me = (o, n) => {
-  const r = window.getComputedStyle(o).getPropertyValue(`scroll-margin-${n}`) || "0px", t = `Unsupported scroll margin value, expected <length> value, received ${r}`;
-  E(r.endsWith("px"), t);
-  const s = parseInt(r);
-  return E(!Number.isNaN(s), t), s;
-}, H = (o, n, e) => {
-  const r = he(o, e), t = me(n, e), s = W(n, n.parentElement);
-  return Math.min(r + t, s[e]);
-};
-function E(o, n) {
-  if (!o)
-    throw new q(n);
-}
-var q = class extends Error {
-  constructor(o) {
-    super(`[react-snap-carousel]: ${o}`);
-  }
-};
-const I = re(
+import { jsxs as V, jsx as c } from "react/jsx-runtime";
+import { useScrollOverflow as D } from "@spark-ui/hooks/use-scroll-overflow";
+import { cx as u } from "class-variance-authority";
+import { createContext as $, useRef as b, useCallback as j, useEffect as S, useLayoutEffect as K, useState as H, useContext as m, Children as W, cloneElement as q, isValidElement as G } from "react";
+import { useSnapCarousel as J } from "react-snap-carousel";
+import { a as M } from "../Slot-D2Bbf8Gw.mjs";
+import { ArrowVerticalRight as Q } from "@spark-ui/icons/ArrowVerticalRight";
+import { I as P } from "../Icon-Ck-dhfLd.mjs";
+import { I as L } from "../IconButton-C62-axzv.mjs";
+import { ArrowVerticalLeft as U } from "@spark-ui/icons/ArrowVerticalLeft";
+import { B as X } from "../Button-C3C0aixy.mjs";
+const d = $(
   null
-), G = ({
-  snapType: o = "none",
-  snapStop: n = "normal",
+), N = ({
+  snapType: s = "none",
+  snapStop: l = "normal",
   scrollBehavior: e = "smooth",
-  loop: r = !1,
-  gap: t = 16,
-  withFade: s = !1,
-  scrollPadding: c = 0,
-  children: d,
-  className: l,
-  ...h
+  loop: i = !1,
+  gap: o = 16,
+  withFade: n = !1,
+  scrollPadding: r = 0,
+  children: a,
+  className: p,
+  ...g
 }) => {
-  const i = z(null), u = z(null), b = pe(), { overflow: y, refresh: m } = ne(i, {
+  const t = b(null), f = b(null), h = J(), { overflow: F, refresh: y } = D(t, {
     precisionTreshold: 1
-  }), { activePageIndex: N, pages: O, refresh: C } = b, P = O[N], F = P ? [P[0] + 1, P[P.length - 1] + 1] : [0, 0], A = $(() => {
-    C && i.current && setTimeout(() => {
-      C();
+  }), { activePageIndex: E, pages: T, refresh: x } = h, v = T[E], O = v ? [v[0] + 1, v[v.length - 1] + 1] : [0, 0], w = j(() => {
+    x && t.current && setTimeout(() => {
+      x();
     }, 0);
-  }, [C]);
-  k(() => {
-    A();
-  }, [d, A]), j(() => {
-    i.current && requestAnimationFrame(() => {
-      m();
+  }, [x]);
+  S(() => {
+    w();
+  }, [a, w]), K(() => {
+    t.current && requestAnimationFrame(() => {
+      y();
     });
-  }, [d, m]);
-  const v = {
-    ...b,
-    snapType: o,
-    snapStop: n,
+  }, [a, y]);
+  const z = {
+    ...h,
+    snapType: s,
+    snapStop: l,
     skipKeyboardNavigation: () => {
-      u.current?.focus();
+      f.current?.focus();
     },
     scrollBehavior: e,
-    visibleItemsRange: F,
-    loop: r,
-    gap: t,
-    withFade: s,
-    scrollPadding: c,
-    scrollAreaRef: i,
-    overflow: y
+    visibleItemsRange: O,
+    loop: i,
+    gap: o,
+    withFade: n,
+    scrollPadding: r,
+    scrollAreaRef: t,
+    overflow: F
   };
-  return /* @__PURE__ */ oe(I.Provider, { value: v, children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ V(d.Provider, { value: z, children: [
+    /* @__PURE__ */ c(
       "div",
       {
         "data-spark-component": "scrolling-list",
-        className: w(
+        className: u(
           "gap-lg group/scrolling-list relative flex flex-col default:w-full",
-          l
+          p
         ),
-        ...h,
-        children: d
+        ...g,
+        children: a
       }
     ),
-    /* @__PURE__ */ f("span", { ref: u, className: "size-0 overflow-hidden", tabIndex: -1 })
+    /* @__PURE__ */ c("span", { ref: f, className: "size-0 overflow-hidden", tabIndex: -1 })
   ] });
 };
-G.displayName = "ScrollingList";
-const _ = ({
-  children: o,
-  visibility: n = "always",
+N.displayName = "ScrollingList";
+const I = ({
+  children: s,
+  visibility: l = "always",
   className: e,
-  ...r
-}) => /* @__PURE__ */ f(
+  ...i
+}) => /* @__PURE__ */ c(
   "div",
   {
     "data-spark-component": "scrolling-list-controls",
-    className: w(
+    className: u(
       "default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",
       e
     ),
     style: {
-      "--scrolling-list-controls-opacity": n === "hover" ? "0" : "1"
+      "--scrolling-list-controls-opacity": l === "hover" ? "0" : "1"
     },
     "data-orientation": "horizontal",
-    ...r,
-    children: o
+    ...i,
+    children: s
   }
 );
-_.displayName = "ScrollingList.Controls";
-function ve(o, n) {
-  const [e, r] = V(!1);
-  return k(() => {
-    const t = (d) => {
-      r(!0);
-      const l = d.target, h = n.current;
-      if (l && h) {
-        const i = l.getBoundingClientRect(), u = h.getBoundingClientRect();
-        i.left >= u.left && i.right <= u.right && i.top >= u.top && i.bottom <= u.bottom || l.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+I.displayName = "ScrollingList.Controls";
+function Y(s, l) {
+  const [e, i] = H(!1);
+  return S(() => {
+    const o = (a) => {
+      i(!0);
+      const p = a.target, g = l.current;
+      if (p && g) {
+        const t = p.getBoundingClientRect(), f = g.getBoundingClientRect();
+        t.left >= f.left && t.right <= f.right && t.top >= f.top && t.bottom <= f.bottom || p.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
       }
-    }, s = (d) => {
-      o.current && !o.current.contains(d.relatedTarget) && r(!1);
-    }, c = o.current;
-    return c && (c.addEventListener("focusin", t), c.addEventListener("focusout", s)), () => {
-      c && (c.removeEventListener("focusin", t), c.removeEventListener("focusout", s));
+    }, n = (a) => {
+      s.current && !s.current.contains(a.relatedTarget) && i(!1);
+    }, r = s.current;
+    return r && (r.addEventListener("focusin", o), r.addEventListener("focusout", n)), () => {
+      r && (r.removeEventListener("focusin", o), r.removeEventListener("focusout", n));
     };
-  }, [o, n]), e;
+  }, [s, l]), e;
 }
-const J = ({
-  asChild: o = !1,
-  children: n,
+const k = ({
+  asChild: s = !1,
+  children: l,
   index: e = 0,
-  className: r = "",
-  ...t
+  className: i = "",
+  ...o
 }) => {
-  const s = T(I), c = z(null), d = s.snapPointIndexes.has(e);
-  return ve(c, s.scrollAreaRef), /* @__PURE__ */ f(
-    o ? ce : "div",
+  const n = m(d), r = b(null), a = n.snapPointIndexes.has(e);
+  return Y(r, n.scrollAreaRef), /* @__PURE__ */ c(
+    s ? M : "div",
     {
       "data-spark-component": "scrolling-list-item",
       role: "listitem",
-      ref: c,
-      className: w(
+      ref: r,
+      className: u(
         "default:w-auto default:shrink-0",
         {
-          "snap-start": d,
-          "snap-normal": d && s.snapStop === "normal",
-          "snap-always": d && s.snapStop === "always"
+          "snap-start": a,
+          "snap-normal": a && n.snapStop === "normal",
+          "snap-always": a && n.snapStop === "always"
         },
-        r
+        i
       ),
-      ...t,
-      children: n
+      ...o,
+      children: l
     }
   );
 };
-J.displayName = "ScrollingList.Item";
-function xe(...o) {
-  return (n) => {
-    o.forEach((e) => {
-      typeof e == "function" ? e(n) : e && typeof e == "object" && "current" in e && (e.current = n);
+k.displayName = "ScrollingList.Item";
+function Z(...s) {
+  return (l) => {
+    s.forEach((e) => {
+      typeof e == "function" ? e(l) : e && typeof e == "object" && "current" in e && (e.current = l);
     });
   };
 }
-const Q = ({ children: o, ref: n, className: e = "", ...r }) => {
-  const t = T(I), s = {
+const B = ({ children: s, ref: l, className: e = "", ...i }) => {
+  const o = m(d), n = {
     mandatory: "x mandatory",
     proximity: "x proximity",
     none: "none"
-  }, c = (i) => {
-    !t.loop && !t.hasPrevPage || (i.preventDefault(), t.goTo(t.hasPrevPage ? t.activePageIndex - 1 : t.pages.length - 1, {
-      behavior: t.scrollBehavior
+  }, r = (t) => {
+    !o.loop && !o.hasPrevPage || (t.preventDefault(), o.goTo(o.hasPrevPage ? o.activePageIndex - 1 : o.pages.length - 1, {
+      behavior: o.scrollBehavior
     }));
-  }, d = (i) => {
-    !t.loop && !t.hasNextPage || (i.preventDefault(), t.goTo(t.hasNextPage ? t.activePageIndex + 1 : 0, { behavior: t.scrollBehavior }));
-  }, l = (i) => {
-    i.key === "ArrowLeft" && c(i), i.key === "ArrowRight" && d(i);
-  }, h = {
-    scrollSnapType: s[t.snapType],
+  }, a = (t) => {
+    !o.loop && !o.hasNextPage || (t.preventDefault(), o.goTo(o.hasNextPage ? o.activePageIndex + 1 : 0, { behavior: o.scrollBehavior }));
+  }, p = (t) => {
+    t.key === "ArrowLeft" && r(t), t.key === "ArrowRight" && a(t);
+  }, g = {
+    scrollSnapType: n[o.snapType],
     scrollPaddingInline: "var(--scrolling-list-px)",
-    "--scrolling-list-px": `${t.scrollPadding}px`,
-    "--scrolling-list-gap": `${t.gap}px`,
-    ...t.withFade && {
+    "--scrolling-list-px": `${o.scrollPadding}px`,
+    "--scrolling-list-gap": `${o.gap}px`,
+    ...o.withFade && {
       maskImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
-      maskSize: `calc(100% + ${t.overflow.left ? "0px" : "44px"} + ${t.overflow.right ? "0px" : "44px"}) 100%`,
-      maskPosition: `${t.overflow.left ? "0px" : "-44px"} 0`
+      maskSize: `calc(100% + ${o.overflow.left ? "0px" : "44px"} + ${o.overflow.right ? "0px" : "44px"}) 100%`,
+      maskPosition: `${o.overflow.left ? "0px" : "-44px"} 0`
     }
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-spark-component": "scrolling-list-items",
       id: "scrolling-list-items",
       role: "list",
-      className: w(
+      className: u(
         "relative transition-all duration-300",
         "u-no-scrollbar overflow-x-auto scroll-smooth",
         "w-full gap-(--scrolling-list-gap) default:flex default:flex-row",
         "focus-visible:u-outline",
         e
       ),
-      ref: xe(t.scrollAreaRef, t.scrollRef, n),
-      style: h,
-      onKeyDown: l,
-      ...r,
-      children: le.map(
-        o,
-        (i, u) => ae(i) ? ie(i, { index: u }) : i
+      ref: Z(o.scrollAreaRef, o.scrollRef, l),
+      style: g,
+      onKeyDown: p,
+      ...i,
+      children: W.map(
+        s,
+        (t, f) => G(t) ? q(t, { index: f }) : t
       )
     }
   );
 };
-Q.displayName = "ScrollingList.Items";
-const X = ({ "aria-label": o, ...n }) => {
-  const e = T(I), r = () => {
+B.displayName = "ScrollingList.Items";
+const C = ({ "aria-label": s, ...l }) => {
+  const e = m(d), i = () => {
     e.hasNextPage ? e.next({ behavior: e.scrollBehavior }) : e.goTo(0, { behavior: e.scrollBehavior });
-  }, s = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.right;
-  return /* @__PURE__ */ f(
-    U,
+  }, n = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.right;
+  return /* @__PURE__ */ c(
+    L,
     {
       "data-spark-component": "scrolling-list-next-button",
       size: "sm",
       intent: "surface",
       design: "filled",
-      className: w(
+      className: u(
         "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
         "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
       ),
-      onClick: r,
-      disabled: s,
-      "aria-label": o,
+      onClick: i,
+      disabled: n,
+      "aria-label": s,
       "aria-controls": "scrolling-list-items",
-      ...n,
-      children: /* @__PURE__ */ f(K, { children: /* @__PURE__ */ f(de, {}) })
+      ...l,
+      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(Q, {}) })
     }
   );
 };
-X.displayName = "ScrollingList.NextButton";
-const Y = ({
-  "aria-label": o,
-  ...n
+C.displayName = "ScrollingList.NextButton";
+const R = ({
+  "aria-label": s,
+  ...l
 }) => {
-  const e = T(I), r = () => {
+  const e = m(d), i = () => {
     e.activePageIndex === 0 && (e.scrollAreaRef.current?.scrollLeft || 0) > 0 ? e.goTo(0, { behavior: e.scrollBehavior }) : e.hasPrevPage ? e.prev({ behavior: e.scrollBehavior }) : e.goTo(e.pages.length - 1, { behavior: e.scrollBehavior });
-  }, s = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.left;
-  return /* @__PURE__ */ f(
-    U,
+  }, n = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.left;
+  return /* @__PURE__ */ c(
+    L,
     {
       "data-spark-component": "scrolling-list-prev-button",
       size: "sm",
       intent: "surface",
       design: "filled",
-      className: w(
+      className: u(
         "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
         "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
       ),
-      onClick: r,
-      disabled: s,
-      "aria-label": o,
+      onClick: i,
+      disabled: n,
+      "aria-label": s,
       "aria-controls": "scrolling-list-items",
-      ...n,
-      children: /* @__PURE__ */ f(K, { children: /* @__PURE__ */ f(ue, {}) })
+      ...l,
+      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(U, {}) })
     }
   );
 };
-Y.displayName = "ScrollingList.PrevButton";
-const Z = ({ children: o, ...n }) => {
-  const e = T(I);
-  return /* @__PURE__ */ f(
-    ge,
+R.displayName = "ScrollingList.PrevButton";
+const A = ({ children: s, ...l }) => {
+  const e = m(d);
+  return /* @__PURE__ */ c(
+    X,
     {
       type: "button",
       design: "tinted",
       intent: "surface",
       tabIndex: 0,
-      className: w(
+      className: u(
         "z-raised absolute top-1/2 left-0 -translate-y-1/2",
         "not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0"
       ),
       onClick: e.skipKeyboardNavigation,
-      ...n,
-      children: o
+      ...l,
+      children: s
     }
   );
 };
-Z.displayName = "ScrollingList.SkipButton";
-const we = Object.assign(G, {
-  Controls: _,
-  NextButton: X,
-  PrevButton: Y,
-  Item: J,
-  Items: Q,
-  SkipButton: Z
+A.displayName = "ScrollingList.SkipButton";
+const _ = Object.assign(N, {
+  Controls: I,
+  NextButton: C,
+  PrevButton: R,
+  Item: k,
+  Items: B,
+  SkipButton: A
 });
-we.displayName = "ScrollingList";
+_.displayName = "ScrollingList";
 export {
-  we as ScrollingList
+  _ as ScrollingList
 };
 //# sourceMappingURL=index.mjs.map