remix 3.0.0-rc.4 → 3.0.0

package/src/ui/input/README.md

@@ -1,52 +0,0 @@
-# input
-
-`input` is a style mixin for text inputs. Use `input()` directly on standalone native inputs, or compose `input.root()` with `input.field()` when the input needs inline icons or controls.
-
-## Primitive Usage
-
-```tsx
-import input from 'remix/ui/input'
-
-function ProductFilters() {
-  return () => (
-    <div>
-      <input mix={input()} placeholder="Limit" />
-
-      <div mix={input.root()}>
-        <SearchIcon />
-        <input mix={input.field()} placeholder="Search and filter products" />
-      </div>
-    </div>
-  )
-}
-```
-
-Compose app-owned styles when a field needs local layout or adornments:
-
-```tsx
-import input from 'remix/ui/input'
-import { filterFieldStyle, filterRootStyle } from './filters.styles'
-
-function SearchFilter() {
-  return () => (
-    <div mix={[filterRootStyle, input.root()]}>
-      <SearchIcon />
-      <input mix={[filterFieldStyle, input.field()]} placeholder="Search" />
-    </div>
-  )
-}
-```
-
-## `remix/ui/input`
-
-- `input(options)`: styles a standalone native input. `size` may be `'md'` or `'lg'` and defaults to `'md'`.
-- `input.root(options)`: styles a flex input frame for inline icons, buttons, and a child input.
-- `input.field()`: styles the child native input inside `input.root()`.
-- `InputOptions`: accepts `size`.
-- `InputSize`: `'md'` or `'lg'`.
-
-## Behavior Notes
-
-- `input.root()` uses child selectors to size direct SVG children as presentational icons.
-- Put the icon before or after the field to control its visual position.
-- Focus and disabled states work through the native input; the root mirrors them with `:focus-within` and `:has(input:disabled)`.

package/src/ui/input.ts

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

package/src/ui/listbox/README.md

@@ -1,83 +0,0 @@
-# listbox
-
-`listbox` is a headless option-list primitive for controlled selection and highlighting. Use it under components like select and combobox, or directly when you need custom listbox markup.
-
-## Primitive Usage
-
-```tsx
-import type { Handle } from 'remix/ui'
-import * as listbox from 'remix/ui/listbox'
-import type { ListboxValue } from 'remix/ui/listbox'
-import { listStyle, optionStyle } from './listbox.styles'
-
-function FrameworkListbox(handle: Handle) {
-  let value: ListboxValue = 'remix'
-  let activeValue: ListboxValue = 'remix'
-
-  return () => (
-    <listbox.Context
-      value={value}
-      activeValue={activeValue}
-      onSelect={(nextValue) => {
-        value = nextValue
-        void handle.update()
-      }}
-      onHighlight={(nextValue) => {
-        activeValue = nextValue
-        void handle.update()
-      }}
-    >
-      <div aria-label="Frameworks" tabIndex={0} mix={[listStyle, listbox.list()]}>
-        {frameworks.map((option) => (
-          <div key={option.value} mix={[optionStyle, listbox.option(option)]}>
-            {option.label}
-          </div>
-        ))}
-      </div>
-    </listbox.Context>
-  )
-}
-
-let frameworks = [
-  { label: 'Remix', value: 'remix' },
-  { disabled: true, label: 'React Router', value: 'react-router' },
-  { label: 'React', value: 'react' },
-  { label: 'Preact', value: 'preact' },
-]
-```
-
-Use `textValue` when the visible label is not the best string for typeahead search.
-
-```tsx
-<div
-  mix={[
-    optionStyle,
-    listbox.option({
-      label: 'Staging',
-      textValue: 'beta',
-      value: 'staging',
-    }),
-  ]}
->
-  Staging
-</div>
-```
-
-## `remix/ui/listbox`
-
-- `listbox.Context`: provider for controlled `value` and `activeValue`, option registration, selection, highlighting, optional ref access, `flashSelection`, `selectionFlashAttribute`, and `onSelectSettled`.
-- `listbox.list()`: mixin that wires `role="listbox"`, default `tabIndex={-1}`, keyboard navigation, focus scrolling, and typeahead highlighting.
-- `listbox.option(options)`: mixin that registers an option with required `label` and `value`, optional `disabled` and `textValue`, and wires `role="option"`, id, selected, disabled, highlighted, mouse, and click behavior.
-- `ListboxValue`: selected or active value, represented as `string | null`.
-- `ListboxContext` and `ListboxProviderProps`: provider context and prop types for controlled listboxes.
-- `ListboxOption`: option input shape with `label`, `value`, optional `disabled`, and optional `textValue`.
-- `ListboxRegisteredOption`: registered option metadata passed to callbacks and refs.
-- `ListboxRef`: live ref object exposing active/selected options, option navigation, search matching, scrolling, and selection helpers.
-
-## Behavior Notes
-
-- Selection and highlighting are controlled. `onSelect` and `onHighlight` notify the parent, but DOM state updates after the parent rerenders with new values.
-- Disabled options are skipped by keyboard navigation, typeahead, mouse movement, and click selection.
-- Arrow keys wrap through enabled options. `Home` and `End` move to enabled boundaries. `Enter` and Space select the active option.
-- Typeahead highlights the next matching enabled option without selecting it and supports `textValue`.
-- `flashSelection` applies `selectionFlashAttribute` for 60ms, delays `onSelectSettled`, and ignores new highlight/select interactions until the flash completes.

