@spark-ui/components 13.1.3 → 13.1.4

package/dist/carousel/index.mjs

@@ -1,309 +1,467 @@
-import { jsx as f, Fragment as it } from "react/jsx-runtime";
-import { a as x } from "../index-BmAFn37q.mjs";
-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, cloneElement as ft, isValidElement as gt } from "react";
-import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
-import { I as G } from "../Icon-D1RueiPY.mjs";
-import { I as J } from "../IconButton-BY3gYXtU.mjs";
-import { ArrowVerticalLeft as bt } from "@spark-ui/icons/ArrowVerticalLeft";
-function ht(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,
+import {
+  IconButton
+} from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
+
+// src/carousel/Carousel.tsx
+import { cx } from "class-variance-authority";
+import { createContext, useContext } from "react";
+
+// src/carousel/useCarousel.ts
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useId,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef5,
+  useState as useState2
+} from "react";
+
+// src/carousel/useCarouselVisibility.ts
+import { useCallback, useEffect, useRef } from "react";
+function useCarouselVisibility(carouselRef) {
+  const slideVisibilityMap = useRef(/* @__PURE__ */ new Map());
+  const visibilityObserverRef = useRef(null);
+  const visibilityCallbacksRef = useRef(/* @__PURE__ */ new Map());
+  const createObserverCallback = useCallback(() => {
+    return (entries) => {
+      entries.forEach((entry) => {
+        const isVisible = entry.isIntersecting;
+        const element = entry.target;
+        slideVisibilityMap.current.set(element, isVisible);
+        const callback = visibilityCallbacksRef.current.get(element);
+        if (callback) {
+          callback(isVisible);
+        }
+      });
+    };
+  }, []);
+  const getOrCreateObserver = useCallback(() => {
+    if (visibilityObserverRef.current) {
+      return visibilityObserverRef.current;
+    }
+    const container = carouselRef.current;
+    if (!container) return null;
+    const observer = new IntersectionObserver(createObserverCallback(), {
+      root: container,
       threshold: 0.2
     });
-    return r.current = u, u;
-  }, [t, o]);
-  k(() => {
-    const c = s(), u = e.current, g = n.current;
+    visibilityObserverRef.current = observer;
+    return observer;
+  }, [carouselRef, createObserverCallback]);
+  useEffect(() => {
+    const observer = getOrCreateObserver();
+    const visibilityMap = slideVisibilityMap.current;
+    const callbacksMap = visibilityCallbacksRef.current;
     return () => {
-      c && (c.disconnect(), u.clear(), g.clear(), r.current = null);
+      if (observer) {
+        observer.disconnect();
+        visibilityMap.clear();
+        callbacksMap.clear();
+        visibilityObserverRef.current = null;
+      }
     };
-  }, [s]);
-  const a = S(
-    (c, u) => {
-      if (!c) return;
-      const g = s();
-      if (!g) {
-        setTimeout(() => a(c, u), 0);
+  }, [getOrCreateObserver]);
+  const registerSlide = useCallback(
+    (element, callback) => {
+      if (!element) return;
+      const observer = getOrCreateObserver();
+      if (!observer) {
+        setTimeout(() => registerSlide(element, callback), 0);
         return;
       }
-      const y = e.current.get(c) ?? !0;
-      e.current.set(c, y), n.current.set(c, u), g.observe(c), u(y);
+      const initialVisible = slideVisibilityMap.current.get(element) ?? true;
+      slideVisibilityMap.current.set(element, initialVisible);
+      visibilityCallbacksRef.current.set(element, callback);
+      observer.observe(element);
+      callback(initialVisible);
     },
-    [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, []);
+    [getOrCreateObserver]
+  );
+  const unregisterSlide = useCallback((element) => {
+    if (!element) return;
+    const observer = visibilityObserverRef.current;
+    if (observer) {
+      observer.unobserve(element);
+    }
+    slideVisibilityMap.current.delete(element);
+    visibilityCallbacksRef.current.delete(element);
+  }, []);
+  const isSlideVisible = useCallback((element) => {
+    if (!element) return true;
+    return slideVisibilityMap.current.get(element) ?? true;
+  }, []);
   return {
-    registerSlide: a,
-    unregisterSlide: i,
-    isSlideVisible: p
+    registerSlide,
+    unregisterSlide,
+    isSlideVisible
   };
 }
-function vt(t) {
-  const e = C(() => {
+
+// src/carousel/useEvent.ts
+import { useCallback as useCallback2, useLayoutEffect, useRef as useRef2 } from "react";
+function useEvent(callback) {
+  const ref = useRef2(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
-  return R(() => {
-    e.current = t;
-  }), S((...r) => e.current?.(...r), []);
+  useLayoutEffect(() => {
+    ref.current = callback;
+  });
+  return useCallback2((...args) => ref.current?.(...args), []);
 }
-const Ct = () => {
-  const t = C(!1);
-  return k(() => (t.current = !0, () => {
-    t.current = !1;
-  }), []), t;
+
+// src/carousel/useIsMounted.ts
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+var useIsMounted = () => {
+  const isMounted = useRef3(false);
+  useEffect2(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
 };
-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));
+
+// src/carousel/useScrollEnd.ts
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
+function useScrollEnd(scrollRef, callback) {
+  const scrollLeft = useRef4(0);
+  const safariTimeout = useRef4(null);
+  useEffect3(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const supportsScrollend = "onscrollend" in window;
+    const handleScrollEnd = () => {
+      callback();
     };
-    return s ? o.addEventListener("scrollend", a) : o.addEventListener("scroll", i), () => {
-      n.current && clearTimeout(n.current), s ? o.removeEventListener("scrollend", a) : o.removeEventListener("scroll", i);
+    const handleSafariScroll = () => {
+      if (safariTimeout.current) {
+        clearTimeout(safariTimeout.current);
+      }
+      if (scrollRef.current) {
+        scrollLeft.current = scrollRef.current.scrollLeft;
+        safariTimeout.current = setTimeout(() => {
+          if (scrollRef.current) {
+            handleScrollEnd();
+          }
+        }, 150);
+      }
+    };
+    if (supportsScrollend) {
+      element.addEventListener("scrollend", handleScrollEnd);
+    } else {
+      element.addEventListener("scroll", handleSafariScroll);
+    }
+    return () => {
+      if (safariTimeout.current) {
+        clearTimeout(safariTimeout.current);
+      }
+      if (supportsScrollend) {
+        element.removeEventListener("scrollend", handleScrollEnd);
+      } else {
+        element.removeEventListener("scroll", handleSafariScroll);
+      }
     };
-  }, [e, t]);
+  }, [callback, scrollRef]);
 }
-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);
+
+// src/carousel/useSnapPoints.ts
+import { useMemo, useState } from "react";
+
+// src/carousel/useResizeObserver.ts
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+function useResizeObserver(ref, callback) {
+  useLayoutEffect2(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        callback(entry.contentRect.width);
+      }
     });
-    return n.observe(r), () => n.disconnect();
-  }, [t, e]);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, callback]);
 }
