@tinybigui/react 0.6.0 → 0.8.0

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
@@ -3647,137 +3647,6 @@ declare const HeadlessNavigationBar: React$1.ForwardRefExoticComponent<HeadlessN
3647
3647
  */
3648
3648
  declare const HeadlessNavigationBarItem: React$1.ForwardRefExoticComponent<HeadlessNavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
3649
3649
 
3650
- /**
3651
- * Badge color roles (Material Design 3)
3652
- */
3653
- type BadgeColor = "error" | "primary";
3654
- /**
3655
- * Props for the BadgeContent indicator element.
3656
- *
3657
- * Renders either a small dot (no count) or a count pill (with count).
3658
- */
3659
- interface BadgeContentProps {
3660
- /**
3661
- * Numeric count to display. When omitted, renders a small dot indicator.
3662
- */
3663
- count?: number | undefined;
3664
- /**
3665
- * Maximum displayable count. Values exceeding this render as `"${max}+"`.
3666
- * @default 999
3667
- */
3668
- max?: number;
3669
- /**
3670
- * Badge color role mapped to MD3 design tokens.
3671
- * @default 'error'
3672
- */
3673
- color?: BadgeColor;
3674
- /**
3675
- * Whether the badge is invisible (scale-0 / opacity-0).
3676
- * @default false
3677
- */
3678
- invisible?: boolean;
3679
- /**
3680
- * Accessible label override. Defaults to `"New"` for dot badges
3681
- * or `"${count} notifications"` for count badges.
3682
- */
3683
- "aria-label"?: string | undefined;
3684
- /**
3685
- * Whether to skip transition animations (reduced motion).
3686
- * @default false
3687
- */
3688
- reducedMotion?: boolean;
3689
- /**
3690
- * Additional CSS classes merged via `cn()`.
3691
- */
3692
- className?: string;
3693
- }
3694
- /**
3695
- * Props for the headless Badge wrapper.
3696
- *
3697
- * Provides the structural `relative inline-flex` container that positions
3698
- * the badge indicator absolutely over the host element.
3699
- */
3700
- interface BadgeHeadlessProps {
3701
- /**
3702
- * Whether the badge indicator is invisible.
3703
- */
3704
- invisible?: boolean;
3705
- /**
3706
- * Accessible label for the badge region.
3707
- */
3708
- "aria-label"?: string;
3709
- /**
3710
- * Additional CSS classes merged via `cn()`.
3711
- */
3712
- className?: string | undefined;
3713
- /**
3714
- * The host element(s) to badge — typically an icon, IconButton, or avatar.
3715
- */
3716
- children?: React__default.ReactNode;
3717
- }
3718
- /**
3719
- * Material Design 3 Badge Component Props
3720
- *
3721
- * Composes `BadgeHeadless` (structure) + `BadgeContent` (indicator).
3722
- *
3723
- * @example
3724
- * ```tsx
3725
- * // Dot badge (no count)
3726
- * <Badge>
3727
- * <IconButton icon={<BellIcon />} aria-label="Notifications" />
3728
- * </Badge>
3729
- *
3730
- * // Count badge
3731
- * <Badge count={3}>
3732
- * <IconButton icon={<BellIcon />} aria-label="Notifications" />
3733
- * </Badge>
3734
- *
3735
- * // Capped count
3736
- * <Badge count={1200} max={99}>
3737
- * <IconButton icon={<MailIcon />} aria-label="Messages" />
3738
- * </Badge>
3739
- *
3740
- * // Primary color
3741
- * <Badge count={5} color="primary">
3742
- * <IconButton icon={<BellIcon />} aria-label="Alerts" />
3743
- * </Badge>
3744
- * ```
3745
- */
3746
- interface BadgeProps {
3747
- /**
3748
- * Numeric count to display. When omitted, renders a dot indicator.
3749
- */
3750
- count?: number;
3751
- /**
3752
- * Maximum displayable count. Values exceeding this render as `"${max}+"`.
3753
- * @default 999
3754
- */
3755
- max?: number;
3756
- /**
3757
- * Badge color role mapped to MD3 design tokens.
3758
- * @default 'error'
3759
- */
3760
- color?: BadgeColor;
3761
- /**
3762
- * When `true`, hides the badge indicator.
3763
- * Also hides when `count` is `0`.
3764
- * @default false
3765
- */
3766
- invisible?: boolean;
3767
- /**
3768
- * Accessible label override for the badge indicator.
3769
- */
3770
- "aria-label"?: string;
3771
- /**
3772
- * Additional CSS classes merged via `cn()`.
3773
- */
3774
- className?: string;
3775
- /**
3776
- * The host element to badge — typically an icon, IconButton, or avatar.
3777
- */
3778
- children: React__default.ReactNode;
3779
- }
3780
-
3781
3650
  /**
3782
3651
  * Structural variant of the Navigation Drawer.
3783
3652
  *
@@ -3796,8 +3665,6 @@ type DrawerVariant = "standard" | "modal";
3796
3665
  interface DrawerItemBadgeConfig {
3797
3666
  /** Numeric count to display. Omit for a dot indicator. */
3798
3667
  count?: number;
3799
- /** Badge color role. @default 'error' */
3800
- color?: BadgeColor;
3801
3668
  }
3802
3669
  /**
3803
3670
  * Material Design 3 Navigation Drawer props.
@@ -3920,8 +3787,8 @@ interface DrawerItemProps extends AriaButtonProps, Pick<AriaLinkOptions, "href">
3920
3787
  * // ReactNode badge (backward compatible)
3921
3788
  * <DrawerItem label="Inbox" badge={<span>3</span>} />
3922
3789
  *
3923
- * // Config badge (renders Badge component)
3924
- * <DrawerItem label="Inbox" badge={{ count: 3, color: 'primary' }} />
3790
+ * // Config badge (renders Badge component using MD3 error color role)
3791
+ * <DrawerItem label="Inbox" badge={{ count: 3 }} />
3925
3792
  * ```
3926
3793
  */
3927
3794
  badge?: ReactNode | DrawerItemBadgeConfig;
@@ -4139,7 +4006,7 @@ declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Rea
4139
4006
  * - Ripple effect on interaction
4140
4007
  * - Hover/focus/pressed state layers (MD3 spec: 8% / 12%)
4141
4008
  * - Optional leading icon (24dp slot)
4142
- * - Optional trailing badge — `ReactNode` or `{ count, color }` config
4009
+ * - Optional trailing badge — `ReactNode` or `{ count }` config
4143
4010
  * - Icon-only mode: label hidden, `title` tooltip via `DrawerIconOnlyContext`
4144
4011
  * - Disabled state: `opacity-38`, non-interactive
4145
4012
  *
@@ -4148,8 +4015,8 @@ declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Rea
4148
4015
  * // Active item with icon
4149
4016
  * <DrawerItem icon={<HomeIcon />} label="Home" isActive onPress={() => navigate('/')} />
4150
4017
  *
4151
- * // Item with Badge config
4152
- * <DrawerItem label="Inbox" badge={{ count: 5, color: 'primary' }} />
4018
+ * // Item with Badge config (uses MD3 error color role)
4019
+ * <DrawerItem label="Inbox" badge={{ count: 5 }} />
4153
4020
  *
4154
4021
  * // Disabled
4155
4022
  * <DrawerItem label="Disabled Feature" isDisabled />
@@ -7681,6 +7548,118 @@ declare const searchViewHeaderVariants: (props?: ({
7681
7548
  layout?: "fullscreen" | "docked" | null | undefined;
7682
7549
  } & class_variance_authority_types.ClassProp) | undefined) => string;
7683
7550
 
