@remix-run/ui 0.2.0 → 0.4.0

package/src/animation/demos/aspect-ratio.tsx

@@ -0,0 +1,120 @@
+import { type Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function AspectRatio(handle: Handle) {
+  let aspectRatio = 1
+  let width = 100
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          gap: 20,
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 180,
+            height: 180,
+          }),
+        ]}
+      >
+        <div
+          mix={[
+            css({
+              backgroundColor: '#8df0cc',
+              borderRadius: 10,
+              transition: spring.transition(['width', 'aspect-ratio'], 'bouncy'),
+            }),
+          ]}
+          style={{
+            width,
+            aspectRatio,
+          }}
+        />
+      </div>
+      <div mix={[css({ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' })]}>
+        <label
+          mix={[
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              fontSize: 13,
+              color: '#666',
+            }),
+          ]}
+        >
+          <span mix={[css({ width: 50, flexShrink: 0 })]}>Ratio</span>
+          <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()
+              }),
+            ]}
+          />
+          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
+            {aspectRatio.toFixed(1)}
+          </span>
+        </label>
+        <label
+          mix={[
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              fontSize: 13,
+              color: '#666',
+            }),
+          ]}
+        >
+          <span mix={[css({ width: 50, flexShrink: 0 })]}>Width</span>
+          <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()
+              }),
+            ]}
+          />
+          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
+            {width}
+          </span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+const rangeInputCss = {
+  flex: 1,
+  accentColor: '#8df0cc',
+  cursor: 'pointer',
+} as const

package/src/animation/demos/bouncy-switch.tsx

@@ -0,0 +1,47 @@
+import { type Handle } 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: Handle) {
+  let isOn = true
+
+  return () => (
+    <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()
+        }),
+      ]}
+    >
+      <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}`,
+        }}
+      />
+    </div>
+  )
+}

package/src/animation/demos/color-interpolation.tsx

@@ -0,0 +1,73 @@
+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 () => (
+    <div mix={[css({ display: 'flex', gap: 30, alignItems: 'center', justifyContent: 'center' })]}>
+      <style>
+        {`
+          @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%)
+            );
+          }
+        `}
+      </style>
+
+      <div mix={[css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })]}>
+        <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',
+            }),
+          ]}
+        />
+        <div mix={[css({ fontSize: 14, color: '#666' })]}>sRGB</div>
+      </div>
+
+      <div mix={[css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })]}>
+        <div
+          className="oklch-box"
+          mix={[
+            css({
+              width: 100,
+              height: 100,
+              borderRadius: 8,
+            }),
+          ]}
+        />
+        <div mix={[css({ fontSize: 14, color: '#666' })]}>OKLCH</div>
+      </div>
+    </div>
+  )
+}

package/src/animation/demos/cube.tsx

@@ -0,0 +1,116 @@
+import type { Handle } from '@remix-run/ui'
+import { css, ref } from '@remix-run/ui'
+
+export function Cube(handle: Handle) {
+  let cube: HTMLDivElement
+
+  function animate(t: number) {
+    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 () => (
+    <div
+      mix={[
+        css({
+          perspective: '400px',
+          width: '100px',
+          height: '100px',
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          ref((node) => {
+            cube = node
+            requestAnimationFrame(animate)
+          }),
+          css({
+            width: '100px',
+            height: '100px',
+            position: 'relative',
+            transformStyle: 'preserve-3d',
+          }),
+        ]}
+      >
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(0deg) translateZ(50px)',
+              backgroundColor: '#ff0055',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(90deg) translateZ(50px)',
+              backgroundColor: '#0099ff',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(180deg) translateZ(50px)',
+              backgroundColor: '#22cc88',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(-90deg) translateZ(50px)',
+              backgroundColor: '#ffaa00',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateX(90deg) translateZ(50px)',
+              backgroundColor: '#aa00ff',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateX(-90deg) translateZ(50px)',
+              backgroundColor: '#ff00aa',
+            }),
+          ]}
+        />
+      </div>
+    </div>
+  )
+}

package/src/animation/demos/default-animate.tsx

@@ -0,0 +1,129 @@
+import { css, on, type Handle } 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: Handle) {
+  let items = [createItem(), createItem()]
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+          width: 200,
+          alignSelf: 'flex-start',
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 8, marginBottom: 8 })]}>
+        <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()
+            }),
+          ]}
+        >
+          Add
+        </button>
+        <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()
+            }),
+          ]}
+        >
+          Shuffle
+        </button>
+      </div>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          mix={[
+            animateEntrance(),
+            animateLayout(),
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '12px 16px',
+              backgroundColor: '#f1f5f9',
+              borderRadius: 8,
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#334155',
+            }),
+          ]}
+        >
+          <span>{item.label}</span>
+          <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()
+              }),
+            ]}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/animation/demos/drag-release.ts

@@ -0,0 +1,118 @@
+import { addEventListeners, createMixin } from '@remix-run/ui'
+
+export const dragVelocityReleaseEventType = 'rmx:drag-velocity-release' as const
+
+declare global {
+  interface HTMLElementEventMap {
+    [dragVelocityReleaseEventType]: DragVelocityEvent
+  }
+}
+
+export class DragVelocityEvent extends Event {
+  clientX: number
+  clientY: number
+  velocityX: number // px/s
+  velocityY: number // px/s
+
+  constructor(
+    type: typeof dragVelocityReleaseEventType,
+    init: { clientX: number; clientY: number; velocityX: number; velocityY: number },
+  ) {
+    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<HTMLElement>((handle) => {
+  let target: HTMLElement
+  let isTracking = false
+  let pointerId: number | null = null
+  let lastX = 0
+  let lastY = 0
+  let lastTime = 0
+  let velocityX = 0
+  let velocityY = 0
+
+  let onPointerDown = (event: PointerEvent) => {
+    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: PointerEvent) => {
+    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: PointerEvent) => {
+    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,
+    })
+  })
+})
+
+type DragVelocityEventsMixin = typeof baseDragVelocityEvents & {
+  readonly release: typeof dragVelocityReleaseEventType
+}
+
+export const dragVelocityEvents: DragVelocityEventsMixin = Object.assign(baseDragVelocityEvents, {
+  release: dragVelocityReleaseEventType,
+})

package/src/animation/demos/enter.tsx

@@ -0,0 +1,22 @@
+import { css } from '@remix-run/ui'
+import { animateEntrance, spring } from '@remix-run/ui/animation'
+
+export function EnterAnimation() {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#dd00ee',
+          borderRadius: '50%',
+        }),
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0)',
+          ...spring({ duration: 400, bounce: 0.5 }),
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/demos/exit.tsx

@@ -0,0 +1,79 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation'
+
+export function ExitAnimation(handle: Handle) {
+  let isVisible = true
+
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100px',
+          height: '160px',
+          position: 'relative',
+        }),
+      ]}
+    >
+      {isVisible && (
+        <div
+          key="exit-animation"
+          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(),
+            }),
+          ]}
+        />
+      )}
+      <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()
+          }),
+        ]}
+      >
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+    </div>
+  )
+}