@inkra/react 0.8.0 → 0.10.0

package/dist/masonry/layout.d.ts

@@ -0,0 +1,35 @@
+export type MasonryStrategy = 'shortest' | 'sequential';
+export type MasonryDirection = 'ltr' | 'rtl';
+export interface MasonryLayoutItem {
+    key: string;
+    height: number;
+}
+export interface MasonryLayoutOptions {
+    containerWidth: number;
+    items: readonly MasonryLayoutItem[];
+    columns?: number;
+    minColumnWidth?: number;
+    maxColumns?: number;
+    columnGap?: number;
+    rowGap?: number;
+    strategy?: MasonryStrategy;
+    direction?: MasonryDirection;
+}
+export interface MasonryLayoutPosition {
+    key: string;
+    column: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MasonryLayoutResult {
+    columnCount: number;
+    columnWidth: number;
+    height: number;
+    positions: readonly MasonryLayoutPosition[];
+}
+export declare function normalizeMasonrySpacing(value: number | undefined, fallback?: number): number;
+export declare function normalizeMasonryColumnCount(value: number | undefined, fallback?: number): number;
+export declare function resolveMasonryColumnCount({ columns, containerWidth, columnGap, maxColumns, minColumnWidth, }: Pick<MasonryLayoutOptions, 'columns' | 'containerWidth' | 'columnGap' | 'maxColumns' | 'minColumnWidth'>): number;
+export declare function calculateMasonryLayout(options: MasonryLayoutOptions): MasonryLayoutResult;

package/dist/masonry/layout.js

@@ -0,0 +1,67 @@
+const DEFAULT_MIN_COLUMN_WIDTH = 240;
+const MAX_COLUMN_COUNT = 100;
+export function normalizeMasonrySpacing(value, fallback = 0) {
+    return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+export function normalizeMasonryColumnCount(value, fallback = 1) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.min(MAX_COLUMN_COUNT, Math.max(1, Math.floor(value)));
+}
+export function resolveMasonryColumnCount({ columns, containerWidth, columnGap = 0, maxColumns, minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH, }) {
+    if (columns !== undefined)
+        return normalizeMasonryColumnCount(columns);
+    const width = Number.isFinite(containerWidth) ? Math.max(0, containerWidth) : 0;
+    const gap = normalizeMasonrySpacing(columnGap);
+    const minimum = Number.isFinite(minColumnWidth) && minColumnWidth > 0
+        ? minColumnWidth
+        : DEFAULT_MIN_COLUMN_WIDTH;
+    const available = Math.max(0, width + gap);
+    const adaptive = Math.max(1, Math.floor(available / (minimum + gap)));
+    return Math.min(adaptive, normalizeMasonryColumnCount(maxColumns, MAX_COLUMN_COUNT));
+}
+export function calculateMasonryLayout(options) {
+    const containerWidth = Number.isFinite(options.containerWidth)
+        ? Math.max(0, options.containerWidth)
+        : 0;
+    const columnGap = normalizeMasonrySpacing(options.columnGap);
+    const rowGap = normalizeMasonrySpacing(options.rowGap);
+    const requestedColumnCount = resolveMasonryColumnCount({
+        columns: options.columns,
+        containerWidth,
+        columnGap,
+        maxColumns: options.maxColumns,
+        minColumnWidth: options.minColumnWidth,
+    });
+    const columnCount = options.columns === undefined && options.items.length > 0
+        ? Math.min(requestedColumnCount, options.items.length)
+        : requestedColumnCount;
+    const effectiveColumnGap = columnCount > 1
+        ? Math.min(columnGap, containerWidth / (columnCount - 1))
+        : 0;
+    const columnWidth = Math.max(0, (containerWidth - effectiveColumnGap * (columnCount - 1)) / columnCount);
+    const columnHeights = Array.from({ length: columnCount }, () => 0);
+    const strategy = options.strategy ?? 'shortest';
+    const direction = options.direction ?? 'ltr';
+    const positions = options.items.map((item, index) => {
+        let column = strategy === 'shortest' ? 0 : index % columnCount;
+        if (strategy === 'shortest') {
+            for (let candidate = 1; candidate < columnCount; candidate += 1) {
+                if (columnHeights[candidate] < columnHeights[column])
+                    column = candidate;
+            }
+        }
+        const height = Number.isFinite(item.height) ? Math.max(0, item.height) : 0;
+        const y = columnHeights[column] === 0 ? 0 : columnHeights[column] + rowGap;
+        const logicalX = column * (columnWidth + effectiveColumnGap);
+        const x = direction === 'rtl' ? containerWidth - columnWidth - logicalX : logicalX;
+        columnHeights[column] = y + height;
+        return { key: item.key, column, x, y, width: columnWidth, height };
+    });
+    return {
+        columnCount,
+        columnWidth,
+        height: Math.max(0, ...columnHeights),
+        positions,
+    };
+}

package/dist/number-ticker/RollingValue.d.ts

@@ -0,0 +1,6 @@
+import type { RollingMotionColumn } from './rolling.js';
+export declare function RollingValue({ columns, progress, direction }: {
+    columns: RollingMotionColumn[];
+    progress: number;
+    direction: 'up' | 'down';
+}): import("react").JSX.Element;

package/dist/number-ticker/RollingValue.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PencilText } from '../PencilText.js';
+import { rollMix } from './rolling.js';
+export function RollingValue({ columns, progress, direction }) {
+    return _jsx("span", { className: "inkra-number-ticker__reels", dir: "ltr", "data-direction": direction, children: columns.map(column => {
+            const width = rollMix(column.fromWidth, column.toWidth, progress);
+            return _jsx("span", { className: "inkra-number-ticker__column", "data-place": column.key, "data-digit": column.digit || undefined, "data-departing": column.target === '' || undefined, style: column.digit ? { width: `${width}ch` } : { gridTemplateColumns: `${width}fr` }, children: _jsx("span", { className: "inkra-number-ticker__column-inner", children: column.faces.map(face => _jsx("span", { className: "inkra-number-ticker__face", "data-face": face.text === column.target ? 'to' : 'from', style: { transform: column.digit ? `translateY(${rollMix(face.fromOffset, face.toOffset, progress) * 100}%)` : undefined,
+                            opacity: rollMix(face.fromOpacity, face.toOpacity, progress) }, children: _jsx(PencilText, { seed: `ticker-reel-${column.key}-${face.text}`, children: face.text }) }, face.text)) }) }, column.key);
+        }) });
+}

