@tinybigui/react 0.23.0 → 0.24.0

package/dist/index.d.ts

@@ -3680,6 +3680,22 @@ declare const HeadlessNavigationBar: React$1.ForwardRefExoticComponent<HeadlessN
  */
 declare const HeadlessNavigationBarItem: React$1.ForwardRefExoticComponent<HeadlessNavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Animation lifecycle states for the modal drawer.
+ *
+ * Used by the animation state machine in `HeadlessDrawer` to drive
+ * enter/exit CSS animations without immediately unmounting the portal.
+ *
+ * ```
+ * entering → visible → exiting → exited
+ * ```
+ *
+ * - `entering` — panel is mounted but invisible (pre-animation frame)
+ * - `visible`  — entry animation fires (`animate-md-slide-in-left`)
+ * - `exiting`  — exit animation fires (`animate-md-slide-out-left`)
+ * - `exited`   — portal gate unmounts the element
+ */
+type DrawerAnimationState = "entering" | "visible" | "exiting" | "exited";
 /**
  * Structural variant of the Navigation Drawer.
  *
@@ -3689,16 +3705,6 @@ declare const HeadlessNavigationBarItem: React$1.ForwardRefExoticComponent<Headl
  *   focus trap, and `Escape` to close.
  */
 type DrawerVariant = "standard" | "modal";
-/**
- * Structured badge configuration for `DrawerItem`.
- *
- * When provided instead of a `ReactNode`, the `DrawerItem` renders a `Badge`
- * component automatically.
- */
-interface DrawerItemBadgeConfig {
-    /** Numeric count to display. Omit for a dot indicator. */
-    count?: number;
-}
 /**
  * Material Design 3 Navigation Drawer props.
  *
@@ -3709,6 +3715,7 @@ interface DrawerItemBadgeConfig {
  * ```tsx
  * // Standard variant
  * <Drawer variant="standard" open={open} onOpenChange={setOpen} aria-label="App navigation">
+ *   <DrawerHeadline>Mail</DrawerHeadline>
  *   <DrawerItem label="Home" isActive />
  *   <DrawerItem label="Settings" />
  * </Drawer>
@@ -3716,8 +3723,8 @@ interface DrawerItemBadgeConfig {
  * // 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 header="Labels">
+ *     <DrawerItem label="Promotions" />
  *   </DrawerSection>
  * </Drawer>
  * ```
@@ -3748,7 +3755,8 @@ interface DrawerProps extends AriaDialogProps {
      */
     "aria-label": string;
     /**
-     * Drawer content — typically `DrawerItem` and `DrawerSection` elements.
+     * Drawer content — typically `DrawerHeadline`, `DrawerItem`, and
+     * `DrawerSection` elements.
      */
     children: ReactNode;
     /**
@@ -3760,13 +3768,6 @@ interface DrawerProps extends AriaDialogProps {
      * @default false
      */
     disableRipple?: boolean;
-    /**
-     * When `true`, narrows the drawer to 80dp (`w-20`) and hides all
-     * `DrawerItem` labels. Each item gains a native `title` tooltip.
-     * Prep step for `NavigationRail`.
-     * @default false
-     */
-    iconOnly?: boolean;
 }
 /**
  * Material Design 3 Navigation Drawer Item props.
@@ -3787,8 +3788,8 @@ interface DrawerProps extends AriaDialogProps {
  * // Link-based item (with href)
  * <DrawerItem href="/settings" icon={<SettingsIcon />} label="Settings" />
  *
- * // With badge
- * <DrawerItem label="Inbox" badge={<span>3</span>} />
+ * // With badge count (MD3 "Badge label text" anatomy element)
+ * <DrawerItem label="Inbox" badge={24} />
  *
  * // Disabled
  * <DrawerItem label="Disabled" isDisabled />
@@ -3802,6 +3803,8 @@ interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href">
     href?: string;
     /**
      * Optional leading icon (24dp).
+     * Color inherits from item state: `on-surface-variant` inactive,
+     * `on-secondary-container` active.
      */
     icon?: ReactNode;
     /**
@@ -3809,26 +3812,21 @@ interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href">
      */
     label: string;
     /**
-     * Optional trailing badge.
+     * Optional trailing badge label text (MD3 anatomy element 5).
+     *
+     * Rendered as plain inline text that adapts its color to the item's
+     * active/inactive state — `on-surface-variant` when inactive,
+     * `on-secondary-container` when active.
      *
-     * Accepts either a `ReactNode` rendered as-is in the trailing slot,
-     * or a `DrawerItemBadgeConfig` object which renders a `Badge` component
-     * with `count` and `color`.
+     * Pass a `number` for notification counts or a `string` for arbitrary labels.
      *
      * @example
      * ```tsx
-     * // ReactNode badge (backward compatible)
-     * <DrawerItem label="Inbox" badge={<span>3</span>} />
-     *
-     * // Config badge (renders Badge component using MD3 error color role)
-     * <DrawerItem label="Inbox" badge={{ count: 3 }} />
+     * <DrawerItem label="Inbox" badge={24} />
+     * <DrawerItem label="Beta" badge="NEW" />
      * ```
      */
-    badge?: ReactNode | DrawerItemBadgeConfig;
-    /**
-     * Optional secondary descriptive text rendered below the label.
-     */
-    secondaryText?: string;
+    badge?: number | string;
     /**
      * When `true`, marks this item as the active destination.
      * Applies `aria-current="page"`, active indicator background, and
@@ -3846,6 +3844,22 @@ interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href">
      */
     className?: string;
 }
+/**
+ * Material Design 3 Navigation Drawer Headline props.
+ *
+ * Renders the header text for the drawer — MD3 anatomy element 2.
+ *
+ * @example
+ * ```tsx
+ * <DrawerHeadline>Mail</DrawerHeadline>
+ * ```
+ */
+interface DrawerHeadlineProps {
+    /** Headline text content. */
+    children: ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+}
 /**
  * Material Design 3 Navigation Drawer Section props.
  *
@@ -3854,9 +3868,9 @@ interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href">
  *
  * @example
  * ```tsx
- * <DrawerSection header="Account">
- *   <DrawerItem label="Profile" />
- *   <DrawerItem label="Logout" />
+ * <DrawerSection header="Labels" showDivider>
+ *   <DrawerItem label="Promotions" />
+ *   <DrawerItem label="Social" />
  * </DrawerSection>
  * ```
  */
@@ -3919,15 +3933,35 @@ interface HeadlessDrawerProps {
      */
     scrimClassName?: string;
     /**
-     * Disable ripple on all items.
-     * @default false
+     * Returns the animation CSS class string for a given `DrawerAnimationState`.
+     *
+     * Applied to the modal **panel** element. Provided by the styled `Drawer` layer
+     * via `drawerAnimationVariants`. Returns `""` when `useReducedMotion()` is true.
+     *
+     * @example
+     * ```ts
+     * getAnimationClassName={(state) => drawerAnimationVariants({ animationState: state })}
+     * ```
      */
-    disableRipple?: boolean;
+    getAnimationClassName?: (state: DrawerAnimationState) => string;
     /**
-     * Icon-only compact mode — hides labels and narrows the rail.
+     * Returns the animation CSS class string for the modal **scrim** element.
+     *
+     * Separate from `getAnimationClassName` so the scrim can fade while the panel
+     * slides. Provided via `drawerScrimAnimationVariants`. Returns `""` under
+     * reduced motion.
+     *
+     * @example
+     * ```ts
+     * getScrimAnimationClassName={(state) => drawerScrimAnimationVariants({ animationState: state })}
+     * ```
+     */
+    getScrimAnimationClassName?: (state: DrawerAnimationState) => string;
+    /**
+     * Disable ripple on all items.
      * @default false
      */
-    iconOnly?: boolean;
+    disableRipple?: boolean;
 }
 /**
  * Props for the headless DrawerItem primitive (Layer 2).
@@ -3955,7 +3989,7 @@ interface HeadlessDrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions,
      */
     onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Native tooltip text for icon-only mode.
+     * Native tooltip text.
      */
     title?: string | undefined;
 }
@@ -3970,8 +4004,6 @@ interface DrawerContextValue {
     close: () => void;
     /** Whether ripple is disabled for all items. */
     disableRipple: boolean;
-    /** Whether the drawer is in icon-only compact mode. */
-    iconOnly: boolean;
 }
 
 /**
@@ -3981,24 +4013,24 @@ interface DrawerContextValue {
  *
  * - **`standard`** — Inline `<nav>` landmark. Permanently visible or
  *   collapsible via controlled `open` prop. No overlay or focus trap.
- *   Surface: `bg-surface-container-low`.
+ *   Surface: `bg-surface-container-low`, no elevation, square trailing edge.
+ *   Slide motion: `transition-transform` + spring-standard-default-spatial
+ *   (500ms, no overshoot) driven by translate-x via `drawerVariants`.
  *
- * - **`modal`** — Overlay dialog with scrim backdrop, slide-in animation,
+ * - **`modal`** — Portal overlay with animation state machine, scrim backdrop,
  *   focus trap, and `Escape` to close.
- *   Surface: `bg-surface-container`, `shadow-elevation-1`.
+ *   Surface: `bg-surface-container-low` + `shadow-elevation-1`.
+ *   Shape: `rounded-r-lg` (16dp trailing corner per MD3).
+ *   Motion: `animate-md-slide-in-left` / `animate-md-slide-out-left` via
+ *   `drawerAnimationVariants` + `drawerScrimAnimationVariants`.
  *
  * 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) or `w-20` (80dp) in `iconOnly` mode
+ * - `w-drawer` (360dp)
  *
- * 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
+ * Reduced motion: when `prefers-reduced-motion: reduce` is active, all
+ * animation classes are suppressed (`getAnimationClassName` returns `""`
+ * and `transition-none` is appended to the standard variant panel).
  *
  * @example
  * ```tsx
@@ -4009,14 +4041,15 @@ interface DrawerContextValue {
  *   onOpenChange={setSidebarOpen}
  *   aria-label="App navigation"
  * >
+ *   <DrawerHeadline>Mail</DrawerHeadline>
  *   <DrawerItem icon={<HomeIcon />} label="Home" isActive />
  *   <DrawerSection header="Settings" showDivider>
  *     <DrawerItem icon={<SettingsIcon />} label="Preferences" />
  *   </DrawerSection>
  * </Drawer>
  *
- * // Icon-only mode (prep for NavigationRail)
- * <Drawer variant="standard" open iconOnly aria-label="App navigation">
+ * // Modal variant
+ * <Drawer variant="modal" open={open} onOpenChange={setOpen} aria-label="App navigation">
  *   <DrawerItem icon={<HomeIcon />} label="Home" isActive />
  * </Drawer>
  * ```
@@ -4028,28 +4061,31 @@ declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Rea
 /**
  * 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.
+ * Architecture: Variants vs States (component-variants.mdc)
+ * - Root is `group/draweritem` host; all slots read state via
+ *   `group-data-[x]/draweritem:` selectors.
+ * - Interaction states tracked in this styled layer via React Aria hooks
+ *   and emitted as `data-*` attributes on the root via `getInteractionDataAttributes`.
+ * - `data-active` is a content flag set explicitly (not via the shared helper).
+ *
+ * Slot z-order:
+ *   activeIndicator  z-0    — `bg-secondary-container` pill
+ *   stateLayer       z-[1]  — hover (8%) / press (10%) opacity overlay
+ *   focusRing        z-[2]  — keyboard focus outline (inset, `-outline-offset-2`)
+ *   ripple           z-[3]  — press ripple feedback
+ *   icon             z-10   — leading icon (24dp)
+ *   label            z-10   — label text
+ *   badge            z-10   — trailing badge text
  *
  * Renders as `<a>` when `href` is provided, `<button>` otherwise.
  *
- * Features:
- * - Active indicator: 336dp pill, `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 — `ReactNode` or `{ count }` config
- * - Icon-only mode: label hidden, `title` tooltip via `DrawerIconOnlyContext`
- * - Disabled state: `opacity-38`, non-interactive
- *
  * @example
  * ```tsx
  * // Active item with icon
  * <DrawerItem icon={<HomeIcon />} label="Home" isActive onPress={() => navigate('/')} />
  *
- * // Item with Badge config (uses MD3 error color role)
- * <DrawerItem label="Inbox" badge={{ count: 5 }} />
+ * // Item with badge count
+ * <DrawerItem label="Inbox" badge={24} />
  *
  * // Disabled
  * <DrawerItem label="Disabled Feature" isDisabled />
@@ -4057,7 +4093,7 @@ declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Rea
  *
  * @see https://m3.material.io/components/navigation-drawer/specs
  */
