@tinybigui/react 0.20.0 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -6796,13 +6796,19 @@ interface TooltipTriggerStyledProps {
6796
6796
  * machine so that tooltips fade/scale in on open and fade/scale out before
6797
6797
  * unmounting from the DOM, per MD3 motion specs.
6798
6798
  *
6799
- * Animation state machine:
6799
+ * When `prefers-reduced-motion: reduce` is active the overlay is unmounted
6800
+ * immediately on close — no exit animation, no `animationend` dependency.
6801
+ * This prevents the stuck-mount bug that occurs when the global CSS reset
6802
+ * collapses animations and `animationend` never fires.
6803
+ *
6804
+ * Animation state machine (standard motion):
6800
6805
  * 1. RA fires `onOpenChange(true)` → mount overlay, play entry animation
6801
6806
  * 2. RA fires `onOpenChange(false)` → keep mounted, play exit animation
6802
6807
  * 3. `animationend` fires → unmount overlay
6803
6808
  *
6804
- * The controlled `isOpen={isMounted}` prop passed to `TooltipTriggerHeadless`
6805
- * is what keeps the overlay alive during the exit animation phase.
6809
+ * Animation state machine (reduced motion):
6810
+ * 1. RA fires `onOpenChange(true)` → mount overlay, no animation
6811
+ * 2. RA fires `onOpenChange(false)` → unmount overlay immediately
6806
6812
  *
6807
6813
  * @example
6808
6814
  * ```tsx
@@ -6971,15 +6977,18 @@ interface TooltipHeadlessProps {
6971
6977
  * Renders a single-line text label with MD3 inverse-surface styling.
6972
6978
  * Animation is driven by the `TooltipAnimationContext` provided by
6973
6979
  * `TooltipTrigger`:
6974
- * - Entry: `animate-md-scale-in` (scale 0.85 + fade → natural)
6975
- * - Exit: `animate-md-scale-out` (natural scale 0.85 + fade)
6980
+ * - Entry: `animate-md-scale-in` (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
6981
+ * - Exit: `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
6982
+ * - None: no animation class when `prefers-reduced-motion: reduce` is active
6976
6983
  *
6977
6984
  * MD3 Tokens applied:
6978
- * - `bg-inverse-surface` — inverted surface for max contrast
6979
- * - `text-inverse-on-surface` — content color on inverted surface
6980
- * - `rounded-xs` — 4dp corner radius
6981
- * - `max-w-50` 200dp maximum width
6982
- * - `text-body-small` MD3 body-small typography
6985
+ * - `bg-inverse-surface` — inverted surface for maximum contrast
6986
+ * - `text-inverse-on-surface` — content colour on inverted surface
6987
+ * - `rounded-xs` — 4dp corner radius (CornerExtraSmall)
6988
+ * - `text-body-small` BodySmall typescale (12sp)
6989
+ * - `min-h-6` 24dp minimum height
6990
+ * - `max-w-50` — 200dp maximum width
6991
+ * - `px-2 py-1` — 8dp × 4dp padding
6983
6992
  *
6984
6993
  * Must be used as the second child of `TooltipTrigger`.
6985
6994
  *
@@ -6996,19 +7005,29 @@ declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.
6996
7005
  /**
6997
7006
  * `RichTooltip` — Layer 3 MD3 Rich Tooltip styled component.
6998
7007
  *
6999
- * Supports an optional title, multi-line supporting text, and an optional
7000
- * action button per MD3 Rich Tooltip specification.
7008
+ * Supports an optional title (subhead), multi-line supporting text, and an
7009
+ * optional action button per MD3 Rich Tooltip specification.
7001
7010
  * Animation is driven by the `TooltipAnimationContext` provided by
7002
7011
  * `TooltipTrigger`:
7003
- * - Entry: `animate-md-scale-in` (scale 0.85 + fade → natural)
7004
- * - Exit: `animate-md-scale-out` (natural → scale 0.85 + fade)
7005
- *
7006
- * MD3 Tokens applied:
7007
- * - `bg-surface-container` surface container background
7008
- * - `text-on-surface` content color on surface
7009
- * - `shadow-elevation-2` MD3 elevation level 2
7010
- * - `rounded-md` medium corner radius
7011
- * - `max-w-80` 320dp maximum width
7012
+ * - Entry: `animate-md-scale-in` (expressive-fast-spatial: 350ms)
7013
+ * - Exit: `animate-md-scale-out` (emphasized-accelerate: 200ms)
7014
+ * - None: no animation class when `prefers-reduced-motion: reduce` is active
7015
+ *
7016
+ * MD3 Tokens applied — container:
7017
+ * - `bg-surface-container` surface container background
7018
+ * - `text-on-surface` base content colour
7019
+ * - `shadow-elevation-2` MD3 elevation level 2
7020
+ * - `rounded-md` 12dp corner radius (CornerMedium)
7021
+ * - `max-w-80` — 320dp maximum width
7022
+ * - `px-4 py-3` — 16dp × 12dp padding
7023
+ *
7024
+ * MD3 Tokens applied — subhead (title):
7025
+ * - `text-title-small` — TitleSmall typescale
7026
+ * - `text-on-surface-variant` — subhead colour role per MD3 spec
7027
+ *
7028
+ * MD3 Tokens applied — supporting text:
7029
+ * - `text-body-medium` — BodyMedium typescale
7030
+ * - `text-on-surface-variant` — same colour role as subhead
7012
7031
  *
7013
7032
  * Must be used as the second child of `TooltipTrigger`.
7014
7033
  *
@@ -7091,46 +7110,50 @@ declare function TooltipTriggerHeadless({ children, delay, isDisabled, isOpen, d
7091
7110
  declare function TooltipOverlayHeadless({ tooltipProps: incomingTooltipProps, triggerRef, placement, offset, className, children, onPointerEnter, onPointerLeave, }: TooltipHeadlessProps): JSX$1.Element | null;
7092
7111
 
7093
7112
  /**
7094
- * Material Design 3 Plain Tooltip Variants (CVA)
7113
+ * Plain tooltip container.
7114
+ *
7115
+ * Renders an inline-flex pill that vertically centres a single-line text label
7116
+ * against the 24dp minimum height.
7095
7117
  *
7096
- * Base tokens per MD3 spec:
7097
- * - bg-inverse-surface / text-inverse-on-surface — inverted surface for contrast
7098
- * - rounded-xs 4dp corner radius (CornerExtraSmall)
7099
- * - min-h-6 24dp minimum height
7100
- * - max-w-50 200dp maximum width
7101
- * - w-fit shrink-wrap to content width
7102
- * - px-2 py-1 8dp horizontal, 4dp vertical padding
7103
- * - text-body-small MD3 BodySmall typography (12px)
7118
+ * MD3 Tokens:
7119
+ * - `bg-inverse-surface` — inverted surface for maximum contrast
7120
+ * - `text-inverse-on-surface` content colour on inverted surface
7121
+ * - `rounded-xs` 4dp corner radius (CornerExtraSmall)
7122
+ * - `text-body-small` BodySmall typescale (12sp)
7123
+ * - `min-h-6` 24dp minimum height
7124
+ * - `max-w-50` 200dp maximum width
7125
+ * - `px-2 py-1` 8dp × 4dp padding
7126
+ * - `z-50` — above all page content
7104
7127
  *
7105
- * `isVisible` drives the entry/exit animation class:
7106
- * - true → animate-md-scale-in (component entering with scale+fade)
7107
- * - false → animate-md-scale-out (component exiting with scale+fade)
7128
+ * Motion:
7129
+ * - `enter` `animate-md-scale-in` (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
7130
+ * - `exit` `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
7131
+ * - `none` → no animation class (prefers-reduced-motion guard)
7108
7132
  */
7109
7133
  declare const tooltipVariants: (props?: ({
7110
- isVisible?: boolean | null | undefined;
7134
+ animation?: "none" | "enter" | "exit" | null | undefined;
7111
7135
  } & class_variance_authority_types.ClassProp) | undefined) => string;
7112
7136
  /**
7113
- * Material Design 3 Rich Tooltip Variants (CVA)
7137
+ * Rich tooltip container.
7138
+ *
7139
+ * Wraps the title, supporting text, and optional action row in a flex column.
7114
7140
  *
7115
- * Base tokens per MD3 spec:
7116
- * - bg-surface-container / text-on-surface — surface container background
7117
- * - shadow-elevation-2 MD3 elevation level 2
7118
- * - rounded-md 12dp corner radius (CornerMedium)
7119
- * - min-h-624dp minimum height
7120
- * - max-w-80 320dp maximum width
7121
- * - w-fitshrink-wrap to content width
7122
- * - px-4 py-3 — 16dp horizontal, 12dp vertical padding
7141
+ * MD3 Tokens:
7142
+ * - `bg-surface-container` — surface container background
7143
+ * - `text-on-surface` content colour on surface
7144
+ * - `shadow-elevation-2` MD3 elevation level 2
7145
+ * - `rounded-md`12dp corner radius (CornerMedium)
7146
+ * - `min-h-6` 24dp minimum height
7147
+ * - `max-w-80`320dp maximum width
7148
+ * - `px-4 py-3` — 16dp × 12dp padding
7149
+ * - `z-50` — above all page content
7123
7150
  *
7124
- * `isVisible` drives the entry/exit animation class:
7125
- * - true → animate-md-scale-in (component entering with scale+fade)
7126
- * - false → animate-md-scale-out (component exiting with scale+fade)
7151
+ * Motion: same `animation` variant as plain tooltip.
7127
7152
  */
7128
7153
  declare const richTooltipVariants: (props?: ({
7129
- isVisible?: boolean | null | undefined;
7154
+ animation?: "none" | "enter" | "exit" | null | undefined;
7130
7155
  } & class_variance_authority_types.ClassProp) | undefined) => string;
7131
- /** Variant prop types inferred from `tooltipVariants`. */
7132
7156
  type TooltipVariants = VariantProps<typeof tooltipVariants>;
7133
- /** Variant prop types inferred from `richTooltipVariants`. */
7134
7157
  type RichTooltipVariants = VariantProps<typeof richTooltipVariants>;
7135
7158
 
7136
7159
  /**
@@ -8237,16 +8260,28 @@ declare const badgeVariants: (props?: class_variance_authority_types.ClassProp |
8237
8260
  type BadgeVariants = VariantProps<typeof badgeVariants>;
8238
8261
 
8239
8262
  /**
8240
- * Split Button variant types (Material Design 3).
8263
+ * Split Button variant types (Material Design 3 Expressive).
8241
8264
  *
8242
- * Split buttons only support filled, tonal, and outlined variants
8243
- * per the MD3 specification.
8265
+ * Split buttons support elevated, filled, tonal, and outlined variants,
8266
+ * mirroring the standard Button color schemes per the MD3 Expressive spec.
8267
+ *
8268
+ * @see https://m3.material.io/components/split-button/specs
8244
8269
  */
8245
- type SplitButtonVariant = "filled" | "tonal" | "outlined";
8270
+ type SplitButtonVariant = "elevated" | "filled" | "tonal" | "outlined";
8246
8271
  /**
8247
- * Split Button size options.
8272
+ * Split Button size options (MD3 Expressive size scale).
8273
+ *
8274
+ * | Token | Height | Typography |
8275
+ * |-------|--------|--------------------|
8276
+ * | xs | 32dp | Label Large |
8277
+ * | sm | 40dp | Label Large |
8278
+ * | md | 56dp | Title Medium |
8279
+ * | lg | 96dp | Headline Small |
8280
+ * | xl | 136dp | Headline Large |
8281
+ *
8282
+ * @default 'sm'
8248
8283
  */
8249
- type SplitButtonSize = "small" | "medium" | "large";
8284
+ type SplitButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
8250
8285
  /**
8251
8286
  * Represents a single item in the split button dropdown menu.
8252
8287
  *
@@ -8272,9 +8307,9 @@ interface SplitButtonMenuItem {
8272
8307
  /**
8273
8308
  * Props for the headless `SplitButtonHeadless` primitive (Layer 2).
8274
8309
  *
8275
- * A Split Button groups a primary action with a dropdown trigger that reveals
8276
- * secondary actions in a menu. Both segments are independently focusable and
8277
- * accessible.
8310
+ * A Split Button groups a leading action button with a trailing dropdown
8311
+ * trigger that reveals secondary actions in a menu. Both segments are
8312
+ * independently focusable and accessible.
8278
8313
  *
8279
8314
  * @example
8280
8315
  * ```tsx
@@ -8295,15 +8330,15 @@ interface SplitButtonHeadlessProps {
8295
8330
  */
8296
8331
  variant?: SplitButtonVariant;
8297
8332
  /**
8298
- * Size of the split button.
8299
- * @default 'medium'
8333
+ * Size of the split button per the MD3 Expressive size scale.
8334
+ * @default 'sm'
8300
8335
  */
8301
8336
  size?: SplitButtonSize;
8302
- /** Label text displayed in the primary action segment. */
8337
+ /** Label text displayed in the leading action segment. */
8303
8338
  primaryLabel: string;
8304
- /** Callback invoked when the primary action segment is pressed. */
8339
+ /** Callback invoked when the leading action segment is pressed. */
8305
8340
  onPrimaryAction: (e: PressEvent) => void;
8306
- /** Menu items displayed in the dropdown when the trigger is activated. */
8341
+ /** Menu items displayed in the dropdown when the trailing trigger is activated. */
8307
8342
  items: SplitButtonMenuItem[];
8308
8343
  /**
8309
8344
  * Whether both segments are disabled.
@@ -8319,29 +8354,40 @@ interface SplitButtonHeadlessProps {
8319
8354
  * Props for the styled `SplitButton` component (Layer 3).
8320
8355
  *
8321
8356
  * Extends the headless props with identical API surface; the styled layer
8322
- * applies MD3 visual tokens and CVA variants on top of the headless primitive.
8357
+ * applies MD3 Expressive visual tokens and CVA variants on top of the
8358
+ * headless primitive.
8323
8359
  */
8324
8360
  type SplitButtonProps = SplitButtonHeadlessProps;
8325
8361
 
8326
8362
  /**
8327
- * Material Design 3 Split Button Component (Layer 3: Styled)
8363
+ * Material Design 3 Expressive Split Button Component (Layer 3: Styled)
8328
8364
  *
8329
- * Combines a primary action button with a dropdown trigger that reveals
8330
- * secondary actions in a menu. Both segments include MD3 state layers and
8331
- * ripple effects.
8365
+ * Combines a leading action button with a trailing dropdown trigger that reveals
8366
+ * secondary actions in a menu. Both segments have full MD3 Expressive state layers,
8367
+ * per-segment focus rings, and inner-corner shape morphing.
8368
+ *
8369
+ * Implements the Variants-vs-States architecture: all interaction states are
8370
+ * expressed as data-* attributes on each segment root and consumed by child
8371
+ * slots via group-data-[x]/sb-leading and group-data-[x]/sb-trailing selectors.
8332
8372
  *
8333
8373
  * Features:
8334
- * - 3 MD3 variants: filled, tonal, outlined
8335
- * - Per-segment state layers (hover 8%, focus/pressed 12%)
8374
+ * - 4 MD3 variants: elevated, filled, tonal, outlined
8375
+ * - 5 MD3 Expressive sizes: xs, sm, md, lg, xl
8376
+ * - Per-segment React Aria interaction tracking (hover, focus, press)
8377
+ * - Per-segment MD3 state layers (hover 8%, focus 10%, pressed 10%)
8378
+ * - Per-segment focus rings (extends outside overflow-hidden)
8336
8379
  * - Ripple effect on both segments
8380
+ * - Inner-corner shape morphing on interaction (MD3 Expressive signature)
8381
+ * - 2dp gap between segments per MD3 spec
8337
8382
  * - Chevron rotation animation on menu open
8338
- * - Visual divider between segments per MD3 spec
8383
+ * - useReducedMotion guard on all JS-driven transitions
8339
8384
  * - Full keyboard accessibility via React Aria
8340
8385
  *
8341
8386
  * @example
8342
8387
  * ```tsx
8343
8388
  * <SplitButton
8344
8389
  * variant="filled"
8390
+ * size="sm"
8345
8391
  * primaryLabel="Save"
8346
8392
  * onPrimaryAction={() => console.log('saved')}
8347
8393
  * items={[
@@ -8360,12 +8406,12 @@ declare const SplitButton: React$1.ForwardRefExoticComponent<SplitButtonHeadless
8360
8406
  * Provides behavior only — bring your own styles.
8361
8407
  *
8362
8408
  * Structure:
8363
- * - Primary segment: triggers the main action
8364
- * - Divider: visual separator (1dp vertical line)
8365
- * - Dropdown trigger: opens/closes the dropdown menu
8409
+ * - Leading segment: triggers the main action
8410
+ * - Trailing segment: opens/closes the dropdown menu
8411
+ * (separated by a 2dp gap in the styled layer; no divider element here)
8366
8412
  *
8367
8413
  * Both segments are independently focusable via Tab navigation.
8368
- * The dropdown trigger manages `aria-haspopup` and `aria-expanded`.
8414
+ * The trailing trigger manages `aria-haspopup` and `aria-expanded`.
8369
8415
  *
8370
8416
  * @example
8371
8417
  * ```tsx
@@ -8382,60 +8428,192 @@ declare const SplitButton: React$1.ForwardRefExoticComponent<SplitButtonHeadless
8382
8428
  declare const SplitButtonHeadless: React$1.ForwardRefExoticComponent<SplitButtonHeadlessProps & React$1.RefAttributes<HTMLDivElement>>;
8383
8429
 
8384
8430
  /**
8385
- * Material Design 3 Split Button — Container Variants (CVA)
8431
+ * Material Design 3 Expressive Split Button Variants
8432
+ *
8433
+ * Architecture: Variants vs States
8434
+ * - CVA holds design-time structure only (no disabled/pressed/hovered state variants).
8435
+ * - All interaction states are driven by data-* attributes on each segment's root via
8436
+ * group-data-[x]/sb-leading and group-data-[x]/sb-trailing Tailwind selectors.
8437
+ * - Inner-corner radius morphing is driven by a CSS variable (--sb-inner-radius) on
8438
+ * the segment root to avoid specificity battles — the same technique as Switch's
8439
+ * --switch-handle-size.
8440
+ *
8441
+ * Slot responsibilities:
8442
+ * splitButtonContainerVariants — outer wrapper; gap between the two segments
8443
+ * splitButtonLeadingVariants — leading (primary) button segment; shape + color
8444
+ * splitButtonTrailingVariants — trailing (dropdown trigger) button segment; shape + color
8445
+ * splitButtonStateLayerVariants — per-segment hover/focus/press opacity overlay
8446
+ * splitButtonFocusRingVariants — per-segment keyboard focus outline (extends outside overflow-hidden)
8447
+ * splitButtonLabelVariants — leading label text slot
8448
+ * splitButtonIconVariants — icon wrapper; carries per-size optical offset + selected reset
8449
+ * splitButtonMenuVariants — dropdown menu surface
8450
+ * splitButtonMenuItemVariants — individual menu item row
8451
+ *
8452
+ * MD3 Expressive Specs:
8453
+ * Shape: outer corners rounded-full; inner corners morph on interaction
8454
+ * Height: 32dp xs | 40dp sm | 56dp md | 96dp lg | 136dp xl
8455
+ * Trailing segment is always square (width = height); selected state = perfect circle
8456
+ * Gap between segments: 2dp (gap-0.5)
8457
+ * Icon size: 20px xs/sm | 24px md | 32px lg | 40px xl
8458
+ * State-layer opacities: hover 8% | focus 10% | pressed 10%
8459
+ * Disabled: container on-surface/12 | content on-surface/38
8460
+ * Elevation: elevated base=1 hover=2; filled/tonal base=0 hover=1; outlined none
8461
+ *
8462
+ * Inner-corner radius morph table (--sb-inner-radius CSS variable):
8463
+ *
8464
+ * Size Rest Hover / Focus Pressed (stronger) Selected (trailing)
8465
+ * xs/sm/md --radius-xs --radius-sm --radius-lg --radius-full
8466
+ * lg --radius-sm --radius-lg --radius-xl --radius-full
8467
+ * xl --radius-md --radius-lg --radius-xl --radius-full
8468
+ *
8469
+ * Specificity ladder (CSS attribute selector weight, all at same cascade layer):
8470
+ * rest → [--sb-inner-radius:...] (0,0,0 base class)
8471
+ * hovered → data-[hovered]: (0,1,0)
8472
+ * focus-visible → data-[fv]:data-[fv]: (0,2,0)
8473
+ * pressed → data-[pressed]:data-[pressed]:data-[pressed]: (0,3,0)
8474
+ * selected → data-[sel]:data-[sel]:data-[sel]:data-[sel]: (0,4,0) — always wins
8475
+ *
8476
+ * Motion token pairing:
8477
+ * Border-radius / transform (spatial) → duration-expressive-fast-spatial ease-expressive-fast-spatial
8478
+ * Opacity / color / shadow (effects) → duration-spring-standard-fast-effects ease-spring-standard-fast-effects
8479
+ *
8480
+ * Chevron optical offset (MD3 spec — trailing icon shifts toward center gap when unselected):
8481
+ * xs/sm: -1dp md: -2dp lg: -3dp xl: -6dp
8482
+ * Resets to translate-x-0 when group-data-[selected]/sb-trailing is present.
8483
+ */
8484
+ /**
8485
+ * Outer wrapper div — lays out leading + trailing with a 2dp gap.
8486
+ * Does NOT own any color, shape, or elevation — those belong to each segment.
8487
+ */
8488
+ declare const splitButtonContainerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8489
+ /**
8490
+ * Leading segment — the primary action button.
8491
+ *
8492
+ * Shape:
8493
+ * outer corners (top-left, bottom-left) = rounded-full
8494
+ * inner corners (top-right, bottom-right) = var(--sb-inner-radius), driven by
8495
+ * self-targeting data-[x]: selectors on this element for the CSS variable.
8386
8496
  *
8387
- * Defines the outer container styling for the split button group.
8388
- * Maps `variant`, `size`, and `isDisabled` to MD3 design tokens via Tailwind.
8497
+ * The doubled data-[x]:data-[x]: selector for pressed/focus achieves higher
8498
+ * specificity than single hover, mirroring the Switch handle-size technique.
8389
8499
  */
8390
- declare const splitButtonContainerVariants: (props?: ({
8391
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8392
- size?: "small" | "large" | "medium" | null | undefined;
8393
- isDisabled?: boolean | null | undefined;
8500
+ declare const splitButtonLeadingVariants: (props?: ({
8501
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8502
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8394
8503
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8395
8504
  /**
8396
- * Material Design 3 Split Button Primary Segment Variants (CVA)
8505
+ * Trailing segmentthe dropdown trigger.
8397
8506
  *
8398
- * Applies text color, padding, and the Tailwind group name (`group/primary`)
8399
- * to the primary action segment. The group name is required so that the
8400
- * nested state-layer span can target `group-hover/primary:opacity-8`.
8401
- * The divider between segments is rendered via the dropdown's `border-l`.
8507
+ * Shape mirrors leading but mirrored: outer corners right, inner corners left.
8508
+ * Uses group/sb-trailing for child slot selectors.
8509
+ * Gets data-selected when the menu is open (icon centers per MD3 spec).
8402
8510
  */
8403
- declare const splitButtonPrimaryVariants: (props?: ({
8404
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8405
- size?: "small" | "large" | "medium" | null | undefined;
8511
+ declare const splitButtonTrailingVariants: (props?: ({
8512
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8513
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8406
8514
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8407
8515
  /**
8408
- * Material Design 3 Split Button Dropdown Trigger Variants (CVA)
8516
+ * Per-segment state layer absolute inset overlay that transitions opacity.
8409
8517
  *
8410
- * Applies text color, padding, the visual divider (left border), and the
8411
- * Tailwind group name (`group/dropdown`) to the dropdown trigger segment.
8412
- * The group name is required so that the nested state-layer span can target
8413
- * `group-hover/dropdown:opacity-8`.
8518
+ * overflow-hidden clips ripple + state layer to the button shape without
8519
+ * affecting the focus ring span (which lives outside this element).
8520
+ *
8521
+ * Color is variant-specific (MD3 "on-container" role):
8522
+ * filled → bg-on-primary
8523
+ * tonal → bg-on-secondary-container
8524
+ * outlined → bg-primary
8525
+ * elevated → bg-primary
8526
+ *
8527
+ * Opacities:
8528
+ * 0 at rest | 8% hover | 10% focus | 10% pressed | hidden disabled
8529
+ *
8530
+ * The doubled attribute selector for pressed gives it higher specificity (0,2,0)
8531
+ * than the single hover selector (0,1,0), ensuring pressed always wins.
8532
+ *
8533
+ * groupScope controls whether this reads from group/sb-leading or group/sb-trailing.
8414
8534
  */
8415
- declare const splitButtonDropdownVariants: (props?: ({
8416
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8417
- size?: "small" | "large" | "medium" | null | undefined;
8535
+ declare const splitButtonStateLayerVariants: (props?: ({
8536
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8537
+ groupScope?: "leading" | "trailing" | null | undefined;
8538
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8539
+ /**
8540
+ * Per-segment focus ring overlay.
8541
+ *
8542
+ * Rendered as an absolute span with inset-[-3px] so it extends 3px outside
8543
+ * the segment boundary. Requires that overflow-hidden is NOT on the segment
8544
+ * root — it is moved to the state-layer span instead.
8545
+ *
8546
+ * Always present in DOM (opacity-0 at rest) for smooth CSS transition.
8547
+ */
8548
+ declare const splitButtonFocusRingVariants: (props?: ({
8549
+ groupScope?: "leading" | "trailing" | null | undefined;
8550
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8551
+ /**
8552
+ * Label text wrapper — z-10 keeps it above state layer and ripple.
8553
+ * Typography is inherited from the leading segment's size class.
8554
+ */
8555
+ declare const splitButtonLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8556
+ /**
8557
+ * Icon wrapper (leading or trailing chevron).
8558
+ *
8559
+ * Size scales with the button size per MD3 spec:
8560
+ * xs/sm → 20px | md → 24px | lg → 32px | xl → 40px
8561
+ *
8562
+ * For the trailing chevron the MD3 spec calls for an optical offset toward the
8563
+ * gap between segments when the button is unselected, and resets to centered
8564
+ * when selected (menu open). The offset is applied as a negative translate-x
8565
+ * and reverted via group-data-[selected]/sb-trailing:translate-x-0.
8566
+ *
8567
+ * Chevron optical offsets (trailing only):
8568
+ * xs/sm: -1dp md: -2dp lg: -3dp xl: -6dp
8569
+ */
8570
+ declare const splitButtonIconVariants: (props?: ({
8571
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8572
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8573
+ /**
8574
+ * Dropdown menu surface — elevated container, positioned below the trailing segment.
8575
+ */
8576
+ declare const splitButtonMenuVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8577
+ /**
8578
+ * Individual menu item row.
8579
+ */
8580
+ declare const splitButtonMenuItemVariants: (props?: ({
8581
+ isDisabled?: boolean | null | undefined;
8418
8582
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8419
8583
  type SplitButtonContainerVariants = VariantProps<typeof splitButtonContainerVariants>;
8420
- type SplitButtonPrimaryVariants = VariantProps<typeof splitButtonPrimaryVariants>;
8421
- type SplitButtonDropdownVariants = VariantProps<typeof splitButtonDropdownVariants>;
8584
+ type SplitButtonLeadingVariants = VariantProps<typeof splitButtonLeadingVariants>;
8585
+ type SplitButtonTrailingVariants = VariantProps<typeof splitButtonTrailingVariants>;
8586
+ type SplitButtonStateLayerVariants = VariantProps<typeof splitButtonStateLayerVariants>;
8587
+ type SplitButtonFocusRingVariants = VariantProps<typeof splitButtonFocusRingVariants>;
8588
+ type SplitButtonIconVariants = VariantProps<typeof splitButtonIconVariants>;
8589
+ type SplitButtonMenuItemVariantProps = VariantProps<typeof splitButtonMenuItemVariants>;
8422
8590
  /**
8423
- * Convenience bundle of all three Split Button CVA functions.
8424
- * Useful for consumers that want a single import point.
8591
+ * Convenience bundle of all Split Button CVA functions.
8425
8592
  */
8426
8593
  declare const splitButtonVariants: {
8427
- container: (props?: ({
8428
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8429
- size?: "small" | "large" | "medium" | null | undefined;
8430
- isDisabled?: boolean | null | undefined;
8594
+ container: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8595
+ leading: (props?: ({
8596
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8597
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8598
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8599
+ trailing: (props?: ({
8600
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8601
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8431
8602
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8432
- primary: (props?: ({
8433
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8434
- size?: "small" | "large" | "medium" | null | undefined;
8603
+ stateLayer: (props?: ({
8604
+ variant?: "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
8605
+ groupScope?: "leading" | "trailing" | null | undefined;
8435
8606
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8436
- dropdown: (props?: ({
8437
- variant?: "filled" | "outlined" | "tonal" | null | undefined;
8438
- size?: "small" | "large" | "medium" | null | undefined;
8607
+ focusRing: (props?: ({
8608
+ groupScope?: "leading" | "trailing" | null | undefined;
8609
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8610
+ label: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8611
+ icon: (props?: ({
8612
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
8613
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8614
+ menu: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8615
+ menuItem: (props?: ({
8616
+ isDisabled?: boolean | null | undefined;
8439
8617
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8440
8618
  };
8441
8619
 
@@ -12095,4 +12273,4 @@ type DateFieldVariants = VariantProps<typeof dateFieldVariants>;
12095
12273
  declare const dateSegmentPlaceholderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
12096
12274
  type DateSegmentPlaceholderVariants = VariantProps<typeof dateSegmentPlaceholderVariants>;
12097
12275
 
12098
- export { type ActionButtonFocusRingVariants, type ActionButtonSlotProps, type ActionButtonStateLayerVariants, type ActionButtonVariants, type ActionRowVariants, AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, BadgeContent, type BadgeContentProps, BadgeHeadless, type BadgeHeadlessProps, type BadgeProps, type BadgeVariants, BottomSheet, type BottomSheetAnimationState, type BottomSheetAnimationVariants, BottomSheetContext, type BottomSheetContextValue, BottomSheetHandle, type BottomSheetHandleProps, type BottomSheetHandleVariants, BottomSheetHeadless, type BottomSheetHeadlessProps, type BottomSheetProps, type BottomSheetScrimVariants, type BottomSheetVariant, type BottomSheetVariants, Button, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupFocusRingVariants, ButtonGroupHeadless, type ButtonGroupProps, type ButtonGroupRootVariants, type ButtonGroupSelectionMode, type ButtonGroupShape, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarCellComponentProps, type CalendarCellFocusRingVariants, type CalendarCellProps, type CalendarCellStateLayerVariants, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarCoreProps, type CalendarDividerVariants, type CalendarGridProps, type CalendarHeaderVariants, type CalendarSlots, type CalendarTitleIconVariants, type CalendarTitleStateLayerVariants, type CalendarTitleTextVariants, type CalendarTitleVariants, type CalendarView, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardHeadless, type CardHeadlessProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, type CardVariants, Checkbox, type CheckboxProps, Chip, ChipHeadless, type ChipHeadlessProps, type ChipProps, ChipSet, type ChipSetProps, type ChipSurface, type ChipType, type ChipVariants, type ClockDialContainerVariants, type ClockDialNumberVariants, type ClockDialProps, type ClockHandCenterVariants, type ClockHandHandleVariants, type ClockHandProps, type ClockHandTrackVariants, type ClockSelectionMode, DateField, type DateFieldProps, type DateFieldVariants, type DateInputErrorVariants, type DateInputFieldGroupVariants, type DateInputFieldProps, type DateInputFieldVariants, type DateInputLabelVariants, DatePicker, type DatePickerActionsProps, type DatePickerCalendarSlots, type DatePickerContainerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeadlessProps, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerProps, type DatePickerRenderState, type DatePickerVariant, type DateSegmentPlaceholderVariants, type DateSelectionMode, Dialog, DialogActions, type DialogActionsProps, type DialogAnimationState, DialogContent, type DialogContentProps, DialogContext, type DialogContextValue, DialogHeadless, type DialogHeadlessProps, DialogHeadline, type DialogHeadlineProps, type DialogProps, type DialogVariant, Divider, DividerHeadless, type DividerHeadlessProps, type DividerInset, type DividerOrientation, type DividerProps, type DividerVariants, type DockedFieldGroupVariants, type DockedLabelVariants, type DockedTriggerStateLayerVariants, type DockedTriggerVariants, Drawer, type DrawerContextValue, DrawerIconOnlyContext, DrawerItem, type DrawerItemBadgeConfig, type DrawerItemProps, type DrawerProps, DrawerSection, type DrawerSectionProps, type DrawerVariant, FAB, type FABColor, FABHeadless, type FABHeadlessProps, FABMenu, FABMenuContext, type FABMenuContextValue, type FABMenuDirection, FABMenuHeadless, type FABMenuHeadlessProps, FABMenuItem, type FABMenuItemColor, type FABMenuItemFocusRingVariants, type FABMenuItemIconVariants, type FABMenuItemLabelVariants, type FABMenuItemProps, type FABMenuItemStateLayerVariants, type FABMenuItemVariants, type FABMenuListVariants, type FABMenuProps, type FABMenuVariants, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, type HeadlessMenuItemProps, type HeadlessMenuProps, HeadlessMenuSection, type HeadlessMenuSectionProps, HeadlessMenuTrigger, type HeadlessMenuTriggerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, type HeadlineVariants, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, List, type ListDensity, ListHeadless, type ListHeadlessProps, ListItem, ListItemHeadless, ListItemLeading, type ListItemLeadingProps, type ListItemProps, ListItemText, type ListItemTextProps, ListItemTrailing, type ListItemTrailingProps, type ListItemVariants, type ListLeadingType, type ListProps, type ListTrailingType, type ListVariants, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Menu, type MenuContainerVariants, MenuContext, type MenuContextValue, MenuDivider, type MenuDividerProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type ModalDialogVariants, type ModalHeaderVariants, type ModeToggleStateLayerVariants, type ModeToggleVariants, type NavButtonComponentProps, type NavButtonFocusRingVariants, type NavButtonStateLayerVariants, type NavButtonVariants, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, type PopoverVariants, Progress, ProgressHeadless, type ProgressHeadlessProps, type ProgressProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, type RangeCalendarProps, RichTooltip, type RichTooltipProps, type RichTooltipVariants, STATE_LAYER_OPACITY, type ScrimVariants, Search, SearchBar, SearchBarHeadless, type SearchBarHeadlessProps, type SearchBarProps, type SearchLayout, type SearchProps, type SearchStyle, SearchView, SearchViewHeadless, type SearchViewHeadlessProps, type SearchViewProps, Slider, SliderHeadless, type SliderHeadlessProps, type SliderOrientation, type SliderProps, type SliderRangeThumbLabels, type SliderRenderState, type SliderSize, type SliderThumbProps, type SliderThumbState, type SliderVariant, Snackbar, type SnackbarAction, SnackbarContext, type SnackbarContextValue, SnackbarHeadless, type SnackbarHeadlessProps, type SnackbarItem, type SnackbarProps, SnackbarProvider, type SnackbarProviderProps, type SnackbarSeverity, SplitButton, type SplitButtonContainerVariants, type SplitButtonDropdownVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonMenuItem, type SplitButtonPrimaryVariants, type SplitButtonProps, type SplitButtonSize, type SplitButtonVariant, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, type SupportingTextVariants, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, type TabItem, type TabLayout, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsProps, TextField, type TextFieldProps, type TextFieldVariant, type TimeFormat, type TimeInputFieldProps, type TimeInputFieldVariants, type TimePeriod, TimePicker, type TimePickerActionButtonVariants, type TimePickerActionRowVariants, type TimePickerContainerVariants, TimePickerDial, type TimePickerDialProps, type TimePickerHeadlessProps, type TimePickerHeadlineVariants, TimePickerInput, type TimePickerInputProps, type TimePickerModeToggleVariants, type TimePickerOrientation, type TimePickerProps, type TimePickerRenderState, type TimePickerVariant, type TimeSelectorContainerVariants, type TimeSelectorProps, type TimeSeparatorVariants, type TimeValue, type TitleComponentProps, Tooltip, type TooltipHeadlessProps, TooltipOverlayHeadless, type TooltipPlacement, type TooltipProps, TooltipTrigger, TooltipTriggerHeadless, type TooltipTriggerProps, type TooltipTriggerStyledProps, type TooltipVariant, type TooltipVariants, type TypographyProperty, type TypographyStyleObject, type UseBottomSheetDragOptions, type UseBottomSheetDragReturn, type WeekdayVariants, type YearGridVariants, type YearItemComponentProps, type YearItemFocusRingVariants, type YearItemStateLayerVariants, type YearItemVariants, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
12276
+ export { type ActionButtonFocusRingVariants, type ActionButtonSlotProps, type ActionButtonStateLayerVariants, type ActionButtonVariants, type ActionRowVariants, AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, BadgeContent, type BadgeContentProps, BadgeHeadless, type BadgeHeadlessProps, type BadgeProps, type BadgeVariants, BottomSheet, type BottomSheetAnimationState, type BottomSheetAnimationVariants, BottomSheetContext, type BottomSheetContextValue, BottomSheetHandle, type BottomSheetHandleProps, type BottomSheetHandleVariants, BottomSheetHeadless, type BottomSheetHeadlessProps, type BottomSheetProps, type BottomSheetScrimVariants, type BottomSheetVariant, type BottomSheetVariants, Button, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupFocusRingVariants, ButtonGroupHeadless, type ButtonGroupProps, type ButtonGroupRootVariants, type ButtonGroupSelectionMode, type ButtonGroupShape, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarCellComponentProps, type CalendarCellFocusRingVariants, type CalendarCellProps, type CalendarCellStateLayerVariants, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarCoreProps, type CalendarDividerVariants, type CalendarGridProps, type CalendarHeaderVariants, type CalendarSlots, type CalendarTitleIconVariants, type CalendarTitleStateLayerVariants, type CalendarTitleTextVariants, type CalendarTitleVariants, type CalendarView, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardHeadless, type CardHeadlessProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, type CardVariants, Checkbox, type CheckboxProps, Chip, ChipHeadless, type ChipHeadlessProps, type ChipProps, ChipSet, type ChipSetProps, type ChipSurface, type ChipType, type ChipVariants, type ClockDialContainerVariants, type ClockDialNumberVariants, type ClockDialProps, type ClockHandCenterVariants, type ClockHandHandleVariants, type ClockHandProps, type ClockHandTrackVariants, type ClockSelectionMode, DateField, type DateFieldProps, type DateFieldVariants, type DateInputErrorVariants, type DateInputFieldGroupVariants, type DateInputFieldProps, type DateInputFieldVariants, type DateInputLabelVariants, DatePicker, type DatePickerActionsProps, type DatePickerCalendarSlots, type DatePickerContainerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeadlessProps, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerProps, type DatePickerRenderState, type DatePickerVariant, type DateSegmentPlaceholderVariants, type DateSelectionMode, Dialog, DialogActions, type DialogActionsProps, type DialogAnimationState, DialogContent, type DialogContentProps, DialogContext, type DialogContextValue, DialogHeadless, type DialogHeadlessProps, DialogHeadline, type DialogHeadlineProps, type DialogProps, type DialogVariant, Divider, DividerHeadless, type DividerHeadlessProps, type DividerInset, type DividerOrientation, type DividerProps, type DividerVariants, type DockedFieldGroupVariants, type DockedLabelVariants, type DockedTriggerStateLayerVariants, type DockedTriggerVariants, Drawer, type DrawerContextValue, DrawerIconOnlyContext, DrawerItem, type DrawerItemBadgeConfig, type DrawerItemProps, type DrawerProps, DrawerSection, type DrawerSectionProps, type DrawerVariant, FAB, type FABColor, FABHeadless, type FABHeadlessProps, FABMenu, FABMenuContext, type FABMenuContextValue, type FABMenuDirection, FABMenuHeadless, type FABMenuHeadlessProps, FABMenuItem, type FABMenuItemColor, type FABMenuItemFocusRingVariants, type FABMenuItemIconVariants, type FABMenuItemLabelVariants, type FABMenuItemProps, type FABMenuItemStateLayerVariants, type FABMenuItemVariants, type FABMenuListVariants, type FABMenuProps, type FABMenuVariants, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, type HeadlessMenuItemProps, type HeadlessMenuProps, HeadlessMenuSection, type HeadlessMenuSectionProps, HeadlessMenuTrigger, type HeadlessMenuTriggerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, type HeadlineVariants, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, List, type ListDensity, ListHeadless, type ListHeadlessProps, ListItem, ListItemHeadless, ListItemLeading, type ListItemLeadingProps, type ListItemProps, ListItemText, type ListItemTextProps, ListItemTrailing, type ListItemTrailingProps, type ListItemVariants, type ListLeadingType, type ListProps, type ListTrailingType, type ListVariants, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Menu, type MenuContainerVariants, MenuContext, type MenuContextValue, MenuDivider, type MenuDividerProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type ModalDialogVariants, type ModalHeaderVariants, type ModeToggleStateLayerVariants, type ModeToggleVariants, type NavButtonComponentProps, type NavButtonFocusRingVariants, type NavButtonStateLayerVariants, type NavButtonVariants, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, type PopoverVariants, Progress, ProgressHeadless, type ProgressHeadlessProps, type ProgressProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, type RangeCalendarProps, RichTooltip, type RichTooltipProps, type RichTooltipVariants, STATE_LAYER_OPACITY, type ScrimVariants, Search, SearchBar, SearchBarHeadless, type SearchBarHeadlessProps, type SearchBarProps, type SearchLayout, type SearchProps, type SearchStyle, SearchView, SearchViewHeadless, type SearchViewHeadlessProps, type SearchViewProps, Slider, SliderHeadless, type SliderHeadlessProps, type SliderOrientation, type SliderProps, type SliderRangeThumbLabels, type SliderRenderState, type SliderSize, type SliderThumbProps, type SliderThumbState, type SliderVariant, Snackbar, type SnackbarAction, SnackbarContext, type SnackbarContextValue, SnackbarHeadless, type SnackbarHeadlessProps, type SnackbarItem, type SnackbarProps, SnackbarProvider, type SnackbarProviderProps, type SnackbarSeverity, SplitButton, type SplitButtonContainerVariants, type SplitButtonFocusRingVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonIconVariants, type SplitButtonLeadingVariants, type SplitButtonMenuItem, type SplitButtonMenuItemVariantProps, type SplitButtonProps, type SplitButtonSize, type SplitButtonStateLayerVariants, type SplitButtonTrailingVariants, type SplitButtonVariant, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, type SupportingTextVariants, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, type TabItem, type TabLayout, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsProps, TextField, type TextFieldProps, type TextFieldVariant, type TimeFormat, type TimeInputFieldProps, type TimeInputFieldVariants, type TimePeriod, TimePicker, type TimePickerActionButtonVariants, type TimePickerActionRowVariants, type TimePickerContainerVariants, TimePickerDial, type TimePickerDialProps, type TimePickerHeadlessProps, type TimePickerHeadlineVariants, TimePickerInput, type TimePickerInputProps, type TimePickerModeToggleVariants, type TimePickerOrientation, type TimePickerProps, type TimePickerRenderState, type TimePickerVariant, type TimeSelectorContainerVariants, type TimeSelectorProps, type TimeSeparatorVariants, type TimeValue, type TitleComponentProps, Tooltip, type TooltipHeadlessProps, TooltipOverlayHeadless, type TooltipPlacement, type TooltipProps, TooltipTrigger, TooltipTriggerHeadless, type TooltipTriggerProps, type TooltipTriggerStyledProps, type TooltipVariant, type TooltipVariants, type TypographyProperty, type TypographyStyleObject, type UseBottomSheetDragOptions, type UseBottomSheetDragReturn, type WeekdayVariants, type YearGridVariants, type YearItemComponentProps, type YearItemFocusRingVariants, type YearItemStateLayerVariants, type YearItemVariants, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };