@remix-run/ui 0.2.0 → 0.4.0

package/dist/animation/demos/hold-to-confirm.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { createMixin, css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation';
+// Demo
+const buttonExitAnimation = {
+    opacity: 0,
+    transform: 'scale(1.15)',
+    duration: 100,
+    easing: 'ease-in',
+};
+const confirmationEnterAnimation = {
+    opacity: 0,
+    transform: 'scale(0.9)',
+    duration: 200,
+    easing: 'ease-out',
+};
+export function HoldToConfirm(handle) {
+    let confirmed = false;
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'grid',
+                placeItems: 'center',
+                minHeight: 140,
+                // so children can animate in the same position
+                '& > *': { gridArea: '1 / 1' },
+            }),
+        ], children: [!confirmed && (_jsx(HoldButton, { onConfirm: () => {
+                    confirmed = true;
+                    handle.update();
+                } }, "hold-button")), confirmed && (_jsx(Confirmation, { onReset: () => {
+                    confirmed = false;
+                    handle.update();
+                } }, "confirmed"))] }));
+}
+function HoldButton(handle) {
+    let confirming = false;
+    return () => (_jsxs("button", { mix: [
+            animateExit(buttonExitAnimation),
+            css({
+                position: 'relative',
+                overflow: 'hidden',
+                width: 200,
+                height: 56,
+                border: 'none',
+                borderRadius: 12,
+                backgroundColor: '#dc2626',
+                color: 'white',
+                fontSize: 16,
+                fontWeight: 600,
+                cursor: 'pointer',
+                userSelect: 'none',
+                transition: 'transform 150ms ease',
+                '&:focus': {
+                    outline: '3px solid rgba(220, 38, 38, 0.4)',
+                    outlineOffset: 2,
+                },
+                '&:active': {
+                    transform: 'scale(0.98)',
+                },
+            }),
+            confirmPress(),
+            on(confirmPress.start, () => {
+                confirming = true;
+                handle.update();
+            }),
+            on(confirmPress.cancel, () => {
+                if (!confirming)
+                    return;
+                confirming = false;
+                handle.update();
+            }),
+            on(confirmPress.end, () => {
+                handle.props.onConfirm();
+            }),
+        ], children: [_jsx("div", { mix: [
+                    css({
+                        position: 'absolute',
+                        inset: 0,
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        transformOrigin: 'left',
+                    }),
+                ], style: {
+                    transform: confirming ? 'scaleX(1)' : 'scaleX(0)',
+                    transition: confirming
+                        ? `transform ${PRESS_CONFIRM_TIME}ms linear`
+                        : `transform ${spring({ duration: 100, bounce: 0 })}`,
+                } }), _jsxs("span", { mix: [
+                    css({
+                        position: 'relative',
+                        zIndex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 8,
+                    }),
+                ], children: [_jsx(TrashIcon, {}), "Hold to Delete"] })] }));
+}
+function Confirmation(handle) {
+    return () => (_jsxs("div", { mix: [
+            animateEntrance(confirmationEnterAnimation),
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 16,
+            }),
+        ], children: [_jsxs("div", { mix: [
+                    css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        color: '#22c55e',
+                        fontSize: 18,
+                        fontWeight: 600,
+                    }),
+                ], children: [_jsx(CheckIcon, {}), "Deleted"] }), _jsx("button", { mix: [
+                    css({
+                        padding: '8px 16px',
+                        border: '1px solid #e2e8f0',
+                        borderRadius: 8,
+                        backgroundColor: 'white',
+                        color: '#64748b',
+                        fontSize: 14,
+                        cursor: 'pointer',
+                        transition: 'all 150ms ease',
+                        '&:hover': {
+                            backgroundColor: '#f8fafc',
+                            borderColor: '#cbd5e1',
+                        },
+                    }),
+                    on('click', () => handle.props.onReset()),
+                ], children: "Reset Demo" })] }));
+}
+function TrashIcon() {
+    return () => (_jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }));
+}
+function CheckIcon() {
+    return () => (_jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+}
+const PRESS_CONFIRM_TIME = 2000;
+const pressConfirmStartEventType = 'demo:press-confirm-start';
+const pressConfirmCancelEventType = 'demo:press-confirm-cancel';
+const pressConfirmEndEventType = 'demo:press-confirm-end';
+const baseConfirmPress = createMixin((handle) => {
+    let timer = 0;
+    let pressing = false;
+    let clearTimer = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = 0;
+        }
+    };
+    let start = (target) => {
+        clearTimer();
+        pressing = true;
+        target.dispatchEvent(new Event(pressConfirmStartEventType, { bubbles: true }));
+        timer = window.setTimeout(() => {
+            timer = 0;
+            pressing = false;
+            target.dispatchEvent(new Event(pressConfirmEndEventType, { bubbles: true }));
+        }, PRESS_CONFIRM_TIME);
+    };
+    let cancel = (target) => {
+        if (!pressing)
+            return;
+        clearTimer();
+        pressing = false;
+        target.dispatchEvent(new Event(pressConfirmCancelEventType, { bubbles: true }));
+    };
+    handle.addEventListener('remove', () => {
+        clearTimer();
+        pressing = false;
+    });
+    return (props) => (_jsx(handle.element, { ...props, mix: [
+            on('pointerdown', (event) => {
+                if (event.isPrimary === false)
+                    return;
+                start(event.currentTarget);
+            }),
+            on('pointerup', (event) => {
+                cancel(event.currentTarget);
+            }),
+            on('pointercancel', (event) => {
+                cancel(event.currentTarget);
+            }),
+            on('pointerleave', (event) => {
+                cancel(event.currentTarget);
+            }),
+            on('keydown', (event) => {
+                if (!(event.key === 'Enter' || event.key === ' ') || event.repeat)
+                    return;
+                event.preventDefault();
+                start(event.currentTarget);
+            }),
+            on('keyup', (event) => {
+                if (!(event.key === 'Enter' || event.key === ' '))
+                    return;
+                event.preventDefault();
+                cancel(event.currentTarget);
+            }),
+            on('blur', (event) => {
+                cancel(event.currentTarget);
+            }),
+        ] }));
+});
+const confirmPress = Object.assign(baseConfirmPress, {
+    start: pressConfirmStartEventType,
+    cancel: pressConfirmCancelEventType,
+    end: pressConfirmEndEventType,
+});
+//# sourceMappingURL=hold-to-confirm.js.map

package/dist/animation/demos/hold-to-confirm.js.map

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

package/dist/animation/demos/html-content.d.ts

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

package/dist/animation/demos/html-content.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+import { spring } from '@remix-run/ui/animation';
+export function HTMLContent(handle) {
+    let count = 0;
+    let from = 0;
+    let to = 100;
+    let counter = spring({ duration: 3000, bounce: 0 });
+    function animate() {
+        if (handle.signal.aborted)
+            return;
+        let { value: t, done } = counter.next();
+        if (done)
+            return;
+        count = Math.round(from + (to - from) * t);
+        handle.update();
+        requestAnimationFrame(animate);
+    }
+    handle.queueTask(() => {
+        requestAnimationFrame(animate);
+    });
+    return () => (_jsx("pre", { mix: [
+            css({
+                fontSize: '64px',
+                margin: 0,
+                color: '#8df0cc',
+            }),
+        ], children: count }));
+}
+//# sourceMappingURL=html-content.js.map

package/dist/animation/demos/html-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-content.js","sourceRoot":"","sources":["../../../src/animation/demos/html-content.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,UAAU,WAAW,CAAC,MAAc;IACxC,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,IAAI,EAAE,GAAG,GAAG,CAAA;IAEZ,IAAI,OAAO,GAAG,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;IAEnD,SAAS,OAAO;QACd,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO;YAAE,OAAM;QAEjC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;QACvC,IAAI,IAAI;YAAE,OAAM;QAEhB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;QAC1C,MAAM,CAAC,MAAM,EAAE,CAAA;QACf,qBAAqB,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,qBAAqB,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,QAAQ,EAAE,MAAM;gBAChB,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,SAAS;aACjB,CAAC;SACH,YAEA,KAAK,GACF,CACP,CAAA;AACH,CAAC"}

package/dist/animation/demos/interruptible-keyframes.d.ts

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

package/dist/animation/demos/interruptible-keyframes.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css, on, ref } from '@remix-run/ui';
+export function InterruptibleKeyframes() {
+    let box;
+    let currentAnimation = null;
+    function getCurrentScale() {
+        let matrix = new DOMMatrix(getComputedStyle(box).transform);
+        return matrix.a;
+    }
+    function interruptAnimation() {
+        if (currentAnimation) {
+            currentAnimation.commitStyles();
+            currentAnimation.cancel();
+            currentAnimation = null;
+        }
+    }
+    return () => (_jsx("div", { mix: [
+            ref((node) => (box = node)),
+            css({
+                width: 100,
+                height: 100,
+                backgroundColor: '#0cdcf7',
+                borderRadius: 5,
+            }),
+            on('pointerenter', () => {
+                interruptAnimation();
+                let startScale = getCurrentScale();
+                currentAnimation = box.animate([
+                    { transform: `scale(${startScale})`, offset: 0, easing: 'ease-in-out' },
+                    { transform: 'scale(1.1)', offset: 0.6, easing: 'ease-out' },
+                    { transform: 'scale(1.6)', offset: 1 },
+                ], {
+                    duration: 500,
+                    fill: 'forwards',
+                });
+            }),
+            on('pointerleave', () => {
+                interruptAnimation();
+                let startScale = getCurrentScale();
+                currentAnimation = box.animate([{ transform: `scale(${startScale})` }, { transform: 'scale(1)' }], {
+                    duration: 300,
+                    easing: 'ease-out',
+                    fill: 'forwards',
+                });
+            }),
+        ] }));
+}
+//# sourceMappingURL=interruptible-keyframes.js.map

package/dist/animation/demos/interruptible-keyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interruptible-keyframes.js","sourceRoot":"","sources":["../../../src/animation/demos/interruptible-keyframes.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAE5C,MAAM,UAAU,sBAAsB;IACpC,IAAI,GAAmB,CAAA;IACvB,IAAI,gBAAgB,GAAqB,IAAI,CAAA;IAE7C,SAAS,eAAe;QACtB,IAAI,MAAM,GAAG,IAAI,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;QAC3D,OAAO,MAAM,CAAC,CAAC,CAAA;IACjB,CAAC;IAED,SAAS,kBAAkB;QACzB,IAAI,gBAAgB,EAAE,CAAC;YACrB,gBAAgB,CAAC,YAAY,EAAE,CAAA;YAC/B,gBAAgB,CAAC,MAAM,EAAE,CAAA;YACzB,gBAAgB,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;YAC3B,GAAG,CAAC;gBACF,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,CAAC;aAChB,CAAC;YACF,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE;gBACtB,kBAAkB,EAAE,CAAA;gBACpB,IAAI,UAAU,GAAG,eAAe,EAAE,CAAA;gBAElC,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAC5B;oBACE,EAAE,SAAS,EAAE,SAAS,UAAU,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE;oBACvE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE;oBAC5D,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE;iBACvC,EACD;oBACE,QAAQ,EAAE,GAAG;oBACb,IAAI,EAAE,UAAU;iBACjB,CACF,CAAA;YACH,CAAC,CAAC;YACF,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE;gBACtB,kBAAkB,EAAE,CAAA;gBACpB,IAAI,UAAU,GAAG,eAAe,EAAE,CAAA;gBAElC,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAC5B,CAAC,EAAE,SAAS,EAAE,SAAS,UAAU,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAClE;oBACE,QAAQ,EAAE,GAAG;oBACb,MAAM,EAAE,UAAU;oBAClB,IAAI,EAAE,UAAU;iBACjB,CACF,CAAA;YACH,CAAC,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC"}

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

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

package/dist/animation/demos/keyframes.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+export function Keyframes() {
+    return () => (_jsx("div", { mix: [css({ padding: 60 })], children: _jsx("div", { mix: [
+                css({
+                    width: 100,
+                    height: 100,
+                    backgroundColor: '#888',
+                    borderRadius: 5,
+                    // 2s animation + 1s delay = 3s total cycle
+                    // Original times [0, 0.2, 0.5, 0.8, 1] scaled to first 66.67% of animation
+                    '@keyframes box-animation': {
+                        '0%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+                        '13.33%': { transform: 'scale(2) rotate(0deg)', borderRadius: '0%' },
+                        '33.33%': { transform: 'scale(2) rotate(180deg)', borderRadius: '50%' },
+                        '53.33%': { transform: 'scale(1) rotate(180deg)', borderRadius: '50%' },
+                        '66.67%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+                        '100%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+                    },
+                    animation: 'box-animation 3s ease-in-out infinite',
+                }),
+            ] }) }));
+}
+//# sourceMappingURL=keyframes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes.js","sourceRoot":"","sources":["../../../src/animation/demos/keyframes.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC,MAAM,UAAU,SAAS;IACvB,OAAO,GAAG,EAAE,CAAC,CACX,cAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,YAC9B,cACE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,GAAG;oBACX,eAAe,EAAE,MAAM;oBACvB,YAAY,EAAE,CAAC;oBACf,2CAA2C;oBAC3C,2EAA2E;oBAC3E,0BAA0B,EAAE;wBAC1B,IAAI,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,IAAI,EAAE;wBAChE,QAAQ,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,IAAI,EAAE;wBACpE,QAAQ,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,YAAY,EAAE,KAAK,EAAE;wBACvE,QAAQ,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,YAAY,EAAE,KAAK,EAAE;wBACvE,QAAQ,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,IAAI,EAAE;wBACpE,MAAM,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,IAAI,EAAE;qBACnE;oBACD,SAAS,EAAE,uCAAuC;iBACnD,CAAC;aACH,GACD,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/animation/demos/material-ripple.d.ts

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

