@remix-run/ui 0.3.0 → 0.5.0

package/src/style/style.ts

@@ -19,8 +19,22 @@ export interface CSSProps extends DOMStyleProperties {
 type StyleObject = Record<string, unknown>
 
 // Convert camelCase CSS properties to kebab-case
+// Property names repeat constantly across renders; cache conversions instead
+// of running a regex each time.
+const CAMEL_TO_KEBAB_CACHE_LIMIT = 256
+const camelToKebabCache = new Map<string, string>()
+
 function camelToKebab(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+  let cached = camelToKebabCache.get(str)
+  if (cached === undefined) {
+    cached = str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+    if (camelToKebabCache.size >= CAMEL_TO_KEBAB_CACHE_LIMIT) {
+      let oldest = camelToKebabCache.keys().next()
+      if (!oldest.done) camelToKebabCache.delete(oldest.value)
+    }
+    camelToKebabCache.set(str, cached)
+  }
+  return cached
 }
 
 // Properties that should remain unitless (numeric values without px)
@@ -81,18 +95,23 @@ function isKeyframesAtRule(key: string): boolean {
   )
 }
 
-// Generate a hash for style objects to create unique class names
+// Generate a hash for style objects to create unique class names.
+// Class names are content-addressed — a collision silently applies the wrong
+// styles — so use two independent 32-bit FNV-1a passes (~64 bits of hash
+// space) rather than a single 32-bit hash. Must be deterministic across
+// server and client.
 function hashStyle(obj: any): string {
   // Sort keys to ensure consistent hashing, but include values in the string
   let sortedEntries = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b))
   let str = JSON.stringify(sortedEntries)
-  let hash = 0
+  let h1 = 0x811c9dc5
+  let h2 = 0xcbf29ce4
   for (let i = 0; i < str.length; i++) {
     let char = str.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash // Convert to 32-bit integer
+    h1 = Math.imul(h1 ^ char, 0x01000193) >>> 0
+    h2 = Math.imul(h2 ^ char, 0x01000193) >>> 0
   }
-  return Math.abs(hash).toString(36)
+  return h1.toString(36) + h2.toString(36)
 }
 
 // Convert style object to CSS text

package/src/style/stylesheet.ts

@@ -1,6 +1,26 @@
 import { REMIX_UI_STYLE_LAYER } from './layers.ts'
 