-declare const DrawerItem: React__default.ForwardRefExoticComponent<DrawerItemProps & React__default.RefAttributes<HTMLElement>>;
+declare const DrawerItem: React$1.ForwardRefExoticComponent<DrawerItemProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
  * Internal props extending the public DrawerSectionProps.
@@ -4084,9 +4120,9 @@ interface DrawerSectionInternalProps extends DrawerSectionProps {
  * @example
  * ```tsx
  * // Section with header and divider
- * <DrawerSection header="Account" showDivider>
- *   <DrawerItem icon={<ProfileIcon />} label="Profile" />
- *   <DrawerItem icon={<LogoutIcon />} label="Logout" />
+ * <DrawerSection header="Labels" showDivider>
+ *   <DrawerItem icon={<LabelIcon />} label="Promotions" />
+ *   <DrawerItem icon={<LabelIcon />} label="Social" />
  * </DrawerSection>
  *
  * // Section without header (just a visual group)
@@ -4100,31 +4136,56 @@ interface DrawerSectionInternalProps extends DrawerSectionProps {
 declare const DrawerSection: React$1.ForwardRefExoticComponent<DrawerSectionInternalProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Icon-only mode context consumed by `DrawerItem` to hide labels
- * and apply `title` attributes.
+ * Material Design 3 Navigation Drawer Headline (Layer 3: Styled).
+ *
+ * MD3 anatomy element 2 — the header text displayed at the top of the drawer,
+ * typically the app name or primary section label.
+ *
+ * Typography: `text-title-small`
+ * Color:      `text-on-surface-variant`
+ *
+ * @example
+ * ```tsx
+ * <Drawer aria-label="App navigation">
+ *   <DrawerHeadline>Mail</DrawerHeadline>
+ *   <DrawerItem label="Inbox" isActive />
+ * </Drawer>
+ * ```
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#anatomy
+ */
+declare const DrawerHeadline: React$1.ForwardRefExoticComponent<DrawerHeadlineProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Context shared between HeadlessDrawer and its children.
  * @internal
  */
-declare const DrawerIconOnlyContext: React__default.Context<boolean>;
+declare const DrawerContext: React__default.Context<DrawerContextValue | null>;
 /**
  * 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
+ * - **`standard`**: `<nav role="navigation">` — no overlay, no focus trap,
+ *   translate-x driven by the `open` prop (spring-standard-spatial via CVA).
  *
- * 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
+ * - **`modal`**: portal to `document.body` with animation state machine
+ *   (`entering → visible → exiting → exited`), `createPortal` + portal gate,
+ *   `FocusScope`, `useDialog`, `useOverlay`, `usePreventScroll`, scrim, and
+ *   `data-animation-state` on both the panel and scrim elements.
+ *
+ * React Aria hooks used (modal):
+ * - `useDialog`              — `role="dialog"`, `aria-modal`, `aria-label`
+ * - `useOverlay`             — Escape key + outside-click dismissal
+ * - `usePreventScroll`       — locks body scroll when panel is mounted
+ * - `FocusScope`             — focus trap + restoreFocus on close
  * - `useOverlayTriggerState` — open/close state management
  *
  * @example
  * ```tsx
- * <HeadlessDrawer variant="modal" open aria-label="Navigation">
+ * <HeadlessDrawer variant="modal" open aria-label="Navigation"
+ *   getAnimationClassName={(s) => drawerAnimationVariants({ animationState: s })}>
  *   <HeadlessDrawerItem onPress={() => {}}>Home</HeadlessDrawerItem>
  * </HeadlessDrawer>
  * ```
@@ -4133,12 +4194,15 @@ declare const HeadlessDrawer: React__default.ForwardRefExoticComponent<HeadlessD
 /**
  * Headless Navigation Drawer Item (Layer 2).
  *
+ * Thin primitive — handles only behavior and ARIA semantics. All interaction
+ * state tracking (hover, focus-visible, pressed) and data-* attributes live
+ * in the styled layer (DrawerItem), mirroring the ButtonHeadless pattern.
+ *
  * 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
@@ -4155,6 +4219,246 @@ declare const HeadlessDrawer: React__default.ForwardRefExoticComponent<HeadlessD
  */
 declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<HeadlessDrawerItemProps & React__default.RefAttributes<HTMLElement>>;
 
+/**
+ * Material Design 3 Navigation Drawer container variants (CVA).
+ *
+ * Architecture: Variants vs States (component-variants.mdc)
+ * - CVA holds design-time structure only (variant, open).
+ * - No interaction states in CVA — they are driven by data-* on the root.
+ *
+ * Specification:
+ *   Width:    360dp (`w-drawer`)
+ *   Height:   100dvh (`h-full`)
+ *   Padding:  12dp sides/top/bottom (`px-3 py-3`)
+ *   Surface:  `bg-surface-container-low` (both variants per MD3 color token)
+ *   Elevation: standard = none; modal = `shadow-elevation-1`
+ *   Shape:
+ *     standard = square trailing edge (`rounded-none`) — panel is flush with the
+ *                screen left edge and has no exposed trailing corner.
+ *     modal    = 16dp trailing corner (`rounded-r-lg`, MD3 corner-large) — the
+ *                exposed right edge is rounded when the drawer overlays content.
+ *
+ * Standard slide motion (spatial, on-screen translate):
+ *   Spring-standard-default-spatial (500ms, no overshoot) per md3-motion.mdc.
+ *   "enter = translate-x-0, exit = -translate-x-full"
+ *   Applied with `transition-transform` + spring tokens.
+ *   Reduced motion: handled by caller appending `transition-none`.
+ *
+ * Modal motion (enters/exits the screen):
+ *   Uses the animate-md-slide-in-left / animate-md-slide-out-left composite
+ *   utilities applied via `drawerAnimationVariants` + the presence state machine
+ *   in HeadlessDrawer. Container itself stays fixed; panel is portalled.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const drawerVariants: (props?: ({
+    variant?: "standard" | "modal" | null | undefined;
+    open?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Animation state CVA for the MODAL drawer panel.
+ *
+ * Mirrors the `bottomSheetAnimationVariants` pattern exactly.
+ * Applied by `Drawer.tsx` via a `getAnimationClassName` callback that is
+ * gated on `useReducedMotion()`.
+ *
+ * Motion tokens (drawer is a large screen-level element, left-edge):
+ *   Enter: `animate-md-slide-in-left`  — standard-default-spatial (500ms)
+ *   Exit:  `animate-md-slide-out-left` — emphasized-accelerate   (200ms)
+ *
+ * State machine: entering → visible → exiting → exited
+ *   entering: mount frame, panel is transparent/off-screen (no animation yet)
+ *   visible:  entry animation fires
+ *   exiting:  exit animation fires; `onTransitionEnd` + fallback timer → exited
+ *   exited:   portal gate removes the element
+ *
+ * @see packages/react/src/components/BottomSheet/BottomSheet.variants.ts
+ * @see https://m3.material.io/components/navigation-drawer/specs — Motion
+ */
+declare const drawerAnimationVariants: (props?: ({
+    animationState?: "visible" | "entering" | "exiting" | "exited" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Scrim animation CVA — controls the modal backdrop fade via CSS transition.
+ *
+ * Uses `transition-opacity` (an effects property — no overshoot) rather than
+ * `animate-md-fade-*` keyframes so that the opacity change is a plain
+ * CSS transition from one state to another, avoiding a `tailwind-merge`
+ * conflict between the base `opacity-32` and the keyframe `opacity-1`.
+ *
+ * Opacity sequence per state:
+ *   entering: opacity-0   (invisible mount frame — transition will start here)
+ *   visible:  opacity-32  (MD3 scrim opacity; CSS transition from 0→32 fires)
+ *   exiting:  opacity-0   (CSS transition from 32→0 fires)
+ *   exited:   opacity-0 + pointer-events-none (portal gate removes element)
+ *
+ * NOTE: the base `drawerScrimVariants` must NOT include `opacity-32` so that
+ * tailwind-merge does not collapse it with these per-state opacity classes.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs — Scrim callout 9
+ */
+declare const drawerScrimAnimationVariants: (props?: ({
+    animationState?: "visible" | "entering" | "exiting" | "exited" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Material Design 3 Navigation Drawer item root variants (CVA).
+ *
+ * Architecture: root is the `group/draweritem` host. It owns layout, shape,
+ * and cursor. Colors (content color) live here via self-targeting `data-[x]:`
+ * selectors since the root IS the group host.
+ *
+ * Slot z-order:
+ *   activeIndicator  z-0    — secondary-container pill background
+ *   stateLayer       z-[1]  — hover/press opacity overlay
+ *   focusRing        z-[2]  — keyboard focus outline
+ *   ripple           z-[3]  — press ripple feedback
+ *   content          z-10   — icon, label, badge
+ *
+ * Specification:
+ *   Height:     56dp (`h-14`)
+ *   Shape:      `rounded-full` (pill)
+ *   Padding:    16dp leading (`pl-4`), 24dp trailing (`pr-6`)
+ *   Gap:        12dp icon-to-label (`gap-3`)
+ *   Typography: Label Large — 14sp / 500 / 0.1px tracking
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const drawerItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Active indicator — secondary-container pill background.
+ *
+ * Fills the item shape (`inset-0 rounded-[inherit]`) and uses opacity
+ * to toggle visibility when the item becomes active. Separating this from
+ * the root background lets the state layer sit above it at z-[1].
+ *
+ * Color: `bg-secondary-container` per MD3 color token (callout 5).
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const drawerItemActiveIndicatorVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * State layer — absolute inset overlay that transitions opacity on
+ * hover / focus-visible / press interaction states.
+ *
+ * Color mapping per MD3 spec:
+ *   Inactive: `bg-on-surface-variant` (callout 2/8)
+ *   Active:   `bg-on-secondary-container` (callout 3/6)
+ *
+ * State-layer opacities per MD3 spec:
+ *   Hover:         8%  (opacity-8)
+ *   Focused:       10% (opacity-10)
+ *   Pressed:       10% (opacity-10 — doubled selector wins over hover)
+ *   Hidden when disabled.
+ *
+ * Focus-visible also activates the dedicated focus-ring slot
+ * (drawerItemFocusRingVariants) per WCAG 2.4.7. Both layer + ring are shown
+ * simultaneously, matching the BottomSheet handle and MD3 reference grid.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#states
+ */
+declare const drawerItemStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Focus ring slot — keyboard-focus indicator rendered as an absolute overlay.
+ *
+ * Uses `-outline-offset-2` (inset 2dp) so the outline stays within the pill
+ * shape and does not spill into adjacent items.
+ *
+ * Shown alongside the 10% state layer for full MD3 focus state compliance.
+ * Color: `outline-secondary` per MD3 focus indicator token.
+ * Opacity: 0 at rest → 100% on focus-visible.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#states
+ */
+declare const drawerItemFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Leading icon slot.
+ *
+ * MD3 spec: 24dp × 24dp icon.
+ * Color inherits from the root `text-*` via `currentColor`.
+ * Inactive: `text-on-surface-variant` (via root).
+ * Active:   `text-on-secondary-container` (via root data-[active]).
+ * Disabled: explicit `text-on-surface/38` override (matches Menu icon pattern).
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#anatomy
+ */
+declare const drawerItemIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Label text slot.
+ *
+ * Typography (Label Large — size, weight, tracking) is set on the root via
+ * `drawerItemVariants` and inherited here via cascade.
+ * `z-10` keeps it above the state layer and active indicator overlays.
+ */
+declare const drawerItemLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Trailing badge label text slot.
+ *
+ * MD3 anatomy element 5 — "Badge label text".
+ * Rendered as plain inline text, colored by the item's active/inactive state
+ * via the root's inherited text color.
+ *
+ * Typography: Label Large — size via `text-label-large`, weight and tracking
+ * set explicitly so they are not lost when the element is not a block-level
+ * inheritor in all browsers.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#anatomy
+ */
+declare const drawerItemBadgeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Material Design 3 Navigation Drawer Headline variants (CVA).
+ *
+ * MD3 anatomy element 2 — the header text at the top of the drawer.
+ * Typography: Title Small — 14sp / 500 / 0.1px tracking.
+ * Color: `text-on-surface-variant`.
+ * Padding: 16dp top (pt-4), 16dp horizontal (px-4), 4dp bottom (pb-1).
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs#anatomy
+ */
+declare const drawerHeadlineVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Modal scrim overlay base styles (CVA).
+ *
+ * Covers the full viewport behind the modal drawer.
+ * Clicking the scrim closes the drawer.
+ *
+ * Color: `bg-scrim` at `opacity-32` per MD3 spec callout 9.
+ *
+ * Enter/exit fade is applied via `drawerScrimAnimationVariants` by the
+ * animation-state machine in HeadlessDrawer.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const drawerScrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Drawer section container variants (CVA).
+ *
+ * Groups related items with an optional header label and divider.
+ */
+declare const drawerSectionVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Drawer section header variants (CVA).
+ *
+ * Typography: Title Small — 14sp / 500 / 0.1px tracking per MD3 spec.
+ * Color: `text-on-surface-variant`.
+ * Padding: 16dp horizontal (aligned with item icon), 16dp top, 8dp bottom.
+ *
+ * @see https://m3.material.io/components/navigation-drawer/specs
+ */
+declare const drawerSectionHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DrawerVariants = VariantProps<typeof drawerVariants>;
+type DrawerAnimationVariants = VariantProps<typeof drawerAnimationVariants>;
+type DrawerScrimAnimationVariants = VariantProps<typeof drawerScrimAnimationVariants>;
+type DrawerItemVariants = VariantProps<typeof drawerItemVariants>;
+type DrawerItemActiveIndicatorVariants = VariantProps<typeof drawerItemActiveIndicatorVariants>;
+type DrawerItemStateLayerVariants = VariantProps<typeof drawerItemStateLayerVariants>;
+type DrawerItemFocusRingVariants = VariantProps<typeof drawerItemFocusRingVariants>;
+type DrawerItemIconVariants = VariantProps<typeof drawerItemIconVariants>;
+type DrawerItemLabelVariants = VariantProps<typeof drawerItemLabelVariants>;
+type DrawerItemBadgeVariants = VariantProps<typeof drawerItemBadgeVariants>;
+type DrawerHeadlineVariants = VariantProps<typeof drawerHeadlineVariants>;
+type DrawerScrimVariants = VariantProps<typeof drawerScrimVariants>;
+type DrawerSectionVariants = VariantProps<typeof drawerSectionVariants>;
+
 /**
  * Material Design 3 Progress Indicator Component Props
  *
@@ -12399,4 +12703,4 @@ type DateFieldVariants = VariantProps<typeof dateFieldVariants>;
 declare const dateSegmentPlaceholderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type DateSegmentPlaceholderVariants = VariantProps<typeof dateSegmentPlaceholderVariants>;
 
-export { type ActionButtonFocusRingVariants, type ActionButtonSlotProps, type ActionButtonStateLayerVariants, type ActionButtonVariants, type ActionRowVariants, AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, BadgeContent, type BadgeContentProps, BadgeHeadless, type BadgeHeadlessProps, type BadgeProps, type BadgeVariants, BottomSheet, type BottomSheetAnimationState, type BottomSheetAnimationVariants, BottomSheetContext, type BottomSheetContextValue, BottomSheetHandle, type BottomSheetHandleProps, type BottomSheetHandleVariants, BottomSheetHeadless, type BottomSheetHeadlessProps, type BottomSheetProps, type BottomSheetScrimVariants, type BottomSheetVariant, type BottomSheetVariants, Button, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupFocusRingVariants, ButtonGroupHeadless, type ButtonGroupProps, type ButtonGroupRootVariants, type ButtonGroupSelectionMode, type ButtonGroupShape, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarCellComponentProps, type CalendarCellFocusRingVariants, type CalendarCellProps, type CalendarCellStateLayerVariants, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarCoreProps, type CalendarDividerVariants, type CalendarGridProps, type CalendarHeaderVariants, type CalendarSlots, type CalendarTitleIconVariants, type CalendarTitleStateLayerVariants, type CalendarTitleTextVariants, type CalendarTitleVariants, type CalendarView, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardHeadless, type CardHeadlessProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, type CardVariants, Checkbox, type CheckboxProps, Chip, ChipHeadless, type ChipHeadlessProps, type ChipProps, ChipSet, type ChipSetProps, type ChipSurface, type ChipType, type ChipVariants, type ClockDialContainerVariants, type ClockDialNumberVariants, type ClockDialProps, type ClockHandCenterVariants, type ClockHandHandleVariants, type ClockHandProps, type ClockHandTrackVariants, type ClockSelectionMode, DateField, type DateFieldProps, type DateFieldVariants, type DateInputErrorVariants, type DateInputFieldGroupVariants, type DateInputFieldProps, type DateInputFieldVariants, type DateInputLabelVariants, DatePicker, type DatePickerActionsProps, type DatePickerCalendarSlots, type DatePickerContainerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeadlessProps, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerProps, type DatePickerRenderState, type DatePickerVariant, type DateSegmentPlaceholderVariants, type DateSelectionMode, Dialog, DialogActions, type DialogActionsProps, type DialogAnimationState, DialogContent, type DialogContentProps, DialogContext, type DialogContextValue, DialogHeadless, type DialogHeadlessProps, DialogHeadline, type DialogHeadlineProps, type DialogProps, type DialogVariant, Divider, DividerHeadless, type DividerHeadlessProps, type DividerInset, type DividerOrientation, type DividerProps, type DividerVariants, type DockedFieldGroupVariants, type DockedLabelVariants, type DockedTriggerStateLayerVariants, type DockedTriggerVariants, Drawer, type DrawerContextValue, DrawerIconOnlyContext, DrawerItem, type DrawerItemBadgeConfig, type DrawerItemProps, type DrawerProps, DrawerSection, type DrawerSectionProps, type DrawerVariant, FAB, type FABColor, FABHeadless, type FABHeadlessProps, FABMenu, FABMenuContext, type FABMenuContextValue, type FABMenuDirection, FABMenuHeadless, type FABMenuHeadlessProps, FABMenuItem, type FABMenuItemColor, type FABMenuItemFocusRingVariants, type FABMenuItemIconVariants, type FABMenuItemLabelVariants, type FABMenuItemProps, type FABMenuItemStateLayerVariants, type FABMenuItemVariants, type FABMenuListVariants, type FABMenuProps, type FABMenuVariants, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, type HeadlessMenuItemProps, type HeadlessMenuProps, HeadlessMenuSection, type HeadlessMenuSectionProps, HeadlessMenuTrigger, type HeadlessMenuTriggerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, type HeadlineVariants, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, List, type ListDensity, ListHeadless, type ListHeadlessProps, ListItem, ListItemHeadless, ListItemLeading, type ListItemLeadingProps, type ListItemProps, ListItemText, type ListItemTextProps, ListItemTrailing, type ListItemTrailingProps, type ListItemVariants, type ListLeadingType, type ListProps, type ListTrailingType, type ListVariants, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Menu, type MenuContainerVariants, MenuContext, type MenuContextValue, MenuDivider, type MenuDividerProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type ModalDialogVariants, type ModalHeaderVariants, type ModeToggleStateLayerVariants, type ModeToggleVariants, type NavButtonComponentProps, type NavButtonFocusRingVariants, type NavButtonStateLayerVariants, type NavButtonVariants, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, type PopoverVariants, Progress, ProgressHeadless, type ProgressHeadlessProps, type ProgressProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, type RangeCalendarProps, RichTooltip, type RichTooltipProps, type RichTooltipVariants, STATE_LAYER_OPACITY, type ScrimVariants, Search, SearchBar, SearchBarHeadless, type SearchBarHeadlessProps, type SearchBarProps, type SearchLayout, type SearchProps, type SearchStyle, SearchView, SearchViewHeadless, type SearchViewHeadlessProps, type SearchViewProps, Slider, SliderHeadless, type SliderHeadlessProps, type SliderOrientation, type SliderProps, type SliderRangeThumbLabels, type SliderRenderState, type SliderSize, type SliderThumbProps, type SliderThumbState, type SliderVariant, Snackbar, type SnackbarAction, SnackbarContext, type SnackbarContextValue, SnackbarHeadless, type SnackbarHeadlessProps, type SnackbarItem, type SnackbarProps, SnackbarProvider, type SnackbarProviderProps, type SnackbarSeverity, SplitButton, type SplitButtonContainerVariants, type SplitButtonFocusRingVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonIconVariants, type SplitButtonLeadingVariants, type SplitButtonMenuItem, type SplitButtonMenuItemVariantProps, type SplitButtonProps, type SplitButtonSize, type SplitButtonStateLayerVariants, type SplitButtonTrailingVariants, type SplitButtonVariant, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, type SupportingTextVariants, 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 TextFieldVariant, type TimeFormat, type TimeInputFieldProps, type TimeInputFieldVariants, type TimePeriod, TimePicker, type TimePickerActionButtonVariants, type TimePickerActionRowVariants, type TimePickerContainerVariants, TimePickerDial, type TimePickerDialProps, type TimePickerHeadlessProps, type TimePickerHeadlineVariants, TimePickerInput, type TimePickerInputProps, type TimePickerModeToggleVariants, type TimePickerOrientation, type TimePickerProps, type TimePickerRenderState, type TimePickerVariant, type TimeSelectorContainerVariants, type TimeSelectorProps, type TimeSeparatorVariants, type TimeValue, type TitleComponentProps, Tooltip, type TooltipHeadlessProps, TooltipOverlayHeadless, type TooltipPlacement, type TooltipProps, TooltipTrigger, TooltipTriggerHeadless, type TooltipTriggerProps, type TooltipTriggerStyledProps, type TooltipVariant, type TooltipVariants, type TypographyProperty, type TypographyStyleObject, type UseBottomSheetDragOptions, type UseBottomSheetDragReturn, type WeekdayVariants, type YearGridVariants, type YearItemComponentProps, type YearItemFocusRingVariants, type YearItemStateLayerVariants, type YearItemVariants, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { type ActionButtonFocusRingVariants, type ActionButtonSlotProps, type ActionButtonStateLayerVariants, type ActionButtonVariants, type ActionRowVariants, AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, BadgeContent, type BadgeContentProps, BadgeHeadless, type BadgeHeadlessProps, type BadgeProps, type BadgeVariants, BottomSheet, type BottomSheetAnimationState, type BottomSheetAnimationVariants, BottomSheetContext, type BottomSheetContextValue, BottomSheetHandle, type BottomSheetHandleProps, type BottomSheetHandleVariants, BottomSheetHeadless, type BottomSheetHeadlessProps, type BottomSheetProps, type BottomSheetScrimVariants, type BottomSheetVariant, type BottomSheetVariants, Button, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupFocusRingVariants, ButtonGroupHeadless, type ButtonGroupProps, type ButtonGroupRootVariants, type ButtonGroupSelectionMode, type ButtonGroupShape, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarCellComponentProps, type CalendarCellFocusRingVariants, type CalendarCellProps, type CalendarCellStateLayerVariants, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarCoreProps, type CalendarDividerVariants, type CalendarGridProps, type CalendarHeaderVariants, type CalendarSlots, type CalendarTitleIconVariants, type CalendarTitleStateLayerVariants, type CalendarTitleTextVariants, type CalendarTitleVariants, type CalendarView, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardHeadless, type CardHeadlessProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, type CardVariants, Checkbox, type CheckboxProps, Chip, ChipHeadless, type ChipHeadlessProps, type ChipProps, ChipSet, type ChipSetProps, type ChipSurface, type ChipType, type ChipVariants, type ClockDialContainerVariants, type ClockDialNumberVariants, type ClockDialProps, type ClockHandCenterVariants, type ClockHandHandleVariants, type ClockHandProps, type ClockHandTrackVariants, type ClockSelectionMode, DateField, type DateFieldProps, type DateFieldVariants, type DateInputErrorVariants, type DateInputFieldGroupVariants, type DateInputFieldProps, type DateInputFieldVariants, type DateInputLabelVariants, DatePicker, type DatePickerActionsProps, type DatePickerCalendarSlots, type DatePickerContainerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeadlessProps, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerProps, type DatePickerRenderState, type DatePickerVariant, type DateSegmentPlaceholderVariants, type DateSelectionMode, Dialog, DialogActions, type DialogActionsProps, type DialogAnimationState, DialogContent, type DialogContentProps, DialogContext, type DialogContextValue, DialogHeadless, type DialogHeadlessProps, DialogHeadline, type DialogHeadlineProps, type DialogProps, type DialogVariant, Divider, DividerHeadless, type DividerHeadlessProps, type DividerInset, type DividerOrientation, type DividerProps, type DividerVariants, type DockedFieldGroupVariants, type DockedLabelVariants, type DockedTriggerStateLayerVariants, type DockedTriggerVariants, Drawer, type DrawerAnimationState, type DrawerAnimationVariants, DrawerContext, type DrawerContextValue, DrawerHeadline, type DrawerHeadlineProps, type DrawerHeadlineVariants, DrawerItem, type DrawerItemActiveIndicatorVariants, type DrawerItemBadgeVariants, type DrawerItemFocusRingVariants, type DrawerItemIconVariants, type DrawerItemLabelVariants, type DrawerItemProps, type DrawerItemStateLayerVariants, type DrawerItemVariants, type DrawerProps, type DrawerScrimAnimationVariants, type DrawerScrimVariants, DrawerSection, type DrawerSectionProps, type DrawerSectionVariants, type DrawerVariant, type DrawerVariants, FAB, type FABColor, FABHeadless, type FABHeadlessProps, FABMenu, FABMenuContext, type FABMenuContextValue, type FABMenuDirection, FABMenuHeadless, type FABMenuHeadlessProps, FABMenuItem, type FABMenuItemColor, type FABMenuItemFocusRingVariants, type FABMenuItemIconVariants, type FABMenuItemLabelVariants, type FABMenuItemProps, type FABMenuItemStateLayerVariants, type FABMenuItemVariants, type FABMenuListVariants, type FABMenuProps, type FABMenuVariants, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, type HeadlessMenuItemProps, type HeadlessMenuProps, HeadlessMenuSection, type HeadlessMenuSectionProps, HeadlessMenuTrigger, type HeadlessMenuTriggerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, type HeadlineVariants, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, List, type ListDensity, ListHeadless, type ListHeadlessProps, ListItem, ListItemHeadless, ListItemLeading, type ListItemLeadingProps, type ListItemProps, ListItemText, type ListItemTextProps, ListItemTrailing, type ListItemTrailingProps, type ListItemVariants, type ListLeadingType, type ListProps, type ListTrailingType, type ListVariants, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Menu, type MenuContainerVariants, MenuContext, type MenuContextValue, MenuDivider, type MenuDividerProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type ModalDialogVariants, type ModalHeaderVariants, type ModeToggleStateLayerVariants, type ModeToggleVariants, type NavButtonComponentProps, type NavButtonFocusRingVariants, type NavButtonStateLayerVariants, type NavButtonVariants, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, type PopoverVariants, Progress, ProgressHeadless, type ProgressHeadlessProps, type ProgressProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, type RangeCalendarProps, RichTooltip, type RichTooltipProps, type RichTooltipVariants, STATE_LAYER_OPACITY, type ScrimVariants, Search, SearchBar, SearchBarHeadless, type SearchBarHeadlessProps, type SearchBarProps, type SearchLayout, type SearchProps, type SearchStyle, SearchView, SearchViewHeadless, type SearchViewHeadlessProps, type SearchViewProps, Slider, SliderHeadless, type SliderHeadlessProps, type SliderOrientation, type SliderProps, type SliderRangeThumbLabels, type SliderRenderState, type SliderSize, type SliderThumbProps, type SliderThumbState, type SliderVariant, Snackbar, type SnackbarAction, SnackbarContext, type SnackbarContextValue, SnackbarHeadless, type SnackbarHeadlessProps, type SnackbarItem, type SnackbarProps, SnackbarProvider, type SnackbarProviderProps, type SnackbarSeverity, SplitButton, type SplitButtonContainerVariants, type SplitButtonFocusRingVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonIconVariants, type SplitButtonLeadingVariants, type SplitButtonMenuItem, type SplitButtonMenuItemVariantProps, type SplitButtonProps, type SplitButtonSize, type SplitButtonStateLayerVariants, type SplitButtonTrailingVariants, type SplitButtonVariant, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, type SupportingTextVariants, 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 TextFieldVariant, type TimeFormat, type TimeInputFieldProps, type TimeInputFieldVariants, type TimePeriod, TimePicker, type TimePickerActionButtonVariants, type TimePickerActionRowVariants, type TimePickerContainerVariants, TimePickerDial, type TimePickerDialProps, type TimePickerHeadlessProps, type TimePickerHeadlineVariants, TimePickerInput, type TimePickerInputProps, type TimePickerModeToggleVariants, type TimePickerOrientation, type TimePickerProps, type TimePickerRenderState, type TimePickerVariant, type TimeSelectorContainerVariants, type TimeSelectorProps, type TimeSeparatorVariants, type TimeValue, type TitleComponentProps, Tooltip, type TooltipHeadlessProps, TooltipOverlayHeadless, type TooltipPlacement, type TooltipProps, TooltipTrigger, TooltipTriggerHeadless, type TooltipTriggerProps, type TooltipTriggerStyledProps, type TooltipVariant, type TooltipVariants, type TypographyProperty, type TypographyStyleObject, type UseBottomSheetDragOptions, type UseBottomSheetDragReturn, type WeekdayVariants, type YearGridVariants, type YearItemComponentProps, type YearItemFocusRingVariants, type YearItemStateLayerVariants, type YearItemVariants, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, drawerAnimationVariants, drawerHeadlineVariants, drawerItemActiveIndicatorVariants, drawerItemBadgeVariants, drawerItemFocusRingVariants, drawerItemIconVariants, drawerItemLabelVariants, drawerItemStateLayerVariants, drawerItemVariants, drawerScrimAnimationVariants, drawerScrimVariants, drawerSectionHeaderVariants, drawerSectionVariants, drawerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };