@remix-run/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,5 @@
+/**
+ * @name Animation Gallery
+ * @description A collection of motion and animation experiments adapted from the standalone demos.
+ */
+export default function AnimationGallery(): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/animation.demo.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { DefaultAnimate } from "./default-animate.js";
+import { EnterAnimation } from "./enter.js";
+import { ExitAnimation } from "./exit.js";
+import { Press } from "./press.js";
+import { HTMLContent } from "./html-content.js";
+import { Keyframes } from "./keyframes.js";
+import { InterruptibleKeyframes } from "./interruptible-keyframes.js";
+import { RollingSquare } from "./rolling-square.js";
+import { Rotate } from "./rotate.js";
+import { TransitionOptions } from "./transition-options.js";
+import { Cube } from "./cube.js";
+import { SharedLayout } from "./shared-layout.js";
+import { AspectRatio } from "./aspect-ratio.js";
+import { BouncySwitch } from "./bouncy-switch.js";
+import { ColorInterpolation } from "./color-interpolation.js";
+import { FlipToggle } from "./flip-toggle.js";
+import { Reordering } from "./reordering.js";
+import { MultiStateBadge } from "./multi-state-badge.js";
+import { HoldToConfirm } from "./hold-to-confirm.js";
+import { MaterialRipple } from "./material-ripple.js";
+function Tile(handle) {
+    let remountKey = 0;
+    return () => {
+        let { title, children, notes } = handle.props;
+        return (_jsxs("div", { mix: [
+                css({
+                    backgroundColor: 'white',
+                    padding: '40px',
+                    borderRadius: 12,
+                    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexDirection: 'column',
+                    gap: 12,
+                    position: 'relative',
+                }),
+            ], children: [_jsx("button", { mix: [
+                        css({
+                            position: 'absolute',
+                            bottom: 8,
+                            right: 8,
+                            width: 18,
+                            height: 18,
+                            padding: 0,
+                            border: 'none',
+                            background: 'transparent',
+                            cursor: 'pointer',
+                            opacity: 0.4,
+                            '&:hover': {
+                                opacity: 1,
+                            },
+                        }),
+                        on('click', () => {
+                            remountKey++;
+                            handle.update();
+                        }),
+                    ], title: "Replay animation", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M1 4v6h6M23 20v-6h-6" }), _jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })] }) }), _jsx("h3", { mix: [css({ margin: 0 })], children: title }), _jsx("div", { mix: [
+                        css({
+                            flex: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minHeight: 280,
+                        }),
+                    ], children: children }, remountKey), notes && (_jsx("p", { mix: [
+                        css({
+                            margin: 0,
+                            fontSize: 12,
+                            color: '#666',
+                            textAlign: 'center',
+                            maxWidth: '200px',
+                        }),
+                    ], children: notes }))] }));
+    };
+}
+/**
+ * @name Animation Gallery
+ * @description A collection of motion and animation experiments adapted from the standalone demos.
+ */
+export default function AnimationGallery() {
+    return () => (_jsxs(_Fragment, { children: [_jsx("h1", { mix: [css({ marginBottom: 0, '& + p': { marginTop: 0 } })], children: "Animations" }), _jsxs("p", { children: ["Most animations are adapted from ", _jsx("a", { href: "https://www.motion.dev", children: "Motion" }), ". Thank you for your work ", _jsx("a", { href: "https://motion.dev/@matt", children: "Matt Perry" }), "!"] }), _jsxs("div", { mix: [
+                    css({
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+                        gap: 24,
+                        marginTop: 40,
+                    }),
+                ], children: [_jsx(Tile, { title: "Default Animate", notes: "animateEntrance + animateLayout defaults", children: _jsx(DefaultAnimate, {}) }), _jsx(Tile, { title: "Rolling Square", notes: "CSS transition with spring() timing function", children: _jsx(RollingSquare, {}) }), _jsx(Tile, { title: "Enter Animation", notes: "animateEntrance() with spring physics", children: _jsx(EnterAnimation, {}) }), _jsx(Tile, { title: "Exit Animation", notes: "animateEntrance() + animateExit()", children: _jsx(ExitAnimation, {}) }), _jsx(Tile, { title: "Press Interaction", notes: "CSS transition + pointer/keyboard events", children: _jsx(Press, {}) }), _jsx(Tile, { title: "HTML Content", notes: "rAF loop with spring iterator for text", children: _jsx(HTMLContent, {}) }), _jsx(Tile, { title: "Keyframes", notes: "CSS @keyframes with infinite loop", children: _jsx(Keyframes, {}) }), _jsx(Tile, { title: "Interruptible Keyframes", notes: "Web Animations API with commitStyles()", children: _jsx(InterruptibleKeyframes, {}) }), _jsx(Tile, { title: "Rotate", notes: "CSS @keyframes (one-shot)", children: _jsx(Rotate, {}) }), _jsx(Tile, { title: "Transition Options", notes: "animateEntrance() with cubic-bezier + delay", children: _jsx(TransitionOptions, {}) }), _jsx(Tile, { title: "3D Cube", notes: "rAF loop with direct style manipulation", children: _jsx(Cube, {}) }), _jsx(Tile, { title: "Shared Layout", notes: "CSS Grid overlap for simultaneous enter/exit", children: _jsx(SharedLayout, {}) }), _jsx(Tile, { title: "Aspect Ratio", children: _jsx(AspectRatio, {}) }), _jsx(Tile, { title: "Bouncy Switch", notes: "Spring up, bounce down with CSS linear()", children: _jsx(BouncySwitch, {}) }), _jsx(Tile, { title: "FLIP Toggle", notes: "animateLayout() with interruptible WAAPI", children: _jsx(FlipToggle, {}) }), _jsx(Tile, { title: "Reordering", notes: "animateLayout() with auto-shuffling list", children: _jsx(Reordering, {}) }), _jsx(Tile, { title: "Color Interpolation", notes: "sRGB vs OKLCH color space", children: _jsx(ColorInterpolation, {}) }), _jsx(Tile, { title: "Multi-State Badge", notes: "Animated icon/label swap with WAAPI shake", children: _jsx(MultiStateBadge, {}) }), _jsx(Tile, { title: "Hold to Confirm", notes: "Custom interaction with progress tracking", children: _jsx(HoldToConfirm, {}) }), _jsx(Tile, { title: "Material Ripple", notes: "Pointer-tracked ripples with enter/exit animations", children: _jsx(MaterialRipple, {}) })] })] }));
+}
+//# sourceMappingURL=animation.demo.js.map

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

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

