react-raffle-picker 0.2.2 → 0.3.1

package/README.md

@@ -15,11 +15,14 @@
     <a href="https://kirilinsky.github.io/react-raffle-picker/">
       <img src="https://img.shields.io/badge/storybook-live-ff4785?logo=storybook&logoColor=white" alt="Storybook" />
     </a>
-    <a href="https://codecov.io/gh/kirilinsky/react-raffle-picker">
-      <img src="https://codecov.io/gh/kirilinsky/react-raffle-picker/branch/main/graph/badge.svg" alt="Codecov coverage" />
+    <a href="https://app.codecov.io/gh/kirilinsky/react-raffle-picker">
+      <img src="https://img.shields.io/codecov/c/github/kirilinsky/react-raffle-picker?label=coverage" alt="Codecov coverage" />
     </a>
-    <a href="https://bundlephobia.com/package/react-raffle-picker">
-      <img src="https://img.shields.io/bundlephobia/minzip/react-raffle-picker?label=gzip" alt="Gzip bundle size" />
+    <a href="https://www.npmjs.com/package/react-raffle-picker">
+      <img src="https://img.shields.io/npm/v/react-raffle-picker" alt="npm version" />
+    </a>
+    <a href="https://www.npmjs.com/package/react-raffle-picker">
+      <img src="https://img.shields.io/npm/dm/react-raffle-picker" alt="npm downloads" />
     </a>
   </p>
 </div>
@@ -104,14 +107,18 @@ Provides context. Renders an optional wrapper element (`as` prop, default `'div'
 | `random`       | `boolean`                   | `true`     | Random pick vs sequential.                                                                                                                                               |
 | `inertia`      | `boolean`                   | `false`    | Soft start / soft stop ramp.                                                                                                                                             |
 | `autoStart`    | `boolean`                   | `true`     | Begin cycling on mount.                                                                                                                                                  |
+| `noRepeat`     | `boolean`                   | `true`     | Exclude previously frozen values from later rounds — no duplicate winners across sequential draws in the same mounted instance. Set `false` to allow repeats.           |
 | `initialValue` | `number \| string`          | —          | Starting display before first run. Number for `min`/`max` mode, string for `items` mode. For `<Slots>`, each character seeds the corresponding reel.                     |
 | `finalValue`   | `number \| string`          | —          | Forces settle to land on this value. Cycle still appears random; only final freeze is rigged. For `<Slots>`, each character is the final char of the corresponding reel. |
 | `onSelect`     | `(value) => void`           | —          | Fires once per round on freeze.                                                                                                                                          |
+| `onExhausted`  | `() => void`                | —          | Fires when `start()` is called but `noRepeat` has already drawn every candidate.                                                                                        |
 | `as`           | `ElementType`               | `'div'`    | Wrapper tag.                                                                                                                                                             |
 | `className`    | `string`                    | —          | Wrapper class.                                                                                                                                                           |
 | `style`        | `CSSProperties`             | —          | Wrapper style.                                                                                                                                                           |
 | `children`     | `ReactNode`                 | —          | Sub-components.                                                                                                                                                          |
 
+**`noRepeat` in a nutshell:** draw history lives in the mounted `<RafflePick>` instance (not persisted, not synced across instances). `<RafflePick.Button>` auto-disables once the pool is exhausted. For a custom trigger built on `useRaffleContext()`, `start()` becomes a no-op and fires `onExhausted` once the pool is empty. Call `useRaffleContext().resetHistory()` to allow repeats again without unmounting, or change the component's `key` to remount with a clean slate.
+
 ### `<RafflePick.Value>`
 
 Renders the cycling value. Updates `textContent` imperatively each tick (no React re-render).
@@ -135,6 +142,7 @@ Toggles start / freeze based on phase. Disabled during settling.
 | `stopLabel`  | `ReactNode`     | Shown in `running` / `starting` (click stops).   |
 | `waitLabel`  | `ReactNode`     | Shown in `settling` (button disabled).           |
 | `children`   | `ReactNode`     | Fallback label when state-specific label absent. |
+| `disabled`   | `boolean`       | External disable, on top of the auto-disable during `settling`. |
 | `className`  | `string`        | —                                                |
 | `style`      | `CSSProperties` | —                                                |
 
@@ -202,6 +210,31 @@ Independent multi-reel slot machine. Each reel ticks on its own and stops with a
 </RafflePick>
 ```
 
+### Multi-round draw without repeat winners
+
+`noRepeat` defaults to `true` — each subsequent round in the same mounted
+`<RafflePick>` automatically excludes everyone already drawn. The Button
+disables itself once the pool is empty.
+
+```tsx
+function Giveaway() {
+  const [winners, setWinners] = useState<string[]>([])
+  return (
+    <RafflePick
+      items={['Alice', 'Bob', 'Carol', 'Dave']}
+      autoStart={false}
+      onSelect={(winner) => setWinners((w) => [...w, String(winner)])}
+      onExhausted={() => console.log('everyone already won')}
+    >
+      <RafflePick.Value />
+      <RafflePick.Button startLabel="Draw next" stopLabel="Stop" />
+    </RafflePick>
+  )
+  // Click "Draw next" repeatedly — Alice, Bob, Carol, Dave each win once,
+  // then the button disables itself. Pass noRepeat={false} to allow repeats.
+}
+```
+
 ### Slot machine with custom result handler
 
 ```tsx
@@ -224,6 +257,18 @@ Independent multi-reel slot machine. Each reel ticks on its own and stops with a
 - Headless `useRafflePick()` hook for users who want zero rendering from the lib.
 - Render-prop variant of `<Value>` for fully custom DOM.
 
+## Accessibility
+
+- `<RafflePick.Value>` cycles are visual-only (`aria-hidden`) — high-frequency tick
+  updates are not announced. The frozen result *is* announced once per round via a
+  hidden `aria-live="polite"` region.
+- `<RafflePick.Countdown>`'s ring/label are `aria-hidden`; a one-time sr-only
+  announcement fires when the countdown starts. The result itself is still
+  announced by `<RafflePick.Value>` on freeze.
+- `styles.css` respects `prefers-reduced-motion: reduce` — value animations and the
+  slot reel disable their `animation` under that media query. If you ship fully
+  custom CSS instead of the bundled stylesheet, add the same guard yourself.
+
 ## Performance notes
 
 - Cycle ticks (every `interval` ms) write `textContent` directly via refs — no React render.

package/dist/index.cjs

@@ -9,7 +9,7 @@ const getRandom = (min, max) => {
 };
 //#endregion
 //#region src/hooks/useNumberCycle.ts
-const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick }) => {
+const useNumberCycle = ({ min, max, interval, random, running, valueRef, excludedRef, onTick }) => {
 	const onTickRef = (0, react.useRef)(onTick);
 	(0, react.useEffect)(() => {
 		onTickRef.current = onTick;
@@ -18,7 +18,24 @@ const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick
 		if (!running) return;
 		const id = setInterval(() => {
 			const cur = valueRef.current;
-			const next = random ? getRandom(min, max) : cur >= max ? min : cur + 1;
+			const excluded = excludedRef?.current;
+			const total = max - min + 1;
+			let next;
+			if (excluded && excluded.size > 0 && excluded.size < total) if (random) {
+				next = getRandom(min, max);
+				let attempts = 0;
+				while (excluded.has(next) && attempts < 20) {
+					next = getRandom(min, max);
+					attempts++;
+				}
+				while (excluded.has(next)) next = next >= max ? min : next + 1;
+			} else {
+				next = cur;
+				do
+					next = next >= max ? min : next + 1;
+				while (excluded.has(next));
+			}
+			else next = random ? getRandom(min, max) : cur >= max ? min : cur + 1;
 			valueRef.current = next;
 			onTickRef.current?.(next);
 		}, interval);
@@ -29,7 +46,8 @@ const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick
 		min,
 		max,
 		random,
-		valueRef
+		valueRef,
+		excludedRef
 	]);
 	return valueRef;
 };
@@ -172,11 +190,12 @@ const useRaffleContext = (componentName) => {
 };
 //#endregion
 //#region src/components/RafflePick/RafflePick.tsx
-function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = true, inertia = false, autoStart = true, initialValue, finalValue, onSelect, as = "div", className, style, children }) {
+function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = true, inertia = false, autoStart = true, noRepeat = true, initialValue, finalValue, onSelect, onExhausted, as = "div", className, style, children }) {
 	const itemCount = items?.length ?? 0;
 	const hasItems = itemCount > 0;
 	const cycleMin = hasItems ? 0 : min;
 	const cycleMax = hasItems ? itemCount - 1 : max;
+	const totalCandidates = cycleMax - cycleMin + 1;
 	const initialPhase = autoStart ? inertia ? "starting" : "running" : "idle";
 	const itemsRef = (0, react.useRef)(items);
 	(0, react.useEffect)(() => {
@@ -195,14 +214,18 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 		}
 		return typeof value === "number" ? value : void 0;
 	}, []);
-	const initialIndex = (() => {
+	const initialIndex = (0, react.useMemo)(() => {
 		if (initialValue === void 0) return cycleMin;
 		if (items && items.length > 0) {
 			const i = items.indexOf(String(initialValue));
 			return i >= 0 ? i : cycleMin;
 		}
 		return typeof initialValue === "number" ? initialValue : cycleMin;
-	})();
+	}, [
+		initialValue,
+		items,
+		cycleMin
+	]);
 	const [displayed, setDisplayed] = (0, react.useState)(() => {
 		if (initialValue !== void 0) {
 			const its = items;
@@ -228,17 +251,49 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 	(0, react.useEffect)(() => {
 		finalValueRef.current = finalValue;
 	}, [finalValue]);
+	const drawnRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const [drawnCount, setDrawnCount] = (0, react.useState)(0);
+	const onExhaustedRef = (0, react.useRef)(onExhausted);
+	(0, react.useEffect)(() => {
+		onExhaustedRef.current = onExhausted;
+	}, [onExhausted]);
 	const { phase, step, start, freeze, reset } = useRafflePhase(inertia, initialPhase, (0, react.useCallback)(() => {
 		const forced = valueToIndex(finalValueRef.current);
 		if (forced !== void 0) valueRef.current = forced;
+		if (noRepeat) {
+			drawnRef.current.add(valueRef.current);
+			setDrawnCount(drawnRef.current.size);
+		}
 		const v = displayValue(valueRef.current);
 		setDisplayed(v);
 		onSelect?.(v);
 	}, [
 		displayValue,
 		onSelect,
-		valueToIndex
+		valueToIndex,
+		noRepeat
 	]));
+	const exhausted = noRepeat && drawnCount >= totalCandidates;
+	const guardedStart = (0, react.useCallback)(() => {
+		if (noRepeat && drawnRef.current.size >= totalCandidates) {
+			onExhaustedRef.current?.();
+			return;
+		}
+		start();
+	}, [
+		start,
+		noRepeat,
+		totalCandidates
+	]);
+	const resetHistory = (0, react.useCallback)(() => {
+		drawnRef.current.clear();
+		setDrawnCount(0);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (phase !== "idle") return;
+		valueRef.current = initialIndex;
+	}, [phase, initialIndex]);
+	const displayedValue = phase === "idle" ? items && items.length > 0 ? items[initialIndex] ?? items[cycleMin] : initialIndex : displayed;
 	const multiplier = getInertiaMultiplier(phase, step, inertia);
 	const cycleInterval = Math.round(Math.max(50, interval) * multiplier);
 	useNumberCycle({
@@ -248,39 +303,49 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 		random,
 		running: phase === "starting" || phase === "running" || phase === "settling",
 		valueRef,
+		excludedRef: noRepeat ? drawnRef : void 0,
 		onTick
 	});
+	const remaining = noRepeat ? Math.max(0, totalCandidates - drawnCount) : totalCandidates;
 	const ctxValue = (0, react.useMemo)(() => ({
 		phase,
 		step,
-		displayed,
+		displayed: displayedValue,
 		cycleInterval,
 		inertia,
 		hasItems,
 		initialIndex,
 		initialValue,
 		finalValue,
+		noRepeat,
+		exhausted,
+		remaining,
 		valueRef,
 		displayValue,
 		subscribe,
-		start,
+		start: guardedStart,
 		freeze,
-		reset
+		reset,
+		resetHistory
 	}), [
 		phase,
 		step,
-		displayed,
+		displayedValue,
 		cycleInterval,
 		inertia,
 		hasItems,
 		initialIndex,
 		initialValue,
 		finalValue,
+		noRepeat,
+		exhausted,
+		remaining,
 		displayValue,
 		subscribe,
-		start,
+		guardedStart,
 		freeze,
-		reset
+		reset,
+		resetHistory
 	]);
 	const selectionState = phase === "idle" ? "idle" : phase === "frozen" ? "frozen" : "running";
 	return (0, react.createElement)(as, {
@@ -297,6 +362,17 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 }
 //#endregion
 //#region src/components/RafflePick/RafflePickValue.tsx
+const SR_ONLY_STYLE = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
 function RafflePickValue({ animation = "roll", className, style, as = "span" }) {
 	const { phase, step, displayed, cycleInterval, valueRef, displayValue, subscribe } = useRaffleContext("RafflePick.Value");
 	const nodeRef = (0, react.useRef)(null);
@@ -316,7 +392,7 @@ function RafflePickValue({ animation = "roll", className, style, as = "span" })
 	(0, react.useLayoutEffect)(() => {
 		if (running) writeNode(valueRef.current);
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(as, {
 		ref: nodeRef,
 		className: (0, react.useMemo)(() => joinClassNames("rrp-value", className), [className]),
 		"data-animation": animation,
@@ -327,16 +403,23 @@ function RafflePickValue({ animation = "roll", className, style, as = "span" })
 			...style,
 			["--rrp-tick"]: `${cycleInterval}ms`
 		}), [style, cycleInterval]),
+		"aria-hidden": "true",
 		children: displayed
-	});
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "status",
+		"aria-live": "polite",
+		style: SR_ONLY_STYLE,
+		children: phase === "frozen" ? String(displayed) : ""
+	})] });
 }
 //#endregion
 //#region src/components/RafflePick/RafflePickButton.tsx
-function RafflePickButton({ className, style, children, startLabel, stopLabel, waitLabel }) {
-	const { phase, start, freeze, reset } = useRaffleContext("RafflePick.Button");
+function RafflePickButton({ className, style, children, startLabel, stopLabel, waitLabel, disabled }) {
+	const { phase, exhausted, start, freeze, reset } = useRaffleContext("RafflePick.Button");
 	const running = phase === "starting" || phase === "running" || phase === "settling";
+	const isDisabled = disabled || phase === "settling" || exhausted;
 	const handleClick = (0, react.useCallback)(() => {
-		if (phase === "settling") return;
+		if (isDisabled) return;
 		if (running) {
 			freeze();
 			return;
@@ -344,7 +427,7 @@ function RafflePickButton({ className, style, children, startLabel, stopLabel, w
 		reset();
 		start();
 	}, [
-		phase,
+		isDisabled,
 		running,
 		freeze,
 		reset,
@@ -358,7 +441,7 @@ function RafflePickButton({ className, style, children, startLabel, stopLabel, w
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		className: cls,
 		style,
-		disabled: phase === "settling",
+		disabled: isDisabled,
 		onClick: handleClick,
 		"data-phase": phase,
 		children: label
@@ -395,33 +478,52 @@ function CountdownRunning({ seconds, className, style, children }) {
 		...style,
 		["--rrp-countdown"]: `${seconds}s`
 	}), [style, seconds]);
-	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	const srAnnouncement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "status",
+		style: {
+			position: "absolute",
+			width: 1,
+			height: 1,
+			padding: 0,
+			margin: -1,
+			overflow: "hidden",
+			clip: "rect(0, 0, 0, 0)",
+			whiteSpace: "nowrap",
+			border: 0
+		},
+		children: `${seconds}-second countdown started`
+	});
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cls,
 		style: mergedStyle,
-		"aria-hidden": "true",
-		children: children(remaining)
+		children: [srAnnouncement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			children: children(remaining)
+		})]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cls,
 		style: mergedStyle,
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-			className: "rrp-countdown__svg",
-			viewBox: "0 0 36 36",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-				className: "rrp-countdown__track",
-				cx: "18",
-				cy: "18",
-				r: "16"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-				className: "rrp-countdown__bar",
-				cx: "18",
-				cy: "18",
-				r: "16"
+		children: [srAnnouncement, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: "rrp-countdown__svg",
+				viewBox: "0 0 36 36",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "rrp-countdown__track",
+					cx: "18",
+					cy: "18",
+					r: "16"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "rrp-countdown__bar",
+					cx: "18",
+					cy: "18",
+					r: "16"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "rrp-countdown__label",
+				children: remaining
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "rrp-countdown__label",
-			children: remaining
 		})]
 	});
 }
@@ -432,10 +534,14 @@ const SLOT_BASE_CSS = `
 .rrp-slot{display:inline-block;position:relative;overflow:hidden;vertical-align:baseline}
 .rrp-slot__col{position:absolute;top:0;left:0;right:0;height:300%;transform:translate3d(0,-33.3333%,0);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite;will-change:transform}
 .rrp-slot__cell{height:33.3333%;display:grid;place-items:center;padding:0;margin:0;box-sizing:border-box;text-align:center}
-.rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translate3d(0,-33.3333%,0)}
+.rrp-slot[data-stopped] .rrp-slot__col{animation:rrp-slot-settle 320ms cubic-bezier(0.2,1.4,0.4,1) forwards}
 @keyframes rrp-slot-reel{from{transform:translate3d(0,-33.3333%,0)}to{transform:translate3d(0,-66.6666%,0)}}
+@keyframes rrp-slot-settle{0%{transform:translate3d(0,-38%,0)}60%{transform:translate3d(0,-31%,0)}100%{transform:translate3d(0,-33.3333%,0)}}
+@media (prefers-reduced-motion: reduce) {
+  .rrp-slot__col { animation: none !important; }
+}
 `;
-const SLOT_STYLES_VERSION = "4";
+const SLOT_STYLES_VERSION = "5";
 const injectSlotStyles = () => {
 	if (typeof document === "undefined") return;
 	const existing = document.querySelector("style[data-rrp-slot-base]");
@@ -460,7 +566,7 @@ const makeRefs = () => ({
 	stopped: false
 });
 function RafflePickSlots({ length = 3, chars = "0123456789", spinInterval = 80, staggerMs = 220, className, slotClassName, style, slotStyle, onResult }) {
-	injectSlotStyles();
+	(0, react.useEffect)(injectSlotStyles, []);
 	const { phase, initialValue, finalValue } = useRaffleContext("RafflePick.Slots");
 	const initialChars = (0, react.useMemo)(() => {
 		const seed = typeof initialValue === "string" ? initialValue : "";

package/dist/index.d.cts

@@ -6,21 +6,48 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 type AnimationType = 'roll' | 'fade' | 'blur' | 'reel';
 type RafflePickValue$1 = number | string;
 interface RafflePickRootProps {
+  /**
+   * Item pool to cycle through (names, tickets, anything). Switches the
+   * component to "items mode" — `min`/`max` are ignored. An empty array
+   * (`[]`, as opposed to `undefined`) is treated as "no items" and falls
+   * back to the numeric `min`/`max` range.
+   */
   items?: string[];
+  /** Range start in numeric mode. Ignored when `items` is set. */
   min?: number;
+  /** Range end in numeric mode. Ignored when `items` is set. */
   max?: number;
+  /** Tick speed in ms. Clamped to a minimum of 50. */
   interval?: number;
+  /** Pick the next tick value at random instead of incrementing sequentially. */
   random?: boolean;
+  /** Soft-start / soft-stop ramp (`starting`/`settling` phases) instead of an instant flip. */
   inertia?: boolean;
+  /** Begin cycling on mount. Set `false` to wait for `<RafflePick.Button>`/`start()`. */
   autoStart?: boolean;
+  /**
+   * Exclude previously frozen values from future rounds within this mounted
+   * instance — no duplicate winners across sequential draws. Default `true`.
+   * Set `false` to allow the same value/entry to be picked again. History is
+   * cleared on unmount (or via `resetHistory()` from `useRaffleContext()`) —
+   * remount with a new `key` for a fresh no-repeat pool.
+   */
+  noRepeat?: boolean;
   /** Value shown before first run. Number in min/max mode, string in items mode. */
   initialValue?: RafflePickValue$1;
   /** When set, settle always lands on this value while cycle still appears random. */
   finalValue?: RafflePickValue$1;
+  /** Fires once per round, when the phase settles to `frozen`. */
   onSelect?: (value: RafflePickValue$1) => void;
+  /** Fires when `start()`/`<RafflePick.Button>` is used but `noRepeat` has exhausted the pool. */
+  onExhausted?: () => void;
+  /** Wrapper element/component. Default `'div'`. */
   as?: ElementType;
+  /** Wrapper class. */
   className?: string;
+  /** Wrapper inline style. */
   style?: CSSProperties;
+  /** Compound sub-components: `<RafflePick.Value>`, `.Button`, `.Countdown`, `.Slots`. */
   children?: ReactNode;
 }
 interface RafflePickValueProps {
@@ -40,6 +67,8 @@ interface RafflePickButtonProps {
   stopLabel?: ReactNode;
   /** Label while settling (button disabled). */
   waitLabel?: ReactNode;
+  /** External disable (e.g. form not valid). Always disabled while settling regardless. */
+  disabled?: boolean;
 }
 interface RafflePickSlotsProps {
   /** Number of slots. */
@@ -75,9 +104,11 @@ declare function RafflePickRoot({
   random,
   inertia,
   autoStart,
+  noRepeat,
   initialValue,
   finalValue,
   onSelect,
+  onExhausted,
   as,
   className,
   style,
@@ -99,7 +130,8 @@ declare function RafflePickButton({
   children,
   startLabel,
   stopLabel,
-  waitLabel
+  waitLabel,
+  disabled
 }: RafflePickButtonProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/RafflePick/RafflePickCountdown.d.ts
@@ -137,12 +169,20 @@ interface RaffleContextValue {
   initialIndex: number;
   initialValue?: RafflePickValue$1;
   finalValue?: RafflePickValue$1;
+  /** Whether `noRepeat` is enabled for this round. */
+  noRepeat: boolean;
+  /** `noRepeat` pool has no candidates left — `start()` is a no-op until `resetHistory()`. */
+  exhausted: boolean;
+  /** Candidates left to draw. Equals the full pool size when `noRepeat` is off. */
+  remaining: number;
   valueRef: RefObject<number>;
   displayValue: (index: number) => RafflePickValue$1;
   subscribe: (fn: (value: number) => void) => () => void;
   start: () => void;
   freeze: () => void;
   reset: () => void;
+  /** Clears the `noRepeat` history so previously drawn values can appear again. */
+  resetHistory: () => void;
 }
 declare const RaffleContext: _$react.Context<RaffleContextValue | null>;
 declare const useRaffleContext: (componentName: string) => RaffleContextValue;
@@ -156,4 +196,4 @@ type RafflePickCompound = typeof RafflePickRoot & {
 };
 declare const RafflePick: RafflePickCompound;
 //#endregion
-export { type AnimationType, RaffleContext, RafflePick, RafflePickButton, type RafflePickButtonProps, RafflePickCountdown, type RafflePickCountdownProps, type RafflePickRootProps, RafflePickSlots, type RafflePickSlotsProps, RafflePickValue, type RafflePickValueProps, type RafflePickValue$1 as RafflePickValueType, useRaffleContext };
+export { type AnimationType, RaffleContext, type RaffleContextValue, RafflePick, RafflePickButton, type RafflePickButtonProps, RafflePickCountdown, type RafflePickCountdownProps, type RafflePickPhase, type RafflePickRootProps, RafflePickSlots, type RafflePickSlotsProps, RafflePickValue, type RafflePickValueProps, type RafflePickValue$1 as RafflePickValueType, useRaffleContext };

package/dist/index.d.mts

@@ -6,21 +6,48 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 type AnimationType = 'roll' | 'fade' | 'blur' | 'reel';
 type RafflePickValue$1 = number | string;
 interface RafflePickRootProps {
+  /**
+   * Item pool to cycle through (names, tickets, anything). Switches the
+   * component to "items mode" — `min`/`max` are ignored. An empty array
+   * (`[]`, as opposed to `undefined`) is treated as "no items" and falls
+   * back to the numeric `min`/`max` range.
+   */
   items?: string[];
+  /** Range start in numeric mode. Ignored when `items` is set. */
   min?: number;
+  /** Range end in numeric mode. Ignored when `items` is set. */
   max?: number;
+  /** Tick speed in ms. Clamped to a minimum of 50. */
   interval?: number;
+  /** Pick the next tick value at random instead of incrementing sequentially. */
   random?: boolean;
+  /** Soft-start / soft-stop ramp (`starting`/`settling` phases) instead of an instant flip. */
   inertia?: boolean;
+  /** Begin cycling on mount. Set `false` to wait for `<RafflePick.Button>`/`start()`. */
   autoStart?: boolean;
+  /**
+   * Exclude previously frozen values from future rounds within this mounted
+   * instance — no duplicate winners across sequential draws. Default `true`.
+   * Set `false` to allow the same value/entry to be picked again. History is
+   * cleared on unmount (or via `resetHistory()` from `useRaffleContext()`) —
+   * remount with a new `key` for a fresh no-repeat pool.
+   */
+  noRepeat?: boolean;
   /** Value shown before first run. Number in min/max mode, string in items mode. */
   initialValue?: RafflePickValue$1;
   /** When set, settle always lands on this value while cycle still appears random. */
   finalValue?: RafflePickValue$1;
+  /** Fires once per round, when the phase settles to `frozen`. */
   onSelect?: (value: RafflePickValue$1) => void;
+  /** Fires when `start()`/`<RafflePick.Button>` is used but `noRepeat` has exhausted the pool. */
+  onExhausted?: () => void;
+  /** Wrapper element/component. Default `'div'`. */
   as?: ElementType;
+  /** Wrapper class. */
   className?: string;
+  /** Wrapper inline style. */
   style?: CSSProperties;
+  /** Compound sub-components: `<RafflePick.Value>`, `.Button`, `.Countdown`, `.Slots`. */
   children?: ReactNode;
 }
 interface RafflePickValueProps {
@@ -40,6 +67,8 @@ interface RafflePickButtonProps {
   stopLabel?: ReactNode;
   /** Label while settling (button disabled). */
   waitLabel?: ReactNode;
+  /** External disable (e.g. form not valid). Always disabled while settling regardless. */
+  disabled?: boolean;
 }
 interface RafflePickSlotsProps {
   /** Number of slots. */
@@ -75,9 +104,11 @@ declare function RafflePickRoot({
   random,
   inertia,
   autoStart,
+  noRepeat,
   initialValue,
   finalValue,
   onSelect,
+  onExhausted,
   as,
   className,
   style,
@@ -99,7 +130,8 @@ declare function RafflePickButton({
   children,
   startLabel,
   stopLabel,
-  waitLabel
+  waitLabel,
+  disabled
 }: RafflePickButtonProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/RafflePick/RafflePickCountdown.d.ts
@@ -137,12 +169,20 @@ interface RaffleContextValue {
   initialIndex: number;
   initialValue?: RafflePickValue$1;
   finalValue?: RafflePickValue$1;
+  /** Whether `noRepeat` is enabled for this round. */
+  noRepeat: boolean;
+  /** `noRepeat` pool has no candidates left — `start()` is a no-op until `resetHistory()`. */
+  exhausted: boolean;
+  /** Candidates left to draw. Equals the full pool size when `noRepeat` is off. */
+  remaining: number;
   valueRef: RefObject<number>;
   displayValue: (index: number) => RafflePickValue$1;
   subscribe: (fn: (value: number) => void) => () => void;
   start: () => void;
   freeze: () => void;
   reset: () => void;
+  /** Clears the `noRepeat` history so previously drawn values can appear again. */
+  resetHistory: () => void;
 }
 declare const RaffleContext: _$react.Context<RaffleContextValue | null>;
 declare const useRaffleContext: (componentName: string) => RaffleContextValue;
@@ -156,4 +196,4 @@ type RafflePickCompound = typeof RafflePickRoot & {
 };
 declare const RafflePick: RafflePickCompound;
 //#endregion
-export { type AnimationType, RaffleContext, RafflePick, RafflePickButton, type RafflePickButtonProps, RafflePickCountdown, type RafflePickCountdownProps, type RafflePickRootProps, RafflePickSlots, type RafflePickSlotsProps, RafflePickValue, type RafflePickValueProps, type RafflePickValue$1 as RafflePickValueType, useRaffleContext };
+export { type AnimationType, RaffleContext, type RaffleContextValue, RafflePick, RafflePickButton, type RafflePickButtonProps, RafflePickCountdown, type RafflePickCountdownProps, type RafflePickPhase, type RafflePickRootProps, RafflePickSlots, type RafflePickSlotsProps, RafflePickValue, type RafflePickValueProps, type RafflePickValue$1 as RafflePickValueType, useRaffleContext };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/utils/get-random.ts
 const getRandom = (min, max) => {
 	min = Math.ceil(min);
@@ -8,7 +8,7 @@ const getRandom = (min, max) => {
 };
 //#endregion
 //#region src/hooks/useNumberCycle.ts
-const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick }) => {
+const useNumberCycle = ({ min, max, interval, random, running, valueRef, excludedRef, onTick }) => {
 	const onTickRef = useRef(onTick);
 	useEffect(() => {
 		onTickRef.current = onTick;
@@ -17,7 +17,24 @@ const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick
 		if (!running) return;
 		const id = setInterval(() => {
 			const cur = valueRef.current;
-			const next = random ? getRandom(min, max) : cur >= max ? min : cur + 1;
+			const excluded = excludedRef?.current;
+			const total = max - min + 1;
+			let next;
+			if (excluded && excluded.size > 0 && excluded.size < total) if (random) {
+				next = getRandom(min, max);
+				let attempts = 0;
+				while (excluded.has(next) && attempts < 20) {
+					next = getRandom(min, max);
+					attempts++;
+				}
+				while (excluded.has(next)) next = next >= max ? min : next + 1;
+			} else {
+				next = cur;
+				do
+					next = next >= max ? min : next + 1;
+				while (excluded.has(next));
+			}
+			else next = random ? getRandom(min, max) : cur >= max ? min : cur + 1;
 			valueRef.current = next;
 			onTickRef.current?.(next);
 		}, interval);
@@ -28,7 +45,8 @@ const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick
 		min,
 		max,
 		random,
-		valueRef
+		valueRef,
+		excludedRef
 	]);
 	return valueRef;
 };
@@ -171,11 +189,12 @@ const useRaffleContext = (componentName) => {
 };
 //#endregion
 //#region src/components/RafflePick/RafflePick.tsx
-function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = true, inertia = false, autoStart = true, initialValue, finalValue, onSelect, as = "div", className, style, children }) {
+function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = true, inertia = false, autoStart = true, noRepeat = true, initialValue, finalValue, onSelect, onExhausted, as = "div", className, style, children }) {
 	const itemCount = items?.length ?? 0;
 	const hasItems = itemCount > 0;
 	const cycleMin = hasItems ? 0 : min;
 	const cycleMax = hasItems ? itemCount - 1 : max;
+	const totalCandidates = cycleMax - cycleMin + 1;
 	const initialPhase = autoStart ? inertia ? "starting" : "running" : "idle";
 	const itemsRef = useRef(items);
 	useEffect(() => {
@@ -194,14 +213,18 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 		}
 		return typeof value === "number" ? value : void 0;
 	}, []);
-	const initialIndex = (() => {
+	const initialIndex = useMemo(() => {
 		if (initialValue === void 0) return cycleMin;
 		if (items && items.length > 0) {
 			const i = items.indexOf(String(initialValue));
 			return i >= 0 ? i : cycleMin;
 		}
 		return typeof initialValue === "number" ? initialValue : cycleMin;
-	})();
+	}, [
+		initialValue,
+		items,
+		cycleMin
+	]);
 	const [displayed, setDisplayed] = useState(() => {
 		if (initialValue !== void 0) {
 			const its = items;
@@ -227,17 +250,49 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 	useEffect(() => {
 		finalValueRef.current = finalValue;
 	}, [finalValue]);
+	const drawnRef = useRef(/* @__PURE__ */ new Set());
+	const [drawnCount, setDrawnCount] = useState(0);
+	const onExhaustedRef = useRef(onExhausted);
+	useEffect(() => {
+		onExhaustedRef.current = onExhausted;
+	}, [onExhausted]);
 	const { phase, step, start, freeze, reset } = useRafflePhase(inertia, initialPhase, useCallback(() => {
 		const forced = valueToIndex(finalValueRef.current);
 		if (forced !== void 0) valueRef.current = forced;
+		if (noRepeat) {
+			drawnRef.current.add(valueRef.current);
+			setDrawnCount(drawnRef.current.size);
+		}
 		const v = displayValue(valueRef.current);
 		setDisplayed(v);
 		onSelect?.(v);
 	}, [
 		displayValue,
 		onSelect,
-		valueToIndex
+		valueToIndex,
+		noRepeat
 	]));
+	const exhausted = noRepeat && drawnCount >= totalCandidates;
+	const guardedStart = useCallback(() => {
+		if (noRepeat && drawnRef.current.size >= totalCandidates) {
+			onExhaustedRef.current?.();
+			return;
+		}
+		start();
+	}, [
+		start,
+		noRepeat,
+		totalCandidates
+	]);
+	const resetHistory = useCallback(() => {
+		drawnRef.current.clear();
+		setDrawnCount(0);
+	}, []);
+	useEffect(() => {
+		if (phase !== "idle") return;
+		valueRef.current = initialIndex;
+	}, [phase, initialIndex]);
+	const displayedValue = phase === "idle" ? items && items.length > 0 ? items[initialIndex] ?? items[cycleMin] : initialIndex : displayed;
 	const multiplier = getInertiaMultiplier(phase, step, inertia);
 	const cycleInterval = Math.round(Math.max(50, interval) * multiplier);
 	useNumberCycle({
@@ -247,39 +302,49 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 		random,
 		running: phase === "starting" || phase === "running" || phase === "settling",
 		valueRef,
+		excludedRef: noRepeat ? drawnRef : void 0,
 		onTick
 	});
+	const remaining = noRepeat ? Math.max(0, totalCandidates - drawnCount) : totalCandidates;
 	const ctxValue = useMemo(() => ({
 		phase,
 		step,
-		displayed,
+		displayed: displayedValue,
 		cycleInterval,
 		inertia,
 		hasItems,
 		initialIndex,
 		initialValue,
 		finalValue,
+		noRepeat,
+		exhausted,
+		remaining,
 		valueRef,
 		displayValue,
 		subscribe,
-		start,
+		start: guardedStart,
 		freeze,
-		reset
+		reset,
+		resetHistory
 	}), [
 		phase,
 		step,
-		displayed,
+		displayedValue,
 		cycleInterval,
 		inertia,
 		hasItems,
 		initialIndex,
 		initialValue,
 		finalValue,
+		noRepeat,
+		exhausted,
+		remaining,
 		displayValue,
 		subscribe,
-		start,
+		guardedStart,
 		freeze,
-		reset
+		reset,
+		resetHistory
 	]);
 	const selectionState = phase === "idle" ? "idle" : phase === "frozen" ? "frozen" : "running";
 	return createElement(as, {
@@ -296,6 +361,17 @@ function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = tr
 }
 //#endregion
 //#region src/components/RafflePick/RafflePickValue.tsx
+const SR_ONLY_STYLE = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
 function RafflePickValue({ animation = "roll", className, style, as = "span" }) {
 	const { phase, step, displayed, cycleInterval, valueRef, displayValue, subscribe } = useRaffleContext("RafflePick.Value");
 	const nodeRef = useRef(null);
@@ -315,7 +391,7 @@ function RafflePickValue({ animation = "roll", className, style, as = "span" })
 	useLayoutEffect(() => {
 		if (running) writeNode(valueRef.current);
 	});
-	return /* @__PURE__ */ jsx(as, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(as, {
 		ref: nodeRef,
 		className: useMemo(() => joinClassNames("rrp-value", className), [className]),
 		"data-animation": animation,
@@ -326,16 +402,23 @@ function RafflePickValue({ animation = "roll", className, style, as = "span" })
 			...style,
 			["--rrp-tick"]: `${cycleInterval}ms`
 		}), [style, cycleInterval]),
+		"aria-hidden": "true",
 		children: displayed
-	});
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		style: SR_ONLY_STYLE,
+		children: phase === "frozen" ? String(displayed) : ""
+	})] });
 }
 //#endregion
 //#region src/components/RafflePick/RafflePickButton.tsx
-function RafflePickButton({ className, style, children, startLabel, stopLabel, waitLabel }) {
-	const { phase, start, freeze, reset } = useRaffleContext("RafflePick.Button");
+function RafflePickButton({ className, style, children, startLabel, stopLabel, waitLabel, disabled }) {
+	const { phase, exhausted, start, freeze, reset } = useRaffleContext("RafflePick.Button");
 	const running = phase === "starting" || phase === "running" || phase === "settling";
+	const isDisabled = disabled || phase === "settling" || exhausted;
 	const handleClick = useCallback(() => {
-		if (phase === "settling") return;
+		if (isDisabled) return;
 		if (running) {
 			freeze();
 			return;
@@ -343,7 +426,7 @@ function RafflePickButton({ className, style, children, startLabel, stopLabel, w
 		reset();
 		start();
 	}, [
-		phase,
+		isDisabled,
 		running,
 		freeze,
 		reset,
@@ -357,7 +440,7 @@ function RafflePickButton({ className, style, children, startLabel, stopLabel, w
 	return /* @__PURE__ */ jsx("button", {
 		className: cls,
 		style,
-		disabled: phase === "settling",
+		disabled: isDisabled,
 		onClick: handleClick,
 		"data-phase": phase,
 		children: label
@@ -394,33 +477,52 @@ function CountdownRunning({ seconds, className, style, children }) {
 		...style,
 		["--rrp-countdown"]: `${seconds}s`
 	}), [style, seconds]);
-	if (children) return /* @__PURE__ */ jsx("span", {
+	const srAnnouncement = /* @__PURE__ */ jsx("span", {
+		role: "status",
+		style: {
+			position: "absolute",
+			width: 1,
+			height: 1,
+			padding: 0,
+			margin: -1,
+			overflow: "hidden",
+			clip: "rect(0, 0, 0, 0)",
+			whiteSpace: "nowrap",
+			border: 0
+		},
+		children: `${seconds}-second countdown started`
+	});
+	if (children) return /* @__PURE__ */ jsxs("span", {
 		className: cls,
 		style: mergedStyle,
-		"aria-hidden": "true",
-		children: children(remaining)
+		children: [srAnnouncement, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: children(remaining)
+		})]
 	});
 	return /* @__PURE__ */ jsxs("span", {
 		className: cls,
 		style: mergedStyle,
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ jsxs("svg", {
-			className: "rrp-countdown__svg",
-			viewBox: "0 0 36 36",
-			children: [/* @__PURE__ */ jsx("circle", {
-				className: "rrp-countdown__track",
-				cx: "18",
-				cy: "18",
-				r: "16"
-			}), /* @__PURE__ */ jsx("circle", {
-				className: "rrp-countdown__bar",
-				cx: "18",
-				cy: "18",
-				r: "16"
+		children: [srAnnouncement, /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				className: "rrp-countdown__svg",
+				viewBox: "0 0 36 36",
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: "rrp-countdown__track",
+					cx: "18",
+					cy: "18",
+					r: "16"
+				}), /* @__PURE__ */ jsx("circle", {
+					className: "rrp-countdown__bar",
+					cx: "18",
+					cy: "18",
+					r: "16"
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "rrp-countdown__label",
+				children: remaining
 			})]
-		}), /* @__PURE__ */ jsx("span", {
-			className: "rrp-countdown__label",
-			children: remaining
 		})]
 	});
 }
@@ -431,10 +533,14 @@ const SLOT_BASE_CSS = `
 .rrp-slot{display:inline-block;position:relative;overflow:hidden;vertical-align:baseline}
 .rrp-slot__col{position:absolute;top:0;left:0;right:0;height:300%;transform:translate3d(0,-33.3333%,0);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite;will-change:transform}
 .rrp-slot__cell{height:33.3333%;display:grid;place-items:center;padding:0;margin:0;box-sizing:border-box;text-align:center}
-.rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translate3d(0,-33.3333%,0)}
+.rrp-slot[data-stopped] .rrp-slot__col{animation:rrp-slot-settle 320ms cubic-bezier(0.2,1.4,0.4,1) forwards}
 @keyframes rrp-slot-reel{from{transform:translate3d(0,-33.3333%,0)}to{transform:translate3d(0,-66.6666%,0)}}
+@keyframes rrp-slot-settle{0%{transform:translate3d(0,-38%,0)}60%{transform:translate3d(0,-31%,0)}100%{transform:translate3d(0,-33.3333%,0)}}
+@media (prefers-reduced-motion: reduce) {
+  .rrp-slot__col { animation: none !important; }
+}
 `;
-const SLOT_STYLES_VERSION = "4";
+const SLOT_STYLES_VERSION = "5";
 const injectSlotStyles = () => {
 	if (typeof document === "undefined") return;
 	const existing = document.querySelector("style[data-rrp-slot-base]");
@@ -459,7 +565,7 @@ const makeRefs = () => ({
 	stopped: false
 });
 function RafflePickSlots({ length = 3, chars = "0123456789", spinInterval = 80, staggerMs = 220, className, slotClassName, style, slotStyle, onResult }) {
-	injectSlotStyles();
+	useEffect(injectSlotStyles, []);
 	const { phase, initialValue, finalValue } = useRaffleContext("RafflePick.Slots");
 	const initialChars = useMemo(() => {
 		const seed = typeof initialValue === "string" ? initialValue : "";

package/dist/styles.css

@@ -27,13 +27,28 @@
   box-sizing: border-box;
   text-align: center;
 }
+/* Stop = quick decelerate-and-settle bounce, not an instant snap. */
 .rrp-slot[data-stopped] .rrp-slot__col {
-  animation: none;
-  transform: translate3d(0, -33.3333%, 0);
+  animation: rrp-slot-settle 320ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
 }
 @keyframes rrp-slot-reel {
-  from { transform: translate3d(0, -33.3333%, 0); }
-  to   { transform: translate3d(0, -66.6666%, 0); }
+  from {
+    transform: translate3d(0, -33.3333%, 0);
+  }
+  to {
+    transform: translate3d(0, -66.6666%, 0);
+  }
+}
+@keyframes rrp-slot-settle {
+  0% {
+    transform: translate3d(0, -38%, 0);
+  }
+  60% {
+    transform: translate3d(0, -31%, 0);
+  }
+  100% {
+    transform: translate3d(0, -33.3333%, 0);
+  }
 }
 
 /* Value animations: opt-in via <RafflePick.Value animation="..." /> */
@@ -41,10 +56,10 @@
   display: inline-block;
 }
 .rrp-value[data-animation='roll'][data-phase='running'] {
-  animation: rrp-value-roll var(--rrp-tick, 100ms) linear;
+  animation: rrp-value-roll var(--rrp-tick, 100ms) cubic-bezier(0.22, 1, 0.36, 1);
 }
 .rrp-value[data-animation='fade'][data-phase='running'] {
-  animation: rrp-value-fade var(--rrp-tick, 100ms) linear;
+  animation: rrp-value-fade var(--rrp-tick, 100ms) cubic-bezier(0.16, 1, 0.3, 1);
 }
 .rrp-value[data-animation='blur'][data-phase='running'] {
   animation: rrp-value-blur var(--rrp-tick, 100ms) linear;
@@ -52,19 +67,68 @@
 .rrp-value[data-animation='reel'][data-phase='running'] {
   animation: rrp-value-reel var(--rrp-tick, 100ms) linear;
 }
+/* Freeze = one settle pop shared by every animation type — the "winner" beat. */
+.rrp-value[data-animation][data-phase='frozen'] {
+  animation: rrp-value-settle 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
+}
 @keyframes rrp-value-roll {
-  from { transform: translateY(-0.4em); opacity: 0.4; }
-  to   { transform: translateY(0); opacity: 1; }
+  0% {
+    transform: translateY(-0.4em);
+    opacity: 0.45;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 @keyframes rrp-value-fade {
-  from { opacity: 0.2; }
-  to   { opacity: 1; }
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @keyframes rrp-value-blur {
-  from { filter: blur(4px); }
-  to   { filter: blur(0); }
+  from {
+    filter: blur(4px);
+  }
+  to {
+    filter: blur(0);
+  }
 }
 @keyframes rrp-value-reel {
-  from { transform: translateY(-1em); opacity: 0; }
-  to   { transform: translateY(0); opacity: 1; }
+  from {
+    transform: translateY(-1em);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes rrp-value-settle {
+  0% {
+    transform: scale(0.84);
+    opacity: 0.7;
+  }
+  55% {
+    transform: scale(1.07);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Respect vestibular disorders — kill all motion, keep instant value swaps.
+   !important: these must always win, regardless of the specificity of
+   whatever running/settle rule above (or added later) also matches. */
+@media (prefers-reduced-motion: reduce) {
+  .rrp-slot__col {
+    animation: none !important;
+  }
+  .rrp-value[data-animation] {
+    animation: none !important;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-raffle-picker",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Headless React raffle picker for giveaways, winner draws, countdowns, and slot-machine UIs.",
   "type": "module",
   "publishConfig": {