@remix-run/ui 0.2.0 → 0.3.0

package/dist/animation/demos/mixin-presence-list.d.ts

@@ -0,0 +1,2 @@
+import type { Handle } from '@remix-run/ui';
+export declare function MixinPresenceList(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/mixin-presence-list.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit } from '@remix-run/ui/animation';
+let nextId = 1;
+function createItem() {
+    return { id: nextId++, label: `Row ${nextId - 1}` };
+}
+export function MixinPresenceList(handle) {
+    let items = [createItem(), createItem(), createItem()];
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 10,
+                width: 220,
+            }),
+        ], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 8 })], children: [_jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 10px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#0ea5e9',
+                                color: 'white',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#0284c7' },
+                            }),
+                            on('click', () => {
+                                items.unshift(createItem());
+                                handle.update();
+                            }),
+                        ], children: "Add" }), _jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 10px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#ef4444',
+                                color: 'white',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#dc2626' },
+                            }),
+                            on('click', () => {
+                                items = items.slice(0, Math.max(0, items.length - 1));
+                                handle.update();
+                            }),
+                        ], children: "Remove" })] }), items.map((item) => (_jsxs("div", { mix: [
+                    animateEntrance({
+                        opacity: 0,
+                        transform: 'translateY(-10px) scale(0.98)',
+                        duration: 220,
+                        easing: 'ease-out',
+                    }),
+                    animateExit({
+                        opacity: 0,
+                        transform: 'translateY(10px) scale(0.98)',
+                        duration: 180,
+                        easing: 'ease-in',
+                    }),
+                    css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '10px 12px',
+                        borderRadius: 8,
+                        backgroundColor: '#f8fafc',
+                        color: '#334155',
+                        border: '1px solid #e2e8f0',
+                    }),
+                ], children: [_jsx("span", { children: item.label }), _jsx("button", { mix: [
+                            css({
+                                width: 24,
+                                height: 24,
+                                padding: 0,
+                                border: 'none',
+                                borderRadius: 4,
+                                backgroundColor: 'transparent',
+                                color: '#64748b',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#e2e8f0' },
+                            }),
+                            on('click', () => {
+                                items = items.filter((entry) => entry.id !== item.id);
+                                handle.update();
+                            }),
+                        ], children: "\u00D7" })] }, String(item.id))))] }));
+}
+//# sourceMappingURL=mixin-presence-list.js.map

package/dist/animation/demos/mixin-presence-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin-presence-list.js","sourceRoot":"","sources":["../../../src/animation/demos/mixin-presence-list.tsx"],"names":[],"mappings":"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"}

package/dist/animation/demos/mixin-reclaim.d.ts

@@ -0,0 +1,2 @@
+import type { Handle } from '@remix-run/ui';
+export declare function MixinReclaim(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/mixin-reclaim.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit } from '@remix-run/ui/animation';
+export function MixinReclaim(handle) {
+    let visible = true;
+    let interruptTimer;
+    function clearInterruptTimer() {
+        if (interruptTimer === undefined)
+            return;
+        window.clearTimeout(interruptTimer);
+        interruptTimer = undefined;
+    }
+    function scheduleInterrupt() {
+        clearInterruptTimer();
+        visible = false;
+        handle.update();
+        interruptTimer = window.setTimeout(() => {
+            visible = true;
+            handle.update();
+            interruptTimer = undefined;
+        }, 140);
+    }
+    return () => (_jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', gap: 12, width: 240 })], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 8 })], children: [_jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 10px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#10b981',
+                                color: 'white',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#059669' },
+                            }),
+                            on('click', () => {
+                                clearInterruptTimer();
+                                visible = true;
+                                handle.update();
+                            }),
+                        ], children: "Show" }), _jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 10px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#f59e0b',
+                                color: 'white',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#d97706' },
+                            }),
+                            on('click', scheduleInterrupt),
+                        ], children: "Interrupt" })] }), _jsx("button", { mix: [
+                    css({
+                        padding: '8px 10px',
+                        border: 'none',
+                        borderRadius: 6,
+                        backgroundColor: '#ef4444',
+                        color: 'white',
+                        cursor: 'pointer',
+                        '&:hover': { backgroundColor: '#dc2626' },
+                    }),
+                    on('click', () => {
+                        clearInterruptTimer();
+                        visible = false;
+                        handle.update();
+                    }),
+                ], children: "Hide" }), _jsx("div", { mix: [css({ minHeight: 100, display: 'grid', placeItems: 'center' })], children: visible && (_jsx("div", { mix: [
+                        animateEntrance({
+                            opacity: 0,
+                            transform: 'translateY(12px) scale(0.94)',
+                            duration: 260,
+                            easing: 'ease-out',
+                        }),
+                        animateExit({
+                            opacity: 0,
+                            transform: 'translateY(-12px) scale(0.94)',
+                            duration: 260,
+                            easing: 'ease-in',
+                        }),
+                        css({
+                            width: 200,
+                            padding: '14px 16px',
+                            borderRadius: 10,
+                            background: 'linear-gradient(135deg, #7c3aed, #3b82f6)',
+                            color: 'white',
+                            textAlign: 'center',
+                            fontWeight: 600,
+                        }),
+                    ], children: "Reclaim Me Mid-Exit" }, "reclaim-card")) })] }));
+}
+//# sourceMappingURL=mixin-reclaim.js.map

