@tinybigui/react 0.1.0-rc.1

package/dist/index.d.cts

@@ -0,0 +1,1836 @@
+import { ClassValue } from 'clsx';
+import { Theme } from '@material/material-color-utilities';
+export { Theme, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
+import * as React$1 from 'react';
+import React__default, { LabelHTMLAttributes, InputHTMLAttributes, HTMLAttributes, RefObject, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { AriaButtonProps, AriaTextFieldProps, AriaCheckboxProps, AriaSwitchProps, AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
+
+/**
+ * Combines and merges Tailwind CSS classes efficiently.
+ *
+ * This utility uses:
+ * - `clsx` for conditional class joining
+ * - `tailwind-merge` to properly merge/deduplicate Tailwind classes
+ *
+ * @example
+ * ```tsx
+ * cn('px-2 py-1', condition && 'bg-blue-500', { 'text-white': isActive })
+ * // => 'px-2 py-1 bg-blue-500 text-white'
+ * ```
+ *
+ * @example Merging conflicting classes
+ * ```tsx
+ * cn('px-2', 'px-4')
+ * // => 'px-4' (later class wins)
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Color Utilities
+ *
+ * Utilities for working with Material Design 3 color system.
+ * Provides functions for color manipulation, CSS variable extraction,
+ * and integration with material-color-utilities.
+ */
+
+/**
+ * Material Design 3 color roles
+ */
+type MD3ColorRole = "primary" | "on-primary" | "primary-container" | "on-primary-container" | "secondary" | "on-secondary" | "secondary-container" | "on-secondary-container" | "tertiary" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "error" | "on-error" | "error-container" | "on-error-container" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "outline" | "outline-variant" | "background" | "on-background";
+/**
+ * Get the computed value of a CSS variable
+ *
+ * @param variable - CSS variable name (with or without `--` prefix)
+ * @param element - Element to get computed style from (defaults to document root)
+ * @returns The computed value of the CSS variable
+ *
+ * @example
+ * ```ts
+ * const primaryColor = getColorValue('--md-sys-color-primary');
+ * // Returns: '#6750a4'
+ *
+ * const primaryColor = getColorValue('md-sys-color-primary');
+ * // Also returns: '#6750a4'
+ * ```
+ */
+declare function getColorValue(variable: string, element?: HTMLElement): string;
+/**
+ * Get a Material Design 3 color token value
+ *
+ * @param role - MD3 color role name
+ * @returns The hex color value
+ *
+ * @example
+ * ```ts
+ * const primary = getMD3Color('primary');
+ * // Returns: '#6750a4'
+ *
+ * const onPrimary = getMD3Color('on-primary');
+ * // Returns: '#ffffff'
+ * ```
+ */
+declare function getMD3Color(role: MD3ColorRole): string;
+/**
+ * Add opacity to a hex color
+ *
+ * @param color - Hex color string (with or without #)
+ * @param opacity - Opacity value (0-1)
+ * @returns Hex color with opacity (8-digit hex)
+ *
+ * @example
+ * ```ts
+ * withOpacity('#6750a4', 0.5);
+ * // Returns: '#6750a480'
+ *
+ * withOpacity('6750a4', 0.12);
+ * // Returns: '#6750a41f'
+ * ```
+ */
+declare function withOpacity(color: string, opacity: number): string;
+/**
+ * Convert hex color to RGB object
+ *
+ * @param hex - Hex color string (with or without #)
+ * @returns RGB object with r, g, b values (0-255)
+ *
+ * @example
+ * ```ts
+ * hexToRgb('#6750a4');
+ * // Returns: { r: 103, g: 80, b: 164 }
+ * ```
+ */
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Convert RGB to hex color
+ *
+ * @param r - Red value (0-255)
+ * @param g - Green value (0-255)
+ * @param b - Blue value (0-255)
+ * @returns Hex color string
+ *
+ * @example
+ * ```ts
+ * rgbToHex(103, 80, 164);
+ * // Returns: '#6750a4'
+ * ```
+ */
+declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Generate a complete Material Design 3 theme from a seed color
+ *
+ * @param seedColor - Hex color to generate theme from
+ * @returns Material Color Utilities Theme object
+ *
+ * @example
+ * ```ts
+ * const theme = generateMD3Theme('#6750a4');
+ *
+ * // Access light mode colors
+ * const lightPrimary = hexFromArgb(theme.schemes.light.primary);
+ * // Returns: '#6750a4'
+ *
+ * // Access dark mode colors
+ * const darkPrimary = hexFromArgb(theme.schemes.dark.primary);
+ * // Returns: '#d0bcff'
+ * ```
+ */
+declare function generateMD3Theme(seedColor: string): Theme;
+
+/**
+ * State layer opacity values (Material Design 3 spec)
+ *
+ * These values are used for hover, focus, press, and drag states
+ * in Material Design 3 components.
+ *
+ * @see https://m3.material.io/foundations/interaction/states/state-layers
+ */
+declare const STATE_LAYER_OPACITY: {
+    readonly hover: 0.08;
+    readonly focus: 0.12;
+    readonly press: 0.12;
+    readonly drag: 0.16;
+};
+/**
+ * Apply a state layer opacity to a color
+ *
+ * @param color - Base hex color
+ * @param state - State type ('hover' | 'focus' | 'press' | 'drag')
+ * @returns Color with state layer opacity applied
+ *
+ * @example
+ * ```ts
+ * applyStateLayer('#6750a4', 'hover');
+ * // Returns: '#6750a414' (8% opacity)
+ *
+ * applyStateLayer('#6750a4', 'focus');
+ * // Returns: '#6750a41f' (12% opacity)
+ * ```
+ */
+declare function applyStateLayer(color: string, state: keyof typeof STATE_LAYER_OPACITY): string;
+
+/**
+ * Typography Utilities
+ *
+ * Utilities for working with Material Design 3 typography system.
+ * Provides type-safe access to typography tokens and helper functions
+ * for applying complete text styles.
+ */
+/**
+ * Material Design 3 typography scales
+ *
+ * MD3 defines 5 categories of typography, each with 3 size variants.
+ */
+type MD3TypographyScale = "display" | "headline" | "title" | "body" | "label";
+/**
+ * Typography size variants
+ */
+type MD3TypographySize = "large" | "medium" | "small";
+/**
+ * Complete typography style name
+ * Combination of scale and size (e.g., 'display-large', 'body-medium')
+ */
+type MD3TypographyStyle = "display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-large" | "body-medium" | "body-small" | "label-large" | "label-medium" | "label-small";
+/**
+ * Typography token properties
+ */
+type TypographyProperty = "size" | "line-height" | "weight" | "tracking";
+/**
+ * Typography style object returned by getTypographyStyle()
+ */
+interface TypographyStyleObject {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing: string;
+    fontFamily?: string;
+}
+/**
+ * Get a typography token value
+ *
+ * @param style - Typography style name (e.g., 'display-large', 'body-medium')
+ * @param property - Property to retrieve ('size' | 'line-height' | 'weight' | 'tracking')
+ * @returns The token value as a string
+ *
+ * @example
+ * ```ts
+ * getTypographyToken('display-large', 'size');
+ * // Returns: '3.5625rem' (57px)
+ *
+ * getTypographyToken('body-medium', 'weight');
+ * // Returns: '400'
+ * ```
+ */
+declare function getTypographyToken(style: MD3TypographyStyle, property: TypographyProperty): string;
+/**
+ * Get a complete typography style object
+ *
+ * Returns a style object with all typography properties that can be
+ * spread directly into a React component's style prop.
+ *
+ * @param style - Typography style name
+ * @param includeFontFamily - Whether to include font-family (default: false)
+ * @returns Typography style object for React inline styles
+ *
+ * @example
+ * ```tsx
+ * const displayStyle = getTypographyStyle('display-large');
+ * // Returns: {
+ * //   fontSize: '3.5625rem',
+ * //   lineHeight: '4rem',
+ * //   fontWeight: '400',
+ * //   letterSpacing: '-0.25px'
+ * // }
+ *
+ * <h1 style={displayStyle}>Display Large Text</h1>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With font family
+ * const bodyStyle = getTypographyStyle('body-medium', true);
+ * // Returns: {
+ * //   fontSize: '0.875rem',
+ * //   lineHeight: '1.25rem',
+ * //   fontWeight: '400',
+ * //   letterSpacing: '0.25px',
+ * //   fontFamily: 'system-ui, -apple-system, ...'
+ * // }
+ * ```
+ */
+declare function getTypographyStyle(style: MD3TypographyStyle, includeFontFamily?: boolean): TypographyStyleObject;
+/**
+ * Get font family token value
+ *
+ * @param variant - Font family variant ('plain' | 'brand')
+ * @returns Font family stack
+ *
+ * @example
+ * ```ts
+ * getFontFamily('plain');
+ * // Returns: 'system-ui, -apple-system, Segoe UI, Roboto, ...'
+ *
+ * getFontFamily('brand');
+ * // Returns: Same as plain (can be customized via CSS variables)
+ * ```
+ */
+declare function getFontFamily(variant?: "plain" | "brand"): string;
+/**
+ * Typography scale recommendations for semantic HTML elements
+ *
+ * Maps HTML elements to recommended MD3 typography styles.
+ * Based on Material Design 3 guidelines.
+ */
+declare const TYPOGRAPHY_ELEMENT_MAP: {
+    readonly h1: "display-large";
+    readonly h2: "display-medium";
+    readonly h3: "headline-large";
+    readonly h4: "headline-medium";
+    readonly h5: "headline-small";
+    readonly h6: "title-large";
+    readonly p: "body-large";
+    readonly span: "body-medium";
+    readonly small: "body-small";
+    readonly button: "label-large";
+    readonly label: "label-medium";
+    readonly caption: "label-small";
+};
+/**
+ * Get recommended typography style for an HTML element
+ *
+ * @param element - HTML element tag name
+ * @returns Recommended MD3 typography style
+ *
+ * @example
+ * ```ts
+ * getTypographyForElement('h1');
+ * // Returns: 'display-large'
+ *
+ * getTypographyForElement('button');
+ * // Returns: 'label-large'
+ * ```
+ */
+declare function getTypographyForElement(element: keyof typeof TYPOGRAPHY_ELEMENT_MAP): MD3TypographyStyle;
+/**
+ * Typography scale usage guidelines
+ *
+ * Provides semantic context for when to use each typography scale.
+ */
+declare const TYPOGRAPHY_USAGE: {
+    readonly display: "Large, expressive text for hero sections and marketing";
+    readonly headline: "High-emphasis text for titles and important headings";
+    readonly title: "Medium-emphasis text for section headers and card titles";
+    readonly body: "Plain text for paragraphs, lists, and general content";
+    readonly label: "UI labels, buttons, tabs, and form elements";
+};
+/**
+ * Create a typography CSS class name
+ *
+ * Generates a consistent class name for typography styles.
+ * Useful for creating utility classes or component variants.
+ *
+ * @param style - Typography style name
+ * @returns CSS class name string
+ *
+ * @example
+ * ```ts
+ * getTypographyClassName('display-large');
+ * // Returns: 'text-display-large'
+ *
+ * getTypographyClassName('body-medium');
+ * // Returns: 'text-body-medium'
+ * ```
+ */
+declare function getTypographyClassName(style: MD3TypographyStyle): string;
+/**
+ * Responsive typography helper
+ *
+ * Creates a style object that adapts typography across breakpoints.
+ *
+ * @param mobile - Typography style for mobile screens
+ * @param tablet - Typography style for tablet screens (optional)
+ * @param desktop - Typography style for desktop screens (optional)
+ * @returns Object with styles for different breakpoints
+ *
+ * @example
+ * ```tsx
+ * const responsiveTitle = getResponsiveTypography(
+ *   'headline-small',
+ *   'headline-medium',
+ *   'headline-large'
+ * );
+ *
+ * // Use with CSS-in-JS or styled-components
+ * const Title = styled.h2`
+ *   ${responsiveTitle.mobile}
+ *
+ *   @media (min-width: 768px) {
+ *     ${responsiveTitle.tablet}
+ *   }
+ *
+ *   @media (min-width: 1024px) {
+ *     ${responsiveTitle.desktop}
+ *   }
+ * `;
+ * ```
+ */
+declare function getResponsiveTypography(mobile: MD3TypographyStyle, tablet?: MD3TypographyStyle, desktop?: MD3TypographyStyle): {
+    mobile: TypographyStyleObject;
+    tablet?: TypographyStyleObject;
+    desktop?: TypographyStyleObject;
+};
+/**
+ * Convert rem to pixels (assuming 16px base)
+ *
+ * @param rem - Rem value (with or without 'rem' suffix)
+ * @returns Pixel value
+ *
+ * @example
+ * ```ts
+ * remToPx('1.5rem');
+ * // Returns: 24
+ *
+ * remToPx('3.5625rem');
+ * // Returns: 57
+ * ```
+ */
+declare function remToPx(rem: string): number;
+/**
+ * Convert pixels to rem (assuming 16px base)
+ *
+ * @param px - Pixel value (with or without 'px' suffix)
+ * @returns Rem value as string
+ *
+ * @example
+ * ```ts
+ * pxToRem(24);
+ * // Returns: '1.5rem'
+ *
+ * pxToRem('57px');
+ * // Returns: '3.5625rem'
+ * ```
+ */
+declare function pxToRem(px: number | string): string;
+/**
+ * Truncate text with ellipsis
+ *
+ * Returns CSS properties for single or multi-line text truncation.
+ *
+ * @param lines - Number of lines before truncation (1 for single-line)
+ * @returns CSS properties object
+ *
+ * @example
+ * ```tsx
+ * // Single line truncation
+ * const singleLine = truncateText(1);
+ * <div style={singleLine}>Long text here...</div>
+ *
+ * // Multi-line truncation (3 lines)
+ * const multiLine = truncateText(3);
+ * <p style={multiLine}>Long paragraph text here...</p>
+ * ```
+ */
+declare function truncateText(lines?: number): React.CSSProperties;
+
+/**
+ * Material Design 3 Button Variants (CVA)
+ *
+ * Type-safe variant management for Button component.
+ * Uses Tailwind CSS classes mapped to MD3 design tokens.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "text" | "filled" | "outlined" | "tonal" | "elevated" | null | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "error" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    loading?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Extract variant prop types from CVA
+ */
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+/**
+ * Button variant types (Material Design 3)
+ */
+type ButtonVariant = "filled" | "outlined" | "tonal" | "elevated" | "text";
+/**
+ * Button color schemes (Material Design 3 color roles)
+ */
+type ButtonColor = "primary" | "secondary" | "tertiary" | "error";
+/**
+ * Button sizes
+ */
+type ButtonSize = "small" | "medium" | "large";
+/**
+ * Material Design 3 Button Component Props
+ *
+ * Built on React Aria for world-class accessibility.
+ * Supports 5 variants: filled, outlined, tonal, elevated, text
+ * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ *
+ * @example
+ * ```tsx
+ * // Filled button (default)
+ * <Button variant="filled" color="primary">
+ *   Click me
+ * </Button>
+ *
+ * // With icon
+ * <Button variant="tonal" icon={<IconAdd />}>
+ *   Add Item
+ * </Button>
+ *
+ * // Loading state
+ * <Button variant="elevated" loading>
+ *   Saving...
+ * </Button>
+ *
+ * // Disabled
+ * <Button variant="outlined" isDisabled>
+ *   Disabled
+ * </Button>
+ *
+ * // Headless version (custom styling)
+ * <ButtonHeadless className="my-custom-styles">
+ *   Click me
+ * </ButtonHeadless>
+ * ```
+ */
+interface ButtonProps extends AriaButtonProps, Omit<React__default.HTMLAttributes<HTMLButtonElement>, keyof AriaButtonProps | "children"> {
+    /**
+     * Button variant
+     * @default 'filled'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Color scheme
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * Size variant
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * Leading icon (before text)
+     *
+     * MD3 Specification: Icons should be 18px × 18px
+     *
+     * @example
+     * ```tsx
+     * <Button icon={<IconAdd className="h-[18px] w-[18px]" />}>
+     *   Add Item
+     * </Button>
+     * ```
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Trailing icon (after text)
+     *
+     * MD3 Specification: Icons should be 18px × 18px
+     *
+     * @example
+     * ```tsx
+     * <Button trailingIcon={<IconArrow className="h-[18px] w-[18px]" />}>
+     *   Continue
+     * </Button>
+     * ```
+     */
+    trailingIcon?: React__default.ReactNode;
+    /**
+     * Button content (text)
+     */
+    children: React__default.ReactNode;
+    /**
+     * Full width button (spans container)
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Loading state - shows spinner, disables interaction
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+    /**
+     * Tab index for keyboard navigation
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+}
+
+/**
+ * Material Design 3 Button Component (Layer 3: Styled)
+ *
+ * Built on React Aria for world-class accessibility.
+ * Uses CVA for type-safe variant management.
+ * Styled with Tailwind CSS using MD3 design tokens.
+ *
+ * Features:
+ * - ✅ 5 MD3 variants: filled, outlined, tonal, elevated, text
+ * - ✅ 4 color schemes: primary, secondary, tertiary, error
+ * - ✅ 3 sizes: small, medium, large
+ * - ✅ Loading state with spinner
+ * - ✅ Ripple effect (Material Design)
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Screen reader support (via React Aria)
+ * - ✅ Focus management (via React Aria)
+ *
+ * MD3 Specifications:
+ * - Height: 40dp (medium), 32dp (small), 48dp (large)
+ * - Typography: Label Large (14px, 500 weight, +0.1px letter-spacing)
+ * - Icon size: 18px × 18px (per MD3 spec)
+ * - State layers: 8% hover, 12% focus/pressed
+ * - Elevation: Level 1 on hover (filled), Level 1→2 (elevated)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variant and color
+ * <Button variant="outlined" color="secondary">
+ *   Secondary Action
+ * </Button>
+ *
+ * // With icon (MD3 spec: icons should be 18px × 18px)
+ * <Button icon={<IconAdd className="h-[18px] w-[18px]" />}>
+ *   Add Item
+ * </Button>
+ *
+ * // Loading state
+ * <Button loading>
+ *   Saving...
+ * </Button>
+ *
+ * // Disabled
+ * <Button isDisabled>
+ *   Disabled
+ * </Button>
+ *
+ * // Full width
+ * <Button fullWidth>
+ *   Full Width Button
+ * </Button>
+ * ```
+ */
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Omit<ButtonVariants, "disabled"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Material Design 3 IconButton Variants (CVA)
+ *
+ * Type-safe variant management for IconButton component.
+ * Uses Tailwind CSS classes mapped to MD3 design tokens.
+ *
+ * Key differences from Button:
+ * - Circular shape (not pill-shaped)
+ * - Fixed square dimensions
+ * - No text content support
+ * - 'standard' variant instead of 'elevated'
+ */
+declare const iconButtonVariants: (props?: ({
+    variant?: "filled" | "outlined" | "tonal" | "standard" | null | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "error" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+    selected?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Extract variant prop types from CVA
+ */
+type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
+
+/**
+ * IconButton variant types (MD3 specification)
+ */
+type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
+/**
+ * Color scheme
+ */
+type IconButtonColor = "primary" | "secondary" | "tertiary" | "error";
+/**
+ * IconButton sizes (square dimensions)
+ */
+type IconButtonSize = "small" | "medium" | "large";
+/**
+ * Material Design 3 IconButton Component Props
+ *
+ * Icon-only button component with 4 variants and mandatory accessibility.
+ *
+ * **Key Features:**
+ * - 4 variants: standard, filled, tonal, outlined
+ * - Icon only (no text content)
+ * - Circular shape (MD3 specification)
+ * - Mandatory `aria-label` for accessibility
+ * - Toggle support with `selected` prop
+ * - 48×48px minimum touch target
+ *
+ * @example
+ * ```tsx
+ * // Standard icon button
+ * <IconButton aria-label="Delete" variant="standard">
+ *   <IconDelete />
+ * </IconButton>
+ *
+ * // Filled with color
+ * <IconButton aria-label="Favorite" variant="filled" color="error">
+ *   <IconHeart />
+ * </IconButton>
+ *
+ * // Toggle button
+ * <IconButton
+ *   aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+ *   selected={isFavorite}
+ *   onPress={() => setIsFavorite(!isFavorite)}
+ * >
+ *   {isFavorite ? <IconStarFilled /> : <IconStarOutline />}
+ * </IconButton>
+ *
+ * // Disabled
+ * <IconButton aria-label="Edit" isDisabled>
+ *   <IconEdit />
+ * </IconButton>
+ * ```
+ */
+interface IconButtonProps extends AriaButtonProps {
+    /**
+     * Button variant
+     * @default 'standard'
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Color scheme
+     * @default 'primary'
+     */
+    color?: IconButtonColor;
+    /**
+     * Size variant
+     * @default 'medium'
+     */
+    size?: IconButtonSize;
+    /**
+     * Icon content (React node). Recommended size:
+     * - small: 20×20px
+     * - medium: 24×24px
+     * - large: 28×28px
+     */
+    children: React__default.ReactNode;
+    /**
+     * Toggle state (for toggle buttons)
+     * When true, button shows selected state
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+    /**
+     * HTML title attribute for tooltip
+     * Recommended for better UX on desktop
+     */
+    title?: string;
+    /**
+     * Mouse down handler (for ripple effect and custom handling)
+     */
+    onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * REQUIRED: Accessible label for screen readers
+     * Since IconButton has no visible text, this is mandatory
+     *
+     * @example
+     * aria-label="Delete item"
+     * aria-label="Add to favorites"
+     * aria-label="Close dialog"
+     */
+    "aria-label": string;
+}
+
+/**
+ * Material Design 3 IconButton Component
+ *
+ * Icon-only button component following MD3 specifications.
+ * Supports 4 variants, toggle mode, and enforces accessibility.
+ *
+ * **Key Features:**
+ * - 4 variants: standard, filled, tonal, outlined
+ * - Circular shape (MD3 specification)
+ * - Mandatory `aria-label` for accessibility
+ * - Toggle support with `selected` prop
+ * - Ripple effect on interaction
+ * - 48×48px minimum touch target
+ *
+ * @example
+ * ```tsx
+ * // Standard icon button
+ * <IconButton aria-label="Delete">
+ *   <IconDelete />
+ * </IconButton>
+ *
+ * // Filled with color
+ * <IconButton aria-label="Favorite" variant="filled" color="error">
+ *   <IconHeart />
+ * </IconButton>
+ *
+ * // Toggle button
+ * <IconButton
+ *   aria-label={selected ? "Remove favorite" : "Add favorite"}
+ *   selected={selected}
+ *   onPress={() => setSelected(!selected)}
+ * >
+ *   {selected ? <IconStarFilled /> : <IconStarOutline />}
+ * </IconButton>
+ * ```
+ */
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & Omit<IconButtonVariants, "isDisabled" | "selected"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Headless IconButton Component (Layer 2)
+ *
+ * Unstyled icon button primitive using React Aria for accessibility.
+ * Provides behavior only - bring your own styles.
+ *
+ * Features:
+ * - Full keyboard navigation (Enter, Space)
+ * - Screen reader support
+ * - Touch/pointer event handling
+ * - Focus management
+ * - Disabled state handling
+ * - Toggle button support (aria-pressed)
+ *
+ * @example
+ * ```tsx
+ * // Use for custom styling
+ * <IconButtonHeadless className="custom-icon-button-class" aria-label="Delete">
+ *   <IconDelete />
+ * </IconButtonHeadless>
+ * ```
+ */
+interface IconButtonHeadlessProps extends AriaButtonProps {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Icon content (React node)
+     */
+    children: React.ReactNode;
+    /**
+     * Tab index for keyboard navigation
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Mouse down handler (for ripple effect)
+     */
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Toggle state (for toggle buttons)
+     * Sets aria-pressed attribute
+     */
+    selected?: boolean;
+    /**
+     * REQUIRED: Accessible label for screen readers
+     */
+    "aria-label": string;
+    /**
+     * HTML title attribute for tooltip
+     */
+    title?: string;
+}
+declare const IconButtonHeadless: React$1.ForwardRefExoticComponent<IconButtonHeadlessProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Material Design 3 FAB Variants (CVA)
+ *
+ * Type-safe variant management for FAB component.
+ * Uses Tailwind CSS classes mapped to MD3 design tokens.
+ *
+ * Key differences from Button/IconButton:
+ * - NOT fully rounded (uses specific corner radius: 12px/16px/28px)
+ * - Always has elevation (shadow-elevation-3)
+ * - Larger sizes (40px/56px/96px)
+ * - Extended variant with variable width
+ */
+declare const fabVariants: (props?: ({
+    size?: "large" | "medium" | "small" | "extended" | null | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "surface" | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Extract variant prop types from CVA
+ */
+type FABVariants = VariantProps<typeof fabVariants>;
+
+/**
+ * FAB size types
+ */
+type FABSize = "small" | "medium" | "large" | "extended";
+/**
+ * FAB color scheme
+ */
+type FABColor = "primary" | "secondary" | "tertiary" | "surface";
+/**
+ * Material Design 3 FAB (Floating Action Button) Component Props
+ *
+ * High-emphasis button for primary screen action.
+ * Supports 4 sizes: small (40px), medium (56px), large (96px), extended (variable width with text)
+ *
+ * ⚠️ IMPORTANT:
+ * - Only ONE FAB per screen
+ * - aria-label is REQUIRED (even for extended FAB with text)
+ * - Use for primary constructive actions only (create, add, compose)
+ * - NOT for destructive (delete), navigation (back), or secondary actions
+ *
+ * @example
+ * ```tsx
+ * // Standard FAB (medium)
+ * <FAB aria-label="Create new item" icon={<IconAdd />} />
+ *
+ * // Small FAB
+ * <FAB aria-label="Add photo" icon={<IconCamera />} size="small" />
+ *
+ * // Large FAB
+ * <FAB aria-label="Compose" icon={<IconEdit />} size="large" />
+ *
+ * // Extended FAB (with text)
+ * <FAB aria-label="Create new document" icon={<IconAdd />} size="extended">
+ *   Create
+ * </FAB>
+ *
+ * // Loading state
+ * <FAB aria-label="Creating" icon={<IconAdd />} loading />
+ *
+ * // Secondary color
+ * <FAB aria-label="Edit" icon={<IconEdit />} color="secondary" />
+ * ```
+ */
+interface FABProps extends AriaButtonProps {
+    /**
+     * FAB size variant
+     * - small: 40×40px (24px icon)
+     * - medium: 56×56px (24px icon) - default
+     * - large: 96×96px (36px icon)
+     * - extended: Variable width with text (24px icon)
+     * @default 'medium'
+     */
+    size?: FABSize;
+    /**
+     * Color scheme
+     * @default 'primary'
+     */
+    color?: FABColor;
+    /**
+     * Icon content (required).
+     * Recommended sizes:
+     * - small/medium/extended: 24x24px
+     * - large: 36x36px
+     */
+    icon: React__default.ReactNode;
+    /**
+     * Text label (required for extended FAB, ignored for other sizes)
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Mandatory accessible label for the FAB.
+     * This is crucial for screen readers as FAB is icon-based.
+     * Even extended FAB with text requires aria-label.
+     */
+    "aria-label": string;
+    /**
+     * Loading state - shows spinner, disables interaction
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     * Can be used for positioning (e.g., "fixed bottom-4 right-4")
+     */
+    className?: string;
+    /**
+     * HTML title attribute for tooltip
+     */
+    title?: string;
+    /**
+     * Mouse down handler (for ripple effect and custom handling)
+     */
+    onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * Material Design 3 FAB (Floating Action Button) Component
+ *
+ * High-emphasis button for primary screen action.
+ * Supports 4 sizes: small, medium, large, extended
+ * Implementation uses Tailwind CSS classes mapped to MD3 tokens.
+ */
+declare const FAB: React__default.ForwardRefExoticComponent<FABProps & Omit<FABVariants, "isDisabled"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Headless FAB Component (Layer 2)
+ *
+ * Unstyled FAB primitive using React Aria for accessibility.
+ * Provides behavior only - bring your own styles.
+ *
+ * Features:
+ * - Full keyboard navigation (Enter, Space)
+ * - Screen reader support (requires aria-label)
+ * - Touch/pointer event handling
+ * - Focus management
+ * - Disabled state handling
+ *
+ * @example
+ * ```tsx
+ * // Use for custom styling
+ * <FABHeadless className="custom-fab-class" aria-label="Add">
+ *   <IconAdd />
+ * </FABHeadless>
+ * ```
+ */
+interface FABHeadlessProps extends AriaButtonProps {
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * FAB content (icon and optional text)
+     */
+    children: React.ReactNode;
+    /**
+     * Tab index for keyboard navigation
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Mouse down handler (for ripple effect)
+     */
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * REQUIRED: Accessible label for screen readers
+     */
+    "aria-label": string;
+    /**
+     * HTML title attribute for tooltip
+     */
+    title?: string;
+}
+declare const FABHeadless: React$1.ForwardRefExoticComponent<FABHeadlessProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * TextField Type Definitions
+ *
+ * Type definitions for the Material Design 3 TextField component.
+ * Supports both filled and outlined variants with full accessibility.
+ */
+
+/**
+ * TextField visual variants
+ *
+ * - `filled`: Solid background with bottom border (default)
+ * - `outlined`: Border around entire field
+ */
+type TextFieldVariant = "filled" | "outlined";
+/**
+ * TextField size variants
+ *
+ * - `small`: Compact height
+ * - `medium`: Standard height (default)
+ * - `large`: Larger height
+ */
+type TextFieldSize = "small" | "medium" | "large";
+/**
+ * Arguments passed to the TextFieldHeadless render-prop children function.
+ *
+ * The styled layer uses these to build its custom MD3 DOM while still
+ * getting all ARIA props generated by React Aria's useTextField.
+ */
+interface TextFieldRenderProps {
+    /** Spread onto the <label> element */
+    labelProps: LabelHTMLAttributes<HTMLLabelElement>;
+    /** Spread onto the <input> or <textarea> element */
+    inputProps: InputHTMLAttributes<HTMLInputElement> & HTMLAttributes<HTMLTextAreaElement>;
+    /** Spread onto the description helper-text element */
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    /** Spread onto the error message element */
+    errorMessageProps: HTMLAttributes<HTMLElement>;
+    /** Whether the field is currently in an invalid state */
+    isInvalid: boolean;
+    /** Whether the input currently has focus (keyboard or pointer) */
+    isFocused: boolean;
+    /** Whether the input has keyboard-visible focus (for focus ring) */
+    isFocusVisible: boolean;
+    /** Current string value of the field (controlled or uncontrolled) */
+    currentValue: string;
+    /** Ref forwarded to the underlying input/textarea DOM element */
+    inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+}
+/**
+ * Props for the headless TextField component (Layer 2)
+ *
+ * Extends React Aria's AriaTextFieldProps for accessibility.
+ * Provides behavior without styling.
+ */
+interface TextFieldHeadlessProps extends Omit<AriaTextFieldProps, "children" | "onFocus" | "onBlur"> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     * @example "Enter your email address"
+     */
+    description?: string;
+    /**
+     * Error message to display when input is invalid
+     * @example "Email is required"
+     */
+    errorMessage?: string;
+    /**
+     * Whether the input should expand to fill its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Enable multiline mode (textarea)
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Number of visible rows for multiline input
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+    /**
+     * Custom className for the input element
+     */
+    inputClassName?: string;
+    /**
+     * Custom className for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Custom className for the description element
+     */
+    descriptionClassName?: string;
+    /**
+     * Custom className for the error message element
+     */
+    errorClassName?: string;
+    /**
+     * Handler called when the input is focused
+     */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Handler called when the input loses focus
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Optional render-prop children.
+     *
+     * When provided as a function, TextFieldHeadless invokes it with all
+     * React Aria props and derived state so the styled layer can build its
+     * own MD3 DOM without duplicating accessibility wiring.
+     *
+     * When omitted, the default accessible DOM (label + input + helper text) renders.
+     *
+     * @example
+     * ```tsx
+     * <TextFieldHeadless label="Email" value={value} onChange={onChange}>
+     *   {({ labelProps, inputProps, isFocused }) => (
+     *     <div>
+     *       <label {...labelProps} className={floating ? 'floating' : ''}>Email</label>
+     *       <input {...inputProps} className="md3-input" />
+     *     </div>
+     *   )}
+     * </TextFieldHeadless>
+     * ```
+     */
+    children?: ((renderProps: TextFieldRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Props for the styled TextField component (Layer 3)
+ *
+ * Extends TextFieldHeadlessProps with MD3 visual styling options.
+ */
+interface TextFieldProps extends TextFieldHeadlessProps {
+    /**
+     * Visual variant of the text field
+     * @default 'filled'
+     */
+    variant?: TextFieldVariant;
+    /**
+     * Size variant
+     * @default 'medium'
+     */
+    size?: TextFieldSize;
+    /**
+     * Leading icon (before input text)
+     * MD3 Specification: Icons should be 18px × 18px
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Trailing icon (after input text)
+     * MD3 Specification: Icons should be 18px × 18px
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Show character counter below the input
+     * Requires maxLength to be set
+     * @default false
+     */
+    characterCount?: boolean;
+    /**
+     * Maximum number of characters allowed
+     * Enables character counter if characterCount is true
+     */
+    maxLength?: number;
+}
+
+/**
+ * TextField - MD3 Text Input Component
+ *
+ * A text input field following Material Design 3 specifications.
+ * Supports filled and outlined variants with comprehensive accessibility
+ * provided by React Aria via the TextFieldHeadless layer.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextField label="Email" />
+ *
+ * // With validation
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   isRequired
+ *   errorMessage="Please enter a valid email"
+ * />
+ *
+ * // Multiline with character counter
+ * <TextField
+ *   label="Bio"
+ *   multiline
+ *   rows={4}
+ *   maxLength={500}
+ *   characterCount
+ * />
+ * ```
+ */
+declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
+/**
+ * Material Design 3 Checkbox Component Props
+ *
+ * Built on React Aria for world-class accessibility.
+ * Supports checked, unchecked, and indeterminate states.
+ * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ *
+ * @example
+ * ```tsx
+ * // Controlled checkbox
+ * <Checkbox isSelected={isChecked} onChange={setIsChecked}>
+ *   Accept terms
+ * </Checkbox>
+ *
+ * // Uncontrolled with default value
+ * <Checkbox defaultSelected>
+ *   Subscribe to newsletter
+ * </Checkbox>
+ *
+ * // Indeterminate state (partial selection)
+ * <Checkbox isIndeterminate>
+ *   Select all
+ * </Checkbox>
+ *
+ * // Error state
+ * <Checkbox isInvalid>
+ *   Required field
+ * </Checkbox>
+ *
+ * // Disabled
+ * <Checkbox isDisabled>
+ *   Disabled option
+ * </Checkbox>
+ *
+ * // Headless version (custom styling)
+ * <CheckboxHeadless className="my-custom-styles">
+ *   Custom checkbox
+ * </CheckboxHeadless>
+ * ```
+ */
+interface CheckboxProps extends AriaCheckboxProps, Omit<React__default.HTMLAttributes<HTMLLabelElement>, keyof AriaCheckboxProps | "children"> {
+    /**
+     * Checkbox label content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Indeterminate state (partial selection)
+     * Visually shows a dash instead of checkmark
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Error/invalid state
+     * Shows error styling (typically red)
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+}
+
+/**
+ * Material Design 3 Checkbox Component (Layer 3: Styled)
+ *
+ * Built on React Aria for world-class accessibility.
+ * Uses CVA for type-safe variant management.
+ * Styled with Tailwind CSS using MD3 design tokens.
+ *
+ * Features:
+ * - ✅ 3 states: unchecked, checked, indeterminate
+ * - ✅ Error/invalid state support
+ * - ✅ Ripple effect (Material Design)
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Screen reader support (via React Aria)
+ * - ✅ Focus management (via React Aria)
+ * - ✅ Form integration (name, value props)
+ *
+ * MD3 Specifications:
+ * - Container: 18x18dp (within 40x40dp touch target)
+ * - Corner radius: 2dp (applied via SVG rx/ry attributes)
+ * - State layers: 8% hover, 12% focus/pressed
+ * - Disabled: 38% opacity
+ * - Label spacing: 16px (ml-4)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Checkbox>Accept terms</Checkbox>
+ *
+ * // Controlled
+ * <Checkbox isSelected={checked} onChange={setChecked}>
+ *   Subscribe
+ * </Checkbox>
+ *
+ * // Indeterminate (partial selection)
+ * <Checkbox isIndeterminate>Select all</Checkbox>
+ *
+ * // Error state
+ * <Checkbox isInvalid>Required field</Checkbox>
+ *
+ * // Disabled
+ * <Checkbox isDisabled>Disabled option</Checkbox>
+ *
+ * // Without label (icon-only)
+ * <Checkbox aria-label="Accept" />
+ * ```
+ */
+declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Material Design 3 Switch Component Props
+ *
+ * Built on React Aria for world-class accessibility.
+ * Represents on/off states (not selection like checkbox).
+ * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ *
+ * @example
+ * ```tsx
+ * // Controlled switch
+ * <Switch isSelected={isOn} onChange={setIsOn}>
+ *   Low power mode
+ * </Switch>
+ *
+ * // Uncontrolled with default value
+ * <Switch defaultSelected>
+ *   Enable notifications
+ * </Switch>
+ *
+ * // With icons
+ * <Switch icon={<IconClose />} selectedIcon={<IconCheck />}>
+ *   Airplane mode
+ * </Switch>
+ *
+ * // Disabled
+ * <Switch isDisabled>
+ *   Disabled option
+ * </Switch>
+ *
+ * // Headless version (custom styling)
+ * <SwitchHeadless className="my-custom-styles">
+ *   Custom switch
+ * </SwitchHeadless>
+ * ```
+ */
+interface SwitchProps extends AriaSwitchProps, Omit<React__default.HTMLAttributes<HTMLLabelElement>, keyof AriaSwitchProps | "children"> {
+    /**
+     * Switch label content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Icon to display inside handle when switch is OFF
+     * @default undefined
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Icon to display inside handle when switch is ON
+     * @default undefined
+     */
+    selectedIcon?: React__default.ReactNode;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+}
+
+/**
+ * Material Design 3 Switch Component (Layer 3: Styled)
+ *
+ * Built on React Aria for world-class accessibility.
+ * Uses CVA for type-safe variant management.
+ * Styled with Tailwind CSS using MD3 design tokens.
+ *
+ * Features:
+ * - ✅ 2 states: on/off (not selection like checkbox)
+ * - ✅ Optional icons in handle
+ * - ✅ Ripple effect (Material Design)
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Screen reader support (via React Aria)
+ * - ✅ Focus management (via React Aria)
+ * - ✅ Form integration (name, value props)
+ *
+ * MD3 Specifications:
+ * - Track: 52x32dp (border-radius 16dp)
+ * - Handle: 16x16dp (unselected), 24x24dp (selected), 28x28dp (pressed)
+ * - Touch target: 48x48dp minimum
+ * - State layers: 8% hover, 12% focus/pressed
+ * - Disabled: 12% container, 38% content opacity
+ * - Label spacing: 16px (ml-4)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Switch>Low power mode</Switch>
+ *
+ * // Controlled
+ * <Switch isSelected={isOn} onChange={setIsOn}>
+ *   Notifications
+ * </Switch>
+ *
+ * // With icons
+ * <Switch icon={<IconClose />} selectedIcon={<IconCheck />}>
+ *   Airplane mode
+ * </Switch>
+ *
+ * // Disabled
+ * <Switch isDisabled>Disabled option</Switch>
+ *
+ * // Without label (icon-only)
+ * <Switch aria-label="Toggle feature" />
+ * ```
+ */
+declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Material Design 3 RadioGroup Component Props
+ *
+ * Built on React Aria for world-class accessibility.
+ * Groups radio buttons together for single-selection behavior.
+ * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ *
+ * @example
+ * ```tsx
+ * // Vertical group (default)
+ * <RadioGroup label="Favorite color">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
+ *   <Radio value="green">Green</Radio>
+ * </RadioGroup>
+ *
+ * // Horizontal group
+ * <RadioGroup label="Size" orientation="horizontal">
+ *   <Radio value="small">Small</Radio>
+ *   <Radio value="medium">Medium</Radio>
+ *   <Radio value="large">Large</Radio>
+ * </RadioGroup>
+ *
+ * // Controlled
+ * <RadioGroup label="Choice" value={selected} onChange={setSelected}>
+ *   <Radio value="option1">Option 1</Radio>
+ *   <Radio value="option2">Option 2</Radio>
+ * </RadioGroup>
+ *
+ * // Error state
+ * <RadioGroup label="Required" isInvalid>
+ *   <Radio value="yes">Yes</Radio>
+ *   <Radio value="no">No</Radio>
+ * </RadioGroup>
+ *
+ * // Disabled
+ * <RadioGroup label="Options" isDisabled>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+interface RadioGroupProps extends AriaRadioGroupProps, Omit<React__default.HTMLAttributes<HTMLDivElement>, keyof AriaRadioGroupProps | "children"> {
+    /**
+     * Radio buttons to display in the group
+     */
+    children: React__default.ReactNode;
+    /**
+     * Layout orientation of the radio group
+     * @default "vertical"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Error/invalid state
+     * Shows error styling (typically red)
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+}
+/**
+ * Material Design 3 Radio Component Props
+ *
+ * Built on React Aria for world-class accessibility.
+ * Must be used within a RadioGroup for proper functionality.
+ * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within RadioGroup
+ * <RadioGroup label="Options">
+ *   <Radio value="option1">Option 1</Radio>
+ *   <Radio value="option2">Option 2</Radio>
+ * </RadioGroup>
+ *
+ * // Without label (icon-only) - needs aria-label
+ * <RadioGroup label="Options">
+ *   <Radio value="a" aria-label="Option A" />
+ *   <Radio value="b" aria-label="Option B" />
+ * </RadioGroup>
+ *
+ * // Disabled individual radio
+ * <RadioGroup label="Options">
+ *   <Radio value="enabled">Enabled</Radio>
+ *   <Radio value="disabled" isDisabled>Disabled</Radio>
+ * </RadioGroup>
+ *
+ * // Custom styling
+ * <Radio value="custom" className="my-custom-class">
+ *   Custom
+ * </Radio>
+ * ```
+ */
+interface RadioProps extends AriaRadioProps, Omit<React__default.HTMLAttributes<HTMLLabelElement>, keyof AriaRadioProps | "children"> {
+    /**
+     * Radio label content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Additional CSS classes (Tailwind)
+     */
+    className?: string;
+}
+/**
+ * Props for the headless RadioGroup component
+ * Extends AriaRadioGroupProps for accessibility
+ */
+interface RadioGroupHeadlessProps extends AriaRadioGroupProps {
+    /**
+     * Additional CSS classes for the group wrapper
+     */
+    className?: string;
+    /**
+     * Radio buttons to display in the group
+     */
+    children: React__default.ReactNode;
+    /**
+     * Render slot for the group label.
+     * Receives React Aria's `labelProps` (contains the generated `id` for
+     * `aria-labelledby` association) so the consumer can render a styled
+     * label element while preserving correct ARIA semantics.
+     *
+     * When provided, the default `<span {...labelProps}>` is suppressed and
+     * this callback is responsible for rendering the label.
+     *
+     * @example
+     * ```tsx
+     * <RadioGroupHeadless
+     *   label="Pick one"
+     *   renderLabel={(labelProps) => (
+     *     <div {...labelProps} className="my-label-style">Pick one</div>
+     *   )}
+     * >
+     *   ...
+     * </RadioGroupHeadless>
+     * ```
+     */
+    renderLabel?: (labelProps: React__default.HTMLAttributes<HTMLElement>) => React__default.ReactNode;
+}
+/**
+ * Props for the headless Radio component
+ * Extends AriaRadioProps for accessibility
+ */
+interface RadioHeadlessProps extends AriaRadioProps {
+    /**
+     * Additional CSS classes for the label wrapper
+     */
+    className?: string;
+    /**
+     * Radio label content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Render prop for custom radio visual
+     * Receives state information
+     */
+    renderRadio?: (state: {
+        isSelected: boolean;
+        isDisabled: boolean;
+        isFocusVisible: boolean;
+        isPressed: boolean;
+    }) => React__default.ReactNode;
+}
+
+/**
+ * Material Design 3 Radio Component (Layer 3: Styled)
+ *
+ * Built on React Aria for world-class accessibility.
+ * Uses CVA for type-safe variant management.
+ * Styled with Tailwind CSS using MD3 design tokens.
+ * Must be used within a RadioGroup for proper functionality.
+ *
+ * Features:
+ * - ✅ 2 states: unselected, selected
+ * - ✅ Ripple effect (Material Design)
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Screen reader support (via React Aria)
+ * - ✅ Focus management (via React Aria)
+ * - ✅ Form integration (name, value props from RadioGroup)
+ *
+ * MD3 Specifications:
+ * - Radio icon: 20x20dp (within 40x40dp touch target)
+ * - Outer circle: 20px
+ * - Inner dot: 10px (selected state)
+ * - Outline width: 2dp
+ * - State layers: 8% hover, 12% focus/pressed
+ * - Disabled: 38% opacity
+ * - Label spacing: 16px (ml-4)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage within RadioGroup
+ * <RadioGroup label="Options">
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Without label (needs aria-label)
+ * <RadioGroup label="Options">
+ *   <Radio value="a" aria-label="Option A" />
+ * </RadioGroup>
+ *
+ * // Disabled individual radio
+ * <RadioGroup label="Options">
+ *   <Radio value="a">Enabled</Radio>
+ *   <Radio value="b" isDisabled>Disabled</Radio>
+ * </RadioGroup>
+ *
+ * // Custom styling
+ * <Radio value="custom" className="my-custom-class">
+ *   Custom
+ * </Radio>
+ * ```
+ */
+declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Material Design 3 RadioGroup Component (Layer 3: Styled)
+ *
+ * Built on React Aria for world-class accessibility.
+ * Uses CVA for type-safe variant management.
+ * Styled with Tailwind CSS using MD3 design tokens.
+ *
+ * Features:
+ * - ✅ Single-selection behavior
+ * - ✅ Horizontal and vertical orientation
+ * - ✅ Error/invalid state support
+ * - ✅ Full keyboard accessibility (via React Aria)
+ * - ✅ Screen reader support (via React Aria)
+ * - ✅ Focus management (via React Aria)
+ * - ✅ Form integration (name, value props)
+ *
+ * MD3 Specifications:
+ * - Radio icon: 20x20dp (within 40x40dp touch target)
+ * - State layers: 8% hover, 12% focus/pressed
+ * - Disabled: 38% opacity
+ * - Radio spacing: 16px gap
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (vertical)
+ * <RadioGroup label="Favorite color">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
+ * </RadioGroup>
+ *
+ * // Horizontal orientation
+ * <RadioGroup label="Size" orientation="horizontal">
+ *   <Radio value="s">Small</Radio>
+ *   <Radio value="m">Medium</Radio>
+ *   <Radio value="l">Large</Radio>
+ * </RadioGroup>
+ *
+ * // Controlled
+ * <RadioGroup label="Choice" value={selected} onChange={setSelected}>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Error state
+ * <RadioGroup label="Required" isInvalid>
+ *   <Radio value="yes">Yes</Radio>
+ *   <Radio value="no">No</Radio>
+ * </RadioGroup>
+ *
+ * // Disabled
+ * <RadioGroup label="Options" isDisabled>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Headless Radio Component (Layer 2)
+ *
+ * Unstyled radio primitive using React Aria for accessibility.
+ * Provides behavior only - bring your own styles.
+ * Must be used within a RadioGroup for proper functionality.
+ *
+ * Features:
+ * - Full keyboard navigation (Space to select)
+ * - Screen reader support
+ * - Touch/pointer event handling
+ * - Focus management
+ * - Disabled state handling
+ * - Form integration
+ *
+ * @example
+ * ```tsx
+ * // Use for custom styling
+ * <RadioGroupHeadless label="Options">
+ *   <RadioHeadless value="a" className="custom-radio">
+ *     Option A
+ *   </RadioHeadless>
+ * </RadioGroupHeadless>
+ *
+ * // With render prop for custom visual
+ * <RadioHeadless
+ *   value="a"
+ *   renderRadio={({ isSelected }) => (
+ *     <CustomRadioIcon checked={isSelected} />
+ *   )}
+ * >
+ *   Custom visual
+ * </RadioHeadless>
+ * ```
+ */
+declare const RadioHeadless: React$1.ForwardRefExoticComponent<RadioHeadlessProps & React$1.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Headless RadioGroup Component (Layer 2)
+ *
+ * Unstyled radio group primitive using React Aria for accessibility.
+ * Provides behavior only - bring your own styles.
+ *
+ * Features:
+ * - Full keyboard navigation (Arrow keys, Tab)
+ * - Screen reader support
+ * - Single-selection enforcement
+ * - Focus management
+ * - Disabled state handling
+ * - Form integration
+ *
+ * @example
+ * ```tsx
+ * // Use for custom styling
+ * <RadioGroupHeadless label="Options" className="custom-group">
+ *   <RadioHeadless value="a">Option A</RadioHeadless>
+ *   <RadioHeadless value="b">Option B</RadioHeadless>
+ * </RadioGroupHeadless>
+ * ```
+ */
+declare const RadioGroupHeadless: React$1.ForwardRefExoticComponent<RadioGroupHeadlessProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, FAB, type FABColor, FABHeadless, type FABHeadlessProps, type FABProps, type FABSize, IconButton, type IconButtonColor, IconButtonHeadless, type IconButtonHeadlessProps, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type MD3ColorRole, type MD3TypographyScale, type MD3TypographySize, type MD3TypographyStyle, Radio, RadioGroup, RadioGroupHeadless, type RadioGroupHeadlessProps, type RadioGroupProps, RadioHeadless, type RadioHeadlessProps, type RadioProps, STATE_LAYER_OPACITY, Switch, type SwitchProps, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type TypographyProperty, type TypographyStyleObject, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };