@remix-run/ui 0.3.0 → 0.4.0

package/src/{components/select/select.tsx → select/primitives.tsx}

@@ -1,11 +1,8 @@
 import {
   attrs,
-  createElement,
   createMixin,
-  css,
   on,
   ref,
-  type CSSMixinDescriptor,
   type Dispatched,
   type ElementProps,
   type Handle,
@@ -14,19 +11,16 @@ import {
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
-import * as button from '../button/button.tsx'
-import { Glyph } from '../glyph/glyph.tsx'
-import * as listbox from '../listbox/listbox.ts'
-import * as popover from '../popover/popover.ts'
-import { theme } from '../../theme/theme.ts'
-import { hiddenTypeahead } from '../../interactions/typeahead/typeahead-mixin.ts'
-import { onKeyDown } from '../../interactions/keydown/keydown.ts'
-import { waitForCssTransition } from '../../utils/wait-for-css-transition.ts'
-import { wait } from '../../utils/wait.ts'
-import type { AnchorOptions } from '../anchor/anchor.ts'
+import * as listbox from '../listbox/index.ts'
+import * as popover from '../popover/index.ts'
+import { hiddenTypeahead } from '../shared/typeahead.ts'
+import { waitForCssTransition } from '../shared/wait-for-css-transition.ts'
+import { wait } from '../shared/wait.ts'
+import { onKeyDown } from './keydown.ts'
+import type { AnchorOptions } from '../anchor/index.ts'
 
 const SELECT_CHANGE_EVENT = 'rmx:select-change' as const
-const LABEL_SWAP_DELAY_MS = 75
+const DEFAULT_LABEL_SWAP_DELAY_MS = 75
 
 type SelectChangeHandler<target extends HTMLElement> = (
   event: Dispatched<SelectChangeEvent, target>,
@@ -65,6 +59,7 @@ export interface SelectContextProps {
   defaultLabel: string
   defaultValue?: string | null
   disabled?: boolean
+  labelSwapDelayMs?: number
   name?: string
 }
 
@@ -236,7 +231,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>):
     }
 
     await Promise.all([handle.update(), waitForCssTransition(surfaceRef, handle.signal)])
-    await wait(LABEL_SWAP_DELAY_MS) // UX delay label swap for clear value change
+    await wait(handle.props.labelSwapDelayMs ?? DEFAULT_LABEL_SWAP_DELAY_MS)
     if (handle.signal.aborted) return
     displayedLabel = selectedLabel
     state = 'closed'
@@ -495,41 +490,6 @@ const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = creat
     })
 })
 
-const selectTriggerCss: CSSMixinDescriptor = css({
-  minHeight: theme.control.height.sm,
-  width: '100%',
-  paddingInline: theme.space.md,
-  paddingInlineEnd: theme.space.sm,
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr) auto',
-  alignItems: 'center',
-  gap: theme.space.sm,
-  borderRadius: theme.radius.md,
-  backgroundImage: 'none',
-  border: '0.5px solid transparent',
-  boxShadow: 'none',
-  fontSize: theme.fontSize.xs,
-  textAlign: 'left',
-  backgroundColor: theme.surface.lvl3,
-  color: theme.colors.text.secondary,
-  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
-    {
-      backgroundColor: theme.surface.lvl4,
-      color: theme.colors.text.primary,
-    },
-  '&:active': {
-    backgroundColor: theme.surface.lvl3,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-  },
-  '&:disabled': {
-    opacity: 0.6,
-  },
-})
-
-export const triggerStyle = selectTriggerCss
 export const Context = SelectProvider
 export const hiddenInput = hiddenInputMixin
 export const list = listMixin
@@ -552,51 +512,3 @@ export function onSelectChange<target extends HTMLElement>(
 ): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
   return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
