@remix-run/ui 0.2.0 → 0.4.0

package/dist/animation/demos/color-interpolation.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+/*
+ * A comparison of color interpolation methods.
+ *
+ * The "dimming effect" in browser animations happens because sRGB is
+ * gamma-encoded, so linear interpolation passes through desaturated colors.
+ *
+ * The OKLCH box uses the @property hack: register a custom property as <number>,
+ * animate it 0→1, then use color-mix(in oklch, ...) with that number.
+ */
+export function ColorInterpolation() {
+    return () => (_jsxs("div", { mix: [css({ display: 'flex', gap: 30, alignItems: 'center', justifyContent: 'center' })], children: [_jsx("style", { children: `
+          @property --color-t {
+            syntax: '<number>';
+            inherits: false;
+            initial-value: 0;
+          }
+
+          @keyframes color-t-anim {
+            0%, 100% { --color-t: 0; }
+            50% { --color-t: 1; }
+          }
+
+          .oklch-box {
+            animation: color-t-anim 4s linear infinite;
+            background-color: color-mix(
+              in oklch,
+              #ff0088 calc((1 - var(--color-t)) * 100%),
+              #0d63f8 calc(var(--color-t) * 100%)
+            );
+          }
+        ` }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })], children: [_jsx("div", { mix: [
+                            css({
+                                width: 100,
+                                height: 100,
+                                borderRadius: 8,
+                                backgroundColor: '#ff0088',
+                                '@keyframes srgb-color': {
+                                    '0%, 100%': { backgroundColor: '#ff0088' },
+                                    '50%': { backgroundColor: '#0d63f8' },
+                                },
+                                animation: 'srgb-color 4s linear infinite',
+                            }),
+                        ] }), _jsx("div", { mix: [css({ fontSize: 14, color: '#666' })], children: "sRGB" })] }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })], children: [_jsx("div", { className: "oklch-box", mix: [
+                            css({
+                                width: 100,
+                                height: 100,
+                                borderRadius: 8,
+                            }),
+                        ] }), _jsx("div", { mix: [css({ fontSize: 14, color: '#666' })], children: "OKLCH" })] })] }));
+}
+//# sourceMappingURL=color-interpolation.js.map

package/dist/animation/demos/color-interpolation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-interpolation.js","sourceRoot":"","sources":["../../../src/animation/demos/color-interpolation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,GAAG,EAAE,CAAC,CACX,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,CAAC,aAC3F,0BACG;;;;;;;;;;;;;;;;;;;;SAoBA,GACK,EAER,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,aAC1F,cACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,KAAK,EAAE,GAAG;gCACV,MAAM,EAAE,GAAG;gCACX,YAAY,EAAE,CAAC;gCACf,eAAe,EAAE,SAAS;gCAC1B,uBAAuB,EAAE;oCACvB,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;oCAC1C,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;iCACtC;gCACD,SAAS,EAAE,+BAA+B;6BAC3C,CAAC;yBACH,GACD,EACF,cAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,qBAAY,IACxD,EAEN,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,aAC1F,cACE,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,KAAK,EAAE,GAAG;gCACV,MAAM,EAAE,GAAG;gCACX,YAAY,EAAE,CAAC;6BAChB,CAAC;yBACH,GACD,EACF,cAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,sBAAa,IACzD,IACF,CACP,CAAA;AACH,CAAC"}

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

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

package/dist/animation/demos/cube.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, ref } from '@remix-run/ui';
+export function Cube(handle) {
+    let cube;
+    function animate(t) {
+        if (handle.signal.aborted)
+            return;
+        let rotate = Math.sin(t / 10000) * 200;
+        let y = (1 + Math.sin(t / 1000)) * -25;
+        cube.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`;
+        requestAnimationFrame(animate);
+    }
+    return () => (_jsx("div", { mix: [
+            css({
+                perspective: '400px',
+                width: '100px',
+                height: '100px',
+            }),
+        ], children: _jsxs("div", { mix: [
+                ref((node) => {
+                    cube = node;
+                    requestAnimationFrame(animate);
+                }),
+                css({
+                    width: '100px',
+                    height: '100px',
+                    position: 'relative',
+                    transformStyle: 'preserve-3d',
+                }),
+            ], children: [_jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateY(0deg) translateZ(50px)',
+                            backgroundColor: '#ff0055',
+                        }),
+                    ] }), _jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateY(90deg) translateZ(50px)',
+                            backgroundColor: '#0099ff',
+                        }),
+                    ] }), _jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateY(180deg) translateZ(50px)',
+                            backgroundColor: '#22cc88',
+                        }),
+                    ] }), _jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateY(-90deg) translateZ(50px)',
+                            backgroundColor: '#ffaa00',
+                        }),
+                    ] }), _jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateX(90deg) translateZ(50px)',
+                            backgroundColor: '#aa00ff',
+                        }),
+                    ] }), _jsx("div", { mix: [
+                        css({
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            opacity: 0.6,
+                            transform: 'rotateX(-90deg) translateZ(50px)',
+                            backgroundColor: '#ff00aa',
+                        }),
+                    ] })] }) }));
+}
+//# sourceMappingURL=cube.js.map

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

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

package/dist/animation/demos/default-animate.d.ts

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

package/dist/animation/demos/default-animate.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateLayout } from '@remix-run/ui/animation';
+let nextId = 1;
+function createItem() {
+    return { id: nextId++, label: `Item ${nextId - 1}` };
+}
+export function DefaultAnimate(handle) {
+    let items = [createItem(), createItem()];
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 10,
+                width: 200,
+                alignSelf: 'flex-start',
+            }),
+        ], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 8, marginBottom: 8 })], children: [_jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 12px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#10b981',
+                                color: 'white',
+                                cursor: 'pointer',
+                                fontWeight: 500,
+                                '&:hover': { backgroundColor: '#059669' },
+                            }),
+                            on('click', () => {
+                                items.unshift(createItem());
+                                handle.update();
+                            }),
+                        ], children: "Add" }), _jsx("button", { mix: [
+                            css({
+                                flex: 1,
+                                padding: '8px 12px',
+                                border: 'none',
+                                borderRadius: 6,
+                                backgroundColor: '#6366f1',
+                                color: 'white',
+                                cursor: 'pointer',
+                                fontWeight: 500,
+                                '&:hover': { backgroundColor: '#4f46e5' },
+                            }),
+                            on('click', () => {
+                                // Shuffle the array
+                                for (let i = items.length - 1; i > 0; i--) {
+                                    let j = Math.floor(Math.random() * (i + 1));
+                                    [items[i], items[j]] = [items[j], items[i]];
+                                }
+                                handle.update();
+                            }),
+                        ], children: "Shuffle" })] }), items.map((item) => (_jsxs("div", { mix: [
+                    animateEntrance(),
+                    animateLayout(),
+                    css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '12px 16px',
+                        backgroundColor: '#f1f5f9',
+                        borderRadius: 8,
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: '#334155',
+                    }),
+                ], children: [_jsx("span", { children: item.label }), _jsx("button", { mix: [
+                            css({
+                                width: 20,
+                                height: 20,
+                                padding: 0,
+                                border: 'none',
+                                borderRadius: 4,
+                                backgroundColor: 'transparent',
+                                color: '#94a3b8',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                '&:hover': { backgroundColor: '#e2e8f0', color: '#64748b' },
+                            }),
+                            on('click', () => {
+                                items = items.filter((i) => i.id !== item.id);
+                                handle.update();
+                            }),
+                        ], children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }, item.id)))] }));
+}
+//# sourceMappingURL=default-animate.js.map

package/dist/animation/demos/default-animate.js.map

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

package/dist/animation/demos/drag-release.d.ts

@@ -0,0 +1,24 @@
+export declare const dragVelocityReleaseEventType: "rmx:drag-velocity-release";
+declare global {
+    interface HTMLElementEventMap {
+        [dragVelocityReleaseEventType]: DragVelocityEvent;
+    }
+}
+export declare class DragVelocityEvent extends Event {
+    clientX: number;
+    clientY: number;
+    velocityX: number;
+    velocityY: number;
+    constructor(type: typeof dragVelocityReleaseEventType, init: {
+        clientX: number;
+        clientY: number;
+        velocityX: number;
+        velocityY: number;
+    });
+}
+declare const baseDragVelocityEvents: import("@remix-run/ui").MixinFactory<HTMLElement, [], import("@remix-run/ui").ElementProps>;
+type DragVelocityEventsMixin = typeof baseDragVelocityEvents & {
+    readonly release: typeof dragVelocityReleaseEventType;
+};
+export declare const dragVelocityEvents: DragVelocityEventsMixin;
+export {};

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