@tinybigui/react 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -733,22 +733,51 @@ declare const AppBar: React$1.ForwardRefExoticComponent<AppBarProps & React$1.Re
 declare const AppBarHeadless: React$1.ForwardRefExoticComponent<AppBarHeadlessProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
- * Material Design 3 Button Variants (CVA)
- *
- * Type-safe variant management for Button component.
- * Uses Tailwind CSS classes mapped to MD3 design tokens.
+ * Material Design 3 Button Variants
+ *
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only (no disabled/loading state variants).
+ * - All interaction states are driven by data-* attributes on the root via
+ *   group-data-[x]/button Tailwind selectors in each slot's base classes.
+ * - Content flags (data-with-icon, data-loading) are set explicitly by the component.
+ *
+ * Slot responsibilities:
+ *   buttonVariants           — root <button>; shape, color, elevation
+ *   buttonStateLayerVariants — hover/focus/press opacity ring (absolute inset overlay)
+ *   buttonFocusRingVariants  — keyboard focus outline, MUST NOT be inside overflow-hidden
+ *   buttonIconVariants       — leading/trailing icon wrapper
+ *   buttonLabelVariants      — label text slot
+ *
+ * MD3 Spec:
+ *   Shape: rounded-full (corner-full)
+ *   Height: 32dp small | 40dp medium | 56dp large
+ *   Padding: 16dp small | 24dp medium | 32dp large (12dp text variant)
+ *   Icon size: 18px × 18px
+ *   State-layer opacities: hover 8% | focus 10% | pressed 10%
+ *   Disabled: container 12% opacity, content 38% opacity
+ *
+ * Elevation per state (MD3 comp tokens):
+ *   Filled   base=0  hover=1  focus=0  pressed=0
+ *   Tonal    base=0  hover=1  focus=0  pressed=0
+ *   Elevated base=1  hover=2  focus=1  pressed=1
+ *   Outlined base=0  hover=0  focus=0  pressed=0
+ *   Text     base=0  hover=0  focus=0  pressed=0
+ */
+/**
+ * Root <button> element.
+ *
+ * IMPORTANT — overflow is intentionally NOT on the root.
+ * Overflow clipping is delegated to the ripple container and state layer
+ * via `overflow-hidden rounded-[inherit]` on those children. This lets the
+ * focus ring span (`inset-[-3px]`) extend outside the button boundary and
+ * remain fully visible — if overflow-hidden were on the root it would be
+ * clipped to zero width.
  */
 declare const buttonVariants: (props?: ({
     variant?: "text" | "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
-    color?: "primary" | "secondary" | "tertiary" | "error" | null | undefined;
     size?: "small" | "large" | "medium" | null | undefined;
     fullWidth?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    loading?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * Extract variant prop types from CVA
- */
 type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 /**
@@ -756,68 +785,63 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
  */
 type ButtonVariant = "filled" | "outlined" | "tonal" | "elevated" | "text";
 /**
- * Button color schemes (Material Design 3 color roles)
- */
-type ButtonColor = "primary" | "secondary" | "tertiary" | "error";
-/**
- * Button sizes
+ * Button sizes (Material Design 3)
  */
 type ButtonSize = "small" | "medium" | "large";
 /**
  * Material Design 3 Button Component Props
  *
  * Built on React Aria for world-class accessibility.
- * Supports 5 variants: filled, outlined, tonal, elevated, text
- * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ * Supports 5 strict MD3 variants: filled, outlined, tonal, elevated, text.
+ * Each variant uses its spec-defined color roles — no color override prop.
+ *
+ * Interaction states (hover, focus, press, disabled) are managed via
+ * React Aria hooks and expressed as data-* attributes on the root element,
+ * consumed by slot classes via group-data-[x]/button selectors.
  *
  * @example
  * ```tsx
- * // Filled button (default)
- * <Button variant="filled" color="primary">
- *   Click me
- * </Button>
+ * // Filled button (default, highest emphasis)
+ * <Button variant="filled">Save</Button>
+ *
+ * // Outlined button (medium emphasis)
+ * <Button variant="outlined">Cancel</Button>
+ *
+ * // Tonal button (secondary emphasis)
+ * <Button variant="tonal">Learn more</Button>
  *
- * // With icon
- * <Button variant="tonal" icon={<IconAdd />}>
+ * // With icon (MD3 spec: 18px × 18px)
+ * <Button variant="filled" icon={<IconAdd className="h-[18px] w-[18px]" />}>
  *   Add Item
  * </Button>
  *
  * // Loading state
- * <Button variant="elevated" loading>
- *   Saving...
- * </Button>
+ * <Button variant="elevated" loading>Saving...</Button>
  *
  * // Disabled
- * <Button variant="outlined" isDisabled>
- *   Disabled
- * </Button>
+ * <Button variant="outlined" isDisabled>Disabled</Button>
  *
  * // Headless version (custom styling)
- * <ButtonHeadless className="my-custom-styles">
- *   Click me
- * </ButtonHeadless>
+ * <ButtonHeadless className="my-custom-styles">Click me</ButtonHeadless>
  * ```
  */
 interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttributes<HTMLButtonElement>, keyof AriaButtonProps | "children"> {
     /**
-     * Button variant
+     * Button variant (MD3 specification).
+     * Determines visual emphasis and color roles.
      * @default 'filled'
      */
     variant?: ButtonVariant;
     /**
-     * Color scheme
-     * @default 'primary'
-     */
-    color?: ButtonColor;
-    /**
-     * Size variant
+     * Size variant.
+     * MD3 heights: small=32dp, medium=40dp, large=56dp
      * @default 'medium'
      */
     size?: ButtonSize;
     /**
-     * Leading icon (before text)
+     * Leading icon (before label text).
      *
-     * MD3 Specification: Icons should be 18px × 18px
+     * MD3 Specification: Icons must be 18px × 18px.
      *
      * @example
      * ```tsx
@@ -828,9 +852,9 @@ interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttribute
      */
     icon?: React__default.ReactNode;
     /**
-     * Trailing icon (after text)
+     * Trailing icon (after label text).
      *
-     * MD3 Specification: Icons should be 18px × 18px
+     * MD3 Specification: Icons must be 18px × 18px.
      *
      * @example
      * ```tsx
@@ -841,35 +865,36 @@ interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttribute
      */
     trailingIcon?: React__default.ReactNode;
     /**
-     * Button content (text)
+     * Button label content.
      */
     children: React__default.ReactNode;
     /**
-     * Full width button (spans container)
+     * Full width button (spans container width).
      * @default false
      */
     fullWidth?: boolean;
     /**
-     * Loading state - shows spinner, disables interaction
+     * Loading state — shows spinner and disables interaction.
+     * The button remains in the DOM as disabled while loading.
      * @default false
      */
     loading?: boolean;
     /**
-     * Disable ripple effect
+     * Disable the ripple effect on press.
      * @default false
      */
     disableRipple?: boolean;
     /**
-     * Additional CSS classes (Tailwind)
+     * Additional Tailwind CSS classes applied to the root element.
      */
     className?: string;
     /**
-     * Tab index for keyboard navigation
+     * Tab index for keyboard navigation.
      * @default 0
      */
     tabIndex?: number;
     /**
-     * Button type attribute
+     * Button type attribute.
      * @default 'button'
      */
     type?: "button" | "submit" | "reset";
@@ -879,58 +904,51 @@ interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttribute
  * Material Design 3 Button Component (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Uses CVA for type-safe variant management.
- * Styled with Tailwind CSS using MD3 design tokens.
+ * Implements the Variants-vs-States architecture: all interaction states are
+ * expressed as data-* attributes on the root and consumed by each slot via
+ * group-data-[x]/button Tailwind selectors — no state variants in CVA.
  *
  * Features:
  * - ✅ 5 MD3 variants: filled, outlined, tonal, elevated, text
- * - ✅ 4 color schemes: primary, secondary, tertiary, error
- * - ✅ 3 sizes: small, medium, large
+ * - ✅ 3 sizes: small (32dp), medium (40dp), large (56dp)
  * - ✅ Loading state with spinner
  * - ✅ Ripple effect (Material Design)
+ * - ✅ Proper MD3 state layer (hover 8%, focus 10%, pressed 10%)
  * - ✅ Full keyboard accessibility (via React Aria)
  * - ✅ Screen reader support (via React Aria)
  * - ✅ Focus management (via React Aria)
  * - ✅ ButtonGroup-aware: applies connected corner radii and min-width when inside a group
  *
  * MD3 Specifications:
- * - Height: 40dp (medium), 32dp (small), 48dp (large)
- * - Typography: Label Large (14px, 500 weight, +0.1px letter-spacing)
+ * - Height: 40dp (medium), 32dp (small), 56dp (large)
+ * - Typography: Label Large (medium), Label Medium (small), Title Medium (large)
  * - Icon size: 18px × 18px (per MD3 spec)
- * - State layers: 8% hover, 12% focus/pressed
- * - Elevation: Level 1 on hover (filled), Level 1→2 (elevated)
+ * - State layers: 8% hover, 10% focus/pressed
+ * - Elevation: Level 1 on hover (filled), Level 1 base → Level 2 hover (elevated)
  *
  * @example
  * ```tsx
  * // Basic usage
  * <Button>Click me</Button>
  *
- * // With variant and color
- * <Button variant="outlined" color="secondary">
- *   Secondary Action
- * </Button>
+ * // With variant
+ * <Button variant="outlined">Secondary Action</Button>
  *
- * // With icon (MD3 spec: icons should be 18px × 18px)
+ * // With icon (MD3 spec: icons are 18px × 18px)
  * <Button icon={<IconAdd className="h-[18px] w-[18px]" />}>
  *   Add Item
  * </Button>
  *
  * // Loading state
- * <Button loading>
- *   Saving...
- * </Button>
+ * <Button loading>Saving...</Button>
  *
  * // Disabled
- * <Button isDisabled>
- *   Disabled
- * </Button>
+ * <Button isDisabled>Disabled</Button>
  *
  * // Full width
- * <Button fullWidth>
- *   Full Width Button
- * </Button>
+ * <Button fullWidth>Full Width Button</Button>
  *
- * // Inside a connected ButtonGroup (corner radii applied automatically)
+ * // Inside a connected ButtonGroup
  * <ButtonGroup variant="connected" selectionMode="required" defaultValue="md">
  *   <Button value="sm">S</Button>
  *   <Button value="md">M</Button>
@@ -938,7 +956,7 @@ interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttribute
  * </ButtonGroup>
  * ```
  */
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Omit<ButtonVariants, "disabled"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Omit<ButtonVariants, never> & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * ButtonGroup layout variant (Material Design 3)
@@ -999,6 +1017,13 @@ interface ButtonGroupContextValue {
      * The child passes its own `value` string.
      */
     onSelectionChange: (value: string) => void;
+    /**
+     * Whether the entire group is disabled.
+     * When `true`, all child buttons should be non-interactive.
+     *
+     * @default false
+     */
+    isDisabled: boolean;
     /**
      * Tailwind class for the inner (adjacent) corner radius in the connected variant.
      * Applied to all four corners of every button in a connected group.
@@ -1124,6 +1149,14 @@ interface ButtonGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivEle
      * @default new Set()
      */
     defaultValue?: string | string[] | undefined;
+    /**
+     * Whether the entire group and all child buttons are disabled.
+     * When `true`, the group container receives `data-disabled` and
+     * all children inherit the disabled state via context.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Child buttons (Button, IconButton, or any element with a `value` prop).
      */
@@ -1137,10 +1170,21 @@ interface ButtonGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivEle
 /**
  * Material Design 3 ButtonGroup Component (Layer 3: Styled)
  *
+ * Built on the Variants-vs-States architecture: interaction/selection states
+ * are expressed as data-* attributes on the root and consumed by child slots
+ * via group-data-[x]/button-group Tailwind selectors.
+ *
  * An invisible container that:
- * - Applies MD3-spec gap between child buttons
+ * - Applies MD3-spec gap between child buttons with spatial spring transitions
  * - Manages selection state (single / multi / required) across toggle buttons
- * - Passes shape, size, and variant metadata to children via React Context
+ * - Passes shape, size, variant, and disabled metadata to children via React Context
+ * - Emits container-level state attributes for CSS targeting
+ *
+ * Container data attributes:
+ * - `data-connected`      — variant is "connected"
+ * - `data-has-selection`  — at least one child button is selected
+ * - `data-selection-mode` — "single" | "required" | "multi"
+ * - `data-disabled`       — group is non-interactive (via getInteractionDataAttributes)
  *
  * Variants:
  * - `standard`: Buttons float independently. Gap is larger for xs/sm to preserve
@@ -1153,6 +1197,11 @@ interface ButtonGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivEle
  * - `required`: Exactly one always selected; pressing the active button is a no-op.
  * - `multi`: Any number of buttons selected simultaneously.
  *
+ * Motion:
+ * - Gap transitions use spring-standard-fast-spatial (350ms) for smooth layout changes
+ * - Border-radius morphing on child buttons uses expressive-fast-spatial (350ms, overshoot)
+ * - Color/opacity effects on children use spring-standard-fast-effects (150ms, no overshoot)
+ *
  * @example
  * ```tsx
  * // Standard icon-button group (no selection management)
@@ -1173,16 +1222,10 @@ interface ButtonGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivEle
  *   <Button value="16oz">16 oz</Button>
  * </ButtonGroup>
  *
- * // Controlled multi-select
- * <ButtonGroup
- *   variant="connected"
- *   selectionMode="multi"
- *   selectedValues={selected}
- *   onSelectionChange={setSelected}
- *   aria-label="Text formatting"
- * >
- *   <Button value="bold">Bold</Button>
- *   <Button value="italic">Italic</Button>
+ * // Disabled group
+ * <ButtonGroup variant="connected" isDisabled aria-label="Unavailable options">
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
  * </ButtonGroup>
  * ```
  */
@@ -1224,28 +1267,73 @@ declare const ButtonGroup: React__default.ForwardRefExoticComponent<ButtonGroupP
 declare const ButtonGroupHeadless: React__default.ForwardRefExoticComponent<ButtonGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
- * Material Design 3 ButtonGroup Variants (CVA)
+ * Material Design 3 ButtonGroup Variants
+ *
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only (no interaction state variants).
+ * - All interaction/selection states are driven by data-* attributes on the root
+ *   via group-data-[x]/button-group Tailwind selectors.
+ * - Container-level state attributes:
+ *     data-connected      — variant is "connected"
+ *     data-has-selection  — at least one child button is selected
+ *     data-disabled       — entire group is non-interactive
+ *     data-selection-mode — "single" | "required" | "multi" (when applicable)
+ *
+ * Slot responsibilities:
+ *   buttonGroupRootVariants  — layout container; gap, alignment, motion, disabled state
  *
- * Type-safe variant management for the ButtonGroup container.
- * The container has no colour of its own — it only controls layout
- * (display, width) and the inner gap between child buttons.
+ * MD3 Spec (Inner Gap):
+ *   | Size        | standard   | connected |
+ *   |-------------|------------|-----------|
+ *   | extra-small | 18dp       | 2dp       |
+ *   | small       | 12dp       | 2dp       |
+ *   | medium      | 8dp        | 2dp       |
+ *   | large       | 8dp        | 2dp       |
+ *   | extra-large | 8dp        | 2dp       |
  *
- * MD3 Inner Gap Spec:
- * | Size        | standard   | connected |
- * |-------------|------------|-----------|
- * | extra-small | 18dp       | 2dp       |
- * | small       | 12dp       | 2dp       |
- * | medium      | 8dp        | 2dp       |
- * | large       | 8dp        | 2dp       |
- * | extra-large | 8dp        | 2dp       |
+ * Motion:
+ *   Gap is a spatial property — uses spring-standard-fast-spatial (350ms, no overshoot
+ *   for gap since CSS gap cannot visually overshoot). This ensures smooth transitions
+ *   when the size prop changes or buttons are added/removed.
  *
  * Note: xs/sm standard gaps are intentionally large to preserve 48dp touch targets.
  * Connected gap is always 2dp (`gap-0.5`) regardless of size.
  */
+/**
+ * Root container element — carries `group/button-group` scope via the styled layer.
+ *
+ * Handles:
+ * - Flexbox layout (inline-flex or flex)
+ * - Gap between child buttons (per variant × size)
+ * - Spatial motion for gap transitions
+ * - Disabled state (opacity + pointer-events)
+ */
+declare const buttonGroupRootVariants: (props?: ({
+    variant?: "standard" | "connected" | null | undefined;
+    size?: "small" | "large" | "medium" | "extra-small" | "extra-large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Focus ring overlay for the group container.
+ *
+ * Visible only when the group itself receives keyboard focus (rare — typically
+ * focus goes to child buttons). Included for completeness and edge cases where
+ * the group container might receive programmatic focus.
+ *
+ * Uses the same pattern as Switch/Button focus rings:
+ * - Always in DOM (opacity-0)
+ * - Transitions to opacity-100 on group-data-[focus-visible]
+ */
+declare const buttonGroupFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * @deprecated Use `buttonGroupRootVariants` instead.
+ * Kept for backward compatibility during migration.
+ */
 declare const buttonGroupVariants: (props?: ({
     variant?: "standard" | "connected" | null | undefined;
     size?: "small" | "large" | "medium" | "extra-small" | "extra-large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonGroupRootVariants = VariantProps<typeof buttonGroupRootVariants>;
+type ButtonGroupFocusRingVariants = VariantProps<typeof buttonGroupFocusRingVariants>;
 
 /**
  * Context that provides ButtonGroup state to all child buttons.
@@ -1323,53 +1411,48 @@ declare function useOptionalButtonGroup(): ButtonGroupContextValue | null;
 declare function getConnectedRadiusClasses(ctx: ButtonGroupContextValue, value?: string): readonly string[];
 
 /**
- * Material Design 3 IconButton Variants (CVA)
- *
- * Type-safe variant management for IconButton component.
- * Uses Tailwind CSS classes mapped to MD3 design tokens.
- *
- * Key differences from Button:
- * - Circular shape (not pill-shaped)
- * - Fixed square dimensions
- * - No text content support
- * - 'standard' variant instead of 'elevated'
+ * IconButton variant types (MD3 specification)
  */
-declare const iconButtonVariants: (props?: ({
-    variant?: "filled" | "outlined" | "tonal" | "standard" | null | undefined;
-    color?: "primary" | "secondary" | "tertiary" | "error" | null | undefined;
-    size?: "small" | "large" | "medium" | null | undefined;
-    selected?: boolean | null | undefined;
-    isDisabled?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
 /**
- * Extract variant prop types from CVA
+ * Color scheme (MD3 color roles)
  */
-type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
-
+type IconButtonColor = "primary" | "secondary" | "tertiary" | "error";
 /**
- * IconButton variant types (MD3 specification)
+ * Icon button sizes — M3 Expressive 5-tier system.
+ *
+ * Container heights (dp → px):
+ * - xsmall: 32dp
+ * - small:  40dp
+ * - medium: 56dp (default)
+ * - large:  96dp
+ * - xlarge: 136dp
  */
-type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
+type IconButtonSize = "xsmall" | "small" | "medium" | "large" | "xlarge";
 /**
- * Color scheme
+ * Width variant — adjusts container width relative to height.
+ * - narrow: narrower than height
+ * - default: same width as height (square container)
+ * - wide: wider than height
  */
-type IconButtonColor = "primary" | "secondary" | "tertiary" | "error";
+type IconButtonWidth = "narrow" | "default" | "wide";
 /**
- * IconButton sizes (square dimensions)
+ * Shape variant — controls corner rounding.
+ * - round: fully circular (rounded-full)
+ * - square: size-tiered corner radius (MD3 shape scale)
  */
-type IconButtonSize = "small" | "medium" | "large";
+type IconButtonShape = "round" | "square";
 /**
- * Material Design 3 IconButton Component Props
+ * Material Design 3 Expressive IconButton Component Props
  *
- * Icon-only button component with 4 variants and mandatory accessibility.
- *
- * **Key Features:**
+ * Icon-only button component following the M3 Expressive spec with:
+ * - 5 sizes: xsmall, small, medium (default), large, xlarge
+ * - 3 width options: narrow, default, wide
+ * - 2 shapes: round (circular), square (corner-radius scale)
+ * - Press shape-morph: corners tighten on press when `shape="round"`
+ * - Toggle support: `selected` + `selectedIcon`
  * - 4 variants: standard, filled, tonal, outlined
- * - Icon only (no text content)
- * - Circular shape (MD3 specification)
  * - Mandatory `aria-label` for accessibility
- * - Toggle support with `selected` prop
- * - 48×48px minimum touch target
  *
  * @example
  * ```tsx
@@ -1383,13 +1466,19 @@ type IconButtonSize = "small" | "medium" | "large";
  *   <IconHeart />
  * </IconButton>
  *
- * // Toggle button
+ * // Toggle button with selectedIcon
  * <IconButton
  *   aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
  *   selected={isFavorite}
  *   onPress={() => setIsFavorite(!isFavorite)}
+ *   selectedIcon={<IconStarFilled />}
  * >
- *   {isFavorite ? <IconStarFilled /> : <IconStarOutline />}
+ *   <IconStarOutline />
+ * </IconButton>
+ *
+ * // Large square shape
+ * <IconButton aria-label="Settings" size="large" shape="square">
+ *   <IconSettings />
  * </IconButton>
  *
  * // Disabled
@@ -1410,21 +1499,48 @@ interface IconButtonProps extends AriaButtonProps {
      */
     color?: IconButtonColor;
     /**
-     * Size variant
+     * Size tier (M3 Expressive 5-tier system)
      * @default 'medium'
      */
     size?: IconButtonSize;
     /**
-     * Icon content (React node). Recommended size:
-     * - small: 20×20px
-     * - medium: 24×24px
-     * - large: 28×28px
+     * Container width relative to height.
+     * - `narrow`: slimmer than the container height
+     * - `default`: square container (width = height)
+     * - `wide`: wider than the container height
+     *
+     * @default 'default'
+     */
+    width?: IconButtonWidth;
+    /**
+     * Corner shape.
+     * - `round`: fully circular (pill-shaped)
+     * - `square`: size-tiered corner radius from the MD3 shape scale
+     *
+     * Applies a press shape-morph (corners tighten on press, spring back on release).
+     *
+     * @default 'round'
+     */
+    shape?: IconButtonShape;
+    /**
+     * Icon content. Recommended icon sizes per container size:
+     * - xsmall: 20×20px
+     * - small / medium: 24×24px
+     * - large: 32×32px
+     * - xlarge: 40×40px
      */
     children: React__default.ReactNode;
     /**
-     * Toggle state (for toggle buttons)
-     * When true, button shows selected state
-     * @default false
+     * Icon to display when `selected` is `true`.
+     * When provided with a `selected` prop the button becomes a toggle button.
+     * If omitted, `children` is shown in both states.
+     */
+    selectedIcon?: React__default.ReactNode;
+    /**
+     * Toggle state.
+     * When defined (even as `false`) the button behaves as a toggle button and
+     * `aria-pressed` is set.
+     * @default undefined
      */
     selected?: boolean;
     /**
@@ -1443,8 +1559,8 @@ interface IconButtonProps extends AriaButtonProps {
      */
     value?: string;
     /**
-     * HTML title attribute for tooltip
-     * Recommended for better UX on desktop
+     * HTML title attribute for tooltip.
+     * Recommended for better UX on desktop.
      */
     title?: string;
     /**
@@ -1452,8 +1568,8 @@ interface IconButtonProps extends AriaButtonProps {
      */
     onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * REQUIRED: Accessible label for screen readers
-     * Since IconButton has no visible text, this is mandatory
+     * REQUIRED: Accessible label for screen readers.
+     * Since IconButton has no visible text, this is mandatory.
      *
      * @example
      * aria-label="Delete item"
@@ -1464,19 +1580,27 @@ interface IconButtonProps extends AriaButtonProps {
 }
 
 /**
- * Material Design 3 IconButton Component
+ * Material Design 3 Expressive — IconButton Component (Layer 3: Styled)
  *
- * Icon-only button component following MD3 specifications.
- * Supports 4 variants, toggle mode, and enforces accessibility.
+ * Built on React Aria for world-class accessibility. Implements the
+ * Variants-vs-States architecture: all interaction/selection states are
+ * expressed as data-* attributes (emitted by IconButtonHeadless) and consumed
+ * by each slot via group-data-[x]/icon-button Tailwind selectors — no state
+ * variants in CVA.
  *
- * **Key Features:**
- * - 4 variants: standard, filled, tonal, outlined
- * - Circular shape (MD3 specification)
- * - Mandatory `aria-label` for accessibility
- * - Toggle support with `selected` prop
- * - Ripple effect on interaction
- * - 48×48px minimum touch target
- * - ButtonGroup-aware: applies connected corner radii and min-width when inside a group
+ * Features:
+ * - ✅ M3 Expressive 5-tier sizes: xsmall, small, medium, large, xlarge
+ * - ✅ 3 width options: narrow, default, wide
+ * - ✅ 2 shapes: round (circular), square (MD3 corner scale)
+ * - ✅ Press shape-morph (round shape springs into square corner on press)
+ * - ✅ 4 variants: standard, filled, tonal, outlined
+ * - ✅ 4 color roles: primary, secondary, tertiary, error
+ * - ✅ Toggle support (selected + selectedIcon)
+ * - ✅ MD3-correct state layer: per-variant color, opacity-8/10/10
+ * - ✅ MD3-correct disabled: content opacity-38 + container on-surface/12
+ * - ✅ Ripple effect on press
+ * - ✅ ButtonGroup-aware: connected corner radii + min-width
+ * - ✅ Mandatory aria-label for accessibility
  *
  * @example
  * ```tsx
@@ -1485,86 +1609,94 @@ interface IconButtonProps extends AriaButtonProps {
  *   <IconDelete />
  * </IconButton>
  *
- * // Filled with color
- * <IconButton aria-label="Favorite" variant="filled" color="error">
+ * // Filled with color, large
+ * <IconButton aria-label="Favorite" variant="filled" color="error" size="large">
  *   <IconHeart />
  * </IconButton>
  *
- * // Toggle button
+ * // Toggle button with selectedIcon
  * <IconButton
  *   aria-label={selected ? "Remove favorite" : "Add favorite"}
  *   selected={selected}
  *   onPress={() => setSelected(!selected)}
+ *   selectedIcon={<IconStarFilled />}
  * >
- *   {selected ? <IconStarFilled /> : <IconStarOutline />}
+ *   <IconStarOutline />
  * </IconButton>
  *
- * // Inside a connected ButtonGroup (corner radii applied automatically)
- * <ButtonGroup variant="connected" selectionMode="multi" aria-label="Quick settings">
- *   <IconButton aria-label="Bluetooth"><BluetoothIcon /></IconButton>
- *   <IconButton aria-label="Wi-Fi"><WifiIcon /></IconButton>
- * </ButtonGroup>
+ * // Square shape, wide width
+ * <IconButton aria-label="Menu" shape="square" width="wide" size="medium">
+ *   <IconMenu />
+ * </IconButton>
  * ```
  */
-declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & Omit<IconButtonVariants, "isDisabled" | "selected"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Headless IconButton Component (Layer 2)
  *
  * Unstyled icon button primitive using React Aria for accessibility.
- * Provides behavior only - bring your own styles.
+ * Provides behavior AND emits MD3-compliant data-* interaction attributes
+ * so the styled Layer 3 can drive all visual states through CSS alone.
+ *
+ * Emitted data attributes (via getInteractionDataAttributes):
+ * - `data-hovered`       — pointer is over the button
+ * - `data-focus-visible` — keyboard/programmatic focus is visible
+ * - `data-pressed`       — button is being pressed
+ * - `data-selected`      — toggle button is in the ON state
+ * - `data-disabled`      — button is non-interactive
+ *
+ * Content flags (set explicitly):
+ * - `data-toggle`        — button is a toggle (selected prop is defined)
  *
  * Features:
  * - Full keyboard navigation (Enter, Space)
- * - Screen reader support
+ * - Screen reader support (aria-pressed for toggle buttons)
  * - Touch/pointer event handling
  * - Focus management
+ * - Hover detection (useHover — pointer-only, not keyboard)
  * - Disabled state handling
- * - Toggle button support (aria-pressed)
  *
  * @example
  * ```tsx
- * // Use for custom styling
- * <IconButtonHeadless className="custom-icon-button-class" aria-label="Delete">
+ * // Advanced custom styling
+ * <IconButtonHeadless
+ *   aria-label="Delete"
+ *   className="group/icon-button my-custom-classes"
+ *   isSelected={false}
+ *   isToggle={false}
+ *   isDisabled={false}
+ * >
  *   <IconDelete />
  * </IconButtonHeadless>
  * ```
  */
 interface IconButtonHeadlessProps extends AriaButtonProps {
-    /**
-     * Additional CSS classes
-     */
+    /** Additional CSS classes */
     className?: string;
-    /**
-     * Icon content (React node)
-     */
+    /** Icon content */
     children: React.ReactNode;
-    /**
-     * Tab index for keyboard navigation
-     * @default 0
-     */
+    /** Tab index for keyboard navigation @default 0 */
     tabIndex?: number;
-    /**
-     * Mouse down handler (for ripple effect)
-     */
+    /** Mouse down handler (for ripple effect) */
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Button type attribute
-     * @default 'button'
-     */
+    /** Button type attribute @default 'button' */
     type?: "button" | "submit" | "reset";
     /**
-     * Toggle state (for toggle buttons)
-     * Sets aria-pressed attribute
+     * Toggle selected state.
+     * When defined, sets aria-pressed and emits data-selected / data-toggle.
      */
-    selected?: boolean;
+    isSelected?: boolean;
     /**
-     * REQUIRED: Accessible label for screen readers
+     * Whether this button behaves as a toggle (i.e. selected prop was passed).
+     * Drives `data-toggle` attribute; determines whether aria-pressed is set.
      */
+    isToggle?: boolean;
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** REQUIRED: Accessible label for screen readers */
     "aria-label": string;
-    /**
-     * HTML title attribute for tooltip
-     */
+    /** HTML title attribute for tooltip */
     title?: string;
 }
 declare const IconButtonHeadless: React$1.ForwardRefExoticComponent<IconButtonHeadlessProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -10539,7 +10671,7 @@ type DatePickerContainerVariants = VariantProps<typeof datePickerContainerVarian
  * MD3 spec: 48x48dp circle, various states and types.
  */
 declare const calendarCellVariants: (props?: ({
-    cellType?: "disabled" | "selected" | "default" | "today" | "selected-range-middle" | "outside-month" | null | undefined;
+    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;
 type CalendarCellVariants = VariantProps<typeof calendarCellVariants>;
@@ -10617,4 +10749,4 @@ type DatePickerSupportingTextVariants = VariantProps<typeof datePickerSupporting
 declare const datePickerScrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type DatePickerScrimVariants = VariantProps<typeof datePickerScrimVariants>;
 
-export { AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, type BadgeColor, 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, type ButtonColor, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, ButtonGroupHeadless, type ButtonGroupProps, 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 FABMenuItemProps, type FABMenuItemVariants, 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, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemVariants, 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 { AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, type BadgeColor, 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 FABMenuItemProps, type FABMenuItemVariants, 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, fabMenuItemVariants, 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 };