@remix-run/ui 0.1.2 → 0.3.0

package/src/animation/demos/keyframes.tsx

@@ -0,0 +1,29 @@
+import { css } from '@remix-run/ui'
+
+export function Keyframes() {
+  return () => (
+    <div mix={[css({ padding: 60 })]}>
+      <div
+        mix={[
+          css({
+            width: 100,
+            height: 100,
+            backgroundColor: '#888',
+            borderRadius: 5,
+            // 2s animation + 1s delay = 3s total cycle
+            // Original times [0, 0.2, 0.5, 0.8, 1] scaled to first 66.67% of animation
+            '@keyframes box-animation': {
+              '0%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+              '13.33%': { transform: 'scale(2) rotate(0deg)', borderRadius: '0%' },
+              '33.33%': { transform: 'scale(2) rotate(180deg)', borderRadius: '50%' },
+              '53.33%': { transform: 'scale(1) rotate(180deg)', borderRadius: '50%' },
+              '66.67%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+              '100%': { transform: 'scale(1) rotate(0deg)', borderRadius: '0%' },
+            },
+            animation: 'box-animation 3s ease-in-out infinite',
+          }),
+        ]}
+      />
+    </div>
+  )
+}

package/src/animation/demos/material-ripple.tsx

@@ -0,0 +1,158 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on, ref } from '@remix-run/ui'
+
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+
+type Ripple = {
+  id: number
+  x: number
+  y: number
+  size: number
+}
+
+export function MaterialRipple(handle: Handle) {
+  let ripples: Ripple[] = []
+  let idCounter = 0
+  let buttonEl: HTMLButtonElement | null = null
+
+  function createRipple(originX: number, originY: number) {
+    if (!buttonEl) return
+
+    let rect = buttonEl.getBoundingClientRect()
+    let localX = originX - rect.left
+    let localY = originY - rect.top
+    let dx = Math.max(localX, rect.width - localX)
+    let dy = Math.max(localY, rect.height - localY)
+    let radius = Math.sqrt(dx * dx + dy * dy)
+    let size = radius * 2
+
+    let id = ++idCounter
+    ripples = [...ripples, { id, x: localX, y: localY, size }]
+    handle.update()
+  }
+
+  function removeAllRipples() {
+    if (ripples.length > 0) {
+      ripples = []
+      handle.update()
+    }
+  }
+
+  function createCenteredRipple() {
+    if (!buttonEl) return
+    let rect = buttonEl.getBoundingClientRect()
+    createRipple(rect.left + rect.width / 2, rect.top + rect.height / 2)
+  }
+
+  return () => (
+    <button
+      mix={[
+        ref((el) => {
+          buttonEl = el
+        }),
+        css({
+          position: 'relative',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '10px 20px',
+          borderRadius: 4,
+          textTransform: 'uppercase',
+          backgroundColor: 'transparent',
+          color: '#7c3aed',
+          border: '1px solid #7c3aed',
+          userSelect: 'none',
+          cursor: 'pointer',
+          overflow: 'hidden',
+          letterSpacing: '0.2px',
+          WebkitTapHighlightColor: 'transparent',
+          transition: 'border-color 200ms linear, background-color 200ms linear',
+          '&:hover': {
+            borderColor: '#6d28d9',
+            backgroundColor: '#7c3aed20',
+          },
+          '&:focus-visible': {
+            outline: '2px solid #7c3aed80',
+            outlineOffset: 2,
+          },
+        }),
+        on('pointerdown', (event) => {
+          if (event.isPrimary === false) return
+          createRipple(event.clientX, event.clientY)
+        }),
+        on('pointerup', removeAllRipples),
+        on('pointercancel', removeAllRipples),
+        on('pointerleave', removeAllRipples),
+        on('keydown', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ') || event.repeat) return
+          event.preventDefault()
+          createCenteredRipple()
+        }),
+        on('keyup', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ')) return
+          event.preventDefault()
+          removeAllRipples()
+        }),
+        on('blur', removeAllRipples),
+      ]}
+    >
+      Click me
+      <span
+        aria-hidden="true"
+        mix={[
+          css({
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+          }),
+        ]}
+      >
+        {ripples.map((ripple) => (
+          // Outer span: handles exit (fade out)
+          <span
+            key={ripple.id}
+            mix={[
+              css({
+                position: 'absolute',
+                borderRadius: '50%',
+              }),
+              animateExit({
+                opacity: 0,
+                duration: 550,
+                easing: 'ease-out',
+              }),
+            ]}
+            style={{
+              width: ripple.size,
+              height: ripple.size,
+              left: ripple.x - ripple.size / 2,
+              top: ripple.y - ripple.size / 2,
+            }}
+          >
+            {/* Inner span: handles enter (scale) so it doesn't get reversed when removed */}
+            <span
+              mix={[
+                css({
+                  display: 'block',
+                  width: '100%',
+                  height: '100%',
+                  borderRadius: 'inherit',
+                  backgroundColor: 'currentColor',
+                  opacity: 0.4,
+                }),
+                animateEntrance({
+                  opacity: 0,
+                  transform: 'scale(0)',
+                  duration: 300,
+                  easing: 'ease-out',
+                }),
+              ]}
+            />
+          </span>
+        ))}
+      </span>
+    </button>
+  )
+}