package/dist/animation/demos/aspect-ratio.d.ts

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

package/dist/animation/demos/aspect-ratio.js

@@ -0,0 +1,69 @@
+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 AspectRatio(handle) {
+    let aspectRatio = 1;
+    let width = 100;
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+                gap: 20,
+            }),
+        ], children: [_jsx("div", { mix: [
+                    css({
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: 180,
+                        height: 180,
+                    }),
+                ], children: _jsx("div", { mix: [
+                        css({
+                            backgroundColor: '#8df0cc',
+                            borderRadius: 10,
+                            transition: spring.transition(['width', 'aspect-ratio'], 'bouncy'),
+                        }),
+                    ], style: {
+                        width,
+                        aspectRatio,
+                    } }) }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' })], children: [_jsxs("label", { mix: [
+                            css({
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 10,
+                                fontSize: 13,
+                                color: '#666',
+                            }),
+                        ], children: [_jsx("span", { mix: [css({ width: 50, flexShrink: 0 })], children: "Ratio" }), _jsx("input", { type: "range", value: aspectRatio, min: 0.2, max: 3, step: 0.1, mix: [
+                                    css(rangeInputCss),
+                                    on('input', (event) => {
+                                        let value = event.currentTarget.value;
+                                        aspectRatio = parseFloat(value);
+                                        handle.update();
+                                    }),
+                                ] }), _jsx("span", { mix: [css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })], children: aspectRatio.toFixed(1) })] }), _jsxs("label", { mix: [
+                            css({
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 10,
+                                fontSize: 13,
+                                color: '#666',
+                            }),
+                        ], children: [_jsx("span", { mix: [css({ width: 50, flexShrink: 0 })], children: "Width" }), _jsx("input", { type: "range", value: width, min: 20, max: 160, step: 5, mix: [
+                                    css(rangeInputCss),
+                                    on('input', (event) => {
+                                        let value = event.currentTarget.value;
+                                        width = parseFloat(value);
+                                        handle.update();
+                                    }),
+                                ] }), _jsx("span", { mix: [css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })], children: width })] })] })] }));
+}
+const rangeInputCss = {
+    flex: 1,
+    accentColor: '#8df0cc',
+    cursor: 'pointer',
+};
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/animation/demos/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../src/animation/demos/aspect-ratio.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,WAAW,CAAC,MAAc;IACxC,IAAI,WAAW,GAAG,CAAC,CAAA;IACnB,IAAI,KAAK,GAAG,GAAG,CAAA;IAEf,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,aAAa,EAAE,QAAQ;gBACvB,GAAG,EAAE,EAAE;aACR,CAAC;SACH,aAED,cACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,OAAO,EAAE,MAAM;wBACf,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,QAAQ;wBACpB,KAAK,EAAE,GAAG;wBACV,MAAM,EAAE,GAAG;qBACZ,CAAC;iBACH,YAED,cACE,GAAG,EAAE;wBACH,GAAG,CAAC;4BACF,eAAe,EAAE,SAAS;4BAC1B,YAAY,EAAE,EAAE;4BAChB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,CAAC;yBACnE,CAAC;qBACH,EACD,KAAK,EAAE;wBACL,KAAK;wBACL,WAAW;qBACZ,GACD,GACE,EACN,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,aACnF,iBACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,OAAO,EAAE,MAAM;gCACf,UAAU,EAAE,QAAQ;gCACpB,GAAG,EAAE,EAAE;gCACP,QAAQ,EAAE,EAAE;gCACZ,KAAK,EAAE,MAAM;6BACd,CAAC;yBACH,aAED,eAAM,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,sBAAc,EAC5D,gBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,WAAW,EAClB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,GAAG,EACT,GAAG,EAAE;oCACH,GAAG,CAAC,aAAa,CAAC;oCAClB,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;wCACpB,IAAI,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;wCAErC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;wCAC/B,MAAM,CAAC,MAAM,EAAE,CAAA;oCACjB,CAAC,CAAC;iCACH,GACD,EACF,eAAM,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC,CAAC,YACpF,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAClB,IACD,EACR,iBACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,OAAO,EAAE,MAAM;gCACf,UAAU,EAAE,QAAQ;gCACpB,GAAG,EAAE,EAAE;gCACP,QAAQ,EAAE,EAAE;gCACZ,KAAK,EAAE,MAAM;6BACd,CAAC;yBACH,aAED,eAAM,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,sBAAc,EAC5D,gBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,EACP,GAAG,EAAE;oCACH,GAAG,CAAC,aAAa,CAAC;oCAClB,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;wCACpB,IAAI,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;wCAErC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;wCACzB,MAAM,CAAC,MAAM,EAAE,CAAA;oCACjB,CAAC,CAAC;iCACH,GACD,EACF,eAAM,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC,CAAC,YACpF,KAAK,GACD,IACD,IACJ,IACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,aAAa,GAAG;IACpB,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS;CACT,CAAA"}