-function wt({
-  totalSlides: t,
-  slidesPerMove: e,
-  slidesPerPage: r
+
+// src/carousel/utils.ts
+function getSnapIndices({
+  totalSlides,
+  slidesPerMove,
+  slidesPerPage
 }) {
-  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;
+  const slideBy = slidesPerMove === "auto" ? slidesPerPage : slidesPerMove;
+  const snapPoints = [];
+  const lastSnapIndex = Math.floor((totalSlides - slidesPerPage) / slideBy) * slideBy;
+  for (let i = 0; i <= lastSnapIndex; i += slideBy) {
+    snapPoints.push(i);
+  }
+  if (snapPoints[snapPoints.length - 1] !== totalSlides - slidesPerPage) {
+    snapPoints.push(totalSlides - slidesPerPage);
+  }
+  return snapPoints;
 }
-function W(t) {
-  return t ? Array.from(t.querySelectorAll('[data-part="item"]')) : [];
+function getSlideElements(container) {
+  return container ? Array.from(container.querySelectorAll('[data-part="item"]')) : [];
 }
-function q(t, {
-  container: e,
-  slidesPerMove: r,
-  slidesPerPage: n
+function isSnapPoint(slideIndex, {
+  container,
+  slidesPerMove,
+  slidesPerPage
 }) {
-  return wt({
-    totalSlides: W(e).length,
-    slidesPerPage: n,
-    slidesPerMove: r
-  }).includes(t);
+  return getSnapIndices({
+    totalSlides: getSlideElements(container).length,
+    slidesPerPage,
+    slidesPerMove
+  }).includes(slideIndex);
 }
-function K({
-  container: t,
-  slidesPerMove: e,
-  slidesPerPage: r
+function getSnapPositions({
+  container,
+  slidesPerMove,
+  slidesPerPage
 }) {
-  return t ? W(t).filter((n, o) => q(o, {
-    slidesPerMove: e,
-    slidesPerPage: r,
-    container: t
-  })).map((n) => n.offsetLeft) : [];
+  if (!container) return [];
+  return getSlideElements(container).filter((_, index) => {
+    return isSnapPoint(index, {
+      slidesPerMove,
+      slidesPerPage,
+      container
+    });
+  }).map((slide) => slide.offsetLeft);
 }
-function Nt({
-  dotIndex: t,
-  pageState: e,
-  totalPages: r,
-  maxDots: n = 5
+function computeDotState({
+  dotIndex,
+  pageState,
+  totalPages,
+  maxDots = 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";
+  if (totalPages <= maxDots) {
+    return dotIndex === pageState ? "active" : "idle";
+  }
+  if (pageState <= Math.floor(maxDots / 2)) {
+    if (dotIndex > maxDots - 1) return "hidden";
+    if (dotIndex === pageState) return "active";
+    if (dotIndex === maxDots - 1) return "edge";
+    return "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";
+  if (pageState >= totalPages - Math.ceil(maxDots / 2)) {
+    const startIndex2 = totalPages - maxDots;
+    if (dotIndex < startIndex2) return "hidden";
+    if (dotIndex === pageState) return "active";
+    if (dotIndex === startIndex2) return "edge";
+    return "idle";
+  }
+  const startIndex = pageState - Math.floor(maxDots / 2);
+  const endIndex = pageState + Math.floor(maxDots / 2);
+  if (dotIndex < startIndex || dotIndex > endIndex) return "hidden";
+  if (dotIndex === pageState) return "active";
+  if (dotIndex === startIndex || dotIndex === endIndex) return "edge";
+  return "idle";
 }
-function Pt(t = [], {
-  carouselRef: e,
-  slidesPerMove: r,
-  slidesPerPage: n
+
+// src/carousel/useSnapPoints.ts
+function useSnapPoints(initialSnapPoints = [], {
+  carouselRef,
+  slidesPerMove,
+  slidesPerPage
 }) {
-  const [o, s] = L(t), a = ct(() => o, [o]);
-  return yt(e, () => {
-    const i = K({
-      slidesPerMove: r,
-      slidesPerPage: n,
-      container: e.current
+  const [pageSnapPoints, setPageSnapPoints] = useState(initialSnapPoints);
+  const stableSnapPoints = useMemo(() => pageSnapPoints, [pageSnapPoints]);
+  useResizeObserver(carouselRef, () => {
+    const newSnapPoints = getSnapPositions({
+      slidesPerMove,
+      slidesPerPage,
+      container: carouselRef.current
     });
-    JSON.stringify(o) !== JSON.stringify(i) && s(i);
-  }), [a, s];
+    if (JSON.stringify(pageSnapPoints) !== JSON.stringify(newSnapPoints)) {
+      setPageSnapPoints(newSnapPoints);
+    }
+  });
+  return [stableSnapPoints, setPageSnapPoints];
 }
-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,
+
+// src/carousel/useCarousel.ts
+var DATA_SCOPE = "carousel";
+var DIRECTION = "ltr";
+var useCarousel = ({
+  defaultPage,
+  gap = 16,
+  snapType = "mandatory",
+  snapStop = "always",
+  scrollPadding = 0,
+  slidesPerPage = 1,
+  slidesPerMove = "auto",
+  scrollBehavior = "smooth",
+  loop = false,
+  pagePickerInset = false,
+  maxDots = 5,
   // state control
-  page: g,
-  onPageChange: y
+  page: controlledPage,
+  onPageChange: onPageChangeProp
 }) => {
-  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 } = ht(v), [b] = Pt([], {
-    carouselRef: v,
-    slidesPerMove: a,
-    slidesPerPage: s
-  }), z = C(p || d > 0), V = C(p || d < b.length - 1);
-  z.current = p || d > 0, V.current = p || d < b.length - 1;
-  const M = S(
-    (l) => {
-      l !== d && (A(l), F?.(l));
+  const carouselId = useId();
+  const [pageState, setPageState] = useState2(defaultPage || controlledPage || 0);
+  const carouselRef = useRef5(null);
+  const pageIndicatorsRefs = useRef5([]);
+  const isMountedRef = useIsMounted();
+  const isMounted = isMountedRef.current;
+  const onPageChange = useEvent(onPageChangeProp);
+  const { registerSlide, unregisterSlide, isSlideVisible } = useCarouselVisibility(carouselRef);
+  const [pageSnapPoints] = useSnapPoints([], {
+    carouselRef,
+    slidesPerMove,
+    slidesPerPage
+  });
+  const canScrollPrev = useRef5(loop || pageState > 0);
+  const canScrollNext = useRef5(loop || pageState < pageSnapPoints.length - 1);
+  canScrollPrev.current = loop || pageState > 0;
+  canScrollNext.current = loop || pageState < pageSnapPoints.length - 1;
+  const handlePageChange = useCallback3(
+    (page) => {
+      if (page !== pageState) {
+        setPageState(page);
+        onPageChange?.(page);
+      }
     },
-    [F, d]
-  ), w = S(
-    (l, h) => {
-      v.current && (v.current.scrollTo({
-        left: b[l],
-        behavior: h === "instant" ? "auto" : "smooth"
-      }), M(l));
+    [onPageChange, pageState]
+  );
+  const scrollTo = useCallback3(
+    (page, behavior) => {
+      if (carouselRef.current) {
+        carouselRef.current.scrollTo({
+          left: pageSnapPoints[page],
+          behavior: behavior === "instant" ? "auto" : "smooth"
+        });
+        handlePageChange(page);
+      }
     },
-    [M, b]
-  ), $ = S(
-    (l) => {
-      if (z) {
-        const h = p && d === 0 ? b.length - 1 : Math.max(d - 1, 0);
-        w(h, i), l?.(h);
+    [handlePageChange, pageSnapPoints]
+  );
+  const scrollPrev = useCallback3(
+    (cb) => {
+      if (canScrollPrev) {
+        const targetPage = loop && pageState === 0 ? pageSnapPoints.length - 1 : Math.max(pageState - 1, 0);
+        scrollTo(targetPage, scrollBehavior);
+        cb?.(targetPage);
       }
     },
-    [p, b, d, i, w]
-  ), O = S(
-    (l) => {
-      if (V) {
-        const h = p && d === b.length - 1 ? 0 : Math.min(d + 1, b.length - 1);
-        w(h, i), l?.(h);
+    [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
+  );
+  const scrollNext = useCallback3(
+    (cb) => {
+      if (canScrollNext) {
+        const targetPage = loop && pageState === pageSnapPoints.length - 1 ? 0 : Math.min(pageState + 1, pageSnapPoints.length - 1);
+        scrollTo(targetPage, scrollBehavior);
+        cb?.(targetPage);
       }
     },
-    [p, b, d, i, w]
+    [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
   );
-  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
+  useEffect4(() => {
+    if (controlledPage != null) {
+      scrollTo(controlledPage, scrollBehavior);
+    }
+  }, [controlledPage, scrollBehavior, scrollTo]);
+  useLayoutEffect3(() => {
+    if (defaultPage != null && !isMounted && carouselRef.current) {
+      const snapPositions = getSnapPositions({
+        container: carouselRef.current,
+        slidesPerMove,
+        slidesPerPage
       });
-      v.current.scrollTo({
-        left: l[t],
+      carouselRef.current.scrollTo({
+        left: snapPositions[defaultPage],
         behavior: "instant"
       });
     }
-  }, [t, _, a, s]);
-  const st = S(() => {
-    if (!v.current || b.length === 0) return;
-    const { scrollLeft: l } = v.current, h = b.map((T) => Math.abs(l - T)), E = h.indexOf(Math.min(...h));
-    E !== -1 && M(E);
-  }, [b, M]);
-  return St(v, st), {
-    ref: v,
-    pageIndicatorsRefs: j,
+  }, [defaultPage, isMounted, slidesPerMove, slidesPerPage]);
+  const syncPageStateWithScrollPosition = useCallback3(() => {
+    if (!carouselRef.current || pageSnapPoints.length === 0) return;
+    const { scrollLeft } = carouselRef.current;
+    const distances = pageSnapPoints.map((pagePosition) => Math.abs(scrollLeft - pagePosition));
+    const pageInViewport = distances.indexOf(Math.min(...distances));
+    if (pageInViewport !== -1) {
+      handlePageChange(pageInViewport);
+    }
+  }, [pageSnapPoints, handlePageChange]);
+  useScrollEnd(carouselRef, syncPageStateWithScrollPosition);
+  const contextValue = {
+    ref: carouselRef,
+    pageIndicatorsRefs,
     // props
-    gap: e,
-    snapType: r,
-    snapStop: n,
-    scrollPadding: o,
-    slidesPerPage: s,
-    slidesPerMove: a,
-    scrollBehavior: i,
-    loop: p,
-    pagePickerInset: c,
-    maxDots: u,
+    gap,
+    snapType,
+    snapStop,
+    scrollPadding,
+    slidesPerPage,
+    slidesPerMove,
+    scrollBehavior,
+    loop,
+    pagePickerInset,
+    maxDots,
     // computed state
-    page: d,
-    pageSnapPoints: b,
-    canScrollNext: V.current,
-    canScrollPrev: z.current,
-    scrollTo: w,
-    scrollPrev: $,
-    scrollNext: O,
+    page: pageState,
+    pageSnapPoints,
+    canScrollNext: canScrollNext.current,
+    canScrollPrev: canScrollPrev.current,
+    scrollTo,
+    scrollPrev,
+    scrollNext,
     // visibility management
-    registerSlide: rt,
-    unregisterSlide: nt,
-    isSlideVisible: ot,
+    registerSlide,
+    unregisterSlide,
+    isSlideVisible,
     // anatomy
     getRootProps: () => ({
-      id: `carousel::${m}:`,
+      id: `carousel::${carouselId}:`,
       role: "region",
       "aria-roledescription": "carousel",
-      "data-scope": N,
+      "data-scope": DATA_SCOPE,
       "data-part": "root",
       "data-orientation": "horizontal",
-      dir: I,
+      dir: DIRECTION,
       style: {
-        "--slides-per-page": s,
-        "--slide-spacing": `${e}px`,
+        "--slides-per-page": slidesPerPage,
+        "--slide-spacing": `${gap}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-scope": DATA_SCOPE,
       "data-part": "control",
       "data-orientation": "horizontal"
     }),
     getPrevTriggerProps: () => ({
-      id: `carousel::${m}::prev-trigger`,
-      "aria-controls": `carousel::${m}::item-group`,
-      "data-scope": N,
+      id: `carousel::${carouselId}::prev-trigger`,
+      "aria-controls": `carousel::${carouselId}::item-group`,
+      "data-scope": DATA_SCOPE,
       "data-part": "prev-trigger",
       "data-orientation": "horizontal",
       type: "button",
-      dir: I,
-      disabled: !z.current,
-      onClick: () => $()
+      dir: DIRECTION,
+      disabled: !canScrollPrev.current,
+      onClick: () => scrollPrev()
     }),
     getNextTriggerProps: () => ({
-      id: `carousel::${m}::next-trigger`,
-      "aria-controls": `carousel::${m}::item-group`,
-      "data-scope": N,
+      id: `carousel::${carouselId}::next-trigger`,
+      "aria-controls": `carousel::${carouselId}::item-group`,
+      "data-scope": DATA_SCOPE,
       "data-part": "next-trigger",
       "data-orientation": "horizontal",
       type: "button",
-      dir: I,
-      disabled: !V.current,
-      onClick: () => O()
+      dir: DIRECTION,
+      disabled: !canScrollNext.current,
+      onClick: () => scrollNext()
     }),
     getSlidesContainerProps: () => ({
-      id: `carousel::${m}::item-group`,
+      id: `carousel::${carouselId}::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.
@@ -311,329 +469,393 @@ const N = "carousel", I = "ltr", xt = ({
        *
        * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#wai-aria-attributes
        */
-      "aria-live": s > 1 ? "off" : "polite",
-      "data-scope": N,
+      "aria-live": slidesPerPage > 1 ? "off" : "polite",
+      "data-scope": DATA_SCOPE,
       "data-part": "item-group",
       "data-orientation": "horizontal",
-      dir: I,
+      dir: DIRECTION,
       tabIndex: 0,
       style: {
         display: "grid",
         gap: "var(--slide-spacing)",
-        scrollSnapType: `x ${r}`,
+        scrollSnapType: `x ${snapType}`,
         gridAutoFlow: "column",
         scrollbarWidth: "none",
         gridAutoColumns: "var(--slide-item-size)",
         overflowX: "auto"
       },
-      ref: v
+      ref: carouselRef
     }),
-    getSlideProps: ({ index: l }) => {
-      const h = q(l, {
-        container: v.current,
-        slidesPerMove: a,
-        slidesPerPage: s
+    getSlideProps: ({ index }) => {
+      const isStopPoint = isSnapPoint(index, {
+        container: carouselRef.current,
+        slidesPerMove,
+        slidesPerPage
       });
       return {
-        id: `carousel::${m}::item:${l}`,
+        id: `carousel::${carouselId}::item:${index}`,
         role: "group",
         "aria-roledescription": "slide",
-        "data-scope": N,
+        "data-scope": DATA_SCOPE,
         "data-part": "item",
-        "data-index": l,
+        "data-index": index,
         "data-orientation": "horizontal",
-        dir: I,
+        dir: DIRECTION,
         style: {
-          ...h && {
+          ...isStopPoint && {
             scrollSnapAlign: "start",
-            scrollSnapStop: n
+            scrollSnapStop: snapStop
           }
         }
       };
     },
     getIndicatorGroupProps: () => ({
       role: "radiogroup",
-      id: `carousel::${m}::indicator-group`,
-      "data-scope": N,
+      id: `carousel::${carouselId}::indicator-group`,
+      "data-scope": DATA_SCOPE,
       "data-part": "indicator-group",
       "data-orientation": "horizontal",
-      dir: I
+      dir: DIRECTION
     }),
-    getIndicatorProps: ({ index: l }) => {
-      const h = Nt({
-        dotIndex: l,
-        pageState: d,
-        totalPages: b.length,
-        maxDots: u
+    getIndicatorProps: ({ index }) => {
+      const dotState = computeDotState({
+        dotIndex: index,
+        pageState,
+        totalPages: pageSnapPoints.length,
+        maxDots
       });
       return {
         role: "radio",
-        id: `carousel::${m}::indicator:${l}`,
-        "aria-checked": l === d,
-        "data-scope": N,
+        id: `carousel::${carouselId}::indicator:${index}`,
+        "aria-checked": index === pageState,
+        "data-scope": DATA_SCOPE,
         "data-part": "indicator",
         "data-orientation": "horizontal",
-        "data-index": l,
-        "data-state": h,
-        tabIndex: l === d ? 0 : -1,
+        "data-index": index,
+        "data-state": dotState,
+        tabIndex: index === pageState ? 0 : -1,
         onClick: () => {
-          w(l, i);
+          scrollTo(index, scrollBehavior);
         },
-        onKeyDown: (E) => {
-          const T = (at) => {
-            j.current[at]?.focus();
+        onKeyDown: (event) => {
+          const focusActiveIndicator = (page) => {
+            pageIndicatorsRefs.current[page]?.focus();
           };
-          E.key === "ArrowRight" && V ? O(T) : E.key === "ArrowLeft" && z && $(T);
+          if (event.key === "ArrowRight" && canScrollNext) {
+            scrollNext(focusActiveIndicator);
+          } else if (event.key === "ArrowLeft" && canScrollPrev) {
+            scrollPrev(focusActiveIndicator);
+          }
         }
       };
     }
   };
-}, 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
+  return contextValue;
+};
+
+// src/carousel/Carousel.tsx
+import { jsx } from "react/jsx-runtime";
+var CarouselContext = createContext(null);
+var Carousel = ({
+  className,
+  snapType = "mandatory",
+  snapStop = "always",
+  scrollBehavior = "smooth",
+  slidesPerMove = "auto",
+  pagePickerInset = false,
+  slidesPerPage = 1,
+  loop = false,
+  children,
+  gap = 16,
+  defaultPage,
+  page,
+  onPageChange,
+  maxDots = 5,
+  ...props
 }) => {
-  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
+  const carouselApi = useCarousel({
+    defaultPage,
+    slidesPerPage,
+    slidesPerMove,
+    loop,
+    gap,
+    scrollBehavior,
+    snapStop,
+    snapType,
+    page,
+    pagePickerInset,
+    onPageChange,
+    maxDots
   });
-  return /* @__PURE__ */ f(
-    X.Provider,
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
     {
       value: {
-        ...A,
-        scrollBehavior: n
+        ...carouselApi,
+        scrollBehavior
       },
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           "data-spark-component": "carousel",
-          className: x("gap-lg relative box-border flex flex-col", t),
-          ...A.getRootProps(),
-          ...d,
-          children: p
+          className: cx("gap-lg relative box-border flex flex-col", className),
+          ...carouselApi.getRootProps(),
+          ...props,
+          children
         }
       )
     }
   );
 };
-B.displayName = "Carousel";
-const P = () => {
-  const t = dt(X);
-  if (!t)
+Carousel.displayName = "Carousel";
+var useCarouselContext = () => {
+  const context = useContext(CarouselContext);
+  if (!context) {
     throw Error("useCarouselContext must be used within a Carousel provider");
-  return t;
-}, H = ({ children: t, className: e, ...r }) => {
-  const n = P();
-  return /* @__PURE__ */ f(
+  }
+  return context;
+};
+
+// src/carousel/CarouselControls.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CarouselControls = ({ children, className, ...props }) => {
+  const ctx = useCarouselContext();
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-spark-component": "carousel-controls",
-      className: x(
+      className: cx2(
         "default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",
-        e
+        className
       ),
-      ...n.getControlProps(),
-      ...r,
-      children: t
+      ...ctx.getControlProps(),
+      ...props,
+      children
     }
   );
 };
-H.displayName = "Carousel.Controls";
-const Q = ({
-  "aria-label": t,
-  ...e
+CarouselControls.displayName = "Carousel.Controls";
+
+// src/carousel/CarouselNextButton.tsx
+import { ArrowVerticalRight } from "@spark-ui/icons/ArrowVerticalRight";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CarouselNextButton = ({
+  "aria-label": ariaLabel,
+  ...buttonProps
 }) => {
-  const r = P();
-  return /* @__PURE__ */ f(
-    J,
+  const ctx = useCarouselContext();
+  return /* @__PURE__ */ jsx3(
+    IconButton,
     {
       "data-spark-component": "carousel-next-button",
-      ...r.getNextTriggerProps(),
+      ...ctx.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, {}) })
+      "aria-label": ariaLabel,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(ArrowVerticalRight, {}) })
     }
   );
 };
-Q.displayName = "Carousel.NextButton";
-const U = ({
-  children: t,
-  unstyled: e = !1,
-  index: r,
-  "aria-label": n,
-  className: o,
-  intent: s = "basic"
+CarouselNextButton.displayName = "Carousel.NextButton";
+
+// src/carousel/CarouselPageIndicator.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CarouselPageIndicator = ({
+  children,
+  unstyled = false,
+  index,
+  "aria-label": ariaLabel,
+  className,
+  intent = "basic"
 }) => {
-  const a = P(), i = C(null);
-  k(() => {
-    a.pageIndicatorsRefs.current && (a.pageIndicatorsRefs.current[r] = i.current);
+  const ctx = useCarouselContext();
+  const ref = useRef6(null);
+  useEffect5(() => {
+    if (ctx.pageIndicatorsRefs.current) {
+      ctx.pageIndicatorsRefs.current[index] = ref.current;
+    }
   });
-  const p = a.getIndicatorProps({ index: r });
-  return /* @__PURE__ */ f(
+  const indicatorProps = ctx.getIndicatorProps({ index });
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       "data-spark-component": "carousel-page-indicator",
-      ref: i,
-      ...p,
-      "aria-label": n,
-      className: x(
+      ref,
+      ...indicatorProps,
+      "aria-label": ariaLabel,
+      className: cx3(
         {
-          [x(
+          [cx3(
             "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-basic bg-on-surface/dim-2"
-          )]: !e
+            intent === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
+          )]: !unstyled
           // [dotsStyles]: !unstyled,
         },
-        o
+        className
       ),
-      children: t
+      children
     },
-    r
+    index
   );
 };
-U.displayName = "Carousel.PageIndicator";
-const Y = ({ children: t, className: e }) => {
-  const r = P();
-  return /* @__PURE__ */ f(it, { children: /* @__PURE__ */ f(
+CarouselPageIndicator.displayName = "Carousel.PageIndicator";
+
+// src/carousel/CarouselPagePicker.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var CarouselPagePicker = ({ children, className }) => {
+  const ctx = useCarouselContext();
+  return /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(
     "div",
     {
       "data-spark-component": "carousel-page-picker",
-      ...r.getIndicatorGroupProps(),
-      className: x(
+      ...ctx.getIndicatorGroupProps(),
+      className: cx4(
         "flex-wrap items-center justify-center",
         "default:min-h-sz-16 flex",
-        r.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
-        e
+        ctx.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
+        className
       ),
-      children: r.pageSnapPoints.length <= 1 ? null : t({
-        ...r,
-        pages: Array.from({ length: r.pageSnapPoints.length }, (n, o) => o)
+      children: ctx.pageSnapPoints.length <= 1 ? null : children({
+        ...ctx,
+        pages: Array.from({ length: ctx.pageSnapPoints.length }, (_, i) => i)
       })
     }
   ) });
 };
-Y.displayName = "Carousel.PagePicker";
-const Z = ({
-  "aria-label": t,
-  ...e
+CarouselPagePicker.displayName = "Carousel.PagePicker";
+
+// src/carousel/CarouselPrevButton.tsx
+import { ArrowVerticalLeft } from "@spark-ui/icons/ArrowVerticalLeft";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CarouselPrevButton = ({
+  "aria-label": ariaLabel,
+  ...buttonProps
 }) => {
-  const r = P();
-  return /* @__PURE__ */ f(
-    J,
+  const ctx = useCarouselContext();
+  return /* @__PURE__ */ jsx6(
+    IconButton,
     {
       "data-spark-component": "carousel-prev-button",
-      ...r.getPrevTriggerProps(),
+      ...ctx.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(bt, {}) })
+      "aria-label": ariaLabel,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx6(Icon, { children: /* @__PURE__ */ jsx6(ArrowVerticalLeft, {}) })
     }
   );
 };
-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);
+CarouselPrevButton.displayName = "Carousel.PrevButton";
+
+// src/carousel/CarouselSlide.tsx
+import { cx as cx5 } from "class-variance-authority";
+import { useRef as useRef7 } from "react";
+
+// src/carousel/useIsVisible.ts
+import { useEffect as useEffect6, useState as useState3 } from "react";
+function useIsVisible(elementRef, _parentRef) {
+  const [isVisible, setIsVisible] = useState3(true);
+  const ctx = useCarouselContext();
+  useEffect6(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const { registerSlide, unregisterSlide } = ctx;
+    registerSlide(el, setIsVisible);
+    return () => {
+      unregisterSlide(el);
     };
-  }, [t]), r;
+  }, [elementRef]);
+  return isVisible;
 }
-const D = ({
-  children: t,
-  index: e = 0,
-  totalSlides: r,
-  className: n = "",
-  ...o
+
+// src/carousel/CarouselSlide.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CarouselSlide = ({
+  children,
+  index = 0,
+  totalSlides,
+  className = "",
+  ...props
 }) => {
-  const s = C(null), a = P(), i = It(s, a.ref);
-  return /* @__PURE__ */ f(
+  const itemRef = useRef7(null);
+  const ctx = useCarouselContext();
+  const isVisible = useIsVisible(itemRef, ctx.ref);
+  return /* @__PURE__ */ jsx7(
     "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
+      ref: itemRef,
+      ...ctx.getSlideProps({ index, totalSlides }),
+      className: cx5("default:bg-surface relative overflow-hidden", className),
+      "aria-hidden": !isVisible,
+      inert: !isVisible,
+      ...props,
+      children
     }
   );
 };
-D.displayName = "Carousel.Slide";
-const tt = ({ children: t, className: e = "" }) => {
-  const r = P(), n = pt.toArray(t);
-  return /* @__PURE__ */ f(
+CarouselSlide.displayName = "Carousel.Slide";
+
+// src/carousel/CarouselSlides.tsx
+import { cx as cx6 } from "class-variance-authority";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CarouselSlides = ({ children, className = "" }) => {
+  const ctx = useCarouselContext();
+  const childrenElements = Children.toArray(children);
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-spark-component": "carousel-slides",
-      ...r.getSlidesContainerProps(),
-      className: x(
+      ...ctx.getSlidesContainerProps(),
+      className: cx6(
         "focus-visible:u-outline relative w-full",
         "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        e
+        className
       ),
-      children: n.map(
-        (o, s) => gt(o) ? ft(o, {
-          index: s,
-          totalSlides: n.length
-        }) : o
+      children: childrenElements.map(
+        (child, index) => isValidElement(child) ? cloneElement(child, {
+          index,
+          totalSlides: childrenElements.length
+        }) : child
       )
     }
   );
 };
-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
+CarouselSlides.displayName = "Carousel.Slides";
+
+// src/carousel/CarouselViewport.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var CarouselViewport = ({ children }) => {
+  return /* @__PURE__ */ jsx9("div", { className: "relative flex items-center justify-around p-0", children });
+};
+CarouselViewport.displayName = "Carousel.Viewport";
+
+// src/carousel/index.ts
+var Carousel2 = Object.assign(Carousel, {
+  Controls: CarouselControls,
+  NextButton: CarouselNextButton,
+  PrevButton: CarouselPrevButton,
+  Slide: CarouselSlide,
+  Slides: CarouselSlides,
+  Viewport: CarouselViewport,
+  PagePicker: CarouselPagePicker,
+  PageIndicator: CarouselPageIndicator
 });
-kt.displayName = "Carousel";
+Carousel2.displayName = "Carousel";
 export {
-  kt as Carousel
+  Carousel2 as Carousel
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map