package/dist/animation/demos/mixin-reclaim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin-reclaim.js","sourceRoot":"","sources":["../../../src/animation/demos/mixin-reclaim.tsx"],"names":[],"mappings":"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"}

package/dist/animation/demos/multi-state-badge.d.ts

@@ -0,0 +1,2 @@
+import type { Handle } from '@remix-run/ui';
+export declare function MultiStateBadge(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/multi-state-badge.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on, ref } from '@remix-run/ui';
+import { animateEntrance, animateExit } from '@remix-run/ui/animation';
+import { spring } from '@remix-run/ui/animation';
+const STATES = {
+    idle: 'Start',
+    processing: 'Processing',
+    success: 'Done',
+    error: 'Something went wrong',
+};
+function getNextState(state) {
+    let states = Object.keys(STATES);
+    let nextIndex = (states.indexOf(state) + 1) % states.length;
+    return states[nextIndex];
+}
+const ICON_SIZE = 20;
+const STROKE_WIDTH = 1.5;
+const VIEW_BOX_SIZE = 24;
+const iconEnterAnimation = {
+    transform: 'translateY(-40px) scale(0.5)',
+    filter: 'blur(6px)',
+    duration: 150,
+    easing: 'ease-out',
+};
+const iconExitAnimation = {
+    transform: 'translateY(40px) scale(0.5)',
+    filter: 'blur(6px)',
+    duration: 150,
+    easing: 'ease-in',
+};
+export function MultiStateBadge(handle) {
+    let state = 'idle';
+    return () => (_jsx("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 16,
+                minHeight: 80,
+            }),
+        ], children: _jsx("button", { mix: [
+                css({
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: 0,
+                }),
+                on('click', () => {
+                    state = getNextState(state);
+                    handle.update();
+                }),
+            ], children: _jsx(Badge, { state: state }) }) }));
+}
+function Badge(handle) {
+    let badgeEl;
+    let prevState = null;
+    return () => {
+        let { state } = handle.props;
+        // Trigger shake/scale animations on state change
+        if (prevState !== null && prevState !== state) {
+            handle.queueTask(() => {
+                if (state === 'error') {
+                    badgeEl.animate({
+                        transform: [
+                            'translateX(0)',
+                            'translateX(-6px)',
+                            'translateX(6px)',
+                            'translateX(-6px)',
+                            'translateX(0)',
+                        ],
+                    }, { duration: 300, easing: 'ease-in-out', delay: 100 });
+                }
+                else if (state === 'success') {
+                    badgeEl.animate({ transform: ['scale(1)', 'scale(1.2)', 'scale(1)'] }, { duration: 300, easing: 'ease-in-out' });
+                }
+            });
+        }
+        prevState = state;
+        return (_jsxs("div", { mix: [
+                ref((node) => (badgeEl = node)),
+                css({
+                    backgroundColor: '#e2e8f0',
+                    color: '#0f1115',
+                    display: 'flex',
+                    overflow: 'hidden',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '12px 20px',
+                    fontSize: 16,
+                    borderRadius: 999,
+                    willChange: 'transform, filter',
+                    transition: `gap ${spring('snappy')}`,
+                }),
+            ], style: { gap: state === 'idle' ? '0px' : '8px' }, children: [_jsx(Icon, { state: state }), _jsx(Label, { state: state })] }));
+    };
+}
+function Icon(handle) {
+    return () => (_jsxs("span", { mix: [
+            css({
+                height: ICON_SIZE,
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden',
+                transition: `width ${spring({ duration: 200, bounce: 0.2 })}`,
+            }),
+        ], style: { width: handle.props.state === 'idle' ? 0 : ICON_SIZE }, children: [handle.props.state === 'processing' && (_jsx("span", { mix: [
+                    css({ position: 'absolute', left: 0, top: 0 }),
+                    animateEntrance(iconEnterAnimation),
+                    animateExit(iconExitAnimation),
+                ], children: _jsx(Loader, {}) }, "loader")), handle.props.state === 'success' && (_jsx("span", { mix: [
+                    css({ position: 'absolute', left: 0, top: 0 }),
+                    animateEntrance(iconEnterAnimation),
+                    animateExit(iconExitAnimation),
+                ], children: _jsx(Check, {}) }, "check")), handle.props.state === 'error' && (_jsx("span", { mix: [
+                    css({ position: 'absolute', left: 0, top: 0 }),
+                    animateEntrance(iconEnterAnimation),
+                    animateExit(iconExitAnimation),
+                ], children: _jsx(X, {}) }, "x"))] }));
+}
+function Loader() {
+    return () => (_jsx("div", { mix: [
+            ref((node) => {
+                node.animate({ transform: ['rotate(0deg)', 'rotate(360deg)'] }, { duration: 1000, iterations: Infinity });
+            }),
+            css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: ICON_SIZE,
+                height: ICON_SIZE,
+            }),
+        ], children: _jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: `0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`, fill: "none", stroke: "currentColor", strokeWidth: STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) }));
+}
+function Check() {
+    return () => (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: `0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`, fill: "none", stroke: "currentColor", strokeWidth: STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "4 12 9 17 20 6", mix: [
+                ref((node) => {
+                    let length = node.getTotalLength();
+                    node.style.strokeDasharray = `${length}`;
+                    node.style.strokeDashoffset = `${length}`;
+                    node.animate({ strokeDashoffset: [length, 0] }, { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' });
+                }),
+            ] }) }));
+}
+function X() {
+    return () => (_jsxs("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: `0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`, fill: "none", stroke: "currentColor", strokeWidth: STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", mix: [
+                    ref((node) => {
+                        let length = node.getTotalLength();
+                        node.style.strokeDasharray = `${length}`;
+                        node.style.strokeDashoffset = `${length}`;
+                        node.animate({ strokeDashoffset: [length, 0] }, { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' });
+                    }),
+                ] }), _jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", mix: [
+                    ref((node) => {
+                        let length = node.getTotalLength();
+                        node.style.strokeDasharray = `${length}`;
+                        node.style.strokeDashoffset = `${length}`;
+                        node.animate({ strokeDashoffset: [length, 0] }, { ...spring({ duration: 300, bounce: 0.1 }), delay: 100, fill: 'forwards' });
+                    }),
+                ] })] }));
+}
+function Label(handle) {
+    let measureEl;
+    let labelWidth = 0;
+    let labelHeight = 0;
+    // Don't animate the label on initial render
+    let isFirstRender = true;
+    handle.queueTask(() => {
+        isFirstRender = false;
+    });
+    return () => {
+        let { state } = handle.props;
+        // Measure label dimensions after render
+        handle.queueTask(() => {
+            if (measureEl) {
+                let rect = measureEl.getBoundingClientRect();
+                if (rect.width !== labelWidth || rect.height !== labelHeight) {
+                    labelWidth = rect.width;
+                    labelHeight = rect.height;
+                    handle.update();
+                }
+            }
+        });
+        let labelMix = [
+            animateExit({
+                transform: 'translateY(20px)',
+                opacity: 0,
+                filter: 'blur(10px)',
+                duration: 200,
+                easing: 'ease-in-out',
+            }),
+        ];
+        if (!isFirstRender) {
+            labelMix.unshift(animateEntrance({
+                transform: 'translateY(-20px)',
+                opacity: 0,
+                filter: 'blur(10px)',
+                duration: 200,
+                easing: 'ease-in-out',
+            }));
+        }
+        return (_jsxs("span", { mix: [
+                css({
+                    position: 'relative',
+                    display: 'inline-block',
+                    transition: `width ${spring({ duration: 200, bounce: 0.1 })}`,
+                }),
+            ], style: {
+                width: labelWidth || 'auto',
+                height: labelHeight || 'auto',
+            }, children: [_jsx("span", { mix: [
+                        ref((node) => (measureEl = node)),
+                        css({ position: 'absolute', visibility: 'hidden', whiteSpace: 'nowrap' }),
+                    ], children: STATES[state] }), state === 'idle' && (_jsx("span", { mix: [
+                        css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+                        ...labelMix,
+                    ], children: STATES.idle }, "idle")), state === 'processing' && (_jsx("span", { mix: [
+                        css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+                        ...labelMix,
+                    ], children: STATES.processing }, "processing")), state === 'success' && (_jsx("span", { mix: [
+                        css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+                        ...labelMix,
+                    ], children: STATES.success }, "success")), state === 'error' && (_jsx("span", { mix: [
+                        css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+                        ...labelMix,
+                    ], children: STATES.error }, "error"))] }));
+    };
+}
+//# sourceMappingURL=multi-state-badge.js.map

