@remix-run/ui 0.1.2 → 0.3.0

package/dist/animation/demos/press.js

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

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

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

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

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

package/dist/animation/demos/reordering.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/animation/demos/rotate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+export function Rotate() {
+    return () => (_jsx("div", { mix: [
+            css({
+                width: 100,
+                height: 100,
+                backgroundColor: '#ff0088',
+                borderRadius: 5,
+                '@keyframes rotate-demo': {
+                    '0%': { transform: 'rotate(0deg)' },
+                    '100%': { transform: 'rotate(360deg)' },
+                },
+                animation: `rotate-demo 1s ease-in-out 1`,
+            }),
+        ] }));
+}
+//# sourceMappingURL=rotate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.js","sourceRoot":"","sources":["../../../src/animation/demos/rotate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC,MAAM,UAAU,MAAM;IACpB,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,CAAC;gBACf,wBAAwB,EAAE;oBACxB,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;oBACnC,MAAM,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;iBACxC;gBACD,SAAS,EAAE,8BAA8B;aAC1C,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/animation/demos/shared-layout.d.ts

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

package/dist/animation/demos/shared-layout.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit } from '@remix-run/ui/animation';
+const ease = 'cubic-bezier(0.26, 0.02, 0.23, 0.94)';
+function OverlapExample(handle) {
+    let shouldAnimate = false;
+    handle.queueTask(() => {
+        shouldAnimate = true;
+    });
+    return () => {
+        let { state } = handle.props;
+        let animationMix = [
+            animateExit({
+                opacity: 0,
+                transform: 'scale(0.8)',
+                duration: 300,
+                easing: ease,
+            }),
+        ];
+        if (shouldAnimate) {
+            animationMix.unshift(animateEntrance({
+                opacity: 0,
+                transform: 'scale(0.6)',
+                duration: 300,
+                easing: ease,
+            }));
+        }
+        return (_jsx("div", { 
+            // grid layout so children render in the same position
+            mix: [css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })], children: state ? (_jsx("div", { mix: animationMix, children: _jsx(Circle, { filled: true, children: _jsx(FilledIcon, {}) }) }, "filled")) : (_jsx("div", { mix: animationMix, children: _jsx(Circle, { children: _jsx(OutlineIcon, {}) }) }, "outline")) }));
+    };
+}
+function WaitExample(handle) {
+    let shouldAnimate = false;
+    handle.queueTask(() => {
+        shouldAnimate = true;
+    });
+    return () => {
+        let { state } = handle.props;
+        let animationMix = [
+            animateExit({
+                opacity: 0,
+                transform: 'scale(0.8)',
+                duration: 300,
+                easing: ease,
+            }),
+        ];
+        if (shouldAnimate) {
+            animationMix.unshift(animateEntrance({
+                opacity: 0,
+                transform: 'scale(0.6)',
+                duration: 300,
+                easing: ease,
+                delay: 300,
+            }));
+        }
+        return (_jsx("div", { 
+            // grid layout so children render in the same position
+            mix: [css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })], children: state ? (_jsx("div", { mix: animationMix, children: _jsx(Circle, { filled: true, children: _jsx(FilledIcon, {}) }) }, "filled")) : (_jsx("div", { mix: animationMix, children: _jsx(Circle, { children: _jsx(OutlineIcon, {}) }) }, "outline")) }));
+    };
+}
+export function SharedLayout(handle) {
+    let state = true;
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 16,
+            }),
+        ], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 16 })], children: [_jsx(OverlapExample, { state: state }), _jsx(WaitExample, { state: state })] }), _jsx("button", { mix: [
+                    css({
+                        backgroundColor: '#0f1115',
+                        color: '#f5f5f5',
+                        border: 'none',
+                        borderRadius: 8,
+                        padding: '12px 32px',
+                        fontSize: 14,
+                        fontWeight: 500,
+                        cursor: 'pointer',
+                        transition: 'transform 100ms ease-in-out',
+                        '&:active': {
+                            transform: 'scale(0.95)',
+                        },
+                    }),
+                    on('click', () => {
+                        state = !state;
+                        handle.update();
+                    }),
+                ], children: "Switch" })] }));
+}
+function Circle(handle) {
+    return () => (_jsx("div", { mix: [
+            css({
+                width: 80,
+                height: 80,
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                backgroundColor: handle.props.filled ? '#0f1115' : 'transparent',
+                color: handle.props.filled ? '#f5f5f5' : '#0f1115',
+                border: handle.props.filled ? '2px solid #0f1115' : '2px solid #0f1115',
+            }),
+        ], children: handle.props.children }));
+}
+function FilledIcon() {
+    return () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" }), _jsx("path", { d: "m21 3-9 9" }), _jsx("path", { d: "M15 3h6v6" })] }));
+}
+function OutlineIcon() {
+    return () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M9 12h6" })] }));
+}
+//# sourceMappingURL=shared-layout.js.map

