@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/scrolling-list/index.mjs

@@ -1,283 +1,226 @@
-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, isValidElement as q, cloneElement as G } from "react";
-import { useSnapCarousel as J } from "react-snap-carousel";
-import { S as M } from "../Slot-DLY1rJrG.mjs";
-import { ArrowVerticalRight as Q } from "@spark-ui/icons/ArrowVerticalRight";
-import { I as P } from "../Icon-BO327oHU.mjs";
-import { I as L } from "../IconButton-DdB3Pq13.mjs";
-import { ArrowVerticalLeft as U } from "@spark-ui/icons/ArrowVerticalLeft";
-import { B as X } from "../Button-1M9DcZl0.mjs";
-const d = $(
-  null
-), N = ({
-  snapType: s = "none",
-  snapStop: l = "normal",
-  scrollBehavior: e = "smooth",
-  loop: i = !1,
-  gap: o = 16,
-  withFade: n = !1,
-  scrollPadding: r = 0,
-  children: a,
-  className: p,
-  ...g
-}) => {
-  const t = b(null), f = b(null), h = J(), { overflow: F, refresh: y } = D(t, {
-    precisionTreshold: 1
-  }), { 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);
-  }, [x]);
-  S(() => {
-    w();
-  }, [a, w]), K(() => {
-    t.current && requestAnimationFrame(() => {
-      y();
-    });
-  }, [a, y]);
-  const z = {
-    ...h,
-    snapType: s,
-    snapStop: l,
-    skipKeyboardNavigation: () => {
-      f.current?.focus();
-    },
-    scrollBehavior: e,
-    visibleItemsRange: O,
-    loop: i,
-    gap: o,
-    withFade: n,
-    scrollPadding: r,
-    scrollAreaRef: t,
-    overflow: F
-  };
-  return /* @__PURE__ */ V(d.Provider, { value: z, children: [
-    /* @__PURE__ */ c(
-      "div",
-      {
-        "data-spark-component": "scrolling-list",
-        className: u(
-          "gap-lg group/scrolling-list relative flex flex-col default:w-full",
-          p
-        ),
-        ...g,
-        children: a
-      }
-    ),
-    /* @__PURE__ */ c("span", { ref: f, className: "size-0 overflow-hidden", tabIndex: -1 })
-  ] });
+import { Slot as e } from "../slot/index.mjs";
+import { t } from "../icon-D05Uqh8_.mjs";
+import { t as n } from "../button-_YZ_4J42.mjs";
+import { t as r } from "../icon-button-6p3O7NIm.mjs";
+import { cx as i } from "class-variance-authority";
+import { Children as a, cloneElement as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useScrollOverflow as _ } from "@spark-ui/hooks/use-scroll-overflow";
+import { ArrowVerticalRight as v } from "@spark-ui/icons/ArrowVerticalRight";
+import { ArrowVerticalLeft as y } from "@spark-ui/icons/ArrowVerticalLeft";
+import { useSnapCarousel as b } from "react-snap-carousel";
+//#region src/scrolling-list/ScrollingList.tsx
+var x = s(null), S = ({ snapType: e = "none", snapStop: t = "normal", scrollBehavior: n = "smooth", loop: r = !1, gap: a = 16, withFade: o = !1, scrollPadding: s = 0, children: c, className: u, ...m }) => {
+	let v = p(null), y = p(null), S = b(), { overflow: C, refresh: w } = _(v, { precisionTreshold: 1 }), { activePageIndex: T, pages: E, refresh: D } = S, O = E[T], k = O ? [O[0] + 1, O[O.length - 1] + 1] : [0, 0], A = l(() => {
+		D && v.current && setTimeout(() => {
+			D();
+		}, 0);
+	}, [D]);
+	d(() => {
+		A();
+	}, [c, A]), f(() => {
+		v.current && requestAnimationFrame(() => {
+			w();
+		});
+	}, [c, w]);
+	let j = () => {
+		y.current?.focus();
+	}, M = {
+		...S,
+		snapType: e,
+		snapStop: t,
+		skipKeyboardNavigation: j,
+		scrollBehavior: n,
+		visibleItemsRange: k,
+		loop: r,
+		gap: a,
+		withFade: o,
+		scrollPadding: s,
+		scrollAreaRef: v,
+		overflow: C
+	};
+	return /* @__PURE__ */ g(x.Provider, {
+		value: M,
+		children: [/* @__PURE__ */ h("div", {
+			"data-spark-component": "scrolling-list",
+			className: i("gap-lg group/scrolling-list relative flex flex-col default:w-full", u),
+			...m,
+			children: c
+		}), /* @__PURE__ */ h("span", {
+			ref: y,
+			className: "size-0 overflow-hidden",
+			tabIndex: -1
+		})]
+	});
 };
