@remix-run/ui 0.1.2 → 0.3.0

package/dist/animation/demos/drag-release.js

@@ -0,0 +1,96 @@
+import { addEventListeners, createMixin } from '@remix-run/ui';
+export const dragVelocityReleaseEventType = 'rmx:drag-velocity-release';
+export class DragVelocityEvent extends Event {
+    clientX;
+    clientY;
+    velocityX; // px/s
+    velocityY; // px/s
+    constructor(type, init) {
+        super(type, { bubbles: true, cancelable: true });
+        this.clientX = init.clientX;
+        this.clientY = init.clientY;
+        this.velocityX = init.velocityX;
+        this.velocityY = init.velocityY;
+    }
+}
+const baseDragVelocityEvents = createMixin((handle) => {
+    let target;
+    let isTracking = false;
+    let pointerId = null;
+    let lastX = 0;
+    let lastY = 0;
+    let lastTime = 0;
+    let velocityX = 0;
+    let velocityY = 0;
+    let onPointerDown = (event) => {
+        if (!event.isPrimary)
+            return;
+        isTracking = true;
+        pointerId = event.pointerId;
+        lastX = event.clientX;
+        lastY = event.clientY;
+        lastTime = performance.now();
+        velocityX = 0;
+        velocityY = 0;
+        target.setPointerCapture(event.pointerId);
+    };
+    let onPointerMove = (event) => {
+        if (!isTracking)
+            return;
+        if (!event.isPrimary)
+            return;
+        if (pointerId != null && event.pointerId !== pointerId)
+            return;
+        let now = performance.now();
+        let dt = (now - lastTime) / 1000; // seconds
+        if (dt > 0) {
+            // Smooth velocity with some decay of previous velocity
+            let newVelocityX = (event.clientX - lastX) / dt;
+            let newVelocityY = (event.clientY - lastY) / dt;
+            velocityX = velocityX * 0.5 + newVelocityX * 0.5;
+            velocityY = velocityY * 0.5 + newVelocityY * 0.5;
+        }
+        lastX = event.clientX;
+        lastY = event.clientY;
+        lastTime = now;
+    };
+    let onPointerUp = (event) => {
+        if (!isTracking)
+            return;
+        if (!event.isPrimary)
+            return;
+        if (pointerId != null && event.pointerId !== pointerId)
+            return;
+        isTracking = false;
+        pointerId = null;
+        // If too much time passed since last move, velocity is zero
+        let timeSinceLastMove = (performance.now() - lastTime) / 1000;
+        if (timeSinceLastMove > 0.1) {
+            velocityX = 0;
+            velocityY = 0;
+        }
+        target.dispatchEvent(new DragVelocityEvent(dragVelocityReleaseEventType, {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            velocityX,
+            velocityY,
+        }));
+    };
+    let onPointerCancel = () => {
+        isTracking = false;
+        pointerId = null;
+    };
+    handle.addEventListener('insert', (event) => {
+        target = event.node;
+        addEventListeners(target, handle.signal, {
+            pointerdown: onPointerDown,
+            pointermove: onPointerMove,
+            pointerup: onPointerUp,
+            pointercancel: onPointerCancel,
+        });
+    });
+});
+export const dragVelocityEvents = Object.assign(baseDragVelocityEvents, {
+    release: dragVelocityReleaseEventType,
+});
+//# sourceMappingURL=drag-release.js.map

package/dist/animation/demos/drag-release.js.map

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

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

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

package/dist/animation/demos/enter.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+import { animateEntrance, spring } from '@remix-run/ui/animation';
+export function EnterAnimation() {
+    return () => (_jsx("div", { mix: [
+            css({
+                width: 100,
+                height: 100,
+                backgroundColor: '#dd00ee',
+                borderRadius: '50%',
+            }),
+            animateEntrance({
+                opacity: 0,
+                transform: 'scale(0)',
+                ...spring({ duration: 400, bounce: 0.5 }),
+            }),
+        ] }));
+}
+//# sourceMappingURL=enter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enter.js","sourceRoot":"","sources":["../../../src/animation/demos/enter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEjE,MAAM,UAAU,cAAc;IAC5B,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,KAAK;aACpB,CAAC;YACF,eAAe,CAAC;gBACd,OAAO,EAAE,CAAC;gBACV,SAAS,EAAE,UAAU;gBACrB,GAAG,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;aAC1C,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC"}

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

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