package/src/ui/listbox.ts

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

package/src/ui/menu/README.md

@@ -1,161 +0,0 @@
-# menu
-
-`Menu` renders a button-triggered menu with keyboard navigation, checked items, selection events, and nested submenus. Use it for action menus and command groups.
-
-## Component Usage
-
-```tsx
-import type { Handle } from 'remix/ui'
-import { css } from 'remix/ui'
-import { Menu, MenuItem, Submenu } from 'remix/ui/menu'
-import { onMenuSelect } from 'remix/ui/menu/primitives'
-
-export function ViewMenu(handle: Handle) {
-  let wordWrap = false
-  let density = 'comfortable'
-
-  return () => (
-    <Menu
-      label="View"
-      mix={onMenuSelect((event) => {
-        if (event.item.name === 'wordWrap') {
-          wordWrap = event.item.checked ?? false
-        } else if (event.item.name === 'density' && event.item.value) {
-          density = event.item.value
-        }
-
-        void handle.update()
-      })}
-    >
-      <MenuItem checked={wordWrap} name="wordWrap" type="checkbox">
-        Word wrap
-      </MenuItem>
-      <MenuItem disabled name="minimap">
-        Minimap
-      </MenuItem>
-      <hr mix={separatorStyle} />
-      <MenuItem checked={density === 'compact'} name="density" type="radio" value="compact">
-        Compact
-      </MenuItem>
-      <MenuItem checked={density === 'comfortable'} name="density" type="radio" value="comfortable">
-        Comfortable
-      </MenuItem>
-      <Submenu label="Zoom">
-        <MenuItem name="zoomIn" value="zoom-in">
-          Zoom in
-        </MenuItem>
-        <MenuItem name="zoomOut" value="zoom-out">
-          Zoom out
-        </MenuItem>
-      </Submenu>
-    </Menu>
-  )
-}
-
-let separatorStyle = css({
-  border: 0,
-  borderBlockStart: '1px solid #e5e7eb',
-  marginBlock: '4px',
-})
-```
-
-Use `label` or `searchValue` when the rendered item content is not the text that should be used for event labels or typeahead.
-
-```tsx
-<MenuItem label="Open command palette" name="commandPalette" searchValue="palette">
-  Command palette
-</MenuItem>
-```
-
-Use `menuLabel` when the menu surface needs a different accessible label from the visible trigger.
-
-```tsx
-<Menu label="..." menuLabel="Project actions">
-  <MenuItem name="rename">Rename project</MenuItem>
-</Menu>
-```
-
-Use `menu.contextTrigger()` with `menu.Context` and `MenuList` when a menu should open at the right-click location of an element.
-
-```tsx
-import { MenuItem, MenuList } from 'remix/ui/menu'
-import * as menu from 'remix/ui/menu/primitives'
-
-export function FileContextMenu(handle: Handle) {
-  return () => (
-    <menu.Context label="File actions">
-      <div mix={menu.contextTrigger()} tabIndex={0}>
-        File.txt
-      </div>
-      <MenuList>
-        <MenuItem name="rename">Rename</MenuItem>
-        <MenuItem name="delete">Delete</MenuItem>
-      </MenuList>
-    </menu.Context>
-  )
-}
-```
-
-Attach `onMenuSelect(...)` from `remix/ui/menu/primitives` to `MenuList` or a shared ancestor when using lower-level context menu composition.
-
-## Primitive Usage
-
-Use only the lower-level primitives when app code owns the trigger, surface, and item markup:
-
-```tsx
-import * as menu from 'remix/ui/menu/primitives'
-import { itemStyle, listStyle, popoverStyle, triggerStyle } from './menu.styles'
-
-export function PrimitiveMenu() {
-  return (
-    <menu.Context label="Project actions">
-      <button mix={[triggerStyle, menu.trigger()]} type="button">
-        Actions
-      </button>
-      <div mix={[popoverStyle, menu.popover()]}>
-        <div mix={[listStyle, menu.list()]}>
-          <div mix={[itemStyle, menu.item({ name: 'rename' })]}>Rename</div>
-          <div mix={[itemStyle, menu.item({ disabled: true, name: 'archive' })]}>Archive</div>
-        </div>
-      </div>
-    </menu.Context>
-  )
-}
-```
-
-## `remix/ui/menu`
-
-- `Menu`: composed trigger, popover, and list component for the common menu case.
-- `MenuItem`: menu item component. Supports regular, checkbox, and radio item roles through `type`, `checked`, `name`, `value`, `label`, `disabled`, and `searchValue`.
-- `Submenu`: nested menu component with its own trigger and child menu surface.
-- `MenuList`: lower-level styled list component for custom composition inside `menu.Context`.
-- `buttonStyle`, `popoverStyle`, `listStyle`, `itemStyle`, `itemSlotStyle`, `itemLabelStyle`, `itemIndicatorStyle`, and `triggerIndicatorStyle`: flat style mixins used by the component markup.
-- `MenuProps`, `MenuItemProps`, `MenuListProps`, and `SubmenuProps`: public TypeScript props for the composed APIs.
-
-## `remix/ui/menu/primitives`
-
-- `Context`: lower-level provider for custom menu composition.
-- `trigger()`: wires a button-style trigger to open the root menu.
-- `contextTrigger()`: opens the root menu from a `contextmenu` event at pointer coordinates, or from keyboard context-menu shortcuts.
-- `popover()`: wires the menu popover surface.
-- `list()`: wires the menu list root, focus handling, keyboard navigation, and typeahead.
-- `item(...)`: registers one menu item. Supports regular, checkbox, and radio roles through `type`, `checked`, `name`, `value`, `label`, `disabled`, and `searchValue`.
-- `submenuTrigger(...)`: registers a menu item that opens a child menu.
-- `onMenuSelect(...)`: event mixin for the bubbling `MenuSelectEvent`.
-- `MenuSelectEvent`: bubbling event whose `item` describes the selected item.
-- `MenuSelectItem`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuContextTriggerOptions`, `MenuItemOptions`, and `SubmenuTriggerOptions`: public TypeScript event, prop, and option types for the primitives.
-
-## Behavior Notes
-
-- Click opens the root menu and focuses the list; clicking the trigger again closes it and restores focus.
-- `menu.contextTrigger()` opens the root menu from a `contextmenu` event at the pointer coordinates and supports keyboard opening with the Context Menu key or Shift+F10.
-- `ArrowDown` opens from the trigger at the first enabled item. `ArrowUp` opens at the last enabled item. Enter and Space open the menu with focus on the list.
-- Keyboard navigation skips disabled items and does not wrap past the first or last enabled item.
-- `Home` and `End` move to the first and last enabled item. Enter and Space activate the highlighted item.
-- Printable keys use typeahead. Typeahead matches `searchValue` when provided and otherwise uses the item label.
-- Submenus open with `ArrowRight`, close with `ArrowLeft`, and are anchored to the submenu trigger with `right-start` placement.
-- Pointer movement highlights enabled items. Submenus open after a short focus/pointer delay and use hover aim so they stay open while moving toward the child surface.
-- Selecting a regular item flashes that item. Selecting a checkbox or radio item flashes the committed checked state.
-- Selection dispatches one bubbled `MenuSelectEvent`, closes the full menu tree, and restores focus to the root trigger.
-- The composed `Menu` re-dispatches selection from its trigger so handlers on the `Menu` button and shared ancestors see the event once.
-- `menuLabel`, `Submenu.menuLabel`, and `Submenu.listProps` let composed menus label and customize menu surfaces separately from trigger content.

package/src/ui/menu/primitives.ts

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

package/src/ui/menu.ts

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

package/src/ui/popover/README.md

@@ -1,103 +0,0 @@
-# popover
-
-`popover` is a low-level primitive for anchored, dismissible floating panels.
-
-Use it for custom surfaces like filters, inspectors, and view options. Higher-level widgets like menu, select, and combobox should build on top of it instead of exposing raw `popover.*` mixins directly.
-
-## Primitive Usage
-
-```tsx
-import { on, type Handle } from 'remix/ui'
-import * as popover from 'remix/ui/popover'
-import { panelStyle } from './popover.styles'
-
-export function ViewOptions(handle: Handle) {
-  let open = false
-
-  function openPopover() {
-    open = true
-    void handle.update()
-  }
-
-  function closePopover() {
-    open = false
-    void handle.update()
-  }
-
-  return () => (
-    <popover.Context>
-      <button
-        mix={[
-          popover.anchor({ placement: 'bottom-end' }),
-          popover.focusOnHide(),
-          on('click', openPopover),
-        ]}
-        type="button"
-      >
-        View options
-      </button>
-
-      <div
-        mix={[
-          panelStyle,
-          popover.surface({
-            open,
-            onHide() {
-              closePopover()
-            },
-          }),
-        ]}
-      >
-        <button mix={[popover.focusOnShow(), on('click', closePopover)]} type="button">
-          Close
-        </button>
-        <div>Panel content</div>
-      </div>
-    </popover.Context>
-  )
-}
-```
-
-## `remix/ui/popover`
-
-### `popover.Context`
-
-Provides shared coordination for one popover instance. Render the anchor, any focus targets, and the surface inside the same context.
-
-### `popover.anchor(options)`
-
-Registers the host element as the anchor for the current popover surface.
-
-### `popover.surface({ open, onHide, ... })`
-
-Turns the host into the controlled popover surface.
-
-- Wires `popover="manual"` and native `showPopover()` / `hidePopover()` behavior.
-- Calls `onHide` for `Escape` and outside clicks with a `PopoverHideRequest`.
-- Restores focus to the registered hide target unless `restoreFocusOnHide: false`.
-- Accepts `closeOnAnchorClick: false` when the anchor must stay interactive while open.
-
-Apply this to the actual floating root, not a nested child.
-
-### `popover.focusOnShow()`
-
-Registers the element that should receive focus when the popover opens.
-
-### `popover.focusOnHide()`
-
-Registers the element that should receive focus again when the popover closes.
-
-### Primitive Types
-
-- `PopoverContext`: context object exposed by `popover.Context`.
-- `PopoverProps`: provider props for one popover instance.
-- `PopoverSurfaceOptions`: options accepted by `popover.surface(...)`.
-- `PopoverHideRequest`: hide request passed to `onHide`.
-
-## Behavior Notes
-
-- Opening anchors the surface to the registered anchor and locks page scrolling until close.
-- `onHide` receives `{ reason: 'escape-key' | 'outside-click', target? }`.
-- `popover.focusOnShow()` wins on open when present.
-- `popover.focusOnHide()` is used on close by default when focus restoration is enabled.
-- `closeOnAnchorClick: false` keeps anchor clicks inside the current session, which is useful for input-driven popovers like comboboxes.

package/src/ui/popover.ts

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

package/src/ui/radio/README.md

@@ -1,53 +0,0 @@
-# radio
-
-`radio` is a style mixin for native radio inputs. It only owns radio visuals and the default `type="radio"` behavior for native `<input>` hosts.
-
-## Primitive Usage
-
-```tsx
-import radio from 'remix/ui/radio'
-
-function ShippingSpeed() {
-  return () => (
-    <fieldset>
-      <label>
-        <input defaultChecked mix={radio()} name="shipping-speed" value="standard" />
-        Standard
-      </label>
-      <label>
-        <input mix={radio({ size: 'lg' })} name="shipping-speed" value="express" />
-        Express
-      </label>
-    </fieldset>
-  )
-}
-```
-
-Compose app-owned styles around the primitive when a radio option needs local layout:
-
-```tsx
-import radio from 'remix/ui/radio'
-import { optionStyle } from './shipping.styles'
-
-function ShippingOption() {
-  return () => (
-    <label mix={optionStyle}>
-      <input mix={radio()} name="shipping-speed" value="overnight" />
-      Overnight
-    </label>
-  )
-}
-```
-
-## `remix/ui/radio`
-
-- `radio(options)`: style mixin for native radio inputs or radio-like hosts.
-- `RadioOptions`: accepts `size`.
-- `RadioSize`: `'md'` or `'lg'`. Defaults to `'md'`.
-
-## Behavior Notes
-
-- `radio()` returns a mixin descriptor, so it composes with other mixins in the host element's `mix` prop.
-- Native `<input>` hosts receive `type="radio"` unless an explicit `type` is provided.
-- Radio state is native browser behavior. The mixin also styles `aria-checked="true"` and `data-state="checked"` for custom hosts.
-- Disabled hosts use the shared disabled treatment through `disabled` or `aria-disabled="true"`.

package/src/ui/radio.ts

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

package/src/ui/select/README.md

@@ -1,117 +0,0 @@
-# select
-
-`Select` is a button-triggered popup value picker backed by `listbox` and `popover`. Use it when the user should choose one stable string value from a finite set.
-
-## Component Usage
-
-```tsx
-import { Option, Select } from 'remix/ui/select'
-import { onSelectChange } from 'remix/ui/select/primitives'
-
-export function FrameworkSelect() {
-  return (
-    <Select
-      defaultLabel="Select a framework"
-      defaultValue="remix"
-      name="framework"
-      mix={onSelectChange((event) => {
-        console.log(event.value, event.label, event.optionId)
-      })}
-    >
-      <Option label="Remix framework" value="remix">
-        Remix
-      </Option>
-      <Option disabled label="React Router framework" value="react-router">
-        React Router
-      </Option>
-      <Option label="React framework" value="react">
-        React
-      </Option>
-    </Select>
-  )
-}
-```
-
-Use `textValue` when closed-trigger typeahead should match a different string from the visible label.
-
-```tsx
-<Select defaultLabel="Select an environment">
-  <Option label="Production environment" value="production">
-    Production
-  </Option>
-  <Option label="Staging environment" textValue="beta" value="staging">
-    Staging
-  </Option>
-</Select>
-```
-
-## Primitive Usage
-
-Use the lower-level primitives when the trigger or popup structure needs to be owned by another component. Keep the same provider, trigger, popover, list, option, and hidden-input relationship.
-
-```tsx
-import type { Handle } from 'remix/ui'
-import * as popover from 'remix/ui/popover'
-import { triggerStyle } from 'remix/ui/select'
-import * as select from 'remix/ui/select/primitives'
-import { listStyle, optionStyle, surfaceStyle } from './select.styles'
-
-function SelectValue(handle: Handle) {
-  let context = handle.context.get(select.Context)
-
-  return () => <span>{context.displayedLabel}</span>
-}
-
-function IssueTypeSelect() {
-  return () => (
-    <select.Context defaultLabel="Select a type" labelSwapDelayMs={100} name="issueType">
-      <button type="button" mix={[triggerStyle, select.trigger()]}>
-        <SelectValue />
-      </button>
-      <popover.Context>
-        <div mix={[surfaceStyle, select.popover()]}>
-          <div mix={[listStyle, select.list()]}>
-            <div mix={[optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>Bug</div>
-            <div mix={[optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
-              Feature
-            </div>
-          </div>
-        </div>
-      </popover.Context>
-      <input mix={select.hiddenInput()} />
-    </select.Context>
-  )
-}
-```
-
-## `remix/ui/select`
-
-- `Select`: composed trigger, popover, listbox, option list, and optional hidden input for form participation. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and button props.
-- `Option`: option component that renders the standard check indicator and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
-- `triggerStyle`: standard select trigger style for custom trigger composition.
-- `SelectProps` and `SelectOptionProps`: public TypeScript props for the composed APIs.
-
-## `remix/ui/select/primitives`
-
-- `Context`: lower-level provider for custom composition. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and primitive-only `labelSwapDelayMs`; the label-swap delay defaults to `75` milliseconds.
-- `trigger()`: wires the trigger button, open behavior, closed-trigger typeahead, and trigger ARIA attributes.
-- `popover()`: wires the popover surface and keeps its min-width synced to the trigger before open.
-- `list()`: wires the listbox root used inside the popover.
-- `option(...)`: registers one selectable option. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
-- `hiddenInput()`: mirrors the selected value into a hidden input for form participation.
-- `onSelectChange(...)`: event mixin for the bubbling `SelectChangeEvent`.
-- `SelectChangeEvent`: event with `value`, `label`, and `optionId`.
-- `SelectContextProps`, `SelectProps`, and `SelectOptionProps`: primitive prop types for custom composition.
-
-## Behavior Notes
-
-- `defaultLabel` is displayed before selection settles. `defaultValue` selects the matching option without replacing the trigger label until a new selection commits.
-- `Option.label` is the committed display label and event label. `children` are the rendered option contents.
-- Click, `ArrowDown`, and `ArrowUp` open the popup. Focus moves into the list and Escape restores focus to the trigger through popover behavior.
-- Reopening highlights the current selected value.
-- The popup min-width syncs to the trigger width before opening.
-- Closed-trigger typeahead selects a matching option immediately and supports option `textValue`.
-- Selecting an option flashes it with `data-select-flash`, waits for the close transition and label delay, updates the displayed label, and dispatches `SelectChangeEvent`.
-- Selecting the already-selected value updates state but does not dispatch a change event.
-- `SelectChangeEvent` bubbles from the trigger when a trigger exists. It includes `value`, `label`, and `optionId`.
-- Passing `name` renders a hidden input so the selected value participates in `FormData`; disabled selects disable the trigger and hidden input.

package/src/ui/select/primitives.ts

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

package/src/ui/select.ts

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