package/dist/animation/demos/shared-layout.js.map

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

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

@@ -0,0 +1,6 @@
+import { type Handle } from '@remix-run/ui';
+/**
+ * @name Spring Drag Release
+ * @description A full-screen spring physics playground with click targets and drag-release velocity.
+ */
+export default function SpringDemo(handle: Handle): () => import("@remix-run/ui").RemixElement;

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

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { addEventListeners, css, on, ref } from '@remix-run/ui';
+import { dragVelocityEvents } from "./drag-release.js";
+import { spring } from '@remix-run/ui/animation';
+function PointerTrail(handle) {
+    let canvas;
+    let points = [];
+    let isDown = false;
+    let releaseTime = 0;
+    let animationId = null;
+    let maxAge = 150; // ms - how long points stay in the trail while dragging
+    let fadeDuration = 800; // ms - how long the trail fades after release
+    function draw() {
+        if (!canvas)
+            return;
+        let ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        let now = performance.now();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Calculate overall opacity based on release time
+        let overallOpacity = 1;
+        if (!isDown && releaseTime > 0) {
+            let elapsed = now - releaseTime;
+            overallOpacity = Math.max(0, 1 - elapsed / fadeDuration);
+            if (overallOpacity <= 0) {
+                points = [];
+                animationId = null;
+                return;
+            }
+        }
+        // Filter out old points while dragging
+        if (isDown) {
+            points = points.filter((p) => now - p.time < maxAge);
+        }
+        if (points.length < 2) {
+            if (isDown || overallOpacity > 0) {
+                animationId = requestAnimationFrame(draw);
+            }
+            else {
+                animationId = null;
+            }
+            return;
+        }
+        // Draw the trail as a tapered path
+        ctx.beginPath();
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        for (let i = 1; i < points.length; i++) {
+            let prev = points[i - 1];
+            let curr = points[i];
+            // Age-based opacity (older = more transparent)
+            let age = isDown ? (now - prev.time) / maxAge : 0;
+            let segmentOpacity = (1 - age) * overallOpacity;
+            // Thickness tapers from thin (old) to thick (new)
+            let progress = i / (points.length - 1);
+            let thickness = 2 + progress * 8;
+            ctx.beginPath();
+            ctx.moveTo(prev.x, prev.y);
+            ctx.lineTo(curr.x, curr.y);
+            ctx.strokeStyle = `rgba(14, 165, 233, ${segmentOpacity * 0.6})`;
+            ctx.lineWidth = thickness;
+            ctx.stroke();
+        }
+        // Draw a red glow at the end to show direction
+        if (points.length > 0) {
+            let last = points[points.length - 1];
+            let gradient = ctx.createRadialGradient(last.x, last.y, 0, last.x, last.y, 20);
+            gradient.addColorStop(0, `rgba(239, 68, 68, ${overallOpacity * 0.6})`);
+            gradient.addColorStop(1, 'rgba(239, 68, 68, 0)');
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(last.x, last.y, 20, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        animationId = requestAnimationFrame(draw);
+    }
+    function startDrawing() {
+        if (!animationId) {
+            animationId = requestAnimationFrame(draw);
+        }
+    }
+    if (typeof document !== 'undefined') {
+        addEventListeners(document, handle.signal, {
+            pointerdown(event) {
+                if (!event.target.closest('.draggable'))
+                    return;
+                isDown = true;
+                releaseTime = 0;
+                points = [{ x: event.clientX, y: event.clientY, time: performance.now() }];
+                startDrawing();
+            },
+            pointermove(event) {
+                if (!isDown)
+                    return;
+                points.push({ x: event.clientX, y: event.clientY, time: performance.now() });
+            },
+            pointerup() {
+                if (!isDown)
+                    return;
+                isDown = false;
+                releaseTime = performance.now();
+            },
+            pointercancel() {
+                isDown = false;
+                releaseTime = performance.now();
+            },
+        });
+    }
+    return () => (_jsx("canvas", { mix: [
+            ref((node) => {
+                canvas = node;
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            }),
+            css({
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                zIndex: 5,
+            }),
+        ] }));
+}
+/**
+ * @name Spring Drag Release
+ * @description A full-screen spring physics playground with click targets and drag-release velocity.
+ */
+export default function SpringDemo(handle) {
+    let viewportWidth = globalThis.window?.innerWidth ?? 1000;
+    let viewportHeight = globalThis.window?.innerHeight ?? 700;
+    // Target circle position (click to move)
+    let targetX = viewportWidth / 2;
+    let targetY = viewportHeight / 2;
+    // Draggable circle state
+    let dragX = viewportWidth / 2 - 150;
+    let dragY = viewportHeight / 2;
+    let isDragging = false;
+    let isAnimating = false;
+    // Current spring transitions (separate for X and Y to capture 2D velocity)
+    let transitionX = '';
+    let transitionY = '';
+    let selectedPreset = 'bouncy';
+    // Get default spring transition for target circle
+    let springValue = spring(selectedPreset);
+    if (typeof document !== 'undefined') {
+        addEventListeners(document, handle.signal, {
+            click(event) {
+                // Ignore clicks on controls or when dragging
+                if (event.target.closest('.controls'))
+                    return;
+                if (event.target.closest('.draggable'))
+                    return;
+                targetX = event.clientX;
+                targetY = event.clientY;
+                handle.update();
+            },
+        });
+    }
+    return () => (_jsxs("div", { mix: [
+            css({
+                position: 'fixed',
+                inset: 0,
+                backgroundColor: '#1a1a2e',
+                cursor: 'crosshair',
+                overflow: 'hidden',
+            }),
+        ], children: [_jsx(PointerTrail, {}), _jsx("div", { mix: [
+                    css({
+                        position: 'absolute',
+                        width: '80px',
+                        height: '80px',
+                        borderRadius: '50%',
+                        backgroundColor: 'transparent',
+                        border: '3px dashed rgba(233, 69, 96, 0.5)',
+                        transform: 'translate(-50%, -50%)',
+                        pointerEvents: 'none',
+                    }),
+                ], style: {
+                    left: `${targetX}px`,
+                    top: `${targetY}px`,
+                    transition: `left ${springValue}, top ${springValue}`,
+                } }), _jsx("div", { className: "draggable", mix: [
+                    css({
+                        position: 'absolute',
+                        width: '60px',
+                        height: '60px',
+                        borderRadius: '50%',
+                        backgroundColor: '#0ea5e9',
+                        boxShadow: '0 0 20px rgba(14, 165, 233, 0.5)',
+                        transform: 'translate(-50%, -50%)',
+                        userSelect: 'none',
+                        touchAction: 'none',
+                        zIndex: 10,
+                    }),
+                    on('transitionend', () => {
+                        isAnimating = false;
+                        handle.update();
+                    }),
+                    on('pointerdown', (event) => {
+                        event.preventDefault();
+                        isDragging = true;
+                        isAnimating = false;
+                        handle.update();
+                    }),
+                    on('pointermove', (event) => {
+                        if (!isDragging)
+                            return;
+                        dragX = event.clientX;
+                        dragY = event.clientY;
+                        handle.update();
+                    }),
+                    dragVelocityEvents(),
+                    on(dragVelocityEvents.release, (event) => {
+                        isDragging = false;
+                        // Calculate distance to target on each axis
+                        let distX = targetX - dragX;
+                        let distY = targetY - dragY;
+                        if (Math.abs(distX) < 1 && Math.abs(distY) < 1) {
+                            handle.update();
+                            return;
+                        }
+                        // Create separate springs for X and Y with their own normalized velocities
+                        // normalizedVelocity = velocity / distance (with sign!) for each axis
+                        // The sign matters: positive = moving toward target, negative = moving away
+                        if (Math.abs(distX) >= 1) {
+                            let normalizedVelocityX = event.velocityX / distX;
+                            normalizedVelocityX = Math.max(-20, Math.min(20, normalizedVelocityX));
+                            transitionX = String(spring(selectedPreset, { velocity: normalizedVelocityX }));
+                        }
+                        else {
+                            transitionX = String(spring(selectedPreset));
+                        }
+                        if (Math.abs(distY) >= 1) {
+                            let normalizedVelocityY = event.velocityY / distY;
+                            normalizedVelocityY = Math.max(-20, Math.min(20, normalizedVelocityY));
+                            transitionY = String(spring(selectedPreset, { velocity: normalizedVelocityY }));
+                        }
+                        else {
+                            transitionY = String(spring(selectedPreset));
+                        }
+                        // Animate to target
+                        isAnimating = true;
+                        dragX = targetX;
+                        dragY = targetY;
+                        handle.update();
+                    }),
+                ], style: {
+                    left: `${dragX}px`,
+                    top: `${dragY}px`,
+                    cursor: isDragging ? 'grabbing' : 'grab',
+                    transition: isAnimating ? `left ${transitionX}, top ${transitionY}` : 'none',
+                } }), _jsx("div", { className: "controls", mix: [
+                    css({
+                        position: 'absolute',
+                        top: '20px',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        display: 'flex',
+                        gap: '4px',
+                        padding: '4px',
+                        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                        borderRadius: '8px',
+                        fontFamily: 'system-ui, sans-serif',
+                        fontSize: '14px',
+                        cursor: 'default',
+                    }),
+                ], children: Object.keys(spring.presets).map((preset) => (_jsxs("label", { mix: [
+                        css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            padding: '8px 12px',
+                            borderRadius: '6px',
+                            color: '#fff',
+                            cursor: 'pointer',
+                            transition: 'background-color 150ms ease',
+                            '&:hover': {
+                                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            },
+                            '&:has(input:checked)': {
+                                backgroundColor: 'rgba(14, 165, 233, 0.3)',
+                            },
+                        }),
+                    ], children: [_jsx("input", { type: "radio", name: "spring-preset", value: preset, checked: selectedPreset === preset, mix: [
+                                css({ accentColor: '#0ea5e9' }),
+                                on('change', () => {
+                                    selectedPreset = preset;
+                                    springValue = spring(selectedPreset);
+                                    handle.update();
+                                }),
+                            ] }), preset] }, preset))) }), _jsx("div", { mix: [
+                    css({
+                        position: 'absolute',
+                        bottom: '20px',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        color: '#ffffff80',
+                        fontFamily: 'system-ui, sans-serif',
+                        fontSize: '14px',
+                        textAlign: 'center',
+                    }),
+                ], children: "Click to move target \u2022 Drag the blue circle and release to see velocity-based spring" })] }));
+}
+//# sourceMappingURL=spring.demo.js.map