-
-function SelectLabel(handle: Handle): () => RemixNode {
-  let context = getSelectContext(handle)
-
-  return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
-}
-
-export function Select(handle: Handle<SelectProps>): () => RemixNode {
-  return () => {
-    let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
-
-    return (
-      <select.Context
-        defaultLabel={defaultLabel}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        name={name}
-      >
-        <button {...buttonProps} mix={[button.baseStyle, triggerStyle, select.trigger(), mix]}>
-          <SelectLabel />
-          <Glyph mix={button.iconStyle} name="chevronVertical" />
-        </button>
-        <popover.Context>
-          <div mix={[popover.surfaceStyle, select.popover()]}>
-            <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>{children}</div>
-          </div>
-        </popover.Context>
-        {name && <input mix={select.hiddenInput()} />}
-      </select.Context>
-    )
-  }
-}
-
-export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
-  return () => {
-    let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
-
-    return (
-      <div
-        {...divProps}
-        mix={[listbox.optionStyle, select.option({ value, label, disabled, textValue }), mix]}
-      >
-        <Glyph mix={listbox.glyphStyle} name="check" />
-        <span mix={listbox.labelStyle}>{children ?? handle.props.label}</span>
-      </div>
-    )
-  }
-}

package/src/server/stream.ts

@@ -1052,17 +1052,17 @@ async function resolveClientEntries(
 ): Promise<void> {
   if (context.unresolvedHydrationData.size === 0) return
 
-  let resolvedEntries = new Map<string, ResolvedClientEntry>()
+  let resolvedEntries = new Map<EntryComponent, ResolvedClientEntry>()
 
   for (let [hydrationId, unresolvedHydrationData] of context.unresolvedHydrationData) {
     let { entryId, component, props } = unresolvedHydrationData
-    let resolvedEntry = resolvedEntries.get(entryId)
+    let resolvedEntry = resolvedEntries.get(component)
     if (!resolvedEntry) {
       resolvedEntry = resolveClientEntry
         ? await Promise.resolve(resolveClientEntry(entryId, component))
         : resolveDefaultClientEntry(entryId, component)
       validateResolvedClientEntry(entryId, resolvedEntry)
-      resolvedEntries.set(entryId, resolvedEntry)
+      resolvedEntries.set(component, resolvedEntry)
     }
 
     context.hydrationData.set(hydrationId, {

package/src/shared/focus-styles.ts

@@ -0,0 +1,2 @@
+export const controlFocusShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px #3573F6, 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)'

package/src/shared/icons.tsx

@@ -0,0 +1,62 @@
+import { createElement } from '@remix-run/ui'
+import type { Handle, Props, RemixElement } from '@remix-run/ui'
+
+type IconProps = Omit<Props<'svg'>, 'children'>
+
+function icon(
+  handle: Handle<IconProps>,
+  children: RemixElement | readonly RemixElement[],
+): RemixElement {
+  let hiddenByDefault =
+    handle.props['aria-hidden'] === undefined &&
+    handle.props['aria-label'] === undefined &&
+    handle.props['aria-labelledby'] === undefined
+
+  return createElement(
+    'svg',
+    {
+      ...handle.props,
+      'aria-hidden': hiddenByDefault ? true : handle.props['aria-hidden'],
+      fill: handle.props.fill ?? 'none',
+      viewBox: handle.props.viewBox ?? '0 0 16 16',
+      xmlns: 'http://www.w3.org/2000/svg',
+    },
+    children,
+  )
+}
+
+function strokedPath(d: string): RemixElement {
+  return createElement('path', {
+    d,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  })
+}
+
+export function AddIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M8 3.25v9.5M3.25 8h9.5'))
+}
+
+export function CheckIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.5 8.25 2.75 2.75L12.5 4.75'))
+}
+
+export function ChevronDownIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.75 6.25 4.25 4 4.25-4'))
+}
+
+export function ChevronRightIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m6 4 4 4-4 4'))
+}
+
+export function ChevronVerticalIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () =>
+    icon(handle, [strokedPath('m3.75 6.5 4.25-4 4.25 4'), strokedPath('m3.75 9.5 4.25 4 4.25-4')])
+}
+
+export function SearchIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M7.25 12.25a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm3.54-1.46 3 3'))
+}