-N.displayName = "ScrollingList";
-const I = ({
-  children: s,
-  visibility: l = "always",
-  className: e,
-  ...i
-}) => /* @__PURE__ */ c(
-  "div",
-  {
-    "data-spark-component": "scrolling-list-controls",
-    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": l === "hover" ? "0" : "1"
-    },
-    "data-orientation": "horizontal",
-    ...i,
-    children: s
-  }
-);
-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" });
-      }
-    }, 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));
-    };
-  }, [s, l]), e;
+S.displayName = "ScrollingList";
+//#endregion
+//#region src/scrolling-list/ScrollingListControls.tsx
+var C = ({ children: e, visibility: t = "always", className: n, ...r }) => /* @__PURE__ */ h("div", {
+	"data-spark-component": "scrolling-list-controls",
+	className: i("default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden", n),
+	style: { "--scrolling-list-controls-opacity": t === "hover" ? "0" : "1" },
+	"data-orientation": "horizontal",
+	...r,
+	children: e
+});
+C.displayName = "ScrollingList.Controls";
+//#endregion
+//#region src/scrolling-list/useFocusWithinScroll.tsx
+function w(e, t) {
+	let [n, r] = m(!1);
+	return d(() => {
+		let n = (e) => {
+			r(!0);
+			let n = e.target, i = t.current;
+			if (n && i) {
+				let e = n.getBoundingClientRect(), t = i.getBoundingClientRect();
+				e.left >= t.left && e.right <= t.right && e.top >= t.top && e.bottom <= t.bottom || n.scrollIntoView({
+					behavior: "smooth",
+					inline: "center",
+					block: "nearest"
+				});
+			}
+		}, i = (t) => {
+			e.current && !e.current.contains(t.relatedTarget) && r(!1);
+		}, a = e.current;
+		return a && (a.addEventListener("focusin", n), a.addEventListener("focusout", i)), () => {
+			a && (a.removeEventListener("focusin", n), a.removeEventListener("focusout", i));
+		};
+	}, [e, t]), n;
 }
-const k = ({
-  asChild: s = !1,
-  children: l,
-  index: e = 0,
-  className: i = "",
-  ...o
-}) => {
-  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: r,
-      className: u(
-        "default:w-auto default:shrink-0",
-        {
-          "snap-start": a,
-          "snap-normal": a && n.snapStop === "normal",
-          "snap-always": a && n.snapStop === "always"
-        },
-        i
-      ),
-      ...o,
-      children: l
-    }
-  );
+//#endregion
+//#region src/scrolling-list/ScrollingListItem.tsx
+var T = ({ asChild: t = !1, children: n, index: r = 0, className: a = "", ...o }) => {
+	let s = u(x), c = p(null), l = s.snapPointIndexes.has(r);
+	return w(c, s.scrollAreaRef), /* @__PURE__ */ h(t ? e : "div", {
+		"data-spark-component": "scrolling-list-item",
+		role: "listitem",
+		ref: c,
+		className: i("default:w-auto default:shrink-0", {
+			"snap-start": l,
+			"snap-normal": l && s.snapStop === "normal",
+			"snap-always": l && s.snapStop === "always"
+		}, a),
+		...o,
+		children: 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);
-    });
-  };
+T.displayName = "ScrollingList.Item";
+//#endregion
+//#region src/scrolling-list/ScrollingListItems.tsx
+function E(...e) {
+	return (t) => {
+		e.forEach((e) => {
+			typeof e == "function" ? e(t) : e && typeof e == "object" && "current" in e && (e.current = t);
+		});
+	};
 }
-const B = ({ children: s, ref: l, className: e = "", ...i }) => {
-  const o = m(d), n = {
-    mandatory: "x mandatory",
-    proximity: "x proximity",
-    none: "none"
-  }, r = (t) => {
-    !o.loop && !o.hasPrevPage || (t.preventDefault(), o.goTo(o.hasPrevPage ? o.activePageIndex - 1 : o.pages.length - 1, {
-      behavior: o.scrollBehavior
-    }));
-  }, 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": `${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% + ${o.overflow.left ? "0px" : "44px"} + ${o.overflow.right ? "0px" : "44px"}) 100%`,
-      maskPosition: `${o.overflow.left ? "0px" : "-44px"} 0`
-    }
-  };
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      "data-spark-component": "scrolling-list-items",
-      id: "scrolling-list-items",
-      role: "list",
-      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: Z(o.scrollAreaRef, o.scrollRef, l),
-      style: g,
-      onKeyDown: p,
-      ...i,
-      children: W.map(
-        s,
-        (t, f) => q(t) ? G(t, { index: f }) : t
-      )
-    }
-  );
+var D = ({ children: e, ref: t, className: n = "", ...r }) => {
+	let s = u(x), l = {
+		mandatory: "x mandatory",
+		proximity: "x proximity",
+		none: "none"
+	}, d = (e) => {
+		!s.loop && !s.hasPrevPage || (e.preventDefault(), s.goTo(s.hasPrevPage ? s.activePageIndex - 1 : s.pages.length - 1, { behavior: s.scrollBehavior }));
+	}, f = (e) => {
+		!s.loop && !s.hasNextPage || (e.preventDefault(), s.goTo(s.hasNextPage ? s.activePageIndex + 1 : 0, { behavior: s.scrollBehavior }));
+	}, p = (e) => {
+		e.key === "ArrowLeft" && d(e), e.key === "ArrowRight" && f(e);
+	}, m = {
+		scrollSnapType: l[s.snapType],
+		scrollPaddingInline: "var(--scrolling-list-px)",
+		"--scrolling-list-px": `${s.scrollPadding}px`,
+		"--scrolling-list-gap": `${s.gap}px`,
+		...s.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% + ${s.overflow.left ? "0px" : "44px"} + ${s.overflow.right ? "0px" : "44px"}) 100%`,
+			maskPosition: `${s.overflow.left ? "0px" : "-44px"} 0`
+		}
+	};
+	return /* @__PURE__ */ h("div", {
+		"data-spark-component": "scrolling-list-items",
+		id: "scrolling-list-items",
+		role: "list",
+		className: i("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", n),
+		ref: E(s.scrollAreaRef, s.scrollRef, t),
+		style: m,
+		onKeyDown: p,
+		...r,
+		children: a.map(e, (e, t) => c(e) ? o(e, { index: t }) : e)
+	});
 };
-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 });
-  }, 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: u(
-        "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
-        "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
-      ),
-      onClick: i,
-      disabled: n,
-      "aria-label": s,
-      "aria-controls": "scrolling-list-items",
-      ...l,
-      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(Q, {}) })
-    }
-  );
+D.displayName = "ScrollingList.Items";
+//#endregion
+//#region src/scrolling-list/ScrollingListNextButton.tsx
+var O = ({ "aria-label": e, ...n }) => {
+	let a = u(x), o = () => {
+		a.hasNextPage ? a.next({ behavior: a.scrollBehavior }) : a.goTo(0, { behavior: a.scrollBehavior });
+	}, s = !(a.overflow.left || a.overflow.right) || !a.loop && !a.overflow.right;
+	return /* @__PURE__ */ h(r, {
+		"data-spark-component": "scrolling-list-next-button",
+		size: "sm",
+		intent: "surface",
+		design: "filled",
+		className: i("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible", "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),
+		onClick: o,
+		disabled: s,
+		"aria-label": e,
+		"aria-controls": "scrolling-list-items",
+		...n,
+		children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(v, {}) })
+	});
 };
-C.displayName = "ScrollingList.NextButton";
-const R = ({
-  "aria-label": s,
-  ...l
-}) => {
-  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 });
-  }, 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: u(
-        "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
-        "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
-      ),
-      onClick: i,
-      disabled: n,
-      "aria-label": s,
-      "aria-controls": "scrolling-list-items",
-      ...l,
-      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(U, {}) })
-    }
-  );
+O.displayName = "ScrollingList.NextButton";
+//#endregion
+//#region src/scrolling-list/ScrollingListPrevButton.tsx
+var k = ({ "aria-label": e, ...n }) => {
+	let a = u(x), o = () => {
+		a.activePageIndex === 0 && (a.scrollAreaRef.current?.scrollLeft || 0) > 0 ? a.goTo(0, { behavior: a.scrollBehavior }) : a.hasPrevPage ? a.prev({ behavior: a.scrollBehavior }) : a.goTo(a.pages.length - 1, { behavior: a.scrollBehavior });
+	}, s = !(a.overflow.left || a.overflow.right) || !a.loop && !a.overflow.left;
+	return /* @__PURE__ */ h(r, {
+		"data-spark-component": "scrolling-list-prev-button",
+		size: "sm",
+		intent: "surface",
+		design: "filled",
+		className: i("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible", "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),
+		onClick: o,
+		disabled: s,
+		"aria-label": e,
+		"aria-controls": "scrolling-list-items",
+		...n,
+		children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(y, {}) })
+	});
 };
-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: 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,
-      ...l,
-      children: s
-    }
-  );
+k.displayName = "ScrollingList.PrevButton";
+//#endregion
+//#region src/scrolling-list/ScrollingListSkipButton.tsx
+var A = ({ children: e, ...t }) => {
+	let r = u(x);
+	return /* @__PURE__ */ h(n, {
+		type: "button",
+		design: "tinted",
+		intent: "surface",
+		tabIndex: 0,
+		className: i("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: r.skipKeyboardNavigation,
+		...t,
+		children: e
+	});
 };
 A.displayName = "ScrollingList.SkipButton";
-const _ = Object.assign(N, {
-  Controls: I,
-  NextButton: C,
-  PrevButton: R,
-  Item: k,
-  Items: B,
-  SkipButton: A
+//#endregion
+//#region src/scrolling-list/index.ts
+var j = Object.assign(S, {
+	Controls: C,
+	NextButton: O,
+	PrevButton: k,
+	Item: T,
+	Items: D,
+	SkipButton: A
 });
-_.displayName = "ScrollingList";
-export {
-  _ as ScrollingList
-};
-//# sourceMappingURL=index.mjs.map
+j.displayName = "ScrollingList";
+//#endregion
+export { j as ScrollingList };
+
+//# sourceMappingURL=index.mjs.map