@tinybigui/react 0.5.0 → 0.7.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
@@ -1702,141 +1702,250 @@ interface IconButtonHeadlessProps extends AriaButtonProps {
1702
1702
  declare const IconButtonHeadless: React$1.ForwardRefExoticComponent<IconButtonHeadlessProps & React$1.RefAttributes<HTMLButtonElement>>;
1703
1703
 
1704
1704
  /**
1705
- * Material Design 3 FAB Variants (CVA)
1705
+ * Material Design 3 FAB Variants — Slot-based architecture
1706
1706
  *
1707
- * Type-safe variant management for FAB component.
1708
- * Uses Tailwind CSS classes mapped to MD3 design tokens.
1707
+ * Architecture: Variants vs States
1708
+ * - CVA holds design-time structure only (no disabled/loading state variants).
1709
+ * - All interaction states are driven by data-* attributes on the root via
1710
+ * group-data-[x]/fab Tailwind selectors in each slot's base classes.
1711
+ * - Content flags (data-with-icon, data-loading) are set explicitly by the component.
1712
+ * - Self-targeting data-[x]: selectors handle root-level disabled styling.
1709
1713
  *
1710
- * Key differences from Button/IconButton:
1711
- * - NOT fully rounded (uses specific corner radius: 12px/16px/28px)
1712
- * - Always has elevation (shadow-elevation-3)
1713
- * - Larger sizes (40px/56px/96px)
1714
- * - Extended variant with variable width
1714
+ * Slot responsibilities:
1715
+ * fabVariants — root <button>; shape per size, color per variant,
1716
+ * elevation (base 3 hover 4 → focus/pressed 3),
1717
+ * self data-[disabled] styling, group/fab scope.
1718
+ * fabStateLayerVariants absolute inset overlay, opacity 0/8%/10%/10%,
1719
+ * color = icon/on-color per MD3 spec.
1720
+ * fabFocusRingVariants — keyboard focus outline ring (inset-[-3px]).
1721
+ * MUST NOT sit inside overflow-hidden.
1722
+ * fabIconVariants — icon wrapper; size per FAB size variant.
1723
+ * fabLabelVariants — extended FAB text label slot.
1724
+ *
1725
+ * MD3 Expressive size scale:
1726
+ * fab → 56dp container, 16dp corner, 24dp icon (default)
1727
+ * medium → 80dp container, 20dp corner, 28dp icon (M3 Expressive)
1728
+ * large → 96dp container, 28dp corner, 36dp icon
1729
+ * extended → 56dp height, 16dp corner, 24dp icon (+ text label)
1730
+ * small → 40dp container, 12dp corner, 24dp icon (@deprecated)
1731
+ *
1732
+ * MD3 Expressive color roles:
1733
+ * primary-container → bg-primary-container / text-on-primary-container (default)
1734
+ * secondary-container → bg-secondary-container / text-on-secondary-container
1735
+ * tertiary-container → bg-tertiary-container / text-on-tertiary-container
1736
+ * primary → bg-primary / text-on-primary (solid, M3 Expressive)
1737
+ * secondary → bg-secondary / text-on-secondary (solid, M3 Expressive)
1738
+ * tertiary → bg-tertiary / text-on-tertiary (solid, M3 Expressive)
1739
+ * surface → bg-surface-container-high / text-primary (@deprecated)
1740
+ *
1741
+ * Elevation per state (MD3 spec):
1742
+ * base → elevation-3
1743
+ * hovered → elevation-4 (shadow-elevation-4)
1744
+ * focused → elevation-3 (doubled selector wins over hover)
1745
+ * pressed → elevation-3 (doubled selector wins over hover)
1746
+ * disabled → no shadow
1747
+ *
1748
+ * State-layer opacities (MD3):
1749
+ * hover → 8% (opacity-8)
1750
+ * focus → 10% (opacity-10)
1751
+ * pressed→ 10% (opacity-10, doubled selector wins over hover's 8%)
1752
+ *
1753
+ * Important — overflow-hidden is NOT on the root button.
1754
+ * The focus ring span has `inset-[-3px]` to extend outside the button boundary,
1755
+ * which requires the root to not clip overflow. Overflow clipping is delegated
1756
+ * to the state layer and ripple container (overflow-hidden + rounded-[inherit]).
1715
1757
  */
1716
1758
  declare const fabVariants: (props?: ({
1717
- size?: "small" | "large" | "medium" | "extended" | null | undefined;
1718
- color?: "primary" | "secondary" | "tertiary" | "surface" | null | undefined;
1719
- isDisabled?: boolean | null | undefined;
1759
+ size?: "small" | "large" | "medium" | "fab" | "extended" | null | undefined;
1760
+ color?: "primary" | "primary-container" | "secondary" | "secondary-container" | "tertiary" | "tertiary-container" | "surface" | null | undefined;
1720
1761
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1721
- /**
1722
- * Extract variant prop types from CVA
1723
- */
1724
1762
  type FABVariants = VariantProps<typeof fabVariants>;
1725
1763
 
1726
1764
  /**
1727
- * FAB size types
1765
+ * FAB size types — MD3 Expressive scale.
1766
+ *
1767
+ * | Value | Height | Icon | Corner | Notes |
1768
+ * |------------|--------|-------|--------|------------------------------|
1769
+ * | `fab` | 56dp | 24dp | 16dp | Default. Regular FAB. |
1770
+ * | `medium` | 80dp | 28dp | 20dp | Medium FAB (M3 Expressive). |
1771
+ * | `large` | 96dp | 36dp | 28dp | Large FAB. |
1772
+ * | `extended` | 56dp | 24dp | 16dp | Extended FAB with text label.|
1773
+ * | `small` | 40dp | 24dp | 12dp | @deprecated — Use `fab`. |
1774
+ *
1775
+ * @default 'fab'
1728
1776
  */
1729
- type FABSize = "small" | "medium" | "large" | "extended";
1777
+ type FABSize = "fab" | "medium" | "large" | "extended" | "small";
1730
1778
  /**
1731
- * FAB color scheme
1779
+ * FAB color styles — MD3 Expressive color roles.
1780
+ *
1781
+ * **Container styles (default set):**
1782
+ * - `primary-container` — bg-primary-container / text-on-primary-container (default)
1783
+ * - `secondary-container` — bg-secondary-container / text-on-secondary-container
1784
+ * - `tertiary-container` — bg-tertiary-container / text-on-tertiary-container
1785
+ *
1786
+ * **Solid styles (M3 Expressive):**
1787
+ * - `primary` — bg-primary / text-on-primary
1788
+ * - `secondary` — bg-secondary / text-on-secondary
1789
+ * - `tertiary` — bg-tertiary / text-on-tertiary
1790
+ *
1791
+ * **Deprecated:**
1792
+ * - `surface` — @deprecated Use `primary-container`. Maps to surface-container-high.
1793
+ *
1794
+ * @default 'primary-container'
1732
1795
  */
1733
- type FABColor = "primary" | "secondary" | "tertiary" | "surface";
1796
+ type FABColor = "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary" | "surface";
1734
1797
  /**
1735
1798
  * Material Design 3 FAB (Floating Action Button) Component Props
1736
1799
  *
1737
- * High-emphasis button for primary screen action.
1738
- * Supports 4 sizes: small (40px), medium (56px), large (96px), extended (variable width with text)
1739
- *
1740
- * ⚠️ IMPORTANT:
1741
- * - Only ONE FAB per screen
1742
- * - aria-label is REQUIRED (even for extended FAB with text)
1743
- * - Use for primary constructive actions only (create, add, compose)
1744
- * - NOT for destructive (delete), navigation (back), or secondary actions
1800
+ * High-emphasis button for the primary screen action.
1801
+ * Implements the MD3 Expressive FAB spec with a slot-based architecture
1802
+ * matching Button and Switch for consistent interaction state handling.
1745
1803
  *
1746
1804
  * @example
1747
1805
  * ```tsx
1748
- * // Standard FAB (medium)
1749
- * <FAB aria-label="Create new item" icon={<IconAdd />} />
1806
+ * // Default FAB (56dp)
1807
+ * <FAB aria-label="Create" icon={<IconAdd />} />
1750
1808
  *
1751
- * // Small FAB
1752
- * <FAB aria-label="Add photo" icon={<IconCamera />} size="small" />
1809
+ * // Medium FAB (80dp, M3 Expressive)
1810
+ * <FAB aria-label="Create" icon={<IconAdd />} size="medium" />
1753
1811
  *
1754
- * // Large FAB
1812
+ * // Large FAB (96dp)
1755
1813
  * <FAB aria-label="Compose" icon={<IconEdit />} size="large" />
1756
1814
  *
1757
- * // Extended FAB (with text)
1758
- * <FAB aria-label="Create new document" icon={<IconAdd />} size="extended">
1815
+ * // Extended FAB (with text label)
1816
+ * <FAB aria-label="Create document" icon={<IconAdd />} size="extended">
1759
1817
  * Create
1760
1818
  * </FAB>
1761
1819
  *
1820
+ * // Solid primary color (M3 Expressive)
1821
+ * <FAB aria-label="Add" icon={<IconAdd />} color="primary" />
1822
+ *
1762
1823
  * // Loading state
1763
1824
  * <FAB aria-label="Creating" icon={<IconAdd />} loading />
1764
- *
1765
- * // Secondary color
1766
- * <FAB aria-label="Edit" icon={<IconEdit />} color="secondary" />
1767
1825
  * ```
1768
1826
  */
1769
1827
  interface FABProps extends AriaButtonProps {
1770
1828
  /**
1771
- * FAB size variant
1772
- * - small: 40×40px (24px icon)
1773
- * - medium: 56×56px (24px icon) - default
1774
- * - large: 96×96px (36px icon)
1775
- * - extended: Variable width with text (24px icon)
1776
- * @default 'medium'
1829
+ * FAB size variant.
1830
+ *
1831
+ * - `fab` (56dp) Default. Standard FAB.
1832
+ * - `medium` (80dp) — Medium FAB. M3 Expressive. Previously 56dp; now remapped.
1833
+ * - `large` (96dp) Large FAB.
1834
+ * - `extended` (56dp height) — Extended FAB with icon and text label.
1835
+ * - `small` (40dp) — @deprecated. Use `fab` instead.
1836
+ *
1837
+ * @default 'fab'
1777
1838
  */
1778
1839
  size?: FABSize;
1779
1840
  /**
1780
- * Color scheme
1781
- * @default 'primary'
1841
+ * Color style for the FAB.
1842
+ *
1843
+ * - `primary-container` — Default. bg-primary-container / text-on-primary-container.
1844
+ * - `secondary-container` — bg-secondary-container / text-on-secondary-container.
1845
+ * - `tertiary-container` — bg-tertiary-container / text-on-tertiary-container.
1846
+ * - `primary` — Solid. bg-primary / text-on-primary (M3 Expressive).
1847
+ * - `secondary` — Solid. bg-secondary / text-on-secondary (M3 Expressive).
1848
+ * - `tertiary` — Solid. bg-tertiary / text-on-tertiary (M3 Expressive).
1849
+ * - `surface` — @deprecated. Use `primary-container`.
1850
+ *
1851
+ * @default 'primary-container'
1782
1852
  */
1783
1853
  color?: FABColor;
1784
1854
  /**
1785
1855
  * Icon content (required).
1786
- * Recommended sizes:
1787
- * - small/medium/extended: 24x24px
1788
- * - large: 36x36px
1856
+ * Recommended icon sizes per variant:
1857
+ * - `fab` / `extended` / `small`: 24×24px
1858
+ * - `medium`: 28×28px
1859
+ * - `large`: 36×36px
1789
1860
  */
1790
1861
  icon: React__default.ReactNode;
1791
1862
  /**
1792
- * Text label (required for extended FAB, ignored for other sizes)
1863
+ * Text label only rendered for `size="extended"`.
1793
1864
  */
1794
1865
  children?: React__default.ReactNode;
1795
1866
  /**
1796
- * Mandatory accessible label for the FAB.
1797
- * This is crucial for screen readers as FAB is icon-based.
1798
- * Even extended FAB with text requires aria-label.
1867
+ * Mandatory accessible label for all FAB sizes.
1868
+ * Required even for extended FABs that have visible text.
1799
1869
  */
1800
1870
  "aria-label": string;
1801
1871
  /**
1802
- * Loading state - shows spinner, disables interaction
1872
+ * Shows a loading spinner and disables interaction.
1803
1873
  * @default false
1804
1874
  */
1805
1875
  loading?: boolean;
1806
1876
  /**
1807
- * Disable ripple effect
1877
+ * Disables the MD3 ripple press-feedback animation.
1808
1878
  * @default false
1809
1879
  */
1810
1880
  disableRipple?: boolean;
1811
1881
  /**
1812
- * Additional CSS classes (Tailwind)
1813
- * Can be used for positioning (e.g., "fixed bottom-4 right-4")
1882
+ * Additional Tailwind classes — commonly used for positioning
1883
+ * (e.g. `className="fixed bottom-4 right-4"`).
1814
1884
  */
1815
1885
  className?: string;
1816
1886
  /**
1817
- * HTML title attribute for tooltip
1887
+ * HTML title attribute for tooltip.
1818
1888
  */
1819
1889
  title?: string;
1820
1890
  /**
1821
- * Mouse down handler (for ripple effect and custom handling)
1891
+ * Mouse down handler (merged with the internal ripple handler).
1822
1892
  */
1823
1893
  onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
1894
+ /**
1895
+ * Tab index for keyboard navigation.
1896
+ * @default 0
1897
+ */
1898
+ tabIndex?: number | undefined;
1899
+ /**
1900
+ * Button type attribute.
1901
+ * @default 'button'
1902
+ */
1903
+ type?: "button" | "submit" | "reset";
1824
1904
  }
1825
1905
 
1826
1906
  /**
1827
- * Material Design 3 FAB (Floating Action Button) Component
1907
+ * Material Design 3 FAB (Floating Action Button) — M3 Expressive
1908
+ *
1909
+ * High-emphasis button for the primary screen action.
1910
+ * Implements the Variants-vs-States architecture: all interaction states are
1911
+ * expressed as data-* attributes on the root and consumed by each slot via
1912
+ * group-data-[x]/fab Tailwind selectors — no state variants in CVA.
1913
+ *
1914
+ * Features:
1915
+ * - ✅ MD3 Expressive size scale: fab (56dp), medium (80dp), large (96dp), extended, small (dep)
1916
+ * - ✅ Container + solid color styles (primary-container, primary, secondary*, tertiary*)
1917
+ * - ✅ Elevation 3 base → 4 hover → 3 focus/pressed per MD3 spec
1918
+ * - ✅ State-layer color = icon/on-color per MD3 spec
1919
+ * - ✅ Correct state-layer opacities: hover 8% / focus 10% / pressed 10%
1920
+ * - ✅ Dedicated focus ring slot (inset-[-3px], keyboard-only)
1921
+ * - ✅ Loading state with spinner
1922
+ * - ✅ Ripple effect (Material Design)
1923
+ * - ✅ Full keyboard accessibility via React Aria
1924
+ *
1925
+ * @example
1926
+ * ```tsx
1927
+ * // Default FAB (56dp, primary-container)
1928
+ * <FAB aria-label="Create" icon={<IconAdd />} />
1929
+ *
1930
+ * // Medium FAB (80dp, M3 Expressive)
1931
+ * <FAB aria-label="Create" icon={<IconAdd />} size="medium" />
1828
1932
  *
1829
- * High-emphasis button for primary screen action.
1830
- * Supports 4 sizes: small, medium, large, extended
1831
- * Implementation uses Tailwind CSS classes mapped to MD3 tokens.
1933
+ * // Solid primary color (M3 Expressive)
1934
+ * <FAB aria-label="Add" icon={<IconAdd />} color="primary" />
1935
+ *
1936
+ * // Extended FAB with text
1937
+ * <FAB aria-label="Create document" icon={<IconAdd />} size="extended">
1938
+ * Create
1939
+ * </FAB>
1940
+ * ```
1832
1941
  */
1833
- declare const FAB: React__default.ForwardRefExoticComponent<FABProps & Omit<FABVariants, "isDisabled"> & React__default.RefAttributes<HTMLButtonElement>>;
1942
+ declare const FAB: React__default.ForwardRefExoticComponent<FABProps & Omit<FABVariants, never> & React__default.RefAttributes<HTMLButtonElement>>;
1834
1943
 
1835
1944
  /**
1836
1945
  * Headless FAB Component (Layer 2)
1837
1946
  *
1838
1947
  * Unstyled FAB primitive using React Aria for accessibility.
1839
- * Provides behavior only - bring your own styles.
1948
+ * Provides behavior only bring your own styles.
1840
1949
  *
1841
1950
  * Features:
1842
1951
  * - Full keyboard navigation (Enter, Space)
@@ -1844,45 +1953,35 @@ declare const FAB: React__default.ForwardRefExoticComponent<FABProps & Omit<FABV
1844
1953
  * - Touch/pointer event handling
1845
1954
  * - Focus management
1846
1955
  * - Disabled state handling
1956
+ * - Press lifecycle callbacks (onPressStart/onPressEnd) for pressed state tracking
1847
1957
  *
1848
1958
  * @example
1849
1959
  * ```tsx
1850
- * // Use for custom styling
1851
- * <FABHeadless className="custom-fab-class" aria-label="Add">
1960
+ * <FABHeadless aria-label="Add" className="custom-fab">
1852
1961
  * <IconAdd />
1853
1962
  * </FABHeadless>
1854
1963
  * ```
1855
1964
  */
1856
1965
  interface FABHeadlessProps extends AriaButtonProps {
1857
- /**
1858
- * Additional CSS classes
1859
- */
1966
+ /** Additional CSS classes */
1860
1967
  className?: string;
1861
- /**
1862
- * FAB content (icon and optional text)
1863
- */
1968
+ /** FAB content (icon and optional text) */
1864
1969
  children: React.ReactNode;
1865
1970
  /**
1866
- * Tab index for keyboard navigation
1971
+ * Tab index for keyboard navigation.
1867
1972
  * @default 0
1868
1973
  */
1869
1974
  tabIndex?: number;
1870
- /**
1871
- * Mouse down handler (for ripple effect)
1872
- */
1975
+ /** Mouse down handler (for ripple effect) */
1873
1976
  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
1874
1977
  /**
1875
- * Button type attribute
1978
+ * Button type attribute.
1876
1979
  * @default 'button'
1877
1980
  */
1878
1981
  type?: "button" | "submit" | "reset";
1879
- /**
1880
- * REQUIRED: Accessible label for screen readers
1881
- */
1982
+ /** REQUIRED: Accessible label for screen readers */
1882
1983
  "aria-label": string;
1883
- /**
1884
- * HTML title attribute for tooltip
1885
- */
1984
+ /** HTML title attribute for tooltip */
1886
1985
  title?: string;
1887
1986
  }
1888
1987
  declare const FABHeadless: React$1.ForwardRefExoticComponent<FABHeadlessProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -7869,48 +7968,70 @@ declare const splitButtonVariants: {
7869
7968
  */
7870
7969
  type FABMenuDirection = "up" | "down" | "left" | "right";
7871
7970
  /**
7872
- * Props for an individual FABMenu action item (mini FAB).
7971
+ * Color role for individual FABMenu action items.
7972
+ *
7973
+ * Matches the MD3 Expressive FAB color roles:
7974
+ * - Container variants: `primary-container` (default), `secondary-container`, `tertiary-container`
7975
+ * - Solid variants (M3 Expressive): `primary`, `secondary`, `tertiary`
7976
+ *
7977
+ * The state-layer color equals the icon/on-color per MD3 spec.
7978
+ *
7979
+ * @default 'primary-container'
7980
+ */
7981
+ type FABMenuItemColor = "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary";
7982
+ /**
7983
+ * Props for an individual FABMenu action item (MD3 Expressive pill menu item).
7873
7984
  *
7874
- * Each item renders as a small FAB with an icon and optional label.
7875
- * `aria-label` is required for accessibility since items are icon-based.
7985
+ * Each item renders as a full-rounded 56dp pill button with a leading icon
7986
+ * and an inline text label. `label` or `aria-label` must be provided.
7876
7987
  *
7877
7988
  * @example
7878
7989
  * ```tsx
7879
7990
  * <FABMenuItem
7880
7991
  * icon={<IconEdit />}
7881
7992
  * label="Edit"
7882
- * aria-label="Edit item"
7883
7993
  * onPress={() => console.log('edit')}
7884
7994
  * />
7995
+ *
7996
+ * // Icon-only (requires aria-label)
7997
+ * <FABMenuItem icon={<IconEdit />} aria-label="Edit item" />
7885
7998
  * ```
7886
7999
  */
7887
8000
  interface FABMenuItemProps {
7888
- /** Icon content for the mini FAB action item. */
8001
+ /** Leading icon for the menu item. */
7889
8002
  icon: React__default.ReactNode;
7890
8003
  /**
7891
- * Optional text label displayed beside the mini FAB.
7892
- * Acts as a tooltip or visible label depending on the styled layer.
8004
+ * Inline text label displayed inside the pill button.
8005
+ * Provides the accessible name when `aria-label` is not supplied.
7893
8006
  */
7894
8007
  label?: string;
8008
+ /**
8009
+ * Explicit accessible label for screen readers.
8010
+ * Required when `label` is not provided.
8011
+ * When both are present, `aria-label` takes precedence.
8012
+ */
8013
+ "aria-label"?: string;
7895
8014
  /** Handler called when the action item is pressed. */
7896
8015
  onPress?: (e: PressEvent) => void;
7897
8016
  /**
7898
- * REQUIRED: Accessible label for screen readers.
7899
- * Mandatory since action items are icon-based.
8017
+ * Color role for the menu item container.
8018
+ * Controls the background, text, and state-layer colors.
8019
+ *
8020
+ * @default 'primary-container'
7900
8021
  */
7901
- "aria-label": string;
8022
+ color?: FABMenuItemColor;
7902
8023
  /**
7903
8024
  * Whether the action item is disabled.
7904
8025
  * @default false
7905
8026
  */
7906
8027
  isDisabled?: boolean;
7907
- /** Additional CSS classes. */
8028
+ /** Additional CSS classes applied to the root pill button. */
7908
8029
  className?: string;
7909
8030
  }
7910
8031
  /**
7911
8032
  * Props for the headless FABMenu primitive (Layer 2).
7912
8033
  *
7913
- * Manages open/close state, keyboard navigation, focus management,
8034
+ * Manages open/close state, keyboard interactions, focus management,
7914
8035
  * and accessibility attributes without opinionated styling.
7915
8036
  *
7916
8037
  * Supports both controlled (`open` + `onOpenChange`) and uncontrolled
@@ -7920,7 +8041,7 @@ interface FABMenuItemProps {
7920
8041
  * ```tsx
7921
8042
  * // Uncontrolled
7922
8043
  * <FABMenuHeadless aria-label="Actions" direction="up">
7923
- * <FABMenuItem icon={<IconEdit />} aria-label="Edit" />
8044
+ * <FABMenuItem icon={<IconEdit />} label="Edit" />
7924
8045
  * </FABMenuHeadless>
7925
8046
  *
7926
8047
  * // Controlled
@@ -7929,7 +8050,7 @@ interface FABMenuItemProps {
7929
8050
  * onOpenChange={setIsOpen}
7930
8051
  * aria-label="Quick actions"
7931
8052
  * >
7932
- * <FABMenuItem icon={<IconAdd />} aria-label="Add" />
8053
+ * <FABMenuItem icon={<IconAdd />} label="Add" />
7933
8054
  * </FABMenuHeadless>
7934
8055
  * ```
7935
8056
  */
@@ -7965,13 +8086,9 @@ interface FABMenuHeadlessProps {
7965
8086
  /**
7966
8087
  * Props for the styled FABMenu component (Layer 3).
7967
8088
  *
7968
- * Extends the headless props no additional required props at this layer.
7969
- * Styling, variants, and CVA will be added when the styled layer is built.
8089
+ * Extends the headless props. No additional required props at this layer.
7970
8090
  */
7971
- interface FABMenuProps extends FABMenuHeadlessProps {
7972
- /** Placeholder for future styled-layer extensions (e.g., variant, color). */
7973
- _brand?: never;
7974
- }
8091
+ type FABMenuProps = FABMenuHeadlessProps;
7975
8092
  /**
7976
8093
  * Context value shared between FABMenu and its item descendants.
7977
8094
  *
@@ -7998,11 +8115,14 @@ interface FABMenuContextValue {
7998
8115
  }
7999
8116
 
8000
8117
  /**
8001
- * FABMenu — Material Design 3 styled FAB Menu (Layer 3).
8118
+ * FABMenu — Material Design 3 Expressive FAB Menu (Layer 3).
8002
8119
  *
8003
- * Renders a trigger FAB that expands a list of mini FAB action items
8120
+ * Renders a trigger FAB that expands a list of MD3 Expressive pill menu items
8004
8121
  * in the specified direction. Manages stagger animation-delay on children,
8005
- * elevation changes on the trigger, and icon rotation.
8122
+ * elevation changes on the trigger, and icon rotation (+ → ×).
8123
+ *
8124
+ * The trigger FAB icon morphs using expressive spring spatial tokens to convey
8125
+ * the energetic, high-emphasis nature of the interaction.
8006
8126
  *
8007
8127
  * Built on top of FABMenuContext for state sharing with FABMenuItem children.
8008
8128
  * Uses the existing `FAB` component as the trigger button.
@@ -8010,30 +8130,41 @@ interface FABMenuContextValue {
8010
8130
  * @example
8011
8131
  * ```tsx
8012
8132
  * <FABMenu aria-label="Quick actions" direction="up">
8013
- * <FABMenuItem icon={<IconEdit />} label="Edit" aria-label="Edit" />
8014
- * <FABMenuItem icon={<IconShare />} label="Share" aria-label="Share" />
8133
+ * <FABMenuItem icon={<IconEdit />} label="Edit" />
8134
+ * <FABMenuItem icon={<IconShare />} label="Share" />
8015
8135
  * </FABMenu>
8016
8136
  * ```
8017
8137
  */
8018
- declare const FABMenu: React__default.ForwardRefExoticComponent<FABMenuProps & React__default.RefAttributes<HTMLDivElement>>;
8138
+ declare const FABMenu: React__default.ForwardRefExoticComponent<FABMenuHeadlessProps & React__default.RefAttributes<HTMLDivElement>>;
8019
8139
 
8020
8140
  /**
8021
- * FABMenuItem — Individual action item rendered as a mini FAB (40dp) with
8022
- * optional label chip. Consumes FABMenuContext for open state and direction.
8141
+ * FABMenuItem — MD3 Expressive FAB Menu action item (Layer 3).
8142
+ *
8143
+ * Renders as a full-rounded 56dp pill button with a leading icon and an
8144
+ * inline text label. Implements the Variants-vs-States architecture:
8145
+ * all interaction states are expressed as data-* attributes on the root
8146
+ * and consumed by each slot via group-data-[x]/fab-menu-item selectors.
8023
8147
  *
8024
- * Applies stagger animation via `animation-delay` based on `index` prop
8025
- * (provided by the parent FABMenu). Skips animations when `reducedMotion`
8026
- * is active.
8148
+ * Features:
8149
+ * - MD3 Expressive pill shape (56dp height, full-rounded)
8150
+ * - ✅ 6 color roles: 3 container + 3 solid (M3 Expressive)
8151
+ * - ✅ Elevation 3 base → 4 hover → 3 focus/pressed per MD3 spec
8152
+ * - ✅ Correct state-layer opacities: hover 8% / focus 10% / pressed 10%
8153
+ * - ✅ Dedicated focus ring slot (inset-[-3px], keyboard-only)
8154
+ * - ✅ Ripple effect (Material Design)
8155
+ * - ✅ Stagger enter/exit animation (animate-md-scale-in/out), reduce-motion guarded
8156
+ * - ✅ Full keyboard accessibility via React Aria
8027
8157
  *
8028
8158
  * @example
8029
8159
  * ```tsx
8030
8160
  * <FABMenuItem
8031
8161
  * icon={<IconEdit />}
8032
8162
  * label="Edit"
8033
- * aria-label="Edit item"
8034
8163
  * onPress={() => handleEdit()}
8035
- * index={0}
8036
8164
  * />
8165
+ *
8166
+ * // Solid color role
8167
+ * <FABMenuItem icon={<IconAdd />} label="Add" color="primary" />
8037
8168
  * ```
8038
8169
  */
8039
8170
  declare const FABMenuItem: React__default.ForwardRefExoticComponent<FABMenuItemProps & {
@@ -8080,25 +8211,135 @@ declare function useFABMenuContext(): FABMenuContextValue;
8080
8211
  declare const FABMenuHeadless: React$1.ForwardRefExoticComponent<FABMenuHeadlessProps & React$1.RefAttributes<HTMLDivElement>>;
8081
8212
 
8082
8213
  /**
8083
- * CVA variants for the FABMenu root container.
8214
+ * Material Design 3 FABMenu Variants
8084
8215
  *
8085
- * Controls the expansion direction of action items relative to the trigger FAB.
8086
- * Uses gap-3 (12px) for spacing between trigger and items per MD3 spec.
8216
+ * Architecture: Variants vs States
8217
+ * - CVA holds design-time structure only (no disabled/state variants in CVA).
8218
+ * - All interaction states are driven by data-* attributes on the root via
8219
+ * group-data-[x]/fab-menu-item Tailwind selectors in each slot's base classes.
8220
+ * - Content flags (data-with-icon, data-with-label) are set explicitly by the component.
8221
+ * - Self-targeting data-[x]: selectors handle root-level disabled styling.
8222
+ *
8223
+ * Slot responsibilities:
8224
+ * fabMenuVariants — root container; direction layout
8225
+ * fabMenuItemVariants — root <button> pill; shape, color, elevation, group scope
8226
+ * fabMenuItemStateLayerVariants — absolute inset overlay; opacity 0/8/10/10; color=on-color
8227
+ * fabMenuItemFocusRingVariants — keyboard focus outline (inset-[-3px], MUST NOT be clipped)
8228
+ * fabMenuItemIconVariants — leading icon wrapper; size-6 (24dp)
8229
+ * fabMenuItemLabelVariants — inline text label slot
8230
+ *
8231
+ * MD3 Expressive FAB Menu item spec:
8232
+ * Shape: full-rounded pill (rounded-full)
8233
+ * Height: 56dp (h-14)
8234
+ * Padding: 16dp leading (pl-4), 20dp trailing (pr-5)
8235
+ * Gap: 12dp between icon and label (gap-3)
8236
+ * Icon: 24dp (size-6)
8237
+ * Typography: Title Medium
8238
+ * Elevation: base 3 → hover 4 → focus/pressed 3 → disabled none
8239
+ * State-layer: hover 8% | focus 10% | pressed 10% | disabled hidden
8240
+ *
8241
+ * IMPORTANT — overflow-hidden is NOT on the root button.
8242
+ * The focus ring span has `inset-[-3px]` to extend outside the button boundary.
8243
+ * Overflow clipping is delegated to the state layer (overflow-hidden + rounded-[inherit]).
8244
+ */
8245
+ /**
8246
+ * Root container for FABMenu.
8247
+ *
8248
+ * The root is sized to the trigger FAB only — `inline-flex` collapses to the
8249
+ * FAB's intrinsic size. The items overlay is absolutely positioned, so the
8250
+ * container never grows and the FAB never shifts position when the menu opens.
8087
8251
  */
8088
- declare const fabMenuVariants: (props?: ({
8252
+ declare const fabMenuVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8253
+ /**
8254
+ * Absolutely positioned overlay that holds the menu item list.
8255
+ *
8256
+ * Anchored to the trigger FAB via logical insets so placement is correct in
8257
+ * both LTR and RTL document directions — no consumer intervention needed.
8258
+ *
8259
+ * `transform-origin` on each direction aligns the `animate-md-scale-in/out`
8260
+ * pivot with the FAB edge so items appear to emanate from the trigger:
8261
+ * up → origin-bottom (list grows upward from the FAB top edge)
8262
+ * down → origin-top (list grows downward from the FAB bottom edge)
8263
+ * left → origin-right (list grows leftward from the FAB start edge)
8264
+ * right → origin-left (list grows rightward from the FAB end edge)
8265
+ *
8266
+ * Logical properties used (`end-0`, `start-full`, `me-3`, etc.) to respect
8267
+ * RTL layout automatically.
8268
+ */
8269
+ declare const fabMenuListVariants: (props?: ({
8089
8270
  direction?: "left" | "right" | "up" | "down" | null | undefined;
8090
8271
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8091
8272
  /**
8092
- * CVA variants for individual FABMenuItem containers.
8273
+ * Root <button> pill for a FABMenu action item.
8274
+ *
8275
+ * IMPORTANT — no overflow-hidden here (focus ring must extend outside).
8276
+ * Elevation follows MD3 FAB spec: base 3 → hover 4 → focus/pressed 3 → disabled none.
8277
+ * The doubled attribute selector for focus/pressed gives higher specificity than
8278
+ * the single hover selector, ensuring they always win.
8093
8279
  *
8094
- * Controls visibility and pointer interaction based on open state.
8095
- * Transition classes are applied separately for stagger animation support.
8280
+ * Disabled styling uses self-targeting data-[disabled]: (not group-data
8281
+ * these selectors target the root element itself).
8096
8282
  */
8097
8283
  declare const fabMenuItemVariants: (props?: ({
8098
- isOpen?: boolean | null | undefined;
8284
+ color?: "primary" | "primary-container" | "secondary" | "secondary-container" | "tertiary" | "tertiary-container" | null | undefined;
8099
8285
  } & class_variance_authority_types.ClassProp) | undefined) => string;
8286
+ /**
8287
+ * State layer — absolute inset overlay that transitions opacity on interaction.
8288
+ *
8289
+ * Per MD3 spec, the state-layer color must equal the icon/on-color:
8290
+ * primary-container → bg-on-primary-container
8291
+ * secondary-container → bg-on-secondary-container
8292
+ * tertiary-container → bg-on-tertiary-container
8293
+ * primary (solid) → bg-on-primary
8294
+ * secondary (solid) → bg-on-secondary
8295
+ * tertiary (solid) → bg-on-tertiary
8296
+ *
8297
+ * Opacity:
8298
+ * 0 at rest · 8% hover · 10% focus · 10% pressed · hidden when disabled
8299
+ *
8300
+ * Pressed (10%) must win over hover (8%) when both data attributes are set.
8301
+ * The doubled attribute selector gives it higher specificity:
8302
+ * group-data-[hovered]/fab-menu-item: → specificity (0,1,0)
8303
+ * group-data-[pressed]/fab-menu-item:group-.. → specificity (0,2,0) always wins
8304
+ *
8305
+ * overflow-hidden is placed HERE (not on the root) so the state layer clips to
8306
+ * the pill shape while the focus ring span can extend outside.
8307
+ */
8308
+ declare const fabMenuItemStateLayerVariants: (props?: ({
8309
+ color?: "primary" | "primary-container" | "secondary" | "secondary-container" | "tertiary" | "tertiary-container" | null | undefined;
8310
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8311
+ /**
8312
+ * Focus ring overlay.
8313
+ *
8314
+ * Rendered as an absolute `<span>` with `inset-[-3px]` so it extends 3px
8315
+ * outside the button boundary. This REQUIRES that `overflow-hidden` is NOT
8316
+ * on the root button — overflow clipping is moved to the state layer.
8317
+ *
8318
+ * Always present in the DOM (opacity-0 at rest), transitions to opacity-100
8319
+ * on keyboard/programmatic focus — avoids layout shifts.
8320
+ */
8321
+ declare const fabMenuItemFocusRingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8322
+ /**
8323
+ * Leading icon wrapper.
8324
+ *
8325
+ * MD3 spec: 24×24dp icons inside FAB menu items.
8326
+ * Color is inherited from the parent button's text color.
8327
+ */
8328
+ declare const fabMenuItemIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8329
+ /**
8330
+ * Inline text label wrapper.
8331
+ *
8332
+ * MD3 spec: Title Medium typography for FAB menu item labels.
8333
+ * z-10 keeps it above the state layer and ripple overlays.
8334
+ */
8335
+ declare const fabMenuItemLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
8100
8336
  type FABMenuVariants = VariantProps<typeof fabMenuVariants>;
8337
+ type FABMenuListVariants = VariantProps<typeof fabMenuListVariants>;
8101
8338
  type FABMenuItemVariants = VariantProps<typeof fabMenuItemVariants>;
8339
+ type FABMenuItemStateLayerVariants = VariantProps<typeof fabMenuItemStateLayerVariants>;
8340
+ type FABMenuItemFocusRingVariants = VariantProps<typeof fabMenuItemFocusRingVariants>;
8341
+ type FABMenuItemIconVariants = VariantProps<typeof fabMenuItemIconVariants>;
8342
+ type FABMenuItemLabelVariants = VariantProps<typeof fabMenuItemLabelVariants>;
8102
8343
 
8103
8344
  /**
8104
8345
  * Structural variant of the MD3 Slider.
@@ -10749,4 +10990,4 @@ type DatePickerSupportingTextVariants = VariantProps<typeof datePickerSupporting
10749
10990
  declare const datePickerScrimVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
10750
10991
  type DatePickerScrimVariants = VariantProps<typeof datePickerScrimVariants>;
10751
10992
 
10752
- 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 };
10993
+ 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 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 };