package/dist/animation/demos/material-ripple.js

@@ -0,0 +1,127 @@
+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';
+export function MaterialRipple(handle) {
+    let ripples = [];
+    let idCounter = 0;
+    let buttonEl = null;
+    function createRipple(originX, originY) {
+        if (!buttonEl)
+            return;
+        let rect = buttonEl.getBoundingClientRect();
+        let localX = originX - rect.left;
+        let localY = originY - rect.top;
+        let dx = Math.max(localX, rect.width - localX);
+        let dy = Math.max(localY, rect.height - localY);
+        let radius = Math.sqrt(dx * dx + dy * dy);
+        let size = radius * 2;
+        let id = ++idCounter;
+        ripples = [...ripples, { id, x: localX, y: localY, size }];
+        handle.update();
+    }
+    function removeAllRipples() {
+        if (ripples.length > 0) {
+            ripples = [];
+            handle.update();
+        }
+    }
+    function createCenteredRipple() {
+        if (!buttonEl)
+            return;
+        let rect = buttonEl.getBoundingClientRect();
+        createRipple(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    }
+    return () => (_jsxs("button", { mix: [
+            ref((el) => {
+                buttonEl = el;
+            }),
+            css({
+                position: 'relative',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '10px 20px',
+                borderRadius: 4,
+                textTransform: 'uppercase',
+                backgroundColor: 'transparent',
+                color: '#7c3aed',
+                border: '1px solid #7c3aed',
+                userSelect: 'none',
+                cursor: 'pointer',
+                overflow: 'hidden',
+                letterSpacing: '0.2px',
+                WebkitTapHighlightColor: 'transparent',
+                transition: 'border-color 200ms linear, background-color 200ms linear',
+                '&:hover': {
+                    borderColor: '#6d28d9',
+                    backgroundColor: '#7c3aed20',
+                },
+                '&:focus-visible': {
+                    outline: '2px solid #7c3aed80',
+                    outlineOffset: 2,
+                },
+            }),
+            on('pointerdown', (event) => {
+                if (event.isPrimary === false)
+                    return;
+                createRipple(event.clientX, event.clientY);
+            }),
+            on('pointerup', removeAllRipples),
+            on('pointercancel', removeAllRipples),
+            on('pointerleave', removeAllRipples),
+            on('keydown', (event) => {
+                if (!(event.key === 'Enter' || event.key === ' ') || event.repeat)
+                    return;
+                event.preventDefault();
+                createCenteredRipple();
+            }),
+            on('keyup', (event) => {
+                if (!(event.key === 'Enter' || event.key === ' '))
+                    return;
+                event.preventDefault();
+                removeAllRipples();
+            }),
+            on('blur', removeAllRipples),
+        ], children: ["Click me", _jsx("span", { "aria-hidden": "true", mix: [
+                    css({
+                        position: 'absolute',
+                        inset: 0,
+                        overflow: 'hidden',
+                        borderRadius: 'inherit',
+                        pointerEvents: 'none',
+                    }),
+                ], children: ripples.map((ripple) => (
+                // Outer span: handles exit (fade out)
+                _jsx("span", { mix: [
+                        css({
+                            position: 'absolute',
+                            borderRadius: '50%',
+                        }),
+                        animateExit({
+                            opacity: 0,
+                            duration: 550,
+                            easing: 'ease-out',
+                        }),
+                    ], style: {
+                        width: ripple.size,
+                        height: ripple.size,
+                        left: ripple.x - ripple.size / 2,
+                        top: ripple.y - ripple.size / 2,
+                    }, children: _jsx("span", { mix: [
+                            css({
+                                display: 'block',
+                                width: '100%',
+                                height: '100%',
+                                borderRadius: 'inherit',
+                                backgroundColor: 'currentColor',
+                                opacity: 0.4,
+                            }),
+                            animateEntrance({
+                                opacity: 0,
+                                transform: 'scale(0)',
+                                duration: 300,
+                                easing: 'ease-out',
+                            }),
+                        ] }) }, ripple.id))) })] }));
+}
+//# sourceMappingURL=material-ripple.js.map

package/dist/animation/demos/material-ripple.js.map

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

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;