remix 3.0.0-beta.4 → 3.0.0-beta.6

package/src/ui/popover/README.md

@@ -1,16 +1,15 @@
-# Popover
+# 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.
+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.
 
-## Usage
+## Primitive Usage
 
 ```tsx
-import { css, on, type Handle } from 'remix/ui'
-import { Button } from 'remix/ui/button'
-import { Glyph } from 'remix/ui/glyph'
-import { popover } from 'remix/ui/popover'
+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
@@ -27,21 +26,20 @@ export function ViewOptions(handle: Handle) {
 
   return () => (
     <popover.Context>
-      <Button
-        endIcon={<Glyph name="chevronDown" />}
+      <button
         mix={[
           popover.anchor({ placement: 'bottom-end' }),
           popover.focusOnHide(),
           on('click', openPopover),
         ]}
-        tone="secondary"
+        type="button"
       >
         View options
-      </Button>
+      </button>
 
       <div
         mix={[
-          popover.surfaceStyle,
+          panelStyle,
           popover.surface({
             open,
             onHide() {
@@ -50,23 +48,17 @@ export function ViewOptions(handle: Handle) {
           }),
         ]}
       >
-        <div mix={popover.contentStyle}>
-          <Button mix={[popover.focusOnShow(), on('click', closePopover)]} tone="ghost">
-            Close
-          </Button>
-          <div mix={panelBody}>Panel content</div>
-        </div>
+        <button mix={[popover.focusOnShow(), on('click', closePopover)]} type="button">
+          Close
+        </button>
+        <div>Panel content</div>
       </div>
     </popover.Context>
   )
 }
-
-let panelBody = css({
-  padding: '12px',
-})
 ```
 
-## `popover.*`
+## `remix/ui/popover`
 
 ### `popover.Context`
 
@@ -76,10 +68,6 @@ Provides shared coordination for one popover instance. Render the anchor, any fo
 
 Registers the host element as the anchor for the current popover surface.
 
-- Accepts standard `AnchorOptions`.
-- The stored anchor controls where the surface is positioned when it opens.
-- Apply it to the button or other element the surface should attach to.
-
 ### `popover.surface({ open, onHide, ... })`
 
 Turns the host into the controlled popover surface.
@@ -99,13 +87,12 @@ Registers the element that should receive focus when the popover opens.
 
 Registers the element that should receive focus again when the popover closes.
 
-### `popover.surfaceStyle`
-
-Default floating-surface presentation for popovers.
+### Primitive Types
 
-### `popover.contentStyle`
-
-Default inner scroll container for popover content.
+- `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
 
@@ -114,9 +101,3 @@ Default inner scroll container for popover content.
 - `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.
-
-## When To Use Something Else
-
-- Use `menu` for command surfaces.
-- Use `listbox` or `select` for committed value picking.
-- Use `combobox` for input-first popup selection.

package/src/ui/radio/README.md

@@ -0,0 +1,53 @@
+# 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

@@ -0,0 +1,3 @@
+// 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

@@ -2,10 +2,11 @@
 
 `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.
 
-## Usage
+## Component Usage
 
 ```tsx