package/src/shared/listbox-popover-styles.ts

@@ -0,0 +1,146 @@
+import { css, type CSSMixinDescriptor } from '@remix-run/ui'
+
+import { componentStyleValues as styles } from './style-values.ts'
+
+const popupViewportClampMaxHeight = '50dvh'
+
+const popoverSurfaceTransitionCss: CSSMixinDescriptor = css({
+  opacity: 0,
+  '&:popover-open': {
+    opacity: 1,
+  },
+  '&:not(:popover-open)': {
+    pointerEvents: 'none',
+    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
+    transitionBehavior: 'allow-discrete',
+  },
+})
+
+const popoverSurfaceCss: CSSMixinDescriptor = css({
+  position: 'fixed',
+  inset: 'auto',
+  margin: 0,
+  padding: styles.space.none,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  minWidth: '12rem',
+  maxWidth: `min(24rem, calc(100vw - (${styles.space.lg} * 2)))`,
+  maxHeight: popupViewportClampMaxHeight,
+  border: `1px solid ${styles.colors.border.subtle}`,
+  borderRadius: styles.radius.lg,
+  backgroundColor: styles.surface.lvl0,
+  color: styles.colors.text.primary,
+  overflow: 'hidden',
+  boxShadow: `${styles.shadow.xs}, ${styles.shadow.md}`,
+  '&::backdrop': {
+    background: 'transparent',
+  },
+})
+
+const listCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+  paddingBlock: styles.space.xs,
+  paddingInline: styles.space.none,
+  overflow: 'auto',
+  overscrollBehavior: 'contain',
+  outline: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '--rmx-ui-item-inset': `calc(${styles.space.sm} + ${styles.space.xs})`,
+  '--rmx-ui-item-indicator-gap': styles.space.xs,
+  '--rmx-ui-item-indicator-width': styles.fontSize.md,
+})
+
+const itemCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  minWidth: 0,
+  minHeight: styles.control.height.md,
+  boxSizing: 'border-box',
+  position: 'relative',
+  isolation: 'isolate',
+  paddingInline: `calc(${styles.space.sm} + ${styles.space.xs})`,
+  color: styles.colors.text.primary,
+  fontFamily: styles.fontFamily.sans,
+  fontSize: styles.fontSize.sm,
+  fontWeight: styles.fontWeight.normal,
+  lineHeight: styles.lineHeight.normal,
+  textAlign: 'left',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    insetBlock: 0,
+    insetInline: styles.space.xs,
+    borderRadius: styles.radius.md,
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&[data-highlighted="true"]': {
+    color: styles.colors.action.primary.foreground,
+  },
+  '&[data-highlighted="true"]::before': {
+    backgroundColor: styles.colors.action.primary.background,
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.5,
+  },
+  scrollMarginBlock: styles.space.xs,
+  '--rmx-listbox-option-indicator-opacity': '0',
+  '&[hidden]': {
+    display: 'none',
+  },
+  '&[data-listbox-flash="true"], &[data-select-flash="true"], &[data-combobox-flash="true"]': {
+    color: styles.colors.text.primary,
+  },
+  '&[data-listbox-flash="true"]::before, &[data-select-flash="true"]::before, &[data-combobox-flash="true"]::before':
+    {
+      backgroundColor: 'transparent',
+    },
+  '&[aria-selected="true"]': {
+    '--rmx-listbox-option-indicator-opacity': '1',
+  },
+})
+
+const itemIndicatorCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 var(--rmx-ui-item-indicator-width)',
+  width: 'var(--rmx-ui-item-indicator-width)',
+  minWidth: 0,
+  height: 'var(--rmx-ui-item-indicator-width)',
+  marginInlineEnd: 'var(--rmx-ui-item-indicator-gap)',
+  overflow: 'hidden',
+  color: 'currentColor',
+  opacity: 'var(--rmx-listbox-option-indicator-opacity)',
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+const itemLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flex: '1 1 auto',
+  minWidth: 0,
+  WebkitUserSelect: 'none',
+})
+
+export const popoverSurfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
+export const listboxIndicatorStyle = itemIndicatorCss
+export const listboxLabelStyle = itemLabelCss
+export const listboxListStyle = listCss
+export const listboxOptionStyle = itemCss

