@tinybigui/react 0.17.0 → 0.19.0

package/dist/index.d.cts

@@ -7660,46 +7660,68 @@ interface SearchProps extends Omit<SearchBarProps, "onFocus"> {
 interface SearchBarHeadlessProps extends SearchBarProps {
     /** Ref forwarded to the form element */
     ref?: React__default.Ref<HTMLFormElement>;
+    /**
+     * Slot class names applied directly to the bar's inner elements.
+     * Passed from SearchBar so per-slot CVA classes apply without descendant selectors.
+     */
+    inputClassName?: string | undefined;
+    trailingActionsClassName?: string | undefined;
 }
 /** Props for SearchViewHeadless — the headless primitive for the view */
 interface SearchViewHeadlessProps extends SearchViewProps {
     /** Ref forwarded to the view container div */
     ref?: React__default.Ref<HTMLDivElement>;
+    /**
+     * Slot class names applied directly to inner headless elements.
+     * Passed by SearchView so per-slot CVA classes can be applied
+     * without descendant-selector blobs.
+     */
+    headerClassName?: string;
+    backButtonClassName?: string;
+    clearButtonClassName?: string;
+    inputClassName?: string;
+    trailingActionsClassName?: string | undefined;
+    dividerClassName?: string;
+    contentClassName?: string;
 }
 
 /**
  * Material Design 3 Search Bar Component (Layer 3: Styled)
  *
- * The collapsed/maximized state search affordance that transitions
- * to Focused State (SearchView) on click/focus.
+ * The collapsed/maximized search affordance that transitions to Focused State
+ * (SearchView) on click/focus.
+ *
+ * Implements the Variants-vs-States architecture: all interaction states are
+ * expressed as data-* attributes on the root via `getInteractionDataAttributes`
+ * and consumed by each slot via `group-data-[x]/search` Tailwind selectors.
  *
  * Anatomy:
- *   [Container] [Leading icon] [Supporting text/input] [Trailing actions] [Avatar]
+ *   [Leading icon] [Input / placeholder] [Trailing actions] [Avatar]
  *
  * Features:
- * - MD3 state layer with hover/active opacity transitions
- * - Ripple effect on press (Material Design state 4)
- * - Focus indicator: 3dp ring in secondary color
- * - M3 Expressive pane margin transition (24dp → 12dp on focus)
- * - Automatic `noActions` variant when no trailing actions/avatar
+ * - MD3 state layer: hover 8% / pressed 10% opacity (Standard fast effects spring)
+ * - Ripple effect on press (Material Design press state)
+ * - Focus ring: Secondary color, 3dp, rendered outside overflow-hidden (sibling pattern)
+ * - M3 Expressive pane margin: 24dp → 12dp on focus (Expressive fast spatial spring)
+ * - Content flag `data-with-actions` switches container spacing: 16dp → 4dp
  *
  * @example
  * ```tsx
  * <SearchBar
  *   placeholder="Search messages"
  *   leadingIcon={<SearchIcon />}
- *   trailingActions={[<IconButton key="mic" icon={<MicIcon />} aria-label="Voice search" />]}
+ *   trailingActions={[<IconButton key="mic" aria-label="Voice search"><MicIcon /></IconButton>]}
  *   onFocus={() => setOpen(true)}
  * />
  * ```
  */
-declare const SearchBar: React$1.ForwardRefExoticComponent<SearchBarProps & React$1.RefAttributes<HTMLFormElement>>;
+declare const SearchBar: React__default.ForwardRefExoticComponent<SearchBarProps & React__default.RefAttributes<HTMLFormElement>>;
 
 /**
  * Material Design 3 Search View Component (Layer 3: Styled)
  *
- * The expanded/focused search experience with input and results.
- * Displayed in a portal over page content.
+ * The expanded/focused search experience rendered in a portal over page content.
+ * Uses per-slot CVAs for all styling — no descendant-selector blobs.
  *
  * Anatomy:
  *   Header: [Back arrow] [Input] [Clear button] [Optional trailing actions]
@@ -7708,9 +7730,10 @@ declare const SearchBar: React$1.ForwardRefExoticComponent<SearchBarProps & Reac
  *
  * Features:
  * - Portal rendering with focus trap and scroll lock (via headless)
- * - Compound variants for 4 style+layout combinations
- * - Animate on mount with `animate-md-scale-in`
- * - Clear button visible only when input has value
+ * - Compound variants for all 4 style × layout combinations
+ * - Docked layout: animate-md-scale-in on mount
+ * - Fullscreen layout: animate-md-fade-in on mount
+ * - Clear button visible only when input has value (controlled by headless)
  * - aria-live region for autosuggest announcements
  *
  * @example
@@ -7770,6 +7793,7 @@ declare const Search: React$1.ForwardRefExoticComponent<SearchProps & React$1.Re
  * - Keyboard: Enter → onSubmit, Escape (with value) → onClear
  * - Leading icon, trailing actions, and avatar slots
  * - aria-label falls back to placeholder per MD3 labeling spec
+ * - `inputClassName` and `trailingActionsClassName` applied directly to inner elements
  *
  * @example
  * ```tsx
@@ -7780,21 +7804,22 @@ declare const Search: React$1.ForwardRefExoticComponent<SearchProps & React$1.Re
  * />
  * ```
  */
-declare const SearchBarHeadless: React$1.ForwardRefExoticComponent<Omit<SearchBarHeadlessProps, "ref"> & React$1.RefAttributes<HTMLFormElement>>;
+declare const SearchBarHeadless: React__default.ForwardRefExoticComponent<Omit<SearchBarHeadlessProps, "ref"> & React__default.RefAttributes<HTMLFormElement>>;
 /**
  * SearchViewHeadless — Layer 2 headless primitive for the MD3 Search view.
  *
- * Renders in a portal when `isOpen={true}`. Does not render when closed.
- * Uses `useOverlay` for Escape-key dismissal, `usePreventScroll` to lock
- * body scrolling, and `FocusScope` for focus trapping.
+ * Rendering strategy by layout:
+ * - `fullscreen`: renders in a portal (`createPortal`) with `usePreventScroll` and
+ *   `FocusScope contain` — the view covers the full viewport.
+ * - `docked`: renders inline (no portal) with `FocusScope restoreFocus autoFocus` only —
+ *   the card sits in normal document flow so it can be centered by its wrapper.
+ *
+ * Both layouts use `useOverlay` so Escape key and click-outside dismiss correctly.
  *
  * Features:
- * - Portal rendering via `createPortal`
- * - Escape key → onClose
- * - Body scroll lock when open
- * - Focus trap with auto-focus and restore on close
+ * - Back arrow (MD3 ArrowBack SVG) + input + MD3 Close SVG clear button in header
  * - aria-live region for autosuggest announcements
- * - Back arrow (leading icon) + input + clear button header
+ * - Slot class names from the styled SearchView layer applied directly on elements
  *
  * @example
  * ```tsx
@@ -7807,36 +7832,131 @@ declare const SearchBarHeadless: React$1.ForwardRefExoticComponent<Omit<SearchBa
  * </SearchViewHeadless>
  * ```
  */
-declare const SearchViewHeadless: React$1.ForwardRefExoticComponent<Omit<SearchViewHeadlessProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SearchViewHeadless: React__default.ForwardRefExoticComponent<Omit<SearchViewHeadlessProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
- * Material Design 3 Search Bar container variants (CVA).
- *
- * Base: 56dp height, full rounded pill, surface-container-high background,
- * level-3 elevation, body-large typography.
+ * Material Design 3 Search Variants
  *
- * Spacing follows MD3 Search spec:
- * - Contained (expressive): 4dp leading/trailing with trailing actions
- * - Contained (no actions): 16dp leading/trailing
- * - Divided (baseline): 16dp leading/trailing, 16dp icon-label gap
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only (no focused/disabled/noActions state variants).
+ * - All interaction states are driven by data-* attributes on the root via
+ *   group-data-[x]/search Tailwind selectors in each slot's base classes.
+ * - Content flags (data-with-actions) are set explicitly by the component.
+ *
+ * Search Bar slot responsibilities:
+ *   searchBarRootVariants        — container pill; shape, color, elevation, spacing by style
+ *   searchBarStateLayerVariants  — hover/pressed opacity overlay (inside overflow-hidden)
+ *   searchBarFocusRingVariants   — keyboard focus outline (outside overflow-hidden)
+ *   searchBarLeadingIconVariants — 48dp tap target wrapping 24dp icon, on-surface
+ *   searchBarTrailingActionVariants  — 48dp tap target for each trailing icon, on-surface-variant
+ *   searchBarTrailingActionsVariants — flex row wrapper for all trailing actions
+ *   searchBarAvatarVariants          — 48dp tap target wrapping 30dp rounded-full avatar
+ *   searchBarInputVariants           — flex-1 text input inside the bar
+ *
+ * Search View slot responsibilities:
+ *   searchViewVariants           — container; style × layout compound variants
+ *   searchViewHeaderVariants     — header row; style × layout heights/padding
+ *   searchViewBackButtonVariants — 48dp back-arrow tap target, on-surface
+ *   searchViewClearButtonVariants — 48dp clear tap target, on-surface-variant
+ *   searchViewTrailingActionVariants  — 48dp trailing action in view header
+ *   searchViewTrailingActionsVariants — flex row wrapper for all view trailing actions
+ *   searchViewInputVariants           — flex-1 text input inside the view header
+ *   searchViewDividerVariants    — horizontal rule (divided style only)
+ *   searchViewContentVariants    — scrollable results/suggestions area
+ *
+ * MD3 Token References:
+ *   Container color:   SurfaceContainerHigh
+ *   Contained bg (fullscreen view): SurfaceContainerLow
+ *   Container elevation: Level 3 (6dp)
+ *   Leading icon:      OnSurface
+ *   Trailing icon:     OnSurfaceVariant
+ *   Placeholder:       OnSurfaceVariant
+ *   Input text:        OnSurface
+ *   Focus indicator:   Secondary, 3dp
+ *   Hover opacity:     8%   (MD3 state.hover.state-layer-opacity)
+ *   Pressed opacity:   10%  (MD3 state.pressed.state-layer-opacity)
+ *   Disabled:          opacity-38 on container
  *
  * @see docs/md3-components/search/tokens/layout-text.md
+ * @see docs/md3-components/search/tokens/color-tokens-light.md
+ */
+/**
+ * Search bar container pill.
+ *
+ * Spacing follows MD3 Search Bar spec:
+ *   Contained + with actions:    px-1 gap-1   (4dp leading/trailing per spec)
+ *   Contained + no actions:      px-4         (16dp leading/trailing)
+ *   Divided:                     px-4 gap-4   (16dp leading/trailing, 16dp icon-label gap)
+ *
+ * The `contained` variant uses `data-[with-actions]` on the root (a content flag set by the
+ * component) to switch from 16dp → 4dp spacing — no CVA variant needed for this.
+ *
+ * Disabled is self-targeting (data-[disabled]:) because the root carries the data attr.
+ * overflow-hidden intentionally NOT here — the focus ring span sits outside via a sibling
+ * wrapper, so we preserve full ring visibility (same pattern as Button).
  */
-declare const searchBarVariants: (props?: ({
+declare const searchBarRootVariants: (props?: ({
     style?: "contained" | "divided" | null | undefined;
-    noActions?: boolean | null | undefined;
-    focused?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * Material Design 3 Search View container variants (CVA).
+ * State layer — absolute inset overlay inside the bar container.
+ *
+ * Must be inside overflow-hidden (placed on the same pill via the root's inner wrapper).
+ * Color: on-surface (MD3 search bar state layer color).
+ * Opacities: hover 8%, pressed 10% (doubled selector wins over hover).
+ * Hidden when disabled (no state affordance on non-interactive element).
+ */
+declare const searchBarStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Focus ring overlay.
+ *
+ * Rendered outside the overflow-hidden container (as a sibling, in a relative wrapper)
+ * so it can extend 3px beyond the pill boundary and remain fully visible.
+ * Color: Secondary (MD3 focus indicator color).
+ * Thickness: 3dp (MD3 state.focus-indicator.thickness).
+ */
+declare const searchBarFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Leading icon wrapper — 48dp tap target with centered 24dp icon.
+ * Color: on-surface (MD3 leading icon color).
+ */
+declare const searchBarLeadingIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Trailing action wrapper — 48dp tap target for each trailing icon button.
+ * Color: on-surface-variant (MD3 trailing icon color).
+ */
+declare const searchBarTrailingActionVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Avatar wrapper — 48dp tap target containing a 30dp rounded-full image/element.
+ * Shape: CornerFull (MD3 avatar shape).
+ * Size: 30dp (MD3 avatar size).
+ */
+declare const searchBarAvatarVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Trailing actions group wrapper — lays out multiple trailing icon slots in a row.
+ * gap = 0 per MD3 spec (contained trailing-actions gap token = 0dp).
+ */
+declare const searchBarTrailingActionsVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Text input inside the search bar.
+ * Typography: body-large (MD3 supporting text / input text font).
+ * Colors: on-surface for input, on-surface-variant for placeholder.
+ *
+ * `min-w-0` is required so `flex-1` can shrink when trailing actions are present.
+ * The native browser search cancel button and decoration are hidden so only our
+ * MD3 clear button (in SearchView) controls clearing.
+ */
+declare const searchBarInputVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Search view container — the expanded/focused search surface.
  *
- * Compound variants express all 4 style+layout combinations:
- * - Contained + fullscreen: surface-container-low, no rounding
- * - Contained + docked: surface-container-high, rounded-xl (12dp)
- * - Divided + fullscreen: surface-container-high, no rounding
- * - Divided + docked: surface-container-high, rounded-[28px] (extra-large)
+ * All 4 style × layout combinations via compound variants:
+ *   contained + fullscreen: surface-container-low,  no rounding
+ *   contained + docked:     surface-container-high, rounded-xl (12dp), 2dp gap
+ *   divided   + fullscreen: surface-container-high, no rounding
+ *   divided   + docked:     surface-container-high, rounded-[28px] (extra-large)
  *
+ * @see docs/md3-components/search/tokens/layout-text.md
  * @see docs/md3-components/search/tokens/color-tokens-light.md
  */
 declare const searchViewVariants: (props?: ({
@@ -7844,12 +7964,12 @@ declare const searchViewVariants: (props?: ({
     layout?: "fullscreen" | "docked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * Material Design 3 Search View header variants (CVA).
+ * Search view header row.
  *
- * Heights per style + layout:
- * - Contained: 56dp (both layouts)
- * - Divided + fullscreen: 72dp
- * - Divided + docked: 56dp (overridden by docked variant)
+ * Heights per MD3 spec:
+ *   Contained (both layouts):  56dp (h-14), 12dp side padding (px-3)
+ *   Divided + fullscreen:      72dp (h-[72px]), 16dp side padding (px-4)
+ *   Divided + docked:          56dp (h-14), overridden by docked layout variant
  *
  * @see docs/md3-components/search/tokens/layout-text.md
  */
@@ -7857,6 +7977,48 @@ declare const searchViewHeaderVariants: (props?: ({
     style?: "contained" | "divided" | null | undefined;
     layout?: "fullscreen" | "docked" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Back arrow button wrapper — 48dp tap target.
+ * Color: on-surface (MD3 header leading icon color).
+ * Includes visual state layer for hover/focus feedback (button handles its own states).
+ */
+declare const searchViewBackButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Clear (✕) button wrapper — 48dp tap target.
+ * Color: on-surface-variant (MD3 trailing icon color).
+ * Transitions opacity when shown/hidden (Standard fast effects).
+ */
+declare const searchViewClearButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Trailing action wrapper in the view header — 48dp tap target.
+ * Color: on-surface-variant (MD3 trailing icon color).
+ */
+declare const searchViewTrailingActionVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Trailing actions group wrapper in the view header — lays out multiple action
+ * slots in a row. gap = 0 per MD3 spec.
+ */
+declare const searchViewTrailingActionsVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Text input inside the view header.
+ * Typography: body-large.
+ * Colors: on-surface for input text, on-surface-variant for placeholder.
+ *
+ * `min-w-0` lets `flex-1` shrink when clear/trailing buttons are present.
+ * Native search affordances hidden — MD3 clear button controls clearing.
+ */
+declare const searchViewInputVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Horizontal divider between the view header and results area.
+ * Color: outline (MD3 divider color).
+ * Only rendered when searchStyle="divided".
+ */
+declare const searchViewDividerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Results / suggestions content area.
+ * flex-1 to fill remaining height; overflow-y-auto for independent scroll.
+ */
+declare const searchViewContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 
 /**
  * Props for the BadgeContent indicator element.
@@ -8683,6 +8845,26 @@ type SliderOrientation = "horizontal" | "vertical";
  * @example ['Min price', 'Max price']
  */
 type SliderRangeThumbLabels = [string, string];
+/**
+ * Render state provided to `renderThumbContent` for each thumb slot.
+ *
+ * The styled layer (`Slider`) uses this to render the visual handle,
+ * state layer, and value indicator inside the React Aria thumb element.
+ */
+interface SliderThumbRenderState {
+    /** Zero-based index of this thumb (0 for single-thumb, 0 or 1 for range). */
+    index: number;
+    /** Current numeric value of this thumb (from React Stately state). */
+    value: number;
+    /** Whether this thumb is currently being dragged (pointer down). */
+    isDragging: boolean;
+    /** Whether keyboard focus ring is visible on this thumb. */
+    isFocusVisible: boolean;
+    /** Whether pointer is hovering over this thumb. */
+    isHovered: boolean;
+    /** Whether the slider is disabled. */
+    isDisabled: boolean;
+}
 /**
  * Props for the headless `SliderHeadless` primitive (Layer 2).
  *
@@ -8787,10 +8969,33 @@ interface SliderHeadlessProps {
      */
     isDisabled?: boolean;
     /**
-     * Content (children) rendered inside the slider container.
-     * Used by the styled layer to inject track, handle, stops, etc.
+     * Content (children) rendered inside the slider track element.
+     * Used by the styled layer to inject track layout.
      */
     children?: React__default.ReactNode;
+    /**
+     * CSS classes applied to the `data-track` region element.
+     * The styled layer uses this to carry the size-based height/width and
+     * `touch-none` on the element React Aria measures for pointer math.
+     * When omitted, the track region defaults to `relative w-full`.
+     */
+    trackClassName?: string;
+    /**
+     * Render prop called for each thumb to produce visual thumb content
+     * (handle, state layer, value indicator). Receives the thumb's current
+     * render state. When provided, visual content is rendered inside the
+     * React Aria thumb element (which is absolutely positioned at the value %).
+     *
+     * Used by the styled `Slider` layer; advanced users of `SliderHeadless`
+     * may supply custom thumb visuals.
+     */
+    renderThumbContent?: (state: SliderThumbRenderState) => React__default.ReactNode;
+    /**
+     * Called when any thumb's dragging state changes.
+     * Receives the thumb index and a boolean indicating whether it is dragging.
+     * Used by the styled layer to suppress track animation during pointer drag.
+     */
+    onThumbDraggingChange?: (index: number, isDragging: boolean) => void;
     /**
      * Additional CSS classes applied to the slider root element.
      */
@@ -8884,7 +9089,7 @@ interface SliderThumbProps {
  * />
  * ```
  */
-interface SliderProps extends Omit<SliderHeadlessProps, "children"> {
+interface SliderProps extends Omit<SliderHeadlessProps, "children" | "renderThumbContent" | "onThumbDraggingChange"> {
     /**
      * MD3 Expressive size preset.
      * Controls track height, handle height, corner radius, and icon size.
@@ -8915,7 +9120,11 @@ interface SliderProps extends Omit<SliderHeadlessProps, "children"> {
 }
 /**
  * Interactive state of a slider thumb.
- * Used internally by the styled layer for state-dependent styling.
+ *
+ * @deprecated The styled Slider now drives interaction states via React Aria
+ *   hooks + `data-*` attributes (group-data-[x]/slider-thumb selectors) instead
+ *   of a manual state machine. This type is retained only for backwards
+ *   compatibility with existing usages of `SliderHeadlessProps`.
  *
  * @internal
  */
@@ -8923,6 +9132,10 @@ type SliderThumbState = "enabled" | "hovered" | "pressed" | "disabled";
 /**
  * Render state passed to internal sub-components for conditional styling.
  *
+ * @deprecated The styled Slider now uses `SliderThumbRenderState` (per-thumb
+ *   render state) provided by the `renderThumbContent` render prop. This type
+ *   is retained only for backwards compatibility.
+ *
  * @internal
  */
 interface SliderRenderState {
@@ -8941,15 +9154,31 @@ interface SliderRenderState {
 /**
  * Material Design 3 Slider Component (Layer 3: Styled)
  *
- * Wraps SliderHeadless with CVA styling for all five MD3 Expressive sizes.
- * Renders the visual track layout (active track → handle → inactive track) as
- * children inside the headless track element.
- *
+ * Wraps `SliderHeadless` with CVA styling for all five MD3 Expressive sizes.
+ * Renders the visual track layout (active/inactive tracks) as children inside
+ * the headless track element. The visual handle, state layer, and value indicator
+ * are rendered as children of the React Aria thumb element via `renderThumbContent`,
+ * which positions them exactly at the value percentage.
+ *
+ * **Architecture (Variants-vs-States)**
+ * - Interaction states (hover, pressed/dragging, disabled, focus) are driven by
+ *   React Aria hooks → `getInteractionDataAttributes` → `data-*` on the RA thumb
+ *   (`group/slider-thumb`) → `group-data-[x]/slider-thumb:*` CSS selectors.
+ * - No manual pointer state machine — React Aria's `isDragging`, `isHovered`,
+ *   and `isFocusVisible` are the single source of truth.
+ * - Disabled track/stop colors use `group-data-[disabled]/slider:*` selectors
+ *   from the root `group/slider` scope.
+ *
+ * **Geometry (documented inline-style exception)**
  * Track widths are driven by runtime values and use inline `flexBasis` styles —
  * a documented exception for geometry that cannot be expressed as design tokens.
  *
- * Motion: MD3 Appendix E token pairings applied; JS-driven animations are
- * guarded with `useReducedMotion()`.
+ * **Motion**
+ * - Track fill: spring-standard-fast-spatial (suppressed during drag + reduced motion)
+ * - Handle width: spring-standard-fast-spatial (suppressed for reduced motion)
+ * - State layer opacity: spring-standard-fast-effects (always present; CSS media
+ *   query handles `prefers-reduced-motion` for CSS-driven changes)
+ * - Value indicator: spring-standard-fast-spatial (suppressed for reduced motion)
  *
  * @example
  * ```tsx
@@ -8981,6 +9210,8 @@ declare const Slider: React__default.ForwardRefExoticComponent<SliderProps & Rea
  * - Discrete stepping support
  * - Live value announcements via <output>
  * - data-* attributes for styled layer targeting
+ * - `group/slider-thumb` scope on each thumb for group-data CSS selectors
+ * - `renderThumbContent` render prop for injecting visual content inside RA thumb
  *
  * @example
  * ```tsx
@@ -8999,81 +9230,98 @@ declare const Slider: React__default.ForwardRefExoticComponent<SliderProps & Rea
 declare const SliderHeadless: React__default.ForwardRefExoticComponent<SliderHeadlessProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
- * CVA variants for the Slider container (root element — the `role="group"` div).
+ * Slider root container variants.
+ *
+ * The root element carries:
+ * - `group/slider` — scope for track/stop disabled-state selectors
+ *   (`group-data-[disabled]/slider:*`)
+ *
+ * Horizontal layout: CSS grid with label (col 1) + output (col 2) in the first
+ * row, and the full-width track region spanning both columns in the second row.
+ * This matches the canonical React Aria / MD3 layout and prevents the track
+ * from collapsing when label + output are inline siblings.
  *
- * MD3 spec §4.2: Container height equals handle height for each size.
- * MD3 spec §4.1, §10.9: In vertical orientation, container width = handle height (dimensions transposed).
- * Applied via className on SliderHeadless so the groupProps div receives these classes.
+ * Vertical layout: flex-col so label is above the track.
+ * The size-based HEIGHT lives on the track region, not here (the container is
+ * auto-height in horizontal so it wraps the grid rows naturally).
  */
 declare const sliderContainerVariants: (props?: ({
-    size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
     orientation?: "vertical" | "horizontal" | null | undefined;
-    disabled?: boolean | null | undefined;
+    size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * CVA for the active track (filled portion).
+ * Absolute-fill container that holds the active and inactive track segments.
+ *
+ * Segments are `position: absolute` children sharing the same percentage
+ * coordinate space as the React Aria thumbs, so fills always align with
+ * handle positions regardless of value or orientation.
+ *
+ * The MD3 6dp thumb-track gap (`thumbTrackGapSize`) is applied as a symmetric
+ * 3px offset on each side of the thumb in the parent's inline position styles.
+ *
+ * `pointer-events-none` lets React Aria's track click-to-seek events
+ * reach the `data-track` region without interference.
+ */
+declare const sliderTrackLayoutVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The filled (active) portion of the slider track.
+ *
+ * **Color**: `bg-primary`
+ * **Disabled**: driven by `group-data-[disabled]/slider:*` — no CVA disabled variant.
+ * **Transition**: `flex-basis` spring (spatial) when not dragging/reduced-motion.
  *
- * MD3 spec §6, §8.1, §10.2: `bg-primary`, size-dependent outer corners, 2dp inner corners.
- * Inner corner (near handle) is always 2dp regardless of size.
- * MD3 spec §10.9: In vertical orientation, track thickness becomes width (not height).
- * Transition: flex-basis spatial spring (md3-motion spring-standard-fast-spatial).
+ * MD3 §6, §10.2: outer corner = size corner token, inner corner (near handle) = 2dp.
+ * NOTE: measurement-derived corner values from MD3 spec §6; permitted exception.
  */
 declare const sliderActiveTrackVariants: (props?: ({
     size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
     orientation?: "vertical" | "horizontal" | null | undefined;
-    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * CVA for the inactive track (unfilled portion).
+ * The unfilled (inactive) portion of the slider track.
  *
- * MD3 spec §6, §8.1, §10.2: `bg-secondary-container`, 2dp inner corners, size-dependent outer corners.
- * MD3 spec §10.9: In vertical orientation, track thickness becomes width (not height).
- * Disabled: `bg-on-surface` at 10% opacity via Tailwind alpha modifier.
+ * **Color**: `bg-secondary-container`
+ * **Disabled**: driven by `group-data-[disabled]/slider:*` — no CVA disabled variant.
+ *
+ * MD3 §6, §10.2: inner corner (near handle) = 2dp, outer corner = size corner token.
+ * NOTE: measurement-derived corner values from MD3 spec §6; permitted exception.
  */
 declare const sliderInactiveTrackVariants: (props?: ({
     size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
     orientation?: "vertical" | "horizontal" | null | undefined;
-    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * CVA for the handle/thumb element.
+ * Visual handle (thumb indicator) element inside the React Aria thumb container.
+ *
+ * **Architecture**: This element lives inside the `group/slider-thumb` scope (the
+ * RA-positioned thumb div). All interaction states are driven by
+ * `group-data-[x]/slider-thumb:*` selectors — no CVA interaction-state variants.
  *
- * MD3 spec §6, §9, §10.3: 4dp wide, full container height, 2dp border-radius.
- * MD3 spec §10.9: In vertical orientation, width and height are transposed —
- *   handle becomes 4dp tall (main axis) × full width (cross axis).
- * Width narrows to 2dp on press (md3 spec §9.3).
- * Motion: transition-[width] with duration-short2 + ease-standard applied conditionally
- * in Slider.tsx based on useReducedMotion() guard (MD3 Appendix E).
+ * **Pressed width**: `group-data-[pressed]/slider-thumb:w-[2px]` (4dp → 2dp, MD3 spec)
+ * **Motion**: `transition-[width]` with spring-standard-fast-spatial tokens.
+ *   Applied conditionally in `Slider.tsx` (suppressed for `useReducedMotion()`).
  */
 declare const sliderHandleVariants: (props?: ({
     size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
     orientation?: "vertical" | "horizontal" | null | undefined;
-    pressed?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * CVA for the handle's state layer overlay.
+ * State layer overlay on the handle (hover ripple).
  *
- * MD3 spec §8.3: Inset overlay within the handle.
- * - Hover: on-primary at 8% opacity
- * - Focus/Pressed: on-primary at 10% opacity
- * Motion: transition-opacity with duration-short1 + ease-standard applied conditionally
- * in Slider.tsx based on useReducedMotion() guard (MD3 Appendix E).
- */
-declare const sliderHandleStateLayerVariants: (props?: ({
-    state?: "disabled" | "enabled" | "focused" | "hovered" | "pressed" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * CVA for the track layout container (holds active track + handle + inactive track).
+ * **Architecture**: Lives inside `group/slider-thumb`; opacity driven entirely
+ * by `group-data-[x]/slider-thumb:opacity-*` selectors — no CVA state variant.
+ *
+ * State-layer opacities per MD3 spec:
+ * - hover:   8%   (`opacity-8`)
+ * - focused: 10%  (`opacity-10`)
+ * - pressed: 10%  (`opacity-10`)
+ * - dragged: 16%  (`opacity-16`) — note: drag = pressed in RA isDragging → data-pressed
  *
- * MD3 spec §7, §10.2: Flex row with 6dp gap between handle and track segments.
- * The 6dp gap is the `thumbTrackGapSize` token from MD3 spec.
- * MD3 spec §10.9: Vertical orientation uses flex-col-reverse for bottom-to-top fill.
- * `relative` is required so the absolute stops overlay is positioned within.
+ * **Motion**: `transition-opacity` with spring-standard-fast-effects tokens.
+ *   Always present; `@media prefers-reduced-motion` suppresses the transition at
+ *   the CSS level.
  */
-declare const sliderTrackLayoutVariants: (props?: ({
-    orientation?: "vertical" | "horizontal" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderHandleStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 
 /**
  * Structural variant of the MD3 Bottom Sheet.
@@ -10199,7 +10447,7 @@ type ClockDialContainerVariants = VariantProps<typeof clockDialContainerVariants
 declare const clockDialNumberVariants: (props?: ({
     selected?: boolean | null | undefined;
     ring?: "outer" | "inner" | null | undefined;
-    state?: "enabled" | "focused" | "hovered" | null | undefined;
+    state?: "enabled" | "hovered" | "focused" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ClockDialNumberVariants = VariantProps<typeof clockDialNumberVariants>;
 /**
@@ -10226,7 +10474,7 @@ type ClockHandHandleVariants = VariantProps<typeof clockHandHandleVariants>;
  */
 declare const timeSelectorContainerVariants: (props?: ({
     selected?: boolean | null | undefined;
-    state?: "enabled" | "focused" | "hovered" | null | undefined;
+    state?: "enabled" | "hovered" | "focused" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TimeSelectorContainerVariants = VariantProps<typeof timeSelectorContainerVariants>;
 /**
@@ -10243,7 +10491,7 @@ type PeriodSelectorContainerVariants = VariantProps<typeof periodSelectorContain
  */
 declare const periodSelectorItemVariants: (props?: ({
     selected?: boolean | null | undefined;
-    state?: "enabled" | "focused" | "hovered" | null | undefined;
+    state?: "enabled" | "hovered" | "focused" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type PeriodSelectorItemVariants = VariantProps<typeof periodSelectorItemVariants>;
 /**
@@ -10252,7 +10500,7 @@ type PeriodSelectorItemVariants = VariantProps<typeof periodSelectorItemVariants
  */
 declare const timeInputFieldVariants: (props?: ({
     selected?: boolean | null | undefined;
-    state?: "enabled" | "focused" | "hovered" | null | undefined;
+    state?: "enabled" | "hovered" | "focused" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TimeInputFieldVariants = VariantProps<typeof timeInputFieldVariants>;
 /**
@@ -11829,4 +12077,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 SplitButtonDropdownVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonMenuItem, type SplitButtonPrimaryVariants, type SplitButtonProps, type SplitButtonSize, 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, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, 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 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 SplitButtonDropdownVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonMenuItem, type SplitButtonPrimaryVariants, type SplitButtonProps, type SplitButtonSize, 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, splitButtonDropdownVariants, splitButtonPrimaryVariants, 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 };