package/dist/animation/demos/bouncy-switch.d.ts

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

package/dist/animation/demos/bouncy-switch.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } 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';
+const bounceEasing = `linear(0, 0.258 12%, 0.424 18.3%, 0.633 24.4%, 0.999 33.3%, 0.783 39.8%, 0.733 42.5%, 0.716 45.1%, 0.731 47.6%, 0.777 50.2%, 0.999 57.7%, 0.906 61.7%, 0.883 63.5%, 0.876 65.2%, 0.901 68.7%, 0.999 74.5%, 0.964 77.4%, 0.953 80.1%, 0.961 82.6%, 1 88.2%, 0.99 91.9%, 1)`;
+export function BouncySwitch(handle) {
+    let isOn = true;
+    return () => (_jsx("div", { mix: [
+            css({
+                height: 160,
+                backgroundColor: '#ff6b35',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+                borderRadius: 50,
+                padding: 10,
+                cursor: 'pointer',
+            }),
+            on('click', () => {
+                isOn = !isOn;
+                handle.update();
+            }),
+        ], children: _jsx("div", { mix: [
+                css({
+                    width: 60,
+                    height: 60,
+                    backgroundColor: 'white',
+                    borderRadius: 30,
+                    willChange: 'transform',
+                }),
+            ], style: {
+                transform: isOn ? 'translateY(-100px)' : 'translateY(0)',
+                transition: isOn ? `transform ${spring()}` : `transform 800ms ${bounceEasing}`,
+            } }) }));
+}
+//# sourceMappingURL=bouncy-switch.js.map

