@bug-on/md3-react 0.1.0

package/dist/ui/snackbar/snackbar.d.ts

@@ -0,0 +1,196 @@
+/**
+ * @file snackbar.tsx
+ *
+ * MD3 Expressive Snackbar component.
+ *
+ * Architecture:
+ * - `Snackbar`         → Pure display component (motion.div, role="status", aria-live="polite")
+ * - `SnackbarHost`     → AnimatePresence container + queue flush (place once in layout)
+ * - `SnackbarProvider` → Context provider that wires SnackbarHost + exposes `useSnackbar`
+ * - `useSnackbarState` → Low-level ref-based queue hook (mutex pattern)
+ * - `useSnackbar`      → Consumer hook for imperative `showSnackbar(visuals)` calls
+ *
+ * Queue strategy:
+ * - One snackbar visible at a time (MD3 spec).
+ * - Subsequent `showSnackbar()` calls are enqueued, shown as soon as current one dismisses.
+ * - Cleanup: on unmount, all pending promises resolve as 'dismissed'.
+ *
+ * @see https://m3.material.io/components/snackbar/overview
+ */
+import * as React from "react";
+/**
+ * Duration preset for the snackbar auto-dismiss timer.
+ * - `'short'` → 4 000 ms (default, MD3 spec)
+ * - `'long'`  → 7 000 ms
+ * - `number`  → custom milliseconds
+ */
+export type SnackbarDuration = "short" | "long" | number;
+/**
+ * Resolution value returned by the `showSnackbar()` promise.
+ * - `'action-performed'` → user clicked the action button
+ * - `'dismissed'`        → auto-dismissed or close button clicked
+ */
+export type SnackbarResult = "action-performed" | "dismissed";
+/**
+ * Visual configuration for a single snackbar instance.
+ */
+export interface SnackbarVisuals {
+    /** Main message text. */
+    message: string;
+    /** Label for the optional action button. */
+    actionLabel?: string;
+    /** When `true`, renders a close (X) icon button. @default false */
+    withDismissAction?: boolean;
+    /**
+     * When `true`, renders the action button below the message (Column layout).
+     * Use when both message and actionLabel are long.
+     * @default false
+     */
+    actionOnNewLine?: boolean;
+    /**
+     * Auto-dismiss duration.
+     * @default 'short' (4 000 ms)
+     */
+    duration?: SnackbarDuration;
+    /** Additional className applied to the snackbar container. */
+    className?: string;
+}
+/**
+ * Internal runtime data for a currently-displayed snackbar.
+ * Includes the resolve callback to settle the caller's promise.
+ */
+export interface SnackbarData {
+    /** Unique key for AnimatePresence element diffing. */
+    id: string;
+    /** Visual configuration. */
+    visuals: SnackbarVisuals;
+    /** Settles the promise returned by `showSnackbar()`. */
+    resolve: (result: SnackbarResult) => void;
+}
+/** Props for the pure `Snackbar` display component. */
+export interface SnackbarProps {
+    /** Runtime data including message, actions, and resolve callback. */
+    data: SnackbarData;
+    /** Additional className merged onto the snackbar container. */
+    className?: string;
+}
+/** Props for the `SnackbarHost` component. */
+export interface SnackbarHostProps {
+    /** State returned by `useSnackbarState()`. */
+    state: UseSnackbarStateReturn;
+    /** Additional className applied to the fixed host wrapper. */
+    className?: string;
+}
+/** Return type of `useSnackbarState`. */
+export interface UseSnackbarStateReturn {
+    /** Currently visible snackbar data, or `null` when idle. */
+    current: SnackbarData | null;
+    /**
+     * Show a snackbar with the given visuals.
+     * Returns a promise that resolves when the snackbar is dismissed or the action is triggered.
+     */
+    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
+    /** Internal dismiss handler — called by `SnackbarHost`. */
+    _dismiss: (result: SnackbarResult) => void;
+}
+/**
+ * Low-level hook that manages the snackbar queue and current state.
+ *
+ * Uses a `ref`-based queue (mutex pattern) so that enqueueing never
+ * triggers a re-render storm — only the state transition does.
+ *
+ * @example
+ * ```tsx
+ * // Used internally by SnackbarProvider
+ * const state = useSnackbarState();
+ * return <SnackbarHost state={state} />;
+ * ```
+ */
+export declare function useSnackbarState(): UseSnackbarStateReturn;
+/**
+ * MD3 Expressive Snackbar — pure display component.
+ *
+ * Renders a single snackbar with message, optional action button, and
+ * optional dismiss icon button. Handles its own auto-dismiss timer.
+ *
+ * @remarks
+ * - Uses `role="status"` + `aria-live="polite"` for screen reader announcements.
+ * - All entrance/exit animation is handled by the parent `SnackbarHost` via
+ *   `AnimatePresence` + `SNACKBAR_ANIM`.
+ * - Do NOT render this component directly — use `SnackbarHost`.
+ *
+ * @example
+ * ```tsx
+ * // Internal usage inside SnackbarHost — not for direct use
+ * <Snackbar data={currentSnackbarData} />
+ * ```
+ */
+export declare const Snackbar: React.NamedExoticComponent<SnackbarProps>;
+/**
+ * MD3 SnackbarHost — renders the AnimatePresence container for snackbar queue.
+ *
+ * Place this once in your app layout. It will show snackbars one at a time,
+ * dequeuing the next one as each dismisses.
+ *
+ * @example
+ * ```tsx
+ * // Typically used inside SnackbarProvider — not directly
+ * const state = useSnackbarState();
+ * <SnackbarHost state={state} />
+ * ```
+ */
+export declare function SnackbarHost({ state, className }: SnackbarHostProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SnackbarHost {
+    var displayName: string;
+}
+interface SnackbarContextValue {
+    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
+}
+/**
+ * MD3 SnackbarProvider — context provider for imperative snackbar API.
+ *
+ * Wrap your application (or a section of it) with this provider.
+ * Then use `useSnackbar()` in any descendant to show snackbars.
+ *
+ * @example
+ * ```tsx
+ * // In your root layout:
+ * <SnackbarProvider>
+ *   <App />
+ * </SnackbarProvider>
+ *
+ * // In any component:
+ * const { showSnackbar } = useSnackbar();
+ * await showSnackbar({ message: 'Saved!', actionLabel: 'Undo' });
+ * ```
+ */
+export declare function SnackbarProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace SnackbarProvider {
+    var displayName: string;
+}
+/**
+ * Hook that returns the `showSnackbar` function from the nearest `SnackbarProvider`.
+ *
+ * @throws {Error} if used outside of a `SnackbarProvider`.
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const { showSnackbar } = useSnackbar();
+ *
+ *   const handleSave = async () => {
+ *     const result = await showSnackbar({
+ *       message: 'Changes saved',
+ *       actionLabel: 'Undo',
+ *     });
+ *     if (result === 'action-performed') undoSave();
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+export declare function useSnackbar(): SnackbarContextValue;
+export {};

package/dist/ui/switch/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @file switch/index.ts
+ * Public exports for the MD3 Expressive Switch component.
+ */
+export { Switch } from "./switch";
+export { SwitchColors, SwitchTokens } from "./switch.tokens";
+export type { SwitchProps } from "./switch.types";

package/dist/ui/switch/switch.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file switch.tsx
+ * MD3 Expressive Switch — ARIA switch pattern with Framer Motion animations.
+ * Spec: https://m3.material.io/components/switch/overview
+ *
+ * Key decisions:
+ * - Uses `<button role="switch">` (no <input>) per MD3 accessibility spec
+ * - Framer Motion for ALL animations (thumb x, size morph, state layer, icons)
+ * - Hover state via useState (required for Framer Motion color animate)
+ * - Disabled colors via rgba() literals (color-mix() not animatable by FM)
+ */
+import * as React from "react";
+import type { SwitchProps } from "./switch.types";
+/**
+ * MD3 Expressive Switch component.
+ *
+ * Toggles a single item on or off. Implements the ARIA switch pattern
+ * (`role="switch"`) without `<input>`. Fully animated per MD3 spec:
+ * thumb translation, size morph (16→24→28px), state layer, and icon cross-fade.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={isOn} onCheckedChange={setIsOn} label="Wi-Fi" />
+ * <Switch checked={isOn} onCheckedChange={setIsOn} icons thumbContent={<CheckIcon />} />
+ * <Switch checked={isOn} onCheckedChange={setIsOn} disabled />
+ * ```
+ *
+ * @see https://m3.material.io/components/switch/overview
+ */
+export declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/ui/switch/switch.stories.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file switch.stories.tsx
+ * MD3 Expressive Switch — all usage patterns and states.
+ *
+ * Can be used as:
+ * 1. Storybook stories (if Storybook is configured)
+ * 2. Standalone demo component for the docs app
+ *
+ * Covers all 7 patterns from the MD3 Switch specification:
+ * 1. Basic toggle
+ * 2. With label
+ * 3. With icons (both states)
+ * 4. With only selected icon
+ * 5. Disabled (checked)
+ * 6. Disabled (unchecked)
+ * 7. All states grid
+ */
+/** Basic stateful switch — no label, no icons. */
+export declare function Basic(): import("react/jsx-runtime").JSX.Element;
+/** Switch with a visible text label using htmlFor linkage. */
+export declare function WithLabel(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Switch showing icons in both checked and unchecked states.
+ * Uses check icon when on, close icon when off.
+ */
+export declare function WithIcons(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Switch showing the icon only in the checked (selected) state.
+ * Unselected state has no icon.
+ */
+export declare function WithOnlySelectedIcon(): import("react/jsx-runtime").JSX.Element;
+/** Disabled switch in the checked (on) state. */
+export declare function DisabledChecked(): import("react/jsx-runtime").JSX.Element;
+/** Disabled switch in the unchecked (off) state. */
+export declare function DisabledUnchecked(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Grid displaying all Switch state combinations:
+ * - Enabled: checked / unchecked
+ * - Disabled: checked / unchecked
+ * - With icons: checked / unchecked
+ * - With only selected icon: checked / unchecked
+ */
+export declare function AllStatesGrid(): import("react/jsx-runtime").JSX.Element;
+/**
+ * All switch stories in one scrollable demo page.
+ * Used by the docs app to showcase all variants.
+ */
+export declare function SwitchDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/switch/switch.tokens.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @file switch.tokens.ts
+ * MD3 Expressive Switch — Design tokens ported from SwitchTokens.kt.
+ * All dimensional values are in px (dp equivalent for web).
+ * @see docs/m3/switch/SwitchTokens.kt
+ */
+/**
+ * Design tokens for the MD3 Expressive Switch component.
+ *
+ * Maps directly from `SwitchTokens.kt` (v0_210) to CSS/JS values.
+ * Use these as the single source of truth for sizing and opacity.
+ *
+ * Color tokens are NOT included here — they reference CSS custom properties
+ * from the project's MD3 theme system (`--md-sys-color-*`).
+ */
+export declare const SwitchTokens: {
+    /** SwitchTokens.TrackWidth = 52dp */
+    readonly trackWidth: 52;
+    /** SwitchTokens.TrackHeight = 32dp */
+    readonly trackHeight: 32;
+    /** SwitchTokens.TrackOutlineWidth = 2dp */
+    readonly trackOutlineWidth: 2;
+    /** SwitchTokens.SelectedHandleWidth/Height = 24dp */
+    readonly selectedHandleSize: 24;
+    /** SwitchTokens.UnselectedHandleWidth/Height = 16dp */
+    readonly unselectedHandleSize: 16;
+    /** SwitchTokens.IconHandleWidth/Height = 24dp (when thumb has icon content) */
+    readonly iconHandleSize: 24;
+    /** SwitchTokens.PressedHandleWidth/Height = 28dp */
+    readonly pressedHandleSize: 28;
+    /** SwitchTokens.StateLayerSize = 40dp */
+    readonly stateLayerSize: 40;
+    /** SwitchTokens.SelectedIconSize / UnselectedIconSize = 16dp */
+    readonly iconSize: 16;
+    /** SwitchTokens.DisabledTrackOpacity = 0.12 */
+    readonly disabledTrackOpacity: 0.12;
+    /** SwitchTokens.DisabledSelectedHandleOpacity = 1.0 */
+    readonly disabledSelectedHandleOpacity: 1;
+    /** SwitchTokens.DisabledUnselectedHandleOpacity = 0.38 */
+    readonly disabledUnselectedHandleOpacity: 0.38;
+    /** SwitchTokens.DisabledSelectedIconOpacity = 0.38 */
+    readonly disabledSelectedIconOpacity: 0.38;
+    /** SwitchTokens.DisabledUnselectedIconOpacity = 0.38 */
+    readonly disabledUnselectedIconOpacity: 0.38;
+};
+/**
+ * CSS custom property references for Switch colors.
+ * These map to the project's `--md-sys-color-*` tokens in `colors.css`.
+ *
+ * DO NOT hardcode hex values — always use these references so the
+ * component automatically adapts to light/dark theme switching.
+ */
+export declare const SwitchColors: {
+    readonly checkedTrack: "var(--md-sys-color-primary)";
+    readonly uncheckedTrack: "var(--md-sys-color-surface-container-highest)";
+    readonly uncheckedTrackOutline: "var(--md-sys-color-outline)";
+    readonly checkedThumb: "var(--md-sys-color-on-primary)";
+    readonly uncheckedThumb: "var(--md-sys-color-outline)";
+    readonly hoverCheckedThumb: "var(--md-sys-color-primary-container)";
+    readonly hoverUncheckedThumb: "var(--md-sys-color-on-surface-variant)";
+    readonly disabledCheckedThumb: "var(--md-sys-color-surface)";
+    readonly checkedIcon: "var(--md-sys-color-on-primary-container)";
+    readonly uncheckedIcon: "var(--md-sys-color-surface-container-highest)";
+    readonly checkedStateLayer: "var(--md-sys-color-primary)";
+    readonly uncheckedStateLayer: "var(--md-sys-color-on-surface)";
+    readonly focusIndicator: "var(--md-sys-color-secondary)";
+};

package/dist/ui/switch/switch.types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @file switch.types.ts
+ * MD3 Expressive Switch — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/switch/overview
+ */
+import type * as React from "react";
+/**
+ * Props for the `Switch` component.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={isOn} onCheckedChange={setIsOn} label="Wi-Fi" />
+ * ```
+ */
+export interface SwitchProps {
+    /** Controlled checked (on) state. */
+    checked: boolean;
+    /** Called when the switch is toggled. Not called when disabled. */
+    onCheckedChange: (checked: boolean) => void;
+    /** Disables interaction and applies disabled visual state. @default false */
+    disabled?: boolean;
+    /**
+     * Optional icon content rendered inside the thumb.
+     * Expected to measure 16dp (SwitchTokens.iconSize).
+     */
+    thumbContent?: React.ReactNode;
+    /**
+     * When true, shows thumb icons in both selected and unselected states.
+     * Requires `thumbContent` to be provided.
+     * @default false
+     */
+    icons?: boolean;
+    /**
+     * When true, shows the icon only in the selected/checked state.
+     * Requires `thumbContent` to be provided.
+     * @default false
+     */
+    showOnlySelectedIcon?: boolean;
+    /**
+     * Visible label text rendered adjacent to the switch.
+     * When provided, wraps the switch in a `<label>` for accessibility.
+     */
+    label?: string;
+    /**
+     * Overrides the accessible name. Used when no visible `label` is provided.
+     * Maps to the `aria-label` attribute.
+     */
+    ariaLabel?: string;
+    /** Additional CSS class names applied to the outermost wrapper. */
+    className?: string;
+    /** Override track background color when checked. Defaults to MD3 primary. */
+    checkedTrackColor?: string;
+    /** Override track background color when unchecked. Defaults to MD3 surface-container-highest. */
+    uncheckedTrackColor?: string;
+    /** Override thumb color when checked. Defaults to MD3 on-primary. */
+    checkedThumbColor?: string;
+    /** Override thumb color when unchecked. Defaults to MD3 outline. */
+    uncheckedThumbColor?: string;
+}

package/dist/ui/tabs/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file tabs/index.ts
+ * Public exports for the MD3 Expressive Tabs component system.
+ */
+export { Tab } from "./tab";
+export { Tabs } from "./tabs";
+export { TabsColors, TabsTokens } from "./tabs.tokens";
+export type { TabProps, TabsContentProps, TabsListProps, TabsProps, TabsVariant, } from "./tabs.types";
+export { TabsContent } from "./tabs-content";
+export { TabsList } from "./tabs-list";

package/dist/ui/tabs/tab.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @file tab.tsx
+ * MD3 Expressive Tab — Individual tab button with Framer Motion indicator.
+ *
+ * Design decisions:
+ * 1. PRIMARY indicator nested inside content wrapper → width = content width (not full button).
+ * 2. SECONDARY indicator outside content wrapper → `inset-x-0` = full button width.
+ * 3. ROVING TABINDEX (WAI-ARIA): only focused tab has tabIndex=0; ArrowKey moves focus, Enter/Space selects.
+ * 4. DISABLED tabs are skipped in ArrowKey navigation.
+ * 5. RTL: ArrowLeft/Right directions are swapped when `direction: rtl` is detected.
+ * 6. INLINE ICON: icon beside label, height stays 48dp (stacked = 64dp).
+ * 7. AUTO-ACTIVATE: when parent `<Tabs autoActivate>`, ArrowKey also selects.
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+import * as React from "react";
+import type { TabProps } from "./tabs.types";
+/**
+ * MD3 Expressive Tab component — individual tab button.
+ *
+ * Must be a direct child of `<TabsList>`. Implements WAI-ARIA Tabs pattern
+ * with roving tabindex keyboard navigation.
+ *
+ * - **Primary variant**: indicator width = content (text + icon) width.
+ * - **Secondary variant**: indicator width = full button hit area.
+ * - **Disabled**: Skipped entirely in ArrowKey navigation (cannot be focused).
+ * - **inlineIcon**: Icon beside (not above) label; height stays 48dp.
+ * - Framer Motion `layoutId` animates indicator with spring physics.
+ * - ArrowLeft/Right respect RTL direction automatically.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="flights" icon={<Icon name="flight" />}>Flights</Tab>
+ * <Tab value="trips">Trips</Tab>
+ * <Tab value="explore" disabled>Explore</Tab>
+ * <Tab value="hotels" icon={<Icon name="hotel" />} inlineIcon>Hotels</Tab>
+ * ```
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+export declare const Tab: React.NamedExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/ui/tabs/tabs-content.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file tabs-content.tsx
+ * MD3 Expressive TabsContent — Animated panel component.
+ *
+ * Implements WAI-ARIA tabpanel role with:
+ * - AnimatePresence for fade transition on tab switch
+ * - Proper aria-labelledby pointing to the associated <Tab>
+ * - tabIndex=0 so keyboard users can Tab from the tablist into the panel
+ * - Hidden panels are removed from the DOM (not just visually hidden)
+ *   to prevent screen readers from reading inactive content
+ */
+import * as React from "react";
+import type { TabsContentProps } from "./tabs.types";
+/**
+ * MD3 Expressive TabsContent panel component.
+ *
+ * Each panel corresponds to a `<Tab>` with the same `value`.
+ * Only the active panel is rendered in the DOM — inactive panels
+ * are fully unmounted (not `display: none`) to prevent screen readers
+ * from reading hidden content.
+ *
+ * Fade animation is applied on both enter and exit via Framer Motion
+ * `AnimatePresence`. We use `mode="popLayout"` to prevent height layout shifting
+ * during tab transitions. Animation is automatically disabled when the user
+ * has enabled `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="flights">
+ *   <p>Available flights...</p>
+ * </TabsContent>
+ * ```
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+export declare const TabsContent: React.NamedExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/tabs/tabs-list.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file tabs-list.tsx
+ * MD3 Expressive TabsList — Container component for tab buttons.
+ *
+ * Responsibilities:
+ * - Applies variant (primary/secondary) layout and styling
+ * - Manages horizontal scroll for scrollable mode (52px edge padding per MD3)
+ * - Renders the bottom divider for secondary variant
+ * - Scopes Framer Motion LayoutGroup so indicators animate correctly
+ *   when multiple <Tabs> instances are on the same page
+ * - Restores focus to activeTab when keyboard focus leaves the tablist
+ *   (matches Google's `focusout` handler on <md-tabs>)
+ */
+import * as React from "react";
+import type { TabsListProps } from "./tabs.types";
+/**
+ * MD3 Expressive TabsList container component.
+ *
+ * Renders a horizontal row of `<Tab>` components with MD3-compliant
+ * layout (fixed or scrollable) and variant styling (primary or secondary).
+ *
+ * - **Primary**: Tabs divide available width equally, indicator width = content width.
+ * - **Secondary**: Tabs divide equally + full-width indicator + bottom divider line.
+ * - **Scrollable**: Tabs have min-width (90px), scroll horizontally with 52px edge padding.
+ * - **Focusout**: When focus leaves the tablist, roving focus resets to the active tab.
+ *
+ * @example
+ * ```tsx
+ * <TabsList variant="primary" scrollable={false}>
+ *   <Tab value="tab1">Tab 1</Tab>
+ *   <Tab value="tab2">Tab 2</Tab>
+ * </TabsList>
+ *
+ * <TabsList variant="secondary" scrollable={true} aria-label="Content sections">
+ *   <Tab value="a">Alpha</Tab>
+ *   <Tab value="b">Beta</Tab>
+ * </TabsList>
+ * ```
+ */
+export declare const TabsList: React.NamedExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/tabs/tabs.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @file tabs.tsx
+ * MD3 Expressive Tabs — Root context provider and state manager.
+ * Implements compound component pattern (similar to Radix UI).
+ * Spec: https://m3.material.io/components/tabs/overview
+ */
+import * as React from "react";
+import type { TabsContextValue, TabsProps } from "./tabs.types";
+/**
+ * Hook to consume the Tabs context.
+ * Throws if used outside a `<Tabs>` root.
+ * @internal
+ */
+export declare function useTabsContext(): TabsContextValue;
+/**
+ * MD3 Expressive Tabs root component.
+ *
+ * Manages tab selection state and provides context to all
+ * compound sub-components. Supports both controlled and
+ * uncontrolled usage.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Tabs defaultValue="flights">
+ *   <TabsList variant="primary">
+ *     <Tab value="flights">Flights</Tab>
+ *     <Tab value="trips">Trips</Tab>
+ *   </TabsList>
+ *   <TabsContent value="flights">Flight content</TabsContent>
+ *   <TabsContent value="trips">Trip content</TabsContent>
+ * </Tabs>
+ *
+ * // Controlled
+ * const [tab, setTab] = useState("flights");
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ *
+ * // Auto-activate mode (focus = select)
+ * <Tabs defaultValue="flights" autoActivate>...</Tabs>
+ * ```
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ */
+export declare const Tabs: React.NamedExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Secondary context carrying variant + scrollable from <TabsList>.
+ * Separate from TabsContext so Tabs root doesn't need these props —
+ * they belong to the list, not the root.
+ * @internal
+ */
+export interface TabsListContextValue {
+    variant: "primary" | "secondary";
+    scrollable: boolean;
+}
+export declare const TabsListContext: React.Context<TabsListContextValue | null>;
+/**
+ * Hook to consume TabsList-level context (variant, scrollable).
+ * @internal
+ */
+export declare function useTabsListContext(): TabsListContextValue;