-type RuleEntry = { count: number; index: number }
+// # Style ownership model
+//
+// Rules are content-addressed: a class name is a hash of the style object that
+// produced it, so `.rmxc-x` always means the same declarations. A rule can
+// never become *wrong* — only unused. That observation drives a two-tier
+// lifetime model on a single document-level registry:
+//
+// - **Server-adopted rules are pinned.** Once a `<style data-rmx>` tag is
+//   adopted, its rule stays for the life of the manager. Frame reloads,
+//   island hydration, and streamed templates never need to agree on which
+//   scope "owns" a shared rule — adoption is additive and idempotent, and the
+//   registry is bounded by the set of unique style objects the server ever
+//   renders, not by render count.
+//
+// - **Client-inserted rules are refcounted.** Dynamic style objects (e.g.
+//   interpolated values) mint a new class per distinct value, so rules that
+//   only ever existed client-side are dropped when the last css mixin using
+//   them releases its ref. A refcounted rule upgrades to pinned if a server
+//   tag for the same selector is adopted later.
+
+type RuleEntry = { count: number; index: number; pinned: boolean }
 export type ServerStyleSource = ParentNode | Iterable<Node>
 
 export interface StyleManager {
@@ -10,7 +30,6 @@ export interface StyleManager {
   getGeneration(): number
   reset(): void
   adoptServerStyles(source: ServerStyleSource): Set<string>
-  replaceServerStyles(source: ServerStyleSource): void
   selectors(): IterableIterator<string>
   dispose(): void
 }
@@ -84,17 +103,8 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
   let stylesheet: CSSStyleSheet | null = null
   let generation = 0
 
-  // Track usage count and rule index per className
-  // Using an object to track both count and index together
   let ruleMap = new Map<string, RuleEntry>()
 
-  // Selectors currently held by a server-style adoption ref. We track this
-  // separately from `ruleMap` so `replaceServerStyles` can release only the
-  // adoption refs of selectors absent from the next page, without disturbing
-  // selectors that exist solely because a client-side css mixin inserted them
-  // (e.g. transient UI state that the server never rendered).
-  let adoptedSelectors = new Set<string>()
-
   function getStylesheet(): CSSStyleSheet {
     if (!stylesheet) {
       stylesheet = new CSSStyleSheet()
@@ -122,15 +132,11 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     let selector = getStyleSelector(styleEl)
     if (!selector) return undefined
 
-    if (ruleMap.has(selector)) {
-      // Already tracked. Take an adoption ref if we don't already have one —
-      // the rule may have been inserted by a client-side css mixin first and
-      // the SSR'd style tag arrived afterwards (e.g. a streamed fragment).
-      if (!adoptedSelectors.has(selector)) {
-        let entry = ruleMap.get(selector)!
-        entry.count++
-        adoptedSelectors.add(selector)
-      }
+    let entry = ruleMap.get(selector)
+    if (entry) {
+      // The rule already exists — either a previous adoption or a client-side
+      // css mixin inserted it first. Pin it so it outlives any mixin refs.
+      entry.pinned = true
       styleEl.remove()
       return selector
     }
@@ -145,8 +151,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
       let sheet = getStylesheet()
       let index = sheet.cssRules.length
       sheet.insertRule(cssText, index)
-      ruleMap.set(selector, { count: 1, index })
-      adoptedSelectors.add(selector)
+      ruleMap.set(selector, { count: 0, index, pinned: true })
       styleEl.remove()
       return selector
     } catch {
@@ -157,7 +162,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
 
   function has(className: string) {
     let entry = ruleMap.get(className)
-    return entry !== undefined && entry.count > 0
+    return entry !== undefined && (entry.pinned || entry.count > 0)
   }
 
   function getGeneration() {
@@ -168,8 +173,8 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     let entry = ruleMap.get(className)
 
     if (entry) {
-      // Already exists, just increment count
-      entry.count++
+      // Pinned rules are permanent; there is nothing to count.
+      if (!entry.pinned) entry.count++
       return
     }
 
@@ -179,13 +184,13 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     // This may throw for invalid CSS. If it does, we intentionally let it
     // bubble so the rule is not tracked unless insertion actually succeeds.
     sheet.insertRule(`@layer ${getStyleLayerName(className, layer)} { ${rule} }`, index)
-    ruleMap.set(className, { count: 1, index })
+    ruleMap.set(className, { count: 1, index, pinned: false })
   }
 
   function remove(className: string) {
     let entry = ruleMap.get(className)
 
-    if (!entry) return
+    if (!entry || entry.pinned) return
 
     // Decrement count
     entry.count--
@@ -200,9 +205,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
 
     // Remove from tracking
     ruleMap.delete(className)
-    adoptedSelectors.delete(className)
 
-    // TODO: just search and remove, stop re-indexing
     if (!stylesheet) return
     stylesheet.deleteRule(indexToDelete)
 
@@ -218,7 +221,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
   function reset() {
     clearStylesheet()
     ruleMap.clear()
-    adoptedSelectors.clear()
     removeStylesheet()
     generation++
   }
@@ -235,31 +237,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     return adopted
   }
 
-  // Snapshot the currently-adopted server selectors, adopt the incoming
-  // server styles additively, then release the adoption ref of any prior-only
-  // selectors.
-  //
-  // Refcount-aware semantics keep preserved DOM styled: a prior-only selector
-  // with no live css-mixin ref drops immediately, but one still referenced by
-  // an active mixin (e.g. inside a hydration region that the DOM diff skipped)
-  // stays in the stylesheet and is only fully removed when that mixin's
-  // `remove` event eventually fires. This avoids the FOUC that a hard
-  // `reset()` would cause between the style swap and the hydration re-render.
-  //
-  // Only adoption refs are considered — selectors that exist solely because a
-  // client-side css mixin inserted them (e.g. transient UI state never
-  // rendered by the server) are unaffected.
-  function replaceServerStyles(source: ServerStyleSource): void {
-    let prior = new Set(adoptedSelectors)
-    let adopted = adoptServerStyles(source)
-    for (let selector of prior) {
-      if (!adopted.has(selector)) {
-        adoptedSelectors.delete(selector)
-        remove(selector)
-      }
-    }
-  }
-
   function selectors(): IterableIterator<string> {
     return ruleMap.keys()
   }
@@ -268,7 +245,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     removeStylesheet()
     // Clear internal state
     ruleMap.clear()
-    adoptedSelectors.clear()
     generation++
   }
 
@@ -279,7 +255,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     getGeneration,
     reset,
     adoptServerStyles,
-    replaceServerStyles,
     selectors,
     dispose,
   }

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"`.

package/src/tabs/index.tsx

@@ -0,0 +1,245 @@
+import {
+  css,
+  type CSSMixinDescriptor,
+  type Handle,
+  type Props,
+  type RemixNode,
+} from '@remix-run/ui'
+import * as tabs from '@remix-run/ui/tabs/primitives'
+
+export { TabsChangeEvent, onTabsChange } from '@remix-run/ui/tabs/primitives'
+
+export type TabsSize = 'md' | 'lg'
+
+export interface TabsProps extends Omit<Props<'div'>, 'children'> {
+  activeTab?: string
+  children?: RemixNode
+  defaultActiveTab?: string
+  disabled?: boolean
+  onActiveTabChange?: (activeTab: string) => void
+  size?: TabsSize
+}
+
+export interface TabListProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+}
+
+export interface TabProps extends Omit<Props<'button'>, 'children' | 'type'> {
+  children?: RemixNode
+  disabled?: boolean
+  name: string
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export interface TabPanelProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+  name: string
+}
+
+const tabSliderBackground =
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08)) 100%), light-dark(#FFFFFF, #1a1a1a)'
+const tabSliderShadow =
+  '0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.12)), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.08))'
+
+const tabsRootCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-height': '32px',
+  '--rmx-tabs-track-padding': '2px',
+  '--rmx-tabs-tab-padding-inline': '12px',
+  '--rmx-tabs-tab-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+  '--rmx-tabs-tab-font-size': '12px',
+  '--rmx-tabs-tab-line-height': '17px',
+  '--rmx-tabs-gap': '12px',
+  boxSizing: 'border-box',
+  display: 'grid',
+  gap: 'var(--rmx-tabs-gap)',
+  minWidth: 0,
+})
+
+const tabsListCss: CSSMixinDescriptor = css({
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '2px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minHeight: 'var(--rmx-tabs-height)',
+  padding: 'var(--rmx-tabs-track-padding)',
+  border: 0,
+  borderRadius: '9999px',
+  background:
+    'linear-gradient(180deg, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)) 0%, rgba(0, 0, 0, 0) 100%), light-dark(#EBEBEB, #2c2c2c)',
+  boxShadow:
+    'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+  overflowX: 'auto',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none',
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+})
+
+const tabsTabCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-tab-focus-shadow':
+    '0 0 0 1px light-dark(#3573F6, #6eaaff), var(--rmx-tabs-tab-shadow), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))',
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'row',
+  gap: '4px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minWidth: 0,
+  height: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  minHeight: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  paddingBlock: 0,
+  paddingInline: 'var(--rmx-tabs-tab-padding-inline)',
+  border: 0,
+  borderRadius: '999px',
+  background: 'transparent',
+  boxShadow: 'var(--rmx-tabs-tab-shadow)',
+  color: 'light-dark(#707070, #b3b3b3)',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  fontSize: 'var(--rmx-tabs-tab-font-size)',
+  lineHeight: 'var(--rmx-tabs-tab-line-height)',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textAlign: 'center',
+  textDecoration: 'none',
+  textShadow: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
+  '&[data-state="inactive"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: 'light-dark(rgba(16, 16, 16, 0.05), rgba(236, 236, 236, 0.1))',
+    color: 'light-dark(#101010, #ececec)',
+  },
+  '&[data-state="inactive"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: 'light-dark(rgba(16, 16, 16, 0.08), rgba(236, 236, 236, 0.14))',
+  },
+  '&[data-state="active"]': {
+    background: tabSliderBackground,
+    '--rmx-tabs-tab-shadow': tabSliderShadow,
+    color: 'light-dark(#101010, #ececec)',
+    textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
+  },
+  '&[data-state="active"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&[data-state="active"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    cursor: 'not-allowed',
+    opacity: 0.55,
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: 'var(--rmx-tabs-tab-focus-shadow)',
+  },
+})
+
+const tabsPanelCss: CSSMixinDescriptor = css({
+  minWidth: 0,
+  color: 'light-dark(#101010, #ececec)',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontSize: '13px',
+  lineHeight: '20px',
+  letterSpacing: 0,
+  '&[hidden]': {
+    display: 'none',
+  },
+})
+
+const sizeStyles = {
+  md: css({}),
+  lg: css({
+    '--rmx-tabs-height': '36px',
+    '--rmx-tabs-tab-padding-inline': '14px',
+    '--rmx-tabs-tab-font-size': '13px',
+    '--rmx-tabs-tab-line-height': '20px',
+    '--rmx-tabs-gap': '14px',
+  }),
+} as const satisfies Record<TabsSize, CSSMixinDescriptor>
+
+export const rootStyle = tabsRootCss
+export const listStyle = tabsListCss
+export const tabStyle = tabsTabCss
+export const panelStyle = tabsPanelCss
+
+export function Tabs(handle: Handle<TabsProps>): () => RemixNode {
+  return () => {
+    let {
+      activeTab,
+      children,
+      defaultActiveTab,
+      disabled,
+      mix,
+      onActiveTabChange,
+      size = 'md',
+      ...divProps
+    } = handle.props
+
+    return (
+      <tabs.Context
+        activeTab={activeTab}
+        defaultActiveTab={defaultActiveTab}
+        disabled={disabled}
+        onActiveTabChange={onActiveTabChange}
+      >
+        <div {...divProps} mix={[rootStyle, sizeStyles[size], tabs.root(), mix]}>
+          {children}
+        </div>
+      </tabs.Context>
+    )
+  }
+}
+
+export function TabList(handle: Handle<TabListProps>): () => RemixNode {
+  return () => {
+    let { children, mix, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[listStyle, tabs.list(), mix]}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export function Tab(handle: Handle<TabProps>): () => RemixNode {
+  return () => {
+    let { children, disabled, mix, name, type, ...buttonProps } = handle.props
+
+    return (
+      <button
+        {...buttonProps}
+        mix={[tabStyle, tabs.tab({ disabled, name }), mix]}
+        type={type ?? 'button'}
+      >
+        {children}
+      </button>
+    )
+  }
+}
+
+export function TabPanel(handle: Handle<TabPanelProps>): () => RemixNode {
+  return () => {
+    let { children, mix, name, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[panelStyle, tabs.panel({ name }), mix]}>
+        {children}
+      </div>
+    )
+  }
+}