package/dist/animation/demos/exit.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation';
+export function ExitAnimation(handle) {
+    let isVisible = true;
+    let shouldAnimate = false;
+    handle.queueTask(() => {
+        shouldAnimate = true;
+    });
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100px',
+                height: '160px',
+                position: 'relative',
+            }),
+        ], children: [isVisible && (_jsx("div", { mix: [
+                    css({
+                        width: '100px',
+                        height: '100px',
+                        backgroundColor: '#0cdcf7',
+                        borderRadius: '10px',
+                    }),
+                    animateEntrance(shouldAnimate && {
+                        opacity: 0,
+                        transform: 'scale(0)',
+                        ...spring('snappy'),
+                    }),
+                    animateExit({
+                        opacity: 0,
+                        transform: 'scale(0)',
+                        ...spring(),
+                    }),
+                ] }, "exit-animation")), _jsx("button", { mix: [
+                    css({
+                        backgroundColor: '#0cdcf7',
+                        borderRadius: '10px',
+                        padding: '10px 20px',
+                        color: '#0f1115',
+                        border: 'none',
+                        cursor: 'pointer',
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        transition: `transform 100ms ease-in-out`,
+                        '&:active': {
+                            transform: 'translateY(1px)',
+                        },
+                    }),
+                    on('click', () => {
+                        isVisible = !isVisible;
+                        handle.update();
+                    }),
+                ], children: isVisible ? 'Hide' : 'Show' })] }));
+}
+//# sourceMappingURL=exit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"exit.js","sourceRoot":"","sources":["../../../src/animation/demos/exit.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAE9E,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,IAAI,SAAS,GAAG,IAAI,CAAA;IAEpB,IAAI,aAAa,GAAG,KAAK,CAAA;IACzB,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,aAAa,GAAG,IAAI,CAAA;IACtB,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,QAAQ,EAAE,UAAU;aACrB,CAAC;SACH,aAEA,SAAS,IAAI,CACZ,cAEE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,KAAK,EAAE,OAAO;wBACd,MAAM,EAAE,OAAO;wBACf,eAAe,EAAE,SAAS;wBAC1B,YAAY,EAAE,MAAM;qBACrB,CAAC;oBACF,eAAe,CACb,aAAa,IAAI;wBACf,OAAO,EAAE,CAAC;wBACV,SAAS,EAAE,UAAU;wBACrB,GAAG,MAAM,CAAC,QAAQ,CAAC;qBACpB,CACF;oBACD,WAAW,CAAC;wBACV,OAAO,EAAE,CAAC;wBACV,SAAS,EAAE,UAAU;wBACrB,GAAG,MAAM,EAAE;qBACZ,CAAC;iBACH,IApBG,gBAAgB,CAqBpB,CACH,EACD,iBACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,eAAe,EAAE,SAAS;wBAC1B,YAAY,EAAE,MAAM;wBACpB,OAAO,EAAE,WAAW;wBACpB,KAAK,EAAE,SAAS;wBAChB,MAAM,EAAE,MAAM;wBACd,MAAM,EAAE,SAAS;wBACjB,QAAQ,EAAE,UAAU;wBACpB,MAAM,EAAE,CAAC;wBACT,IAAI,EAAE,CAAC;wBACP,KAAK,EAAE,CAAC;wBACR,UAAU,EAAE,6BAA6B;wBACzC,UAAU,EAAE;4BACV,SAAS,EAAE,iBAAiB;yBAC7B;qBACF,CAAC;oBACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;wBACf,SAAS,GAAG,CAAC,SAAS,CAAA;wBACtB,MAAM,CAAC,MAAM,EAAE,CAAA;oBACjB,CAAC,CAAC;iBACH,YAEA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GACrB,IACL,CACP,CAAA;AACH,CAAC"}

package/dist/animation/demos/flip-toggle.d.ts

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

package/dist/animation/demos/flip-toggle.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateLayout } from '@remix-run/ui/animation';
+export function FlipToggle(handle) {
+    let isOn = false;
+    return () => (_jsx("button", { mix: [
+            css({
+                width: 90,
+                height: 50,
+                backgroundColor: 'rgba(153, 17, 255, 0.2)',
+                borderRadius: 50,
+                cursor: 'pointer',
+                display: 'flex',
+                padding: 10,
+                border: 'none',
+            }),
+            on('click', () => {
+                isOn = !isOn;
+                handle.update();
+            }),
+        ], style: {
+            // The actual layout property that changes
+            justifyContent: isOn ? 'flex-start' : 'flex-end',
+        }, children: _jsx("div", { mix: [
+                css({
+                    width: 30,
+                    height: 30,
+                    backgroundColor: '#9911ff',
+                    borderRadius: '50%',
+                }),
+                animateLayout({
+                    duration: 200,
+                    easing: 'ease-in-out',
+                }),
+            ] }) }));
+}
+//# sourceMappingURL=flip-toggle.js.map

package/dist/animation/demos/flip-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-toggle.js","sourceRoot":"","sources":["../../../src/animation/demos/flip-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAe,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAEvD,MAAM,UAAU,UAAU,CAAC,MAAc;IACvC,IAAI,IAAI,GAAG,KAAK,CAAA;IAEhB,OAAO,GAAG,EAAE,CAAC,CACX,iBACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,eAAe,EAAE,yBAAyB;gBAC1C,YAAY,EAAE,EAAE;gBAChB,MAAM,EAAE,SAAS;gBACjB,OAAO,EAAE,MAAM;gBACf,OAAO,EAAE,EAAE;gBACX,MAAM,EAAE,MAAM;aACf,CAAC;YACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gBACf,IAAI,GAAG,CAAC,IAAI,CAAA;gBACZ,MAAM,CAAC,MAAM,EAAE,CAAA;YACjB,CAAC,CAAC;SACH,EACD,KAAK,EAAE;YACL,0CAA0C;YAC1C,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;SACjD,YAED,cACE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,eAAe,EAAE,SAAS;oBAC1B,YAAY,EAAE,KAAK;iBACpB,CAAC;gBACF,aAAa,CAAC;oBACZ,QAAQ,EAAE,GAAG;oBACb,MAAM,EAAE,aAAa;iBACtB,CAAC;aACH,GACD,GACK,CACV,CAAA;AACH,CAAC"}

package/dist/animation/demos/hold-to-confirm.d.ts

