@remix-run/ui 0.2.0 → 0.4.0

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

package/src/animation/demos/multi-state-badge.tsx

@@ -0,0 +1,426 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on, ref } from '@remix-run/ui'
+
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+import { spring } from '@remix-run/ui/animation'
+
+const STATES = {
+  idle: 'Start',
+  processing: 'Processing',
+  success: 'Done',
+  error: 'Something went wrong',
+} as const
+
+type State = keyof typeof STATES
+
+function getNextState(state: State): State {
+  let states = Object.keys(STATES) as State[]
+  let nextIndex = (states.indexOf(state) + 1) % states.length
+  return states[nextIndex]
+}
+
+const ICON_SIZE = 20
+const STROKE_WIDTH = 1.5
+const VIEW_BOX_SIZE = 24
+
+const iconEnterAnimation = {
+  transform: 'translateY(-40px) scale(0.5)',
+  filter: 'blur(6px)',
+  duration: 150,
+  easing: 'ease-out',
+}
+
+const iconExitAnimation = {
+  transform: 'translateY(40px) scale(0.5)',
+  filter: 'blur(6px)',
+  duration: 150,
+  easing: 'ease-in',
+}
+
+export function MultiStateBadge(handle: Handle) {
+  let state: State = 'idle'
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 16,
+          minHeight: 80,
+        }),
+      ]}
+    >
+      <button
+        mix={[
+          css({
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0,
+          }),
+          on('click', () => {
+            state = getNextState(state)
+            handle.update()
+          }),
+        ]}
+      >
+        <Badge state={state} />
+      </button>
+    </div>
+  )
+}
+
+function Badge(handle: Handle<{ state: State }>) {
+  let badgeEl: HTMLDivElement
+  let prevState: State | null = null
+
+  return () => {
+    let { state } = handle.props
+
+    // Trigger shake/scale animations on state change
+    if (prevState !== null && prevState !== state) {
+      handle.queueTask(() => {
+        if (state === 'error') {
+          badgeEl.animate(
+            {
+              transform: [
+                'translateX(0)',
+                'translateX(-6px)',
+                'translateX(6px)',
+                'translateX(-6px)',
+                'translateX(0)',
+              ],
+            },
+            { duration: 300, easing: 'ease-in-out', delay: 100 },
+          )
+        } else if (state === 'success') {
+          badgeEl.animate(
+            { transform: ['scale(1)', 'scale(1.2)', 'scale(1)'] },
+            { duration: 300, easing: 'ease-in-out' },
+          )
+        }
+      })
+    }
+    prevState = state
+
+    return (
+      <div
+        mix={[
+          ref((node) => (badgeEl = node)),
+          css({
+            backgroundColor: '#e2e8f0',
+            color: '#0f1115',
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '12px 20px',
+            fontSize: 16,
+            borderRadius: 999,
+            willChange: 'transform, filter',
+            transition: `gap ${spring('snappy')}`,
+          }),
+        ]}
+        style={{ gap: state === 'idle' ? '0px' : '8px' }}
+      >
+        <Icon state={state} />
+        <Label state={state} />
+      </div>
+    )
+  }
+}
+
+function Icon(handle: Handle<{ state: State }>) {
+  return () => (
+    <span
+      mix={[
+        css({
+          height: ICON_SIZE,
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          transition: `width ${spring({ duration: 200, bounce: 0.2 })}`,
+        }),
+      ]}
+      style={{ width: handle.props.state === 'idle' ? 0 : ICON_SIZE }}
+    >
+      {handle.props.state === 'processing' && (
+        <span
+          key="loader"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <Loader />
+        </span>
+      )}
+      {handle.props.state === 'success' && (
+        <span
+          key="check"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <Check />
+        </span>
+      )}
+      {handle.props.state === 'error' && (
+        <span
+          key="x"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <X />
+        </span>
+      )}
+    </span>
+  )
+}
+
+function Loader() {
+  return () => (
+    <div
+      mix={[
+        ref((node) => {
+          node.animate(
+            { transform: ['rotate(0deg)', 'rotate(360deg)'] },
+            { duration: 1000, iterations: Infinity },
+          )
+        }),
+        css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: ICON_SIZE,
+          height: ICON_SIZE,
+        }),
+      ]}
+    >
+      <svg
+        width={ICON_SIZE}
+        height={ICON_SIZE}
+        viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={STROKE_WIDTH}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>
+  )
+}
+
+function Check() {
+  return () => (
+    <svg
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline
+        points="4 12 9 17 20 6"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+    </svg>
+  )
+}
+
+function X() {
+  return () => (
+    <svg
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line
+        x1="6"
+        y1="6"
+        x2="18"
+        y2="18"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+      <line
+        x1="18"
+        y1="6"
+        x2="6"
+        y2="18"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), delay: 100, fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+    </svg>
+  )
+}
+
+function Label(handle: Handle<{ state: State }>) {
+  let measureEl: HTMLSpanElement
+  let labelWidth = 0
+  let labelHeight = 0
+
+  // Don't animate the label on initial render
+  let isFirstRender = true
+  handle.queueTask(() => {
+    isFirstRender = false
+  })
+
+  return () => {
+    let { state } = handle.props
+
+    // Measure label dimensions after render
+    handle.queueTask(() => {
+      if (measureEl) {
+        let rect = measureEl.getBoundingClientRect()
+        if (rect.width !== labelWidth || rect.height !== labelHeight) {
+          labelWidth = rect.width
+          labelHeight = rect.height
+          handle.update()
+        }
+      }
+    })
+
+    let labelMix = [
+      animateExit({
+        transform: 'translateY(20px)',
+        opacity: 0,
+        filter: 'blur(10px)',
+        duration: 200,
+        easing: 'ease-in-out',
+      }),
+    ]
+
+    if (!isFirstRender) {
+      labelMix.unshift(
+        animateEntrance({
+          transform: 'translateY(-20px)',
+          opacity: 0,
+          filter: 'blur(10px)',
+          duration: 200,
+          easing: 'ease-in-out',
+        }),
+      )
+    }
+
+    return (
+      <span
+        mix={[
+          css({
+            position: 'relative',
+            display: 'inline-block',
+            transition: `width ${spring({ duration: 200, bounce: 0.1 })}`,
+          }),
+        ]}
+        style={{
+          width: labelWidth || 'auto',
+          height: labelHeight || 'auto',
+        }}
+      >
+        {/* Hidden measurement element */}
+        <span
+          mix={[
+            ref((node) => (measureEl = node)),
+            css({ position: 'absolute', visibility: 'hidden', whiteSpace: 'nowrap' }),
+          ]}
+        >
+          {STATES[state]}
+        </span>
+
+        {state === 'idle' && (
+          <span
+            key="idle"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.idle}
+          </span>
+        )}
+        {state === 'processing' && (
+          <span
+            key="processing"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.processing}
+          </span>
+        )}
+        {state === 'success' && (
+          <span
+            key="success"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.success}
+          </span>
+        )}
+        {state === 'error' && (
+          <span
+            key="error"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.error}
+          </span>
+        )}
+      </span>
+    )
+  }
+}