@tinybigui/react 0.11.2 → 0.13.0

package/dist/index.d.cts

@@ -6,7 +6,7 @@ import React__default, { LabelHTMLAttributes, InputHTMLAttributes, HTMLAttribute
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { AriaButtonProps, AriaTextFieldProps, AriaCheckboxProps, AriaSwitchProps, AriaRadioProps, AriaRadioGroupProps, AriaTabProps, AriaTabPanelProps, Key as Key$1, AriaDialogProps, AriaLinkOptions, AriaProgressBarProps, PressEvent, AriaMenuTriggerProps, AriaMenuProps } from 'react-aria';
-import { Key, SelectionMode, Selection } from 'react-stately';
+import { Key, SelectionMode, Selection, CalendarState, RangeCalendarState } from 'react-stately';
 import { MenuItemProps as MenuItemProps$1, SeparatorProps } from 'react-aria-components';
 import { DateValue, CalendarDate } from '@internationalized/date';
 
@@ -4317,31 +4317,49 @@ declare const ProgressHeadless: React__default.ForwardRefExoticComponent<Progres
  */
 type DividerOrientation = "horizontal" | "vertical";
 /**
- * Divider inset — controls which end(s) of the rule are inset by 16dp.
- * Per MD3 spec: insets create visual association with list content.
+ * Divider inset — controls which end(s) of the rule are offset by 16dp.
+ *
+ * Uses logical inline properties (inline-start / inline-end) so insets adapt
+ * correctly to RTL writing modes.
+ *
  * @default 'none'
  */
 type DividerInset = "none" | "start" | "end" | "both";
+/**
+ * CSS custom properties supported by the Divider component.
+ * Extends `React.CSSProperties` to allow the `--md-divider-thickness` variable.
+ */
+interface DividerCSSProperties extends React__default.CSSProperties {
+    /** Thickness of the divider rule. MD3 default: 1dp (1px). */
+    "--md-divider-thickness"?: string;
+}
 /**
  * Material Design 3 Divider Component Props
  *
  * A thin line that groups content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and a
- * subheader label variant.
+ * Supports horizontal/vertical orientations and four inset variants.
+ *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp specification). Override it with a style
+ * prop or an arbitrary Tailwind property:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
  *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider (default)
  * <Divider />
  *
- * // Inset divider (16dp from start)
+ * // Inset divider — logical 16dp from inline-start (RTL-aware)
  * <Divider inset="start" />
  *
- * // Vertical divider
+ * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader / labeled divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 interface DividerProps {
@@ -4351,19 +4369,19 @@ interface DividerProps {
      */
     orientation?: DividerOrientation;
     /**
-     * Inset — shifts the start and/or end of the rule by 16dp.
+     * Inset — shifts the start and/or end of the rule by 16dp (logical, RTL-aware).
      * @default 'none'
      */
     inset?: DividerInset;
-    /**
-     * When provided, renders a subheader (labeled) divider with the text
-     * centered between two rule lines.
-     */
-    label?: string;
     /**
      * Additional Tailwind CSS classes.
      */
     className?: string;
+    /**
+     * Inline styles. Supports the `--md-divider-thickness` CSS custom property
+     * to override the default 1dp thickness.
+     */
+    style?: DividerCSSProperties;
 }
 /**
  * Props for the headless Divider primitive.
@@ -4375,7 +4393,7 @@ interface DividerProps {
  * ```tsx
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4390,40 +4408,40 @@ interface DividerHeadlessProps {
      */
     className?: string;
     /**
-     * Subheader label text. Declared for interface completeness;
-     * rendering is handled by the styled `Divider` layer.
+     * Inline styles forwarded to the underlying element.
      */
-    label?: string;
-    /**
-     * Child content. Declared for interface extensibility;
-     * the headless primitive itself is a void/leaf element.
-     */
-    children?: React__default.ReactNode;
+    style?: DividerCSSProperties;
 }
 
 /**
  * Divider — MD3 Styled Component (Layer 3)
  *
  * A thin rule that separates content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and an
- * optional subheader label that renders the text centered between two rules.
+ * Supports horizontal/vertical orientations and four inset variants.
  *
  * Built on `DividerHeadless` (React Aria `useSeparator`) for accessible
  * ARIA semantics. Uses CVA variants mapped to MD3 design tokens.
  *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp spec). Override with a `style` prop:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
+ *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider
  * <Divider />
  *
- * // Inset from the start (16dp)
+ * // Inset from inline-start (RTL-aware, 16dp)
  * <Divider inset="start" />
  *
  * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.RefAttributes<HTMLElement>>;
@@ -4437,14 +4455,13 @@ declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.
  * - Horizontal → renders `<hr>` (implicit ARIA separator role)
  * - Vertical   → renders `<div>` with explicit `role="separator"`
  *
- * Bring your own styles via the `className` prop.
+ * Bring your own styles via the `className` or `style` props.
  *
  * @example
  * ```tsx
- * // Used inside the styled Divider, or directly for custom styling:
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4453,17 +4470,33 @@ declare const DividerHeadless: React$1.ForwardRefExoticComponent<DividerHeadless
 /**
  * Material Design 3 Divider Variants (CVA)
  *
- * Defines orientation and inset variants for the Divider component.
- * All classes use MD3 design token utilities — no arbitrary values.
+ * Architecture: Variants only — the Divider is a static, non-interactive element
+ * (no hover/focus/pressed states) so there is no state-layer machinery.
+ *
+ * Implementation strategy:
+ *   The border-* approach used previously required separate horizontal/vertical
+ *   logic and could not share a single thickness control. We now use a background
+ *   fill on a zero-border element, driven by a CSS custom property, which is the
+ *   same technique used by the official @material/web md-divider implementation.
+ *
+ * CSS variable:
+ *   --md-divider-thickness  (default: 1px, MD3 spec: 1dp)
+ *   Override via style or a Tailwind arbitrary property:
+ *     <Divider style={{ "--md-divider-thickness": "2px" }} />
  *
  * Orientation:
- *   horizontal — 1px top border, spans full width
- *   vertical   — 1px left border, spans full height (self-stretch in flex)
+ *   horizontal — full-width strip, height driven by --md-divider-thickness
+ *   vertical   — self-stretches to container height, width driven by var
+ *
+ * Inset (MD3 spec: 16dp logical offset, RTL-aware):
+ *   start — ms-4  (inline-start, adapts to writing direction)
+ *   end   — me-4  (inline-end)
+ *   both  — ms-4 me-4
  *
- * Inset (MD3 spec: 16dp offset):
- *   start — ml-4 (indented from the leading edge)
- *   end   — mr-4 (indented from the trailing edge)
- *   both  — ml-4 mr-4 (indented from both edges)
+ * MD3 Spec references:
+ *   Color:     outline-variant  (--md-sys-color-outline-variant)
+ *   Thickness: 1dp (no MD3 component token — exposed as a CSS var for parity with md-web)
+ *   Inset:     16dp (--md-comp-divider-leading-space / --md-comp-divider-trailing-space)
  */
 declare const dividerVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;
@@ -10187,9 +10220,10 @@ type DateSelectionMode = "single" | "range";
  */
 type CalendarView = "day" | "month" | "year";
 /**
- * Visual state of a calendar date cell.
- *
- * @internal
+ * Semantic state of a calendar date cell.
+ * Used to describe which visual treatment applies; the actual styling is driven
+ * by presence-based `data-*` attributes on the cell element, not by this type
+ * as a CVA variant key.
  */
 type CalendarCellType = "default" | "today" | "selected" | "selected-range-middle" | "outside-month" | "disabled";
 /**
@@ -10331,7 +10365,7 @@ interface DatePickerHeadlessProps {
     /**
      * Children rendered inside the picker (render prop pattern for styled layer).
      */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
 /**
  * Props for the MD3 Styled DatePicker component (Layer 3).
@@ -10432,10 +10466,6 @@ interface CalendarCellProps {
      * The date this cell represents.
      */
     date: DateValue;
-    /**
-     * Visual type of the cell.
-     */
-    cellType?: CalendarCellType;
     /**
      * Whether this cell is outside the currently displayed month.
      */
@@ -10490,6 +10520,18 @@ interface DateFieldProps {
     /** Additional CSS classes */
     className?: string;
 }
+type AnyComponent = React__default.ComponentType<any>;
+/**
+ * Slots for injecting styled sub-components into CalendarCore.
+ * Mirrors CalendarSlots from CalendarCore — duplicated here to avoid circular imports.
+ */
+interface DatePickerCalendarSlots {
+    CellComponent?: AnyComponent;
+    NavButtonComponent?: AnyComponent;
+    TitleComponent?: AnyComponent;
+    YearItemComponent?: AnyComponent;
+    WeekdayComponent?: AnyComponent;
+}
 /**
  * Props for the DatePickerDocked headless component (Layer 2).
  *
@@ -10547,8 +10589,23 @@ interface DatePickerDockedProps {
     onCancel?: () => void;
     /** Called when the confirm button is pressed */
     onConfirm?: (value: DateValue | null) => void;
-    /** Additional CSS classes */
+    /** Additional CSS classes on the root wrapper */
     className?: string;
+    /**
+     * CSS classes applied to the portaled calendar popover panel.
+     * Used by the styled layer to inject popover surface + calendar layout styles.
+     */
+    popoverClassName?: string;
+    /**
+     * Calendar slot component overrides (cells, nav buttons, year items, etc.).
+     * Used by the styled layer to inject CVA + state-layer components.
+     */
+    slots?: DatePickerCalendarSlots;
+    /**
+     * Slot component for action buttons (Cancel / OK).
+     * Used by the styled layer to inject CVA + state-layer styled buttons.
+     */
+    ActionButtonComponent?: AnyComponent;
 }
 /**
  * Props for the DatePickerModal headless component (Layer 2).
@@ -10633,6 +10690,15 @@ interface DatePickerModalProps {
     onClear?: () => void;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * CSS classes applied directly to the `[data-scrim]` overlay element.
+     * Used by the styled layer to inject scrim surface styles.
+     */
+    scrimClassName?: string;
+    /** Calendar slot component overrides. */
+    slots?: DatePickerCalendarSlots;
+    /** Slot component for action buttons. */
+    ActionButtonComponent?: AnyComponent;
 }
 /**
  * Props for the DatePickerModalHeader sub-component.
@@ -10874,6 +10940,13 @@ interface DatePickerModalInputProps {
     onModeToggle?: () => void;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * CSS classes applied directly to the `[data-scrim]` overlay element.
+     * Used by the styled layer to inject scrim surface styles.
+     */
+    scrimClassName?: string;
+    /** Slot component for action buttons. */
+    ActionButtonComponent?: AnyComponent;
 }
 
 /**
@@ -10924,12 +10997,15 @@ declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & Re
  * Provides the complete docked date picker behavior:
  * - Segmented date field trigger (MM/DD/YYYY)
  * - Calendar icon button to toggle the calendar popover
- * - Inline popover containing the CalendarCore from M02
+ * - Inline popover containing the CalendarCore
  * - Action buttons (Cancel, OK) at the bottom
  * - Open/close state management via React Aria overlays
  *
+ * Accepts `slots` and `ActionButtonComponent` to allow Layer-3 styled wrappers
+ * to inject CVA-styled sub-components without modifying this headless layer.
+ *
  * This is a headless component — it provides behavior, ARIA semantics, and
- * data attributes only. No styling classes are applied.
+ * data attributes only. No styling classes are applied to internal elements.
  *
  * @example
  * ```tsx
@@ -10939,7 +11015,7 @@ declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & Re
  * />
  * ```
  */
-declare const DatePickerDocked: React$1.ForwardRefExoticComponent<DatePickerDockedProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DatePickerDocked: React__default.ForwardRefExoticComponent<DatePickerDockedProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * Headless DatePickerModal (Layer 2)
@@ -11017,6 +11093,87 @@ declare const DatePickerModal: React$1.ForwardRefExoticComponent<DatePickerModal
  */
 declare const DatePickerModalInput: React$1.ForwardRefExoticComponent<DatePickerModalInputProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Slot component type for rendering an individual calendar date cell.
+ * Defaults to the headless `CalendarCell`.
+ */
+interface CalendarCellComponentProps {
+    date: CalendarDate;
+    state: CalendarState | RangeCalendarState;
+}
+
+/**
+ * Internal props for a calendar navigation button.
+ * Matches the subset of AriaButtonProps returned by useCalendar.
+ * @internal
+ */
+interface CalendarNavigationButtonProps {
+    /** Accessible label for the button */
+    "aria-label"?: string | undefined;
+    /** Handler called when the button is pressed */
+    onPress?: ((e: PressEvent) => void) | undefined;
+    /** Whether the button is disabled */
+    isDisabled?: boolean | undefined;
+}
+/**
+ * Props for a slot navigation button component.
+ * Receives all CalendarNavigationButtonProps plus children (the icon).
+ */
+interface NavButtonComponentProps extends CalendarNavigationButtonProps {
+    children?: React__default.ReactNode;
+}
+/**
+ * Props for a slot title component.
+ */
+interface TitleComponentProps {
+    /** The formatted title string (e.g., "August 2025") */
+    title: string;
+    /** Handler when the title is clicked to toggle year view */
+    onClick?: (() => void) | undefined;
+    /** Whether to show the dropdown indicator */
+    showDropdownIndicator?: boolean | undefined;
+}
+
+/**
+ * Slot component overrides for the calendar.
+ * Pass styled components from Layer 3 to inject CVA + state layers without
+ * modifying the headless behavior.
+ */
+interface CalendarSlots {
+    /**
+     * Component for rendering each date cell.
+     * Defaults to the headless `CalendarCell`.
+     */
+    CellComponent?: React__default.ComponentType<CalendarCellComponentProps>;
+    /**
+     * Component for rendering navigation buttons (prev/next month).
+     * Defaults to the built-in unstyled button.
+     */
+    NavButtonComponent?: React__default.ComponentType<NavButtonComponentProps>;
+    /**
+     * Component for rendering the month/year title pill.
+     * Defaults to the built-in unstyled div/button.
+     */
+    TitleComponent?: React__default.ComponentType<TitleComponentProps>;
+    /**
+     * Component for rendering each year item in the year-selection grid.
+     */
+    YearItemComponent?: React__default.ComponentType<YearItemComponentProps>;
+    /**
+     * Component for rendering weekday column headers.
+     */
+    WeekdayComponent?: React__default.ComponentType<{
+        label: string;
+    }>;
+}
+/**
+ * Props for a year item slot component.
+ */
+interface YearItemComponentProps {
+    year: number;
+    isSelected: boolean;
+    onSelect: (year: number) => void;
+}
 /**
  * Props for the CalendarCore headless component (Layer 2).
  *
@@ -11082,6 +11239,11 @@ interface CalendarCoreProps {
     "aria-label"?: string;
     /** ID of labelling element */
     "aria-labelledby"?: string;