package/src/shared/style-values.ts

@@ -0,0 +1,165 @@
+type ComponentActionColors = {
+  readonly background: string
+  readonly backgroundHover: string
+  readonly backgroundActive: string
+  readonly foreground: string
+  readonly border: string
+}
+
+type ComponentStyleValues = {
+  readonly space: {
+    readonly none: string
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+    readonly lg: string
+  }
+  readonly radius: {
+    readonly md: string
+    readonly lg: string
+    readonly xl: string
+    readonly full: string
+  }
+  readonly fontFamily: {
+    readonly sans: string
+  }
+  readonly fontSize: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly lineHeight: {
+    readonly normal: string
+    readonly relaxed: string
+  }
+  readonly fontWeight: {
+    readonly normal: string
+    readonly medium: string
+  }
+  readonly control: {
+    readonly height: {
+      readonly sm: string
+      readonly md: string
+      readonly lg: string
+    }
+  }
+  readonly surface: {
+    readonly lvl0: string
+    readonly lvl1: string
+    readonly lvl2: string
+    readonly lvl3: string
+    readonly lvl4: string
+  }
+  readonly shadow: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly colors: {
+    readonly text: {
+      readonly primary: string
+      readonly secondary: string
+      readonly muted: string
+    }
+    readonly border: {
+      readonly subtle: string
+      readonly default: string
+    }
+    readonly focus: {
+      readonly ring: string
+    }
+    readonly action: {
+      readonly primary: ComponentActionColors
+      readonly secondary: ComponentActionColors
+      readonly danger: ComponentActionColors
+    }
+  }
+}
+
+export const componentStyleValues: ComponentStyleValues = {
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+  },
+  radius: {
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    full: '9999px',
+  },
+  fontSize: {
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+  },
+  fontFamily: {
+    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+  lineHeight: {
+    normal: '1.45',
+    relaxed: '1.65',
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+  },
+  control: {
+    height: {
+      sm: '28px',
+      md: '32px',
+      lg: '36px',
+    },
+  },
+  surface: {
+    lvl0: '#ffffff',
+    lvl1: '#f8f8f8',
+    lvl2: '#f5f5f5',
+    lvl3: '#f3f3f3',
+    lvl4: '#efefef',
+  },
+  shadow: {
+    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 2px rgb(0 0 0 / 0.07)',
+    md: '0 6px 18px rgb(0 0 0 / 0.08)',
+  },
+  colors: {
+    text: {
+      primary: '#151515',
+      secondary: '#4f4f4f',
+      muted: '#6d6d6d',
+    },
+    border: {
+      subtle: '#e7e7e7',
+      default: '#d1d1d1',
+    },
+    focus: {
+      ring: '#1A72FF',
+    },
+    action: {
+      primary: {
+        background: '#1A72FF',
+        backgroundHover: '#1463e0',
+        backgroundActive: '#0f55c9',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#1A72FF',
+      },
+      secondary: {
+        background: '#ffffff',
+        backgroundHover: '#fbfbfb',
+        backgroundActive: '#f3f3f3',
+        foreground: '#202020',
+        border: '#d1d1d1',
+      },
+      danger: {
+        background: '#FF3000',
+        backgroundHover: '#e12b00',
+        backgroundActive: '#c52600',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#FF3000',
+      },
+    },
+  },
+}

package/src/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"`.