@tinybigui/react 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -2,10 +2,11 @@ import { ClassValue } from 'clsx';
 import { Theme } from '@material/material-color-utilities';
 export { Theme, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import * as React$1 from 'react';
-import React__default, { LabelHTMLAttributes, InputHTMLAttributes, HTMLAttributes, RefObject, ReactNode } from 'react';
+import React__default, { LabelHTMLAttributes, InputHTMLAttributes, HTMLAttributes, RefObject, ReactNode, ButtonHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { AriaButtonProps, AriaTextFieldProps, AriaCheckboxProps, AriaSwitchProps, AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
+import { AriaButtonProps, AriaTextFieldProps, AriaCheckboxProps, AriaSwitchProps, AriaRadioProps, AriaRadioGroupProps, AriaTabProps, AriaTabPanelProps, Key as Key$1, AriaDialogProps, AriaLinkOptions } from 'react-aria';
+import { Key } from 'react-stately';
 
 /**
  * Combines and merges Tailwind CSS classes efficiently.
@@ -438,6 +439,258 @@ declare function pxToRem(px: number | string): string;
  */
 declare function truncateText(lines?: number): React.CSSProperties;
 
+/**
+ * MD3 Top App Bar size variants
+ *
+ * Each variant differs in height, title alignment, and type scale.
+ * - `small`: 64dp height, title left-aligned, title-large type scale
+ * - `center-aligned`: 64dp height, title centered, title-large type scale
+ * - `medium`: 112dp height, title bottom-left, headline-small type scale
+ * - `large`: 152dp height, title bottom-left, display-small type scale
+ *
+ * @see https://m3.material.io/components/top-app-bar/specs
+ */
+type AppBarVariant = "small" | "center-aligned" | "medium" | "large";
+/**
+ * Material Design 3 Top App Bar Component Props
+ *
+ * Provides a top app bar with navigation icon, title, and trailing action icon slots.
+ * Supports scroll-triggered elevation changes with both controlled and uncontrolled modes.
+ *
+ * **Usage:**
+ * - Pass existing `<IconButton>` components into `navigationIcon` and `actions` slots
+ * - No hardcoded slot components — fully composable API
+ *
+ * @example
+ * ```tsx
+ * // Small variant with navigation icon and actions
+ * <AppBar
+ *   title="Page Title"
+ *   navigationIcon={
+ *     <IconButton aria-label="Open navigation">
+ *       <MenuIcon />
+ *     </IconButton>
+ *   }
+ *   actions={
+ *     <IconButton aria-label="Search">
+ *       <SearchIcon />
+ *     </IconButton>
+ *   }
+ * />
+ *
+ * // Center-aligned with controlled scroll state
+ * <AppBar
+ *   variant="center-aligned"
+ *   title="My App"
+ *   scrolled={isScrolled}
+ *   onScrollStateChange={setIsScrolled}
+ * />
+ *
+ * // Large variant for hero/expanded layouts
+ * <AppBar
+ *   variant="large"
+ *   title="Article Title"
+ * />
+ * ```
+ */
+interface AppBarProps {
+    /**
+     * Size variant of the Top App Bar
+     * Controls height, title position, and type scale
+     * @default 'small'
+     */
+    variant?: AppBarVariant;
+    /**
+     * The title content. Accepts a string or any React node.
+     * Typography scale is automatically applied based on `variant`.
+     */
+    title: React__default.ReactNode;
+    /**
+     * Navigation icon slot (leading position, optional).
+     * Expects a React node — typically an `<IconButton>` with `aria-label`.
+     *
+     * @example
+     * ```tsx
+     * navigationIcon={
+     *   <IconButton aria-label="Open navigation menu">
+     *     <MenuIcon />
+     *   </IconButton>
+     * }
+     * ```
+     */
+    navigationIcon?: React__default.ReactNode;
+    /**
+     * Trailing action icon slots (up to 3, optional).
+     * Expects one or more React nodes — typically `<IconButton>` components.
+     *
+     * @example
+     * ```tsx
+     * actions={
+     *   <>
+     *     <IconButton aria-label="Search"><SearchIcon /></IconButton>
+     *     <IconButton aria-label="More options"><MoreIcon /></IconButton>
+     *   </>
+     * }
+     * ```
+     */
+    actions?: React__default.ReactNode;
+    /**
+     * Controlled scroll state.
+     * When provided, the component operates in controlled mode — the consumer
+     * is responsible for managing this value.
+     * When `undefined`, internal scroll detection is used (uncontrolled mode).
+     *
+     * - `false` (default): flat surface, `shadow-elevation-0`
+     * - `true`: elevated surface, `shadow-elevation-2`
+     */
+    scrolled?: boolean;
+    /**
+     * Callback fired when the scroll elevation state changes.
+     * In uncontrolled mode, this fires when the user scrolls past the threshold.
+     * In controlled mode, this is an informational callback — the consumer
+     * decides whether to update `scrolled`.
+     *
+     * @param scrolled - The new scroll state
+     */
+    onScrollStateChange?: (scrolled: boolean) => void;
+    /**
+     * Additional CSS classes to merge onto the root `<header>` element.
+     * Uses Tailwind CSS — conflicting classes are resolved by `cn()`.
+     */
+    className?: string;
+}
+/**
+ * AppBarHeadless Component Props
+ *
+ * Unstyled primitive for the Top App Bar.
+ * Renders a `<header role="banner">` and manages scroll elevation state.
+ * Use this for full visual control when the styled `AppBar` is not sufficient.
+ *
+ * @example
+ * ```tsx
+ * <AppBarHeadless
+ *   className="my-custom-appbar"
+ *   scrolled={scrolled}
+ *   onScrollStateChange={setScrolled}
+ * >
+ *   <div>My custom layout</div>
+ * </AppBarHeadless>
+ * ```
+ */
+interface AppBarHeadlessProps {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * The content to render inside the header
+     */
+    children: React__default.ReactNode;
+    /**
+     * Controlled scroll state.
+     * When `undefined`, the component uses internal scroll detection.
+     */
+    scrolled?: boolean;
+    /**
+     * Callback fired when scroll state changes
+     */
+    onScrollStateChange?: (scrolled: boolean) => void;
+}
+
+/**
+ * Material Design 3 Top App Bar Component
+ *
+ * Provides context and actions for the current screen. Supports four size variants,
+ * a navigation icon slot, title, and trailing action icon slots. Implements
+ * scroll-triggered elevation changes per MD3 specification.
+ *
+ * **Architecture:**
+ * - Layer 3 (this file): MD3 styled, CVA variants, layout composition
+ * - Layer 2: `AppBarHeadless` — `<header role="banner">`, scroll state
+ * - Layer 1: React Aria via `<IconButton>` in consumer slots
+ *
+ * **Key Features:**
+ * - 4 MD3 variants: small, center-aligned, medium, large
+ * - Composable API: pass `<IconButton>` nodes into navigation and action slots
+ * - Scroll elevation: flat at rest → elevated on scroll (MD3 motion tokens)
+ * - Controlled and uncontrolled scroll state
+ * - WCAG 2.1 AA: `role="banner"` landmark, keyboard accessible slots
+ * - Dark mode via existing token system
+ *
+ * @example
+ * ```tsx
+ * // Small variant (default)
+ * <AppBar
+ *   title="Page Title"
+ *   navigationIcon={
+ *     <IconButton aria-label="Open navigation menu">
+ *       <MenuIcon />
+ *     </IconButton>
+ *   }
+ *   actions={
+ *     <IconButton aria-label="Search">
+ *       <SearchIcon />
+ *     </IconButton>
+ *   }
+ * />
+ *
+ * // Center-aligned with scroll elevation
+ * <AppBar
+ *   variant="center-aligned"
+ *   title="My App"
+ *   scrolled={isScrolled}
+ *   onScrollStateChange={setIsScrolled}
+ * />
+ *
+ * // Medium with expanded title area
+ * <AppBar
+ *   variant="medium"
+ *   title="Article Title"
+ *   navigationIcon={
+ *     <IconButton aria-label="Go back">
+ *       <ArrowBackIcon />
+ *     </IconButton>
+ *   }
+ * />
+ * ```
+ */
+declare const AppBar: React$1.ForwardRefExoticComponent<AppBarProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Headless AppBar Component (Layer 2)
+ *
+ * Unstyled Top App Bar primitive. Renders a `<header role="banner">` landmark
+ * and manages scroll elevation state via the `useScrollElevation` hook.
+ *
+ * Features:
+ * - Semantic `<header>` element with `role="banner"` ARIA landmark
+ * - Controlled scroll state via `scrolled` prop
+ * - Uncontrolled scroll state with internal `window` scroll detection
+ * - `onScrollStateChange` callback for both modes
+ * - Full ref forwarding to the header element
+ *
+ * Use this layer when you need full visual control beyond what the styled
+ * `AppBar` provides.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled (auto scroll detection)
+ * <AppBarHeadless className="my-custom-appbar">
+ *   <div>My custom layout</div>
+ * </AppBarHeadless>
+ *
+ * // Controlled scroll state
+ * <AppBarHeadless
+ *   scrolled={isScrolled}
+ *   onScrollStateChange={setIsScrolled}
+ *   className="my-custom-appbar"
+ * >
+ *   <div>My custom layout</div>
+ * </AppBarHeadless>
+ * ```
+ */
+declare const AppBarHeadless: React$1.ForwardRefExoticComponent<AppBarHeadlessProps & React$1.RefAttributes<HTMLElement>>;
+
 /**
  * Material Design 3 Button Variants (CVA)
  *
@@ -1833,4 +2086,1309 @@ declare const RadioHeadless: React$1.ForwardRefExoticComponent<RadioHeadlessProp
  */
 declare const RadioGroupHeadless: React$1.ForwardRefExoticComponent<RadioGroupHeadlessProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, FAB, type FABColor, FABHeadless, type FABHeadlessProps, type FABProps, type FABSize, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, STATE_LAYER_OPACITY, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type TypographyProperty, type TypographyStyleObject, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
+/**
+ * Tab variant following MD3 spec
+ * - primary: active indicator uses bg-primary; active text: text-primary
+ * - secondary: active indicator uses bg-on-surface-variant; active text: text-on-surface
+ */
+type TabVariant = "primary" | "secondary";
+/**
+ * Tab layout mode
+ * - fixed: tabs fill available width equally
+ * - scrollable: tabs overflow horizontally with no wrapping
+ */
+type TabLayout = "fixed" | "scrollable";
+/**
+ * Badge value for a tab item
+ * - number: displays count (999+ for values > 999, hidden for 0)
+ * - true: displays a dot indicator
+ * - false/undefined: no badge
+ */
+type TabBadgeValue = number | boolean;
+/**
+ * Material Design 3 Tabs Wrapper Props
+ *
+ * The Tabs component manages shared state (selected key) and provides
+ * context to TabList and TabPanel children.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Tabs defaultSelectedKey="tab1" aria-label="Settings tabs">
+ *   <TabList>
+ *     <Tab id="tab1" label="General" />
+ *     <Tab id="tab2" label="Privacy" />
+ *   </TabList>
+ *   <TabPanel id="tab1">General content</TabPanel>
+ *   <TabPanel id="tab2">Privacy content</TabPanel>
+ * </Tabs>
+ *
+ * // Controlled
+ * <Tabs selectedKey={selected} onSelectionChange={setSelected} aria-label="App tabs">
+ *   <TabList variant="secondary">
+ *     <Tab id="a" label="Overview" />
+ *     <Tab id="b" label="Details" />
+ *   </TabList>
+ *   <TabPanel id="a">Overview content</TabPanel>
+ *   <TabPanel id="b">Details content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+interface TabsProps {
+    /**
+     * Controlled selected tab key
+     */
+    selectedKey?: Key;
+    /**
+     * Default selected key for uncontrolled usage
+     */
+    defaultSelectedKey?: Key;
+    /**
+     * Callback when selected tab changes
+     */
+    onSelectionChange?: (key: Key) => void;
+    /**
+     * Tab variant — affects active indicator and label color
+     * @default 'primary'
+     */
+    variant?: TabVariant;
+    /**
+     * Layout mode
+     * @default 'fixed'
+     */
+    layout?: TabLayout;
+    /**
+     * TabList and TabPanel children
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Accessible label for the tabs widget
+     */
+    "aria-label"?: string;
+    /**
+     * Accessible labelledby reference
+     */
+    "aria-labelledby"?: string;
+}
+/**
+ * Material Design 3 TabList Props
+ *
+ * Renders the tab row container with the active indicator.
+ * Must be a child of Tabs.
+ *
+ * @example
+ * ```tsx
+ * <TabList>
+ *   <Tab id="overview" label="Overview" />
+ *   <Tab id="activity" label="Activity" icon={<ActivityIcon />} />
+ * </TabList>
+ * ```
+ */
+interface TabListProps {
+    /**
+     * Tab child elements
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Material Design 3 Tab Props
+ *
+ * Represents a single tab item inside a TabList.
+ * Supports icon-only, label-only, and icon+label content modes.
+ *
+ * @example
+ * ```tsx
+ * // Label only
+ * <Tab id="overview" label="Overview" />
+ *
+ * // Icon + label
+ * <Tab id="media" icon={<PhotoIcon />} label="Media" />
+ *
+ * // With badge
+ * <Tab id="messages" label="Messages" badge={5} />
+ *
+ * // Dot badge
+ * <Tab id="notifications" label="Notifications" badge={true} />
+ *
+ * // Disabled
+ * <Tab id="archived" label="Archived" isDisabled />
+ * ```
+ */
+interface TabProps {
+    /**
+     * Unique key identifying this tab (used to match with TabPanel)
+     */
+    id: Key;
+    /**
+     * Icon element displayed above or instead of the label
+     * Should be 24x24dp per MD3 Tabs spec
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Text label for the tab
+     */
+    label?: string;
+    /**
+     * Badge value
+     * - number: shows count (999+ for values > 999, hidden for 0)
+     * - true: shows dot indicator
+     */
+    badge?: TabBadgeValue;
+    /**
+     * Disables the tab (not focusable, not selectable)
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disables ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Material Design 3 TabPanel Props
+ *
+ * Content area associated with a tab. Only the selected tab's panel is visible.
+ * The `id` must match the corresponding Tab's `id`.
+ *
+ * @example
+ * ```tsx
+ * <TabPanel id="overview">
+ *   <p>Overview content here</p>
+ * </TabPanel>
+ * ```
+ */
+interface TabPanelProps {
+    /**
+     * Key matching the associated Tab's `id`
+     */
+    id: Key;
+    /**
+     * Panel content
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Internal tab item representation for React Aria collection
+ */
+interface TabItem {
+    key: Key;
+    id: Key;
+    label?: string;
+    icon?: React__default.ReactNode;
+    badge?: TabBadgeValue;
+    isDisabled?: boolean;
+    textValue?: string;
+}
+/**
+ * Props for HeadlessTab
+ * Extends AriaTabProps for full React Aria accessibility support
+ */
+interface HeadlessTabProps extends AriaTabProps {
+    /**
+     * Tab item from the collection
+     */
+    item: TabItem;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Mouse down handler (for ripple effect)
+     */
+    onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Render function receiving interaction states
+     */
+    children?: (state: {
+        isSelected: boolean;
+        isDisabled: boolean;
+        isFocusVisible: boolean;
+        isPressed: boolean;
+    }) => React__default.ReactNode;
+}
+/**
+ * Props for HeadlessTabPanel
+ * Extends AriaTabPanelProps for full React Aria accessibility support
+ */
+interface HeadlessTabPanelProps extends AriaTabPanelProps {
+    /**
+     * Panel content
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+
+/**
+ * Material Design 3 Tabs Component (Layer 3: Styled Wrapper)
+ *
+ * The Tabs component manages shared selected state via useTabListState (React Aria + Stately),
+ * and provides this state to all child TabList, Tab, and TabPanel components via context.
+ *
+ * Architecture:
+ * 1. Extracts Tab metadata from children to build the React Aria collection
+ * 2. Creates tab list state with useTabListState
+ * 3. Provides React Aria state via HeadlessTabsContext
+ * 4. Provides MD3 styling context via TabsContext
+ *
+ * Features:
+ * - ✅ Controlled and uncontrolled selection
+ * - ✅ Primary and secondary variants
+ * - ✅ Fixed and scrollable layouts
+ * - ✅ Full keyboard navigation (via React Aria)
+ * - ✅ WCAG 2.1 AA compliant
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Tabs defaultSelectedKey="tab1" aria-label="Settings">
+ *   <TabList>
+ *     <Tab id="tab1" label="General" />
+ *     <Tab id="tab2" label="Privacy" />
+ *   </TabList>
+ *   <TabPanel id="tab1">General content</TabPanel>
+ *   <TabPanel id="tab2">Privacy content</TabPanel>
+ * </Tabs>
+ *
+ * // Controlled
+ * <Tabs selectedKey={tab} onSelectionChange={setTab} aria-label="App">
+ *   <TabList variant="secondary">
+ *     <Tab id="overview" label="Overview" />
+ *     <Tab id="details" label="Details" />
+ *   </TabList>
+ *   <TabPanel id="overview">Overview</TabPanel>
+ *   <TabPanel id="details">Details</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Material Design 3 TabList Component (Layer 3: Styled)
+ *
+ * Renders the tab row container with an animated active indicator.
+ * Uses React Aria's useTabList for role="tablist", keyboard navigation,
+ * and accessibility attributes.
+ *
+ * The active indicator slides to the selected tab using CSS transitions
+ * with MD3 motion tokens (medium2 duration, emphasized easing).
+ *
+ * MD3 Specifications:
+ * - Container background: bg-surface
+ * - Container height: 48dp
+ * - Bottom border: 1dp, outline-variant color
+ * - Fixed layout: tabs fill width equally
+ * - Scrollable layout: overflow-x, no wrapping
+ *
+ * @example
+ * ```tsx
+ * <Tabs aria-label="Settings" defaultSelectedKey="general">
+ *   <TabList>
+ *     <Tab id="general" label="General" />
+ *     <Tab id="privacy" label="Privacy" />
+ *   </TabList>
+ *   ...
+ * </Tabs>
+ * ```
+ */
+declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Material Design 3 Tab Component (Layer 3: Styled)
+ *
+ * Renders a single tab item inside a TabList.
+ * Supports three content modes: icon-only, label-only, icon + label (stacked).
+ *
+ * Features:
+ * - ✅ Icon-only, label-only, icon + label (stacked) content modes
+ * - ✅ Ripple effect (Material Design)
+ * - ✅ MD3 state layers (hover 8%, pressed 12%)
+ * - ✅ Badge support (numeric, dot, 999+)
+ * - ✅ Disabled state (opacity-38, not focusable)
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Primary/secondary variant colors
+ *
+ * MD3 Specifications:
+ * - Minimum height: 48dp
+ * - Minimum width: 90dp
+ * - Typography: Title Small (14px, weight 500, tracking 0.1px)
+ * - Icon: 24x24dp
+ * - Active indicator: 3dp primary / 2dp secondary
+ * - State layers: 8% hover, 12% pressed/focus
+ *
+ * @example
+ * ```tsx
+ * // Label only
+ * <Tab id="overview" label="Overview" />
+ *
+ * // Icon + label
+ * <Tab id="media" icon={<PhotoIcon />} label="Media" />
+ *
+ * // With numeric badge
+ * <Tab id="messages" label="Messages" badge={5} />
+ *
+ * // With dot badge
+ * <Tab id="notifications" label="Notifications" badge={true} />
+ *
+ * // Disabled
+ * <Tab id="archived" label="Archived" isDisabled />
+ * ```
+ */
+declare const Tab: React__default.ForwardRefExoticComponent<TabProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Material Design 3 TabPanel Component (Layer 3: Styled)
+ *
+ * Renders the content area associated with a tab.
+ * Only the selected tab's panel content is shown.
+ *
+ * Provides full accessibility:
+ * - role="tabpanel"
+ * - aria-labelledby (pointing to the associated tab)
+ * - Focus management for panels without focusable children (tabIndex=-1)
+ *
+ * MD3 Specifications:
+ * - No specific container styling mandated by MD3 for the panel itself
+ * - The panel should be keyboard-reachable per WCAG requirements
+ *
+ * @example
+ * ```tsx
+ * <TabPanel id="overview">
+ *   <h2>Overview</h2>
+ *   <p>Content here...</p>
+ * </TabPanel>
+ * ```
+ */
+declare const TabPanel: React__default.ForwardRefExoticComponent<TabPanelProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the HeadlessTabList container.
+ * State is injected from HeadlessTabsContext (created in Tabs wrapper).
+ */
+interface HeadlessTabListContainerProps {
+    /** Children are Tab elements */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Headless TabList Component (Layer 2)
+ *
+ * Unstyled tab list container. Applies useTabList to the container element
+ * which wires up role="tablist", aria-label, and keyboard navigation.
+ * State must be provided via HeadlessTabsContext (from the Tabs wrapper).
+ *
+ * @example
+ * ```tsx
+ * // Advanced usage via headless primitives
+ * // State is provided by the Tabs wrapper above in the tree
+ * <HeadlessTabList className="my-tablist">
+ *   {items.map(item => <HeadlessTab key={item.key} item={item} />)}
+ * </HeadlessTabList>
+ * ```
+ */
+declare const HeadlessTabList: React$1.ForwardRefExoticComponent<HeadlessTabListContainerProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Headless Tab Component (Layer 2)
+ *
+ * Unstyled individual tab item. Provides full React Aria accessibility:
+ * - role="tab"
+ * - aria-selected
+ * - aria-controls (pointing to panel)
+ * - roving tabIndex
+ * - keyboard activation
+ *
+ * Must be used within HeadlessTabsContext.
+ *
+ * @example
+ * ```tsx
+ * <HeadlessTab item={item}>
+ *   {({ isSelected, isFocusVisible }) => (
+ *     <span className={isSelected ? 'font-bold' : ''}>
+ *       {item.label}
+ *     </span>
+ *   )}
+ * </HeadlessTab>
+ * ```
+ */
+declare const HeadlessTab: React$1.ForwardRefExoticComponent<HeadlessTabProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Headless TabPanel Component (Layer 2)
+ *
+ * Unstyled tab panel. Provides:
+ * - role="tabpanel"
+ * - aria-labelledby (pointing to its tab)
+ * - Focus management for panels without focusable children
+ *
+ * Must be used within HeadlessTabsContext.
+ *
+ * @example
+ * ```tsx
+ * <HeadlessTabPanel>
+ *   <p>Panel content here</p>
+ * </HeadlessTabPanel>
+ * ```
+ */
+declare const HeadlessTabPanel: React$1.ForwardRefExoticComponent<HeadlessTabPanelProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Badge value for a NavigationBarItem.
+ *
+ * - `true` — renders a dot indicator (no count)
+ * - `number` — renders the count; 0 hides the badge; values > 999 display "999+"
+ */
+type NavigationBarBadge = number | true;
+/**
+ * Configuration for a single NavigationBar destination item.
+ *
+ * @example
+ * ```tsx
+ * const item: NavigationBarItemConfig = {
+ *   key: 'home',
+ *   icon: <HomeIcon />,
+ *   label: 'Home',
+ *   badge: 3,
+ * };
+ * ```
+ */
+interface NavigationBarItemConfig {
+    /**
+     * Unique identifier for this destination (used as the selection key).
+     */
+    key: string;
+    /**
+     * Icon element displayed at 24dp. Always visible regardless of `hideLabels`.
+     */
+    icon: ReactNode;
+    /**
+     * Visible label beneath the icon.
+     * Required unless `aria-label` is provided (icon-only mode with `hideLabels`).
+     */
+    label?: string;
+    /**
+     * Badge displayed on the icon.
+     * - `true` renders a dot indicator.
+     * - `0` hides the badge.
+     * - `1–999` renders the count.
+     * - `> 999` renders "999+".
+     */
+    badge?: NavigationBarBadge;
+    /**
+     * When `true`, the item cannot be focused or activated.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Accessible name used when labels are hidden (`hideLabels` mode).
+     * Required for icon-only items; enforced at runtime via dev warning.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Material Design 3 Navigation Bar (Bottom Navigation) props.
+ *
+ * Accepts 3–5 destination items. Item count outside this range triggers a
+ * dev-only `console.warn`.
+ *
+ * **Controlled usage:**
+ * ```tsx
+ * <NavigationBar
+ *   items={items}
+ *   activeKey={activeKey}
+ *   onActiveChange={setActiveKey}
+ *   aria-label="Main navigation"
+ * />
+ * ```
+ *
+ * **Uncontrolled usage:**
+ * ```tsx
+ * <NavigationBar
+ *   items={items}
+ *   defaultActiveKey="home"
+ *   aria-label="Main navigation"
+ * />
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-bar/overview
+ */
+interface NavigationBarProps {
+    /**
+     * Array of 3–5 destination items.
+     * Item count outside the 3–5 range triggers a dev warning.
+     */
+    items: NavigationBarItemConfig[];
+    /**
+     * Controlled active key. Pair with `onActiveChange`.
+     * Use `null` to explicitly deselect all items.
+     */
+    activeKey?: Key$1 | null;
+    /**
+     * Default active key for uncontrolled usage.
+     */
+    defaultActiveKey?: Key$1;
+    /**
+     * Called when the active destination changes.
+     */
+    onActiveChange?: (key: Key$1) => void;
+    /**
+     * When `true`, hides labels on all items (icon-only mode).
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * Accessible label for the `<nav>` landmark element. Required.
+     *
+     * @example "Main navigation"
+     */
+    "aria-label": string;
+    /**
+     * Disable ripple effect on all items.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes merged onto the `<nav>` element via `cn()`.
+     */
+    className?: string;
+}
+/**
+ * Standalone NavigationBarItem props.
+ *
+ * Used internally by `NavigationBar` and available for advanced consumers
+ * composing with `HeadlessNavigationBar`.
+ *
+ * Extends `ButtonHTMLAttributes` (minus `disabled`) so that tab props from
+ * `useTab` can be spread directly onto the rendered `<button>`.
+ */
+interface NavigationBarItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    /**
+     * The unique key for this item (passed to the headless layer).
+     */
+    itemKey: Key$1;
+    /**
+     * Icon element displayed at 24dp.
+     */
+    icon: ReactNode;
+    /**
+     * Visible label beneath the icon.
+     */
+    label?: string;
+    /**
+     * Badge value.
+     */
+    badge?: NavigationBarBadge;
+    /**
+     * Whether this item is the currently selected destination.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * When `true`, hides the label for this item.
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * Whether this item is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disable ripple effect on this item.
+     * @default false
+     */
+    disableRipple?: boolean;
+}
+/**
+ * HeadlessNavigationBar props.
+ *
+ * Provides the accessibility foundation (`role="navigation"`, `role="tablist"`,
+ * `useTabList`, `useTabListState`) without any visual styling.
+ * Intended for advanced consumers who need full visual control.
+ *
+ * @example
+ * ```tsx
+ * <HeadlessNavigationBar
+ *   items={items}
+ *   defaultSelectedKey="home"
+ *   aria-label="Main navigation"
+ *   renderItem={(config) => (
+ *     <HeadlessNavigationBarItem key={config.key} itemKey={config.key}>
+ *       {config.icon}
+ *       <span>{config.label}</span>
+ *     </HeadlessNavigationBarItem>
+ *   )}
+ * />
+ * ```
+ */
+interface HeadlessNavigationBarProps {
+    /**
+     * Array of item configs used to build the React Aria collection.
+     */
+    items: NavigationBarItemConfig[];
+    /**
+     * Controlled selected key. Pair with `onSelectionChange`.
+     * Use `null` to explicitly deselect all items.
+     */
+    selectedKey?: Key$1 | null;
+    /**
+     * Default selected key for uncontrolled usage.
+     */
+    defaultSelectedKey?: Key$1;
+    /**
+     * Called when the selected key changes.
+     */
+    onSelectionChange?: (key: Key$1) => void;
+    /**
+     * Accessible label for the `<nav>` landmark.
+     */
+    "aria-label": string;
+    /**
+     * Additional CSS classes for the inner `<div role="tablist">`.
+     */
+    className?: string;
+    /**
+     * Render function called for each item in the collection.
+     * Receives the item config; use `HeadlessNavigationBarItem` inside.
+     */
+    renderItem: (config: NavigationBarItemConfig) => ReactNode;
+}
+/**
+ * Render props passed to `HeadlessNavigationBarItem`'s children when used as
+ * a render function.
+ */
+interface NavigationBarItemRenderProps {
+    /** Whether this item is the active destination. */
+    isSelected: boolean;
+    /** Whether the item has a visible keyboard focus ring. */
+    isFocusVisible: boolean;
+}
+/**
+ * HeadlessNavigationBarItem props.
+ *
+ * Renders a single tab-accessible button using `useTab` from React Aria.
+ * Must be rendered inside `HeadlessNavigationBar` (reads state from context).
+ *
+ * Accepts children as ReactNode or as a render function receiving state props.
+ *
+ * @example
+ * ```tsx
+ * // Static children
+ * <HeadlessNavigationBarItem itemKey="home">
+ *   Home
+ * </HeadlessNavigationBarItem>
+ *
+ * // Render function (access to isSelected / isFocusVisible)
+ * <HeadlessNavigationBarItem itemKey="home">
+ *   {({ isSelected }) => (
+ *     <span style={{ fontWeight: isSelected ? 'bold' : 'normal' }}>Home</span>
+ *   )}
+ * </HeadlessNavigationBarItem>
+ * ```
+ */
+interface HeadlessNavigationBarItemProps {
+    /**
+     * The key matching `NavigationBarItemConfig.key`. Used to look up the
+     * item in the React Aria collection state.
+     */
+    itemKey: Key$1;
+    /**
+     * Content to render inside the button — either a ReactNode or a render
+     * function receiving `{ isSelected, isFocusVisible }`.
+     */
+    children: ReactNode | ((renderProps: NavigationBarItemRenderProps) => ReactNode);
+    /**
+     * Additional CSS classes merged onto the `<button>` element.
+     */
+    className?: string;
+    /**
+     * Accessible label for icon-only items (when no visible text label is present).
+     * Applied as `aria-label` on the `<button>` element.
+     */
+    "aria-label"?: string;
+}
+
+/**
+ * Material Design 3 Navigation Bar (Bottom Navigation) — Layer 3.
+ *
+ * Renders a fixed bottom navigation bar with 3–5 destination items, each with
+ * an icon, optional label, animated active indicator pill, and optional badge.
+ *
+ * **Architecture:**
+ * - Layer 3 (this file): MD3 styled, CVA variants, `'use client'`
+ * - Layer 2: `HeadlessNavigationBar` + `HeadlessNavigationBarItem` — React Aria
+ * - Layer 1: `useTabList`, `useTab`, `useFocusRing` — accessibility foundation
+ *
+ * **Key Features:**
+ * - 3–5 destination items (dev warning outside this range)
+ * - Animated indicator pill per MD3 motion tokens (scale + opacity)
+ * - Badge: dot, numeric count, "999+" truncation, hidden at 0
+ * - `hideLabels` for icon-only mode
+ * - Controlled (`activeKey` + `onActiveChange`) and uncontrolled (`defaultActiveKey`)
+ * - Full keyboard navigation: Arrow Left/Right, Home, End, roving `tabIndex`
+ * - WCAG 2.1 AA: `role="navigation"` + `aria-label`, `role="tablist"`,
+ *   `role="tab"` + `aria-selected`, visible focus ring
+ *
+ * **Future — Navigation Rail:**
+ * At wider viewports, a NavigationBar may transition to a Navigation Rail.
+ * This is a separate component tracked as a future Phase 5+ item.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <NavigationBar
+ *   items={[
+ *     { key: 'home', icon: <HomeIcon />, label: 'Home' },
+ *     { key: 'search', icon: <SearchIcon />, label: 'Search', badge: 3 },
+ *     { key: 'profile', icon: <ProfileIcon />, label: 'Profile' },
+ *   ]}
+ *   defaultActiveKey="home"
+ *   aria-label="Main navigation"
+ * />
+ *
+ * // Controlled
+ * <NavigationBar
+ *   items={items}
+ *   activeKey={activeKey}
+ *   onActiveChange={setActiveKey}
+ *   aria-label="Main navigation"
+ * />
+ *
+ * // Icon-only mode
+ * <NavigationBar
+ *   items={iconOnlyItems}
+ *   defaultActiveKey="home"
+ *   aria-label="Main navigation"
+ *   hideLabels
+ * />
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-bar/overview
+ * @see https://m3.material.io/components/navigation-bar/specs
+ */
+declare const NavigationBar: React$1.ForwardRefExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Material Design 3 Navigation Bar Item (Layer 3).
+ *
+ * Renders a single destination item within a `NavigationBar`. Handles:
+ * - Active indicator pill (`rounded-full`, animated with MD3 motion tokens)
+ * - Icon slot (24dp, always visible)
+ * - Badge (dot, numeric count, 999+ truncation)
+ * - Label (hidden in `hideLabels` mode)
+ * - MD3 state layers (hover `opacity-8`, pressed `opacity-12`)
+ * - Ripple effect via `useRipple`
+ * - Focus ring via `data-focus-visible`
+ *
+ * Used internally by `NavigationBar`. Can also be composed with
+ * `HeadlessNavigationBarItem` for advanced customization.
+ *
+ * **Future — Navigation Rail:**
+ * At wider viewports, a NavigationBar may transition to a Navigation Rail.
+ * This is a separate component tracked as a future Phase 5+ item.
+ *
+ * @example
+ * ```tsx
+ * // Used standalone (advanced consumer with HeadlessNavigationBar)
+ * <NavigationBarItem
+ *   itemKey="home"
+ *   icon={<HomeIcon />}
+ *   label="Home"
+ *   isActive
+ * />
+ * ```
+ */
+declare const NavigationBarItem: React$1.ForwardRefExoticComponent<NavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Headless Navigation Bar (Layer 2).
+ *
+ * Renders an accessible `<nav role="navigation">` landmark wrapping a
+ * `<div role="tablist">`. Provides keyboard navigation (Arrow Left/Right,
+ * Home, End) and full ARIA semantics via React Aria's `useTabList`.
+ *
+ * All item accessibility is handled by `HeadlessNavigationBarItem`.
+ *
+ * Use this component when you need complete visual control beyond what the
+ * styled `NavigationBar` provides.
+ *
+ * @example
+ * ```tsx
+ * <HeadlessNavigationBar
+ *   items={items}
+ *   defaultSelectedKey="home"
+ *   aria-label="Main navigation"
+ *   renderItem={(config) => (
+ *     <HeadlessNavigationBarItem key={config.key} itemKey={config.key}>
+ *       {config.icon}
+ *       <span>{config.label}</span>
+ *     </HeadlessNavigationBarItem>
+ *   )}
+ * />
+ * ```
+ */
+declare const HeadlessNavigationBar: React$1.ForwardRefExoticComponent<HeadlessNavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+/**
+ * Headless Navigation Bar Item (Layer 2).
+ *
+ * Renders an accessible `<button role="tab">` using React Aria's `useTab`.
+ * Provides `aria-selected`, `aria-disabled`, roving `tabIndex`, and
+ * focus management via `useFocusRing`.
+ *
+ * Must be rendered inside `HeadlessNavigationBar`.
+ *
+ * @example
+ * ```tsx
+ * <HeadlessNavigationBarItem itemKey="home" className="my-item">
+ *   <HomeIcon aria-hidden />
+ *   <span>Home</span>
+ * </HeadlessNavigationBarItem>
+ * ```
+ */
+declare const HeadlessNavigationBarItem: React$1.ForwardRefExoticComponent<HeadlessNavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Structural variant of the Navigation Drawer.
+ *
+ * - `standard` — inline `<nav>` landmark; no overlay or focus trap; supports
+ *   controlled `open` prop for collapsible layouts.
+ * - `modal` — overlay dialog with scrim backdrop, slide-in animation,
+ *   focus trap, and `Escape` to close.
+ */
+type DrawerVariant = "standard" | "modal";
+/**
+ * Material Design 3 Navigation Drawer props.
+ *
+ * Supports two structural variants — Standard (inline, permanently visible or
+ * togglable) and Modal (overlay with scrim and focus trap).
+ *
+ * @example
+ * ```tsx
+ * // Standard variant
+ * <Drawer variant="standard" open={open} onOpenChange={setOpen} aria-label="App navigation">
+ *   <DrawerItem label="Home" isActive />
+ *   <DrawerItem label="Settings" />
+ * </Drawer>
+ *
+ * // Modal variant with trigger
+ * <Drawer variant="modal" open={open} onOpenChange={setOpen} aria-label="App navigation">
+ *   <DrawerItem label="Home" isActive />
+ *   <DrawerSection header="Account">
+ *     <DrawerItem label="Profile" />
+ *   </DrawerSection>
+ * </Drawer>
+ * ```
+ */
+interface DrawerProps extends AriaDialogProps {
+    /**
+     * Structural variant — drives which React Aria hooks and DOM structure are used.
+     * @default 'standard'
+     */
+    variant?: DrawerVariant;
+    /**
+     * Controlled open state. Pair with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the open state changes (e.g. Escape key, scrim click).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Accessible label for the drawer landmark/dialog. Required.
+     *
+     * @example "App navigation"
+     */
+    "aria-label": string;
+    /**
+     * Drawer content — typically `DrawerItem` and `DrawerSection` elements.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes merged onto the drawer panel element.
+     */
+    className?: string;
+    /**
+     * Disable ripple effect on all items within the drawer.
+     * @default false
+     */
+    disableRipple?: boolean;
+}
+/**
+ * Material Design 3 Navigation Drawer Item props.
+ *
+ * Renders as `<a>` when `href` is provided (using `useLink`), or as `<button>`
+ * when no `href` is provided (using `useButton`).
+ *
+ * @example
+ * ```tsx
+ * // Button-based item (no href)
+ * <DrawerItem
+ *   icon={<HomeIcon />}
+ *   label="Home"
+ *   isActive
+ *   onPress={() => setPage('home')}
+ * />
+ *
+ * // Link-based item (with href)
+ * <DrawerItem href="/settings" icon={<SettingsIcon />} label="Settings" />
+ *
+ * // With badge
+ * <DrawerItem label="Inbox" badge={<span>3</span>} />
+ *
+ * // Disabled
+ * <DrawerItem label="Disabled" isDisabled />
+ * ```
+ */
+interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href"> {
+    /**
+     * Optional URL — when provided, renders the item as `<a>` using `useLink`.
+     * When absent, renders as `<button>` using `useButton`.
+     */
+    href?: string;
+    /**
+     * Optional leading icon (24dp).
+     */
+    icon?: ReactNode;
+    /**
+     * Visible label text. Required.
+     */
+    label: string;
+    /**
+     * Optional trailing badge or secondary indicator element.
+     */
+    badge?: ReactNode;
+    /**
+     * Optional secondary descriptive text rendered below the label.
+     */
+    secondaryText?: string;
+    /**
+     * When `true`, marks this item as the active destination.
+     * Applies `aria-current="page"`, active indicator background, and
+     * `text-on-secondary-container`.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Disable ripple effect on this specific item.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes merged via `cn()`.
+     */
+    className?: string;
+}
+/**
+ * Material Design 3 Navigation Drawer Section props.
+ *
+ * Groups related `DrawerItem` elements with an optional header label and
+ * a preceding divider (except the first section).
+ *
+ * @example
+ * ```tsx
+ * <DrawerSection header="Account">
+ *   <DrawerItem label="Profile" />
+ *   <DrawerItem label="Logout" />
+ * </DrawerSection>
+ * ```
+ */
+interface DrawerSectionProps {
+    /**
+     * Optional section header label rendered in `text-title-small`.
+     */
+    header?: string;
+    /**
+     * Section content — typically `DrawerItem` elements.
+     */
+    children: ReactNode;
+    /**
+     * When `true`, renders a top divider line above the section.
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Additional CSS classes merged via `cn()`.
+     */
+    className?: string;
+}
+/**
+ * Props for the headless Drawer primitive (Layer 2).
+ * Provides behavior and ARIA semantics without visual styling.
+ */
+interface HeadlessDrawerProps {
+    /**
+     * Structural variant — drives which React Aria hooks are used.
+     * @default 'standard'
+     */
+    variant?: DrawerVariant;
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Accessible label. Required.
+     */
+    "aria-label": string;
+    /**
+     * Drawer content.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for the drawer panel element.
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the scrim element (modal variant only).
+     */
+    scrimClassName?: string;
+    /**
+     * Disable ripple on all items.
+     * @default false
+     */
+    disableRipple?: boolean;
+}
+/**
+ * Props for the headless DrawerItem primitive (Layer 2).
+ */
+interface HeadlessDrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href"> {
+    /**
+     * Optional URL — determines `<a>` vs `<button>` rendering.
+     */
+    href?: string;
+    /**
+     * Whether this item is active (`aria-current="page"`).
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Item content.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * Mouse down handler (for ripple effect).
+     */
+    onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Context value shared between HeadlessDrawer and its children.
+ * @internal
+ */
+interface DrawerContextValue {
+    /** Whether the drawer is currently open. */
+    isOpen: boolean;
+    /** Callback to close the drawer. */
+    close: () => void;
+    /** Whether ripple is disabled for all items. */
+    disableRipple: boolean;
+}
+
+/**
+ * Material Design 3 Navigation Drawer (Layer 3: Styled).
+ *
+ * Supports two structural variants driven by the `variant` prop:
+ *
+ * - **`standard`** — Inline `<nav>` landmark. Permanently visible or
+ *   collapsible via controlled `open` prop. No overlay or focus trap.
+ *   Surface: `bg-surface-container-low`.
+ *
+ * - **`modal`** — Overlay dialog with scrim backdrop, slide-in animation,
+ *   focus trap, and `Escape` to close.
+ *   Surface: `bg-surface-container`, `shadow-elevation-1`.
+ *
+ * Both variants:
+ * - `role="navigation"` on the outer wrapper
+ * - `rounded-r-xl` (28px per MD3 shape extra-large on right side only)
+ * - Slide-in animation: `translate-x` driven by MD3 motion tokens
+ * - `w-drawer` (360dp per MD3 spec)
+ *
+ * Modal-only:
+ * - `role="dialog"` + `aria-modal="true"` on the panel
+ * - `FocusScope` containing focus + restoring on close
+ * - `usePreventScroll` to lock body scroll
+ * - Scrim: `bg-scrim opacity-32` — click closes drawer
+ * - `Escape` key closes drawer
+ *
+ * @example
+ * ```tsx
+ * // Standard variant (collapsible sidebar)
+ * <Drawer
+ *   variant="standard"
+ *   open={sidebarOpen}
+ *   onOpenChange={setSidebarOpen}
+ *   aria-label="App navigation"
+ * >
+ *   <DrawerItem icon={<HomeIcon />} label="Home" isActive />
+ *   <DrawerSection header="Settings" showDivider>
+ *     <DrawerItem icon={<SettingsIcon />} label="Preferences" />
+ *   </DrawerSection>
+ * </Drawer>
+ *
+ * // Modal variant (overlay)
+ * <Drawer
+ *   variant="modal"
+ *   open={drawerOpen}
+ *   onOpenChange={setDrawerOpen}
+ *   aria-label="App navigation"
+ * >
+ *   <DrawerItem label="Home" isActive />
+ *   <DrawerItem label="Inbox" badge={<span>5</span>} />
+ * </Drawer>
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-drawer/overview
+ */
+declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Material Design 3 Navigation Drawer Item (Layer 3: Styled).
+ *
+ * Renders a navigation destination row following MD3 Navigation Drawer specs.
+ * Uses `HeadlessDrawerItem` for behavior and accessibility, CVA for variants.
+ *
+ * Renders as `<a>` when `href` is provided, `<button>` otherwise.
+ *
+ * Features:
+ * - Active indicator: `bg-secondary-container` / `text-on-secondary-container`
+ * - `aria-current="page"` on active item
+ * - Ripple effect on interaction
+ * - Hover/focus/pressed state layers (MD3 spec: 8% / 12%)
+ * - Optional leading icon (24dp slot)
+ * - Optional trailing badge or secondary text
+ * - Disabled state: `opacity-38`, non-interactive
+ *
+ * @example
+ * ```tsx
+ * // Active item with icon
+ * <DrawerItem icon={<HomeIcon />} label="Home" isActive onPress={() => navigate('/')} />
+ *
+ * // Link item
+ * <DrawerItem href="/settings" icon={<SettingsIcon />} label="Settings" />
+ *
+ * // Item with badge
+ * <DrawerItem label="Inbox" badge={<span>3</span>} />
+ *
+ * // Disabled
+ * <DrawerItem label="Disabled Feature" isDisabled />
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const DrawerItem: React$1.ForwardRefExoticComponent<DrawerItemProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Material Design 3 Navigation Drawer Section (Layer 3: Styled).
+ *
+ * Groups related `DrawerItem` elements with an optional header label and
+ * a horizontal divider. Follows MD3 Navigation Drawer spec for section
+ * grouping and typography.
+ *
+ * Features:
+ * - Optional header label: `text-title-small text-on-surface-variant`
+ * - Optional top divider: `border-outline-variant`
+ * - Semantic `<hr role="separator">` for the divider
+ *
+ * @example
+ * ```tsx
+ * // Section with header and divider
+ * <DrawerSection header="Account" showDivider>
+ *   <DrawerItem icon={<ProfileIcon />} label="Profile" />
+ *   <DrawerItem icon={<LogoutIcon />} label="Logout" />
+ * </DrawerSection>
+ *
+ * // Section without header (just a visual group)
+ * <DrawerSection showDivider>
+ *   <DrawerItem label="Help" />
+ * </DrawerSection>
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const DrawerSection: React$1.ForwardRefExoticComponent<DrawerSectionProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Headless Navigation Drawer (Layer 2).
+ *
+ * Provides all behavior and ARIA semantics without any visual styling.
+ * Renders two distinct DOM structures based on the `variant` prop:
+ *
+ * - **`standard`**: `<nav role="navigation">` — no overlay, no focus trap
+ * - **`modal`**: `<nav role="navigation">` containing a `FocusScope`-wrapped
+ *   `<div role="dialog" aria-modal="true">` with scrim overlay
+ *
+ * React Aria hooks used:
+ * - `useDialog` — `role="dialog"`, `aria-modal`, `aria-label` on modal panel
+ * - `useOverlay` — dismiss on Escape key and outside click (modal)
+ * - `usePreventScroll` — locks body scroll when modal is open
+ * - `FocusScope` — focus trap + restoreFocus when modal closes
+ * - `useOverlayTriggerState` — open/close state management
+ *
+ * @example
+ * ```tsx
+ * <HeadlessDrawer variant="modal" open aria-label="Navigation">
+ *   <HeadlessDrawerItem onPress={() => {}}>Home</HeadlessDrawerItem>
+ * </HeadlessDrawer>
+ * ```
+ */
+declare const HeadlessDrawer: React__default.ForwardRefExoticComponent<HeadlessDrawerProps & React__default.RefAttributes<HTMLElement>>;
+/**
+ * Headless Navigation Drawer Item (Layer 2).
+ *
+ * Renders as:
+ * - `<a>` using `useLink` when `href` is provided
+ * - `<button>` using `useButton` when no `href`
+ *
+ * Applies `aria-current="page"` when `isActive` is true.
+ * Uses `useFocusRing` for visible keyboard focus.
+ *
+ * @example
+ * ```tsx
+ * // Button-based item
+ * <HeadlessDrawerItem onPress={() => navigate('home')} isActive>
+ *   Home
+ * </HeadlessDrawerItem>
+ *
+ * // Link-based item
+ * <HeadlessDrawerItem href="/settings">
+ *   Settings
+ * </HeadlessDrawerItem>
+ * ```
+ */
+declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<HeadlessDrawerItemProps & React__default.RefAttributes<HTMLElement>>;
+
+export { AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Drawer, type DrawerContextValue, DrawerItem, type DrawerItemProps, type DrawerProps, DrawerSection, type DrawerSectionProps, type DrawerVariant, FAB, type FABColor, FABHeadless, type FABHeadlessProps, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, STATE_LAYER_OPACITY, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, type TabItem, type TabLayout, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type TypographyProperty, type TypographyStyleObject, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };