remix 3.0.0-rc.4 → 3.0.0

package/src/ui/tabs/README.md

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

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

package/src/ui/tabs.ts

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

package/src/ui/toggle/README.md

@@ -1,56 +0,0 @@
-# toggle
-
-`toggle` is a style mixin for checkbox inputs rendered as switches. Use native input props for normal form behavior, and compose it with `remix/ui/toggle/primitives` when you need the headless toggle state helpers or custom hosts.
-
-## Usage
-
-```tsx
-import toggle from 'remix/ui/toggle'
-
-function NotificationSetting() {
-  return () => (
-    <label>
-      <input mix={toggle({ size: 'lg' })} defaultChecked />
-      Email notifications
-    </label>
-  )
-}
-```
-
-## Primitive Usage
-
-Use the lower-level primitive when app code needs normalized checked state, toggle change events, or a non-input host:
-
-```tsx
-import toggle from 'remix/ui/toggle'
-import * as togglePrimitive from 'remix/ui/toggle/primitives'
-
-function CustomToggle() {
-  return () => (
-    <button
-      aria-label="Notifications"
-      mix={[...toggle(), togglePrimitive.control({ defaultChecked: true })]}
-    />
-  )
-}
-```
-
-## `remix/ui/toggle`
-
-- `toggle(options)`: styles a native checkbox input as a switch and supplies `type="checkbox"` plus `role="switch"` when the host is an `<input>` without an explicit non-checkbox `type`. Supports `size: 'md' | 'lg'` and defaults to `'md'`.
-- `onToggleChange(handler)`: re-exported primitive event mixin.
-- `ToggleChangeEvent`: re-exported primitive event class.
-- `ToggleSize` and `ToggleOptions`: public TypeScript types for the style mixin.
-
-## `remix/ui/toggle/primitives`
-
-- `control(options)`: wires a boolean switch control with checked state, ARIA, keyboard, and native input behavior.
-- `onToggleChange(handler)`: event mixin for bubbling toggle changes.
-- `ToggleChangeEvent`: event class dispatched when a toggle changes.
-- `ToggleControlOptions`: primitive options for controlled and uncontrolled state.
-
-## Behavior Notes
-
-- Checked styles apply through `:checked`, `[aria-checked="true"]`, or `[data-state="checked"]`.
-- Native checkbox switches use the native `checked` attribute for state. Custom hosts use `role="switch"` and `aria-checked="true"` or `aria-checked="false"`.
-- Every switch needs an accessible name, usually from visible label text, `aria-label`, or `aria-labelledby`.

package/src/ui/toggle/primitives.ts

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

package/src/ui/toggle.ts

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

package/src/ui-hmr.ts

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

package/src/ui.ts

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