package/dist/animation/demos/multi-state-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-state-badge.js","sourceRoot":"","sources":["../../../src/animation/demos/multi-state-badge.tsx"],"names":[],"mappings":"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"}

package/dist/animation/demos/press.d.ts

@@ -0,0 +1,2 @@
+import { type Handle } from '@remix-run/ui';
+export declare function Press(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/press.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { createMixin, css, on } from '@remix-run/ui';
+import { spring } from '@remix-run/ui/animation';
+export function Press(handle) {
+    let pressed = false;
+    function setPressed(nextPressed) {
+        if (pressed === nextPressed)
+            return;
+        pressed = nextPressed;
+        handle.update();
+    }
+    return () => (_jsx("div", { tabIndex: 0, mix: [
+            css({
+                width: 100,
+                height: 100,
+                backgroundColor: '#9911ff',
+                borderRadius: 5,
+                transition: `transform ${spring()}`,
+                '&:focus': {
+                    outline: '4px solid rgba(0,120,255,0.7)',
+                    outlineOffset: 1,
+                },
+                '&:hover, &:focus': {
+                    transform: pressed ? 'scale(0.8)' : 'scale(1.2)',
+                },
+                // or use default browser :active but lose keyboard "down" press states
+                // '&:active': {
+                //   transform: 'scale(0.8)',
+                // },
+            }),
+            onPressDown(() => {
+                setPressed(true);
+            }),
+            onPressUp(() => {
+                setPressed(false);
+            }),
+        ] }));
+}
+const onPressDown = createMixin(() => (handler) => [
+    on('pointerdown', (event) => {
+        if (event.isPrimary === false)
+            return;
+        handler();
+    }),
+    on('keydown', (event) => {
+        if (!(event.key === 'Enter' || event.key === ' ') || event.repeat)
+            return;
+        event.preventDefault();
+        handler();
+    }),
+]);
+const onPressUp = createMixin(() => (handler) => [
+    on('pointerup', handler),
+    on('pointerleave', handler),
+    on('keyup', (event) => {
+        if (!(event.key === 'Enter' || event.key === ' '))
+            return;
+        event.preventDefault();
+        handler();
+    }),
+    on('blur', handler),
+]);
+//# sourceMappingURL=press.js.map

package/dist/animation/demos/press.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"press.js","sourceRoot":"","sources":["../../../src/animation/demos/press.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAe,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,UAAU,KAAK,CAAC,MAAc;IAClC,IAAI,OAAO,GAAG,KAAK,CAAA;IAEnB,SAAS,UAAU,CAAC,WAAoB;QACtC,IAAI,OAAO,KAAK,WAAW;YAAE,OAAM;QACnC,OAAO,GAAG,WAAW,CAAA;QACrB,MAAM,CAAC,MAAM,EAAE,CAAA;IACjB,CAAC;IAED,OAAO,GAAG,EAAE,CAAC,CACX,cACE,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,CAAC;gBACf,UAAU,EAAE,aAAa,MAAM,EAAE,EAAE;gBACnC,SAAS,EAAE;oBACT,OAAO,EAAE,+BAA+B;oBACxC,aAAa,EAAE,CAAC;iBACjB;gBACD,kBAAkB,EAAE;oBAClB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;iBACjD;gBACD,uEAAuE;gBACvE,gBAAgB;gBAChB,6BAA6B;gBAC7B,KAAK;aACN,CAAC;YACF,WAAW,CAAC,GAAG,EAAE;gBACf,UAAU,CAAC,IAAI,CAAC,CAAA;YAClB,CAAC,CAAC;YACF,SAAS,CAAC,GAAG,EAAE;gBACb,UAAU,CAAC,KAAK,CAAC,CAAA;YACnB,CAAC,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,WAAW,GAAG,WAAW,CAAqC,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;IACrF,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;QAC1B,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK;YAAE,OAAM;QACrC,OAAO,EAAE,CAAA;IACX,CAAC,CAAC;IACF,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QACtB,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;YAAE,OAAM;QACzE,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,OAAO,EAAE,CAAA;IACX,CAAC,CAAC;CACH,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,WAAW,CAAqC,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;IACnF,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC;IAC3B,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACpB,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;YAAE,OAAM;QACzD,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,OAAO,EAAE,CAAA;IACX,CAAC,CAAC;IACF,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;CACpB,CAAC,CAAA"}

package/dist/animation/demos/reordering.d.ts

@@ -0,0 +1,2 @@
+import { type Handle } from '@remix-run/ui';
+export declare function Reordering(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/reordering.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+import { animateLayout, spring } from '@remix-run/ui/animation';
+const initialOrder = ['#ff0088', '#dd00ee', '#9911ff', '#0d63f8'];
+function shuffle(array) {
+    let result = [...array];
+    for (let i = result.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [result[i], result[j]] = [result[j], result[i]];
+    }
+    return result;
+}
+export function Reordering(handle) {
+    let order = initialOrder;
+    function scheduleNextShuffle() {
+        setTimeout(() => {
+            if (handle.signal.aborted)
+                return;
+            order = shuffle(order);
+            handle.update();
+            scheduleNextShuffle();
+        }, 1000);
+    }
+    scheduleNextShuffle();
+    return () => (_jsx("ul", { mix: [
+            css({
+                listStyle: 'none',
+                padding: 0,
+                margin: 0,
+                position: 'relative',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 10,
+                width: 220,
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }),
+        ], children: order.map((backgroundColor) => (_jsx("li", { mix: [
+                css({
+                    width: 100,
+                    height: 100,
+                    borderRadius: 10,
+                }),
+                animateLayout({
+                    ...spring({ duration: 600, bounce: 0.2 }),
+                }),
+            ], style: { backgroundColor } }, backgroundColor))) }));
+}
+//# sourceMappingURL=reordering.js.map

package/dist/animation/demos/reordering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reordering.js","sourceRoot":"","sources":["../../../src/animation/demos/reordering.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAe,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAE/D,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAEjE,SAAS,OAAO,CAAI,KAAU;IAC5B,IAAI,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;IACvB,KAAK,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC3C,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAC1C;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAClD,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAc;IACvC,IAAI,KAAK,GAAG,YAAY,CAAA;IAExB,SAAS,mBAAmB;QAC1B,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO;gBAAE,OAAM;YACjC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;YACtB,MAAM,CAAC,MAAM,EAAE,CAAA;YACf,mBAAmB,EAAE,CAAA;QACvB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC;IAED,mBAAmB,EAAE,CAAA;IAErB,OAAO,GAAG,EAAE,CAAC,CACX,aACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,SAAS,EAAE,MAAM;gBACjB,OAAO,EAAE,CAAC;gBACV,MAAM,EAAE,CAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;gBAChB,GAAG,EAAE,EAAE;gBACP,KAAK,EAAE,GAAG;gBACV,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;aACrB,CAAC;SACH,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,CAC9B,aAEE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,GAAG;oBACX,YAAY,EAAE,EAAE;iBACjB,CAAC;gBACF,aAAa,CAAC;oBACZ,GAAG,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;iBAC1C,CAAC;aACH,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,IAXrB,eAAe,CAYpB,CACH,CAAC,GACC,CACN,CAAA;AACH,CAAC"}

package/dist/animation/demos/rolling-square.d.ts

@@ -0,0 +1,2 @@
+import { type Handle } from '@remix-run/ui';
+export declare function RollingSquare(handle: Handle): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/rolling-square.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import {} from '@remix-run/ui';
+import { css, on } from '@remix-run/ui';
+import { spring } from '@remix-run/ui/animation';
+export function RollingSquare(handle) {
+    let toggled = false;
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '20px',
+                minWidth: '300px',
+            }),
+        ], children: [_jsx("div", { mix: [
+                    css({
+                        width: '80px',
+                        height: '80px',
+                        backgroundColor: '#8df0cc',
+                        borderRadius: '10px',
+                        transition: `transform ${spring({ duration: 500, bounce: 0.5 })}`,
+                    }),
+                ], style: {
+                    transform: toggled ? 'translateX(100%) rotate(180deg)' : 'translateX(-100%)',
+                } }), _jsx("button", { mix: [
+                    css({
+                        backgroundColor: '#8df0cc',
+                        color: '#0f1115',
+                        borderRadius: '5px',
+                        padding: '10px',
+                        margin: '10px',
+                        border: 'none',
+                        cursor: 'pointer',
+                    }),
+                    on('click', () => {
+                        toggled = !toggled;
+                        handle.update();
+                    }),
+                ], children: "Toggle position" })] }));
+}
+//# sourceMappingURL=rolling-square.js.map

package/dist/animation/demos/rolling-square.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rolling-square.js","sourceRoot":"","sources":["../../../src/animation/demos/rolling-square.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,IAAI,OAAO,GAAG,KAAK,CAAA;IAEnB,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,GAAG,EAAE,MAAM;gBACX,QAAQ,EAAE,OAAO;aAClB,CAAC;SACH,aAED,cACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,SAAS;wBAC1B,YAAY,EAAE,MAAM;wBACpB,UAAU,EAAE,aAAa,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE;qBAClE,CAAC;iBACH,EACD,KAAK,EAAE;oBACL,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,mBAAmB;iBAC7E,GACD,EACF,iBACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,eAAe,EAAE,SAAS;wBAC1B,KAAK,EAAE,SAAS;wBAChB,YAAY,EAAE,KAAK;wBACnB,OAAO,EAAE,MAAM;wBACf,MAAM,EAAE,MAAM;wBACd,MAAM,EAAE,MAAM;wBACd,MAAM,EAAE,SAAS;qBAClB,CAAC;oBACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;wBACf,OAAO,GAAG,CAAC,OAAO,CAAA;wBAClB,MAAM,CAAC,MAAM,EAAE,CAAA;oBACjB,CAAC,CAAC;iBACH,gCAGM,IACL,CACP,CAAA;AACH,CAAC"}

package/dist/animation/demos/rotate.d.ts

@@ -0,0 +1 @@
+export declare function Rotate(): () => import("@remix-run/ui").RemixElement;