@remix-run/ui 0.2.0 → 0.4.0

package/src/animation/demos/flip-toggle.tsx

@@ -0,0 +1,46 @@
+import { css, on, type Handle } from '@remix-run/ui'
+import { animateLayout } from '@remix-run/ui/animation'
+
+export function FlipToggle(handle: Handle) {
+  let isOn = false
+
+  return () => (
+    <button
+      mix={[
+        css({
+          width: 90,
+          height: 50,
+          backgroundColor: 'rgba(153, 17, 255, 0.2)',
+          borderRadius: 50,
+          cursor: 'pointer',
+          display: 'flex',
+          padding: 10,
+          border: 'none',
+        }),
+        on('click', () => {
+          isOn = !isOn
+          handle.update()
+        }),
+      ]}
+      style={{
+        // The actual layout property that changes
+        justifyContent: isOn ? 'flex-start' : 'flex-end',
+      }}
+    >
+      <div
+        mix={[
+          css({
+            width: 30,
+            height: 30,
+            backgroundColor: '#9911ff',
+            borderRadius: '50%',
+          }),
+          animateLayout({
+            duration: 200,
+            easing: 'ease-in-out',
+          }),
+        ]}
+      />
+    </button>
+  )
+}

package/src/animation/demos/hold-to-confirm.tsx

@@ -0,0 +1,317 @@
+import { createMixin, css, on, type Handle } from '@remix-run/ui'
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation'
+
+// Demo
+const buttonExitAnimation = {
+  opacity: 0,
+  transform: 'scale(1.15)',
+  duration: 100,
+  easing: 'ease-in',
+}
+
+const confirmationEnterAnimation = {
+  opacity: 0,
+  transform: 'scale(0.9)',
+  duration: 200,
+  easing: 'ease-out',
+}
+
+export function HoldToConfirm(handle: Handle) {
+  let confirmed = false
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'grid',
+          placeItems: 'center',
+          minHeight: 140,
+          // so children can animate in the same position
+          '& > *': { gridArea: '1 / 1' },
+        }),
+      ]}
+    >
+      {!confirmed && (
+        <HoldButton
+          key="hold-button"
+          onConfirm={() => {
+            confirmed = true
+            handle.update()
+          }}
+        />
+      )}
+      {confirmed && (
+        <Confirmation
+          key="confirmed"
+          onReset={() => {
+            confirmed = false
+            handle.update()
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function HoldButton(handle: Handle<{ onConfirm: () => void }>) {
+  let confirming = false
+
+  return () => (
+    <button
+      mix={[
+        animateExit(buttonExitAnimation),
+        css({
+          position: 'relative',
+          overflow: 'hidden',
+          width: 200,
+          height: 56,
+          border: 'none',
+          borderRadius: 12,
+          backgroundColor: '#dc2626',
+          color: 'white',
+          fontSize: 16,
+          fontWeight: 600,
+          cursor: 'pointer',
+          userSelect: 'none',
+          transition: 'transform 150ms ease',
+          '&:focus': {
+            outline: '3px solid rgba(220, 38, 38, 0.4)',
+            outlineOffset: 2,
+          },
+          '&:active': {
+            transform: 'scale(0.98)',
+          },
+        }),
+        confirmPress(),
+        on(confirmPress.start, () => {
+          confirming = true
+          handle.update()
+        }),
+        on(confirmPress.cancel, () => {
+          if (!confirming) return
+          confirming = false
+          handle.update()
+        }),
+        on(confirmPress.end, () => {
+          handle.props.onConfirm()
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            transformOrigin: 'left',
+          }),
+        ]}
+        style={{
+          transform: confirming ? 'scaleX(1)' : 'scaleX(0)',
+          transition: confirming
+            ? `transform ${PRESS_CONFIRM_TIME}ms linear`
+            : `transform ${spring({ duration: 100, bounce: 0 })}`,
+        }}
+      />
+
+      <span
+        mix={[
+          css({
+            position: 'relative',
+            zIndex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+          }),
+        ]}
+      >
+        <TrashIcon />
+        Hold to Delete
+      </span>
+    </button>
+  )
+}
+
+function Confirmation(handle: Handle<{ onReset: () => void }>) {
+  return () => (
+    <div
+      mix={[
+        animateEntrance(confirmationEnterAnimation),
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            color: '#22c55e',
+            fontSize: 18,
+            fontWeight: 600,
+          }),
+        ]}
+      >
+        <CheckIcon />
+        Deleted
+      </div>
+
+      <button
+        mix={[
+          css({
+            padding: '8px 16px',
+            border: '1px solid #e2e8f0',
+            borderRadius: 8,
+            backgroundColor: 'white',
+            color: '#64748b',
+            fontSize: 14,
+            cursor: 'pointer',
+            transition: 'all 150ms ease',
+            '&:hover': {
+              backgroundColor: '#f8fafc',
+              borderColor: '#cbd5e1',
+            },
+          }),
+          on('click', () => handle.props.onReset()),
+        ]}
+      >
+        Reset Demo
+      </button>
+    </div>
+  )
+}
+
+function TrashIcon() {
+  return () => (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return () => (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+const PRESS_CONFIRM_TIME = 2000
+const pressConfirmStartEventType = 'demo:press-confirm-start' as const
+const pressConfirmCancelEventType = 'demo:press-confirm-cancel' as const
+const pressConfirmEndEventType = 'demo:press-confirm-end' as const
+
+declare global {
+  interface HTMLElementEventMap {
+    [pressConfirmStartEventType]: Event
+    [pressConfirmCancelEventType]: Event
+    [pressConfirmEndEventType]: Event
+  }
+}
+
+const baseConfirmPress = createMixin<HTMLElement>((handle) => {
+  let timer = 0
+  let pressing = false
+
+  let clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = 0
+    }
+  }
+
+  let start = (target: Element) => {
+    clearTimer()
+    pressing = true
+    target.dispatchEvent(new Event(pressConfirmStartEventType, { bubbles: true }))
+    timer = window.setTimeout(() => {
+      timer = 0
+      pressing = false
+      target.dispatchEvent(new Event(pressConfirmEndEventType, { bubbles: true }))
+    }, PRESS_CONFIRM_TIME)
+  }
+
+  let cancel = (target: Element) => {
+    if (!pressing) return
+    clearTimer()
+    pressing = false
+    target.dispatchEvent(new Event(pressConfirmCancelEventType, { bubbles: true }))
+  }
+
+  handle.addEventListener('remove', () => {
+    clearTimer()
+    pressing = false
+  })
+
+  return (props) => (
+    <handle.element
+      {...props}
+      mix={[
+        on('pointerdown', (event) => {
+          if (event.isPrimary === false) return
+          start(event.currentTarget)
+        }),
+        on('pointerup', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('pointercancel', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('pointerleave', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('keydown', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ') || event.repeat) return
+          event.preventDefault()
+          start(event.currentTarget)
+        }),
+        on('keyup', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ')) return
+          event.preventDefault()
+          cancel(event.currentTarget)
+        }),
+        on('blur', (event) => {
+          cancel(event.currentTarget)
+        }),
+      ]}
+    />
+  )
+})
+
+type ConfirmPressMixin = typeof baseConfirmPress & {
+  readonly start: typeof pressConfirmStartEventType
+  readonly cancel: typeof pressConfirmCancelEventType
+  readonly end: typeof pressConfirmEndEventType
+}
+
+const confirmPress: ConfirmPressMixin = Object.assign(baseConfirmPress, {
+  start: pressConfirmStartEventType,
+  cancel: pressConfirmCancelEventType,
+  end: pressConfirmEndEventType,
+})

package/src/animation/demos/html-content.tsx

@@ -0,0 +1,41 @@
+import type { Handle } from '@remix-run/ui'
+import { css } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function HTMLContent(handle: Handle) {
+  let count = 0
+  let from = 0
+  let to = 100
+
+  let counter = spring({ duration: 3000, bounce: 0 })
+
+  function animate() {
+    if (handle.signal.aborted) return
+
+    let { value: t, done } = counter.next()
+    if (done) return
+
+    count = Math.round(from + (to - from) * t)
+    handle.update()
+    requestAnimationFrame(animate)
+  }
+
+  handle.queueTask(() => {
+    requestAnimationFrame(animate)
+  })
+
+  return () => (
+    <pre
+      mix={[
+        css({
+          fontSize: '64px',
+          margin: 0,
+          color: '#8df0cc',
+        }),
+      ]}
+    >
+      {count}
+    </pre>
+  )
+}

package/src/animation/demos/interruptible-keyframes.tsx

@@ -0,0 +1,62 @@
+import { css, on, ref } from '@remix-run/ui'
+
+export function InterruptibleKeyframes() {
+  let box: HTMLDivElement
+  let currentAnimation: Animation | null = null
+
+  function getCurrentScale(): number {
+    let matrix = new DOMMatrix(getComputedStyle(box).transform)
+    return matrix.a
+  }
+
+  function interruptAnimation() {
+    if (currentAnimation) {
+      currentAnimation.commitStyles()
+      currentAnimation.cancel()
+      currentAnimation = null
+    }
+  }
+
+  return () => (
+    <div
+      mix={[
+        ref((node) => (box = node)),
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#0cdcf7',
+          borderRadius: 5,
+        }),
+        on('pointerenter', () => {
+          interruptAnimation()
+          let startScale = getCurrentScale()
+
+          currentAnimation = box.animate(
+            [
+              { transform: `scale(${startScale})`, offset: 0, easing: 'ease-in-out' },
+              { transform: 'scale(1.1)', offset: 0.6, easing: 'ease-out' },
+              { transform: 'scale(1.6)', offset: 1 },
+            ],
+            {
+              duration: 500,
+              fill: 'forwards',
+            },
+          )
+        }),
+        on('pointerleave', () => {
+          interruptAnimation()
+          let startScale = getCurrentScale()
+
+          currentAnimation = box.animate(
+            [{ transform: `scale(${startScale})` }, { transform: 'scale(1)' }],
+            {
+              duration: 300,
+              easing: 'ease-out',
+              fill: 'forwards',
+            },
+          )
+        }),
+      ]}
+    />
+  )
+}

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>
+  )
+}