package/dist/number-ticker/index.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerValue } from './model.js';
+export type NumberTickerAnimation = 'count' | 'roll';
+export type NumberTickerRollDirection = 'auto' | 'up' | 'down';
 export interface NumberTickerRenderDetails {
     animating: boolean;
     formattedValue: string;
@@ -19,6 +21,8 @@ export interface NumberTickerProps extends Omit<ComponentPropsWithoutRef<'span'>
     renderValue?: (value: NumberTickerValue, details: NumberTickerRenderDetails) => ReactNode;
     getValueLabel?: (value: NumberTickerValue, formattedValue: string) => string;
     animate?: boolean;
+    animation?: NumberTickerAnimation;
+    rollDirection?: NumberTickerRollDirection;
     duration?: number;
     easing?: (progress: number) => number;
     showDelta?: boolean;

package/dist/number-ticker/index.js

@@ -5,6 +5,8 @@ import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { canAnimateTickerValue, createNumberFormatter, createTickerFormatter, easeOutCubic, formatDerivedTickerDelta, formatTickerValue, interpolateTickerValue, tickerValueChanged, subtractTickerValues, tickerValueKey, } from './model.js';
 import { ExactDecimal } from './precision.js';
+import { RollingValue } from './RollingValue.js';
+import { createRollingMotion, rollingTokens, sameRollingTokens } from './rolling.js';
 function usePrefersReducedMotion() {
     const [reduced, setReduced] = useState(false);
     useBrowserLayoutEffect(() => {
@@ -24,7 +26,7 @@ function lettering(content, seed) {
 function accessibleAffix(content) {
     return typeof content === 'string' || typeof content === 'number' ? String(content) : '';
 }
-export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale: localeProp, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+export const NumberTicker = forwardRef(function NumberTicker({ animate = true, animation = 'count', className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale: localeProp, prefix, renderDelta, renderValue, rollDirection = 'auto', showDelta = false, suffix, value, ...props }, forwardedRef) {
     const { locale: inheritedLocale } = useInkraLocale();
     const locale = localeProp ?? inheritedLocale;
     const rootRef = useRef(null);
@@ -36,6 +38,9 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     const [announcedValue, setAnnouncedValue] = useState(value);
     const [animating, setAnimating] = useState(false);
     const [delta, setDelta] = useState(null);
+    const [roll, setRoll] = useState(null);
+    const [rollProgress, setRollProgress] = useState(1);
+    const rollFrameRef = useRef(null);
     const reducedMotion = usePrefersReducedMotion();
     const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
     const formatOptionsKey = JSON.stringify(formatOptions ?? {});
@@ -45,6 +50,14 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     const deltaFormatter = useMemo(() => createTickerFormatter(locale, deltaFormatOptions ?? formatOptions, compact, compactOptions), [localeKey, deltaFormatOptionsKey, compact, compactOptionsKey]);
     const announcementFormatter = useMemo(() => createNumberFormatter(locale, compact ? { ...formatOptions, notation: 'standard' } : formatOptions), [localeKey, formatOptionsKey, compact]);
     useImperativeHandle(forwardedRef, () => rootRef.current);
+    const rollRequested = animation === 'roll' && !renderValue;
+    const finalTokens = useMemo(() => rollRequested ? rollingTokens(formatter.formatToParts(value)) : [], [formatter, value, rollRequested]);
+    // Keep exact large values readable without creating thousands of painted reels.
+    const useRoll = rollRequested && finalTokens.length <= 128;
+    const settledTokensRef = useRef(finalTokens);
+    const previousFormatterRef = useRef(formatter);
+    const previousUseRollRef = useRef(useRoll);
+    const columns = useMemo(() => roll?.columns ?? createRollingMotion(finalTokens, finalTokens, 'up'), [roll, finalTokens]);
     useBrowserLayoutEffect(() => {
         const previousTarget = targetRef.current;
         targetRef.current = value;
@@ -72,22 +85,53 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 && typeof window.matchMedia === 'function'
                 && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
         const from = displayedRef.current;
-        if (!animate || reduceImmediately || !canAnimateTickerValue(from, value, duration)) {
+        const formatChanged = previousFormatterRef.current !== formatter;
+        previousFormatterRef.current = formatter;
+        const modeChanged = previousUseRollRef.current !== useRoll;
+        previousUseRollRef.current = useRoll;
+        if (!animate || reduceImmediately || formatChanged || modeChanged
+            || (useRoll && !rollFrameRef.current && sameRollingTokens(settledTokensRef.current, finalTokens))
+            || (rollRequested && (!useRoll || settledTokensRef.current.length > 128))
+            || !canAnimateTickerValue(from, value, duration)) {
             displayedRef.current = value;
             setDisplayedValue(value);
             setAnnouncedValue(value);
             setAnimating(false);
+            setRoll(null);
+            setRollProgress(1);
+            settledTokensRef.current = finalTokens;
+            rollFrameRef.current = null;
             return undefined;
         }
+        if (useRoll) {
+            const direction = rollDirection === 'auto'
+                ? (new ExactDecimal(String(value)).gt(String(from)) ? 'up' : 'down') : rollDirection;
+            const nextColumns = createRollingMotion(settledTokensRef.current, finalTokens, direction, rollFrameRef.current ?? undefined);
+            setRoll({ columns: nextColumns, direction });
+            setRollProgress(0);
+            rollFrameRef.current = { columns: nextColumns, progress: 0 };
+        }
+        else {
+            setRoll(null);
+            rollFrameRef.current = null;
+        }
         let startTime = null;
         setAnimating(true);
         const tick = (time) => {
             if (startTime === null)
                 startTime = time;
             const progress = Math.min(1, Math.max(0, (time - startTime) / duration));
-            const next = interpolateTickerValue(from, value, easing(progress));
+            const eased = easing(progress);
+            const bounded = Number.isFinite(eased) ? Math.min(1, Math.max(0, eased)) : progress;
+            const next = interpolateTickerValue(from, value, bounded);
             displayedRef.current = next;
-            setDisplayedValue(next);
+            if (useRoll) {
+                setRollProgress(bounded);
+                if (rollFrameRef.current)
+                    rollFrameRef.current.progress = bounded;
+            }
+            else
+                setDisplayedValue(next);
             if (progress < 1) {
                 frameRef.current = requestAnimationFrame(tick);
             }
@@ -97,6 +141,10 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 setDisplayedValue(value);
                 setAnnouncedValue(value);
                 setAnimating(false);
+                setRoll(null);
+                setRollProgress(1);
+                settledTokensRef.current = finalTokens;
+                rollFrameRef.current = null;
             }
         };
         frameRef.current = requestAnimationFrame(tick);
@@ -106,7 +154,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 frameRef.current = null;
             }
         };
-    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value]);
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, rollRequested, rollDirection, formatter]);
     useEffect(() => () => {
         if (frameRef.current !== null)
             cancelAnimationFrame(frameRef.current);
@@ -120,7 +168,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
         .filter(Boolean).join(' ');
     const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
     const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
-        ?? (animating
+        ?? (useRoll ? _jsx(RollingValue, { columns: columns, progress: roll ? rollProgress : 1, direction: roll?.direction ?? 'up' }) : animating
             ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
             : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
     const deltaContent = delta === null ? null : (() => {
@@ -133,6 +181,6 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     })();
     const classes = ['inkra-number-ticker', animating && 'inkra-number-ticker--animating', className]
         .filter(Boolean).join(' ');
-    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
+    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, "data-animation": animation, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
 });
 export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, numberTickerUnits, } from './model.js';

package/dist/number-ticker/rolling.d.ts

@@ -0,0 +1,35 @@
+export interface RollingToken {
+    key: string;
+    text: string;
+    digit: boolean;
+}
+export declare function sameRollingTokens(from: readonly RollingToken[], to: readonly RollingToken[]): boolean;
+export interface RollingColumn {
+    key: string;
+    from: string;
+    to: string;
+    digit: boolean;
+}
+export interface RollingFace {
+    text: string;
+    fromOffset: number;
+    toOffset: number;
+    fromOpacity: number;
+    toOpacity: number;
+}
+export interface RollingMotionColumn {
+    key: string;
+    digit: boolean;
+    target: string;
+    fromWidth: number;
+    toWidth: number;
+    faces: RollingFace[];
+}
+export interface RollingFrame {
+    columns: RollingMotionColumn[];
+    progress: number;
+}
+export declare const rollMix: (from: number, to: number, progress: number) => number;
+export declare function createRollingMotion(from: RollingToken[], to: RollingToken[], direction: 'up' | 'down', previous?: RollingFrame): RollingMotionColumn[];
+export declare function rollingTokens(parts: Intl.NumberFormatPart[]): RollingToken[];
+export declare function rollingColumns(from: RollingToken[], to: RollingToken[]): RollingColumn[];

package/dist/number-ticker/rolling.js

@@ -0,0 +1,87 @@
+export function sameRollingTokens(from, to) {
+    return from.length === to.length && from.every((token, index) => {
+        const next = to[index];
+        return token.key === next.key && token.text === next.text && token.digit === next.digit;
+    });
+}
+export const rollMix = (from, to, progress) => from + (to - from) * progress;
+export function createRollingMotion(from, to, direction, previous) {
+    const sign = direction === 'up' ? -1 : 1;
+    const snapshot = previous?.columns.map(column => ({
+        key: column.key, digit: column.digit,
+        width: rollMix(column.fromWidth, column.toWidth, previous.progress),
+        faces: column.faces.map(face => ({
+            text: face.text,
+            offset: rollMix(face.fromOffset, face.toOffset, previous.progress),
+            opacity: rollMix(face.fromOpacity, face.toOpacity, previous.progress),
+        })).filter(face => Math.abs(face.offset) < 1 && face.opacity > 0.01),
+    })) ?? from.map(token => ({ key: token.key, digit: token.digit, width: 1, faces: [{ text: token.text, offset: 0, opacity: 1 }] }));
+    const sources = new Map(snapshot.map(column => [column.key, column]));
+    const sourceTokens = snapshot.filter(column => column.width > 0 || column.faces.length > 0)
+        .map(column => ({ key: column.key, digit: column.digit, text: column.faces[0]?.text ?? '' }));
+    return rollingColumns(sourceTokens, to).map(column => {
+        const source = sources.get(column.key);
+        const faces = [...(source?.faces ?? [])];
+        if (column.to !== '' && !faces.some(face => face.text === column.to)) {
+            faces.push({ text: column.to, offset: column.digit ? -sign : 0, opacity: column.digit ? 1 : 0 });
+        }
+        return {
+            key: column.key, digit: column.digit, target: column.to,
+            fromWidth: source?.width ?? 0, toWidth: column.to === '' ? 0 : 1,
+            // Existing faces continue from their actual offset on a rapid retarget.
+            faces: faces.map(face => ({ text: face.text, fromOffset: face.offset,
+                toOffset: face.text === column.to ? 0 : column.digit ? sign : 0,
+                fromOpacity: face.opacity, toOpacity: face.text === column.to || column.digit ? 1 : 0,
+            })),
+        };
+    });
+}
+// Align integer places from the right and fractional places from the decimal.
+// Intl parts keep signs, grouping, currency and compact units out of digit reels.
+export function rollingTokens(parts) {
+    const remaining = new Map();
+    for (const part of parts) {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            remaining.set(part.type, (remaining.get(part.type) ?? 0) + Array.from(part.value).length);
+        }
+    }
+    const occurrences = new Map();
+    return parts.flatMap((part, index) => {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            return Array.from(part.value, text => {
+                const position = (remaining.get(part.type) ?? 1) - 1;
+                remaining.set(part.type, position);
+                return { key: `${part.type}-${position}`, text, digit: true };
+            });
+        }
+        if (part.type === 'fraction') {
+            return Array.from(part.value, (text, position) => ({ key: `fraction-${position}`, text, digit: true }));
+        }
+        const identity = part.type === 'literal'
+            ? `literal-${part.value}-${parts.slice(index + 1).find(next => next.type !== 'literal')?.type ?? 'end'}`
+            : part.type;
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        const key = part.type === 'group' ? `group-${remaining.get('integer')}` : `${identity}-${occurrence}`;
+        return [{ key, text: part.value, digit: false }];
+    });
+}
+export function rollingColumns(from, to) {
+    const old = new Map(from.map(token => [token.key, token]));
+    const next = new Map(to.map(token => [token.key, token]));
+    const result = to.map(token => ({
+        key: token.key, from: old.get(token.key)?.text ?? '', to: token.text, digit: token.digit,
+    }));
+    // Departing places retain their old order until their width reaches zero.
+    for (let index = from.length - 1; index >= 0; index -= 1) {
+        const token = from[index];
+        if (next.has(token.key))
+            continue;
+        const following = from[index + 1];
+        const insertion = following ? result.findIndex(column => column.key === following.key) : -1;
+        result.splice(insertion < 0 ? result.length : insertion, 0, {
+            key: token.key, from: token.text, to: '', digit: token.digit,
+        });
+    }
+    return result;
+}

package/dist/selection/CircularSwitchVisual.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare function CircularSwitchVisual({ checked, diameter, centerIcon, centerContent, seed }: {
+    checked: boolean;
+    diameter: number;
+    centerIcon?: ReactNode;
+    centerContent?: ReactNode | ((checked: boolean) => ReactNode);
+    seed: string | number;
+}): import("react").JSX.Element;

package/dist/selection/CircularSwitchVisual.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { ProgressRing } from '../display/ProgressRing.js';
+import { useInkraLocale } from '../i18n/index.js';
+/** Animate only the clipping percentage; ProgressRing retains its full pencil texture. */
+function useSwitchArcProgress(checked) {
+    const target = checked ? 75 : 0;
+    const [progress, setProgress] = useState(target);
+    const progressRef = useRef(target);
+    const targetRef = useRef(target);
+    const frameRef = useRef(null);
+    const mediaRef = useRef(null);
+    targetRef.current = target;
+    useEffect(() => {
+        const media = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+            ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+        mediaRef.current = media;
+        const change = () => {
+            if (!media?.matches)
+                return;
+            if (frameRef.current !== null)
+                cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+            progressRef.current = targetRef.current;
+            setProgress(targetRef.current);
+        };
+        media?.addEventListener('change', change);
+        return () => {
+            media?.removeEventListener('change', change);
+            if (frameRef.current !== null)
+                cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        if (progressRef.current === target)
+            return;
+        if (mediaRef.current?.matches || typeof requestAnimationFrame !== 'function') {
+            progressRef.current = target;
+            setProgress(target);
+            return;
+        }
+        const from = progressRef.current;
+        let start;
+        const tick = (time) => {
+            frameRef.current = null;
+            if (targetRef.current !== target)
+                return;
+            start ?? (start = time);
+            const fraction = Math.min(1, Math.max(0, (time - start) / 200));
+            const eased = fraction * fraction * (3 - 2 * fraction);
+            const next = from + (target - from) * eased;
+            progressRef.current = next;
+            setProgress(next);
+            if (fraction < 1)
+                frameRef.current = requestAnimationFrame(tick);
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current !== null)
+                cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        };
+    }, [target]);
+    return progress;
+}
+export function CircularSwitchVisual({ checked, diameter, centerIcon, centerContent, seed }) {
+    const { t } = useInkraLocale();
+    const progress = useSwitchArcProgress(checked);
+    const radius = diameter / 2 - 25;
+    const content = centerContent === undefined ? t(checked ? 'switch.on' : 'switch.off') : typeof centerContent === 'function' ? centerContent(checked) : centerContent;
+    const hasIcon = centerIcon != null && typeof centerIcon !== 'boolean';
+    const hasContent = content != null && typeof content !== 'boolean';
+    const height = (radius - 7) * 2;
+    const combined = hasIcon && hasContent;
+    const iconSize = combined ? Math.min(24, Math.max(12, 16 + (diameter - 104) / 4), height - 20) : 24;
+    const lineHeight = Math.min(diameter <= 112 ? 18 : 24, height - iconSize - 6);
+    return _jsxs("span", { className: "inkra-switch__circular", "aria-hidden": "true", style: { '--inkra-circular-switch-diameter': `${diameter}px`, '--inkra-circular-switch-center-width': `${(radius - 9) * 2 + 10}px`, '--inkra-circular-switch-center-height': `${height + 6}px`, '--inkra-circular-switch-icon-size': `${iconSize}px`, '--inkra-circular-switch-value-size': combined ? lineHeight < 18 ? '12px' : lineHeight < 22 ? '14px' : 'var(--inkra-text-lg)' : 'var(--inkra-text-lg)', '--inkra-circular-switch-value-line': combined ? `${lineHeight}px` : 'var(--inkra-line-ui)' }, children: [_jsxs("span", { className: "inkra-switch__circular-arc", children: [_jsx("span", { className: "inkra-switch__circular-track", children: _jsx(ProgressRing, { diameter: diameter - 32, thickness: 5, percent: 75, seed: `${seed}-track` }) }), _jsx("span", { className: "inkra-switch__circular-range", children: _jsx(ProgressRing, { diameter: diameter - 32, thickness: 5, percent: progress, seed: `${seed}-range` }) })] }), (hasIcon || hasContent) && _jsxs("span", { className: "inkra-switch__circular-center", inert: true, children: [hasIcon && _jsx("span", { className: "inkra-switch__circular-icon", children: centerIcon }), hasContent && _jsx("span", { className: "inkra-switch__circular-content", children: typeof content === 'string' || typeof content === 'number'
+                            ? _jsx(PencilText, { className: "inkra-switch__circular-value", ellipsis: centerContent !== undefined, children: String(content) }) : content })] }), _jsx(PencilSurface, { as: "span", className: "inkra-switch__circular-focus", variant: "outline", radius: diameter / 2, seed: `${seed}-focus` })] });
+}

package/dist/selection/Switch.d.ts

@@ -2,6 +2,13 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'role' | 'type'> {
     label: ReactNode;
     description?: ReactNode;
+    variant?: 'standard' | 'circular';
+    /** Circular variant outer size in CSS pixels, bounded to 96–512. */
+    diameter?: number;
+    /** Decorative, non-interactive icon for the circular center. */
+    centerIcon?: ReactNode;
+    /** Circular state label override. null/false hide it; nodes must be non-interactive. */
+    centerContent?: ReactNode | ((checked: boolean) => ReactNode);
     onCheckedChange?: (checked: boolean) => void;
     seed?: string | number;
 }

package/dist/selection/Switch.js

@@ -4,6 +4,7 @@ import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { useNativeChecked } from './useNativeChecked.js';
+import { CircularSwitchVisual } from './CircularSwitchVisual.js';
 const thumbPaths = [
     { d: 'M 20 3 C 30 3 37 10 37 20 C 37 30 30 37 20 37 C 10 37 3 30 3 20 C 3 10 10 3 20 3 Z', mode: 'wash' },
     { d: 'M 20 3 C 30 3 37 10 37 20 C 37 30 30 37 20 37 C 10 37 3 30 3 20 C 3 10 10 3 20 3 Z' },
@@ -12,7 +13,7 @@ function ids(...values) {
     const value = values.filter(Boolean).join(' ');
     return value || undefined;
 }
-export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, form, id, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
+export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, readOnly = false, variant = 'standard', diameter = 128, centerIcon, centerContent, form, id, label, onChange, onCheckedChange, onClick, seed, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputId = id ?? `inkra-switch-${generatedId}`;
     const labelId = `${inputId}-label`;
@@ -20,6 +21,7 @@ export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'ari
     const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null ? labelId : ariaLabelledBy;
     const resolvedSeed = seed ?? inputId;
     const inputRef = useRef(null);
+    const resolvedDiameter = Math.min(512, Math.max(96, Number.isFinite(diameter) ? diameter : 128));
     useImperativeHandle(forwardedRef, () => inputRef.current);
     const { controlled, syncUncontrolled, visualChecked } = useNativeChecked({
         checked,
@@ -27,11 +29,21 @@ export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'ari
         form,
         inputRef,
     });
-    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-switch', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, form: form, id: inputId, onChange: (event) => {
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-switch', variant === 'circular' && 'inkra-switch--circular', className].filter(Boolean).join(' '), "data-variant": variant, "data-readonly": readOnly || undefined, style: variant === 'circular' ? { '--inkra-circular-switch-diameter': `${resolvedDiameter}px` } : undefined, "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly || undefined, form: form, id: inputId, onChange: (event) => {
+                    if (readOnly || event.nativeEvent?.defaultPrevented) {
+                        event.currentTarget.checked = visualChecked;
+                        return;
+                    }
                     const nextChecked = event.currentTarget.checked;
                     if (!controlled)
                         syncUncontrolled(nextChecked);
                     onChange?.(event);
                     onCheckedChange?.(nextChecked);
-                }, ref: inputRef, role: "switch", type: "checkbox" }), _jsxs(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-switch__track", radius: 8, seed: `${resolvedSeed}-track`, variant: visualChecked ? 'quiet' : 'outline', children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx(PencilIcon, { className: "inkra-switch__thumb", paths: thumbPaths, seed: `${resolvedSeed}-thumb`, size: 24, sourceSize: 40 })] }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
+                }, onClick: event => {
+                    if (readOnly) {
+                        event.preventDefault();
+                        return;
+                    }
+                    onClick?.(event);
+                }, ref: inputRef, role: "switch", type: "checkbox" }), variant === 'circular' ? _jsx(CircularSwitchVisual, { checked: visualChecked, diameter: resolvedDiameter, centerIcon: centerIcon, centerContent: centerContent, seed: resolvedSeed }) : _jsxs(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-switch__track", radius: 8, seed: `${resolvedSeed}-track`, variant: visualChecked ? 'quiet' : 'outline', children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx(PencilIcon, { className: "inkra-switch__thumb", paths: thumbPaths, seed: `${resolvedSeed}-thumb`, size: 24, sourceSize: 40 })] }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
 });

package/dist/slider/circular.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CircularSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    form?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Outer size in CSS pixels, bounded to 96–512. Defaults to 128/160/192 by size. */
+    diameter?: number;
+    /** Degrees from the top, increasing clockwise. Defaults to 225. */
+    startAngle?: number;
+    /** Available arc in degrees, from 1 to 360. Defaults to 270. */
+    sweepAngle?: number;
+    /** Physical direction of increasing values; unaffected by the page's text direction. */
+    clockwise?: boolean;
+    /** Shows the default value when centerContent is not specified. */
+    showValue?: boolean;
+    /** Decorative, non-interactive icon placed above the center content. */
+    centerIcon?: ReactNode;
+    /** Overrides the default value. Strings/numbers use PencilText; null/false hide it.
+     * Custom nodes must be non-interactive; the center is inert and hidden from accessibility APIs.
+     */
+    centerContent?: ReactNode | ((value: number) => ReactNode);
+    /** Used for the center label and aria-valuetext. */
+    getValueLabel?: (value: number) => string;
+    seed?: string | number;
+}
+export declare const CircularSlider: import("react").ForwardRefExoticComponent<CircularSliderProps & import("react").RefAttributes<HTMLDivElement>>;