@@ -0,0 +1,13 @@
+import { type Handle } from '@remix-run/ui';
+export declare function HoldToConfirm(handle: Handle): () => import("@remix-run/ui").RemixElement;
+declare const pressConfirmStartEventType: "demo:press-confirm-start";
+declare const pressConfirmCancelEventType: "demo:press-confirm-cancel";
+declare const pressConfirmEndEventType: "demo:press-confirm-end";
+declare global {
+    interface HTMLElementEventMap {
+        [pressConfirmStartEventType]: Event;
+        [pressConfirmCancelEventType]: Event;
+        [pressConfirmEndEventType]: Event;
+    }
+}
+export {};

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":";AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAe,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAE9E,OAAO;AACP,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,0BAA0B,GAAG;IACjC,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,UAAU;CACnB,CAAA;AAED,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,IAAI,SAAS,GAAG,KAAK,CAAA;IAErB,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,SAAS,EAAE,GAAG;gBACd,+CAA+C;gBAC/C,OAAO,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;aAC/B,CAAC;SACH,aAEA,CAAC,SAAS,IAAI,CACb,KAAC,UAAU,IAET,SAAS,EAAE,GAAG,EAAE;oBACd,SAAS,GAAG,IAAI,CAAA;oBAChB,MAAM,CAAC,MAAM,EAAE,CAAA;gBACjB,CAAC,IAJG,aAAa,CAKjB,CACH,EACA,SAAS,IAAI,CACZ,KAAC,YAAY,IAEX,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,GAAG,KAAK,CAAA;oBACjB,MAAM,CAAC,MAAM,EAAE,CAAA;gBACjB,CAAC,IAJG,WAAW,CAKf,CACH,IACG,CACP,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,MAAyC;IAC3D,IAAI,UAAU,GAAG,KAAK,CAAA;IAEtB,OAAO,GAAG,EAAE,CAAC,CACX,kBACE,GAAG,EAAE;YACH,WAAW,CAAC,mBAAmB,CAAC;YAChC,GAAG,CAAC;gBACF,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,MAAM;gBACd,YAAY,EAAE,EAAE;gBAChB,eAAe,EAAE,SAAS;gBAC1B,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,GAAG;gBACf,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,MAAM;gBAClB,UAAU,EAAE,sBAAsB;gBAClC,SAAS,EAAE;oBACT,OAAO,EAAE,kCAAkC;oBAC3C,aAAa,EAAE,CAAC;iBACjB;gBACD,UAAU,EAAE;oBACV,SAAS,EAAE,aAAa;iBACzB;aACF,CAAC;YACF,YAAY,EAAE;YACd,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE;gBAC1B,UAAU,GAAG,IAAI,CAAA;gBACjB,MAAM,CAAC,MAAM,EAAE,CAAA;YACjB,CAAC,CAAC;YACF,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,EAAE;gBAC3B,IAAI,CAAC,UAAU;oBAAE,OAAM;gBACvB,UAAU,GAAG,KAAK,CAAA;gBAClB,MAAM,CAAC,MAAM,EAAE,CAAA;YACjB,CAAC,CAAC;YACF,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,EAAE;gBACxB,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAA;YAC1B,CAAC,CAAC;SACH,aAED,cACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,CAAC;wBACR,eAAe,EAAE,oBAAoB;wBACrC,eAAe,EAAE,MAAM;qBACxB,CAAC;iBACH,EACD,KAAK,EAAE;oBACL,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;oBACjD,UAAU,EAAE,UAAU;wBACpB,CAAC,CAAC,aAAa,kBAAkB,WAAW;wBAC5C,CAAC,CAAC,aAAa,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;iBACxD,GACD,EAEF,gBACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,QAAQ,EAAE,UAAU;wBACpB,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,GAAG,EAAE,CAAC;qBACP,CAAC;iBACH,aAED,KAAC,SAAS,KAAG,sBAER,IACA,CACV,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,MAAuC;IAC3D,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,eAAe,CAAC,0BAA0B,CAAC;YAC3C,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,EAAE;aACR,CAAC;SACH,aAED,eACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,GAAG,EAAE,CAAC;wBACN,KAAK,EAAE,SAAS;wBAChB,QAAQ,EAAE,EAAE;wBACZ,UAAU,EAAE,GAAG;qBAChB,CAAC;iBACH,aAED,KAAC,SAAS,KAAG,eAET,EAEN,iBACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,OAAO,EAAE,UAAU;wBACnB,MAAM,EAAE,mBAAmB;wBAC3B,YAAY,EAAE,CAAC;wBACf,eAAe,EAAE,OAAO;wBACxB,KAAK,EAAE,SAAS;wBAChB,QAAQ,EAAE,EAAE;wBACZ,MAAM,EAAE,SAAS;wBACjB,UAAU,EAAE,gBAAgB;wBAC5B,SAAS,EAAE;4BACT,eAAe,EAAE,SAAS;4BAC1B,WAAW,EAAE,SAAS;yBACvB;qBACF,CAAC;oBACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;iBAC1C,2BAGM,IACL,CACP,CAAA;AACH,CAAC;AAED,SAAS,SAAS;IAChB,OAAO,GAAG,EAAE,CAAC,CACX,eACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,mBAAU,MAAM,EAAC,cAAc,GAAG,EAClC,eAAM,CAAC,EAAC,gFAAgF,GAAG,IACvF,CACP,CAAA;AACH,CAAC;AAED,SAAS,SAAS;IAChB,OAAO,GAAG,EAAE,CAAC,CACX,cACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,YAEtB,mBAAU,MAAM,EAAC,gBAAgB,GAAG,GAChC,CACP,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,IAAI,CAAA;AAC/B,MAAM,0BAA0B,GAAG,0BAAmC,CAAA;AACtE,MAAM,2BAA2B,GAAG,2BAAoC,CAAA;AACxE,MAAM,wBAAwB,GAAG,wBAAiC,CAAA;AAUlE,MAAM,gBAAgB,GAAG,WAAW,CAAc,CAAC,MAAM,EAAE,EAAE;IAC3D,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,QAAQ,GAAG,KAAK,CAAA;IAEpB,IAAI,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,KAAK,CAAC,CAAA;YACnB,KAAK,GAAG,CAAC,CAAA;QACX,CAAC;IACH,CAAC,CAAA;IAED,IAAI,KAAK,GAAG,CAAC,MAAe,EAAE,EAAE;QAC9B,UAAU,EAAE,CAAA;QACZ,QAAQ,GAAG,IAAI,CAAA;QACf,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,0BAA0B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAC9E,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7B,KAAK,GAAG,CAAC,CAAA;YACT,QAAQ,GAAG,KAAK,CAAA;YAChB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAC9E,CAAC,EAAE,kBAAkB,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,IAAI,MAAM,GAAG,CAAC,MAAe,EAAE,EAAE;QAC/B,IAAI,CAAC,QAAQ;YAAE,OAAM;QACrB,UAAU,EAAE,CAAA;QACZ,QAAQ,GAAG,KAAK,CAAA;QAChB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,2BAA2B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACjF,CAAC,CAAA;IAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QACrC,UAAU,EAAE,CAAA;QACZ,QAAQ,GAAG,KAAK,CAAA;IAClB,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAChB,KAAC,MAAM,CAAC,OAAO,OACT,KAAK,EACT,GAAG,EAAE;YACH,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC1B,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK;oBAAE,OAAM;gBACrC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC5B,CAAC,CAAC;YACF,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACxB,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC7B,CAAC,CAAC;YACF,EAAE,CAAC,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5B,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC7B,CAAC,CAAC;YACF,EAAE,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC3B,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC7B,CAAC,CAAC;YACF,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;gBACtB,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;oBAAE,OAAM;gBACzE,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC5B,CAAC,CAAC;YACF,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACpB,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;oBAAE,OAAM;gBACzD,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC7B,CAAC,CAAC;YACF,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YAC7B,CAAC,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAQF,MAAM,YAAY,GAAsB,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IACtE,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,2BAA2B;IACnC,GAAG,EAAE,wBAAwB;CAC9B,CAAC,CAAA"}

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;