@bug-on/md3-react 2.0.3 → 3.0.0

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

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

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

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

@@ -1,59 +0,0 @@
-/**
- * @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/tab.d.ts

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

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

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

@@ -1,60 +0,0 @@
-/**
- * @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;

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

@@ -1,94 +0,0 @@
-/**
- * @file tabs.tokens.ts
- * MD3 Expressive Tabs — Design tokens ported from:
- *   - PrimaryNavigationTabTokens.kt (v0_162)
- *   - SecondaryNavigationTabTokens.kt (v0_162)
- *
- * All dimensional values are in px (dp equivalent for web).
- * @see docs/m3/tabs/PrimaryNavigationTabTokens.kt
- * @see docs/m3/tabs/SecondaryNavigationTabTokens.kt
- */
-/**
- * Dimensional design tokens for the MD3 Tabs component.
- *
- * Maps directly from the `.kt` token files to CSS/JS values.
- * Use as the single source of truth for sizing.
- */
-export declare const TabsTokens: {
-    /** ContainerHeight = 48dp (text-only tab) */
-    readonly containerHeight: 48;
-    /** IconAndLabelTextContainerHeight = 64dp (tab with icon + label stacked) */
-    readonly containerHeightWithIcon: 64;
-    /** ActiveIndicatorHeight (Primary) = 3dp */
-    readonly primaryIndicatorHeight: 3;
-    /** ActiveIndicatorHeight (Secondary) = 2dp */
-    readonly secondaryIndicatorHeight: 2;
-    /**
-     * ActiveIndicatorShape = 3dp top-left and top-right (per MD3 token, not a full pill).
-     * Google reference: `var(--_active-indicator-shape)` resolves to `3px 3px 0 0` effectively.
-     */
-    readonly indicatorBorderRadius: "3px 3px 0 0";
-    /** IconSize = 24dp */
-    readonly iconSize: 24;
-    /**
-     * Edge start/end padding for scrollable mode = 52px.
-     * Per MD3 spec: tabs have padding on both leading and trailing edges.
-     */
-    readonly scrollableEdgePadding: 52;
-    /** Minimum tab width in scrollable mode = 90px. */
-    readonly scrollableMinTabWidth: 90;
-    /** DividerHeight = 1dp */
-    readonly dividerHeight: 1;
-    /**
-     * Focus ring border-radius = 8px.
-     * Google reference: `focus-ring.theme({ shape: 8px })` in _tab.scss.
-     */
-    readonly focusRingBorderRadius: 8;
-};
-/**
- * CSS custom property references for Tabs colors.
- * Maps to `--md-sys-color-*` tokens in the MD3 theme system.
- *
- * DO NOT hardcode hex values — use these references for automatic
- * light/dark theme adaptation.
- */
-export declare const TabsColors: {
-    /** Primary: ActiveLabelTextColor / ActiveIconColor = Primary */
-    readonly primaryActiveText: "var(--md-sys-color-primary)";
-    /** Primary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
-    readonly primaryInactiveText: "var(--md-sys-color-on-surface-variant)";
-    /** Primary: ActiveIndicatorColor = Primary */
-    readonly primaryIndicator: "var(--md-sys-color-primary)";
-    /** Secondary: ActiveLabelTextColor / ActiveIconColor = OnSurface */
-    readonly secondaryActiveText: "var(--md-sys-color-on-surface)";
-    /** Secondary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
-    readonly secondaryInactiveText: "var(--md-sys-color-on-surface-variant)";
-    /** Secondary: Indicator color = Primary (same as primary variant) */
-    readonly secondaryIndicator: "var(--md-sys-color-primary)";
-    /** Secondary: DividerColor = SurfaceVariant */
-    readonly divider: "var(--md-sys-color-surface-variant)";
-    /** ContainerColor = Surface */
-    readonly container: "var(--md-sys-color-surface)";
-    /** Focus ring indicator = Secondary */
-    readonly focusIndicator: "var(--md-sys-color-secondary)";
-    /** Hover state layer (primary active) */
-    readonly primaryActiveHover: "var(--md-sys-color-primary)";
-    /** Hover state layer (inactive, both variants) */
-    readonly inactiveHover: "var(--md-sys-color-on-surface)";
-};
-/** Spring transition for the sliding indicator (FastSpatial equivalent). */
-export declare const TABS_INDICATOR_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 500;
-    readonly damping: 40;
-};
-/** Color transition for label/icon color animate (active ↔ inactive). */
-export declare const TABS_COLOR_TRANSITION: {
-    readonly duration: 0.2;
-    readonly ease: "easeInOut";
-};
-/** Content fade transition when switching tabs. */
-export declare const TABS_CONTENT_TRANSITION: {
-    readonly duration: 0.15;
-    readonly ease: "easeInOut";
-};

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