+    /**
+     * Slot component overrides — pass styled components from Layer 3 to inject
+     * CVA classes and state layers into the calendar internals.
+     */
+    slots?: CalendarSlots;
 }
 /**
  * Headless CalendarCore (Layer 2)
@@ -11093,8 +11255,9 @@ interface CalendarCoreProps {
  * Supports day view (calendar grid) and year view (3-column year selection grid)
  * toggled by clicking the month/year title in the header.
  *
- * This is a headless component — it provides behavior, ARIA semantics, and
- * data attributes only. No styling classes are applied.
+ * The `slots` prop allows Layer-3 styled components to inject styled sub-components
+ * (cells, nav buttons, title, year items, weekday labels) without modifying this
+ * headless layer.
  *
  * @example
  * ```tsx
@@ -11122,94 +11285,451 @@ declare const CalendarCore: React__default.ForwardRefExoticComponent<CalendarCor
 declare const DateField: React$1.ForwardRefExoticComponent<DateFieldProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * CVA variants for the Date Picker container.
- * MD3 spec: surface-container-high background, extra-large corner radius (28dp).
+ * StyledCalendarCell (Layer 3 slot)
+ *
+ * Wraps the headless `CalendarCell` with MD3 styling via CVA slot variants.
+ * Injects the CVA class string as `className`, and renders the state-layer and
+ * focus-ring overlays as children inside the cell (alongside the date text,
+ * which the headless layer always renders).
+ *
+ * Architecture:
+ * - `calendarCellVariants`          — 48dp circle, body-large, data-* state tokens
+ *                                     Carries `group/calendar-cell`.
+ * - `calendarCellStateLayerVariants` — absolute opacity overlay; responds to
+ *                                     `group-data-[hovered|focus-visible|pressed]/calendar-cell`
+ * - `calendarCellFocusRingVariants`  — absolute outline ring; keyboard-only
+ *
+ * @internal — passed to CalendarCore via `slots.CellComponent`
+ */
+declare function StyledCalendarCell({ date, state }: CalendarCellComponentProps): JSX.Element;
+declare namespace StyledCalendarCell {
+    var displayName: string;
+}
+
+/**
+ * StyledNavButton (Layer 3 slot)
+ *
+ * MD3-styled navigation button for previous/next month.
+ * 40dp circle, on-surface-variant icon, with state layer + focus ring.
+ *
+ * Architecture:
+ * - `navButtonVariants`           — 40dp circle, on-surface-variant, group/nav-button
+ * - `navButtonStateLayerVariants` — absolute opacity overlay
+ * - `navButtonFocusRingVariants`  — keyboard-only outline ring
+ *
+ * @internal — passed to CalendarHeader via the NavButtonComponent slot
+ */
+declare function StyledNavButton({ children, isDisabled, onPress, "aria-label": ariaLabel, }: NavButtonComponentProps): JSX.Element;
+declare namespace StyledNavButton {
+    var displayName: string;
+}
+/**
+ * StyledCalendarTitle (Layer 3 slot)
+ *
+ * MD3-styled month/year title toggle pill.
+ * Pill shape, label-large, on-surface-variant, with state layer.
+ *
+ * Architecture:
+ * - `calendarTitleVariants`           — pill, group/calendar-title
+ * - `calendarTitleStateLayerVariants` — absolute opacity overlay
+ *
+ * @internal — passed to CalendarHeader via the TitleComponent slot
+ */
+declare function StyledCalendarTitle({ title, onClick, showDropdownIndicator, }: TitleComponentProps): JSX.Element;
+declare namespace StyledCalendarTitle {
+    var displayName: string;
+}
+
+/**
+ * StyledYearItem (Layer 3 slot)
+ *
+ * MD3-styled year selection item.
+ * 88×52dp pill, body-large, on-surface-variant/on-primary for selected,
+ * with state layer + focus ring.
+ *
+ * Architecture:
+ * - `yearItemVariants`           — pill shape, body-large, data-[selected] bg-primary,
+ *                                  carries `group/year-item`
+ * - `yearItemStateLayerVariants` — absolute opacity overlay; switches color on selected
+ * - `yearItemFocusRingVariants`  — keyboard-only outline ring
+ *
+ * @internal — passed to CalendarCore via `slots.YearItemComponent`
+ */
+declare function StyledYearItem({ year, isSelected, onSelect, }: YearItemComponentProps): JSX.Element;
+declare namespace StyledYearItem {
+    var displayName: string;
+}
+
+/**
+ * StyledWeekday (Layer 3 slot)
+ *
+ * MD3-styled weekday column header cell.
+ * body-small, on-surface-variant, 48dp width and height, centered.
+ *
+ * @internal — passed to CalendarCore via `slots.WeekdayComponent`
+ */
+declare function StyledWeekday({ label }: {
+    label: string;
+}): JSX.Element;
+declare namespace StyledWeekday {
+    var displayName: string;
+}
+
+/**
+ * Props for an injectable action button slot component.
+ */
+interface ActionButtonSlotProps {
+    /** Visible label text */
+    label: string;
+    /** Accessible label */
+    "aria-label"?: string | undefined;
+    /** Called when the button is pressed */
+    onPress?: (() => void) | undefined;
+    /** Whether the button is disabled */
+    isDisabled?: boolean | undefined;
+    /** data-action attribute value ("clear" | "cancel" | "confirm") */
+    "data-action": string;
+}
+
+/**
+ * StyledActionButton (Layer 3 slot)
+ *
+ * MD3-styled Cancel / OK / Clear text button.
+ * label-large, primary color, pill shape, with state layer + focus ring.
+ *
+ * Architecture:
+ * - `actionButtonVariants`           — pill, label-large, text-primary, group/action-button
+ * - `actionButtonStateLayerVariants` — absolute opacity overlay; bg-primary
+ * - `actionButtonFocusRingVariants`  — keyboard-only outline ring
+ *
+ * @internal — passed to DatePickerActions via `ButtonComponent` slot
+ */
+declare function StyledActionButton({ label, "aria-label": ariaLabel, onPress, isDisabled, "data-action": dataAction, }: ActionButtonSlotProps): JSX.Element;
+declare namespace StyledActionButton {
+    var displayName: string;
+}
+
+/**
+ * Material Design 3 DatePicker Variants
+ *
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only. No interaction state variants
+ *   (hovered/focused/pressed/disabled) live in CVA.
+ * - All interaction/selection states are driven by data-* attributes emitted
+ *   via `getInteractionDataAttributes` and consumed by `group-data-[x]/<name>`
+ *   Tailwind selectors in each slot's base classes.
+ * - Content flags (data-selected, data-today, data-range-middle, data-disabled,
+ *   data-outside-month, data-range-start, data-range-end, data-focus-visible,
+ *   data-hovered, data-pressed) are set by the headless cell/nav/year layers.
+ *
+ * Slot responsibilities:
+ *   datePickerContainerVariants    — root container; shape, surface, width by variant
+ *   calendarCellVariants           — 48dp date cell root; carries `group/calendar-cell`
+ *   calendarCellStateLayerVariants — hover/focus/pressed state-layer overlay
+ *   calendarCellFocusRingVariants  — keyboard focus ring for cells
+ *   navButtonVariants              — 40dp icon nav button; carries `group/nav-button`
+ *   navButtonStateLayerVariants    — state layer for nav button
+ *   calendarTitleVariants          — month/year toggle pill; carries `group/calendar-title`
+ *   calendarTitleStateLayerVariants — state layer for title button
+ *   calendarHeaderVariants         — header row layout
+ *   yearItemVariants               — 88×52 pill year item; carries `group/year-item`
+ *   yearItemStateLayerVariants     — state layer for year item
+ *   yearGridVariants               — scrollable year grid container
+ *   weekdayVariants                — "S M T W T F S" label cells
+ *   dividerVariants                — 1dp outline-variant separator
+ *   actionButtonVariants           — Cancel/OK/Clear text button; carries `group/action-button`
+ *   actionButtonStateLayerVariants — state layer for action buttons
+ *   actionRowVariants              — action button row layout
+ *   modalDialogVariants            — centered fixed modal dialog panel
+ *   modalHeaderVariants            — modal header layout
+ *   headlineVariants               — label-large supporting headline text
+ *   supportingTextVariants         — headline-large selected-date display
+ *   modeToggleVariants             — calendar/keyboard mode toggle button; carries `group/mode-toggle`
+ *   modeToggleStateLayerVariants   — state layer for mode toggle
+ *   scrimVariants                  — full-viewport dark overlay
+ *   dateInputFieldVariants         — outlined date input field wrapper
+ *   dateInputFieldGroupVariants    — inner outlined container + focus/invalid borders
+ *   dockedFieldGroupVariants       — docked trigger: outlined field + icon
+ *   dockedTriggerVariants          — calendar icon button; carries `group/docked-trigger`
+ *   dockedTriggerStateLayerVariants — state layer for docked trigger
+ *   popoverVariants                — docked calendar popover panel
+ *
+ * MD3 Spec (https://m3.material.io/components/date-pickers/specs):
+ *   Container: surface-container-high, 28dp corner (extra-large)
+ *   Date cell: 48dp circle
+ *   Nav button: 40dp, rounded-full
+ *   Year item: 88×52dp, pill
+ *   State-layer opacities: hover 8% | focus 10% | pressed 10% | disabled 38%
+ *   Motion tier: Spring standard FAST (< 48dp interactive elements)
+ *   Modal enter: animate-md-scale-in | Exit: animate-md-scale-out
+ *   Popover enter: standard-decelerate / short3
+ */
+/**
+ * Container variants — width and surface styling by structural variant.
+ *
+ * - **docked**: Root wrapper is layout-only (width). Calendar surface styling
+ *   (`bg-surface-container-high`, `rounded-3xl`) is applied to `[data-popover]`
+ *   via `DOCKED_POPOVER_STRUCTURAL` in `datePickerStructuralStyles.ts`.
+ * - **modal** / **modal-input**: Full container styling on `[data-modal-dialog]`.
+ *
+ * MD3 spec: surface-container-high, 28dp corner radius (extra-large = rounded-3xl).
  */
 declare const datePickerContainerVariants: (props?: ({
     variant?: "modal" | "docked" | "modal-input" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DatePickerContainerVariants = VariantProps<typeof datePickerContainerVariants>;
 /**
- * CVA for individual calendar date cells.
- * MD3 spec: 48x48dp circle, various states and types.
+ * Date cell root — carries `group/calendar-cell`.
+ *
+ * Structure + visual states are driven by presence-based data-* attributes on
+ * the root via self-targeting `data-[x]:` and `group-data-[x]/calendar-cell:`
+ * selectors — NOT via CVA variants.
+ *
+ * Cell state progression:
+ *   default:             text-on-surface
+ *   today (unselected):  text-primary + border border-primary
+ *   selected:            bg-primary + text-on-primary (full circle)
+ *   range-start/end:     bg-primary + text-on-primary + half-pill rounding
+ *   range-middle:        bg-secondary-container + text-on-secondary-container + no rounding
+ *   outside-month:       text-on-surface-variant
+ *   disabled:            text-on-surface/38, cursor-not-allowed
+ *   unavailable:         text-on-surface/38, line-through
+ *
+ * Interaction states via state layer (see calendarCellStateLayerVariants):
+ *   hover 8% | focus-visible 10% | pressed 10%
  */
-declare const calendarCellVariants: (props?: ({
-    cellType?: "disabled" | "default" | "selected" | "today" | "selected-range-middle" | "outside-month" | null | undefined;
-    state?: "focused" | "enabled" | "hovered" | "pressed" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const calendarCellVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type CalendarCellVariants = VariantProps<typeof calendarCellVariants>;
 /**
- * CVA for the date picker header (headline + supporting text + toggle icon).
+ * Calendar cell state layer — absolute overlay inside the cell.
+ *
+ * Color: on-surface (unselected) → on-primary (selected) → on-secondary-container (range-middle).
+ * Opacity: 0 rest → 8% hover → 10% focus-visible → 10% pressed → hidden disabled.
+ * Effects spring (fast tier — small < 48dp control).
  */
-declare const datePickerHeaderVariants: (props?: ({
-    variant?: "modal" | "docked" | "modal-input" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DatePickerHeaderVariants = VariantProps<typeof datePickerHeaderVariants>;
+declare const calendarCellStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarCellStateLayerVariants = VariantProps<typeof calendarCellStateLayerVariants>;
 /**
- * CVA for month/year navigation buttons.
+ * Calendar cell focus ring — keyboard-only visible ring.
+ * Rendered as an absolute inset so overflow-hidden never clips it.
  */
-declare const datePickerNavVariants: (props?: ({
-    state?: "disabled" | "focused" | "enabled" | "hovered" | "pressed" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DatePickerNavVariants = VariantProps<typeof datePickerNavVariants>;
+declare const calendarCellFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarCellFocusRingVariants = VariantProps<typeof calendarCellFocusRingVariants>;
 /**
- * CVA for year grid items.
- * MD3 spec: 88dp × 52dp, pill shape when selected.
+ * Calendar header row — flex layout, padding per MD3 spec.
  */
-declare const yearItemVariants: (props?: ({
-    selected?: boolean | null | undefined;
-    state?: "disabled" | "focused" | "enabled" | "hovered" | "pressed" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const calendarHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarHeaderVariants = VariantProps<typeof calendarHeaderVariants>;
+/**
+ * Navigation button (previous/next month) — 40dp circle, carries `group/nav-button`.
+ *
+ * MD3 spec: 40dp icon button, on-surface-variant color, transparent bg.
+ * State layer: hover 8%, focus 10%, pressed 10%.
+ */
+declare const navButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type NavButtonVariants = VariantProps<typeof navButtonVariants>;
+/**
+ * Nav button state layer.
+ */
+declare const navButtonStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type NavButtonStateLayerVariants = VariantProps<typeof navButtonStateLayerVariants>;
+/**
+ * Nav button focus ring.
+ */
+declare const navButtonFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type NavButtonFocusRingVariants = VariantProps<typeof navButtonFocusRingVariants>;
+/**
+ * Month/year title toggle pill — carries `group/calendar-title`.
+ *
+ * MD3 spec: label-large text, on-surface-variant, pill shape, transparent bg.
+ */
+declare const calendarTitleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarTitleVariants = VariantProps<typeof calendarTitleVariants>;
+/**
+ * Calendar title text inside the title button.
+ * label-large, on-surface-variant per MD3.
+ */
+declare const calendarTitleTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarTitleTextVariants = VariantProps<typeof calendarTitleTextVariants>;
+/**
+ * Calendar title dropdown icon color.
+ */
+declare const calendarTitleIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarTitleIconVariants = VariantProps<typeof calendarTitleIconVariants>;
+/**
+ * Calendar title state layer.
+ */
+declare const calendarTitleStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarTitleStateLayerVariants = VariantProps<typeof calendarTitleStateLayerVariants>;
+/**
+ * Scrollable year grid container.
+ * MD3 spec: 3-column grid, scrollable, max height.
+ */
+declare const yearGridVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type YearGridVariants = VariantProps<typeof yearGridVariants>;
+/**
+ * Year item pill — carries `group/year-item`.
+ *
+ * MD3 spec: 88×52dp, pill, body-large text.
+ * Selected: bg-primary text-on-primary.
+ * Unselected: text-on-surface-variant.
+ * All interaction states via state layer.
+ */
+declare const yearItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type YearItemVariants = VariantProps<typeof yearItemVariants>;
 /**
- * CVA for divider line between header and calendar.
- * MD3 spec: outline-variant, 1dp thickness.
+ * Year item state layer.
+ *
+ * Color: on-surface-variant (unselected) → on-primary (selected).
  */
-declare const datePickerDividerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerDividerVariants = VariantProps<typeof datePickerDividerVariants>;
+declare const yearItemStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type YearItemStateLayerVariants = VariantProps<typeof yearItemStateLayerVariants>;
 /**
- * CVA for the action button row (Cancel, OK, Clear).
- * MD3 spec: right-aligned, 48dp height, 12dp horizontal padding.
+ * Year item focus ring.
  */
-declare const datePickerActionVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerActionVariants = VariantProps<typeof datePickerActionVariants>;
+declare const yearItemFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type YearItemFocusRingVariants = VariantProps<typeof yearItemFocusRingVariants>;
 /**
- * CVA for individual action button text styling.
- * MD3 spec: primary color text buttons.
+ * Weekday column headers (S M T W T F S).
+ * MD3 spec: body-small, on-surface-variant, 48dp width, 48dp height, centered.
  */
-declare const datePickerActionButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerActionButtonVariants = VariantProps<typeof datePickerActionButtonVariants>;
+declare const weekdayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type WeekdayVariants = VariantProps<typeof weekdayVariants>;
 /**
- * CVA for weekday label text (S, M, T, W, T, F, S).
- * MD3 spec: body-small, on-surface color.
+ * 1dp separator between header and calendar body.
+ * MD3 spec: outline-variant color.
  */
-declare const datePickerWeekdayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerWeekdayVariants = VariantProps<typeof datePickerWeekdayVariants>;
+declare const calendarDividerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CalendarDividerVariants = VariantProps<typeof calendarDividerVariants>;
 /**
- * CVA for range indicator strip between start and end dates.
- * MD3 spec: secondary-container background, 48dp height.
+ * Action button row — right-aligned flex, 48dp height.
+ * MD3 spec: 12dp horizontal padding, 48dp row height.
  */
-declare const datePickerRangeIndicatorVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerRangeIndicatorVariants = VariantProps<typeof datePickerRangeIndicatorVariants>;
+declare const actionRowVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ActionRowVariants = VariantProps<typeof actionRowVariants>;
 /**
- * CVA for headline text in modal variants.
- * MD3 spec: headline-small typography, on-surface color.
+ * Individual action button (Cancel / OK / Clear) — carries `group/action-button`.
+ *
+ * MD3 spec: label-large, primary color, pill shape, transparent bg.
  */
-declare const datePickerHeadlineVariants: (props?: ({
-    variant?: "modal" | "docked" | "modal-input" | null | undefined;
+declare const actionButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ActionButtonVariants = VariantProps<typeof actionButtonVariants>;
+/**
+ * Action button state layer.
+ */
+declare const actionButtonStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ActionButtonStateLayerVariants = VariantProps<typeof actionButtonStateLayerVariants>;
+/**
+ * Action button focus ring.
+ */
+declare const actionButtonFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ActionButtonFocusRingVariants = VariantProps<typeof actionButtonFocusRingVariants>;
+/**
+ * Centered modal dialog panel.
+ * MD3 spec: surface-container-high, 28dp corner, elevation-3.
+ * Sizes: 360dp (modal) | 328dp (modal-input).
+ */
+declare const modalDialogVariants: (props?: ({
+    variant?: "modal" | "modal-input" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type DatePickerHeadlineVariants = VariantProps<typeof datePickerHeadlineVariants>;
+type ModalDialogVariants = VariantProps<typeof modalDialogVariants>;
+/**
+ * Modal header layout wrapper.
+ * MD3 spec: 24dp horizontal padding, 16dp top, 12dp bottom, items-start.
+ */
+declare const modalHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ModalHeaderVariants = VariantProps<typeof modalHeaderVariants>;
+/**
+ * Headline text — label-large, on-surface-variant.
+ * Shows "Select date" / "Select dates" above the large date display.
+ */
+declare const headlineVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type HeadlineVariants = VariantProps<typeof headlineVariants>;
+/**
+ * Supporting text — the large formatted selected date display.
+ * MD3 spec: headline-large, on-surface.
+ */
+declare const supportingTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type SupportingTextVariants = VariantProps<typeof supportingTextVariants>;
+/**
+ * Mode toggle button (calendar ↔ keyboard) — carries `group/mode-toggle`.
+ * MD3 spec: 48dp circle, on-surface-variant.
+ */
+declare const modeToggleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ModeToggleVariants = VariantProps<typeof modeToggleVariants>;
+/**
+ * Mode toggle state layer.
+ */
+declare const modeToggleStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ModeToggleStateLayerVariants = VariantProps<typeof modeToggleStateLayerVariants>;
+/**
+ * Full-viewport dark overlay behind modal dialogs.
+ * MD3 spec: bg-scrim at 32% opacity.
+ */
+declare const scrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ScrimVariants = VariantProps<typeof scrimVariants>;
+/**
+ * Outer wrapper for a labeled date input field (modal-input variant).
+ * MD3 spec: 24dp horizontal padding, 8dp vertical.
+ */
+declare const dateInputFieldVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateInputFieldVariants = VariantProps<typeof dateInputFieldVariants>;
+/**
+ * Inner outlined container of the date input field.
+ * Focus state adds 2dp primary border; invalid adds error border.
+ * MD3 spec: outlined text field, body-large text, rounded-sm shape.
+ */
+declare const dateInputFieldGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateInputFieldGroupVariants = VariantProps<typeof dateInputFieldGroupVariants>;
+/**
+ * Date input field label — body-small, on-surface-variant.
+ */
+declare const dateInputLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateInputLabelVariants = VariantProps<typeof dateInputLabelVariants>;
+/**
+ * Date input field error message — body-small, error color.
+ */
+declare const dateInputErrorVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateInputErrorVariants = VariantProps<typeof dateInputErrorVariants>;
+/**
+ * Docked trigger field group — outlined container for the date segments + icon.
+ * MD3 spec: outlined text field, h-14, border-outline, flex, gap-2.
+ */
+declare const dockedFieldGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DockedFieldGroupVariants = VariantProps<typeof dockedFieldGroupVariants>;
+/**
+ * Docked calendar icon trigger button — carries `group/docked-trigger`.
+ * MD3 spec: 40dp circle icon button.
+ */
+declare const dockedTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DockedTriggerVariants = VariantProps<typeof dockedTriggerVariants>;
+/**
+ * Docked trigger state layer.
+ */
+declare const dockedTriggerStateLayerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DockedTriggerStateLayerVariants = VariantProps<typeof dockedTriggerStateLayerVariants>;
+/**
+ * Popover panel for the docked calendar.
+ * MD3 spec: surface-container-high, 28dp corner, elevation-2, z-50.
+ */
+declare const popoverVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type PopoverVariants = VariantProps<typeof popoverVariants>;
+/**
+ * Label text above the docked text field.
+ * MD3 spec: body-small, on-surface-variant.
+ */
+declare const dockedLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DockedLabelVariants = VariantProps<typeof dockedLabelVariants>;
 /**
- * CVA for supporting text below headline.
- * MD3 spec: label-large typography, on-surface-variant color.
+ * Date field segments container (inline segmented date input).
+ * flex, items-center, flex-1, body-large text.
  */
-declare const datePickerSupportingTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerSupportingTextVariants = VariantProps<typeof datePickerSupportingTextVariants>;
+declare const dateFieldVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateFieldVariants = VariantProps<typeof dateFieldVariants>;
 /**
- * CVA for modal scrim overlay.
- * Matches Dialog scrim pattern.
+ * Date field placeholder segment text color.
  */
-declare const datePickerScrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-type DatePickerScrimVariants = VariantProps<typeof datePickerScrimVariants>;
+declare const dateSegmentPlaceholderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DateSegmentPlaceholderVariants = VariantProps<typeof dateSegmentPlaceholderVariants>;
 
-export { 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 CalendarCellProps, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarGridProps, 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 DateInputFieldProps, DatePicker, type DatePickerActionButtonVariants, type DatePickerActionVariants, type DatePickerActionsProps, type DatePickerContainerVariants, type DatePickerDividerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeaderVariants, type DatePickerHeadlessProps, type DatePickerHeadlineVariants, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerNavVariants, type DatePickerProps, type DatePickerRangeIndicatorVariants, type DatePickerRenderState, type DatePickerScrimVariants, type DatePickerSupportingTextVariants, type DatePickerVariant, type DatePickerWeekdayVariants, 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, 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, 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, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, 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, 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, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, type TabItem, type TabLayout, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type 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, 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 YearItemVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, 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 TextFieldSize, 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 };