@silverlila/slider 0.0.0-stage → 0.1.0

package/dist/core.d.ts

@@ -0,0 +1,114 @@
+import { ScrollAnimation, Axis } from 'use-scroller/core';
+export { Axis, ScrollAnimation } from 'use-scroller/core';
+
+type Align = 'start' | 'center' | 'end';
+interface SliderOptions {
+    /** Scroll axis. Default `'x'`. */
+    axis?: Axis;
+    /** Where a snapped slide sits in the viewport. Default `'start'`. */
+    align?: Align;
+    /** Slides per snap: an integer >= 1, or `'auto'` for as many as fully fit. Default `1`. */
+    slidesPerMove?: number | 'auto';
+    /** Infinite loop through clones. Default `false`. */
+    loop?: boolean;
+    /** Wrap from the last snap to the first (and back) by scrolling across. Ignored with `loop`. */
+    rewind?: boolean;
+    /** Mouse and touch dragging via use-scroller's `dragScroll`. Default `true`. */
+    draggable?: boolean;
+    /** Snap shown at creation, clamped into range. Default `0`. */
+    startIndex?: number;
+    /** Animation for `next`/`prev`/`scrollTo`. Default `{ type: 'tween' }`. */
+    animation?: ScrollAnimation;
+}
+interface SliderState {
+    /** Active snap index; the target index while a navigation is pending. */
+    index: number;
+    snapCount: number;
+    /** Real slides only, clones excluded. */
+    slideCount: number;
+    canPrev: boolean;
+    canNext: boolean;
+    /** 0..1 along the snaps, following the real scroll position. */
+    progress: number;
+    /** Copies of the slide set needed on each side; 0 unless looping. */
+    loopCopies: number;
+}
+interface NavigateOptions {
+    /** Overrides `SliderOptions.animation` for this call. */
+    animation?: ScrollAnimation;
+}
+interface Slider {
+    readonly viewport: HTMLElement;
+    readonly options: Readonly<Required<Omit<SliderOptions, 'startIndex'>>>;
+    getState(): SliderState;
+    subscribe(listener: (state: SliderState) => void): () => void;
+    next(options?: NavigateOptions): void;
+    prev(options?: NavigateOptions): void;
+    scrollTo(index: number, options?: NavigateOptions): void;
+    destroy(): void;
+}
+
+/**
+ * Timed advancing for a slider, with the pauses WCAG 2.2.2 users expect.
+ *
+ * Browsers leave focus on a button after a mouse click, so only focus that matches
+ * `:focus-visible` (keyboard focus) pauses; otherwise clicking Next or the toggle would keep
+ * autoplay paused until the user clicked somewhere else.
+ *
+ * `play()` clears the current hover and focus pauses, so a Play button starts it even though
+ * pressing it put the pointer and focus inside the slider.
+ */
+
+interface AutoplayOptions {
+    /** Milliseconds between moves; must be > 0. Default `4000`. */
+    delay?: number;
+    /** Element whose hover and keyboard focus pause autoplay. Default `slider.viewport`. */
+    root?: HTMLElement;
+    /** Pause while the pointer is over `root`. Default `true`. */
+    pauseOnHover?: boolean;
+    /** Stop for good on `pointerdown`, `wheel` or `keydown` on the viewport. Default `true`. */
+    stopOnInteraction?: boolean;
+}
+interface Autoplay {
+    play(): void;
+    stop(): void;
+    isPlaying(): boolean;
+    /** Called with the new playing state on change only. */
+    subscribe(listener: (playing: boolean) => void): () => void;
+    destroy(): void;
+}
+/**
+ * Advances `slider` every `delay` ms, back to the first snap at the end. Pauses while hovered,
+ * while keyboard focus is inside `root`, while a pointer is pressed on the viewport and while the
+ * tab is hidden. Starts stopped under `prefers-reduced-motion: reduce`.
+ */
+declare function autoplay(slider: Slider, options?: AutoplayOptions): Autoplay;
+
+/**
+ * Renders a looping slider's clones into its viewport for vanilla use: `loopCopies` copies of the
+ * real slide set on each side, re-rendered whenever `loopCopies` or `slideCount` changes.
+ * Returns a cleanup that stops rendering and removes every clone.
+ */
+declare function renderClones(slider: Slider): () => void;
+
+/**
+ * Writes `--slide-progress` (signed distance from the aligned spot, in slide steps, positive for
+ * upcoming slides) and `--slide-distance` (its absolute value) on every child of the viewport,
+ * clones included, whenever the scroll position or the layout changes. It follows the scroll
+ * position rather than slider state because a loop recentre moves the position without changing
+ * the state. Returns a cleanup that removes both properties.
+ */
+declare function slideProgress(slider: Slider): () => void;
+
+declare function createSlider(viewport: HTMLElement, options?: SliderOptions): Slider;
+
+/**
+ * Keeps a thumbnail slider on the main slider's index and lets a click on thumbnail slide `i`
+ * move the main slider to snap `i`. The thumbnail matching the main index carries
+ * `aria-current="true"` and `data-selected`. Assumes the main slider shows one slide per snap.
+ * Returns a cleanup that stops syncing and removes both attributes.
+ */
+declare function syncSliders(main: Slider, thumbs: Slider): () => void;
+
+export { autoplay, createSlider, renderClones, slideProgress, syncSliders };
+export type { Align, Autoplay, AutoplayOptions, NavigateOptions, Slider, SliderOptions, SliderState };

package/dist/core.js

@@ -0,0 +1,14 @@
+import {
+  autoplay,
+  createSlider,
+  renderClones,
+  slideProgress,
+  syncSliders
+} from "./chunk-OAWJ54V3.js";
+export {
+  autoplay,
+  createSlider,
+  renderClones,
+  slideProgress,
+  syncSliders
+};

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import { SliderOptions, AutoplayOptions, SliderState, Slider as Slider$1, NavigateOptions } from './core.js';
+export { Align, Autoplay, autoplay, createSlider, renderClones, slideProgress, syncSliders } from './core.js';
+import { Axis } from 'use-scroller/core';
+export { Axis, ScrollAnimation } from 'use-scroller/core';
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+
+interface UseSliderOptions extends Omit<SliderOptions, 'startIndex'> {
+    /** Snap shown first when the index is uncontrolled. Default `0`. */
+    defaultIndex?: number;
+    /** Controlled snap index: the slider scrolls to it whenever it changes. */
+    index?: number;
+    /** Called whenever the active snap changes, never for the initial one. */
+    onIndexChange?: (index: number) => void;
+    /** Advance on a timer: `true` for the defaults, or the options to use. Off by default. */
+    autoplay?: boolean | Omit<AutoplayOptions, 'root'>;
+    /** Write `--slide-progress` and `--slide-distance` on every slide as it scrolls. */
+    slideProgress?: boolean;
+}
+/** A running autoplay: whether it is playing, and the switches to change that. */
+interface AutoplayControls {
+    isPlaying: boolean;
+    play(): void;
+    stop(): void;
+}
+type DiscreteState = Omit<SliderState, 'progress'>;
+interface UseSliderResult extends DiscreteState {
+    /** Callback ref for the scroll container; the engine is created once it is attached. */
+    viewportRef: (element: HTMLElement | null) => void;
+    /** Callback ref for the element wrapping the slider and its controls. */
+    rootRef: (element: HTMLElement | null) => void;
+    /** The engine, or `null` until the viewport is mounted. */
+    slider: Slider$1 | null;
+    /** `null` while the `autoplay` option is off or the engine does not exist yet. */
+    autoplay: AutoplayControls | null;
+    /** Each navigation method does nothing while `slider` is `null`. */
+    next(options?: NavigateOptions): void;
+    prev(options?: NavigateOptions): void;
+    scrollTo(index: number, options?: NavigateOptions): void;
+}
+/** Headless slider: attach `viewportRef` to a scroll container and build any markup around it. */
+declare function useSlider(options?: UseSliderOptions): UseSliderResult;
+
+interface SliderContextValue extends UseSliderResult {
+    /** The viewport's `id`, for `aria-controls` on the controls. */
+    viewportId: string;
+    axis: Axis;
+}
+/** The enclosing `<Slider>`'s state and navigation. Throws outside one. */
+declare function useSliderContext(): SliderContextValue;
+
+type SliderProps = UseSliderOptions & {
+    /** Slides per view (`--slider-per-view`); `'auto'` sizes slides by content. Default `1`. */
+    perView?: number | 'auto';
+    /** Space between slides, written to `--slider-gap`. A number is in pixels. */
+    gap?: number | string;
+    /** Accessible name of the carousel region. Default `'Slides'`. */
+    label?: string;
+} & Omit<ComponentProps<'div'>, 'children' | 'onChange' | keyof UseSliderOptions> & {
+    children: ReactNode;
+};
+declare function SliderRoot({ axis, align, slidesPerMove, loop, rewind, draggable, animation, defaultIndex, index, onIndexChange, autoplay, slideProgress, perView, gap, label, style, ref, children, ...props }: SliderProps): react.JSX.Element;
+/**
+ * The scroll container. Its children must be `<Slider.Slide>` elements (or components rendering
+ * one); in loop mode each is also rendered as hidden, inert clones on both sides.
+ */
+declare function SliderViewport({ ref, children, ...props }: ComponentProps<'div'>): react.JSX.Element;
+/** One slide. Must be rendered inside `<Slider.Viewport>`. */
+declare function SliderSlide(props: ComponentProps<'div'>): react.JSX.Element;
+declare function SliderPrev({ onClick, children, ...props }: ComponentProps<'button'>): react.JSX.Element;
+declare function SliderNext({ onClick, children, ...props }: ComponentProps<'button'>): react.JSX.Element;
+/** One button per snap; the active one carries `aria-current="true"` and `data-selected`. */
+declare function SliderDots(props: Omit<ComponentProps<'div'>, 'children'>): react.JSX.Element;
+type SliderAutoplayToggleProps = Omit<ComponentProps<'button'>, 'children'> & {
+    /** The button's content, or a function of the playing state. Default `'Pause'` / `'Play'`. */
+    children?: ReactNode | ((isPlaying: boolean) => ReactNode);
+};
+/** Stops and restarts autoplay. Renders nothing when the slider has no `autoplay`. */
+declare function SliderAutoplayToggle({ onClick, children, ...props }: SliderAutoplayToggleProps): react.JSX.Element;
+type SliderThumbsProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /** Thumbnails per view; `'auto'` sizes them by content. Default `'auto'`. */
+    perView?: number | 'auto';
+    /** Space between thumbnails. A number is in pixels. */
+    gap?: number | string;
+    /** Default `'x'`. */
+    axis?: Axis;
+    /** `<Slider.Thumb>` elements, one per main slide. */
+    children: ReactNode;
+};
+/**
+ * A strip of thumbnails that is a slider of its own, kept on the enclosing slider's index:
+ * clicking thumbnail `i` moves the slider to snap `i`, and the matching thumbnail carries
+ * `aria-current="true"` and `data-selected`. Assumes the main slider shows one slide per snap.
+ */
+declare function SliderThumbs({ perView, gap, axis, style, children, ...props }: SliderThumbsProps): react.JSX.Element;
+/** One thumbnail button. Must be rendered inside `<Slider.Thumbs>`. */
+declare function SliderThumb(props: ComponentProps<'button'>): react.JSX.Element;
+declare const Slider: typeof SliderRoot & {
+    Viewport: typeof SliderViewport;
+    Slide: typeof SliderSlide;
+    Prev: typeof SliderPrev;
+    Next: typeof SliderNext;
+    Dots: typeof SliderDots;
+    AutoplayToggle: typeof SliderAutoplayToggle;
+    Thumbs: typeof SliderThumbs;
+    Thumb: typeof SliderThumb;
+};
+
+/**
+ * Subscribes to a slice of a slider's state. The component re-renders only when the selected
+ * value changes by `isEqual`, so a selector returning an object should pass a shallow comparison.
+ * With `slider === null` (not mounted yet) it reads the initial state.
+ */
+declare function useSliderState<T>(slider: Slider$1 | null, selector: (state: SliderState) => T, isEqual?: (a: T, b: T) => boolean): T;
+
+export { AutoplayOptions, NavigateOptions, Slider, SliderOptions, SliderState, useSlider, useSliderContext, useSliderState };
+export type { AutoplayControls, SliderAutoplayToggleProps, SliderProps, SliderThumbsProps, UseSliderOptions, UseSliderResult };

package/dist/index.js

@@ -0,0 +1,457 @@
+'use client'
+import {
+  autoplay,
+  createSlider,
+  renderClones,
+  slideProgress,
+  syncSliders
+} from "./chunk-OAWJ54V3.js";
+
+// src/react/context.ts
+import { createContext, use } from "react";
+var SliderContext = createContext(null);
+function useSliderContext() {
+  const context = use(SliderContext);
+  if (context === null) throw new Error("Slider components must be used inside <Slider>");
+  return context;
+}
+var SlideContext = createContext(null);
+var ThumbContext = createContext(null);
+
+// src/react/slider.tsx
+import {
+  Children,
+  isValidElement,
+  use as use2,
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useId,
+  useMemo as useMemo2
+} from "react";
+
+// src/react/use-slider.ts
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/react/use-slider-state.ts
+import { useCallback, useRef, useSyncExternalStore } from "react";
+var INITIAL_STATE = {
+  index: 0,
+  snapCount: 0,
+  slideCount: 0,
+  canPrev: false,
+  canNext: false,
+  progress: 0,
+  loopCopies: 0
+};
+function ignore() {
+}
+function useSliderState(slider, selector, isEqual = Object.is) {
+  const last = useRef(null);
+  const subscribe = useCallback(
+    (onChange) => slider ? slider.subscribe(onChange) : ignore,
+    [slider]
+  );
+  function select(state) {
+    const next = selector(state);
+    const previous = last.current;
+    if (previous !== null && isEqual(previous.value, next)) return previous.value;
+    last.current = { value: next };
+    return next;
+  }
+  return useSyncExternalStore(
+    subscribe,
+    () => select(slider ? slider.getState() : INITIAL_STATE),
+    () => select(INITIAL_STATE)
+  );
+}
+
+// src/react/use-slider.ts
+function useSlider(options = {}) {
+  const { axis, align, slidesPerMove, loop, rewind, draggable, animation, index } = options;
+  const { autoplay: autoplayOption, slideProgress: tracksProgress = false } = options;
+  const [viewport, setViewport] = useState(null);
+  const [rootElement, setRootElement] = useState(null);
+  const [slider, setSlider] = useState(null);
+  const stableAnimation = useShallowStable(animation);
+  const latest = useRef2(options);
+  const previousIndex = useRef2(null);
+  const live = useRef2(null);
+  useLayoutEffect(() => {
+    latest.current = options;
+  });
+  useLayoutEffect(() => {
+    if (viewport === null) return;
+    const start = latest.current;
+    const engine = createSlider(viewport, {
+      axis,
+      align,
+      slidesPerMove,
+      loop,
+      rewind,
+      draggable,
+      animation: stableAnimation,
+      startIndex: previousIndex.current ?? start.index ?? start.defaultIndex
+    });
+    let reported = engine.getState().index;
+    engine.subscribe((state) => {
+      var _a, _b;
+      if (state.index === reported) return;
+      reported = state.index;
+      (_b = (_a = latest.current).onIndexChange) == null ? void 0 : _b.call(_a, state.index);
+    });
+    live.current = engine;
+    setSlider(engine);
+    return () => {
+      previousIndex.current = engine.getState().index;
+      live.current = null;
+      engine.destroy();
+      setSlider(null);
+    };
+  }, [viewport, axis, align, slidesPerMove, loop, rewind, draggable, stableAnimation]);
+  const discrete = useSliderState(slider, selectDiscrete, shallowEqual);
+  const autoplayControls = useAutoplay(slider, live, rootElement, autoplayOption);
+  useEffect(() => {
+    if (!isLive(slider, live) || !tracksProgress) return;
+    return slideProgress(slider);
+  }, [slider, live, tracksProgress]);
+  useEffect(() => {
+    const engine = live.current;
+    if (engine === null || index === void 0) return;
+    if (index !== engine.getState().index) engine.scrollTo(index);
+  }, [index, slider]);
+  const next = useCallback2((navigate) => slider == null ? void 0 : slider.next(navigate), [slider]);
+  const prev = useCallback2((navigate) => slider == null ? void 0 : slider.prev(navigate), [slider]);
+  const scrollTo = useCallback2(
+    (target, navigate) => slider == null ? void 0 : slider.scrollTo(target, navigate),
+    [slider]
+  );
+  return useMemo(
+    () => ({
+      ...discrete,
+      viewportRef: setViewport,
+      rootRef: setRootElement,
+      slider,
+      autoplay: autoplayControls,
+      next,
+      prev,
+      scrollTo
+    }),
+    [discrete, slider, autoplayControls, next, prev, scrollTo]
+  );
+}
+function useAutoplay(slider, live, rootElement, option) {
+  const settings = option === true ? {} : option || null;
+  const enabled = settings !== null;
+  const delay = settings == null ? void 0 : settings.delay;
+  const pauseOnHover = settings == null ? void 0 : settings.pauseOnHover;
+  const stopOnInteraction = settings == null ? void 0 : settings.stopOnInteraction;
+  const [controls, setControls] = useState(null);
+  useLayoutEffect(() => {
+    if (!isLive(slider, live) || !enabled) return;
+    const player = autoplay(slider, {
+      delay,
+      pauseOnHover,
+      stopOnInteraction,
+      root: rootElement ?? slider.viewport
+    });
+    const publish = (isPlaying) => setControls({ isPlaying, play: () => player.play(), stop: () => player.stop() });
+    publish(player.isPlaying());
+    player.subscribe(publish);
+    return () => {
+      player.destroy();
+      setControls(null);
+    };
+  }, [slider, live, enabled, delay, pauseOnHover, stopOnInteraction, rootElement]);
+  return controls;
+}
+function isLive(slider, live) {
+  return slider !== null && slider === live.current;
+}
+function selectDiscrete(state) {
+  return {
+    index: state.index,
+    snapCount: state.snapCount,
+    slideCount: state.slideCount,
+    canPrev: state.canPrev,
+    canNext: state.canNext,
+    loopCopies: state.loopCopies
+  };
+}
+function useShallowStable(value) {
+  const stable = useRef2(value);
+  if (!shallowEqual(stable.current, value)) stable.current = value;
+  return stable.current;
+}
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (a === void 0 || b === void 0) return false;
+  const entries = Object.entries(a);
+  const other = new Map(Object.entries(b));
+  return entries.length === other.size && entries.every(([key, value]) => other.has(key) && Object.is(value, other.get(key)));
+}
+
+// src/react/slider.tsx
+function SliderRoot({
+  axis,
+  align,
+  slidesPerMove,
+  loop,
+  rewind,
+  draggable,
+  animation,
+  defaultIndex,
+  index,
+  onIndexChange,
+  autoplay: autoplay2,
+  slideProgress: slideProgress2,
+  perView = 1,
+  gap,
+  label,
+  style,
+  ref,
+  children,
+  ...props
+}) {
+  const result = useSlider({
+    axis,
+    align,
+    slidesPerMove,
+    loop,
+    rewind,
+    draggable,
+    animation,
+    defaultIndex,
+    index,
+    onIndexChange,
+    autoplay: autoplay2,
+    slideProgress: slideProgress2
+  });
+  const viewportId = useId();
+  const resolvedAxis = axis ?? "x";
+  const context = useMemo2(
+    () => ({ ...result, viewportId, axis: resolvedAxis }),
+    [result, viewportId, resolvedAxis]
+  );
+  const rootRef = useMergedRef(result.rootRef, ref);
+  const variables = {
+    "--slider-per-view": perView === "auto" ? void 0 : perView,
+    "--slider-gap": typeof gap === "number" ? `${gap}px` : gap,
+    "--slider-align": align,
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(SliderContext, { value: context }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: rootRef,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": label ?? "Slides",
+      "data-slider": "",
+      style: variables,
+      ...props
+    },
+    children
+  ));
+}
+function SliderViewport({ ref, children, ...props }) {
+  const { viewportRef, viewportId, axis, loopCopies } = useSliderContext();
+  const mergedRef = useMergedRef(viewportRef, ref);
+  const slides = Children.toArray(children);
+  const real = slides.map((child, i) => /* @__PURE__ */ React.createElement(SlideContext, { value: { index: i, clone: false }, key: keyOf(child, i) }, child));
+  const copies = (side) => Array.from(
+    { length: loopCopies },
+    (_, copy) => slides.map((child, i) => /* @__PURE__ */ React.createElement(SlideContext, { value: { index: i, clone: true }, key: `${side}-${copy}-${keyOf(child, i)}` }, child))
+  ).flat();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: mergedRef,
+      id: viewportId,
+      "data-slider-viewport": "",
+      "data-axis": axis,
+      tabIndex: 0,
+      ...props
+    },
+    [...copies("before"), ...real, ...copies("after")]
+  );
+}
+function SliderSlide(props) {
+  const { slideCount } = useSliderContext();
+  const slide = use2(SlideContext);
+  if (slide === null) throw new Error("<Slider.Slide> must be rendered inside <Slider.Viewport>");
+  if (slide.clone) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-slider-slide": "",
+        "data-slider-clone": slide.index,
+        "aria-hidden": "true",
+        inert: true,
+        ...props,
+        id: void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slider-slide": "",
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": `${slide.index + 1} of ${slideCount}`,
+      ...props
+    }
+  );
+}
+function SliderPrev({ onClick, children = "Previous", ...props }) {
+  const { prev, canPrev, viewportId } = useSliderContext();
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-controls": viewportId,
+      "aria-label": "Previous slide",
+      disabled: !canPrev,
+      ...props,
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        if (!event.defaultPrevented) prev();
+      }
+    },
+    children
+  );
+}
+function SliderNext({ onClick, children = "Next", ...props }) {
+  const { next, canNext, viewportId } = useSliderContext();
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-controls": viewportId,
+      "aria-label": "Next slide",
+      disabled: !canNext,
+      ...props,
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        if (!event.defaultPrevented) next();
+      }
+    },
+    children
+  );
+}
+function SliderDots(props) {
+  const { snapCount, index, scrollTo, viewportId } = useSliderContext();
+  return /* @__PURE__ */ React.createElement("div", { role: "group", "aria-label": "Choose slide", "data-slider-dots": "", ...props }, Array.from({ length: snapCount }, (_, i) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: i,
+      type: "button",
+      "data-slider-dot": "",
+      "aria-controls": viewportId,
+      "aria-label": `Go to slide ${i + 1}`,
+      "aria-current": i === index ? "true" : void 0,
+      "data-selected": i === index ? "" : void 0,
+      onClick: () => scrollTo(i)
+    }
+  )));
+}
+function SliderAutoplayToggle({ onClick, children, ...props }) {
+  const { autoplay: autoplay2, viewportId } = useSliderContext();
+  if (autoplay2 === null) return null;
+  const { isPlaying, play, stop } = autoplay2;
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-controls": viewportId,
+      "aria-label": isPlaying ? "Stop automatic slide show" : "Start automatic slide show",
+      "data-playing": isPlaying ? "" : void 0,
+      ...props,
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        if (event.defaultPrevented) return;
+        if (isPlaying) stop();
+        else play();
+      }
+    },
+    typeof children === "function" ? children(isPlaying) : children ?? (isPlaying ? "Pause" : "Play")
+  );
+}
+function SliderThumbs({
+  perView = "auto",
+  gap,
+  axis = "x",
+  style,
+  children,
+  ...props
+}) {
+  const main = useSliderContext();
+  const thumbs = useSlider({ axis });
+  useEffect2(() => {
+    if (main.slider === null || thumbs.slider === null) return;
+    return syncSliders(main.slider, thumbs.slider);
+  }, [main.slider, thumbs.slider]);
+  const variables = {
+    "--slider-per-view": perView === "auto" ? "initial" : perView,
+    "--slider-gap": gap === void 0 ? "initial" : typeof gap === "number" ? `${gap}px` : gap,
+    "--slider-align": "start",
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement("div", { "data-slider-thumbs": "", style: variables, ...props }, /* @__PURE__ */ React.createElement("div", { ref: thumbs.viewportRef, "data-slider-viewport": "", "data-axis": axis }, Children.toArray(children).map((child, i) => /* @__PURE__ */ React.createElement(ThumbContext, { value: i, key: keyOf(child, i) }, child))));
+}
+function SliderThumb(props) {
+  const { viewportId } = useSliderContext();
+  const index = use2(ThumbContext);
+  if (index === null) throw new Error("<Slider.Thumb> must be rendered inside <Slider.Thumbs>");
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-slider-thumb": "",
+      "aria-controls": viewportId,
+      "aria-label": `Go to slide ${index + 1}`,
+      ...props
+    }
+  );
+}
+var Slider = Object.assign(SliderRoot, {
+  Viewport: SliderViewport,
+  Slide: SliderSlide,
+  Prev: SliderPrev,
+  Next: SliderNext,
+  Dots: SliderDots,
+  AutoplayToggle: SliderAutoplayToggle,
+  Thumbs: SliderThumbs,
+  Thumb: SliderThumb
+});
+function keyOf(child, position) {
+  return isValidElement(child) && child.key !== null ? child.key : String(position);
+}
+function useMergedRef(own, ref) {
+  return useCallback3(
+    (element) => {
+      own(element);
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    },
+    [own, ref]
+  );
+}
+export {
+  Slider,
+  autoplay,
+  createSlider,
+  renderClones,
+  slideProgress,
+  syncSliders,
+  useSlider,
+  useSliderContext,
+  useSliderState
+};