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

package/dist/carousel/index.mjs

@@ -1,639 +1,536 @@
-import { jsx as f, Fragment as it } from "react/jsx-runtime";
-import { cx as x } from "class-variance-authority";
-import { useRef as C, useCallback as S, useEffect as k, useLayoutEffect as R, useState as L, useMemo as ct, useId as lt, createContext as ut, useContext as dt, Children as pt, isValidElement as ft, cloneElement as gt } from "react";
-import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
-import { I as G } from "../Icon-BO327oHU.mjs";
-import { I as J } from "../IconButton-DdB3Pq13.mjs";
-import { ArrowVerticalLeft as ht } from "@spark-ui/icons/ArrowVerticalLeft";
-function bt(t) {
-  const e = C(/* @__PURE__ */ new Map()), r = C(null), n = C(/* @__PURE__ */ new Map()), o = S(() => (c) => {
-    c.forEach((u) => {
-      const g = u.isIntersecting, y = u.target;
-      e.current.set(y, g);
-      const m = n.current.get(y);
-      m && m(g);
-    });
-  }, []), s = S(() => {
-    if (r.current)
-      return r.current;
-    const c = t.current;
-    if (!c) return null;
-    const u = new IntersectionObserver(o(), {
-      root: c,
-      threshold: 0.2
-    });
-    return r.current = u, u;
-  }, [t, o]);
-  k(() => {
-    const c = s(), u = e.current, g = n.current;
-    return () => {
-      c && (c.disconnect(), u.clear(), g.clear(), r.current = null);
-    };
-  }, [s]);
-  const a = S(
-    (c, u) => {
-      if (!c) return;
-      const g = s();
-      if (!g) {
-        setTimeout(() => a(c, u), 0);
-        return;
-      }
-      const y = e.current.get(c) ?? !0;
-      e.current.set(c, y), n.current.set(c, u), g.observe(c), u(y);
-    },
-    [s]
-  ), i = S((c) => {
-    if (!c) return;
-    const u = r.current;
-    u && u.unobserve(c), e.current.delete(c), n.current.delete(c);
-  }, []), p = S((c) => c ? e.current.get(c) ?? !0 : !0, []);
-  return {
-    registerSlide: a,
-    unregisterSlide: i,
-    isSlideVisible: p
-  };
+import { t as e } from "../icon-D05Uqh8_.mjs";
+import { t } from "../icon-button-6p3O7NIm.mjs";
+import { cx as n } from "class-variance-authority";
+import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g } from "react/jsx-runtime";
+import { ArrowVerticalRight as _ } from "@spark-ui/icons/ArrowVerticalRight";
+import { ArrowVerticalLeft as v } from "@spark-ui/icons/ArrowVerticalLeft";
+//#region src/carousel/useCarouselVisibility.ts
+function y(e) {
+	let t = p(/* @__PURE__ */ new Map()), n = p(null), r = p(/* @__PURE__ */ new Map()), i = s(() => (e) => {
+		e.forEach((e) => {
+			let n = e.isIntersecting, i = e.target;
+			t.current.set(i, n);
+			let a = r.current.get(i);
+			a && a(n);
+		});
+	}, []), a = s(() => {
+		if (n.current) return n.current;
+		let t = e.current;
+		if (!t) return null;
+		let r = new IntersectionObserver(i(), {
+			root: t,
+			threshold: .2
+		});
+		return n.current = r, r;
+	}, [e, i]);
+	l(() => {
+		let e = a(), i = t.current, o = r.current;
+		return () => {
+			e && (e.disconnect(), i.clear(), o.clear(), n.current = null);
+		};
+	}, [a]);
+	let o = s((e, n) => {
+		if (!e) return;
+		let i = a();
+		if (!i) {
+			setTimeout(() => o(e, n), 0);
+			return;
+		}
+		let s = t.current.get(e) ?? !0;
+		t.current.set(e, s), r.current.set(e, n), i.observe(e), n(s);
+	}, [a]);
+	return {
+		registerSlide: o,
+		unregisterSlide: s((e) => {
+			if (!e) return;
+			let i = n.current;
+			i && i.unobserve(e), t.current.delete(e), r.current.delete(e);
+		}, []),
+		isSlideVisible: s((e) => e ? t.current.get(e) ?? !0 : !0, [])
+	};
 }
