@inkra/react 0.9.0 → 0.11.0

package/dist/number-ticker/index.js

@@ -7,6 +7,9 @@ import { canAnimateTickerValue, createNumberFormatter, createTickerFormatter, ea
 import { ExactDecimal } from './precision.js';
 import { RollingValue } from './RollingValue.js';
 import { createRollingMotion, rollingTokens, sameRollingTokens } from './rolling.js';
+import { MorphValue } from './MorphValue.js';
+import { morphTokenMapping } from './morph.js';
+import { createMorphMotion, measureMorphWidths } from './morph-motion.js';
 function usePrefersReducedMotion() {
     const [reduced, setReduced] = useState(false);
     useBrowserLayoutEffect(() => {
@@ -41,6 +44,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
     const [roll, setRoll] = useState(null);
     const [rollProgress, setRollProgress] = useState(1);
     const rollFrameRef = useRef(null);
+    const [morph, setMorph] = useState(null);
+    const morphFrameRef = useRef(null);
     const reducedMotion = usePrefersReducedMotion();
     const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
     const formatOptionsKey = JSON.stringify(formatOptions ?? {});
@@ -51,12 +56,18 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
     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]);
+    const morphRequested = animation === 'morph' && !renderValue;
+    const finalParts = useMemo(() => rollRequested || morphRequested ? formatter.formatToParts(value) : [], [formatter, value, rollRequested, morphRequested]);
+    const finalTokens = useMemo(() => rollingTokens(finalParts), [finalParts]);
     // Keep exact large values readable without creating thousands of painted reels.
     const useRoll = rollRequested && finalTokens.length <= 128;
+    const useMorph = morphRequested && finalTokens.length <= 128;
+    const useTokens = useRoll || useMorph;
     const settledTokensRef = useRef(finalTokens);
+    const morphPartsRef = useRef(finalParts);
     const previousFormatterRef = useRef(formatter);
     const previousUseRollRef = useRef(useRoll);
+    const previousAnimationRef = useRef(animation);
     const columns = useMemo(() => roll?.columns ?? createRollingMotion(finalTokens, finalTokens, 'up'), [roll, finalTokens]);
     useBrowserLayoutEffect(() => {
         const previousTarget = targetRef.current;
@@ -87,12 +98,13 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         const from = displayedRef.current;
         const formatChanged = previousFormatterRef.current !== formatter;
         previousFormatterRef.current = formatter;
-        const modeChanged = previousUseRollRef.current !== useRoll;
+        const modeChanged = previousUseRollRef.current !== useRoll || previousAnimationRef.current !== animation;
         previousUseRollRef.current = useRoll;
+        previousAnimationRef.current = animation;
         if (!animate || reduceImmediately || formatChanged || modeChanged
-            || (useRoll && !rollFrameRef.current && sameRollingTokens(settledTokensRef.current, finalTokens))
-            || (rollRequested && (!useRoll || settledTokensRef.current.length > 128))
-            || !canAnimateTickerValue(from, value, duration)) {
+            || (useTokens && !rollFrameRef.current && (!morphFrameRef.current || morphFrameRef.current.progress >= 1) && sameRollingTokens(settledTokensRef.current, finalTokens))
+            || ((rollRequested || morphRequested) && (!useTokens || settledTokensRef.current.length > 128))
+            || (!canAnimateTickerValue(from, value, duration) && !(useMorph && canAnimateTickerValue(previousTarget, value, duration)))) {
             displayedRef.current = value;
             setDisplayedValue(value);
             setAnnouncedValue(value);
@@ -101,9 +113,44 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
             setRollProgress(1);
             settledTokensRef.current = finalTokens;
             rollFrameRef.current = null;
+            setMorph(null);
+            morphFrameRef.current = null;
+            morphPartsRef.current = finalParts;
             return undefined;
         }
-        if (useRoll) {
+        if (useMorph) {
+            const direction = rollDirection === 'auto'
+                ? (new ExactDecimal(String(value)).gt(String(previousTarget)) ? 'up' : 'down') : rollDirection;
+            const previousTokens = morphFrameRef.current?.motion.tokens ?? settledTokensRef.current;
+            const zeroPart = formatter.formatToParts(0).find(part => part.type === 'integer')?.value ?? '0';
+            const zero = Array.from(zeroPart).slice(-1)[0] ?? '0';
+            const mapping = morphTokenMapping(morphPartsRef.current, finalParts, previousTarget, value, zero);
+            const motion = createMorphMotion(previousTokens, finalTokens, mapping, direction, measureMorphWidths(rootRef.current, [...previousTokens, ...finalTokens]), morphFrameRef.current ?? undefined);
+            // Bound interrupted layers as well as formatted target token counts.
+            if (motion.glyphs.length > 512) {
+                displayedRef.current = value;
+                setDisplayedValue(value);
+                setAnnouncedValue(value);
+                setAnimating(false);
+                setMorph(null);
+                morphFrameRef.current = null;
+                morphPartsRef.current = finalParts;
+                settledTokensRef.current = finalTokens;
+                setRoll(null);
+                rollFrameRef.current = null;
+                setRollProgress(1);
+                return undefined;
+            }
+            setMorph(motion);
+            morphFrameRef.current = { motion, progress: 0 };
+            morphPartsRef.current = finalParts;
+            setRoll(null);
+            rollFrameRef.current = null;
+            setRollProgress(0);
+        }
+        else if (useRoll) {
+            setMorph(null);
+            morphFrameRef.current = null;
             const direction = rollDirection === 'auto'
                 ? (new ExactDecimal(String(value)).gt(String(from)) ? 'up' : 'down') : rollDirection;
             const nextColumns = createRollingMotion(settledTokensRef.current, finalTokens, direction, rollFrameRef.current ?? undefined);
@@ -114,6 +161,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         else {
             setRoll(null);
             rollFrameRef.current = null;
+            setMorph(null);
+            morphFrameRef.current = null;
         }
         let startTime = null;
         setAnimating(true);
@@ -125,10 +174,12 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
             const bounded = Number.isFinite(eased) ? Math.min(1, Math.max(0, eased)) : progress;
             const next = interpolateTickerValue(from, value, bounded);
             displayedRef.current = next;
-            if (useRoll) {
+            if (useTokens) {
                 setRollProgress(bounded);
                 if (rollFrameRef.current)
                     rollFrameRef.current.progress = bounded;
+                if (morphFrameRef.current)
+                    morphFrameRef.current.progress = bounded;
             }
             else
                 setDisplayedValue(next);
@@ -145,6 +196,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
                 setRollProgress(1);
                 settledTokensRef.current = finalTokens;
                 rollFrameRef.current = null;
+                if (morphFrameRef.current)
+                    morphFrameRef.current.progress = 1;
             }
         };
         frameRef.current = requestAnimationFrame(tick);
@@ -154,7 +207,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
                 frameRef.current = null;
             }
         };
-    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, rollRequested, rollDirection, formatter]);
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, useMorph, useTokens, rollRequested, morphRequested, rollDirection, formatter, animation]);
     useEffect(() => () => {
         if (frameRef.current !== null)
             cancelAnimationFrame(frameRef.current);
@@ -168,9 +221,10 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         .filter(Boolean).join(' ');
     const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
     const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
-        ?? (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 }));
+        ?? (useMorph ? _jsx(MorphValue, { tokens: finalTokens, motion: morph, progress: morph ? rollProgress : 1 })
+            : 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 : (() => {
         const formattedDelta = formatDerivedTickerDelta(deltaFormatter, delta);
         const details = {

package/dist/number-ticker/morph-motion.d.ts

@@ -0,0 +1,46 @@
+import type { RollingToken } from './rolling.js';
+export interface MorphGlyph {
+    id: string;
+    referenceKey: string;
+    text: string;
+    digit: boolean;
+    width: number;
+    target: boolean;
+    fromX: number;
+    toX: number;
+    fromY: number;
+    toY: number;
+    fromOpacity: number;
+    toOpacity: number;
+}
+export interface MorphMotion {
+    glyphs: MorphGlyph[];
+    tokens: RollingToken[];
+    width: number;
+    targetWidth: number;
+    kind: 'shift' | 'roll';
+}
+export interface MorphFrame {
+    motion: MorphMotion;
+    progress: number;
+}
+export type MorphWidths = (token: RollingToken) => number;
+export declare function measureMorphWidths(root: HTMLElement | null, tokens: RollingToken[]): MorphWidths;
+export declare function sampleMorphGlyph(glyph: MorphGlyph, progress: number): {
+    x: number;
+    y: number;
+    opacity: number;
+    id: string;
+    referenceKey: string;
+    text: string;
+    digit: boolean;
+    width: number;
+    target: boolean;
+    fromX: number;
+    toX: number;
+    fromY: number;
+    toY: number;
+    fromOpacity: number;
+    toOpacity: number;
+};
+export declare function createMorphMotion(from: RollingToken[], to: RollingToken[], mapping: Array<[number, number]> | null, direction: 'up' | 'down', widths: MorphWidths, previous?: MorphFrame): MorphMotion;

package/dist/number-ticker/morph-motion.js

@@ -0,0 +1,121 @@
+import { rollMix } from './rolling.js';
+let nextGlyph = 0;
+export function measureMorphWidths(root, tokens) {
+    if (!root || typeof document === 'undefined')
+        return token => token.digit ? 1 : Math.max(.25, Array.from(token.text).length);
+    const style = getComputedStyle(root);
+    const probe = document.createElement('span');
+    Object.assign(probe.style, { position: 'fixed', visibility: 'hidden', pointerEvents: 'none',
+        font: style.font, fontVariantNumeric: 'tabular-nums lining-nums', fontKerning: 'none',
+        fontVariantLigatures: 'none', letterSpacing: '0', whiteSpace: 'pre', width: '1ch', display: 'inline-block' });
+    document.body.append(probe);
+    const ch = probe.getBoundingClientRect().width || 1;
+    probe.style.width = 'auto';
+    const widths = new Map();
+    // Measurement happens once when a target changes, never in the frame loop.
+    const measure = (token) => {
+        if (token.digit)
+            return 1;
+        if (!widths.has(token.text)) {
+            probe.textContent = token.text;
+            widths.set(token.text, Math.max(.05, probe.getBoundingClientRect().width / ch));
+        }
+        return widths.get(token.text);
+    };
+    // The returned callback cannot retain a live measuring node.
+    tokens.forEach(measure);
+    const result = token => token.digit ? 1 : widths.get(token.text) ?? Math.max(.25, Array.from(token.text).length);
+    probe.remove();
+    return result;
+}
+function layout(tokens, widths) {
+    const total = tokens.reduce((sum, token) => sum + widths(token), 0);
+    let x = -total;
+    return { width: total, items: tokens.map(token => {
+            const width = widths(token);
+            const item = { ...token, x, width };
+            x += width;
+            return item;
+        }) };
+}
+export function sampleMorphGlyph(glyph, progress) {
+    const fade = progress * progress * (3 - 2 * progress);
+    return { ...glyph, x: rollMix(glyph.fromX, glyph.toX, progress), y: rollMix(glyph.fromY, glyph.toY, progress),
+        opacity: rollMix(glyph.fromOpacity, glyph.toOpacity, fade) };
+}
+export function createMorphMotion(from, to, mapping, direction, widths, previous) {
+    const before = layout(from, widths), after = layout(to, widths);
+    const source = previous ? previous.motion.glyphs.map(glyph => sampleMorphGlyph(glyph, previous.progress))
+        .filter(glyph => glyph.opacity > .001 && Math.abs(glyph.y) < 1.001)
+        : before.items.map(token => ({ id: `settled-${token.key}`, referenceKey: token.key, text: token.text,
+            digit: token.digit, width: token.width, target: true, x: token.x, y: 0, opacity: 1 }));
+    const used = new Set();
+    const glyphs = [];
+    const sign = direction === 'up' ? -1 : 1;
+    const pairs = mapping ?? from.flatMap((token, index) => {
+        const next = to.findIndex(item => item.key === token.key);
+        return next < 0 ? [] : [[index, next]];
+    });
+    const oldIndexes = new Map(pairs.map(([left, right]) => [right, left]));
+    const findSource = (index) => source.filter(item => item.referenceKey === from[index]?.key)
+        .sort((left, right) => right.opacity - left.opacity);
+    const decimalEnd = (items) => {
+        const integers = items.filter(item => item.key.startsWith('integer-'));
+        const integer = integers[integers.length - 1];
+        return integer ? integer.x + integer.width : 0;
+    };
+    for (let index = 0; index < to.length; index++) {
+        const token = to[index], target = after.items[index];
+        const oldIndex = oldIndexes.get(index);
+        const candidates = oldIndex === undefined ? [] : findSource(oldIndex);
+        const existing = candidates.find(item => item.text === token.text && !used.has(item.id));
+        if (existing) {
+            used.add(existing.id);
+            glyphs.push({ id: existing.id, referenceKey: token.key, text: token.text, digit: token.digit,
+                width: existing.width, target: true, fromX: existing.x, toX: target.x,
+                fromY: existing.y, toY: 0, fromOpacity: existing.opacity, toOpacity: 1 });
+            continue;
+        }
+        let x = candidates[0]?.x ?? before.items[oldIndex ?? -1]?.x ?? target.x;
+        let y = token.digit && !mapping ? -sign : 0;
+        if (mapping) {
+            if (token.key.startsWith('decimal-'))
+                x = decimalEnd(before.items);
+            else if (token.digit) {
+                const anchor = pairs.filter(([left, right]) => right < index && from[left].digit)
+                    .sort((left, right) => right[1] - left[1])[0];
+                if (anchor) {
+                    const visible = findSource(anchor[0])[0];
+                    x = (visible?.x ?? before.items[anchor[0]].x) + target.x - after.items[anchor[1]].x;
+                }
+            }
+        }
+        glyphs.push({ id: `morph-${nextGlyph++}`, referenceKey: token.key, text: token.text,
+            digit: token.digit, width: target.width, target: true, fromX: x, toX: target.x,
+            fromY: y, toY: 0, fromOpacity: mapping || !token.digit ? 0 : 1, toOpacity: 1 });
+    }
+    for (const item of source) {
+        if (used.has(item.id))
+            continue;
+        let x = item.x;
+        let y = item.digit && !mapping ? sign : 0;
+        if (mapping) {
+            if (item.referenceKey.startsWith('decimal-'))
+                x = decimalEnd(after.items);
+            else {
+                const oldIndex = from.findIndex(token => token.key === item.referenceKey);
+                const anchor = pairs.filter(([left]) => left < oldIndex && from[left].digit)
+                    .sort((left, right) => right[0] - left[0])[0];
+                if (anchor) {
+                    const visible = findSource(anchor[0])[0];
+                    x += after.items[anchor[1]].x - (visible?.x ?? before.items[anchor[0]].x);
+                }
+            }
+        }
+        glyphs.push({ id: item.id, referenceKey: item.referenceKey, text: item.text, digit: item.digit,
+            width: item.width, target: false, fromX: item.x, toX: x, fromY: item.y, toY: y,
+            fromOpacity: item.opacity, toOpacity: mapping || !item.digit ? 0 : 1 });
+    }
+    return { glyphs, tokens: to, width: Math.max(before.width, after.width, previous && previous.progress < 1 ? previous.motion.width : 0),
+        targetWidth: after.width, kind: mapping ? 'shift' : 'roll' };
+}

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

@@ -0,0 +1,7 @@
+import type { NumberTickerValue } from './precision.js';
+/**
+ * Match an exact decimal shift, rather than guessing identity from equal glyphs.
+ * Pair indexes address rollingTokens(parts), including unchanged typed symbols.
+ * A null result leaves the transition to the existing place-aligned reels.
+ */
+export declare function morphTokenMapping(fromParts: Intl.NumberFormatPart[], toParts: Intl.NumberFormatPart[], fromValue: NumberTickerValue, toValue: NumberTickerValue, zeroGlyph?: string): Array<[number, number]> | null;

package/dist/number-ticker/morph.js

@@ -0,0 +1,78 @@
+import { ExactDecimal, tickerDecimal } from './precision.js';
+import { rollingTokens } from './rolling.js';
+const numericParts = new Set(['integer', 'fraction', 'decimal', 'group']);
+const exponentParts = new Set(['exponentSeparator', 'exponentMinusSign', 'exponentInteger']);
+function displayDigits(parts, zeroGlyph) {
+    const tokens = rollingTokens(parts);
+    const indexes = tokens.flatMap((token, index) => token.digit ? [index] : []);
+    const text = indexes.map(index => tokens[index].text);
+    const first = text.findIndex(digit => digit !== zeroGlyph);
+    if (first < 0)
+        return null;
+    let last = text.length - 1;
+    while (text[last] === zeroGlyph)
+        last--;
+    const integerLength = parts.filter(part => part.type === 'integer')
+        .reduce((length, part) => length + Array.from(part.value).length, 0);
+    return { indexes, text, first, last, exponent: integerLength - first - 1 };
+}
+/**
+ * Match an exact decimal shift, rather than guessing identity from equal glyphs.
+ * Pair indexes address rollingTokens(parts), including unchanged typed symbols.
+ * A null result leaves the transition to the existing place-aligned reels.
+ */
+export function morphTokenMapping(fromParts, toParts, fromValue, toValue, zeroGlyph = '0') {
+    const from = tickerDecimal(fromValue);
+    const to = tickerDecimal(toValue);
+    if (!from.isFinite() || !to.isFinite() || from.isZero() || to.isZero()
+        || from.isNegative() !== to.isNegative())
+        return null;
+    const shift = to.e - from.e;
+    if (shift === 0 || !from.times(new ExactDecimal(10).pow(shift)).eq(to))
+        return null;
+    // Unit/sign/literal changes are separate semantic transitions. Exponents have
+    // their own digit domain and must never be mistaken for mantissa digits.
+    if ([...fromParts, ...toParts].some(part => exponentParts.has(part.type)))
+        return null;
+    const symbols = (parts) => parts.filter(part => !numericParts.has(part.type));
+    const fromSymbols = symbols(fromParts);
+    const toSymbols = symbols(toParts);
+    if (fromSymbols.length !== toSymbols.length || fromSymbols.some((part, index) => {
+        const next = toSymbols[index];
+        return part.type !== next.type || part.value !== next.value;
+    }))
+        return null;
+    const before = displayDigits(fromParts, zeroGlyph);
+    const after = displayDigits(toParts, zeroGlyph);
+    if (!before || !after || after.exponent - before.exponent !== shift)
+        return null;
+    const core = before.text.slice(before.first, before.last + 1);
+    const nextCore = after.text.slice(after.first, after.last + 1);
+    // Rounding may change the visible significand even for an exact raw shift.
+    if (core.length !== nextCore.length || core.some((digit, index) => digit !== nextCore[index]))
+        return null;
+    const mapping = [];
+    for (let index = 0; index < core.length; index++) {
+        mapping.push([before.indexes[before.first + index], after.indexes[after.first + index]]);
+    }
+    // Edge zeros retain their ordinal distance from the significant core. This
+    // preserves 10 as the first 10 in 1000 without matching arbitrary repeats.
+    for (let offset = 1; offset <= Math.min(before.first, after.first); offset++) {
+        mapping.push([before.indexes[before.first - offset], after.indexes[after.first - offset]]);
+    }
+    const trailing = Math.min(before.text.length - before.last - 1, after.text.length - after.last - 1);
+    for (let offset = 1; offset <= trailing; offset++) {
+        mapping.push([before.indexes[before.last + offset], after.indexes[after.last + offset]]);
+    }
+    const fromTokens = rollingTokens(fromParts);
+    const toTokens = rollingTokens(toParts);
+    const targetSymbols = new Map(toTokens.flatMap((token, index) => token.digit ? [] : [[token.key, { token, index }]]));
+    fromTokens.forEach((token, index) => {
+        if (token.digit)
+            return;
+        const next = targetSymbols.get(token.key);
+        if (next && next.token.text === token.text)
+            mapping.push([index, next.index]);
+    });
+    return mapping.sort((left, right) => left[0] - right[0]);
+}

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>>;