remix 3.0.0-rc.4 → 3.0.0

package/src/ui/animation/README.md

@@ -1,318 +0,0 @@
-# animation
-
-`animation` provides small primitives for entrance, exit, layout, spring, and tween animation. Use these helpers with Remix UI mixins, CSS transitions, the Web Animations API, and imperative `requestAnimationFrame` loops.
-
-## Usage
-
-```tsx
-import { animateEntrance, animateExit, animateLayout, spring } from 'remix/ui/animation'
-
-let panelTransition = spring.transition(['opacity', 'transform'], 'snappy')
-
-function Panel() {
-  return () => (
-    <div
-      style={{ transition: panelTransition }}
-      mix={[
-        animateEntrance({ opacity: 0, duration: 120 }),
-        animateExit({ opacity: 0, duration: 120 }),
-        animateLayout(),
-      ]}
-    >
-      Saved filters
-    </div>
-  )
-}
-```
-
-## Entrance And Exit
-
-`animateEntrance` animates an element from the provided keyframe into its natural styles when the element is inserted.
-
-```tsx
-import { animateEntrance, spring } from 'remix/ui/animation'
-
-function Toast() {
-  return () => (
-    <div
-      mix={[
-        animateEntrance({
-          opacity: 0,
-          transform: 'translateY(8px)',
-          ...spring('snappy'),
-        }),
-      ]}
-    >
-      Saved
-    </div>
-  )
-}
-```
-
-`animateExit` keeps a removed keyed element in the DOM long enough to animate from its natural styles to the provided keyframe.
-
-```tsx
-import type { Handle } from 'remix/ui'
-import { animateExit } from 'remix/ui/animation'
-
-function Item(handle: Handle<{ id: string; label: string }>) {
-  return () => (
-    <li
-      key={handle.props.id}
-      mix={[
-        animateExit({
-          opacity: 0,
-          transform: 'scale(0.96)',
-          duration: 120,
-          easing: 'ease-in',
-        }),
-      ]}
-    >
-      {handle.props.label}
-    </li>
-  )
-}
-```
-
-Passing `true` uses the default opacity animation. Passing `false`, `null`, or `undefined` disables the animation.
-
-```tsx
-<div mix={[animateEntrance(true), animateExit(false)]} />
-```
-
-Animation configs combine WAAPI timing options with style properties for the animated keyframe.
-
-```ts
-type AnimateMixinConfig = {
-  duration: number
-  easing?: string
-  delay?: number
-  composite?: CompositeOperation
-  initial?: boolean
-  [property: string]: unknown
-}
-```
-
-Pass `initial: false` to skip only the first keyed entrance for an element within a parent. Later insertions for the same key can still animate.
-
-```tsx
-<div key={id} mix={[animateEntrance({ opacity: 0, duration: 150, initial: false })]} />
-```
-
-Exit animations can reclaim a removed keyed node if the same keyed element is rendered again before the exit finishes. The reclaimed node retargets toward its natural styles instead of simply reversing the exit animation.
-
-For custom teardown, `createMixin` exposes `event.persistNode(callback)` in its `beforeRemove` event. It keeps the host in the DOM until the callback settles and supplies an abort signal for cancellation when a keyed node is reclaimed. See [Deferring removal](https://github.com/remix-run/remix/blob/main/packages/ui/docs/mixins.md#deferring-removal-with-persistnode) for a complete example and lifecycle ordering.
-
-## Layout Animation
-
-`animateLayout` animates layout changes with a FLIP-style transform projection. Use it on elements whose position or size can change between renders.
-
-```tsx
-import type { Handle } from 'remix/ui'
-import { animateLayout, spring } from 'remix/ui/animation'
-
-function Card(handle: Handle<{ expanded: boolean }>) {
-  return () => (
-    <section
-      class={handle.props.expanded ? 'card expanded' : 'card'}
-      mix={[
-        animateLayout({
-          ...spring('smooth'),
-        }),
-      ]}
-    >
-      Details
-    </section>
-  )
-}
-```
-
-Pass `size: false` when the element should animate position only and avoid scale projection.
-
-```tsx
-<div mix={[animateLayout({ duration: 180, easing: 'ease-out', size: false })]} />
-```
-
-Passing `true` or no argument enables the default layout animation. Passing `false`, `null`, or `undefined` disables it. Layout animation skips work when geometry does not change, keeps in-flight animations running when their target geometry has not changed, and continues from the current visual transform when a new layout change interrupts an active animation.
-
-## Spring
-
-`spring` returns a decorated iterator. It can be iterated for JavaScript animation, spread into Web Animations API options, or stringified for CSS transition syntax.
-
-```tsx
-import { spring } from 'remix/ui/animation'
-
-spring('bouncy')
-spring('snappy')
-spring('smooth')
-spring({ duration: 400, bounce: 0.3 })
-```
-
-```ts
-interface SpringIterator extends IterableIterator<number> {
-  duration: number
-  easing: string
-  toString(): string
-}
-```
-
-Use `spring.transition` to build CSS transition entries.
-
-```tsx
-let transition = spring.transition(['opacity', 'transform'], 'bouncy')
-
-function Button() {
-  return () => <button style={{ transition }}>Save</button>
-}
-```
-
-Spread a spring into animation mixin or WAAPI options.
-
-```tsx
-<div
-  mix={[
-    animateEntrance({
-      opacity: 0,
-      transform: 'scale(0.92)',
-      ...spring('bouncy'),
-    }),
-  ]}
-/>
-```
-
-```ts
-element.animate(
-  [
-    { opacity: 0, transform: 'scale(0.92)' },
-    { opacity: 1, transform: 'scale(1)' },
-  ],
-  { ...spring('snappy') },
-)
-```
-
-Use the iterator values as progress from `0` to `1` for imperative animation.
-
-```ts
-let from = 0
-let to = 200
-
-for (let progress of spring('bouncy')) {
-  let x = from + (to - from) * progress
-  element.style.transform = `translateX(${x}px)`
-  await nextFrame()
-}
-```
-
-The built-in presets are:
-
-| Preset   | Bounce | Duration | Character                |
-| -------- | ------ | -------- | ------------------------ |
-| `smooth` | -0.3   | 400ms    | Overdamped, no overshoot |
-| `snappy` | 0      | 200ms    | Quick, no overshoot      |
-| `bouncy` | 0.3    | 400ms    | Underdamped bounce       |
-
-Override preset duration or velocity with the second argument.
-
-```ts
-spring('bouncy', { duration: 300 })
-spring('snappy', { velocity: 2 })
-```
-
-Use explicit options when you need full control.
-
-```ts
-spring({
-  duration: 500,
-  bounce: 0.35,
-  velocity: 0,
-})
-```
-
-## Tween
-
-`tween` creates a generator that interpolates a numeric value over time with a cubic-bezier curve. Call `next()` once to initialize the generator, then pass `requestAnimationFrame` timestamps into `next(timestamp)`.
-
-```ts
-import { easings, tween } from 'remix/ui/animation'
-
-let animation = tween({
-  from: 0,
-  to: 100,
-  duration: 300,
-  curve: easings.easeOut,
-})
-
-animation.next()
-
-function tick(timestamp: number) {
-  let { value, done } = animation.next(timestamp)
-  element.style.transform = `translateX(${value}px)`
-  if (!done) requestAnimationFrame(tick)
-}
-
-requestAnimationFrame(tick)
-```
-
-Animate multiple values with separate tweens.
-
-```ts
-let xAnimation = tween({ from: 0, to: 100, duration: 500, curve: easings.easeOut })
-let scaleAnimation = tween({ from: 1, to: 1.2, duration: 500, curve: easings.easeOut })
-
-xAnimation.next()
-scaleAnimation.next()
-
-function tick(timestamp: number) {
-  let x = xAnimation.next(timestamp)
-  let scale = scaleAnimation.next(timestamp)
-
-  element.style.transform = `translateX(${x.value}px) scale(${scale.value})`
-
-  if (!x.done || !scale.done) {
-    requestAnimationFrame(tick)
-  }
-}
-```
-
-The built-in easing presets are cubic-bezier control points matching common CSS timing functions.
-
-```ts
-easings.linear
-easings.ease
-easings.easeIn
-easings.easeOut
-easings.easeInOut
-```
-
-Custom curves use the same control points as CSS `cubic-bezier(x1, y1, x2, y2)`.
-
-```ts
-let animation = tween({
-  from: 0,
-  to: 100,
-  duration: 500,
-  curve: { x1: 0.68, y1: -0.55, x2: 0.265, y2: 1.55 },
-})
-```
-
-## API
-
-- `animateEntrance(config?)`: mixin that animates an element when it enters the DOM.
-- `animateExit(config?)`: mixin that persists a removed keyed element long enough to run its exit animation.
-- `animateLayout(config?)`: mixin that animates layout changes by comparing geometry between renders.
-- `spring(preset?, overrides?)`: creates a `SpringIterator` from a named preset.
-- `spring(options?)`: creates a `SpringIterator` from explicit spring options.
-- `spring.transition(property, presetOrOptions?, overrides?)`: builds one or more CSS transition entries from a spring.
-- `spring.presets`: named `smooth`, `snappy`, and `bouncy` spring defaults.
-- `tween(options)`: generator that interpolates numeric values over time with a cubic-bezier curve.
-- `easings`: common cubic-bezier presets for `tween`.
-- `SpringIterator`, `SpringPreset`, `SpringOptions`, `TweenOptions`, and `BezierCurve`: public TypeScript types for spring and tween configuration.
-
-## Behavior Notes
-
-- Animation mixin style properties are copied into WAAPI keyframes; `duration`, `easing`, `delay`, `composite`, and `initial` are treated as options.
-- `animateEntrance({ initial: false })` only skips the first keyed entrance tracked for the parent node.
-- `animateExit` needs keyed elements when removed nodes may be reclaimed or persisted across list updates.
-- `animateLayout({ size: false })` animates translation without scale projection.
-- `spring()` yields progress values from `0` to `1`; its `duration` and `easing` properties are enumerable so `{ ...spring() }` works with WAAPI options.
-- `tween(...)` yields the initial value first; advance the generator with frame timestamps via `next(timestamp)` and read `done` to detect completion.

package/src/ui/animation.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/animation'

package/src/ui/breadcrumbs/README.md

@@ -1,55 +0,0 @@
-# breadcrumbs
-
-`Breadcrumbs` renders semantic breadcrumb navigation from a list of items. Use it when the page needs a compact path back through parent sections.
-
-## Component Usage
-
-```tsx
-import { Breadcrumbs } from 'remix/ui/breadcrumbs'
-
-export function ProjectBreadcrumbs() {
-  return (
-    <Breadcrumbs
-      items={[
-        { href: '/', label: 'Home' },
-        { href: '/projects', label: 'Projects' },
-        { label: 'Roadmap' },
-      ]}
-    />
-  )
-}
-```
-
-Mark an earlier item as current when the page belongs to a parent section but the final crumb is still useful context. The current item always renders as text with `aria-current="page"`.
-
-```tsx
-<Breadcrumbs
-  items={[
-    { href: '/', label: 'Home' },
-    { current: true, href: '/components', label: 'Components' },
-    { label: 'Breadcrumbs' },
-  ]}
-/>
-```
-
-Pass `separator` to replace the default chevron icon.
-
-```tsx
-<Breadcrumbs items={[{ href: '/', label: 'Home' }, { label: 'Breadcrumbs' }]} separator="/" />
-```
-
-## `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`.
-- `BreadcrumbsProps`: nav props plus required `items` and optional `separator`.
-
-## Behavior Notes
-
-- The default `aria-label` is `"Breadcrumb"` unless an `aria-label` prop is provided.
-- Breadcrumb items render inside an ordered list.
-- The last item is treated as current when no item has `current: true`.
-- 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 a chevron icon. Separators render between items and are hidden from assistive technology.

package/src/ui/breadcrumbs.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/breadcrumbs'

package/src/ui/button/README.md

@@ -1,44 +0,0 @@
-# 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"`.

package/src/ui/button.ts

@@ -1,3 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/button'
-export { default } from '@remix-run/ui/button'

package/src/ui/checkbox/README.md

@@ -1,59 +0,0 @@
-# checkbox
-
-`checkbox` is a style mixin for native checkbox inputs. It only owns checkbox visuals, an optional visual state, and the default `type="checkbox"` behavior for native `<input>` hosts.
-
-## Usage
-
-```tsx
-import checkbox from 'remix/ui/checkbox'
-
-function VisibilityToggle() {
-  return () => (
-    <label>
-      <input defaultChecked mix={checkbox()} name="visibility" value="archived" />
-      Show archived items
-    </label>
-  )
-}
-```
-
-Use `size: 'lg'` when the surrounding UI needs a larger visual control:
-
-```tsx
-<input mix={checkbox({ size: 'lg' })} />
-```
-
-For mixed state, app code owns the checkbox state and the native `indeterminate` property:
-
-```tsx
-import checkbox from 'remix/ui/checkbox'
-
-function PermissionParent() {
-  let state: 'checked' | 'mixed' | 'unchecked' = 'mixed'
-
-  return () => (
-    <input
-      checked={state === 'checked'}
-      indeterminate={state === 'mixed'}
-      mix={checkbox({ state })}
-    />
-  )
-}
-```
-
-## `remix/ui/checkbox`
-
-- `checkbox(options)`: style mixin for native checkbox inputs or checkbox-like hosts.
-- `CheckboxOptions`: accepts `size` and `state`.
-- `CheckboxSize`: `'md'` or `'lg'`. Defaults to `'md'`.
-- `CheckboxState`: `'checked'`, `'mixed'`, or `'unchecked'`.
-
-## Behavior Notes
-
-- `checkbox()` returns a mixin descriptor, so it composes with other mixins in the host element's `mix` prop.
-- Native `<input>` hosts receive `type="checkbox"` unless an explicit `type` is provided.
-- Native input state is browser-owned through `checked`, `defaultChecked`, and user interaction.
-- The optional `state` option adds `aria-checked` and `data-state` for app-owned mixed state or custom hosts.
-- Checked styles apply through `:checked`, `aria-checked="true"`, or `data-state="checked"`.
-- Mixed styles apply through `:indeterminate`, `indeterminate`, `aria-checked="mixed"`, or `data-state="mixed"`.
-- Disabled hosts use the shared disabled treatment through `disabled` or `aria-disabled="true"`.

package/src/ui/checkbox.ts

@@ -1,3 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/checkbox'
-export { default } from '@remix-run/ui/checkbox'

package/src/ui/combobox/README.md

@@ -1,194 +0,0 @@
-# combobox
-
-`Combobox` is the input-first popup value picker for `remix/ui/combobox`.
-
-Use it when the user should type draft text, filter a popup list, and still commit one stable form value. If you just need a button-triggered picker, use `Select` instead.
-
-## Component Usage
-
-```tsx
-import { css, type Handle } from 'remix/ui'
-import { Combobox, ComboboxOption } from 'remix/ui/combobox'
-import { onComboboxChange } from 'remix/ui/combobox/primitives'
-
-let airports = [
-  {
-    label: 'Los Angeles International',
-    searchValue: ['lax', 'los angeles', 'los angeles international'],
-    value: 'LAX',
-  },
-  {
-    label: 'John F. Kennedy International',
-    searchValue: ['jfk', 'new york', 'john f. kennedy international'],
-    value: 'JFK',
-  },
-] as const
-
-export default function AirportField(handle: Handle) {
-  let value: string | null = null
-
-  return () => (
-    <div mix={root}>
-      <Combobox
-        inputId="airport"
-        mix={onComboboxChange((event) => {
-          value = event.value
-          void handle.update()
-        })}
-        name="airport"
-        placeholder="Search airports or codes"
-      >
-        {airports.map((airport) => (
-          <ComboboxOption
-            key={airport.value}
-            label={airport.label}
-            searchValue={airport.searchValue}
-            value={airport.value}
-          />
-        ))}
-      </Combobox>
-
-      <p>{`value=${value ?? 'null'}`}</p>
-    </div>
-  )
-}
-
-let root = css({
-  display: 'grid',
-  gap: '8px',
-})
-```
-
-## Primitive Usage
-
-Use the lower-level primitives when app code owns the input, popover, list, and option markup:
-
-```tsx
-import * as combobox from 'remix/ui/combobox/primitives'
-import { inputStyle, listStyle, optionStyle, popoverStyle } from './combobox.styles'
-
-let frameworks = [
-  { label: 'Remix', searchValue: ['remix', 'rmx'], value: 'remix' },
-  { label: 'React Router', value: 'react-router' },
-]
-
-export function PrimitiveCombobox() {
-  return (
-    <combobox.Context name="framework">
-      <input mix={[inputStyle, combobox.input()]} placeholder="Search frameworks" />
-      <div mix={[popoverStyle, combobox.popover()]}>
-        <div mix={[listStyle, combobox.list()]}>
-          {frameworks.map((option) => (
-            <div key={option.value} mix={[optionStyle, combobox.option(option)]}>
-              {option.label}
-            </div>
-          ))}
-        </div>
-      </div>
-      <input mix={combobox.hiddenInput()} />
-    </combobox.Context>
-  )
-}
-```
-
-## `remix/ui/combobox`
-
-### `Combobox`
-
-The convenience component.
-
-- Renders the text input, popover surface, listbox root, and hidden form input.
-- Dispatches a bubbled custom event that `onComboboxChange(...)` listens for when the committed value changes.
-- Accepts `children`, `defaultValue`, `disabled`, `inputId`, `name`, `placeholder`, and root `div` props.
-
-### `ComboboxOption`
-
-The default option row for `Combobox`.
-
-- Uses the shared listbox option visuals.
-- Accepts `label`, `value`, optional `searchValue`, and optional `disabled`.
-- Renders `children` when provided, otherwise renders `label`.
-- `searchValue` can be a string or string array for aliases like airport codes, abbreviations, or alternate labels.
-
-### Style and Prop Exports
-
-- `inputStyle`: default combobox input style.
-- `popoverStyle`: default combobox popover behavior style.
-- `ComboboxProps` and `ComboboxOptionProps`: public TypeScript props for the composed APIs.
-
-## `remix/ui/combobox/primitives`
-
-### `onComboboxChange(...)`
-
-The listener mixin from `remix/ui/combobox/primitives` for bubbled committed-value changes.
-
-The event object includes:
-
-- `event.value`: the committed value or `null`
-- `event.label`: the committed option label or `null`
-- `event.optionId`: the generated option id or `null`
-- `ComboboxChangeEvent`: the event class dispatched for committed value changes.
-
-### `combobox.Context`
-
-The lower-level coordinator from `remix/ui/combobox/primitives` for custom combobox composition.
-
-It wraps the shared `popover` and `listbox` contexts and owns the draft text, committed value, popup state, and selection timing.
-
-### `combobox.input()`
-
-Turns the host input into the combobox input.
-
-- Keeps focus on the input during list navigation and pointer selection.
-- Wires `role="combobox"`, `aria-expanded`, `aria-controls`, and `aria-activedescendant`.
-- Opens from typing, click, and arrow-key navigation.
-
-### `combobox.popover()`
-
-Turns the host into the combobox popover surface.
-
-- Uses the shared popover primitive.
-- Keeps anchor clicks inside the session so the input stays interactive while open.
-- Applies the combobox open/close reason contract used by `popoverStyle`.
-
-### `combobox.list()`
-
-Turns the host into the popup listbox root and applies the generated list id.
-
-### `combobox.option(options)`
-
-Registers one option with the combobox and listbox layers.
-
-- Accepts `label`, `value`, optional `searchValue`, and optional `disabled`.
-- Hides non-matching options from the current draft filter.
-- Prevents pointer selection from blurring the input before the click commits.
-
-### `combobox.hiddenInput()`
-
-Mirrors the committed value into a hidden input for forms.
-
-Apply it to an `<input type="hidden" />` inside the same `combobox.Context`.
-
-### Primitive Types
-
-- `ComboboxOpenStrategy`: initial active-option strategy when the popup opens.
-- `ComboboxHandle`: imperative ref for reading or updating the combobox value and draft label.
-- `ComboboxContextProps`, `ComboboxProps`, `ComboboxOptionOptions`, and `ComboboxOptionProps`: primitive prop and option types for custom composition.
-
-## Behavior Notes
-
-- Typing opens the popup in hint mode when there are matches.
-- If typing leaves no matches, the popup closes immediately without the navigation fade-out.
-- Selecting from the list flashes the option, then closes the popup and finally commits the visible input label.
-- Typing clears the committed value immediately; the hidden form value becomes empty until the user commits again.
-- Blur commits an exact `label` or `searchValue` match. A non-matching blur clears the draft text and committed value.
-- `Escape` keeps exact-match draft text but clears non-matching draft text and selection.
-- Disabled options can stay visible in filtered results, but they are skipped by keyboard navigation and selection.
-
-## When To Use Something Else
-
-Use `Select` when you want the ordinary button-triggered single-select control.
-
-Use `listbox` when you need listbox semantics without an editable text input.
-
-Use `popover` directly for custom floating panels that are not value-picking controls.

package/src/ui/combobox/primitives.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/combobox/primitives'

package/src/ui/combobox.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/combobox'