package/src/animation/demos/mixin-presence-list.tsx

@@ -0,0 +1,121 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+
+let nextId = 1
+function createItem() {
+  return { id: nextId++, label: `Row ${nextId - 1}` }
+}
+
+export function MixinPresenceList(handle: Handle) {
+  let items = [createItem(), createItem(), createItem()]
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+          width: 220,
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 8 })]}>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 10px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#0ea5e9',
+              color: 'white',
+              cursor: 'pointer',
+              '&:hover': { backgroundColor: '#0284c7' },
+            }),
+            on('click', () => {
+              items.unshift(createItem())
+              handle.update()
+            }),
+          ]}
+        >
+          Add
+        </button>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 10px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#ef4444',
+              color: 'white',
+              cursor: 'pointer',
+              '&:hover': { backgroundColor: '#dc2626' },
+            }),
+            on('click', () => {
+              items = items.slice(0, Math.max(0, items.length - 1))
+              handle.update()
+            }),
+          ]}
+        >
+          Remove
+        </button>
+      </div>
+      {items.map((item) => (
+        <div
+          key={String(item.id)}
+          mix={[
+            animateEntrance({
+              opacity: 0,
+              transform: 'translateY(-10px) scale(0.98)',
+              duration: 220,
+              easing: 'ease-out',
+            }),
+            animateExit({
+              opacity: 0,
+              transform: 'translateY(10px) scale(0.98)',
+              duration: 180,
+              easing: 'ease-in',
+            }),
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '10px 12px',
+              borderRadius: 8,
+              backgroundColor: '#f8fafc',
+              color: '#334155',
+              border: '1px solid #e2e8f0',
+            }),
+          ]}
+        >
+          <span>{item.label}</span>
+          <button
+            mix={[
+              css({
+                width: 24,
+                height: 24,
+                padding: 0,
+                border: 'none',
+                borderRadius: 4,
+                backgroundColor: 'transparent',
+                color: '#64748b',
+                cursor: 'pointer',
+                '&:hover': { backgroundColor: '#e2e8f0' },
+              }),
+              on('click', () => {
+                items = items.filter((entry) => entry.id !== item.id)
+                handle.update()
+              }),
+            ]}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/animation/demos/mixin-reclaim.tsx

@@ -0,0 +1,125 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+
+export function MixinReclaim(handle: Handle) {
+  let visible = true
+  let interruptTimer: number | undefined
+
+  function clearInterruptTimer() {
+    if (interruptTimer === undefined) return
+    window.clearTimeout(interruptTimer)
+    interruptTimer = undefined
+  }
+
+  function scheduleInterrupt() {
+    clearInterruptTimer()
+    visible = false
+    handle.update()
+    interruptTimer = window.setTimeout(() => {
+      visible = true
+      handle.update()
+      interruptTimer = undefined
+    }, 140)
+  }
+
+  return () => (
+    <div mix={[css({ display: 'flex', flexDirection: 'column', gap: 12, width: 240 })]}>
+      <div mix={[css({ display: 'flex', gap: 8 })]}>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 10px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#10b981',
+              color: 'white',
+              cursor: 'pointer',
+              '&:hover': { backgroundColor: '#059669' },
+            }),
+            on('click', () => {
+              clearInterruptTimer()
+              visible = true
+              handle.update()
+            }),
+          ]}
+        >
+          Show
+        </button>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 10px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#f59e0b',
+              color: 'white',
+              cursor: 'pointer',
+              '&:hover': { backgroundColor: '#d97706' },
+            }),
+            on('click', scheduleInterrupt),
+          ]}
+        >
+          Interrupt
+        </button>
+      </div>
+
+      <button
+        mix={[
+          css({
+            padding: '8px 10px',
+            border: 'none',
+            borderRadius: 6,
+            backgroundColor: '#ef4444',
+            color: 'white',
+            cursor: 'pointer',
+            '&:hover': { backgroundColor: '#dc2626' },
+          }),
+          on('click', () => {
+            clearInterruptTimer()
+            visible = false
+            handle.update()
+          }),
+        ]}
+      >
+        Hide
+      </button>
+
+      <div mix={[css({ minHeight: 100, display: 'grid', placeItems: 'center' })]}>
+        {visible && (
+          <div
+            key="reclaim-card"
+            mix={[
+              animateEntrance({
+                opacity: 0,
+                transform: 'translateY(12px) scale(0.94)',
+                duration: 260,
+                easing: 'ease-out',
+              }),
+              animateExit({
+                opacity: 0,
+                transform: 'translateY(-12px) scale(0.94)',
+                duration: 260,
+                easing: 'ease-in',
+              }),
+              css({
+                width: 200,
+                padding: '14px 16px',
+                borderRadius: 10,
+                background: 'linear-gradient(135deg, #7c3aed, #3b82f6)',
+                color: 'white',
+                textAlign: 'center',
+                fontWeight: 600,
+              }),
+            ]}
+          >
+            Reclaim Me Mid-Exit
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}