@spark-ui/components 13.1.4 → 13.2.0

package/dist/carousel/index.mjs

@@ -1,467 +1,309 @@
-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,
+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, cloneElement as ft, isValidElement as gt } from "react";
+import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
+import { I as G } from "../Icon-Ck-dhfLd.mjs";
+import { I as J } from "../IconButton-C62-axzv.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,
       threshold: 0.2
     });
-    visibilityObserverRef.current = observer;
-    return observer;
-  }, [carouselRef, createObserverCallback]);
-  useEffect(() => {
-    const observer = getOrCreateObserver();
-    const visibilityMap = slideVisibilityMap.current;
-    const callbacksMap = visibilityCallbacksRef.current;
+    return r.current = u, u;
+  }, [t, o]);
+  k(() => {
+    const c = s(), u = e.current, g = n.current;
     return () => {
-      if (observer) {
-        observer.disconnect();
-        visibilityMap.clear();
-        callbacksMap.clear();
-        visibilityObserverRef.current = null;
-      }
+      c && (c.disconnect(), u.clear(), g.clear(), r.current = null);
     };
-  }, [getOrCreateObserver]);
-  const registerSlide = useCallback(
-    (element, callback) => {
-      if (!element) return;
-      const observer = getOrCreateObserver();
-      if (!observer) {
-        setTimeout(() => registerSlide(element, callback), 0);
+  }, [s]);
+  const a = S(
+    (c, u) => {
+      if (!c) return;
+      const g = s();
+      if (!g) {
+        setTimeout(() => a(c, u), 0);
         return;
       }
-      const initialVisible = slideVisibilityMap.current.get(element) ?? true;
-      slideVisibilityMap.current.set(element, initialVisible);
-      visibilityCallbacksRef.current.set(element, callback);
-      observer.observe(element);
-      callback(initialVisible);
+      const y = e.current.get(c) ?? !0;
+      e.current.set(c, y), n.current.set(c, u), g.observe(c), u(y);
     },
-    [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;
-  }, []);
+    [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,
-    unregisterSlide,
-    isSlideVisible
+    registerSlide: a,
+    unregisterSlide: i,
+    isSlideVisible: p
   };
 }
-
-// src/carousel/useEvent.ts
-import { useCallback as useCallback2, useLayoutEffect, useRef as useRef2 } from "react";
-function useEvent(callback) {
-  const ref = useRef2(() => {
+function vt(t) {
+  const e = C(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
-  useLayoutEffect(() => {
-    ref.current = callback;
-  });
-  return useCallback2((...args) => ref.current?.(...args), []);
+  return R(() => {
+    e.current = t;
+  }), S((...r) => e.current?.(...r), []);
 }
-
-// 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;
+const Ct = () => {
+  const t = C(!1);
+  return k(() => (t.current = !0, () => {
+    t.current = !1;
+  }), []), t;
 };
-
-// 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();
+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));
     };
-    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);
-      }
+    return s ? o.addEventListener("scrollend", a) : o.addEventListener("scroll", i), () => {
+      n.current && clearTimeout(n.current), s ? o.removeEventListener("scrollend", a) : o.removeEventListener("scroll", i);
     };
-  }, [callback, scrollRef]);
+  }, [e, t]);
 }
-
-// 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);
-      }
+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);
     });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [ref, callback]);
+    return n.observe(r), () => n.disconnect();
+  }, [t, e]);
 }
-
-// src/carousel/utils.ts
-function getSnapIndices({
-  totalSlides,
-  slidesPerMove,
-  slidesPerPage
+function wt({
+  totalSlides: t,
+  slidesPerMove: e,
+  slidesPerPage: r
 }) {
-  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;
+  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;
 }
-function getSlideElements(container) {
-  return container ? Array.from(container.querySelectorAll('[data-part="item"]')) : [];
+function W(t) {
+  return t ? Array.from(t.querySelectorAll('[data-part="item"]')) : [];
 }
-function isSnapPoint(slideIndex, {
-  container,
-  slidesPerMove,
-  slidesPerPage
+function q(t, {
+  container: e,
+  slidesPerMove: r,
+  slidesPerPage: n
 }) {
-  return getSnapIndices({
-    totalSlides: getSlideElements(container).length,
-    slidesPerPage,
-    slidesPerMove
-  }).includes(slideIndex);
+  return wt({
+    totalSlides: W(e).length,
+    slidesPerPage: n,
+    slidesPerMove: r
+  }).includes(t);
 }
-function getSnapPositions({
-  container,
-  slidesPerMove,
-  slidesPerPage
+function K({
+  container: t,
+  slidesPerMove: e,
+  slidesPerPage: r
 }) {
-  if (!container) return [];
-  return getSlideElements(container).filter((_, index) => {
-    return isSnapPoint(index, {
-      slidesPerMove,
-      slidesPerPage,
-      container
-    });
-  }).map((slide) => slide.offsetLeft);
+  return t ? W(t).filter((n, o) => q(o, {
+    slidesPerMove: e,
+    slidesPerPage: r,
+    container: t
+  })).map((n) => n.offsetLeft) : [];
 }
-function computeDotState({
-  dotIndex,
-  pageState,
-  totalPages,
-  maxDots = 5
+function Nt({
+  dotIndex: t,
+  pageState: e,
+  totalPages: r,
+  maxDots: n = 5
 }) {
-  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";
+  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 (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";
+  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";
 }
-
-// src/carousel/useSnapPoints.ts
-function useSnapPoints(initialSnapPoints = [], {
-  carouselRef,
-  slidesPerMove,
-  slidesPerPage
+function Pt(t = [], {
+  carouselRef: e,
+  slidesPerMove: r,
+  slidesPerPage: n
 }) {
-  const [pageSnapPoints, setPageSnapPoints] = useState(initialSnapPoints);
-  const stableSnapPoints = useMemo(() => pageSnapPoints, [pageSnapPoints]);
-  useResizeObserver(carouselRef, () => {
-    const newSnapPoints = getSnapPositions({
-      slidesPerMove,
-      slidesPerPage,
-      container: carouselRef.current
+  const [o, s] = L(t), a = ct(() => o, [o]);
+  return yt(e, () => {
+    const i = K({
+      slidesPerMove: r,
+      slidesPerPage: n,
+      container: e.current
     });
-    if (JSON.stringify(pageSnapPoints) !== JSON.stringify(newSnapPoints)) {
-      setPageSnapPoints(newSnapPoints);
-    }
-  });
-  return [stableSnapPoints, setPageSnapPoints];
+    JSON.stringify(o) !== JSON.stringify(i) && s(i);
+  }), [a, s];
 }
-
-// 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,
+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: controlledPage,
-  onPageChange: onPageChangeProp
+  page: g,
+  onPageChange: y
 }) => {
-  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);
-      }
+  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));
     },
-    [onPageChange, pageState]
-  );
-  const scrollTo = useCallback3(
-    (page, behavior) => {
-      if (carouselRef.current) {
-        carouselRef.current.scrollTo({
-          left: pageSnapPoints[page],
-          behavior: behavior === "instant" ? "auto" : "smooth"
-        });
-        handlePageChange(page);
-      }
+    [F, d]
+  ), w = S(
+    (l, h) => {
+      v.current && (v.current.scrollTo({
+        left: b[l],
+        behavior: h === "instant" ? "auto" : "smooth"
+      }), M(l));
     },
-    [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);
+    [M, b]
+  ), $ = S(
+    (l) => {
+      if (z) {
+        const h = p && d === 0 ? b.length - 1 : Math.max(d - 1, 0);
+        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]
+  ), 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]
+    [p, b, d, i, w]
   );
-  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
+  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
       });
-      carouselRef.current.scrollTo({
-        left: snapPositions[defaultPage],
+      v.current.scrollTo({
+        left: l[t],
         behavior: "instant"
       });
     }
-  }, [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,
+  }, [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,
     // props
-    gap,
-    snapType,
-    snapStop,
-    scrollPadding,
-    slidesPerPage,
-    slidesPerMove,
-    scrollBehavior,
-    loop,
-    pagePickerInset,
-    maxDots,
+    gap: e,
+    snapType: r,
+    snapStop: n,
+    scrollPadding: o,
+    slidesPerPage: s,
+    slidesPerMove: a,
+    scrollBehavior: i,
+    loop: p,
+    pagePickerInset: c,
+    maxDots: u,
     // computed state
-    page: pageState,
-    pageSnapPoints,
-    canScrollNext: canScrollNext.current,
-    canScrollPrev: canScrollPrev.current,
-    scrollTo,
-    scrollPrev,
-    scrollNext,
+    page: d,
+    pageSnapPoints: b,
+    canScrollNext: V.current,
+    canScrollPrev: z.current,
+    scrollTo: w,
+    scrollPrev: $,
+    scrollNext: O,
     // visibility management
-    registerSlide,
-    unregisterSlide,
-    isSlideVisible,
+    registerSlide: rt,
+    unregisterSlide: nt,
+    isSlideVisible: ot,
     // anatomy
     getRootProps: () => ({
-      id: `carousel::${carouselId}:`,
+      id: `carousel::${m}:`,
       role: "region",
       "aria-roledescription": "carousel",
-      "data-scope": DATA_SCOPE,
+      "data-scope": N,
       "data-part": "root",
       "data-orientation": "horizontal",
-      dir: DIRECTION,
+      dir: I,
       style: {
-        "--slides-per-page": slidesPerPage,
-        "--slide-spacing": `${gap}px`,
+        "--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": DATA_SCOPE,
+      "data-scope": N,
       "data-part": "control",
       "data-orientation": "horizontal"
     }),
     getPrevTriggerProps: () => ({
-      id: `carousel::${carouselId}::prev-trigger`,
-      "aria-controls": `carousel::${carouselId}::item-group`,
-      "data-scope": DATA_SCOPE,
+      id: `carousel::${m}::prev-trigger`,
+      "aria-controls": `carousel::${m}::item-group`,
+      "data-scope": N,
       "data-part": "prev-trigger",
       "data-orientation": "horizontal",
       type: "button",
-      dir: DIRECTION,
-      disabled: !canScrollPrev.current,
-      onClick: () => scrollPrev()
+      dir: I,
+      disabled: !z.current,
+      onClick: () => $()
     }),
     getNextTriggerProps: () => ({
-      id: `carousel::${carouselId}::next-trigger`,
-      "aria-controls": `carousel::${carouselId}::item-group`,
-      "data-scope": DATA_SCOPE,
+      id: `carousel::${m}::next-trigger`,
+      "aria-controls": `carousel::${m}::item-group`,
+      "data-scope": N,
       "data-part": "next-trigger",
       "data-orientation": "horizontal",
       type: "button",
-      dir: DIRECTION,
-      disabled: !canScrollNext.current,
-      onClick: () => scrollNext()
+      dir: I,
+      disabled: !V.current,
+      onClick: () => O()
     }),
     getSlidesContainerProps: () => ({
-      id: `carousel::${carouselId}::item-group`,
+      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.
@@ -469,393 +311,329 @@ var useCarousel = ({
        *
        * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#wai-aria-attributes
        */
-      "aria-live": slidesPerPage > 1 ? "off" : "polite",
-      "data-scope": DATA_SCOPE,
+      "aria-live": s > 1 ? "off" : "polite",
+      "data-scope": N,
       "data-part": "item-group",
       "data-orientation": "horizontal",
-      dir: DIRECTION,
+      dir: I,
       tabIndex: 0,
       style: {
         display: "grid",
         gap: "var(--slide-spacing)",
-        scrollSnapType: `x ${snapType}`,
+        scrollSnapType: `x ${r}`,
         gridAutoFlow: "column",
         scrollbarWidth: "none",
         gridAutoColumns: "var(--slide-item-size)",
         overflowX: "auto"
       },
-      ref: carouselRef
+      ref: v
     }),
-    getSlideProps: ({ index }) => {
-      const isStopPoint = isSnapPoint(index, {
-        container: carouselRef.current,
-        slidesPerMove,
-        slidesPerPage
+    getSlideProps: ({ index: l }) => {
+      const h = q(l, {
+        container: v.current,
+        slidesPerMove: a,
+        slidesPerPage: s
       });
       return {
-        id: `carousel::${carouselId}::item:${index}`,
+        id: `carousel::${m}::item:${l}`,
         role: "group",
         "aria-roledescription": "slide",
-        "data-scope": DATA_SCOPE,
+        "data-scope": N,
         "data-part": "item",
-        "data-index": index,
+        "data-index": l,
         "data-orientation": "horizontal",
-        dir: DIRECTION,
+        dir: I,
         style: {
-          ...isStopPoint && {
+          ...h && {
             scrollSnapAlign: "start",
-            scrollSnapStop: snapStop
+            scrollSnapStop: n
           }
         }
       };
     },
     getIndicatorGroupProps: () => ({
       role: "radiogroup",
-      id: `carousel::${carouselId}::indicator-group`,
-      "data-scope": DATA_SCOPE,
+      id: `carousel::${m}::indicator-group`,
+      "data-scope": N,
       "data-part": "indicator-group",
       "data-orientation": "horizontal",
-      dir: DIRECTION
+      dir: I
     }),
-    getIndicatorProps: ({ index }) => {
-      const dotState = computeDotState({
-        dotIndex: index,
-        pageState,
-        totalPages: pageSnapPoints.length,
-        maxDots
+    getIndicatorProps: ({ index: l }) => {
+      const h = Nt({
+        dotIndex: l,
+        pageState: d,
+        totalPages: b.length,
+        maxDots: u
       });
       return {
         role: "radio",
-        id: `carousel::${carouselId}::indicator:${index}`,
-        "aria-checked": index === pageState,
-        "data-scope": DATA_SCOPE,
+        id: `carousel::${m}::indicator:${l}`,
+        "aria-checked": l === d,
+        "data-scope": N,
         "data-part": "indicator",
         "data-orientation": "horizontal",
-        "data-index": index,
-        "data-state": dotState,
-        tabIndex: index === pageState ? 0 : -1,
+        "data-index": l,
+        "data-state": h,
+        tabIndex: l === d ? 0 : -1,
         onClick: () => {
-          scrollTo(index, scrollBehavior);
+          w(l, i);
         },
-        onKeyDown: (event) => {
-          const focusActiveIndicator = (page) => {
-            pageIndicatorsRefs.current[page]?.focus();
+        onKeyDown: (E) => {
+          const T = (at) => {
+            j.current[at]?.focus();
           };
-          if (event.key === "ArrowRight" && canScrollNext) {
-            scrollNext(focusActiveIndicator);
-          } else if (event.key === "ArrowLeft" && canScrollPrev) {
-            scrollPrev(focusActiveIndicator);
-          }
+          E.key === "ArrowRight" && V ? O(T) : E.key === "ArrowLeft" && z && $(T);
         }
       };
     }
   };
-  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
+}, 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 carouselApi = useCarousel({
-    defaultPage,
-    slidesPerPage,
-    slidesPerMove,
-    loop,
-    gap,
-    scrollBehavior,
-    snapStop,
-    snapType,
-    page,
-    pagePickerInset,
-    onPageChange,
-    maxDots
+  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__ */ jsx(
-    CarouselContext.Provider,
+  return /* @__PURE__ */ f(
+    X.Provider,
     {
       value: {
-        ...carouselApi,
-        scrollBehavior
+        ...A,
+        scrollBehavior: n
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ f(
         "div",
         {
           "data-spark-component": "carousel",
-          className: cx("gap-lg relative box-border flex flex-col", className),
-          ...carouselApi.getRootProps(),
-          ...props,
-          children
+          className: x("gap-lg relative box-border flex flex-col", t),
+          ...A.getRootProps(),
+          ...d,
+          children: p
         }
       )
     }
   );
 };
-Carousel.displayName = "Carousel";
-var useCarouselContext = () => {
-  const context = useContext(CarouselContext);
-  if (!context) {
+B.displayName = "Carousel";
+const P = () => {
+  const t = dt(X);
+  if (!t)
     throw Error("useCarouselContext must be used within a Carousel provider");
-  }
-  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(
+  return t;
+}, H = ({ children: t, className: e, ...r }) => {
+  const n = P();
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-spark-component": "carousel-controls",
-      className: cx2(
+      className: x(
         "default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",
-        className
+        e
       ),
-      ...ctx.getControlProps(),
-      ...props,
-      children
+      ...n.getControlProps(),
+      ...r,
+      children: t
     }
   );
 };
-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
+H.displayName = "Carousel.Controls";
+const Q = ({
+  "aria-label": t,
+  ...e
 }) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ jsx3(
-    IconButton,
+  const r = P();
+  return /* @__PURE__ */ f(
+    J,
     {
       "data-spark-component": "carousel-next-button",
-      ...ctx.getNextTriggerProps(),
+      ...r.getNextTriggerProps(),
       intent: "surface",
       design: "filled",
       className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": ariaLabel,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(ArrowVerticalRight, {}) })
+      "aria-label": t,
+      ...e,
+      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(mt, {}) })
     }
   );
 };
-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"
+Q.displayName = "Carousel.NextButton";
+const U = ({
+  children: t,
+  unstyled: e = !1,
+  index: r,
+  "aria-label": n,
+  className: o,
+  intent: s = "basic"
 }) => {
-  const ctx = useCarouselContext();
-  const ref = useRef6(null);
-  useEffect5(() => {
-    if (ctx.pageIndicatorsRefs.current) {
-      ctx.pageIndicatorsRefs.current[index] = ref.current;
-    }
+  const a = P(), i = C(null);
+  k(() => {
+    a.pageIndicatorsRefs.current && (a.pageIndicatorsRefs.current[r] = i.current);
   });
-  const indicatorProps = ctx.getIndicatorProps({ index });
-  return /* @__PURE__ */ jsx4(
+  const p = a.getIndicatorProps({ index: r });
+  return /* @__PURE__ */ f(
     "button",
     {
       "data-spark-component": "carousel-page-indicator",
-      ref,
-      ...indicatorProps,
-      "aria-label": ariaLabel,
-      className: cx3(
+      ref: i,
+      ...p,
+      "aria-label": n,
+      className: x(
         {
-          [cx3(
+          [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",
-            intent === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
-          )]: !unstyled
+            s === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
+          )]: !e
           // [dotsStyles]: !unstyled,
         },
-        className
+        o
       ),
-      children
+      children: t
     },
-    index
+    r
   );
 };
-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(
+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",
-      ...ctx.getIndicatorGroupProps(),
-      className: cx4(
+      ...r.getIndicatorGroupProps(),
+      className: x(
         "flex-wrap items-center justify-center",
         "default:min-h-sz-16 flex",
-        ctx.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
-        className
+        r.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
+        e
       ),
-      children: ctx.pageSnapPoints.length <= 1 ? null : children({
-        ...ctx,
-        pages: Array.from({ length: ctx.pageSnapPoints.length }, (_, i) => i)
+      children: r.pageSnapPoints.length <= 1 ? null : t({
+        ...r,
+        pages: Array.from({ length: r.pageSnapPoints.length }, (n, o) => o)
       })
     }
   ) });
 };
-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
+Y.displayName = "Carousel.PagePicker";
+const Z = ({
+  "aria-label": t,
+  ...e
 }) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ jsx6(
-    IconButton,
+  const r = P();
+  return /* @__PURE__ */ f(
+    J,
     {
       "data-spark-component": "carousel-prev-button",
-      ...ctx.getPrevTriggerProps(),
+      ...r.getPrevTriggerProps(),
       intent: "surface",
       design: "filled",
       className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": ariaLabel,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx6(Icon, { children: /* @__PURE__ */ jsx6(ArrowVerticalLeft, {}) })
+      "aria-label": t,
+      ...e,
+      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(bt, {}) })
     }
   );
 };
-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);
+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);
     };
-  }, [elementRef]);
-  return isVisible;
+  }, [t]), r;
 }
-
-// src/carousel/CarouselSlide.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var CarouselSlide = ({
-  children,
-  index = 0,
-  totalSlides,
-  className = "",
-  ...props
+const D = ({
+  children: t,
+  index: e = 0,
+  totalSlides: r,
+  className: n = "",
+  ...o
 }) => {
-  const itemRef = useRef7(null);
-  const ctx = useCarouselContext();
-  const isVisible = useIsVisible(itemRef, ctx.ref);
-  return /* @__PURE__ */ jsx7(
+  const s = C(null), a = P(), i = It(s, a.ref);
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-spark-component": "carousel-slide",
-      ref: itemRef,
-      ...ctx.getSlideProps({ index, totalSlides }),
-      className: cx5("default:bg-surface relative overflow-hidden", className),
-      "aria-hidden": !isVisible,
-      inert: !isVisible,
-      ...props,
-      children
+      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
     }
   );
 };
-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(
+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",
-      ...ctx.getSlidesContainerProps(),
-      className: cx6(
+      ...r.getSlidesContainerProps(),
+      className: x(
         "focus-visible:u-outline relative w-full",
         "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        className
+        e
       ),
-      children: childrenElements.map(
-        (child, index) => isValidElement(child) ? cloneElement(child, {
-          index,
-          totalSlides: childrenElements.length
-        }) : child
+      children: n.map(
+        (o, s) => gt(o) ? ft(o, {
+          index: s,
+          totalSlides: n.length
+        }) : o
       )
     }
   );
 };
-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
+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
 });
-Carousel2.displayName = "Carousel";
+kt.displayName = "Carousel";
 export {
-  Carousel2 as Carousel
+  kt as Carousel
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map