package/dist/animation/demos/bouncy-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bouncy-switch.js","sourceRoot":"","sources":["../../../src/animation/demos/bouncy-switch.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,YAAY,GAAG,2QAA2Q,CAAA;AAEhS,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAI,IAAI,GAAG,IAAI,CAAA;IAEf,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,SAAS;gBAC1B,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,cAAc,EAAE,UAAU;gBAC1B,YAAY,EAAE,EAAE;gBAChB,OAAO,EAAE,EAAE;gBACX,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gBACf,IAAI,GAAG,CAAC,IAAI,CAAA;gBACZ,MAAM,CAAC,MAAM,EAAE,CAAA;YACjB,CAAC,CAAC;SACH,YAED,cACE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,eAAe,EAAE,OAAO;oBACxB,YAAY,EAAE,EAAE;oBAChB,UAAU,EAAE,WAAW;iBACxB,CAAC;aACH,EACD,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,eAAe;gBACxD,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,YAAY,EAAE;aAC/E,GACD,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/animation/demos/color-interpolation.d.ts

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

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":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAe,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAExE,IAAI,MAAM,GAAG,CAAC,CAAA;AACd,SAAS,UAAU;IACjB,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,EAAE,EAAE,CAAA;AACtD,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,MAAc;IAC3C,IAAI,KAAK,GAAG,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,CAAC,CAAA;IAExC,OAAO,GAAG,EAAE,CAAC,CACX,eACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,GAAG,EAAE,EAAE;gBACP,KAAK,EAAE,GAAG;gBACV,SAAS,EAAE,YAAY;aACxB,CAAC;SACH,aAED,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,aAC3D,iBACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,IAAI,EAAE,CAAC;gCACP,OAAO,EAAE,UAAU;gCACnB,MAAM,EAAE,MAAM;gCACd,YAAY,EAAE,CAAC;gCACf,eAAe,EAAE,SAAS;gCAC1B,KAAK,EAAE,OAAO;gCACd,MAAM,EAAE,SAAS;gCACjB,UAAU,EAAE,GAAG;gCACf,SAAS,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;6BAC1C,CAAC;4BACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gCACf,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAA;gCAC3B,MAAM,CAAC,MAAM,EAAE,CAAA;4BACjB,CAAC,CAAC;yBACH,oBAGM,EACT,iBACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,IAAI,EAAE,CAAC;gCACP,OAAO,EAAE,UAAU;gCACnB,MAAM,EAAE,MAAM;gCACd,YAAY,EAAE,CAAC;gCACf,eAAe,EAAE,SAAS;gCAC1B,KAAK,EAAE,OAAO;gCACd,MAAM,EAAE,SAAS;gCACjB,UAAU,EAAE,GAAG;gCACf,SAAS,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;6BAC1C,CAAC;4BACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gCACf,oBAAoB;gCACpB,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oCAC1C,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAC1C;oCAAA,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;gCAC9C,CAAC;gCACD,MAAM,CAAC,MAAM,EAAE,CAAA;4BACjB,CAAC,CAAC;yBACH,wBAGM,IACL,EACL,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAEE,GAAG,EAAE;oBACH,eAAe,EAAE;oBACjB,aAAa,EAAE;oBACf,GAAG,CAAC;wBACF,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,eAAe;wBAC/B,OAAO,EAAE,WAAW;wBACpB,eAAe,EAAE,SAAS;wBAC1B,YAAY,EAAE,CAAC;wBACf,QAAQ,EAAE,EAAE;wBACZ,UAAU,EAAE,GAAG;wBACf,KAAK,EAAE,SAAS;qBACjB,CAAC;iBACH,aAED,yBAAO,IAAI,CAAC,KAAK,GAAQ,EACzB,iBACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,KAAK,EAAE,EAAE;gCACT,MAAM,EAAE,EAAE;gCACV,OAAO,EAAE,CAAC;gCACV,MAAM,EAAE,MAAM;gCACd,YAAY,EAAE,CAAC;gCACf,eAAe,EAAE,aAAa;gCAC9B,KAAK,EAAE,SAAS;gCAChB,MAAM,EAAE,SAAS;gCACjB,OAAO,EAAE,MAAM;gCACf,UAAU,EAAE,QAAQ;gCACpB,cAAc,EAAE,QAAQ;gCACxB,SAAS,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;6BAC5D,CAAC;4BACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gCACf,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAA;gCAC7C,MAAM,CAAC,MAAM,EAAE,CAAA;4BACjB,CAAC,CAAC;yBACH,YAED,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,YAEjB,eAAM,CAAC,EAAC,sBAAsB,GAAG,GAC7B,GACC,KAlDJ,IAAI,CAAC,EAAE,CAmDR,CACP,CAAC,IACE,CACP,CAAA;AACH,CAAC"}

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;