@remix-run/ui 0.2.0 → 0.4.0

package/src/animation/demos/press.tsx

@@ -0,0 +1,67 @@
+import { createMixin, css, on, type Handle } from '@remix-run/ui'
+import { spring } from '@remix-run/ui/animation'
+
+export function Press(handle: Handle) {
+  let pressed = false
+
+  function setPressed(nextPressed: boolean) {
+    if (pressed === nextPressed) return
+    pressed = nextPressed
+    handle.update()
+  }
+
+  return () => (
+    <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<HTMLElement, [handler: () => void]>(() => (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<HTMLElement, [handler: () => void]>(() => (handler) => [
+  on('pointerup', handler),
+  on('pointerleave', handler),
+  on('keyup', (event) => {
+    if (!(event.key === 'Enter' || event.key === ' ')) return
+    event.preventDefault()
+    handler()
+  }),
+  on('blur', handler),
+])

package/src/animation/demos/reordering.tsx

@@ -0,0 +1,68 @@
+import { css, type Handle } from '@remix-run/ui'
+import { animateLayout, spring } from '@remix-run/ui/animation'
+
+const initialOrder = ['#ff0088', '#dd00ee', '#9911ff', '#0d63f8']
+
+function shuffle<T>(array: T[]): T[] {
+  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: Handle) {
+  let order = initialOrder
+
+  function scheduleNextShuffle(signal: AbortSignal) {
+    let timeoutId = setTimeout(async () => {
+      if (signal.aborted) return
+      order = shuffle(order)
+      let nextSignal = await handle.update()
+      if (nextSignal.aborted) return
+      scheduleNextShuffle(nextSignal)
+    }, 1000)
+
+    signal.addEventListener('abort', () => clearTimeout(timeoutId), { once: true })
+  }
+
+  handle.queueTask(scheduleNextShuffle)
+
+  return () => (
+    <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',
+        }),
+      ]}
+    >
+      {order.map((backgroundColor) => (
+        <li
+          key={backgroundColor}
+          mix={[
+            css({
+              width: 100,
+              height: 100,
+              borderRadius: 10,
+            }),
+            animateLayout({
+              ...spring({ duration: 600, bounce: 0.2 }),
+            }),
+          ]}
+          style={{ backgroundColor }}
+        />
+      ))}
+    </ul>
+  )
+}

package/src/animation/demos/rolling-square.tsx

@@ -0,0 +1,57 @@
+import { type Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function RollingSquare(handle: Handle) {
+  let toggled = false
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '20px',
+          minWidth: '300px',
+        }),
+      ]}
+    >
+      <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%)',
+        }}
+      />
+      <button
+        mix={[
+          css({
+            backgroundColor: '#8df0cc',
+            color: '#0f1115',
+            borderRadius: '5px',
+            padding: '10px',
+            margin: '10px',
+            border: 'none',
+            cursor: 'pointer',
+          }),
+          on('click', () => {
+            toggled = !toggled
+            handle.update()
+          }),
+        ]}
+      >
+        Toggle position
+      </button>
+    </div>
+  )
+}

package/src/animation/demos/rotate.tsx

@@ -0,0 +1,21 @@
+import { css } from '@remix-run/ui'
+
+export function Rotate() {
+  return () => (
+    <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`,
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/demos/shared-layout.tsx

@@ -0,0 +1,211 @@
+import { css, on, type Handle, type RemixNode } 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: Handle<{ state: boolean }>) {
+  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 (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+function WaitExample(handle: Handle<{ state: boolean }>) {
+  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 (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export function SharedLayout(handle: Handle) {
+  let state = true
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 16 })]}>
+        <OverlapExample state={state} />
+        <WaitExample state={state} />
+      </div>
+      <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()
+          }),
+        ]}
+      >
+        Switch
+      </button>
+    </div>
+  )
+}
+
+function Circle(handle: Handle<{ filled?: boolean; children: RemixNode }>) {
+  return () => (
+    <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',
+        }),
+      ]}
+    >
+      {handle.props.children}
+    </div>
+  )
+}
+
+function FilledIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+      <path d="m21 3-9 9" />
+      <path d="M15 3h6v6" />
+    </svg>
+  )
+}
+
+function OutlineIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M9 12h6" />
+    </svg>
+  )
+}

package/src/animation/demos/transition-options.tsx

@@ -0,0 +1,24 @@
+import { css } from '@remix-run/ui'
+import { animateEntrance } from '@remix-run/ui/animation'
+
+export function TransitionOptions() {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          borderRadius: '50%',
+          backgroundColor: '#9911ff',
+        }),
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.5)',
+          duration: 800,
+          delay: 500,
+          easing: 'cubic-bezier(0, 0.71, 0.2, 1.01)',
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/spring.ts

@@ -144,6 +144,28 @@ function transition(
   return properties.map((p) => `${p} ${s}`).join(', ')
 }
 
+/**
+ * Create a spring-physics animation iterator for CSS transitions and WAAPI.
+ *
+ * The returned iterator can be:
+ * - Iterated to get position values (0→1)
+ * - Spread into WAAPI options: `element.animate(keyframes, { ...spring() })`
+ * - Stringified for CSS: `` `transform ${spring()}` ``
+ *
+ * @example
+ * // Named preset
+ * let s = spring('bouncy')
+ * element.style.transition = `transform ${s}`
+ *
+ * @example
+ * // Custom parameters
+ * let s = spring({ duration: 500, bounce: 0.2 })
+ * element.animate(keyframes, { ...s })
+ *
+ * @example
+ * // Transition helper for multiple properties
+ * element.style.transition = spring.transition(['transform', 'opacity'], 'snappy')
+ */
 export const spring: SpringFunction = Object.assign(createSpring, {
   transition,
   presets,

package/src/{components/breadcrumbs → breadcrumbs}/README.md

@@ -2,7 +2,7 @@
 
 `Breadcrumbs` renders semantic breadcrumb navigation from a list of items. Use it when the page needs a compact path back through parent sections.
 
-## Usage
+## Component Usage
 
 ```tsx
 import { Breadcrumbs } from 'remix/ui/breadcrumbs'
@@ -32,13 +32,13 @@ Mark an earlier item as current when the page belongs to a parent section but th
 />
 ```
 
-Pass `separator` to replace the default chevron glyph.
+Pass `separator` to replace the default chevron icon.
 
 ```tsx
 <Breadcrumbs items={[{ href: '/', label: 'Home' }, { label: 'Breadcrumbs' }]} separator="/" />
 ```
 
-## `breadcrumbs.*`
+## `remix/ui/breadcrumbs`
 
 - `Breadcrumbs`: component that renders a `<nav>` with an ordered list of breadcrumb items.
 - `BreadcrumbItem`: item shape with `label`, optional `href`, and optional `current`.
@@ -52,4 +52,4 @@ Pass `separator` to replace the default chevron glyph.
 - An explicit current item wins over the last-item default.
 - Current items render as text with `aria-current="page"`, even when they include `href`.
 - Non-current items with `href` render as links; non-current items without `href` render as text.
-- The default separator is the `chevronRight` glyph. Separators render between items and are hidden from assistive technology.
+- The default separator is a chevron icon. Separators render between items and are hidden from assistive technology.

package/src/{components/breadcrumbs/breadcrumbs.tsx → breadcrumbs/index.tsx}

@@ -1,8 +1,8 @@
 import { css, createElement } from '@remix-run/ui'
 import type { Handle, Props, RemixNode } from '@remix-run/ui'
 
-import { Glyph } from '../glyph/glyph.tsx'
-import { theme } from '../../theme/theme.ts'
+import { ChevronRightIcon } from '../shared/icons.tsx'
+import { componentStyleValues as styles } from '../shared/style-values.ts'
 
 export type BreadcrumbItem = {
   current?: boolean
@@ -23,7 +23,7 @@ const listCss = css({
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'center',
-  gap: `${theme.space.xs} ${theme.space.sm}`,
+  gap: `${styles.space.xs} ${styles.space.sm}`,
   minWidth: 0,
   margin: 0,
   padding: 0,
@@ -41,34 +41,34 @@ const separatorCss = css({
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0,
-  width: theme.fontSize.sm,
-  height: theme.fontSize.sm,
-  color: theme.colors.text.muted,
+  width: styles.fontSize.sm,
+  height: styles.fontSize.sm,
+  color: styles.colors.text.muted,
 })
 
 const linkCss = css({
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
+  color: styles.colors.text.secondary,
+  fontSize: styles.fontSize.sm,
+  lineHeight: styles.lineHeight.normal,
   textDecoration: 'none',
   whiteSpace: 'nowrap',
   '&:hover': {
-    color: theme.colors.text.primary,
+    color: styles.colors.text.primary,
   },
 })
 
 const currentCss = css({
-  color: theme.colors.text.primary,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-  fontWeight: theme.fontWeight.medium,
+  color: styles.colors.text.primary,
+  fontSize: styles.fontSize.sm,
+  lineHeight: styles.lineHeight.normal,
+  fontWeight: styles.fontWeight.medium,
   whiteSpace: 'nowrap',
 })
 
 const textCss = css({
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
+  color: styles.colors.text.secondary,
+  fontSize: styles.fontSize.sm,
+  lineHeight: styles.lineHeight.normal,
   whiteSpace: 'nowrap',
 })
 
@@ -80,7 +80,7 @@ export function Breadcrumbs(handle: Handle<BreadcrumbsProps>): () => RemixNode {
       currentIndex = Math.max(0, items.length - 1)
     }
 
-    let separatorContent = separator ?? <Glyph name="chevronRight" />
+    let separatorContent = separator ?? <ChevronRightIcon />
 
     return (
       <nav aria-label={ariaLabel ?? 'Breadcrumb'} {...navProps} mix={[rootCss, mix]}>

package/src/button/README.md

@@ -0,0 +1,44 @@
+# button
+
+`button` is a style mixin for pill-shaped action controls. It owns only button-like visual styling and the default `type="button"` behavior for native `<button>` hosts.
+
+## Primitive Usage
+
+```tsx
+import button from 'remix/ui/button'
+
+function Actions() {
+  return () => (
+    <div>
+      <button mix={button()}>Edit order</button>
+      <button mix={button({ size: 'lg', tone: 'primary' })}>Add product</button>
+      <button mix={button({ tone: 'ghost' })}>Cancel</button>
+    </div>
+  )
+}
+```
+
+Compose app-owned styles around the primitive when a control needs local layout or state styling:
+
+```tsx
+import button from 'remix/ui/button'
+import { toolbarButtonStyle } from './toolbar.styles'
+
+function ToolbarAction() {
+  return () => <button mix={[toolbarButtonStyle, button({ tone: 'ghost' })]}>Archive</button>
+}
+```
+
+## `remix/ui/button`
+
+- `button(options)`: style mixin for native buttons or button-like hosts.
+- `ButtonOptions`: accepts `size` and `tone`.
+- `ButtonSize`: `'md'` or `'lg'`. Defaults to `'md'`.
+- `ButtonTone`: `'neutral'`, `'primary'`, or `'ghost'`. Defaults to `'neutral'`.
+
+## Behavior Notes
+
+- `button()` returns a mixin descriptor, so it composes with other mixins in the host element's `mix` prop.
+- Native `<button>` hosts receive `type="button"` unless an explicit `type` is provided.
+- Non-button hosts receive styling only.
+- Disabled hosts use the shared disabled treatment through `disabled` or `aria-disabled="true"`.