-function vt(t) {
-  const e = C(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  return R(() => {
-    e.current = t;
-  }), S((...r) => e.current?.(...r), []);
+//#endregion
+//#region src/carousel/useEvent.ts
+function b(e) {
+	let t = p(() => {
+		throw Error("Cannot call an event handler while rendering.");
+	});
+	return d(() => {
+		t.current = e;
+	}), s((...e) => t.current?.(...e), []);
 }
-const Ct = () => {
-  const t = C(!1);
-  return k(() => (t.current = !0, () => {
-    t.current = !1;
-  }), []), t;
+//#endregion
+//#region src/carousel/useIsMounted.ts
+var x = () => {
+	let e = p(!1);
+	return l(() => (e.current = !0, () => {
+		e.current = !1;
+	}), []), e;
 };
-function St(t, e) {
-  const r = C(0), n = C(null);
-  k(() => {
-    const o = t.current;
-    if (!o) return;
-    const s = "onscrollend" in window, a = () => {
-      e();
-    }, i = () => {
-      n.current && clearTimeout(n.current), t.current && (r.current = t.current.scrollLeft, n.current = setTimeout(() => {
-        t.current && a();
-      }, 150));
-    };
-    return s ? o.addEventListener("scrollend", a) : o.addEventListener("scroll", i), () => {
-      n.current && clearTimeout(n.current), s ? o.removeEventListener("scrollend", a) : o.removeEventListener("scroll", i);
-    };
-  }, [e, t]);
+//#endregion
+//#region src/carousel/useScrollEnd.ts
+function S(e, t) {
+	let n = p(0), r = p(null);
+	l(() => {
+		let i = e.current;
+		if (!i) return;
+		let a = "onscrollend" in window, o = () => {
+			t();
+		}, s = () => {
+			r.current && clearTimeout(r.current), e.current && (n.current = e.current.scrollLeft, r.current = setTimeout(() => {
+				e.current && o();
+			}, 150));
+		};
+		return a ? i.addEventListener("scrollend", o) : i.addEventListener("scroll", s), () => {
+			r.current && clearTimeout(r.current), a ? i.removeEventListener("scrollend", o) : i.removeEventListener("scroll", s);
+		};
+	}, [t, e]);
 }
-function yt(t, e) {
-  R(() => {
-    const r = t.current;
-    if (!r) return;
-    const n = new ResizeObserver((o) => {
-      for (const s of o)
-        e(s.contentRect.width);
-    });
-    return n.observe(r), () => n.disconnect();
-  }, [t, e]);
+//#endregion
+//#region src/carousel/useResizeObserver.ts
+function C(e, t) {
+	d(() => {
+		let n = e.current;
+		if (!n) return;
+		let r = new ResizeObserver((e) => {
+			for (let n of e) t(n.contentRect.width);
+		});
+		return r.observe(n), () => r.disconnect();
+	}, [e, t]);
 }
-function wt({
-  totalSlides: t,
-  slidesPerMove: e,
-  slidesPerPage: r
-}) {
-  const n = e === "auto" ? r : e, o = [], s = Math.floor((t - r) / n) * n;
-  for (let a = 0; a <= s; a += n)
-    o.push(a);
-  return o[o.length - 1] !== t - r && o.push(t - r), o;
+//#endregion
+//#region src/carousel/utils.ts
+function w({ totalSlides: e, slidesPerMove: t, slidesPerPage: n }) {
+	let r = t === "auto" ? n : t, i = [], a = Math.floor((e - n) / r) * r;
+	for (let e = 0; e <= a; e += r) i.push(e);
+	return i[i.length - 1] !== e - n && i.push(e - n), i;
 }
-function W(t) {
-  return t ? Array.from(t.querySelectorAll('[data-part="item"]')) : [];
+function T(e) {
+	return e ? Array.from(e.querySelectorAll("[data-part=\"item\"]")) : [];
 }
-function q(t, {
-  container: e,
-  slidesPerMove: r,
-  slidesPerPage: n
-}) {
-  return wt({
-    totalSlides: W(e).length,
-    slidesPerPage: n,
-    slidesPerMove: r
-  }).includes(t);
+function E(e, { container: t, slidesPerMove: n, slidesPerPage: r }) {
+	return w({
+		totalSlides: T(t).length,
+		slidesPerPage: r,
+		slidesPerMove: n
+	}).includes(e);
 }
-function K({
-  container: t,
-  slidesPerMove: e,
-  slidesPerPage: r
-}) {
-  return t ? W(t).filter((n, o) => q(o, {
-    slidesPerMove: e,
-    slidesPerPage: r,
-    container: t
-  })).map((n) => n.offsetLeft) : [];
+function D({ container: e, slidesPerMove: t, slidesPerPage: n }) {
+	return e ? T(e).filter((r, i) => E(i, {
+		slidesPerMove: t,
+		slidesPerPage: n,
+		container: e
+	})).map((e) => e.offsetLeft) : [];
 }
-function Nt({
-  dotIndex: t,
-  pageState: e,
-  totalPages: r,
-  maxDots: n = 5
-}) {
-  if (r <= n)
-    return t === e ? "active" : "idle";
-  if (e <= Math.floor(n / 2))
-    return t > n - 1 ? "hidden" : t === e ? "active" : t === n - 1 ? "edge" : "idle";
-  if (e >= r - Math.ceil(n / 2)) {
-    const a = r - n;
-    return t < a ? "hidden" : t === e ? "active" : t === a ? "edge" : "idle";
-  }
-  const o = e - Math.floor(n / 2), s = e + Math.floor(n / 2);
-  return t < o || t > s ? "hidden" : t === e ? "active" : t === o || t === s ? "edge" : "idle";
+function O({ dotIndex: e, pageState: t, totalPages: n, maxDots: r = 5 }) {
+	if (n <= r) return e === t ? "active" : "idle";
+	if (t <= Math.floor(r / 2)) return e > r - 1 ? "hidden" : e === t ? "active" : e === r - 1 ? "edge" : "idle";
+	if (t >= n - Math.ceil(r / 2)) {
+		let i = n - r;
+		return e < i ? "hidden" : e === t ? "active" : e === i ? "edge" : "idle";
+	}
+	let i = t - Math.floor(r / 2), a = t + Math.floor(r / 2);
+	return e < i || e > a ? "hidden" : e === t ? "active" : e === i || e === a ? "edge" : "idle";
 }
-function Pt(t = [], {
-  carouselRef: e,
-  slidesPerMove: r,
-  slidesPerPage: n
-}) {
-  const [o, s] = L(t), a = ct(() => o, [o]);
-  return yt(e, () => {
-    const i = K({
-      slidesPerMove: r,
-      slidesPerPage: n,
-      container: e.current
-    });
-    JSON.stringify(o) !== JSON.stringify(i) && s(i);
-  }), [a, s];
+//#endregion
+//#region src/carousel/useSnapPoints.ts
+function k(e = [], { carouselRef: t, slidesPerMove: n, slidesPerPage: r }) {
+	let [i, a] = m(e), o = f(() => i, [i]);
+	return C(t, () => {
+		let e = D({
+			slidesPerMove: n,
+			slidesPerPage: r,
+			container: t.current
+		});
+		JSON.stringify(i) !== JSON.stringify(e) && a(e);
+	}), [o, a];
 }
-const N = "carousel", I = "ltr", xt = ({
-  defaultPage: t,
-  gap: e = 16,
-  snapType: r = "mandatory",
-  snapStop: n = "always",
-  scrollPadding: o = 0,
-  slidesPerPage: s = 1,
-  slidesPerMove: a = "auto",
-  scrollBehavior: i = "smooth",
-  loop: p = !1,
-  pagePickerInset: c = !1,
-  maxDots: u = 5,
-  // state control
-  page: g,
-  onPageChange: y
-}) => {
-  const m = lt(), [d, A] = L(t || g || 0), v = C(null), j = C([]), _ = Ct().current, F = vt(y), { registerSlide: rt, unregisterSlide: nt, isSlideVisible: ot } = bt(v), [h] = Pt([], {
-    carouselRef: v,
-    slidesPerMove: a,
-    slidesPerPage: s
-  }), z = C(p || d > 0), V = C(p || d < h.length - 1);
-  z.current = p || d > 0, V.current = p || d < h.length - 1;
-  const M = S(
-    (l) => {
-      l !== d && (A(l), F?.(l));
-    },
-    [F, d]
-  ), w = S(
-    (l, b) => {
-      v.current && (v.current.scrollTo({
-        left: h[l],
-        behavior: b === "instant" ? "auto" : "smooth"
-      }), M(l));
-    },
-    [M, h]
-  ), $ = S(
-    (l) => {
-      if (z) {
-        const b = p && d === 0 ? h.length - 1 : Math.max(d - 1, 0);
-        w(b, i), l?.(b);
-      }
-    },
-    [p, h, d, i, w]
-  ), O = S(
-    (l) => {
-      if (V) {
-        const b = p && d === h.length - 1 ? 0 : Math.min(d + 1, h.length - 1);
-        w(b, i), l?.(b);
-      }
-    },
-    [p, h, d, i, w]
-  );
-  k(() => {
-    g != null && w(g, i);
-  }, [g, i, w]), R(() => {
-    if (t != null && !_ && v.current) {
-      const l = K({
-        container: v.current,
-        slidesPerMove: a,
-        slidesPerPage: s
-      });
-      v.current.scrollTo({
-        left: l[t],
-        behavior: "instant"
-      });
-    }
-  }, [t, _, a, s]);
-  const st = S(() => {
-    if (!v.current || h.length === 0) return;
-    const { scrollLeft: l } = v.current, b = h.map((T) => Math.abs(l - T)), E = b.indexOf(Math.min(...b));
-    E !== -1 && M(E);
-  }, [h, M]);
-  return St(v, st), {
-    ref: v,
-    pageIndicatorsRefs: j,
-    // props
-    gap: e,
-    snapType: r,
-    snapStop: n,
-    scrollPadding: o,
-    slidesPerPage: s,
-    slidesPerMove: a,
-    scrollBehavior: i,
-    loop: p,
-    pagePickerInset: c,
-    maxDots: u,
-    // computed state
-    page: d,
-    pageSnapPoints: h,
-    canScrollNext: V.current,
-    canScrollPrev: z.current,
-    scrollTo: w,
-    scrollPrev: $,
-    scrollNext: O,
-    // visibility management
-    registerSlide: rt,
-    unregisterSlide: nt,
-    isSlideVisible: ot,
-    // anatomy
-    getRootProps: () => ({
-      id: `carousel::${m}:`,
-      role: "region",
-      "aria-roledescription": "carousel",
-      "data-scope": N,
-      "data-part": "root",
-      "data-orientation": "horizontal",
-      dir: I,
-      style: {
-        "--slides-per-page": s,
-        "--slide-spacing": `${e}px`,
-        "--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
-      }
-    }),
-    getControlProps: () => ({
-      "data-scope": N,
-      "data-part": "control",
-      "data-orientation": "horizontal"
-    }),
-    getPrevTriggerProps: () => ({
-      id: `carousel::${m}::prev-trigger`,
-      "aria-controls": `carousel::${m}::item-group`,
-      "data-scope": N,
-      "data-part": "prev-trigger",
-      "data-orientation": "horizontal",
-      type: "button",
-      dir: I,
-      disabled: !z.current,
-      onClick: () => $()
-    }),
-    getNextTriggerProps: () => ({
-      id: `carousel::${m}::next-trigger`,
-      "aria-controls": `carousel::${m}::item-group`,
-      "data-scope": N,
-      "data-part": "next-trigger",
-      "data-orientation": "horizontal",
-      type: "button",
-      dir: I,
-      disabled: !V.current,
-      onClick: () => O()
-    }),
-    getSlidesContainerProps: () => ({
-      id: `carousel::${m}::item-group`,
-      /**
-       * The carousel pattern was originally designed for a single slide.
-       * When there is more than one slide, the aria-live region is set to off to avoid announcing the whole list of slides.
-       * This is not ideal but we keep it for backwards compatibility.
-       *
-       * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#wai-aria-attributes
-       */
-      "aria-live": s > 1 ? "off" : "polite",
-      "data-scope": N,
-      "data-part": "item-group",
-      "data-orientation": "horizontal",
-      dir: I,
-      tabIndex: 0,
-      style: {
-        display: "grid",
-        gap: "var(--slide-spacing)",
-        scrollSnapType: `x ${r}`,
-        gridAutoFlow: "column",
-        scrollbarWidth: "none",
-        gridAutoColumns: "var(--slide-item-size)",
-        overflowX: "auto"
-      },
-      ref: v
-    }),
-    getSlideProps: ({ index: l }) => {
-      const b = q(l, {
-        container: v.current,
-        slidesPerMove: a,
-        slidesPerPage: s
-      });
-      return {
-        id: `carousel::${m}::item:${l}`,
-        role: "group",
-        "aria-roledescription": "slide",
-        "data-scope": N,
-        "data-part": "item",
-        "data-index": l,
-        "data-orientation": "horizontal",
-        dir: I,
-        style: {
-          ...b && {
-            scrollSnapAlign: "start",
-            scrollSnapStop: n
-          }
-        }
-      };
-    },
-    getIndicatorGroupProps: () => ({
-      role: "radiogroup",
-      id: `carousel::${m}::indicator-group`,
-      "data-scope": N,
-      "data-part": "indicator-group",
-      "data-orientation": "horizontal",
-      dir: I
-    }),
-    getIndicatorProps: ({ index: l }) => {
-      const b = Nt({
-        dotIndex: l,
-        pageState: d,
-        totalPages: h.length,
-        maxDots: u
-      });
-      return {
-        role: "radio",
-        id: `carousel::${m}::indicator:${l}`,
-        "aria-checked": l === d,
-        "data-scope": N,
-        "data-part": "indicator",
-        "data-orientation": "horizontal",
-        "data-index": l,
-        "data-state": b,
-        tabIndex: l === d ? 0 : -1,
-        onClick: () => {
-          w(l, i);
-        },
-        onKeyDown: (E) => {
-          const T = (at) => {
-            j.current[at]?.focus();
-          };
-          E.key === "ArrowRight" && V ? O(T) : E.key === "ArrowLeft" && z && $(T);
-        }
-      };
-    }
-  };
-}, X = ut(null), B = ({
-  className: t,
-  snapType: e = "mandatory",
-  snapStop: r = "always",
-  scrollBehavior: n = "smooth",
-  slidesPerMove: o = "auto",
-  pagePickerInset: s = !1,
-  slidesPerPage: a = 1,
-  loop: i = !1,
-  children: p,
-  gap: c = 16,
-  defaultPage: u,
-  page: g,
-  onPageChange: y,
-  maxDots: m = 5,
-  ...d
-}) => {
-  const A = xt({
-    defaultPage: u,
-    slidesPerPage: a,
-    slidesPerMove: o,
-    loop: i,
-    gap: c,
-    scrollBehavior: n,
-    snapStop: r,
-    snapType: e,
-    page: g,
-    pagePickerInset: s,
-    onPageChange: y,
-    maxDots: m
-  });
-  return /* @__PURE__ */ f(
-    X.Provider,
-    {
-      value: {
-        ...A,
-        scrollBehavior: n
-      },
-      children: /* @__PURE__ */ f(
-        "div",
-        {
-          "data-spark-component": "carousel",
-          className: x("gap-lg relative box-border flex flex-col", t),
-          ...A.getRootProps(),
-          ...d,
-          children: p
-        }
-      )
-    }
-  );
+//#endregion
+//#region src/carousel/useCarousel.ts
+var A = "carousel", j = "ltr", M = ({ defaultPage: e, gap: t = 16, snapType: n = "mandatory", snapStop: r = "always", scrollPadding: i = 0, slidesPerPage: a = 1, slidesPerMove: o = "auto", scrollBehavior: c = "smooth", loop: f = !1, pagePickerInset: h = !1, maxDots: g = 5, page: _, onPageChange: v }) => {
+	let C = u(), [w, T] = m(e || _ || 0), M = p(null), N = p([]), P = x().current, F = b(v), { registerSlide: I, unregisterSlide: L, isSlideVisible: R } = y(M), [z] = k([], {
+		carouselRef: M,
+		slidesPerMove: o,
+		slidesPerPage: a
+	}), B = p(f || w > 0), V = p(f || w < z.length - 1);
+	B.current = f || w > 0, V.current = f || w < z.length - 1;
+	let H = s((e) => {
+		e !== w && (T(e), F?.(e));
+	}, [F, w]), U = s((e, t) => {
+		M.current && (M.current.scrollTo({
+			left: z[e],
+			behavior: t === "instant" ? "auto" : "smooth"
+		}), H(e));
+	}, [H, z]), W = s((e) => {
+		if (B) {
+			let t = f && w === 0 ? z.length - 1 : Math.max(w - 1, 0);
+			U(t, c), e?.(t);
+		}
+	}, [
+		f,
+		z,
+		w,
+		c,
+		U
+	]), G = s((e) => {
+		if (V) {
+			let t = f && w === z.length - 1 ? 0 : Math.min(w + 1, z.length - 1);
+			U(t, c), e?.(t);
+		}
+	}, [
+		f,
+		z,
+		w,
+		c,
+		U
+	]);
+	return l(() => {
+		_ != null && U(_, c);
+	}, [
+		_,
+		c,
+		U
+	]), d(() => {
+		if (e != null && !P && M.current) {
+			let t = D({
+				container: M.current,
+				slidesPerMove: o,
+				slidesPerPage: a
+			});
+			M.current.scrollTo({
+				left: t[e],
+				behavior: "instant"
+			});
+		}
+	}, [
+		e,
+		P,
+		o,
+		a
+	]), S(M, s(() => {
+		if (!M.current || z.length === 0) return;
+		let { scrollLeft: e } = M.current, t = z.map((t) => Math.abs(e - t)), n = t.indexOf(Math.min(...t));
+		n !== -1 && H(n);
+	}, [z, H])), {
+		ref: M,
+		pageIndicatorsRefs: N,
+		gap: t,
+		snapType: n,
+		snapStop: r,
+		scrollPadding: i,
+		slidesPerPage: a,
+		slidesPerMove: o,
+		scrollBehavior: c,
+		loop: f,
+		pagePickerInset: h,
+		maxDots: g,
+		page: w,
+		pageSnapPoints: z,
+		canScrollNext: V.current,
+		canScrollPrev: B.current,
+		scrollTo: U,
+		scrollPrev: W,
+		scrollNext: G,
+		registerSlide: I,
+		unregisterSlide: L,
+		isSlideVisible: R,
+		getRootProps: () => ({
+			id: `carousel::${C}:`,
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-scope": A,
+			"data-part": "root",
+			"data-orientation": "horizontal",
+			dir: j,
+			style: {
+				"--slides-per-page": a,
+				"--slide-spacing": `${t}px`,
+				"--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
+			}
+		}),
+		getControlProps: () => ({
+			"data-scope": A,
+			"data-part": "control",
+			"data-orientation": "horizontal"
+		}),
+		getPrevTriggerProps: () => ({
+			id: `carousel::${C}::prev-trigger`,
+			"aria-controls": `carousel::${C}::item-group`,
+			"data-scope": A,
+			"data-part": "prev-trigger",
+			"data-orientation": "horizontal",
+			type: "button",
+			dir: j,
+			disabled: !B.current,
+			onClick: () => W()
+		}),
+		getNextTriggerProps: () => ({
+			id: `carousel::${C}::next-trigger`,
+			"aria-controls": `carousel::${C}::item-group`,
+			"data-scope": A,
+			"data-part": "next-trigger",
+			"data-orientation": "horizontal",
+			type: "button",
+			dir: j,
+			disabled: !V.current,
+			onClick: () => G()
+		}),
+		getSlidesContainerProps: () => ({
+			id: `carousel::${C}::item-group`,
+			"aria-live": a > 1 ? "off" : "polite",
+			"data-scope": A,
+			"data-part": "item-group",
+			"data-orientation": "horizontal",
+			dir: j,
+			tabIndex: 0,
+			style: {
+				display: "grid",
+				gap: "var(--slide-spacing)",
+				scrollSnapType: `x ${n}`,
+				gridAutoFlow: "column",
+				scrollbarWidth: "none",
+				gridAutoColumns: "var(--slide-item-size)",
+				overflowX: "auto"
+			},
+			ref: M
+		}),
+		getSlideProps: ({ index: e }) => {
+			let t = E(e, {
+				container: M.current,
+				slidesPerMove: o,
+				slidesPerPage: a
+			});
+			return {
+				id: `carousel::${C}::item:${e}`,
+				role: "group",
+				"aria-roledescription": "slide",
+				"data-scope": A,
+				"data-part": "item",
+				"data-index": e,
+				"data-orientation": "horizontal",
+				dir: j,
+				style: { ...t && {
+					scrollSnapAlign: "start",
+					scrollSnapStop: r
+				} }
+			};
+		},
+		getIndicatorGroupProps: () => ({
+			role: "radiogroup",
+			id: `carousel::${C}::indicator-group`,
+			"data-scope": A,
+			"data-part": "indicator-group",
+			"data-orientation": "horizontal",
+			dir: j
+		}),
+		getIndicatorProps: ({ index: e }) => {
+			let t = O({
+				dotIndex: e,
+				pageState: w,
+				totalPages: z.length,
+				maxDots: g
+			});
+			return {
+				role: "radio",
+				id: `carousel::${C}::indicator:${e}`,
+				"aria-checked": e === w,
+				"data-scope": A,
+				"data-part": "indicator",
+				"data-orientation": "horizontal",
+				"data-index": e,
+				"data-state": t,
+				tabIndex: e === w ? 0 : -1,
+				onClick: () => {
+					U(e, c);
+				},
+				onKeyDown: (e) => {
+					let t = (e) => {
+						N.current[e]?.focus();
+					};
+					e.key === "ArrowRight" && V ? G(t) : e.key === "ArrowLeft" && B && W(t);
+				}
+			};
+		}
+	};
+}, N = a(null), P = ({ className: e, snapType: t = "mandatory", snapStop: r = "always", scrollBehavior: i = "smooth", slidesPerMove: a = "auto", pagePickerInset: o = !1, slidesPerPage: s = 1, loop: c = !1, children: l, gap: u = 16, defaultPage: d, page: f, onPageChange: p, maxDots: m = 5, ...h }) => {
+	let _ = M({
+		defaultPage: d,
+		slidesPerPage: s,
+		slidesPerMove: a,
+		loop: c,
+		gap: u,
+		scrollBehavior: i,
+		snapStop: r,
+		snapType: t,
+		page: f,
+		pagePickerInset: o,
+		onPageChange: p,
+		maxDots: m
+	});
+	return /* @__PURE__ */ g(N.Provider, {
+		value: {
+			..._,
+			scrollBehavior: i
+		},
+		children: /* @__PURE__ */ g("div", {
+			"data-spark-component": "carousel",
+			className: n("gap-lg relative box-border flex flex-col", e),
+			..._.getRootProps(),
+			...h,
+			children: l
+		})
+	});
 };
-B.displayName = "Carousel";
-const P = () => {
-  const t = dt(X);
-  if (!t)
-    throw Error("useCarouselContext must be used within a Carousel provider");
-  return t;
-}, H = ({ children: t, className: e, ...r }) => {
-  const n = P();
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      "data-spark-component": "carousel-controls",
-      className: x(
-        "default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",
-        e
-      ),
-      ...n.getControlProps(),
-      ...r,
-      children: t
-    }
-  );
+P.displayName = "Carousel";
+var F = () => {
+	let e = c(N);
+	if (!e) throw Error("useCarouselContext must be used within a Carousel provider");
+	return e;
+}, I = ({ children: e, className: t, ...r }) => {
+	let i = F();
+	return /* @__PURE__ */ g("div", {
+		"data-spark-component": "carousel-controls",
+		className: n("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between", t),
+		...i.getControlProps(),
+		...r,
+		children: e
+	});
 };
-H.displayName = "Carousel.Controls";
-const Q = ({
-  "aria-label": t,
-  ...e
-}) => {
-  const r = P();
-  return /* @__PURE__ */ f(
-    J,
-    {
-      "data-spark-component": "carousel-next-button",
-      ...r.getNextTriggerProps(),
-      intent: "surface",
-      design: "filled",
-      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": t,
-      ...e,
-      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(mt, {}) })
-    }
-  );
+I.displayName = "Carousel.Controls";
+//#endregion
+//#region src/carousel/CarouselNextButton.tsx
+var L = ({ "aria-label": n, ...r }) => {
+	let i = F();
+	return /* @__PURE__ */ g(t, {
+		"data-spark-component": "carousel-next-button",
+		...i.getNextTriggerProps(),
+		intent: "surface",
+		design: "filled",
+		className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
+		"aria-label": n,
+		...r,
+		children: /* @__PURE__ */ g(e, { children: /* @__PURE__ */ g(_, {}) })
+	});
 };
-Q.displayName = "Carousel.NextButton";
-const U = ({
-  children: t,
-  unstyled: e = !1,
-  index: r,
-  "aria-label": n,
-  className: o,
-  intent: s = "support"
-}) => {
-  const a = P(), i = C(null);
-  k(() => {
-    a.pageIndicatorsRefs.current && (a.pageIndicatorsRefs.current[r] = i.current);
-  });
-  const p = a.getIndicatorProps({ index: r });
-  return /* @__PURE__ */ f(
-    "button",
-    {
-      "data-spark-component": "carousel-page-indicator",
-      ref: i,
-      ...p,
-      "aria-label": n,
-      className: x(
-        {
-          [x(
-            "border-outline group relative flex justify-center border-0 hover:cursor-pointer",
-            "m-sm rounded-sm transition-all duration-[200ms] ease-linear",
-            "w-sz-8 h-sz-8",
-            "data-[state=active]:w-sz-32 data-[state=active]:h-sz-8",
-            "data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4",
-            "data-[state=hidden]:m-0 data-[state=hidden]:size-0",
-            s === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-support bg-on-surface/dim-2"
-          )]: !e
-          // [dotsStyles]: !unstyled,
-        },
-        o
-      ),
-      children: t
-    },
-    r
-  );
+L.displayName = "Carousel.NextButton";
+//#endregion
+//#region src/carousel/CarouselPageIndicator.tsx
+var R = ({ children: e, unstyled: t = !1, index: r, "aria-label": i, className: a, intent: o = "support" }) => {
+	let s = F(), c = p(null);
+	l(() => {
+		s.pageIndicatorsRefs.current && (s.pageIndicatorsRefs.current[r] = c.current);
+	});
+	let u = s.getIndicatorProps({ index: r });
+	return /* @__PURE__ */ g("button", {
+		"data-spark-component": "carousel-page-indicator",
+		ref: c,
+		...u,
+		"aria-label": i,
+		className: n({ [n("border-outline group relative flex justify-center border-0 hover:cursor-pointer", "m-sm rounded-sm transition-all duration-[200ms] ease-linear", "w-sz-8 h-sz-8", "data-[state=active]:w-sz-32 data-[state=active]:h-sz-8", "data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4", "data-[state=hidden]:m-0 data-[state=hidden]:size-0", o === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-support bg-on-surface/dim-2")]: !t }, a),
+		children: e
+	}, r);
 };
-U.displayName = "Carousel.PageIndicator";
-const Y = ({ children: t, className: e }) => {
-  const r = P();
-  return /* @__PURE__ */ f(it, { children: /* @__PURE__ */ f(
-    "div",
-    {
-      "data-spark-component": "carousel-page-picker",
-      ...r.getIndicatorGroupProps(),
-      className: x(
-        "flex-wrap items-center justify-center",
-        "default:min-h-sz-16 flex",
-        r.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
-        e
-      ),
-      children: r.pageSnapPoints.length <= 1 ? null : t({
-        ...r,
-        pages: Array.from({ length: r.pageSnapPoints.length }, (n, o) => o)
-      })
-    }
-  ) });
+R.displayName = "Carousel.PageIndicator";
+//#endregion
+//#region src/carousel/CarouselPagePicker.tsx
+var z = ({ children: e, className: t }) => {
+	let r = F();
+	return /* @__PURE__ */ g(h, { children: /* @__PURE__ */ g("div", {
+		"data-spark-component": "carousel-page-picker",
+		...r.getIndicatorGroupProps(),
+		className: n("flex-wrap items-center justify-center", "default:min-h-sz-16 flex", r.pagePickerInset && "bottom-sz-12 absolute inset-x-0", t),
+		children: r.pageSnapPoints.length <= 1 ? null : e({
+			...r,
+			pages: Array.from({ length: r.pageSnapPoints.length }, (e, t) => t)
+		})
+	}) });
 };
-Y.displayName = "Carousel.PagePicker";
-const Z = ({
-  "aria-label": t,
-  ...e
-}) => {
-  const r = P();
-  return /* @__PURE__ */ f(
-    J,
-    {
-      "data-spark-component": "carousel-prev-button",
-      ...r.getPrevTriggerProps(),
-      intent: "surface",
-      design: "filled",
-      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": t,
-      ...e,
-      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(ht, {}) })
-    }
-  );
+z.displayName = "Carousel.PagePicker";
+//#endregion
+//#region src/carousel/CarouselPrevButton.tsx
+var B = ({ "aria-label": n, ...r }) => {
+	let i = F();
+	return /* @__PURE__ */ g(t, {
+		"data-spark-component": "carousel-prev-button",
+		...i.getPrevTriggerProps(),
+		intent: "surface",
+		design: "filled",
+		className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
+		"aria-label": n,
+		...r,
+		children: /* @__PURE__ */ g(e, { children: /* @__PURE__ */ g(v, {}) })
+	});
 };
-Z.displayName = "Carousel.PrevButton";
-function It(t, e) {
-  const [r, n] = L(!0), o = P();
-  return k(() => {
-    const s = t.current;
-    if (!s) return;
-    const { registerSlide: a, unregisterSlide: i } = o;
-    return a(s, n), () => {
-      i(s);
-    };
-  }, [t]), r;
+B.displayName = "Carousel.PrevButton";
+//#endregion
+//#region src/carousel/useIsVisible.ts
+function V(e, t) {
+	let [n, r] = m(!0), i = F();
+	return l(() => {
+		let t = e.current;
+		if (!t) return;
+		let { registerSlide: n, unregisterSlide: a } = i;
+		return n(t, r), () => {
+			a(t);
+		};
+	}, [e]), n;
 }
-const D = ({
-  children: t,
-  index: e = 0,
-  totalSlides: r,
-  className: n = "",
-  ...o
-}) => {
-  const s = C(null), a = P(), i = It(s, a.ref);
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      "data-spark-component": "carousel-slide",
-      ref: s,
-      ...a.getSlideProps({ index: e, totalSlides: r }),
-      className: x("default:bg-surface relative overflow-hidden", n),
-      "aria-hidden": !i,
-      inert: !i,
-      ...o,
-      children: t
-    }
-  );
+//#endregion
+//#region src/carousel/CarouselSlide.tsx
+var H = ({ children: e, index: t = 0, totalSlides: r, className: i = "", ...a }) => {
+	let o = p(null), s = F(), c = V(o, s.ref);
+	return /* @__PURE__ */ g("div", {
+		"data-spark-component": "carousel-slide",
+		ref: o,
+		...s.getSlideProps({
+			index: t,
+			totalSlides: r
+		}),
+		className: n("default:bg-surface relative overflow-hidden", i),
+		"aria-hidden": !c,
+		inert: !c,
+		...a,
+		children: e
+	});
 };
-D.displayName = "Carousel.Slide";
-const tt = ({ children: t, className: e = "" }) => {
-  const r = P(), n = pt.toArray(t);
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      "data-spark-component": "carousel-slides",
-      ...r.getSlidesContainerProps(),
-      className: x(
-        "focus-visible:u-outline relative w-full",
-        "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        e
-      ),
-      children: n.map(
-        (o, s) => ft(o) ? gt(o, {
-          index: s,
-          totalSlides: n.length
-        }) : o
-      )
-    }
-  );
+H.displayName = "Carousel.Slide";
+//#endregion
+//#region src/carousel/CarouselSlides.tsx
+var U = ({ children: e, className: t = "" }) => {
+	let a = F(), s = r.toArray(e);
+	return /* @__PURE__ */ g("div", {
+		"data-spark-component": "carousel-slides",
+		...a.getSlidesContainerProps(),
+		className: n("focus-visible:u-outline relative w-full", "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", t),
+		children: s.map((e, t) => o(e) ? i(e, {
+			index: t,
+			totalSlides: s.length
+		}) : e)
+	});
 };
-tt.displayName = "Carousel.Slides";
-const et = ({ children: t }) => /* @__PURE__ */ f("div", { className: "relative flex items-center justify-around p-0", children: t });
-et.displayName = "Carousel.Viewport";
-const kt = Object.assign(B, {
-  Controls: H,
-  NextButton: Q,
-  PrevButton: Z,
-  Slide: D,
-  Slides: tt,
-  Viewport: et,
-  PagePicker: Y,
-  PageIndicator: U
+U.displayName = "Carousel.Slides";
+//#endregion
+//#region src/carousel/CarouselViewport.tsx
+var W = ({ children: e }) => /* @__PURE__ */ g("div", {
+	className: "relative flex items-center justify-around p-0",
+	children: e
 });
-kt.displayName = "Carousel";
-export {
-  kt as Carousel
-};
-//# sourceMappingURL=index.mjs.map
+W.displayName = "Carousel.Viewport";
+//#endregion
+//#region src/carousel/index.ts
+var G = Object.assign(P, {
+	Controls: I,
+	NextButton: L,
+	PrevButton: B,
+	Slide: H,
+	Slides: U,
+	Viewport: W,
+	PagePicker: z,
+	PageIndicator: R
+});
+G.displayName = "Carousel";
+//#endregion
+export { G as Carousel };
+
+//# sourceMappingURL=index.mjs.map