@@ -1,172 +0,0 @@
-/**
- * @file tabs.types.ts
- * MD3 Expressive Tabs — TypeScript prop definitions.
- * Spec: https://m3.material.io/components/tabs/overview
- */
-import type * as React from "react";
-/** Visual variant: primary (content-width indicator) or secondary (full-width indicator + divider). */
-export type TabsVariant = "primary" | "secondary";
-/**
- * Internal context shared across all compound components.
- * @internal
- */
-export interface TabsContextValue {
-    /** Currently selected tab value. */
-    value: string;
-    /** Callback to change the selected tab. */
-    onValueChange: (value: string) => void;
-    /** Currently keyboard-focused tab value (for roving tabindex). */
-    focusedValue: string;
-    /** Sets the focused tab value (keyboard nav only — does NOT select). */
-    setFocusedValue: (value: string) => void;
-    /** Ordered list of all registered tab values (for ArrowKey nav). */
-    tabValues: string[];
-    /** Register a tab value when a <Tab> mounts. */
-    registerTab: (value: string) => void;
-    /** Unregister a tab value when a <Tab> unmounts. */
-    unregisterTab: (value: string) => void;
-    /** Unique layout group ID scoped to this Tabs instance. */
-    layoutGroupId: string;
-    /**
-     * Set of currently disabled tab values.
-     * Used by keyboard navigation to skip disabled tabs.
-     */
-    disabledValues: Set<string>;
-    /**
-     * Mark or unmark a tab value as disabled.
-     * Called by <Tab> on mount and when `disabled` prop changes.
-     */
-    markTabDisabled: (value: string, disabled: boolean) => void;
-    /**
-     * When true, focus moving via ArrowKey also selects the tab immediately.
-     * Mirrors Google's `autoActivate` attribute on <md-tabs>.
-     * @default false
-     */
-    autoActivate: boolean;
-}
-/**
- * Props for the `<Tabs>` root component.
- *
- * Supports both controlled (`value` + `onValueChange`) and
- * uncontrolled (`defaultValue`) usage patterns.
- *
- * @example
- * ```tsx
- * // Controlled
- * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
- *
- * // Uncontrolled
- * <Tabs defaultValue="flights">...</Tabs>
- *
- * // Auto-activate (focus = select)
- * <Tabs defaultValue="flights" autoActivate>...</Tabs>
- * ```
- */
-export interface TabsProps {
-    /** Controlled selected value. Use with `onValueChange`. */
-    value?: string;
-    /** Initial value for uncontrolled usage. */
-    defaultValue?: string;
-    /** Called when the selected tab changes. */
-    onValueChange?: (value: string) => void;
-    /**
-     * When true, ArrowKey navigation also selects the focused tab immediately.
-     * Mirrors Google's `auto-activate` attribute on `<md-tabs>`.
-     * @default false
-     */
-    autoActivate?: boolean;
-    /** Tab compound components as children. */
-    children: React.ReactNode;
-    /** Additional CSS class names for the root wrapper. */
-    className?: string;
-}
-/**
- * Props for the `<TabsList>` container component.
- *
- * @example
- * ```tsx
- * <TabsList variant="primary" scrollable={false}>
- *   <Tab value="tab1">Tab 1</Tab>
- * </TabsList>
- * ```
- */
-export interface TabsListProps {
-    /** Visual style variant. @required */
-    variant: TabsVariant;
-    /**
-     * When true, tabs scroll horizontally with 52px edge padding (MD3 spec).
-     * When false, tabs divide the available width equally (flex-1).
-     * @default false
-     */
-    scrollable?: boolean;
-    /**
-     * Background color override for the tab bar.
-     * @default "var(--md-sys-color-surface)"
-     */
-    backgroundColor?: string;
-    /** Tab components as children. */
-    children: React.ReactNode;
-    /** Additional CSS class names. */
-    className?: string;
-    /** Forwarded aria-label for the tablist. */
-    "aria-label"?: string;
-}
-/**
- * Props for an individual `<Tab>` component.
- *
- * @example
- * ```tsx
- * <Tab value="flights" icon={<Icon name="flight" />}>Flights</Tab>
- * <Tab value="trips" disabled>Trips</Tab>
- * <Tab value="hotels" icon={<Icon name="hotel" />} inlineIcon>Hotels</Tab>
- * ```
- */
-export interface TabProps {
-    /** Unique value identifying this tab. Must match a `<TabsContent value>`. */
-    value: string;
-    /**
-     * Optional icon rendered with the label text.
-     * - Default (stacked): icon above label, height increases to 64dp.
-     * - With `inlineIcon`: icon beside label (same row), height stays 48dp.
-     */
-    icon?: React.ReactNode;
-    /**
-     * When true, icon is placed inline (same row) with the label text.
-     * Container height stays at 48dp (does NOT increase to 64dp).
-     * Mirrors the `inline-icon` attribute on `<md-primary-tab>`.
-     * @default false
-     */
-    inlineIcon?: boolean;
-    /**
-     * When true, disables interaction.
-     * Disabled tabs are skipped entirely in keyboard navigation (ArrowKey).
-     */
-    disabled?: boolean;
-    /** Additional CSS class names. */
-    className?: string;
-    /**
-     * Optional badge element overlaid on the tab content.
-     * Handled via `BadgedBox`:
-     * - Stacked icon: Overlaps icon's top-trailing corner.
-     * - Inline/Text-only: Placed next to the text.
-     */
-    badge?: React.ReactNode;
-    /** Label text rendered inside the tab. */
-    children: React.ReactNode;
-}
-/**
- * Props for the `<TabsContent>` panel component.
- *
- * @example
- * ```tsx
- * <TabsContent value="flights">Flight content here</TabsContent>
- * ```
- */
-export interface TabsContentProps {
-    /** Must match the `value` of a sibling `<Tab>`. */
-    value: string;
-    /** Additional CSS class names. */
-    className?: string;
-    /** Panel content. */
-    children: React.ReactNode;
-}

package/dist/ui/text-field/subcomponents/active-indicator.d.ts

@@ -1,24 +0,0 @@
-/**
- * @file active-indicator.tsx
- * Animated bottom border line for the MD3 Filled TextField.
- * Expands height from 1px → 2px and color changes on focus.
- */
-import * as React from "react";
-export interface ActiveIndicatorProps {
-    isFocused: boolean;
-    isError: boolean;
-    isDisabled: boolean;
-    isHovered: boolean;
-    prefersReduced: boolean;
-}
-/**
- * MD3 Active Indicator — the bottom border line for Filled TextField.
- *
- * Animates:
- * - `height`: 1px (enabled) → 2px (focused)
- * - `backgroundColor`: on-surface-variant → primary (focused) → error
- * - `scaleX`: 0 → 1 expanding from center on focus in
- *
- * @see https://m3.material.io/components/text-fields/specs#filled-text-field
- */
-export declare const ActiveIndicator: React.NamedExoticComponent<ActiveIndicatorProps>;