-import { Option, Select, onSelectChange } from 'remix/ui/select'
+import { Option, Select } from 'remix/ui/select'
+import { onSelectChange } from 'remix/ui/select/primitives'
 
 export function FrameworkSelect() {
   return (
@@ -44,34 +45,34 @@ Use `textValue` when closed-trigger typeahead should match a different string fr
 </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 button from 'remix/ui/button'
-import * as listbox from 'remix/ui/listbox'
 import * as popover from 'remix/ui/popover'
-import * as select from 'remix/ui/select'
+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 mix={button.labelStyle}>{context.displayedLabel}</span>
+  return () => <span>{context.displayedLabel}</span>
 }
 
 function IssueTypeSelect() {
   return () => (
-    <select.Context defaultLabel="Select a type" name="issueType">
-      <button type="button" mix={[button.baseStyle, select.triggerStyle, select.trigger()]}>
+    <select.Context defaultLabel="Select a type" labelSwapDelayMs={100} name="issueType">
+      <button type="button" mix={[triggerStyle, select.trigger()]}>
         <SelectValue />
       </button>
       <popover.Context>
-        <div mix={[popover.surfaceStyle, select.popover()]}>
-          <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>
-              Bug
-            </div>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
+        <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>
@@ -83,15 +84,24 @@ function IssueTypeSelect() {
 }
 ```
 
-## `select.*`
+## `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 wrapper that renders the standard check glyph and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `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`.
-- `Context`, `trigger()`, `popover()`, `list()`, `option(...)`, and `hiddenInput()`: lower-level composition primitives.
-- `triggerStyle`: standard select trigger style.
 - `SelectChangeEvent`: event with `value`, `label`, and `optionId`.
-- `SelectProps`, `SelectContextProps`, and `SelectOptionProps`: public TypeScript props for the composed and lower-level APIs.
+- `SelectContextProps`, `SelectProps`, and `SelectOptionProps`: primitive prop types for custom composition.
 
 ## Behavior Notes
 

package/src/ui/select/primitives/README.md

@@ -0,0 +1,117 @@
+# 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

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

package/src/ui/tabs/README.md

@@ -0,0 +1,141 @@
+# tabs
+
+`Tabs` renders a tab control with one active tab and matching panels. Use it when related views share the same page space and the owning component may either control the active tab or let the tabs context manage it.
+
+## Component Usage
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ProjectTabs() {
+  return (
+    <Tabs defaultActiveTab="overview">
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+        <Tab name="settings">Settings</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+      <TabPanel name="settings">Project settings.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Control the active tab when state should live in the owning component:
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ControlledTabs(handle: Handle) {
+  let activeTab = 'overview'
+
+  return () => (
+    <Tabs
+      activeTab={activeTab}
+      onActiveTabChange={(nextActiveTab) => {
+        activeTab = nextActiveTab
+        void handle.update()
+      }}
+    >
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Listen for bubbling `TabsChangeEvent` events with `onTabsChange` from `remix/ui/tabs/primitives`.
+
+```tsx
+import { onTabsChange } from 'remix/ui/tabs/primitives'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function TrackedTabs() {
+  return (
+    <div
+      mix={[
+        onTabsChange((event) => {
+          console.log(event.previousActiveTab, event.activeTab)
+        }),
+      ]}
+    >
+      <Tabs defaultActiveTab="overview">
+        <TabList aria-label="Project sections">
+          <Tab name="overview">Overview</Tab>
+          <Tab name="activity">Activity</Tab>
+        </TabList>
+        <TabPanel name="overview">Project summary.</TabPanel>
+        <TabPanel name="activity">Recent changes.</TabPanel>
+      </Tabs>
+    </div>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the markup and styles:
+
+```tsx
+import * as tabs from 'remix/ui/tabs/primitives'
+import { listStyle, panelStyle, rootStyle, tabStyle } from './tabs.styles'
+
+export function PrimitiveTabs() {
+  return (
+    <tabs.Context defaultActiveTab="overview">
+      <div mix={[rootStyle, tabs.root()]}>
+        <div mix={[listStyle, tabs.list()]} aria-label="Project sections">
+          <button mix={[tabStyle, tabs.tab({ name: 'overview' })]} type="button">
+            Overview
+          </button>
+          <button mix={[tabStyle, tabs.tab({ name: 'activity' })]} type="button">
+            Activity
+          </button>
+        </div>
+
+        <div mix={[panelStyle, tabs.panel({ name: 'overview' })]}>Project summary.</div>
+        <div mix={[panelStyle, tabs.panel({ name: 'activity' })]}>Recent changes.</div>
+      </div>
+    </tabs.Context>
+  )
+}
+```
+
+## `remix/ui/tabs`
+
+- `Tabs`: root component. Supports controlled `activeTab`, uncontrolled `defaultActiveTab`, `onActiveTabChange`, `disabled`, and `size: 'md' | 'lg'`.
+- `TabList`: tablist wrapper that lays out the tabs in a track and applies the tablist primitive.
+- `Tab`: button for one tab `name`. The active tab uses the toggle slider treatment and button-sized text. Pass `disabled` to prevent activation.
+- `TabPanel`: panel for one tab `name`.
+- `rootStyle`, `listStyle`, `tabStyle`, and `panelStyle`: flat style mixins used by the component markup.
+- `onTabsChange` and `TabsChangeEvent`: re-exported primitive event helpers.
+- `TabsProps`, `TabListProps`, `TabProps`, `TabPanelProps`, and `TabsSize`: public TypeScript types for the composed APIs.
+
+## `remix/ui/tabs/primitives`
+
+- `Context`: lower-level provider for custom tabs composition.
+- `root()`: wires the root element and bubbling change events.
+- `list()`: wires the tablist role and disabled state.
+- `tab({ name, disabled })`: wires a tab button with selected state, ids, keyboard activation, and pointer activation.
+- `panel({ name })`: wires the matching tab panel id, hidden state, inert state, and label relationship.
+- `onTabsChange(...)`: event mixin for the bubbling `TabsChangeEvent`.
+- `TabsChangeEvent`: bubbling event with `activeTab` and `previousActiveTab`.
+- `TabsContextProps`, `TabsContextValue`, `TabsRegisteredTab`, `TabsActivationDirection`, `TabsRootOptions`, `TabListOptions`, `TabOptions`, and `TabPanelOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- If neither `activeTab` nor `defaultActiveTab` is provided, the first enabled tab becomes active.
+- Arrow keys activate the next or previous enabled tab. `Home` and `End` activate the first and last enabled tabs.
+- `Enter`, `Space`, and pointer clicks activate the focused tab.
+- Root `disabled` disables every tab. Tab `disabled` only disables that tab.
+- Tabs and panels are linked with generated ids through `aria-controls`, `aria-labelledby`, and `aria-selected`.
+- Inactive panels receive `hidden`, `inert`, and `data-state="inactive"`.

package/src/ui/tabs/primitives/README.md

@@ -0,0 +1,141 @@
+# tabs
+
+`Tabs` renders a tab control with one active tab and matching panels. Use it when related views share the same page space and the owning component may either control the active tab or let the tabs context manage it.
+
+## Component Usage
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ProjectTabs() {
+  return (
+    <Tabs defaultActiveTab="overview">
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+        <Tab name="settings">Settings</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+      <TabPanel name="settings">Project settings.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Control the active tab when state should live in the owning component:
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ControlledTabs(handle: Handle) {
+  let activeTab = 'overview'
+
+  return () => (
+    <Tabs
+      activeTab={activeTab}
+      onActiveTabChange={(nextActiveTab) => {
+        activeTab = nextActiveTab
+        void handle.update()
+      }}
+    >
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Listen for bubbling `TabsChangeEvent` events with `onTabsChange` from `remix/ui/tabs/primitives`.
+
+```tsx
+import { onTabsChange } from 'remix/ui/tabs/primitives'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function TrackedTabs() {
+  return (
+    <div
+      mix={[
+        onTabsChange((event) => {
+          console.log(event.previousActiveTab, event.activeTab)
+        }),
+      ]}
+    >
+      <Tabs defaultActiveTab="overview">
+        <TabList aria-label="Project sections">
+          <Tab name="overview">Overview</Tab>
+          <Tab name="activity">Activity</Tab>
+        </TabList>
+        <TabPanel name="overview">Project summary.</TabPanel>
+        <TabPanel name="activity">Recent changes.</TabPanel>
+      </Tabs>
+    </div>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the markup and styles:
+
+```tsx
+import * as tabs from 'remix/ui/tabs/primitives'
+import { listStyle, panelStyle, rootStyle, tabStyle } from './tabs.styles'
+
+export function PrimitiveTabs() {
+  return (
+    <tabs.Context defaultActiveTab="overview">
+      <div mix={[rootStyle, tabs.root()]}>
+        <div mix={[listStyle, tabs.list()]} aria-label="Project sections">
+          <button mix={[tabStyle, tabs.tab({ name: 'overview' })]} type="button">
+            Overview
+          </button>
+          <button mix={[tabStyle, tabs.tab({ name: 'activity' })]} type="button">
+            Activity
+          </button>
+        </div>
+
+        <div mix={[panelStyle, tabs.panel({ name: 'overview' })]}>Project summary.</div>
+        <div mix={[panelStyle, tabs.panel({ name: 'activity' })]}>Recent changes.</div>
+      </div>
+    </tabs.Context>
+  )
+}
+```
+
+## `remix/ui/tabs`
+
+- `Tabs`: root component. Supports controlled `activeTab`, uncontrolled `defaultActiveTab`, `onActiveTabChange`, `disabled`, and `size: 'md' | 'lg'`.
+- `TabList`: tablist wrapper that lays out the tabs in a track and applies the tablist primitive.
+- `Tab`: button for one tab `name`. The active tab uses the toggle slider treatment and button-sized text. Pass `disabled` to prevent activation.
+- `TabPanel`: panel for one tab `name`.
+- `rootStyle`, `listStyle`, `tabStyle`, and `panelStyle`: flat style mixins used by the component markup.
+- `onTabsChange` and `TabsChangeEvent`: re-exported primitive event helpers.
+- `TabsProps`, `TabListProps`, `TabProps`, `TabPanelProps`, and `TabsSize`: public TypeScript types for the composed APIs.
+
+## `remix/ui/tabs/primitives`
+
+- `Context`: lower-level provider for custom tabs composition.
+- `root()`: wires the root element and bubbling change events.
+- `list()`: wires the tablist role and disabled state.
+- `tab({ name, disabled })`: wires a tab button with selected state, ids, keyboard activation, and pointer activation.
+- `panel({ name })`: wires the matching tab panel id, hidden state, inert state, and label relationship.
+- `onTabsChange(...)`: event mixin for the bubbling `TabsChangeEvent`.
+- `TabsChangeEvent`: bubbling event with `activeTab` and `previousActiveTab`.
+- `TabsContextProps`, `TabsContextValue`, `TabsRegisteredTab`, `TabsActivationDirection`, `TabsRootOptions`, `TabListOptions`, `TabOptions`, and `TabPanelOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- If neither `activeTab` nor `defaultActiveTab` is provided, the first enabled tab becomes active.
+- Arrow keys activate the next or previous enabled tab. `Home` and `End` activate the first and last enabled tabs.
+- `Enter`, `Space`, and pointer clicks activate the focused tab.
+- Root `disabled` disables every tab. Tab `disabled` only disables that tab.
+- Tabs and panels are linked with generated ids through `aria-controls`, `aria-labelledby`, and `aria-selected`.
+- Inactive panels receive `hidden`, `inert`, and `data-state="inactive"`.

package/src/ui/tabs/primitives.ts

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