7551
+ /**
7552
+ * Props for the BadgeContent indicator element.
7553
+ *
7554
+ * Renders either a small dot (no count) or a count pill (with count).
7555
+ */
7556
+ interface BadgeContentProps {
7557
+ /**
7558
+ * Numeric count to display. When omitted, renders a small dot indicator.
7559
+ */
7560
+ count?: number | undefined;
7561
+ /**
7562
+ * Maximum displayable count. Values exceeding this render as `"${max}+"`.
7563
+ * @default 999
7564
+ */
7565
+ max?: number;
7566
+ /**
7567
+ * Whether the badge is invisible (scale-0).
7568
+ * @default false
7569
+ */
7570
+ invisible?: boolean;
7571
+ /**
7572
+ * Accessible label override. Defaults to `"New"` for dot badges
7573
+ * or `"${count} notifications"` for count badges.
7574
+ */
7575
+ "aria-label"?: string | undefined;
7576
+ /**
7577
+ * Whether to skip transition animations (reduced motion).
7578
+ * @default false
7579
+ */
7580
+ reducedMotion?: boolean;
7581
+ /**
7582
+ * Additional CSS classes merged via `cn()`.
7583
+ */
7584
+ className?: string;
7585
+ }
7586
+ /**
7587
+ * Props for the headless Badge wrapper.
7588
+ *
7589
+ * Provides the structural `relative inline-flex` container that positions
7590
+ * the badge indicator absolutely over the host element.
7591
+ */
7592
+ interface BadgeHeadlessProps {
7593
+ /**
7594
+ * Whether the badge indicator is invisible.
7595
+ */
7596
+ invisible?: boolean;
7597
+ /**
7598
+ * Accessible label for the badge region.
7599
+ */
7600
+ "aria-label"?: string;
7601
+ /**
7602
+ * Additional CSS classes merged via `cn()`.
7603
+ */
7604
+ className?: string | undefined;
7605
+ /**
7606
+ * The host element(s) to badge — typically an icon, IconButton, or avatar.
7607
+ */
7608
+ children?: React__default.ReactNode;
7609
+ }
7610
+ /**
7611
+ * Material Design 3 Badge Component Props
7612
+ *
7613
+ * Composes `BadgeHeadless` (structure) + `BadgeContent` (indicator).
7614
+ *
7615
+ * @example
7616
+ * ```tsx
7617
+ * // Dot badge (no count)
7618
+ * <Badge>
7619
+ * <IconButton icon={<BellIcon />} aria-label="Notifications" />
7620
+ * </Badge>
7621
+ *
7622
+ * // Count badge
7623
+ * <Badge count={3}>
7624
+ * <IconButton icon={<BellIcon />} aria-label="Notifications" />
7625
+ * </Badge>
7626
+ *
7627
+ * // Capped count
7628
+ * <Badge count={1200} max={99}>
7629
+ * <IconButton icon={<MailIcon />} aria-label="Messages" />
7630
+ * </Badge>
7631
+ * ```
7632
+ */
7633
+ interface BadgeProps {
7634
+ /**
7635
+ * Numeric count to display. When omitted, renders a dot indicator.
7636
+ */
7637
+ count?: number;
7638
+ /**
7639
+ * Maximum displayable count. Values exceeding this render as `"${max}+"`.
7640
+ * @default 999
7641
+ */
7642
+ max?: number;
7643
+ /**
7644
+ * When `true`, hides the badge indicator.
7645
+ * Also hides when `count` is `0`.
7646
+ * @default false
7647
+ */
7648
+ invisible?: boolean;
7649
+ /**
7650
+ * Accessible label override for the badge indicator.
7651
+ */
7652
+ "aria-label"?: string;
7653
+ /**
7654
+ * Additional CSS classes merged via `cn()`.
7655
+ */
7656
+ className?: string;
7657
+ /**
7658
+ * The host element to badge — typically an icon, IconButton, or avatar.
7659
+ */
7660
+ children: React__default.ReactNode;
7661
+ }
7662
+
7684
7663
  /**
7685
7664
  * Material Design 3 Badge Component (Layer 3: Styled)
7686
7665
  *
@@ -7688,8 +7667,8 @@ declare const searchViewHeaderVariants: (props?: ({
7688
7667
  * (dot or count indicator). Automatically hides the badge when
7689
7668
  * `count` is `0` or `invisible` is `true`.
7690
7669
  *
7691
- * Respects `prefers-reduced-motion` — transitions are omitted when
7692
- * the user has requested reduced motion.
7670
+ * Respects `prefers-reduced-motion` — the scale transition is omitted
7671
+ * when the user has requested reduced motion.
7693
7672
  *
7694
7673
  * @example
7695
7674
  * ```tsx
@@ -7732,30 +7711,39 @@ declare const BadgeHeadless: React$1.ForwardRefExoticComponent<BadgeHeadlessProp
7732
7711
  * Badge Content Indicator
7733
7712
  *
7734
7713
  * Renders the badge's visual element — either a small dot (no count)
7735
- * or a count pill. Applies CVA variants for size, color, and visibility.
7714
+ * or a count pill. Applies the `badgeVariants` base classes and sets
7715
+ * content/visibility data flags directly on the element.
7716
+ *
7717
+ * Content flags (structural — not interaction state):
7718
+ * `data-dot` → element is a dot badge (no count)
7719
+ * `data-invisible` → element is hidden (scale-0)
7720
+ *
7721
+ * Motion:
7722
+ * `transition-transform duration-expressive-fast-spatial ease-expressive-fast-spatial`
7723
+ * is applied when `reducedMotion` is false (component-level guard, per
7724
+ * md3-motion.mdc: JS-driven animations must guard at the component level).
7736
7725
  *
7737
7726
  * Uses `role="status"` so screen readers announce changes to the count.
7738
7727
  */
7739
7728
  declare const BadgeContent: React$1.ForwardRefExoticComponent<BadgeContentProps & React$1.RefAttributes<HTMLSpanElement>>;
7740
7729
 
7741
7730
  /**
7742
- * Material Design 3 Badge Content Variants (CVA)
7731
+ * Anchored indicator element badge center straddles the wrapped host's
7732
+ * top-right corner via `top-0 right-0 -translate-y-1/2 translate-x-1/2`.
7743
7733
  *
7744
- * Manages the visual appearance of the badge indicator element:
7745
- * - `size`: small (6dp dot) or large (16dp min-width pill)
7746
- * - `color`: MD3 color role — error (default) or primary
7747
- * - `invisible`: scale/opacity toggle for show/hide animation
7748
- * - `reducedMotion`: strips transition when `prefers-reduced-motion` is active
7749
- */
7750
- declare const badgeVariants: (props?: ({
7751
- size?: "small" | "large" | null | undefined;
7752
- color?: "primary" | "error" | null | undefined;
7753
- invisible?: boolean | null | undefined;
7754
- reducedMotion?: boolean | null | undefined;
7755
- } & class_variance_authority_types.ClassProp) | undefined) => string;
7756
- /**
7757
- * Extract variant prop types from CVA
7734
+ * Use this variant (via `BadgeContent`) when the badge wraps an icon element
7735
+ * (e.g. a 24dp icon span, an IconButton) and needs to overlay its corner.
7736
+ *
7737
+ * Content flags (set explicitly by BadgeContent, never by this CVA):
7738
+ * `data-dot` element has no count; renders as 6dp dot
7739
+ * `data-invisible` → element is hidden (scale-0); runtime show/hide control
7740
+ *
7741
+ * Visibility uses scale only (not scale + opacity) per the MD3 Expressive
7742
+ * scale-in/out pattern for small components. The transition-transform class
7743
+ * is applied conditionally by the component (outside CVA) to allow a
7744
+ * component-level reduced-motion guard.
7758
7745
  */
7746
+ declare const badgeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
7759
7747
  type BadgeVariants = VariantProps<typeof badgeVariants>;
7760
7748
 
7761
7749
  /**
@@ -7968,48 +7956,70 @@ declare const splitButtonVariants: {
7968
7956
  */
