@carouseldeck/react-18 0.0.0-stage → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pedro Sousa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @carouseldeck/react-18
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@carouseldeck/react` built for React 18. It has the same components, props and
+types, from the same source.
+
+On React 18, install it in place of `@carouseldeck/react` and import from
+`@carouseldeck/react-18`. It is published at the same version as
+`@carouseldeck/react`, from 1.2.0.
+
+## How it is built
+
+The source in `packages/react/src` is written for React 19, and this package
+does not change it. The React 19 package ships the same code it did before,
+at the same size. This package's build (`vite.config.ts`) adapts the source to
+React 18:
+
+- `src/react.ts` stands in for `react`. `use` reads a context with
+  `useContext`, a context renders as React 18's provider, and
+  `useLayoutEffect` is `useEffect` on the server, where React 18 warns about
+  it. In development, it reports a React other than 18.
+- `src/jsx-runtime.ts` stands in for `react/jsx-runtime`. `inert` renders as
+  React 18 needs it. The deck's `<style>` elements render just before the
+  viewport, one per deck, because React 18 does not hoist them, and its CSS
+  is set as HTML, because React 18's server renderer escapes `>`.
+- Every component in the source is wrapped in `forwardRef` (`src/with-ref.ts`),
+  so a `ref` reaches its element as it does in React 19.
+
+The package has no `react-server` entry: React 18 has no server components.
+
+## Tests
+
+`pnpm test:react-18` builds this package, then type-checks a consumer
+(`test/consumer.tsx`) with React 18's types. It then runs the React package's
+tests on React 18 against the build (`vitest.react-18.config.ts` at the repo
+root), with this package's own tests in `test/`.

package/dist/curve.d.ts

@@ -0,0 +1,33 @@
+import type { Effect } from './index.js';
+/**
+ * Fans the slides along an arc around the focal slide while the viewport
+ * scrolls, snaps and drags natively (ADR-0006). Pass it to `Deck.Viewport`'s
+ * `effect`:
+ *
+ * ```tsx
+ * import { curve } from '@carouseldeck/react/curve';
+ *
+ * <Deck.Viewport effect={curve}>…</Deck.Viewport>
+ * ```
+ *
+ * The slides keep their place in the deck, their size, gap and alignment, and
+ * snap as they would without the curve, in pages too. Each slide's content,
+ * its children, turns about its centre and drops across the axis to sit on a
+ * circle under the focal slide, and the slide fades with its distance from
+ * it, following its progress. Give each slide one child that fills it, styled
+ * as the slide is seen: a slide's own background stays in place, and several
+ * children each turn about their own centre. The circle's radius, in slides,
+ * is `--deck-curve-radius`, 4 by default and never 0 or less: set it in CSS
+ * on the viewport, per breakpoint if needed. A slide a radius away or more has
+ * turned a quarter and faded out.
+ *
+ * Each slide contains its layout, so its turned content is drawn on the arc
+ * but adds nothing the viewport can scroll to, and focus never scrolls the
+ * viewport after it. The viewport clips across the axis, so the arc never
+ * shows a scrollbar: give it padding there to show more of the arc. A
+ * vertical deck's arc bends toward the inline end, and a right-to-left deck's
+ * mirrors. Under reduced motion the content stays flat
+ * and the slides only fade.
+ */
+export declare const curve: Effect;
+//# sourceMappingURL=curve.d.ts.map

package/dist/curve.js

@@ -0,0 +1,12 @@
+"use client";
+//#region ../react/src/curve.ts
+var e = "[data-carouseldeck-effect=curve]>[data-carouseldeck-slide]", t = `${e}>*`, n = "var(--carouseldeck-curve-progress)", r = "var(--carouseldeck-curve-radius)", i = "var(--carouseldeck-curve-x)", a = "var(--carouseldeck-curve-turn)", o = "var(--carouseldeck-curve-drop)", s = "var(--carouseldeck-curve-sign)", c = {
+	name: "curve",
+	css: `:where(${e}){--carouseldeck-curve-progress:var(--deck-slide-progress,0);--carouseldeck-curve-radius:max(var(--deck-curve-radius,4),0.001);--carouseldeck-curve-x:clamp(-1,${n}/${r},1);--carouseldeck-curve-turn:asin(${i});--carouseldeck-curve-drop:calc(${r}*(1 - sqrt(1 - ${i}*${i})));--carouseldeck-curve-sign:1;opacity:calc(1 - max(${i},-1*${i}))}:where(${e}:dir(rtl)){--carouseldeck-curve-sign:-1}:where(${t}){transform:rotate(90deg) translateX(calc(${o}*100%)) rotate(-90deg) rotate(calc(${s}*${a}))}:where([data-orientation=vertical]${t}){transform:rotate(-90deg) translateY(calc(${s}*${o}*100%)) rotate(90deg) rotate(calc(-1*${s}*${a}))}@media (prefers-reduced-motion:reduce){:where(${t}){transform:none}}`,
+	layout: (e) => ({
+		viewport: e === "vertical" ? { overflowX: "hidden" } : { overflowY: "hidden" },
+		slide: { contain: "layout" }
+	})
+};
+//#endregion
+export { c as curve };

package/dist/fade.d.ts

@@ -0,0 +1,24 @@
+import type { Effect } from './index.js';
+/**
+ * Crossfades the slides in place while the viewport scrolls, snaps and drags
+ * natively (ADR-0006). Pass it to `Deck.Viewport`'s `effect`:
+ *
+ * ```tsx
+ * import { fade } from '@carouseldeck/react/fade';
+ *
+ * <Deck.Viewport effect={fade}>…</Deck.Viewport>
+ * ```
+ *
+ * The slides are stacked with `position: sticky` over an empty snap target
+ * per slide, which gives the viewport its scroll length and snap points. Each
+ * slide's opacity follows its progress, 1 at the focal position and 0 a slide
+ * away; under reduced motion it cuts from one slide to the next halfway
+ * instead. Only the focal slide can be seen, so every other slide is inert.
+ *
+ * Each slide fills the viewport and snaps at its start: a fade shows one slide
+ * at a time, so slide size, alignment and group snapping (pages) do not apply.
+ * A horizontal deck is as tall as its tallest slide; a vertical one needs a
+ * height, as any vertical deck does.
+ */
+export declare const fade: Effect;
+//# sourceMappingURL=fade.d.ts.map

package/dist/fade.js

@@ -0,0 +1,32 @@
+"use client";
+//#region ../react/src/stacked.ts
+var e = (e, t) => {
+	let n = e === "vertical", r = `repeat(${Math.max(t, 1)}, 100%)`, i = n ? "gridRow" : "gridColumn", a = n ? "gridColumn" : "gridRow";
+	return {
+		viewport: {
+			display: "grid",
+			gridTemplateColumns: n ? "100%" : r,
+			gridTemplateRows: n ? r : "100%"
+		},
+		slide: {
+			[a]: "1",
+			[i]: "1 / -1",
+			[n ? "alignSelf" : "justifySelf"]: "start",
+			[n ? "height" : "width"]: `calc(100% / ${Math.max(t, 1)})`,
+			position: "sticky",
+			[n ? "top" : "insetInlineStart"]: 0,
+			scrollSnapAlign: "none"
+		},
+		target: (e) => ({
+			[a]: "1",
+			[i]: String(e + 1),
+			scrollSnapAlign: "start"
+		})
+	};
+}, t = "[data-carouseldeck-effect=fade]>[data-carouseldeck-slide]", n = (e) => `--carouseldeck-fade-progress:var(--deck-slide-progress,${e})`, r = "var(--carouseldeck-fade-progress)", i = `--carouseldeck-fade-distance:min(max(${r},-1*${r}),1)`, a = {
+	name: "fade",
+	css: `:where(${t}){${n(1)};${i};opacity:calc(1 - var(--carouseldeck-fade-distance))}:where(${t}[data-focal]){${n(0)}}@media (prefers-reduced-motion:reduce){:where(${t}){opacity:clamp(0,min(0.5 + ${r},0.501 - ${r})*1000,1)}}`,
+	layout: e
+};
+//#endregion
+export { a as fade };

package/dist/index.d.ts

@@ -0,0 +1,218 @@
+import { type ComponentProps, type CSSProperties, type Ref } from 'react';
+import { type Orientation } from '@carouseldeck/core';
+export type { Orientation };
+/** What `Deck.Root`'s `handleRef` exposes: moves for event handlers that
+ * should not round-trip through state. Each fires `onIndexChange` when the deck
+ * settles on a new snap point. */
+export interface RootHandle {
+    /** Scrolls to a snap point, clamped to the snap points there are. */
+    scrollTo(index: number): void;
+    /** Scrolls one snap point on. */
+    next(): void;
+    /** Scrolls one snap point back. */
+    prev(): void;
+}
+interface RootBaseProps extends ComponentProps<'div'> {
+    /** The deck's moves; `ref` is the region element, as on every primitive. */
+    handleRef?: Ref<RootHandle>;
+    /** Whether a mouse can drag the deck, settling on a snap point when it lets
+     * go. A drag never clicks what it started on. Touch, pen and trackpad
+     * always scroll natively. Defaults to true. */
+    drag?: boolean;
+    /** Called once each time the focal slide changes, with its slide index,
+     * or -1 when no slide snaps: when a scroll settles, never during one, and
+     * not for where the deck starts. */
+    onFocalChange?: (slide: number) => void;
+    /** Whether clicking a slide brings it to the focal position, as near as
+     * the scroll range allows; with pages, its page. A click that ends a mouse
+     * drag does not, nor does a keyboard click (Enter or Space on a control),
+     * nor a programmatic `element.click()` (detail 0): call `scrollTo` on the
+     * handle instead. Defaults to false. */
+    clickToFocus?: boolean;
+    /** The axis the deck scrolls along. A vertical deck needs a height, set on
+     * `Deck.Viewport` in CSS. Horizontal follows the writing direction: in a
+     * right-to-left document the deck starts at the right and Next moves left.
+     * Defaults to horizontal. */
+    orientation?: Orientation;
+    /** Whether scrolling past the last snap point arrives at the first, and
+     * back, with no visible jump: Prev and Next are then never disabled. Each
+     * slide's children mount once: `Deck.Viewport` moves the slide nearest the
+     * viewport onto empty, inert, `aria-hidden` shells that carry the snap
+     * points on each side of it, by `translate` (ADR-0013). A deck whose set
+     * of slides is too narrow for a shell to have room beside its own slide
+     * falls back to rendering full copies instead (clone and jump, ADR-0006,
+     * as built in ADR-0009): a copy renders the slide's children again, so
+     * their state is their own and an `id` in a slide repeats; `useSlide`
+     * tells them whether they are in one. Indexes, Dots and Counter count the
+     * slides' snap points only, never a shell's or a copy's. A deck whose
+     * slides all fit does not loop and renders neither. Defaults to false. */
+    loop?: boolean;
+    /** Moves the deck one snap point on every this many milliseconds, counted
+     * from when it comes to rest, and stops at the last, unless the deck
+     * loops, or where a step leaves the deck where it was, as when a
+     * controlled parent refuses it. A pointer over the deck or a hidden
+     * document pauses it; focus entering the deck, other than on
+     * `Deck.AutoplayToggle`, or the user moving it stops it until the toggle
+     * starts it again, and so does a preference for reduced motion, from the
+     * start. Pair it with `Deck.AutoplayToggle` (WCAG 2.2.2). Off by default. */
+    autoplay?: number;
+}
+/** Controlled like a React input's `value`: the deck scrolls to `index` when
+ * it changes. A scroll that settles elsewhere calls `onIndexChange`, and the
+ * deck returns to `index` unless the parent takes the new one. */
+interface ControlledProps {
+    /** The snap point to rest at. */
+    index: number;
+    defaultIndex?: never;
+    /** Called once each time the viewport settles on a new snap point other
+     * than `index`; never for a move to `index`. Without it, every scroll returns
+     * to `index`, and development warns. */
+    onIndexChange?: (index: number) => void;
+}
+interface UncontrolledProps {
+    index?: never;
+    /** The snap point to start at, clamped to the snap points there are.
+     * Read once, on mount. */
+    defaultIndex?: number;
+    /** Called once each time the viewport settles on a new snap point. */
+    onIndexChange?: (index: number) => void;
+}
+export type RootProps = RootBaseProps & (ControlledProps | UncontrolledProps);
+/** One deck: a labelled carousel region holding a viewport, its controls and
+ * a live region announcing the slide the user moves it to. */
+export declare function Root({ index, defaultIndex, onIndexChange, handleRef, drag, onFocalChange, clickToFocus, orientation, loop, autoplay, children, onFocus, onPointerEnter, onPointerLeave, onPointerDown, onKeyDown, onWheel, ...props }: RootProps): import("react").JSX.Element;
+/** What `useSlide` reports about the slide it is called in. */
+export interface UseSlideResult {
+    /** The index of the slide, also in a loop's copy of it. */
+    index: number;
+    /** Which side of the slides a loop's copy is on; undefined in a slide. */
+    copy: 'before' | 'after' | undefined;
+}
+/** The slide a component is rendered in: its index, and whether it is a
+ * loop's copy, so stateful content, such as a video player, can render
+ * differently in a copy, which is inert and never focal. Each slide mounts
+ * once: `copy` is undefined unless the deck's set of slides is too narrow
+ * for shells and falls back to rendering copies (ADR-0013). Throws outside
+ * a `Deck.Slide`. */
+export declare function useSlide(): UseSlideResult;
+/**
+ * A transition built on progress while the viewport keeps scrolling natively
+ * (GLOSSARY.md), passed to `Deck.Viewport`'s `effect`. Each effect is its own
+ * entry point, such as `@carouseldeck/react/fade`, so a deck that imports none
+ * ships none of their code.
+ */
+export interface Effect {
+    /** Names the effect's stylesheet, so a page holds one copy of it. */
+    name: string;
+    /** The effect's appearance, read from `--deck-slide-progress` and the
+     * slides' data attributes. Zero-specificity `:where()` rules, so consumer
+     * CSS overrides any of them (ADR-0003). */
+    css: string;
+    /** The structural styles the effect needs, set inline as the deck's own
+     * are, for a deck of `count` slides: with loop, a small deck's three sets
+     * of copies, or, with shells (ADR-0013), all five sets of them instead,
+     * each a shell rather than a copy. With `target`, the viewport holds an
+     * empty snap target per slide, per copy or per shell, in the order they
+     * run, after the slides, styled by it: the slides stack in one place, the
+     * engine measures each by its target, and every slide but the focal one
+     * is inert, as it cannot be seen. */
+    layout?: (orientation: Orientation, count: number) => {
+        viewport?: CSSProperties;
+        slide?: CSSProperties;
+        target?: (index: number) => CSSProperties;
+    };
+}
+export interface ViewportProps extends ComponentProps<'div'> {
+    /** An effect, imported from its own entry point, such as `fade` from
+     * `@carouseldeck/react/fade`. */
+    effect?: Effect;
+}
+/** The native scroll container. Its children are the deck's slides; with
+ * `loop`, two in-flow spacers and empty shells carrying their snap points on
+ * each side of them (ADR-0013), or, where the set of slides is too narrow
+ * for a shell to have room beside its own slide, a copy of every slide on
+ * each side instead; an `effect` may add a snap target after them for each
+ * slide, copy or shell. */
+export declare function Viewport({ style, children, effect, ...props }: ViewportProps): import("react").JSX.Element;
+/** One slide, labelled "n of m". Its size and alignment are consumer CSS.
+ * With loop, it mounts once: shells carry its snap points on each side, and
+ * `translate` moves it onto whichever is nearest the viewport (ADR-0013); a
+ * deck too narrow for shells copies it instead.
+ * For CSS to read, it carries `--deck-slide-index`, its index, and
+ * `--deck-slide-count`, the number of slides, copies not counted, from the
+ * first render; `--deck-slide-progress`, its signed distance from the focal
+ * position in slides, from the first render too, server HTML included,
+ * counted from the slide the deck starts at; and once mounted, `data-in-view` while any of
+ * it is in view. Progress and in-view are kept up to date as the deck scrolls
+ * without a React render. Where an effect stacks the slides, as fade does, every slide but the focal
+ * one is inert. */
+export declare function Slide({ style, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** What `useDeck` reports about the deck it is called in. */
+export interface UseDeckResult {
+    /** The current index: the snap point the deck rests at, a page when it
+     * snaps in pages. Until the viewport is measured, the index it starts at,
+     * clamped to the slides, as Counter shows it. */
+    index: number;
+    /** The snap points, so the pages; null until the viewport is measured, as
+     * on the server. */
+    count: number | null;
+    /** Whether `Deck.Root` has `loop`. */
+    loop: boolean;
+    /** Whether every slide fits, so there is nowhere to go: Prev, Next, Dots,
+     * Counter and AutoplayToggle are then absent. False until the viewport is
+     * measured. */
+    fits: boolean;
+    /** Whether `prev()` can move the deck: when `Deck.Prev` is enabled. */
+    canPrev: boolean;
+    /** Whether `next()` can move the deck: when `Deck.Next` is enabled. */
+    canNext: boolean;
+    /** Scrolls to a snap point, clamped to the snap points there are. */
+    scrollTo(index: number): void;
+    /** Scrolls one snap point on. */
+    next(): void;
+    /** Scrolls one snap point back. */
+    prev(): void;
+}
+/** The deck a component is rendered in: its state, as Prev and Next read it,
+ * and Dots and Counter once the viewport is measured, and its moves, so a
+ * consumer can build those controls from their own components. A move stops
+ * autoplay, as a built-in control's does. Like the primitives, it never
+ * re-renders while the deck scrolls (ADR-0003): it re-renders whenever
+ * `Deck.Root` does, as when the deck settles somewhere new, its snap points
+ * change or, with `autoplay`, autoplay starts, stops or pauses. Throws
+ * outside a `Deck.Root`. */
+export declare function useDeck(): UseDeckResult;
+/** Moves the deck one snap point back. Disabled at the first unless the deck
+ * loops; absent when every slide fits. Marked `data-carouseldeck-prev` for CSS
+ * to select. */
+export declare function Prev(props: ComponentProps<'button'>): import("react").JSX.Element | null;
+/** Moves the deck one snap point on. Disabled at the last unless the deck
+ * loops; absent when every slide fits. Marked `data-carouseldeck-next` for CSS
+ * to select. */
+export declare function Next(props: ComponentProps<'button'>): import("react").JSX.Element | null;
+/** A labelled group of buttons, one per page: one per snap point, so with
+ * several slides in a page a dot stands for the page, not a slide (ADR-0004).
+ * The current one carries `aria-current`; the group's data attributes are the
+ * deck's state, which a consumer's cannot overwrite. Absent when every slide
+ * fits. */
+export declare function Dots(props: Omit<ComponentProps<'div'>, 'children'>): import("react").JSX.Element | null;
+/** The current page and the total, as "3 / 10": counts pages, as Dots do.
+ * Absent when every slide fits. Not a live region: each slide is already
+ * labelled "n of m". Its data attributes are the deck's state, which
+ * a consumer's cannot overwrite. */
+export declare function Counter(props: Omit<ComponentProps<'span'>, 'children'>): import("react").JSX.Element | null;
+/**
+ * Stops and starts `Deck.Root`'s `autoplay`, so motion can always be stopped
+ * (WCAG 2.2.2). Its name is the action it takes, "Stop slide rotation" or
+ * "Start slide rotation", rather than `aria-pressed` (APG carousel); it is
+ * marked `data-playing` while autoplay is on, paused by a pointer or not.
+ * Children replace the visible name: give both states, shown by
+ * `data-playing` in CSS. Place it first among the deck's controls, ahead of
+ * the slides, so keyboard users reach it before the moving content. Focus on
+ * it does not stop autoplay, so it can be pressed. Starting autoplay where it
+ * stopped at the last snap point rewinds to the first. A consumer's
+ * `onClick` runs first and can cancel the toggle with `preventDefault()`.
+ * Absent without `autoplay`, and when every slide fits.
+ */
+export declare function AutoplayToggle({ onClick, children, ...props }: ComponentProps<'button'>): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,535 @@
+"use client";
+import { Children as e, Fragment as t, createContext as n, forwardRef as r, isValidElement as i, useContext as a, useEffect as o, useEffect as s, useImperativeHandle as c, useLayoutEffect as l, useRef as u, useState as d, version as f } from "react";
+import { COPY as p, SHELL as m, SNAP_TARGET as h, SPACER as g, createDeck as _ } from "@carouseldeck/core";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/with-ref.ts
+function x(e, t) {
+	let n = r((t, n) => e(n === null ? t : {
+		...t,
+		ref: n
+	}));
+	return n.displayName = t, n;
+}
+//#endregion
+//#region src/react.ts
+process.env.NODE_ENV !== "production" && !f.startsWith("18.") && console.error(`@carouseldeck/react-18 is for React 18, and this is React ${f}. Use @carouseldeck/react with React 19.`);
+var S = (e) => n(e).Provider, C = (e) => a(e._context), w = typeof window > "u" ? o : l, T = (e) => typeof e == "object" && !!e && e.type === "style";
+function E(e) {
+	return (t, n, r) => {
+		if (typeof t != "string") return e(t, n, r);
+		let i = n;
+		if ("inert" in i) {
+			let e = i.inert === "" || !!i.inert;
+			i = {
+				...i,
+				inert: e ? "" : void 0
+			};
+		}
+		if (t === "style" && "precedence" in i) {
+			let { children: e, ...t } = i;
+			delete t.href, delete t.precedence;
+			let n = String(e).replace(/<\/style/gi, "<\\/style");
+			i = {
+				...t,
+				dangerouslySetInnerHTML: { __html: n }
+			};
+		}
+		if ("data-carouseldeck-viewport" in i && Array.isArray(i.children)) {
+			let e = i.children, n = e.map((e) => T(e) ? e : null), a = e.map((e) => T(e) ? null : e);
+			return b(v, { children: [...n, b(t, {
+				...i,
+				children: a
+			})] }, r);
+		}
+		return e(t, i, r);
+	};
+}
+var D = E(y), ee = E(b), O = S(null);
+//#endregion
+//#region ../react/src/slides-in.ts
+function k(n, r) {
+	for (let a of e.toArray(n)) {
+		if (!i(a)) continue;
+		if (a.type === r) return e.toArray(a.props.children).length;
+		if (typeof a.type != "string" && a.type !== t) continue;
+		let n = k(a.props.children, r);
+		if (n !== null) return n;
+	}
+	return null;
+}
+//#endregion
+//#region ../react/src/index.tsx
+var A = (e, t) => Math.min(Math.max(e, 0), t - 1), j = -.9985;
+function M(e, t) {
+	let n = e;
+	for (; n <= j;) n += t;
+	for (; n > j + t;) n -= t;
+	return n;
+}
+var te = S(null);
+function N(e) {
+	let t = C(te);
+	if (!t) throw Error(`Deck.${e} must be inside Deck.Root`);
+	return t;
+}
+function P({ index: e, defaultIndex: t, onIndexChange: n, handleRef: r, drag: i = !0, onFocalChange: a, clickToFocus: o = !1, orientation: l = "horizontal", loop: f = !1, autoplay: p, children: m, onFocus: h, onPointerEnter: g, onPointerLeave: v, onPointerDown: y, onKeyDown: b, onWheel: x, ...S }) {
+	let [T] = d(() => {
+		let n = e ?? t ?? 0;
+		return Number.isFinite(n) ? n : 0;
+	});
+	process.env.NODE_ENV !== "production" && ie(e, t, n);
+	let [E, j] = d({
+		index: T,
+		count: null,
+		slide: null,
+		focal: null,
+		copies: !1
+	}), M = u(null), N = u(null), P = u(n), F = u(a), I = u(e), L = u(null), R = u(l), [ae, oe] = d(""), [z, B] = d(!0), [se, V] = d(!1), [U, ce] = d(!1), W = u(!1), G = u(!1), K = u(!1), q = u(null);
+	w(() => {
+		P.current = n, F.current = a, I.current = e;
+	}), w(() => {
+		let e = M.current;
+		if (!e) throw Error("Deck.Root must contain a Deck.Viewport");
+		let t, n, r = _(e, {
+			index: T,
+			orientation: R.current,
+			onChange(r) {
+				j(r);
+				let i = I.current;
+				t !== void 0 && r.index !== t && (i === void 0 || r.index !== A(i, r.count)) && (L.current = r.index, P.current?.(r.index)), t !== void 0 && r.index !== t && (G.current = !1, oe(r.slide === -1 || K.current ? "" : `Slide ${r.slide + 1} of ${re(e)}`)), t = r.index, n !== void 0 && r.focal !== n && F.current?.(r.focal), n = r.focal;
+			}
+		});
+		return N.current = r, () => {
+			r.destroy(), N.current = null;
+		};
+	}, [T]), w(() => {
+		N.current?.setDrag(i);
+	}, [i]), w(() => {
+		N.current?.setClickToFocus(o);
+	}, [o]), w(() => {
+		R.current = l, N.current?.setOrientation(l);
+	}, [l]);
+	let J = u(e);
+	w(() => {
+		let t = N.current, n = e !== J.current;
+		n && (K.current = !1, q.current = null), J.current = e;
+		let r = L.current;
+		if (L.current = null, e !== void 0 && E.count !== null && t) {
+			let i = A(e, E.count), a = t.target();
+			i !== (a ?? E.index) && (i !== r || a === null) && t.scrollTo(e, n ? "direct" : "short");
+		}
+	}, [
+		e,
+		E.index,
+		E.count
+	]);
+	let Y = p !== void 0;
+	w(() => {
+		if (!Y) return;
+		let e = matchMedia("(prefers-reduced-motion: reduce)"), t = () => {
+			e.matches && B(!1);
+		};
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [Y]), s(() => {
+		if (!Y) return;
+		let e = () => ce(document.visibilityState === "hidden");
+		return e(), document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
+	}, [Y]);
+	let X = Y && z && !se && !U && E.count !== null && !H(E.count);
+	s(() => {
+		if (!X) return;
+		let e, t = () => {
+			G.current = !0, q.current = null, B(!1);
+		}, n = () => {
+			let r = N.current;
+			if (r) {
+				if (r.target() !== null || W.current || document.visibilityState === "hidden") {
+					e = setTimeout(n, p);
+					return;
+				}
+				if (q.current === E.index) {
+					t();
+					return;
+				}
+				q.current = E.index, K.current = !0, r.next(), r.target() === null && t();
+			}
+		};
+		return e = setTimeout(n, p), () => clearTimeout(e);
+	}, [
+		X,
+		p,
+		E.index
+	]);
+	let le = () => {
+		if (z) {
+			B(!1);
+			return;
+		}
+		q.current = null, G.current && (G.current = !1, K.current = !0, N.current?.scrollTo(0)), B(!0);
+	}, Z = ({ target: e }) => {
+		let t = e;
+		t.closest("[data-carouseldeck-autoplay-toggle]") || (M.current?.contains(t) ? $() : Q());
+	}, Q = () => (K.current = !1, q.current = null, N.current), $ = () => (Y && B(!1), Q());
+	c(r, () => ({
+		scrollTo: (e) => Q()?.scrollTo(e),
+		next: () => Q()?.next(),
+		prev: () => Q()?.prev()
+	}), []);
+	let de = C(O), fe = E.count === null ? k(m, ue) ?? de : null;
+	return /* @__PURE__ */ D(O, {
+		value: null,
+		children: /* @__PURE__ */ D(te, {
+			value: {
+				...E,
+				slides: fe,
+				initialIndex: T,
+				orientation: l,
+				loop: f,
+				viewportRef: M,
+				engineRef: N,
+				hasAutoplay: Y,
+				playing: z,
+				togglePlaying: le,
+				userMove: $
+			},
+			children: /* @__PURE__ */ ee("div", {
+				role: "region",
+				"aria-roledescription": "carousel",
+				"data-index": E.index,
+				...S,
+				onFocus: (e) => {
+					h?.(e);
+					let t = e.target;
+					for (; t && t.parentElement !== M.current;) t = t.parentElement;
+					t && !t.contains(e.relatedTarget) && N.current?.target() != null && Q(), Y && !e.target.closest("[data-carouseldeck-autoplay-toggle]") && B(!1);
+				},
+				onPointerEnter: (e) => {
+					g?.(e), W.current = !0, Y && V(!0);
+				},
+				onPointerLeave: (e) => {
+					v?.(e), W.current = !1, Y && V(!1);
+				},
+				onPointerDown: (e) => {
+					y?.(e), Z(e);
+				},
+				onKeyDown: (e) => {
+					b?.(e), Z(e);
+				},
+				onWheel: (e) => {
+					x?.(e), Z(e);
+				},
+				children: [m, /* @__PURE__ */ D("div", {
+					"aria-live": X ? "off" : "polite",
+					"aria-atomic": "true",
+					"data-carouseldeck-live": "",
+					style: ne,
+					children: ae
+				})]
+			})
+		})
+	});
+}
+var ne = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap",
+	border: 0
+}, re = (e) => [...e.children].filter((e) => !e.hasAttribute(h) && !e.hasAttribute(p) && !e.hasAttribute(m) && !e.hasAttribute(g)).length;
+function ie(e, t, n) {
+	let r = e !== void 0, [i] = d(r), a = r && t !== void 0, o = r !== i, c = r && n === void 0, l = u(/* @__PURE__ */ new Set());
+	s(() => {
+		let e = (e, t) => {
+			l.current.has(e) || (l.current.add(e), console.error(t));
+		};
+		a && e("both", "Deck.Root takes either index or defaultIndex, not both. Pass index with onIndexChange for a controlled deck, or defaultIndex for an uncontrolled one."), o && e("switched", `Deck.Root is changing ${i ? "a controlled deck to be uncontrolled" : "an uncontrolled deck to be controlled"}. A deck should not switch between the two: choose index or defaultIndex for its whole life.`), c && e("readOnly", "Deck.Root was given index without onIndexChange, so a scroll will return the deck to index. Pass onIndexChange to follow the scroll, or defaultIndex for an uncontrolled deck.");
+	}, [
+		a,
+		o,
+		c,
+		i
+	]);
+}
+var F = S(null);
+function I() {
+	let e = C(F);
+	if (!e) throw Error("Deck.useSlide must be inside Deck.Slide");
+	return {
+		index: e.index,
+		copy: e.copy
+	};
+}
+var L = {
+	horizontal: {
+		display: "flex",
+		overflowX: "auto",
+		scrollSnapType: "x mandatory"
+	},
+	vertical: {
+		display: "flex",
+		flexDirection: "column",
+		overflowY: "auto",
+		scrollSnapType: "y mandatory"
+	}
+};
+function R({ style: n, children: r, effect: a, ...o }) {
+	let { viewportRef: s, engineRef: c, orientation: l, loop: u, count: d, initialIndex: f, copies: p } = N("Viewport"), m = l === "vertical", h = e.toArray(r), g = u && !H(d), _ = g && !p, v = g && p, y = a?.layout?.(l, h.length)?.target !== void 0, b = h.length * (v ? 3 : _ && y ? 5 : 1), x = a?.layout?.(l, b), S = x?.target, C = A(f, h.length), T = _ && !y, E = (e) => T ? Math.max(-2, Math.min(2, Math.floor((C - e) / h.length + .5))) : 0, O = _ && y, k = h.map((e) => i(e) ? e.key : "").join();
+	w(() => {
+		c.current?.refresh();
+	}, [
+		c,
+		h.length,
+		v,
+		_,
+		y,
+		k
+	]);
+	let j = (e) => h.map((t, n) => {
+		let r = E(n);
+		return /* @__PURE__ */ D(F, {
+			value: {
+				index: n,
+				count: h.length,
+				stacked: y,
+				style: e === "before" ? {
+					...x?.slide,
+					order: -1
+				} : x?.slide,
+				progress: O ? M(n - C, h.length) : n - C + (e === "after" ? h.length : e ? -h.length : r * h.length),
+				placed: !O && r !== 0 ? r * h.length : void 0,
+				copy: e
+			},
+			children: t
+		}, i(t) ? t.key : n);
+	});
+	return /* @__PURE__ */ ee("div", {
+		ref: s,
+		tabIndex: 0,
+		"data-carouseldeck-viewport": "",
+		"data-orientation": l,
+		"data-carouseldeck-effect": a?.name,
+		"data-carouseldeck-loop": g ? _ ? "shells" : "copies" : void 0,
+		style: {
+			...L[l],
+			...x?.viewport,
+			...n
+		},
+		...o,
+		children: [
+			/* @__PURE__ */ D("style", {
+				href: "carouseldeck-slide",
+				precedence: "carouseldeck",
+				children: B
+			}),
+			a && /* @__PURE__ */ D("style", {
+				href: `carouseldeck-${a.name}`,
+				precedence: "carouseldeck",
+				children: a.css
+			}),
+			j(),
+			v && /* @__PURE__ */ D(t, { children: j("after") }, "after"),
+			v && /* @__PURE__ */ D(t, { children: j("before") }, "before"),
+			_ && !y && /* @__PURE__ */ D("div", {
+				"data-carouseldeck-spacer": "before",
+				"aria-hidden": "true",
+				style: z(!0, h.length)
+			}),
+			_ && !y && /* @__PURE__ */ D("div", {
+				"data-carouseldeck-spacer": "after",
+				"aria-hidden": "true",
+				style: z(!1, h.length)
+			}),
+			_ && ae.flatMap((e) => Array.from({ length: h.length }, (t, n) => /* @__PURE__ */ D("div", {
+				"data-carouseldeck-shell": e,
+				"data-carouseldeck-snap-target": y ? "" : void 0,
+				"aria-hidden": "true",
+				inert: !0,
+				style: y ? S?.((e + 2) * h.length + n) : {
+					...oe,
+					[m ? "insetBlockStart" : "insetInlineStart"]: `${((e + 2) * h.length + n) * 100}%`
+				}
+			}, `shell:${e}:${n}`))),
+			S && !O && Array.from({ length: b }, (e, t) => /* @__PURE__ */ D("div", {
+				"aria-hidden": "true",
+				"data-carouseldeck-snap-target": "",
+				style: S(t)
+			}, `target-${t}`))
+		]
+	});
+}
+var ae = [
+	-2,
+	-1,
+	0,
+	1,
+	2
+], oe = {
+	position: "absolute",
+	margin: 0,
+	padding: 0,
+	border: 0,
+	scale: "none",
+	rotate: "none",
+	translate: "none",
+	opacity: 0,
+	pointerEvents: "none",
+	scrollSnapAlign: "none"
+}, z = (e, t) => ({
+	...e && { order: -1 },
+	flexGrow: 0,
+	flexShrink: 0,
+	margin: 0,
+	padding: 0,
+	border: 0,
+	scale: "none",
+	rotate: "none",
+	translate: "none",
+	opacity: 0,
+	pointerEvents: "none",
+	scrollSnapAlign: "none",
+	...e ? { "--carouseldeck-spacer-estimate": `${2 * t * 100}%` } : { flexBasis: `${2 * t * 100}%` }
+}), B = ":where([data-carouseldeck-slide]){width:100%;scroll-snap-align:start}:where([data-orientation=vertical]>[data-carouseldeck-slide]){height:100%}:where([data-carouseldeck-viewport]){scrollbar-width:none}:where([data-carouseldeck-loop=shells]){position:relative}:where([data-carouseldeck-loop=shells]){overflow-anchor:none}:where([data-carouseldeck-placed]){translate:calc(var(--carouseldeck-placed) * 100%) 0}:where([data-carouseldeck-placed]:dir(rtl)){translate:calc(var(--carouseldeck-placed) * -100%) 0}:where([data-orientation=vertical]>[data-carouseldeck-placed]){translate:0 calc(var(--carouseldeck-placed) * 100%)}@supports (scroll-initial-target: nearest) {:where([data-carouseldeck-spacer=\"before\"]){flex-basis:var(--carouseldeck-spacer-estimate)}}@supports not (scrollbar-width:none){:where([data-carouseldeck-viewport])::-webkit-scrollbar{display:none}}", se = { scrollInitialTarget: "nearest" };
+function V({ style: e, ...t }) {
+	let n = N("Slide"), r = C(F);
+	if (!r) throw Error("Deck.Slide must be inside Deck.Viewport");
+	let { index: i, count: a, stacked: o, copy: s } = r, c = !s && i === A(n.initialIndex, a), l = !s && (n.slide === null ? c : i === n.slide), u = !s && (n.focal === null ? c : i === n.focal), d = s !== void 0 || o && !u, { viewportRef: f } = n;
+	return w(() => {
+		if (!d) return;
+		let e = f.current, t = document.activeElement?.closest("[data-carouseldeck-slide][inert]");
+		e && t?.parentElement === e && e.focus({ preventScroll: !0 });
+	}, [d, f]), /* @__PURE__ */ D("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": `${i + 1} of ${a}`,
+		"data-carouseldeck-slide": "",
+		"data-carouseldeck-copy": s,
+		"data-carouseldeck-placed": r.placed === void 0 ? void 0 : "",
+		"aria-hidden": s ? !0 : void 0,
+		"data-current": l ? "" : void 0,
+		"data-focal": u ? "" : void 0,
+		inert: d,
+		style: {
+			flexShrink: 0,
+			"--deck-slide-index": i,
+			"--deck-slide-count": a,
+			"--deck-slide-progress": r.progress,
+			...r.placed !== void 0 && { "--carouseldeck-placed": r.placed },
+			...c && se,
+			...r.style,
+			...e
+		},
+		...t
+	});
+}
+var H = (e) => e !== null && e <= 1;
+function U(e) {
+	let t = N(e), { count: n, slides: r, loop: i, userMove: a } = t, o = n === null && r ? A(t.initialIndex, r) : t.index, s = H(n);
+	return {
+		index: o,
+		count: n,
+		loop: i,
+		fits: s,
+		canPrev: !s && (i || o !== 0),
+		canNext: !s && (i || n === null || o < n - 1),
+		scrollTo: (e) => a()?.scrollTo(e),
+		next: () => a()?.next(),
+		prev: () => a()?.prev()
+	};
+}
+function ce() {
+	return U("useDeck");
+}
+function W({ atEnd: e, step: t, label: n, onClick: r, disabled: i, children: a, ...o }) {
+	return /* @__PURE__ */ D("button", {
+		type: "button",
+		...o,
+		disabled: e || i,
+		"data-disabled": e || i ? "" : void 0,
+		onClick: (e) => {
+			r?.(e), e.defaultPrevented || t();
+		},
+		children: a ?? n
+	});
+}
+function G(e) {
+	let { fits: t, canPrev: n, prev: r } = U("Prev");
+	return t ? null : /* @__PURE__ */ D(Q, {
+		...e,
+		"data-carouseldeck-prev": "",
+		atEnd: !n,
+		step: r,
+		label: "Previous"
+	});
+}
+function K(e) {
+	let { fits: t, canNext: n, next: r } = U("Next");
+	return t ? null : /* @__PURE__ */ D(Q, {
+		...e,
+		"data-carouseldeck-next": "",
+		atEnd: !n,
+		step: r,
+		label: "Next"
+	});
+}
+function q(e) {
+	let { index: t, count: n, slides: r, initialIndex: i, userMove: a } = N(e);
+	return n !== null || r === null ? {
+		index: t,
+		count: n,
+		userMove: a
+	} : {
+		index: A(i, r),
+		count: r,
+		userMove: a
+	};
+}
+function J(e) {
+	let { index: t, count: n, userMove: r } = q("Dots");
+	return H(n) ? null : /* @__PURE__ */ D("div", {
+		role: "group",
+		"aria-label": "Choose page",
+		...e,
+		"data-carouseldeck-dots": "",
+		"data-index": n === null ? void 0 : t,
+		"data-count": n ?? void 0,
+		children: Array.from({ length: n ?? 0 }, (e, n) => /* @__PURE__ */ D("button", {
+			type: "button",
+			"aria-label": `Go to page ${n + 1}`,
+			"aria-current": n === t ? "true" : void 0,
+			"data-index": n,
+			onClick: () => r()?.scrollTo(n)
+		}, n))
+	});
+}
+function Y(e) {
+	let { index: t, count: n } = q("Counter");
+	if (H(n)) return null;
+	let r = n !== null;
+	return /* @__PURE__ */ D("span", {
+		...e,
+		"data-carouseldeck-counter": "",
+		"data-index": r ? t : void 0,
+		"data-count": r ? n : void 0,
+		children: r && `${t + 1} / ${n}`
+	});
+}
+function X({ onClick: e, children: t, ...n }) {
+	let { hasAutoplay: r, playing: i, togglePlaying: a, count: o } = N("AutoplayToggle");
+	return !r || H(o) ? null : /* @__PURE__ */ D("button", {
+		type: "button",
+		...n,
+		"data-carouseldeck-autoplay-toggle": "",
+		"data-playing": i ? "" : void 0,
+		onClick: (t) => {
+			e?.(t), t.defaultPrevented || a();
+		},
+		children: t ?? (i ? "Stop slide rotation" : "Start slide rotation")
+	});
+}
+var le = x(P, "Root"), ue = x(R, "Viewport"), Z = x(V, "Slide"), Q = x(W, "StepButton"), $ = x(G, "Prev"), de = x(K, "Next"), fe = x(J, "Dots"), pe = x(Y, "Counter"), me = x(X, "AutoplayToggle");
+//#endregion
+export { me as AutoplayToggle, pe as Counter, fe as Dots, de as Next, $ as Prev, le as Root, Z as Slide, ue as Viewport, ce as useDeck, I as useSlide };

package/dist/theme.css

@@ -0,0 +1,184 @@
+/*
+ * @carouseldeck/react/theme.css: an optional appearance for a deck's controls,
+ * Prev, Next, Dots, Counter and AutoplayToggle. Slides and their geometry
+ * stay your CSS (ADR-0003), and a deck works without this file.
+ *
+ * Every rule is wrapped in :where(), so any selector of yours beats it. Every
+ * themed value is a custom property below; set one on the deck or any
+ * ancestor to override its default.
+ *
+ *   --deck-control-color: #1a1a1a
+ *     Text of Prev, Next, the counter and the stopped autoplay toggle.
+ *   --deck-control-background: #ffffff
+ *     Background of Prev, Next and the autoplay toggle.
+ *   --deck-control-hover-background: #f0f0f0
+ *     Their background under a pointer.
+ *   --deck-control-border: 1px solid #767676
+ *     Their border.
+ *   --deck-control-radius: 0.375rem
+ *     Their corner radius.
+ *   --deck-control-padding: 0.375rem 0.75rem
+ *     Their padding.
+ *   --deck-control-font-size: 0.875rem
+ *     Their font size, and the counter's.
+ *   --deck-control-disabled-opacity: 0.4
+ *     Opacity of Prev or Next while disabled, at either end.
+ *   --deck-control-active-background: var(--deck-accent, #0b5cd5)
+ *     Background of the autoplay toggle while autoplay plays, paused by a
+ *     pointer or not; stopped, it looks like Prev and Next.
+ *   --deck-control-active-color: #ffffff
+ *     Its text while autoplay plays.
+ *   --deck-dot-color: #767676
+ *     A dot that is not the current page.
+ *   --deck-dot-hover-color: #1a1a1a
+ *     A dot that is not the current page, under a pointer.
+ *   --deck-dot-size: 0.625rem
+ *     The diameter of the dot drawn.
+ *   --deck-dot-current-width: 1.25rem
+ *     The width of the current page's dot, wider than the others so it
+ *     stands out by shape as well as colour.
+ *   --deck-dot-radius: 9999px
+ *     A dot's corner radius; past half its side it rounds a dot to a circle
+ *     and the current one to a pill.
+ *   --deck-dot-target-size: 1.5rem
+ *     The square a dot answers clicks in, the dot centred in it.
+ *   --deck-dot-gap: 0.25rem
+ *     Space between dot targets.
+ *   --deck-accent: #0b5cd5
+ *     The current page's dot, the focus ring and the playing toggle.
+ *   --deck-focus-width: 2px
+ *     Width of the focus ring a keyboard user sees.
+ *   --deck-focus-offset: 2px
+ *     Space between a control and its focus ring.
+ *   --deck-transition-duration: 150ms
+ *     How long hover and state changes fade; none under reduced motion.
+ */
+
+:where(
+  [data-carouseldeck-prev],
+  [data-carouseldeck-next],
+  [data-carouseldeck-autoplay-toggle]
+) {
+  padding: var(--deck-control-padding, 0.375rem 0.75rem);
+  border: var(--deck-control-border, 1px solid #767676);
+  border-radius: var(--deck-control-radius, 0.375rem);
+  background-color: var(--deck-control-background, #ffffff);
+  color: var(--deck-control-color, #1a1a1a);
+  font: inherit;
+  font-size: var(--deck-control-font-size, 0.875rem);
+}
+
+:where(
+  [data-carouseldeck-prev],
+  [data-carouseldeck-next],
+  [data-carouseldeck-autoplay-toggle]
+):where(:hover:not(:disabled)) {
+  background-color: var(--deck-control-hover-background, #f0f0f0);
+}
+
+:where([data-carouseldeck-autoplay-toggle][data-playing]) {
+  background-color: var(
+    --deck-control-active-background,
+    var(--deck-accent, #0b5cd5)
+  );
+  color: var(--deck-control-active-color, #ffffff);
+}
+
+:where([data-carouseldeck-prev], [data-carouseldeck-next]):where(:disabled) {
+  opacity: var(--deck-control-disabled-opacity, 0.4);
+}
+
+:where([data-carouseldeck-dots]) {
+  display: flex;
+  gap: var(--deck-dot-gap, 0.25rem);
+}
+
+:where([data-carouseldeck-dots] > button) {
+  box-sizing: border-box;
+  inline-size: var(--deck-dot-target-size, 1.5rem);
+  block-size: var(--deck-dot-target-size, 1.5rem);
+  padding: calc(
+    (var(--deck-dot-target-size, 1.5rem) - var(--deck-dot-size, 0.625rem)) / 2
+  );
+  border: 0;
+  border-radius: var(--deck-dot-radius, 9999px);
+  background-color: var(--deck-dot-color, #767676);
+  background-clip: content-box;
+}
+
+:where([data-carouseldeck-dots] > button[aria-current='true']) {
+  inline-size: calc(
+    var(--deck-dot-target-size, 1.5rem) - var(--deck-dot-size, 0.625rem) +
+      var(--deck-dot-current-width, 1.25rem)
+  );
+  background-color: var(--deck-accent, #0b5cd5);
+}
+
+:where([data-carouseldeck-dots] > button:not([aria-current='true']):hover) {
+  background-color: var(--deck-dot-hover-color, #1a1a1a);
+}
+
+/* Forced colours paint every background the page colour, dots included:
+ * draw them in system colours instead, the current and a hovered one
+ * highlighted. The playing toggle is highlighted too, so it still differs
+ * from the stopped one. */
+@media (forced-colors: active) {
+  :where([data-carouseldeck-dots] > button) {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+    outline-color: CanvasText;
+  }
+
+  :where(
+    [data-carouseldeck-dots] > button[aria-current='true'],
+    [data-carouseldeck-dots] > button:hover
+  ) {
+    background-color: Highlight;
+  }
+
+  :where([data-carouseldeck-autoplay-toggle][data-playing]) {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background-color: Highlight;
+    color: HighlightText;
+    outline-color: CanvasText;
+  }
+}
+
+:where([data-carouseldeck-counter]) {
+  color: var(--deck-control-color, #1a1a1a);
+  font-size: var(--deck-control-font-size, 0.875rem);
+}
+
+:where(
+  [data-carouseldeck-prev],
+  [data-carouseldeck-next],
+  [data-carouseldeck-autoplay-toggle],
+  [data-carouseldeck-dots] > button
+) {
+  transition:
+    background-color var(--deck-transition-duration, 150ms),
+    color var(--deck-transition-duration, 150ms),
+    opacity var(--deck-transition-duration, 150ms);
+}
+
+:where(
+  [data-carouseldeck-prev],
+  [data-carouseldeck-next],
+  [data-carouseldeck-autoplay-toggle],
+  [data-carouseldeck-dots] > button
+):where(:focus-visible) {
+  outline: var(--deck-focus-width, 2px) solid var(--deck-accent, #0b5cd5);
+  outline-offset: var(--deck-focus-offset, 2px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(
+    [data-carouseldeck-prev],
+    [data-carouseldeck-next],
+    [data-carouseldeck-autoplay-toggle],
+    [data-carouseldeck-dots] > button
+  ) {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@carouseldeck/react-18",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.3.0",
+  "description": "@carouseldeck/react built for React 18: headless, composable carousel primitives on native scroll snap.",
+  "license": "MIT",
+  "homepage": "https://carousel.deck.cool",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pedrosousa13/deck-cool.git",
+    "directory": "decks/carouseldeck/packages/react-18"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./fade": {
+      "types": "./dist/fade.d.ts",
+      "default": "./dist/fade.js"
+    },
+    "./curve": {
+      "types": "./dist/curve.d.ts",
+      "default": "./dist/curve.js"
+    },
+    "./theme.css": {
+      "default": "./dist/theme.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@carouseldeck/core": "1.3.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 <19",
+    "react-dom": ">=18 <19"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.31",
+    "@types/react-dom": "18.3.7",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "vite": "8.3.1",
+    "@carouseldeck/react": "1.3.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
 }