7969
7957
  type FABMenuDirection = "up" | "down" | "left" | "right";
7970
7958
  /**
7971
- * Props for an individual FABMenu action item (mini FAB).
7959
+ * Color role for individual FABMenu action items.
7972
7960
  *
7973
- * Each item renders as a small FAB with an icon and optional label.
7974
- * `aria-label` is required for accessibility since items are icon-based.
7961
+ * Matches the MD3 Expressive FAB color roles:
7962
+ * - Container variants: `primary-container` (default), `secondary-container`, `tertiary-container`
7963
+ * - Solid variants (M3 Expressive): `primary`, `secondary`, `tertiary`
7964
+ *
7965
+ * The state-layer color equals the icon/on-color per MD3 spec.
7966
+ *
7967
+ * @default 'primary-container'
7968
+ */
7969
+ type FABMenuItemColor = "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary";
7970
+ /**
7971
+ * Props for an individual FABMenu action item (MD3 Expressive pill menu item).
7972
+ *
7973
+ * Each item renders as a full-rounded 56dp pill button with a leading icon
7974
+ * and an inline text label. `label` or `aria-label` must be provided.
7975
7975
  *
7976
7976
  * @example
7977
7977
  * ```tsx
7978
7978
  * <FABMenuItem
7979
7979
  * icon={<IconEdit />}
7980
7980
  * label="Edit"
7981
- * aria-label="Edit item"
7982
7981
  * onPress={() => console.log('edit')}
7983
7982
  * />
7983
+ *
7984
+ * // Icon-only (requires aria-label)
7985
+ * <FABMenuItem icon={<IconEdit />} aria-label="Edit item" />
7984
7986
  * ```
7985
7987
  */
7986
7988
  interface FABMenuItemProps {
7987
- /** Icon content for the mini FAB action item. */
7989
+ /** Leading icon for the menu item. */
7988
7990
  icon: React__default.ReactNode;
7989
7991
  /**
7990
- * Optional text label displayed beside the mini FAB.
7991
- * Acts as a tooltip or visible label depending on the styled layer.
7992
+ * Inline text label displayed inside the pill button.
7993
+ * Provides the accessible name when `aria-label` is not supplied.
7992
7994
  */
7993
7995
  label?: string;
7996
+ /**
7997
+ * Explicit accessible label for screen readers.
7998
+ * Required when `label` is not provided.
7999
+ * When both are present, `aria-label` takes precedence.
8000
+ */
8001
+ "aria-label"?: string;
7994
8002
  /** Handler called when the action item is pressed. */
7995
8003
  onPress?: (e: PressEvent) => void;
7996
8004
  /**
7997
- * REQUIRED: Accessible label for screen readers.
7998
- * Mandatory since action items are icon-based.
8005
+ * Color role for the menu item container.
8006
+ * Controls the background, text, and state-layer colors.
8007
+ *
8008
+ * @default 'primary-container'
7999
8009
  */
8000
- "aria-label": string;
8010
+ color?: FABMenuItemColor;
8001
8011
  /**
8002
8012
  * Whether the action item is disabled.
8003
8013
  * @default false
8004
8014
  */
8005
8015
  isDisabled?: boolean;
8006
- /** Additional CSS classes. */
8016
+ /** Additional CSS classes applied to the root pill button. */
8007
8017
  className?: string;
8008
8018
  }
8009
8019
  /**
8010
8020
  * Props for the headless FABMenu primitive (Layer 2).
8011
8021
  *
8012
- * Manages open/close state, keyboard navigation, focus management,
8022
+ * Manages open/close state, keyboard interactions, focus management,
8013
8023
  * and accessibility attributes without opinionated styling.
8014
8024
  *
8015
8025
  * Supports both controlled (`open` + `onOpenChange`) and uncontrolled
@@ -8019,7 +8029,7 @@ interface FABMenuItemProps {
8019
8029
  * ```tsx
8020
8030
  * // Uncontrolled
8021
8031
  * <FABMenuHeadless aria-label="Actions" direction="up">
8022
- * <FABMenuItem icon={<IconEdit />} aria-label="Edit" />
8032
+ * <FABMenuItem icon={<IconEdit />} label="Edit" />
8023
8033
  * </FABMenuHeadless>
8024
8034
  *
8025
8035
  * // Controlled
@@ -8028,7 +8038,7 @@ interface FABMenuItemProps {
8028
8038
  * onOpenChange={setIsOpen}
8029
8039
  * aria-label="Quick actions"
8030
8040
  * >
8031
- * <FABMenuItem icon={<IconAdd />} aria-label="Add" />
8041
+ * <FABMenuItem icon={<IconAdd />} label="Add" />
8032
8042
  * </FABMenuHeadless>
8033
8043
  * ```
8034
8044
  */
@@ -8064,13 +8074,9 @@ interface FABMenuHeadlessProps {
8064
8074
  /**
8065
8075
  * Props for the styled FABMenu component (Layer 3).
8066
8076
  *
8067
- * Extends the headless props no additional required props at this layer.
8068
- * Styling, variants, and CVA will be added when the styled layer is built.
8077
+ * Extends the headless props. No additional required props at this layer.
8069
8078
  */
8070
- interface FABMenuProps extends FABMenuHeadlessProps {
8071
- /** Placeholder for future styled-layer extensions (e.g., variant, color). */
8072
- _brand?: never;
8073
- }
8079
+ type FABMenuProps = FABMenuHeadlessProps;
8074
8080
  /**
8075
8081
  * Context value shared between FABMenu and its item descendants.
8076
8082
  *
@@ -8097,11 +8103,14 @@ interface FABMenuContextValue {
8097
8103
  }
8098
8104
 
8099
8105
  /**
8100
- * FABMenu — Material Design 3 styled FAB Menu (Layer 3).
8106
+ * FABMenu — Material Design 3 Expressive FAB Menu (Layer 3).
8101
8107
  *
8102
- * Renders a trigger FAB that expands a list of mini FAB action items
8108
+ * Renders a trigger FAB that expands a list of MD3 Expressive pill menu items
8103
8109
  * in the specified direction. Manages stagger animation-delay on children,
8104
- * elevation changes on the trigger, and icon rotation.
8110
+ * elevation changes on the trigger, and icon rotation (+ → ×).
8111
+ *
8112
+ * The trigger FAB icon morphs using expressive spring spatial tokens to convey
8113
+ * the energetic, high-emphasis nature of the interaction.
8105
8114
  *
8106
8115
  * Built on top of FABMenuContext for state sharing with FABMenuItem children.
8107
8116
  * Uses the existing `FAB` component as the trigger button.
@@ -8109,30 +8118,41 @@ interface FABMenuContextValue {
8109
8118
  * @example
8110
8119
  * ```tsx
8111
8120
  * <FABMenu aria-label="Quick actions" direction="up">
8112
- * <FABMenuItem icon={<IconEdit />} label="Edit" aria-label="Edit" />
8113
- * <FABMenuItem icon={<IconShare />} label="Share" aria-label="Share" />
8121
+ * <FABMenuItem icon={<IconEdit />} label="Edit" />
8122
+ * <FABMenuItem icon={<IconShare />} label="Share" />
8114
8123
  * </FABMenu>
8115
8124
  * ```
8116
8125
  */
8117
- declare const FABMenu: React__default.ForwardRefExoticComponent<FABMenuProps & React__default.RefAttributes<HTMLDivElement>>;
8126
+ declare const FABMenu: React__default.ForwardRefExoticComponent<FABMenuHeadlessProps & React__default.RefAttributes<HTMLDivElement>>;
8118
8127
 
8119
8128
  /**
8120
- * FABMenuItem — Individual action item rendered as a mini FAB (40dp) with
8121
- * optional label chip. Consumes FABMenuContext for open state and direction.
8129
+ * FABMenuItem — MD3 Expressive FAB Menu action item (Layer 3).
8122
8130
  *
8123
- * Applies stagger animation via `animation-delay` based on `index` prop
8124
- * (provided by the parent FABMenu). Skips animations when `reducedMotion`
8125
- * is active.
8131
+ * Renders as a full-rounded 56dp pill button with a leading icon and an
8132
+ * inline text label. Implements the Variants-vs-States architecture:
8133
+ * all interaction states are expressed as data-* attributes on the root
8134
+ * and consumed by each slot via group-data-[x]/fab-menu-item selectors.
8135
+ *
8136
+ * Features:
8137
+ * - ✅ MD3 Expressive pill shape (56dp height, full-rounded)
8138
+ * - ✅ 6 color roles: 3 container + 3 solid (M3 Expressive)
8139
+ * - ✅ Elevation 3 base → 4 hover → 3 focus/pressed per MD3 spec
8140
+ * - ✅ Correct state-layer opacities: hover 8% / focus 10% / pressed 10%
8141
+ * - ✅ Dedicated focus ring slot (inset-[-3px], keyboard-only)
8142
+ * - ✅ Ripple effect (Material Design)
8143
+ * - ✅ Stagger enter/exit animation (animate-md-scale-in/out), reduce-motion guarded
8144
+ * - ✅ Full keyboard accessibility via React Aria
8126
8145
  *
8127
8146
  * @example
8128
8147
  * ```tsx
8129
8148
  * <FABMenuItem
8130
8149
  * icon={<IconEdit />}
8131
8150
  * label="Edit"
8132
- * aria-label="Edit item"
8133
8151
  * onPress={() => handleEdit()}
8134
- * index={0}
8135
8152
  * />
8153
+ *
8154
+ * // Solid color role
8155
+ * <FABMenuItem icon={<IconAdd />} label="Add" color="primary" />
8136
8156
  * ```
8137
8157
  */
8138
8158
  declare const FABMenuItem: React__default.ForwardRefExoticComponent<FABMenuItemProps & {
@@ -8179,25 +8199,135 @@ declare function useFABMenuContext(): FABMenuContextValue;
8179
8199
  declare const FABMenuHeadless: React$1.ForwardRefExoticComponent<FABMenuHeadlessProps & React$1.RefAttributes<HTMLDivElement>>;
8180
8200
 
8181
8201
  /**
8182
- * CVA variants for the FABMenu root container.
8202
+ * Material Design 3 FABMenu Variants
8203
+ *
8204
+ * Architecture: Variants vs States
8205
+ * - CVA holds design-time structure only (no disabled/state variants in CVA).
8206
+ * - All interaction states are driven by data-* attributes on the root via
8207
+ * group-data-[x]/fab-menu-item Tailwind selectors in each slot's base classes.
8208
+ * - Content flags (data-with-icon, data-with-label) are set explicitly by the component.
8209
+ * - Self-targeting data-[x]: selectors handle root-level disabled styling.
8210
+ *
8211
+ * Slot responsibilities:
8212
+ * fabMenuVariants — root container; direction layout
8213
+ * fabMenuItemVariants — root <button> pill; shape, color, elevation, group scope
8214
+ * fabMenuItemStateLayerVariants — absolute inset overlay; opacity 0/8/10/10; color=on-color
8215
+ * fabMenuItemFocusRingVariants — keyboard focus outline (inset-[-3px], MUST NOT be clipped)
8216
+ * fabMenuItemIconVariants — leading icon wrapper; size-6 (24dp)
8217
+ * fabMenuItemLabelVariants — inline text label slot
8218
+ *
8219
+ * MD3 Expressive FAB Menu item spec:
8220
+ * Shape: full-rounded pill (rounded-full)
8221
+ * Height: 56dp (h-14)
8222
+ * Padding: 16dp leading (pl-4), 20dp trailing (pr-5)
8223
+ * Gap: 12dp between icon and label (gap-3)
8224
+ * Icon: 24dp (size-6)
8225
+ * Typography: Title Medium
8226
+ * Elevation: base 3 → hover 4 → focus/pressed 3 → disabled none
8227
+ * State-layer: hover 8% | focus 10% | pressed 10% | disabled hidden
8228
+ *
8229
+ * IMPORTANT — overflow-hidden is NOT on the root button.
8230
+ * The focus ring span has `inset-[-3px]` to extend outside the button boundary.
8231
+ * Overflow clipping is delegated to the state layer (overflow-hidden + rounded-[inherit]).
8232
+ */
8233
+ /**
8234
+ * Root container for FABMenu.
8235
+ *
8236
+ * The root is sized to the trigger FAB only — `inline-flex` collapses to the
8237
+ * FAB's intrinsic size. The items overlay is absolutely positioned, so the
8238
+ * container never grows and the FAB never shifts position when the menu opens.
8239
+ */
8240
+ declare const fabMenuVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8241
+ /**
8242
+ * Absolutely positioned overlay that holds the menu item list.
8243
+ *
8244
+ * Anchored to the trigger FAB via logical insets so placement is correct in
8245
+ * both LTR and RTL document directions — no consumer intervention needed.
8246
+ *
8247
+ * `transform-origin` on each direction aligns the `animate-md-scale-in/out`
8248
+ * pivot with the FAB edge so items appear to emanate from the trigger:
8249
+ * up → origin-bottom (list grows upward from the FAB top edge)
8250
+ * down → origin-top (list grows downward from the FAB bottom edge)
8251
+ * left → origin-right (list grows leftward from the FAB start edge)
8252
+ * right → origin-left (list grows rightward from the FAB end edge)
8183
8253
  *
8184
- * Controls the expansion direction of action items relative to the trigger FAB.
8185
- * Uses gap-3 (12px) for spacing between trigger and items per MD3 spec.
8254
+ * Logical properties used (`end-0`, `start-full`, `me-3`, etc.) to respect
8255
+ * RTL layout automatically.
8186
8256
  */
8187
- declare const fabMenuVariants: (props?: ({
8257
+ declare const fabMenuListVariants: (props?: ({
8188
8258
  direction?: "left" | "right" | "up" | "down" | null | undefined;
8189
8259
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8190
8260
  /**
8191
- * CVA variants for individual FABMenuItem containers.
8261
+ * Root <button> pill for a FABMenu action item.
8192
8262
  *
8193
- * Controls visibility and pointer interaction based on open state.
8194
- * Transition classes are applied separately for stagger animation support.
8263
+ * IMPORTANT no overflow-hidden here (focus ring must extend outside).
8264
+ * Elevation follows MD3 FAB spec: base 3 hover 4 → focus/pressed 3 → disabled none.
8265
+ * The doubled attribute selector for focus/pressed gives higher specificity than
8266
+ * the single hover selector, ensuring they always win.
8267
+ *
8268
+ * Disabled styling uses self-targeting data-[disabled]: (not group-data —
8269
+ * these selectors target the root element itself).
8195
8270
  */
8196
8271
  declare const fabMenuItemVariants: (props?: ({
8197
- isOpen?: boolean | null | undefined;
8272
+ color?: "primary" | "primary-container" | "secondary" | "secondary-container" | "tertiary" | "tertiary-container" | null | undefined;
8198
8273
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8274
+ /**
8275
+ * State layer — absolute inset overlay that transitions opacity on interaction.
8276
+ *
8277
+ * Per MD3 spec, the state-layer color must equal the icon/on-color:
8278
+ * primary-container → bg-on-primary-container
8279
+ * secondary-container → bg-on-secondary-container
8280
+ * tertiary-container → bg-on-tertiary-container
8281
+ * primary (solid) → bg-on-primary
8282
+ * secondary (solid) → bg-on-secondary
8283
+ * tertiary (solid) → bg-on-tertiary
8284
+ *
8285
+ * Opacity:
8286
+ * 0 at rest · 8% hover · 10% focus · 10% pressed · hidden when disabled
8287
+ *
8288
+ * Pressed (10%) must win over hover (8%) when both data attributes are set.
8289
+ * The doubled attribute selector gives it higher specificity:
8290
+ * group-data-[hovered]/fab-menu-item: → specificity (0,1,0)
8291
+ * group-data-[pressed]/fab-menu-item:group-.. → specificity (0,2,0) always wins
8292
+ *
8293
+ * overflow-hidden is placed HERE (not on the root) so the state layer clips to
8294
+ * the pill shape while the focus ring span can extend outside.
8295
+ */
8296
+ declare const fabMenuItemStateLayerVariants: (props?: ({
8297
+ color?: "primary" | "primary-container" | "secondary" | "secondary-container" | "tertiary" | "tertiary-container" | null | undefined;
8298
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8299
+ /**
8300
+ * Focus ring overlay.
8301
+ *
8302
+ * Rendered as an absolute `<span>` with `inset-[-3px]` so it extends 3px
8303
+ * outside the button boundary. This REQUIRES that `overflow-hidden` is NOT
8304
+ * on the root button — overflow clipping is moved to the state layer.
8305
+ *
8306
+ * Always present in the DOM (opacity-0 at rest), transitions to opacity-100
8307
+ * on keyboard/programmatic focus — avoids layout shifts.
8308
+ */
8309
+ declare const fabMenuItemFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8310
+ /**
8311
+ * Leading icon wrapper.
8312
+ *
8313
+ * MD3 spec: 24×24dp icons inside FAB menu items.
8314
+ * Color is inherited from the parent button's text color.
8315
+ */
8316
+ declare const fabMenuItemIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8317
+ /**
8318
+ * Inline text label wrapper.
8319
+ *
8320
+ * MD3 spec: Title Medium typography for FAB menu item labels.
8321
+ * z-10 keeps it above the state layer and ripple overlays.
8322
+ */
8323
+ declare const fabMenuItemLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8199
8324
  type FABMenuVariants = VariantProps<typeof fabMenuVariants>;
8325
+ type FABMenuListVariants = VariantProps<typeof fabMenuListVariants>;
8200
8326
  type FABMenuItemVariants = VariantProps<typeof fabMenuItemVariants>;
8327
+ type FABMenuItemStateLayerVariants = VariantProps<typeof fabMenuItemStateLayerVariants>;
8328
+ type FABMenuItemFocusRingVariants = VariantProps<typeof fabMenuItemFocusRingVariants>;
8329
+ type FABMenuItemIconVariants = VariantProps<typeof fabMenuItemIconVariants>;
8330
+ type FABMenuItemLabelVariants = VariantProps<typeof fabMenuItemLabelVariants>;
8201
8331
 
8202
8332
  /**
8203
8333
  * Structural variant of the MD3 Slider.
@@ -10848,4 +10978,4 @@ type DatePickerSupportingTextVariants = VariantProps<typeof datePickerSupporting
10848
10978
  declare const datePickerScrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
10849
10979
  type DatePickerScrimVariants = VariantProps<typeof datePickerScrimVariants>;
10850
10980
 
10851
- 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 };
10981
+ export { AppBar, AppBarHeadless, type AppBarHeadlessProps, type AppBarProps, type AppBarVariant, Badge, BadgeContent, type BadgeContentProps, BadgeHeadless, type BadgeHeadlessProps, type BadgeProps, type BadgeVariants, BottomSheet, type BottomSheetAnimationState, type BottomSheetAnimationVariants, BottomSheetContext, type BottomSheetContextValue, BottomSheetHandle, type BottomSheetHandleProps, type BottomSheetHandleVariants, BottomSheetHeadless, type BottomSheetHeadlessProps, type BottomSheetProps, type BottomSheetScrimVariants, type BottomSheetVariant, type BottomSheetVariants, Button, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupFocusRingVariants, ButtonGroupHeadless, type ButtonGroupProps, type ButtonGroupRootVariants, type ButtonGroupSelectionMode, type ButtonGroupShape, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarCellProps, type CalendarCellType, type CalendarCellVariants, CalendarCore, type CalendarGridProps, type CalendarView, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardHeadless, type CardHeadlessProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, type CardVariants, Checkbox, type CheckboxProps, Chip, ChipHeadless, type ChipHeadlessProps, type ChipProps, ChipSet, type ChipSetProps, type ChipSurface, type ChipType, type ChipVariants, type ClockDialContainerVariants, type ClockDialNumberVariants, type ClockDialProps, type ClockHandCenterVariants, type ClockHandHandleVariants, type ClockHandProps, type ClockHandTrackVariants, type ClockSelectionMode, DateField, type DateFieldProps, type DateInputFieldProps, DatePicker, type DatePickerActionButtonVariants, type DatePickerActionVariants, type DatePickerActionsProps, type DatePickerContainerVariants, type DatePickerDividerVariants, DatePickerDocked, type DatePickerDockedProps, type DatePickerHeaderVariants, type DatePickerHeadlessProps, type DatePickerHeadlineVariants, DatePickerModal, type DatePickerModalHeaderProps, DatePickerModalInput, type DatePickerModalInputProps, type DatePickerModalProps, type DatePickerNavVariants, type DatePickerProps, type DatePickerRangeIndicatorVariants, type DatePickerRenderState, type DatePickerScrimVariants, type DatePickerSupportingTextVariants, type DatePickerVariant, type DatePickerWeekdayVariants, type DateSelectionMode, Dialog, DialogActions, type DialogActionsProps, type DialogAnimationState, DialogContent, type DialogContentProps, DialogContext, type DialogContextValue, DialogHeadless, type DialogHeadlessProps, DialogHeadline, type DialogHeadlineProps, type DialogProps, type DialogVariant, Divider, DividerHeadless, type DividerHeadlessProps, type DividerInset, type DividerOrientation, type DividerProps, type DividerVariants, Drawer, type DrawerContextValue, DrawerIconOnlyContext, DrawerItem, type DrawerItemBadgeConfig, type DrawerItemProps, type DrawerProps, DrawerSection, type DrawerSectionProps, type DrawerVariant, FAB, type FABColor, FABHeadless, type FABHeadlessProps, FABMenu, FABMenuContext, type FABMenuContextValue, type FABMenuDirection, FABMenuHeadless, type FABMenuHeadlessProps, FABMenuItem, type FABMenuItemColor, type FABMenuItemFocusRingVariants, type FABMenuItemIconVariants, type FABMenuItemLabelVariants, type FABMenuItemProps, type FABMenuItemStateLayerVariants, type FABMenuItemVariants, type FABMenuListVariants, type FABMenuProps, type FABMenuVariants, type FABProps, type FABSize, HeadlessDrawer, HeadlessDrawerItem, type HeadlessDrawerItemProps, type HeadlessDrawerProps, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, type HeadlessMenuItemProps, type HeadlessMenuProps, HeadlessMenuSection, type HeadlessMenuSectionProps, HeadlessMenuTrigger, type HeadlessMenuTriggerProps, HeadlessNavigationBar, HeadlessNavigationBarItem, type HeadlessNavigationBarItemProps, type HeadlessNavigationBarProps, HeadlessTab, HeadlessTabList, HeadlessTabPanel, type HeadlessTabPanelProps, type HeadlessTabProps, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, List, type ListDensity, ListHeadless, type ListHeadlessProps, ListItem, ListItemHeadless, ListItemLeading, type ListItemLeadingProps, type ListItemProps, ListItemText, type ListItemTextProps, ListItemTrailing, type ListItemTrailingProps, type ListItemVariants, type ListLeadingType, type ListProps, type ListTrailingType, type ListVariants, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Menu, type MenuContainerVariants, MenuContext, type MenuContextValue, MenuDivider, type MenuDividerProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, NavigationBar, type NavigationBarBadge, NavigationBarItem, type NavigationBarItemConfig, type NavigationBarItemProps, type NavigationBarItemRenderProps, type NavigationBarProps, type PeriodSelectorContainerVariants, type PeriodSelectorItemVariants, type PeriodSelectorProps, Progress, ProgressHeadless, type ProgressHeadlessProps, type ProgressProps, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, type RangeCalendarProps, RichTooltip, type RichTooltipProps, type RichTooltipVariants, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, type SearchBarHeadlessProps, type SearchBarProps, type SearchLayout, type SearchProps, type SearchStyle, SearchView, SearchViewHeadless, type SearchViewHeadlessProps, type SearchViewProps, Slider, SliderHeadless, type SliderHeadlessProps, type SliderOrientation, type SliderProps, type SliderRangeThumbLabels, type SliderRenderState, type SliderSize, type SliderThumbProps, type SliderThumbState, type SliderVariant, Snackbar, type SnackbarAction, SnackbarContext, type SnackbarContextValue, SnackbarHeadless, type SnackbarHeadlessProps, type SnackbarItem, type SnackbarProps, SnackbarProvider, type SnackbarProviderProps, type SnackbarSeverity, SplitButton, type SplitButtonContainerVariants, type SplitButtonDropdownVariants, SplitButtonHeadless, type SplitButtonHeadlessProps, type SplitButtonMenuItem, type SplitButtonPrimaryVariants, type SplitButtonProps, type SplitButtonSize, type SplitButtonVariant, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, type TabItem, type TabLayout, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type TimeFormat, type TimeInputFieldProps, type TimeInputFieldVariants, type TimePeriod, TimePicker, type TimePickerActionButtonVariants, type TimePickerActionRowVariants, type TimePickerContainerVariants, TimePickerDial, type TimePickerDialProps, type TimePickerHeadlessProps, type TimePickerHeadlineVariants, TimePickerInput, type TimePickerInputProps, type TimePickerModeToggleVariants, type TimePickerOrientation, type TimePickerProps, type TimePickerRenderState, type TimePickerVariant, type TimeSelectorContainerVariants, type TimeSelectorProps, type TimeSeparatorVariants, type TimeValue, Tooltip, type TooltipHeadlessProps, TooltipOverlayHeadless, type TooltipPlacement, type TooltipProps, TooltipTrigger, TooltipTriggerHeadless, type TooltipTriggerProps, type TooltipTriggerStyledProps, type TooltipVariant, type TooltipVariants, type TypographyProperty, type TypographyStyleObject, type UseBottomSheetDragOptions, type UseBottomSheetDragReturn, type YearItemVariants, applyStateLayer, badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };