@chellaa/react 0.2.0 → 0.2.2

package/dist/index.d.cts

@@ -1,50 +1,235 @@
 import * as React from 'react';
+import React__default, { CSSProperties } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import { FloatingContext, ExtendedRefs, MiddlewareData } from '@floating-ui/react';
 
+type ColorMode = "light" | "dark";
+interface PaletteColor {
+    light: string;
+    main: string;
+    dark: string;
+    contrastText: string;
+}
+interface TypeText {
+    primary: string;
+    secondary: string;
+    disabled: string;
+}
+interface TypeBackground {
+    default: string;
+    paper: string;
+    surface: string;
+}
+interface TypeAction {
+    active: string;
+    hover: string;
+    hoverOpacity: number;
+    selected: string;
+    selectedOpacity: number;
+    disabled: string;
+    disabledBackground: string;
+    focus: string;
+    focusOpacity: number;
+}
+interface Palette {
+    mode: ColorMode;
+    primary: PaletteColor;
+    secondary: PaletteColor;
+    error: PaletteColor;
+    warning: PaletteColor;
+    info: PaletteColor;
+    success: PaletteColor;
+    text: TypeText;
+    background: TypeBackground;
+    divider: string;
+    action: TypeAction;
+}
+type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl";
+interface Breakpoints {
+    values: Record<BreakpointKey, number>;
+    up: (key: BreakpointKey | number) => string;
+    down: (key: BreakpointKey | number) => string;
+    between: (start: BreakpointKey | number, end: BreakpointKey | number) => string;
+    only: (key: BreakpointKey) => string;
+}
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "button" | "caption" | "overline";
+interface TypographyStyle {
+    fontFamily?: string;
+    fontWeight?: number | string;
+    fontSize?: string;
+    lineHeight?: number | string;
+    letterSpacing?: string;
+    textTransform?: React.CSSProperties["textTransform"];
+}
+interface TypographyTheme {
+    fontFamily: string;
+    fontSize: number;
+    fontWeightLight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+    h1: TypographyStyle;
+    h2: TypographyStyle;
+    h3: TypographyStyle;
+    h4: TypographyStyle;
+    h5: TypographyStyle;
+    h6: TypographyStyle;
+    subtitle1: TypographyStyle;
+    subtitle2: TypographyStyle;
+    body1: TypographyStyle;
+    body2: TypographyStyle;
+    button: TypographyStyle;
+    caption: TypographyStyle;
+    overline: TypographyStyle;
+}
+interface Transitions {
+    easing: {
+        easeInOut: string;
+        easeOut: string;
+        easeIn: string;
+        sharp: string;
+    };
+    duration: {
+        shortest: number;
+        shorter: number;
+        short: number;
+        standard: number;
+        complex: number;
+        enteringScreen: number;
+        leavingScreen: number;
+    };
+    create: (props: string | string[], options?: {
+        duration?: number | string;
+        easing?: string;
+        delay?: number | string;
+    }) => string;
+}
+interface ZIndex {
+    mobileStepper: number;
+    fab: number;
+    speedDial: number;
+    appBar: number;
+    drawer: number;
+    modal: number;
+    snackbar: number;
+    tooltip: number;
+}
+interface ComponentOverride<P = any> {
+    defaultProps?: Partial<P>;
+    styleOverrides?: {
+        [slot: string]: React.CSSProperties | ((params: {
+            theme: ChellaaTheme;
+            ownerState: P;
+        }) => React.CSSProperties);
+    };
+}
+interface ChellaaTheme {
+    palette: Palette;
+    typography: TypographyTheme;
+    spacing: (...factors: (number | string)[]) => string;
+    shape: {
+        borderRadius: number;
+    };
+    breakpoints: Breakpoints;
+    shadows: string[];
+    transitions: Transitions;
+    zIndex: ZIndex;
+    components?: Record<string, ComponentOverride>;
+}
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Function ? T[P] : T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type ThemeOptions = DeepPartial<ChellaaTheme>;
+
+declare module "@emotion/react" {
+    interface Theme extends ChellaaTheme {
+    }
+}
 type ThemeMode = "light" | "dark" | "system" | string;
 interface ThemeContextValue {
     theme: ThemeMode;
     setTheme: (theme: ThemeMode) => void;
     resolvedTheme: "light" | "dark";
     systemTheme: "light" | "dark" | undefined;
+    activeTheme: ChellaaTheme;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
 }
 interface ThemeProviderProps {
     children?: React.ReactNode;
+    theme?: ChellaaTheme | ThemeOptions;
     defaultTheme?: ThemeMode;
     storageKey?: string;
     enableSystem?: boolean;
     tokens?: Record<string, string>;
     attribute?: string;
 }
-declare function ThemeProvider({ children, defaultTheme, storageKey, enableSystem, tokens, attribute, }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ children, theme: customThemeProp, defaultTheme: defaultThemeMode, storageKey, enableSystem, tokens, attribute, }: ThemeProviderProps): React.JSX.Element;
 
+interface ExtendedThemeContextValue extends ThemeContextValue {
+    /** The active ChellaaTheme object (colors, typography, spacing, shadows) */
+    themeObject: ChellaaTheme;
+}
 /**
  * Accesses the active theme context, allowing components to read and update
- * the current theme mode (`light`, `dark`, `system`), resolved theme, and system preference.
+ * the current theme mode (`light`, `dark`, `system`), resolved theme, and active ChellaaTheme.
  */
-declare function useTheme(): ThemeContextValue;
+declare function useTheme(): ExtendedThemeContextValue;
 
-interface CustomThemeConfig {
-    name: string;
-    tokens: Record<string, string>;
-}
-interface CustomThemeResult {
-    name: string;
-    tokens: Record<string, string>;
-    cssText: string;
-}
 /**
- * Creates a structured custom theme definition and compiles it to valid CSS custom property text.
+ * Creates a Chellaa Material Theme with 24-level elevation shadows,
+ * 8px spacing, and complete Google Material 3 design tokens.
  *
  * @example
- * const emeraldTheme = createTheme({
- *   name: 'emerald',
- *   tokens: {
- *     '--cl-color-primary-base': '#059669',
- *     '--cl-color-primary-hover': '#047857',
- *   }
+ * const theme = createTheme({
+ *   palette: {
+ *     mode: 'dark',
+ *     primary: { main: '#6366f1' }
+ *   },
+ *   shape: { borderRadius: 8 }
  * });
  */
-declare function createTheme(config: CustomThemeConfig): CustomThemeResult;
+declare function createTheme(options?: ThemeOptions): ChellaaTheme;
+declare const defaultTheme: ChellaaTheme;
+declare const defaultDarkTheme: ChellaaTheme;
+
+/**
+ * Google Material Design 24-Level Elevation Shadow Matrix
+ *
+ * Each shadow is composed of 3 distinct light-source formulas:
+ * 1. Umbra: Key direct light source shadow
+ * 2. Penumbra: Secondary ambient light shadow
+ * 3. Ambient: Atmospheric fill shadow
+ */
+declare function createShadows(): string[];
+declare const defaultShadows: string[];
+
+/**
+ * Google Material Design 8px Spacing Grid Function
+ *
+ * Supports single and multi-argument invocations:
+ * - spacing(1)      => '8px'
+ * - spacing(2)      => '16px'
+ * - spacing(1, 2)   => '8px 16px'
+ * - spacing(1, 2, 3, 4) => '8px 16px 24px 32px'
+ * - spacing('auto') => 'auto'
+ */
+declare function createSpacing(base?: number): (...factors: (number | string)[]) => string;
+declare const defaultSpacing: (...factors: (number | string)[]) => string;
+
+declare const breakpointKeys: BreakpointKey[];
+declare function createBreakpoints(customValues?: Partial<Record<BreakpointKey, number>>): Breakpoints;
+declare const defaultBreakpoints: Breakpoints;
+
+declare const lightPalette: Palette;
+declare const darkPalette: Palette;
+declare function createPalette(mode?: ColorMode): Palette;
+
+declare const defaultTypography: TypographyTheme;
+
+declare const defaultTransitions: Transitions;
+
+declare const defaultZIndex: ZIndex;
 
 interface ThemeScriptProps {
     storageKey?: string;
@@ -58,6 +243,182 @@ interface ThemeScriptProps {
  */
 declare function ThemeScript({ storageKey, defaultTheme, attribute, nonce, }: ThemeScriptProps): React.JSX.Element;
 
+/**
+ * Responsive value supports:
+ * 1. Single value: 2 | "100%"
+ * 2. Array syntax: [1, 2, 4] (mapped to xs, sm, md...)
+ * 3. Object syntax: { xs: 1, sm: 2, md: 4 }
+ */
+type ResponsiveValue<T> = T | (T | null | undefined)[] | Partial<Record<BreakpointKey, T>>;
+/**
+ * Shorthand and theme-aware system properties
+ */
+interface SystemStyleProperties {
+    m?: ResponsiveValue<number | string>;
+    margin?: ResponsiveValue<number | string>;
+    mt?: ResponsiveValue<number | string>;
+    marginTop?: ResponsiveValue<number | string>;
+    mr?: ResponsiveValue<number | string>;
+    marginRight?: ResponsiveValue<number | string>;
+    mb?: ResponsiveValue<number | string>;
+    marginBottom?: ResponsiveValue<number | string>;
+    ml?: ResponsiveValue<number | string>;
+    marginLeft?: ResponsiveValue<number | string>;
+    mx?: ResponsiveValue<number | string>;
+    marginInline?: ResponsiveValue<number | string>;
+    my?: ResponsiveValue<number | string>;
+    marginBlock?: ResponsiveValue<number | string>;
+    p?: ResponsiveValue<number | string>;
+    padding?: ResponsiveValue<number | string>;
+    pt?: ResponsiveValue<number | string>;
+    paddingTop?: ResponsiveValue<number | string>;
+    pr?: ResponsiveValue<number | string>;
+    paddingRight?: ResponsiveValue<number | string>;
+    pb?: ResponsiveValue<number | string>;
+    paddingBottom?: ResponsiveValue<number | string>;
+    pl?: ResponsiveValue<number | string>;
+    paddingLeft?: ResponsiveValue<number | string>;
+    px?: ResponsiveValue<number | string>;
+    paddingInline?: ResponsiveValue<number | string>;
+    py?: ResponsiveValue<number | string>;
+    paddingBlock?: ResponsiveValue<number | string>;
+    gap?: ResponsiveValue<number | string>;
+    rowGap?: ResponsiveValue<number | string>;
+    columnGap?: ResponsiveValue<number | string>;
+    color?: ResponsiveValue<string>;
+    bgcolor?: ResponsiveValue<string>;
+    backgroundColor?: ResponsiveValue<string>;
+    borderColor?: ResponsiveValue<string>;
+    elevation?: ResponsiveValue<number>;
+    boxShadow?: ResponsiveValue<number | string>;
+    borderRadius?: ResponsiveValue<number | string>;
+    zIndex?: ResponsiveValue<number | string>;
+    display?: ResponsiveValue<CSSProperties["display"]>;
+    flexDirection?: ResponsiveValue<CSSProperties["flexDirection"]>;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]>;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]>;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]>;
+    alignContent?: ResponsiveValue<CSSProperties["alignContent"]>;
+    flexGrow?: ResponsiveValue<CSSProperties["flexGrow"]>;
+    flexShrink?: ResponsiveValue<CSSProperties["flexShrink"]>;
+    flexBasis?: ResponsiveValue<CSSProperties["flexBasis"]>;
+    flex?: ResponsiveValue<CSSProperties["flex"]>;
+    width?: ResponsiveValue<number | string>;
+    minWidth?: ResponsiveValue<number | string>;
+    maxWidth?: ResponsiveValue<number | string>;
+    height?: ResponsiveValue<number | string>;
+    minHeight?: ResponsiveValue<number | string>;
+    maxHeight?: ResponsiveValue<number | string>;
+    position?: ResponsiveValue<CSSProperties["position"]>;
+    top?: ResponsiveValue<number | string>;
+    right?: ResponsiveValue<number | string>;
+    bottom?: ResponsiveValue<number | string>;
+    left?: ResponsiveValue<number | string>;
+    overflow?: ResponsiveValue<CSSProperties["overflow"]>;
+    opacity?: ResponsiveValue<CSSProperties["opacity"]>;
+}
+type StandardCSSProperties = {
+    [K in keyof CSSProperties]?: ResponsiveValue<CSSProperties[K]>;
+};
+type SystemCssProperties = SystemStyleProperties & StandardCSSProperties;
+interface SxObject extends SystemCssProperties {
+    [key: string]: ResponsiveValue<any> | SxObject | ((theme: ChellaaTheme) => SxObject) | undefined;
+}
+type SxPropValue = SxObject | ((theme: ChellaaTheme) => SxObject) | boolean | undefined | null;
+type SxProps = SxPropValue | SxPropValue[];
+interface StyledOptions<Props extends object = {}> {
+    /**
+     * Component name for theme overrides and debugging (e.g. 'ChellaaButton')
+     */
+    name?: string;
+    /**
+     * Component slot name (e.g. 'root', 'startIcon', 'thumb')
+     */
+    slot?: string;
+    /**
+     * Filter predicate determining which props should be forwarded to DOM element
+     */
+    shouldForwardProp?: (prop: PropertyKey) => boolean;
+    /**
+     * Descriptive label for generated emotion classes
+     */
+    label?: string;
+    /**
+     * CSS target class
+     */
+    target?: string;
+    /**
+     * If true, bypasses automatic sx prop resolution
+     */
+    skipSx?: boolean;
+    /**
+     * Optional custom resolver for theme style overrides
+     */
+    overridesResolver?: (props: Props, styles: Record<string, any>) => Record<string, any> | undefined;
+}
+
+/**
+ * Creates a shouldForwardProp predicate function for Emotion styled components.
+ * Automatically filters out transient props starting with '$' and default system props.
+ *
+ * @param customBlocked Array or Set of additional prop names to prevent forwarding to DOM
+ */
+declare function createShouldForwardProp(customBlocked?: (string | PropertyKey)[] | Set<string | PropertyKey>): (prop: PropertyKey) => boolean;
+/**
+ * Default root shouldForwardProp filter.
+ * Blocks 'sx', 'theme', 'as', 'ownerState', 'slotProps', and '$*'.
+ */
+declare const rootShouldForwardProp: (prop: PropertyKey) => boolean;
+
+/**
+ * Core responsive `sx` parser function.
+ * Evaluates `sx` prop against current theme, expanding:
+ * - Theme spacing shortcuts (m, p, mx, my, px, py, etc.)
+ * - Theme palette tokens (color, bgcolor: 'primary.main', 'text.secondary')
+ * - Elevation shadows (elevation: 0..24, boxShadow: 0..24)
+ * - Breakpoint responsive arrays ([1, 2, 4]) and objects ({ xs: 1, md: 4 })
+ * - Pseudo-classes (&:hover, &:focus) and nested selectors
+ * - Theme function callbacks: `(theme) => ({ ... })`
+ * - Array of sx items: `[sx1, condition && sx2, (theme) => sx3]`
+ */
+declare function parseSx(themeInput?: ChellaaTheme, sx?: SxProps): Record<string, any>;
+
+interface ComponentOverrideOptions {
+    name?: string;
+    slot?: string;
+    overridesResolver?: (props: any, styles: Record<string, any>) => Record<string, any> | undefined;
+}
+/**
+ * Resolves component-level style overrides defined in theme.components[name].styleOverrides
+ * Supports both static style objects and dynamic functions: `({ theme, ownerState }) => ({ ... })`
+ */
+declare function resolveComponentOverrides(theme: ChellaaTheme, options: ComponentOverrideOptions, props: Record<string, any>): Record<string, any> | undefined;
+
+type StyleInterpolation<Props extends object = {}> = Record<string, any> | ((props: Props & {
+    theme: ChellaaTheme;
+}) => Record<string, any> | undefined | null | false);
+/**
+ * Creates an Emotion-powered styled component with:
+ * 1. Automatic `sx` prop parsing with responsive breakpoints & 8px theme spacing.
+ * 2. Automatic resolution of `theme.components[name].styleOverrides[slot]`.
+ * 3. Safe DOM prop filtering via `shouldForwardProp` preventing `sx` and private props from leaking.
+ * 4. First-class polymorphism via `as` prop.
+ *
+ * @example
+ * const MyBox = styled('div', {
+ *   name: 'ChellaaBox',
+ *   slot: 'Root'
+ * })({
+ *   boxSizing: 'border-box'
+ * });
+ */
+declare function styled<Component extends React__default.ElementType, ExtraProps extends object = {}>(component: Component, options?: StyledOptions<ExtraProps>): <Props extends object = ExtraProps>(...interpolations: StyleInterpolation<Props & {
+    sx?: SxProps;
+    as?: React__default.ElementType;
+}>[]) => _emotion_styled.StyledComponent<any, {}, {
+    ref?: React__default.Ref<any>;
+}>;
+
 type ButtonVariant = "solid" | "outline" | "ghost" | "subtle" | "link";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonColorScheme = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
@@ -119,6 +480,15 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * If true, disables the tactile touch ripple effect.
+     * @default false
+     */
+    disableRipple?: boolean | undefined;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
     /**
      * Button content or label.
      */
@@ -129,7 +499,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  * Chellaa React Button component.
  *
  * Fundamental action primitive supporting 5 variants, 5 sizes, 7 color schemes,
- * loading states, icons, keyboard interaction, and polymorphic slot delegation via `asChild`.
+ * tactile touch ripple feedback, loading states, icons, keyboard interaction,
+ * theme overrides, and polymorphic slot delegation via `asChild`.
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -200,4 +571,3128 @@ declare const ButtonGroupContext: React.Context<ButtonGroupContextValue | undefi
  */
 declare function useButtonGroupContext(): ButtonGroupContextValue | undefined;
 
-export { Button, type ButtonColorScheme, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonLoadingPosition, type ButtonProps, type ButtonSize, type ButtonVariant, type CustomThemeConfig, type CustomThemeResult, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, createTheme, useButtonGroupContext, useTheme };
+interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * If true, delegating rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component to render (alias of `as`)
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component to render
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Universal polymorphic layout container with theme-aware `sx` styling and `asChild` composition.
+ *
+ * @example
+ * <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 2 }}>
+ *   Content
+ * </Box>
+ */
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
+
+type StackDirection = "row" | "row-reverse" | "column" | "column-reverse";
+interface StackOwnerState {
+    direction?: ResponsiveValue<StackDirection> | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    useFlexGap?: boolean | undefined;
+}
+interface StackProps extends React.HTMLAttributes<HTMLElement>, StackOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * Underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * Element placed between each child
+     */
+    divider?: React.ReactNode;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * 1D Flexbox layout container managing direction, spacing, alignment, and dividers.
+ *
+ * @example
+ * <Stack direction="row" spacing={2} alignItems="center">
+ *   <Item>1</Item>
+ *   <Item>2</Item>
+ * </Stack>
+ */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+
+interface FlexOwnerState {
+    direction?: ResponsiveValue<StackDirection> | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    gap?: ResponsiveValue<number | string> | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    align?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    justify?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    wrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    inline?: boolean | undefined;
+    center?: boolean | undefined;
+}
+interface FlexProps extends React.HTMLAttributes<HTMLElement>, FlexOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * Underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Underlying HTML element or component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * Element placed between each child
+     */
+    divider?: React.ReactNode | undefined;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * 1D Flexbox layout container defaulting to horizontal row flow with convenient
+ * shorthands: `center`, `inline`, `align`, `justify`, `wrap`, and `gap`.
+ *
+ * @example
+ * <Flex center gap={2}>
+ *   <Avatar />
+ *   <Text>User Name</Text>
+ * </Flex>
+ */
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>>;
+
+interface ContainerOwnerState {
+    maxWidth?: BreakpointKey | false | undefined;
+    fixed?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+}
+interface ContainerProps extends React.HTMLAttributes<HTMLElement>, ContainerOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Centered responsive max-width container with fluid gutters.
+ *
+ * @example
+ * <Container maxWidth="md">
+ *   <Typography variant="h1">Header</Typography>
+ * </Container>
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+
+type GridSize = boolean | "auto" | number;
+type GridWrap = "nowrap" | "wrap" | "wrap-reverse";
+type GridDirection = "row" | "row-reverse" | "column" | "column-reverse";
+interface GridOwnerState {
+    container?: boolean | undefined;
+    item?: boolean | undefined;
+    columns?: number | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    rowSpacing?: ResponsiveValue<number | string> | undefined;
+    columnSpacing?: ResponsiveValue<number | string> | undefined;
+    direction?: ResponsiveValue<GridDirection> | undefined;
+    wrap?: GridWrap | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    xs?: GridSize | undefined;
+    sm?: GridSize | undefined;
+    md?: GridSize | undefined;
+    lg?: GridSize | undefined;
+    xl?: GridSize | undefined;
+}
+interface GridProps extends React.HTMLAttributes<HTMLElement>, GridOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Material 12-column responsive layout grid.
+ *
+ * @example
+ * <Grid container spacing={2}>
+ *   <Grid item xs={12} md={6}>Item 1</Grid>
+ *   <Grid item xs={12} md={6}>Item 2</Grid>
+ * </Grid>
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+
+type DividerOrientation = "horizontal" | "vertical";
+type DividerVariant = "fullWidth" | "inset" | "middle";
+type DividerTextAlign = "center" | "left" | "right";
+type DividerLineStyle = "solid" | "dashed" | "dotted";
+interface DividerOwnerState {
+    orientation?: DividerOrientation | undefined;
+    variant?: DividerVariant | undefined;
+    lineStyle?: DividerLineStyle | undefined;
+    flexItem?: boolean | undefined;
+    light?: boolean | undefined;
+    textAlign?: DividerTextAlign | undefined;
+    hasChildren?: boolean | undefined;
+}
+interface DividerProps extends React.HTMLAttributes<HTMLElement>, DividerOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Divider visual separator for grouping, lists, toolbars, and labeled sections.
+ *
+ * @example
+ * <Divider />
+ * <Divider>OR</Divider>
+ * <Divider orientation="vertical" flexItem />
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
+
+type TypographyAlign = "inherit" | "left" | "center" | "right" | "justify";
+interface TypographyOwnerState {
+    variant?: TypographyVariant | undefined;
+    align?: TypographyAlign | undefined;
+    color?: string | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    lineClamp?: number | undefined;
+}
+interface TypographyProps extends React.HTMLAttributes<HTMLElement>, TypographyOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+declare function resolveTypographyColor(theme: ChellaaTheme, color?: string): string | undefined;
+/**
+ * Foundational Typography component supporting all Material Design 3 scale variants,
+ * truncation, line clamping, and semantic element delegation.
+ *
+ * @example
+ * <Typography variant="h1">Display Header</Typography>
+ * <Typography variant="body1" color="text.secondary">Body text</Typography>
+ * <Typography noWrap>Single line truncated text</Typography>
+ */
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends Omit<TypographyProps, "variant"> {
+    /**
+     * Semantic heading level (1 to 6).
+     * Determines both default HTML tag (h1..h6) and typography scale variant unless overridden.
+     * @default 2
+     */
+    level?: HeadingLevel | undefined;
+    /**
+     * Optional visual scale variant to decouple styling from heading level.
+     */
+    variant?: TypographyVariant | undefined;
+}
+/**
+ * Ergonomic semantic heading primitive.
+ *
+ * @example
+ * <Heading level={1}>Page Title</Heading>
+ * <Heading level={2} variant="h4">Visually smaller Section Title</Heading>
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
+
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface TextProps extends TypographyProps {
+    /**
+     * Shorthand text size mapping to theme typographic scale:
+     * - "xs": caption (12px)
+     * - "sm": body2 (14px)
+     * - "md": body1 (16px)
+     * - "lg": subtitle1 (16px/medium)
+     * - "xl": h6 (20px)
+     */
+    size?: TextSize | undefined;
+    /**
+     * If true, renders as block element ('div' or 'p'). Otherwise renders as inline 'span'.
+     * @default false
+     */
+    block?: boolean | undefined;
+}
+/**
+ * Ergonomic inline or block textual primitive.
+ *
+ * @example
+ * <Text size="sm" color="text.secondary">Secondary caption</Text>
+ * <Text block noWrap>Single line block item</Text>
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+
+interface ParagraphProps extends TypographyProps {
+    /**
+     * Shorthand spacing multiplier for bottom margin (defaults to standard gutterBottom).
+     */
+    spacing?: number | string | undefined;
+}
+/**
+ * Ergonomic paragraph block primitive with standard reading margins.
+ *
+ * @example
+ * <Paragraph>
+ *   This is standard paragraph text with built-in reading spacing.
+ * </Paragraph>
+ */
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLElement>>;
+
+type CodeColorScheme = "default" | "primary" | "secondary";
+interface CodeOwnerState {
+    colorScheme?: CodeColorScheme | undefined;
+}
+interface CodeProps extends React.HTMLAttributes<HTMLElement>, CodeOwnerState {
+    asChild?: boolean | undefined;
+    component?: React.ElementType | undefined;
+    as?: React.ElementType | undefined;
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Inline monospace code chip primitive for identifiers, filenames, and CLI snippets.
+ *
+ * @example
+ * <Text>Run <Code>npm install</Code> to install dependencies.</Text>
+ * <Code colorScheme="primary">package.json</Code>
+ */
+declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;
+
+type KbdSize = "sm" | "md" | "lg";
+type KbdVariant = "outline" | "subtle" | "solid";
+type KbdModifier = "command" | "cmd" | "shift" | "option" | "alt" | "control" | "ctrl" | "enter" | "escape" | "esc" | "tab" | "backspace" | "delete" | "del" | "up" | "down" | "left" | "right";
+declare const MODIFIER_SYMBOLS: Record<KbdModifier, string>;
+interface KbdOwnerState {
+    size?: KbdSize | undefined;
+    variant?: KbdVariant | undefined;
+    modifier?: KbdModifier | undefined;
+}
+interface KbdProps extends React.HTMLAttributes<HTMLElement>, KbdOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Tactile keyboard shortcut keycap primitive representing user input keystrokes.
+ *
+ * @example
+ * <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
+ * <Kbd modifier="command" />
+ * <Kbd size="sm" variant="subtle">Esc</Kbd>
+ */
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+
+type InputVariant = "outlined" | "filled" | "standard" | "unstyled";
+type InputSize = "sm" | "md" | "lg";
+interface InputOwnerState {
+    variant?: InputVariant | undefined;
+    size?: InputSize | undefined;
+    fullWidth?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    hasStartAdornment?: boolean | undefined;
+    hasEndAdornment?: boolean | undefined;
+    focused?: boolean | undefined;
+}
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">, InputOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component for root wrapper
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop for dynamic runtime overrides
+     */
+    sx?: SxProps;
+    /**
+     * Additional props forwarded to native input element
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * Content rendered at the start of the input track
+     */
+    startAdornment?: React.ReactNode | undefined;
+    /**
+     * Content rendered at the end of the input track
+     */
+    endAdornment?: React.ReactNode | undefined;
+    /**
+     * If true, displays an interactive clear button when text is present
+     * @default false
+     */
+    clearable?: boolean | undefined;
+    /**
+     * Callback fired when the clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Ref forwarded directly to the native <input> element
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Slotted child element when asChild is true
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * Headless raw input primitive for backward compatibility.
+ */
+declare const InputBase: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    ownerState?: InputOwnerState;
+} & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Chellaa React Input component.
+ *
+ * Fundamental single-line text entry primitive with Material Design 3 surface variants,
+ * precompiled CSS cascade layers (@layer cl-components), zero-runtime static styling,
+ * dynamic sx override bridge, and accessible form integration.
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TextFieldProps extends InputProps {
+    /**
+     * The label text displayed above the input.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Explanatory helper text displayed below the input.
+     */
+    helperText?: React.ReactNode | undefined;
+    /**
+     * Error message displayed below the input when error is true.
+     */
+    errorMessage?: React.ReactNode | undefined;
+    /**
+     * If true, displays a required asterisk next to the label and marks input required.
+     * @default false
+     */
+    required?: boolean | undefined;
+}
+/**
+ * Enterprise composite form control combining label, input, helper text, and validation messaging.
+ *
+ * @example
+ * <TextField
+ *   label="Email Address"
+ *   type="email"
+ *   placeholder="user@example.com"
+ *   helperText="We will never share your email."
+ *   required
+ * />
+ */
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface InputAdornmentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position of the adornment within the input track.
+     */
+    position: "start" | "end";
+    /**
+     * If true, prevents pointer events on the adornment (e.g. for purely decorative icons).
+     * @default false
+     */
+    disablePointerEvents?: boolean | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+declare const InputAdornment: React.ForwardRefExoticComponent<InputAdornmentProps & React.RefAttributes<HTMLDivElement>>;
+
+type TextareaVariant = "outlined" | "filled" | "standard" | "unstyled";
+type TextareaSize = "sm" | "md" | "lg";
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+interface TextareaOwnerState {
+    variant?: TextareaVariant | undefined;
+    size?: TextareaSize | undefined;
+    fullWidth?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    autoResize?: boolean | undefined;
+    resize?: TextareaResize | undefined;
+    hasCount?: boolean | undefined;
+}
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "color">, TextareaOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component for root wrapper
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    /**
+     * Minimum visible text lines when autoResize is enabled
+     * @default 3
+     */
+    minRows?: number | undefined;
+    /**
+     * Maximum visible text lines before scrollbars appear when autoResize is enabled
+     */
+    maxRows?: number | undefined;
+    /**
+     * If true, displays live character counter below the input
+     * @default false
+     */
+    showCount?: boolean | undefined;
+    /**
+     * Ref forwarded directly to native <textarea> element
+     */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * Additional HTML attributes forwarded to the native HTMLTextAreaElement.
+     */
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement> | undefined;
+    /**
+     * Slotted child element when asChild is true
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * Multi-line plain text editing control with Material Design surface variants,
+ * auto-expansion support, and character counter capabilities.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    isReadOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    asChild?: boolean | undefined;
+    component?: React.ElementType | undefined;
+    as?: React.ElementType | undefined;
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Root form control container and accessibility context provider.
+ * Automatically generates IDs and cascades validation states to child controls.
+ *
+ * @example
+ * <FormField required error={hasError}>
+ *   <FormLabel>Email Address</FormLabel>
+ *   <Input type="email" placeholder="alex@company.com" />
+ *   <FormHelperText>We will never share your email.</FormHelperText>
+ *   <FormErrorMessage>Invalid email address.</FormErrorMessage>
+ * </FormField>
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * If true, displays a required asterisk. Inherits from FormField context if omitted.
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, highlights label in error palette color. Inherits from FormField context if omitted.
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, styles label in disabled state. Inherits from FormField context if omitted.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Accessible form label automatically linked to its associated input control.
+ *
+ * @example
+ * <FormLabel>Email Address</FormLabel>
+ */
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * If true, styles helper text in disabled state.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Contextual explanation text rendered beneath an input control,
+ * automatically linked via aria-describedby.
+ *
+ * @example
+ * <FormHelperText>We will never share your personal email.</FormHelperText>
+ */
+declare const FormHelperText: React.ForwardRefExoticComponent<FormHelperTextProps & React.RefAttributes<HTMLParagraphElement>>;
+
+interface FormErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * If true, forces the error message to mount even if error is false.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Accessible error message primitive rendered conditionally when error is true,
+ * possessing role="alert" for immediate screen reader announcement.
+ *
+ * @example
+ * <FormErrorMessage>Please enter a valid email address.</FormErrorMessage>
+ */
+declare const FormErrorMessage: React.ForwardRefExoticComponent<FormErrorMessageProps & React.RefAttributes<HTMLParagraphElement>>;
+
+interface FormFieldContextValue {
+    id: string;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    labelId: string;
+    helperTextId: string;
+    errorMessageId: string;
+    hasHelperText: boolean;
+    hasErrorMessage: boolean;
+    setHasHelperText: (has: boolean) => void;
+    setHasErrorMessage: (has: boolean) => void;
+}
+declare const FormFieldContext: React.Context<FormFieldContextValue | undefined>;
+/**
+ * Hook to consume form field state, IDs, and validation flags.
+ * Returns undefined if used outside a <FormField>.
+ */
+declare function useFormField(): FormFieldContextValue | undefined;
+
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+interface CheckboxOwnerState {
+    size: CheckboxSize;
+    colorScheme: CheckboxColorScheme;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: boolean;
+    hasLabel: boolean;
+}
+interface CheckboxProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the checkbox is checked (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * If true, displays a dash icon and sets aria-checked="mixed".
+     * Takes visual precedence over checked state.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Callback fired when the checked state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The value of the checkbox when used inside a CheckboxGroup.
+     */
+    value?: string | undefined;
+    /**
+     * The name attribute of the hidden input element.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the checkbox control box and label.
+     * @default 'md'
+     */
+    size?: CheckboxSize | undefined;
+    /**
+     * Color palette theme scheme.
+     * @default 'primary'
+     */
+    colorScheme?: CheckboxColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * The controlled array of selected checkbox values.
+     */
+    value?: string[] | undefined;
+    /**
+     * The uncontrolled initial array of selected checkbox values.
+     * @default []
+     */
+    defaultValue?: string[] | undefined;
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: ((value: string[]) => void) | undefined;
+    /**
+     * The name attribute cascaded to all child checkboxes.
+     */
+    name?: string | undefined;
+    /**
+     * The size cascaded to all child checkboxes.
+     * @default 'md'
+     */
+    size?: CheckboxSize | undefined;
+    /**
+     * The color scheme cascaded to all child checkboxes.
+     * @default 'primary'
+     */
+    colorScheme?: CheckboxColorScheme | undefined;
+    /**
+     * The layout orientation of the group.
+     * @default 'vertical'
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * Spacing between individual checkboxes in the group.
+     * Can be a theme spacing unit multiplier or custom CSS dimension.
+     * @default 2
+     */
+    spacing?: number | string | undefined;
+    /**
+     * If true, disables all child checkboxes.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, marks all child checkboxes as read-only.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, marks all child checkboxes with error state.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface CheckboxContextValue {
+    value: string[];
+    name?: string | undefined;
+    size?: CheckboxSize | undefined;
+    colorScheme?: CheckboxColorScheme | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    toggleValue: (itemValue: string) => void;
+}
+
+/**
+ * Checkbox primitive with tri-state selection, custom color palettes,
+ * keyboard accessibility, and automatic CheckboxGroup / FormField binding.
+ *
+ * @example
+ * <Checkbox defaultChecked>Subscribe to updates</Checkbox>
+ * <Checkbox indeterminate>Select all items</Checkbox>
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * CheckboxGroup manages selection state for a set of related checkboxes,
+ * cascading shared properties and orchestrating multi-selection arrays.
+ *
+ * @example
+ * <CheckboxGroup defaultValue={['react']} onChange={(val) => console.log(val)}>
+ *   <Checkbox value="react">React</Checkbox>
+ *   <Checkbox value="vue">Vue</Checkbox>
+ *   <Checkbox value="svelte">Svelte</Checkbox>
+ * </CheckboxGroup>
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const CheckboxContext: React.Context<CheckboxContextValue | undefined>;
+/**
+ * Hook to consume parent CheckboxGroup context.
+ * Returns undefined if the checkbox is rendered standalone.
+ */
+declare function useCheckboxGroup(): CheckboxContextValue | undefined;
+
+type RadioSize = "sm" | "md" | "lg";
+type RadioColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+interface RadioOwnerState {
+    size: RadioSize;
+    colorScheme: RadioColorScheme;
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: boolean;
+    hasLabel: boolean;
+}
+interface RadioProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the radio button is selected (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Callback fired when the radio state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * Distinct value of this radio option.
+     */
+    value?: string | number | undefined;
+    /**
+     * Name attribute of the native input element. Inherited from RadioGroup if omitted.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the radio control circle and label.
+     * @default 'md'
+     */
+    size?: RadioSize | undefined;
+    /**
+     * Color palette theme scheme.
+     * @default 'primary'
+     */
+    colorScheme?: RadioColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * The controlled value of the selected radio button.
+     */
+    value?: string | number | undefined;
+    /**
+     * The uncontrolled initial value of the selected radio button.
+     */
+    defaultValue?: string | number | undefined;
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: ((value: string | number) => void) | undefined;
+    /**
+     * The name attribute cascaded to all child radio buttons.
+     * If omitted, a unique name is auto-generated.
+     */
+    name?: string | undefined;
+    /**
+     * The size cascaded to all child radio buttons.
+     * @default 'md'
+     */
+    size?: RadioSize | undefined;
+    /**
+     * The color scheme cascaded to all child radio buttons.
+     * @default 'primary'
+     */
+    colorScheme?: RadioColorScheme | undefined;
+    /**
+     * The layout orientation of the group.
+     * @default 'vertical'
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * Spacing between individual radio buttons in the group.
+     * @default 2
+     */
+    spacing?: number | string | undefined;
+    /**
+     * If true, disables all child radio buttons.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, marks all child radio buttons as read-only.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, marks all child radio buttons with error state.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface RadioContextValue {
+    value?: string | number | undefined;
+    name?: string | undefined;
+    size?: RadioSize | undefined;
+    colorScheme?: RadioColorScheme | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    onChange: (value: string | number) => void;
+}
+
+/**
+ * Radio primitive for single-choice selection with animated circular dot indicator,
+ * accessible keyboard arrow navigation, and automatic RadioGroup / FormField binding.
+ *
+ * @example
+ * <Radio value="express">Express Delivery</Radio>
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * RadioGroup manages single-selection state across a group of mutually exclusive Radios,
+ * providing native roving keyboard navigation and shared property cascade.
+ *
+ * @example
+ * <RadioGroup defaultValue="standard" onChange={(val) => console.log(val)}>
+ *   <Radio value="standard">Standard Shipping (3-5 days)</Radio>
+ *   <Radio value="express">Express Shipping (1-2 days)</Radio>
+ *   <Radio value="overnight">Overnight Delivery</Radio>
+ * </RadioGroup>
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const RadioContext: React.Context<RadioContextValue | undefined>;
+/**
+ * Hook to consume parent RadioGroup context.
+ * Returns undefined if the radio is rendered standalone.
+ */
+declare function useRadioGroup(): RadioContextValue | undefined;
+
+type SwitchSize = "sm" | "md" | "lg";
+type SwitchColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+type SwitchLabelPlacement = "end" | "start" | "top" | "bottom";
+interface SwitchOwnerState {
+    size: SwitchSize;
+    colorScheme: SwitchColorScheme;
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    loading: boolean;
+    error: boolean;
+    labelPlacement: SwitchLabelPlacement;
+    hasLabel: boolean;
+}
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the switch is toggled on (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Callback fired when the switch state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The value of the switch for native form submission.
+     */
+    value?: string | undefined;
+    /**
+     * The name attribute of the hidden input element.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the switch track and thumb.
+     * @default 'md'
+     */
+    size?: SwitchSize | undefined;
+    /**
+     * Color palette theme scheme when active.
+     * @default 'primary'
+     */
+    colorScheme?: SwitchColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, disables switch and renders a micro-loading spinner inside thumb.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Custom icon rendered inside the thumb when checked.
+     */
+    checkedIcon?: React.ReactNode | undefined;
+    /**
+     * Custom icon rendered inside the thumb when unchecked.
+     */
+    uncheckedIcon?: React.ReactNode | undefined;
+    /**
+     * Position of the label relative to the switch track.
+     * @default 'end'
+     */
+    labelPlacement?: SwitchLabelPlacement | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * Switch primitive representing an immediate binary toggle setting.
+ * Conforms to the W3C WAI-ARIA 1.2 Switch Pattern (`role="switch"`).
+ *
+ * @example
+ * <Switch defaultChecked>Enable Notifications</Switch>
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLLabelElement>>;
+
+type PaperVariant = "elevation" | "outlined";
+interface PaperOwnerState {
+    elevation?: number | undefined;
+    variant?: PaperVariant | undefined;
+    square?: boolean | undefined;
+}
+interface PaperProps extends React.HTMLAttributes<HTMLElement>, PaperOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+
+/**
+ * Material Paper elevation surface container with 24-level elevation shadows,
+ * dark-mode surface elevation overlays, and outlined variants.
+ *
+ * @example
+ * <Paper elevation={3} sx={{ p: 2 }}>
+ *   Elevated Content
+ * </Paper>
+ */
+declare const Paper: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLElement>>;
+
+type CardVariant = "elevated" | "outlined" | "filled" | "outline";
+type CardSize = "sm" | "md" | "lg";
+interface CardOwnerState {
+    variant: CardVariant;
+    elevation: number;
+    size: CardSize;
+    hoverable: boolean;
+    square: boolean;
+}
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean;
+    sx?: SxProps;
+}
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean;
+    sx?: SxProps;
+}
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual surface treatment of the card.
+     * @default "elevated"
+     */
+    variant?: CardVariant;
+    /**
+     * Numeric M3 elevation level (0–24). Only applies to the "elevated" variant.
+     * @default 1
+     */
+    elevation?: number;
+    /**
+     * Spatial padding scale applied to all inner sub-components.
+     * @default "md"
+     */
+    size?: CardSize;
+    /**
+     * When true, raises elevation and lifts the card on hover.
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * When true, changes cursor to pointer and enables interactive hover lift.
+     * @default false
+     */
+    isClickable?: boolean;
+    /**
+     * If true, removes the card's border-radius.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * If true, delegates rendering to the immediate child element via Slot.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Override the root HTML element. */
+    component?: React.ElementType;
+    /** Alias for component. */
+    as?: React.ElementType;
+    /** System-aware sx styling prop. */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Leading avatar or icon node. */
+    avatar?: React.ReactNode;
+    /** Trailing action node (icon button, menu trigger). */
+    action?: React.ReactNode;
+    /** Primary title text or node. */
+    title?: React.ReactNode;
+    /** Secondary subtitle text or node. */
+    subheader?: React.ReactNode;
+    /** Props forwarded to the inner title `<span>`. */
+    titleTypographyProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /** Props forwarded to the inner subheader `<span>`. */
+    subheaderTypographyProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /** Delegates rendering to immediate child via Slot. */
+    asChild?: boolean;
+    sx?: SxProps;
+}
+interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * URL for the background-image shorthand. For semantic HTML prefer `<img>` children.
+     */
+    image?: string;
+    /**
+     * Alt text applied as `aria-label` when using the `image` prop.
+     */
+    alt?: string;
+    /**
+     * CSS aspect-ratio value e.g. "16/9", "4/3", "1".
+     * @default "16/9"
+     */
+    aspectRatio?: string;
+    /** Override the rendered HTML element. @default "div" */
+    component?: React.ElementType;
+    sx?: SxProps;
+}
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    sx?: SxProps;
+}
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true, renders a 1px top divider between the body and footer.
+     * @default false
+     */
+    divider?: boolean;
+    sx?: SxProps;
+}
+interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true, removes the default negative horizontal margins that
+     * align icon-buttons flush to the card's padding box.
+     * @default false
+     */
+    disableSpacing?: boolean;
+    /**
+     * Horizontal alignment of action triggers.
+     * @default "start"
+     */
+    align?: "start" | "center" | "end" | "between";
+    sx?: SxProps;
+}
+
+/**
+ * Material Design 3-aligned surface container with compound sub-components.
+ * Supports 3 visual variants, numeric M3 elevation, dark-mode overlay tinting,
+ * and an optional hoverable lift mode.
+ *
+ * @example
+ * <Card hoverable>
+ *   <CardMedia image="/hero.jpg" alt="Hero" />
+ *   <CardHeader title="Title" subheader="Subtitle" />
+ *   <CardBody>Content here</CardBody>
+ *   <CardActions>
+ *     <Button>Action</Button>
+ *   </CardActions>
+ * </Card>
+ */
+declare const CardRoot: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Header zone of a Card. Supports avatar, title, subheader, and trailing action slots.
+ * Automatically inherits `size` from the parent Card via CardContext.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Aspect-ratio-locked media zone that bleeds edge-to-edge within the card.
+ * Use the `image` prop for a CSS background shorthand, or place an `<img>`
+ * child for semantic HTML (preferred for accessibility).
+ */
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Main flexible content zone of a Card.
+ * Inherits `size` from parent Card for consistent padding.
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Semantic footer zone of a Card. Use for metadata, tags, timestamps.
+ * Set `divider` to render a 1px separator between the body and footer.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Flex action strip for Button / Link controls inside a Card.
+ * By default applies a slight negative margin to align icon-buttons
+ * flush to the card's padding box. Use `disableSpacing` to remove this.
+ */
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Semantic heading component for a Card, typically rendered inside CardHeader.
+ * Supports `asChild` for slot delegation to custom heading levels.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Supporting subtext or subtitle paragraph for a Card.
+ * Supports `asChild` for slot delegation.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Media: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+interface RippleItem {
+    key: number;
+    rippleX: number;
+    rippleY: number;
+    rippleSize: number;
+    pulsating?: boolean;
+    leaving?: boolean;
+}
+interface TouchRippleRef {
+    start: (event?: React.SyntheticEvent, options?: {
+        pulsate?: boolean;
+        center?: boolean;
+    }) => void;
+    stop: (event?: React.SyntheticEvent) => void;
+    pulsate: () => void;
+}
+interface TouchRippleProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the ripple will center on the element rather than pointer coordinates
+     */
+    center?: boolean;
+    className?: string;
+}
+/**
+ * TouchRipple component delivers tactile Material Design touch/click ripple animations.
+ */
+declare const TouchRipple: React.ForwardRefExoticComponent<TouchRippleProps & React.RefAttributes<TouchRippleRef>>;
+
+interface UseRippleOptions {
+    disabled?: boolean;
+    disableRipple?: boolean;
+    center?: boolean;
+}
+interface UseRippleReturn {
+    rippleRef: React.RefObject<TouchRippleRef>;
+    rippleProps: TouchRippleProps & {
+        ref: React.RefObject<TouchRippleRef>;
+    };
+    getRippleHandlers: <T extends Record<string, any>>(props?: T) => T;
+}
+/**
+ * Hook connecting user interactions (pointer/touch/keyboard) to TouchRipple.
+ */
+declare function useRipple(options?: UseRippleOptions): UseRippleReturn;
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Merges Slot props onto its immediate child element.
+ * Preserves child identity, merges classNames, styles, ref forwarding, and event handlers.
+ */
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+
+interface PortalProps {
+    children?: React.ReactNode;
+    container?: HTMLElement | null;
+}
+/**
+ * Renders child elements into a DOM container outside the parent component tree (default: document.body).
+ * Preserves React Context across the portal boundary and is completely SSR/hydration safe.
+ */
+declare function Portal({ children, container, }: PortalProps): React.ReactPortal | null;
+declare namespace Portal {
+    var displayName: string;
+}
+
+type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+interface TooltipProps {
+    /** The text content or descriptive React element to display inside the tooltip */
+    content: React.ReactNode;
+    /** The interactive trigger element that activates the tooltip */
+    children: React.ReactElement;
+    /** Preferred placement relative to the trigger. Defaults to "top" */
+    placement?: TooltipPlacement;
+    /** Delay in milliseconds before opening after pointer enters trigger. Defaults to 200 */
+    openDelay?: number;
+    /** Delay in milliseconds before closing after pointer leaves. Defaults to 150 */
+    closeDelay?: number;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Initial open state when uncontrolled. Defaults to false */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether to render a decorative pointer arrow. Defaults to true */
+    hasArrow?: boolean;
+    /** Whether the tooltip is completely disabled and prevented from opening. Defaults to false */
+    isDisabled?: boolean;
+    /** Offset distance in pixels between the trigger and tooltip. Defaults to 8 */
+    offset?: number;
+    /** Optional keyboard shortcut string to render inside tooltip (e.g. "Ctrl+S") */
+    shortcut?: string;
+    /** Additional custom CSS class name applied to the tooltip container */
+    className?: string;
+    /** Additional inline CSS properties applied to the tooltip container */
+    style?: React.CSSProperties;
+}
+interface TooltipOwnerState {
+    placement: TooltipPlacement;
+    isOpen: boolean;
+    hasArrow: boolean;
+}
+
+/**
+ * Tooltip provides a lightweight, accessible floating text popup anchored to a target
+ * trigger element, triggered via pointer hover or keyboard focus.
+ *
+ * Conforms to WCAG 2.2 AA (SC 1.4.13 Content on Hover or Focus) and WAI-ARIA APG Tooltip Pattern.
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+type PopoverPlacement = TooltipPlacement;
+interface PopoverRootProps {
+    children: React.ReactNode;
+    /** Controlled open state of the popover */
+    isOpen?: boolean;
+    /** Uncontrolled default open state of the popover */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred placement relative to the trigger. Defaults to "bottom" */
+    placement?: PopoverPlacement;
+    /** Offset distance in pixels from the trigger. Defaults to 8 */
+    offset?: number;
+    /** Whether to trap focus inside the popover content. Defaults to true */
+    trapFocus?: boolean;
+    /** Whether to close the popover on blur. Defaults to true */
+    closeOnBlur?: boolean;
+    /** Whether to close the popover when the Escape key is pressed. Defaults to true */
+    closeOnEsc?: boolean;
+    /** Ref to the element that should receive focus when opened */
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    /** Ref to the element that should receive focus when closed */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+}
+interface PopoverProps extends PopoverRootProps {
+}
+interface PopoverTriggerProps {
+    children: React.ReactElement;
+    /** Whether to delegate props to the child element via Slot primitive */
+    asChild?: boolean;
+}
+interface PopoverPortalProps {
+    children: React.ReactNode;
+    /** Custom container element to portal into. Defaults to document.body */
+    container?: HTMLElement | null;
+}
+interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Whether to render a decorative pointer arrow. Defaults to true */
+    hasArrow?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    /** Whether to delegate props to the child element via Slot primitive */
+    asChild?: boolean;
+    className?: string;
+}
+interface PopoverArrowProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface PopoverTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface PopoverContextValue {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    placement: PopoverPlacement;
+    actualPlacement: PopoverPlacement;
+    trapFocus: boolean;
+    id: string;
+    titleId: string;
+    hasTitle: boolean;
+    setHasTitle: (hasTitle: boolean) => void;
+    hasPortalParent: boolean;
+    setHasPortalParent: (hasPortal: boolean) => void;
+    initialFocusRef?: React.RefObject<HTMLElement | null> | undefined;
+    returnFocusRef?: React.RefObject<HTMLElement | null> | undefined;
+}
+
+interface PopoverInternalContextValue extends PopoverContextValue {
+    floatingContext: FloatingContext;
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    refs: ExtendedRefs<Element>;
+    floatingStyles: React.CSSProperties;
+    middlewareData: MiddlewareData;
+    arrowRef: React.RefObject<HTMLDivElement | null>;
+}
+declare function usePopoverContext(): PopoverInternalContextValue;
+/**
+ * Popover.Root (or <Popover>) manages the open state and floating positioning context
+ * for anchored rich interactive popup overlays.
+ */
+declare function PopoverRoot({ children, isOpen: controlledOpen, defaultOpen, onOpenChange, placement, offset: offsetProp, trapFocus, closeOnEsc, initialFocusRef, returnFocusRef, }: PopoverRootProps): React.JSX.Element;
+declare namespace PopoverRoot {
+    var displayName: string;
+}
+/**
+ * Popover.Trigger wraps the anchor element, binding click and aria attributes.
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Popover.Portal mounts popover content into document.body or a custom container.
+ */
+declare function PopoverPortal({ children, container }: PopoverPortalProps): React.JSX.Element | null;
+declare namespace PopoverPortal {
+    var displayName: string;
+}
+/**
+ * Popover.Content renders the floating dialog container with focus trapping and styling.
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover.Arrow renders the directional pointer diamond.
+ */
+declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover.Close renders a dismiss button or decorates a child button via asChild.
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Popover.Header provides the top bar of the popover.
+ */
+declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover.Title provides the dialog title and links via aria-labelledby.
+ */
+declare const PopoverTitle: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Popover.Body provides the main interactive container inside the popover.
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover.Footer provides the action footer of the popover.
+ */
+declare const PopoverFooter: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover compound component aggregation.
+ */
+declare const Popover: typeof PopoverRoot & {
+    Root: typeof PopoverRoot;
+    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLElement>>;
+    Portal: typeof PopoverPortal;
+    Content: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Arrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Body: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+type AlertStatus = "info" | "success" | "warning" | "danger" | "neutral";
+type AlertVariant = "subtle" | "solid" | "outline" | "left-accent";
+interface AlertContextValue {
+    status: AlertStatus;
+    variant: AlertVariant;
+    onClose?: (() => void) | undefined;
+    handleClose: () => void;
+    isClosed: boolean;
+}
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Semantic status determining colors, icons, and ARIA roles. Defaults to "info" */
+    status?: AlertStatus | undefined;
+    /** Visual treatment of the alert surface. Defaults to "subtle" */
+    variant?: AlertVariant | undefined;
+    /** Whether the alert can be dismissed with a close button */
+    isClosable?: boolean | undefined;
+    /** Callback fired when the close button is clicked */
+    onClose?: (() => void) | undefined;
+    /** Polymorphic slot delegation */
+    asChild?: boolean | undefined;
+    children?: React.ReactNode | undefined;
+}
+type AlertRootProps = AlertProps;
+interface AlertIconProps extends React.SVGAttributes<SVGSVGElement> {
+    /** Custom icon override */
+    icon?: React.ReactNode | undefined;
+}
+interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children?: React.ReactNode | undefined;
+}
+interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children?: React.ReactNode | undefined;
+}
+interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode | undefined;
+}
+interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode | undefined;
+}
+interface AlertCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+
+declare function useAlertContext(): AlertContextValue;
+/**
+ * Alert.Root (or <Alert>) provides in-flow contextual feedback with accessible live-region semantics.
+ */
+declare const AlertRoot: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Alert.Icon renders an accessible status indicator SVG or custom icon override.
+ */
+declare const AlertIcon: React.ForwardRefExoticComponent<AlertIconProps & React.RefAttributes<SVGSVGElement>>;
+/**
+ * Alert.Body wraps the title and description in a flex column layout.
+ */
+declare const AlertBody: React.ForwardRefExoticComponent<AlertBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Alert.Title renders the prominent heading for the alert notice.
+ */
+declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Alert.Description renders the accompanying body text for the alert notice.
+ */
+declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Alert.Action contains contextual action buttons (e.g. Retry, Learn More).
+ */
+declare const AlertAction: React.ForwardRefExoticComponent<AlertActionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Alert.CloseButton renders an accessible dismiss button for the alert.
+ */
+declare const AlertCloseButton: React.ForwardRefExoticComponent<AlertCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Alert compound component aggregation.
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<AlertIconProps & React.RefAttributes<SVGSVGElement>>;
+    Body: React.ForwardRefExoticComponent<AlertBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<AlertActionProps & React.RefAttributes<HTMLDivElement>>;
+    CloseButton: React.ForwardRefExoticComponent<AlertCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+};
+
+type ToastPosition = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right";
+type ToastStatus = "info" | "success" | "warning" | "danger" | "neutral";
+interface ToastOptions {
+    /** Optional unique identifier for toast */
+    id?: string | undefined;
+    /** Primary headline text */
+    title?: React.ReactNode | undefined;
+    /** Secondary descriptive copy */
+    description?: React.ReactNode | undefined;
+    /** Semantic color and icon intent */
+    status?: ToastStatus | undefined;
+    /** Lifetime in ms before auto-dismissal. Set null for persistent toast */
+    duration?: number | null | undefined;
+    /** Whether a manual close button is rendered */
+    isClosable?: boolean | undefined;
+    /** Viewport anchor corner */
+    position?: ToastPosition | undefined;
+    /** Custom action slot (e.g. Undo button) */
+    action?: React.ReactNode | undefined;
+    /** Callback fired when toast is dismissed */
+    onClose?: (() => void) | undefined;
+}
+interface ToastRecord extends ToastOptions {
+    id: string;
+    createdAt: number;
+    duration: number | null;
+    position: ToastPosition;
+    isClosable: boolean;
+    status: ToastStatus;
+}
+interface UseToastReturn {
+    (options: ToastOptions): string;
+    close: (id: string) => void;
+    closeAll: () => void;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    isActive: (id: string) => boolean;
+}
+interface ToastProviderProps {
+    children?: React.ReactNode | undefined;
+    /** Default lifetime in ms before auto-dismissal. Defaults to 5000 */
+    defaultDuration?: number | undefined;
+    /** Default viewport position. Defaults to "bottom-right" */
+    defaultPosition?: ToastPosition | undefined;
+    /** Max visible toasts per position. Defaults to 5 */
+    maxVisibleToasts?: number | undefined;
+}
+interface SnackbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Controlled open state of the snackbar */
+    isOpen?: boolean | undefined;
+    /** Primary headline message */
+    message?: React.ReactNode | undefined;
+    /** Secondary descriptive copy */
+    description?: React.ReactNode | undefined;
+    /** Semantic color and icon intent */
+    status?: ToastStatus | undefined;
+    /** Lifetime in ms before auto-dismissal. Set null for persistent toast */
+    duration?: number | null | undefined;
+    /** Viewport anchor corner */
+    position?: ToastPosition | undefined;
+    /** Custom action slot (e.g. Undo button) */
+    action?: React.ReactNode | undefined;
+    /** Whether a manual close button is rendered */
+    isClosable?: boolean | undefined;
+    /** Callback fired when snackbar is dismissed */
+    onClose?: (() => void) | undefined;
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * Snackbar provides a declarative component API for viewport-anchored transient notifications.
+ */
+declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Toast is the approved alias for Snackbar.
+ */
+declare const Toast: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const ToastContext: React.Context<UseToastReturn | null>;
+/**
+ * Individual Toast Item with pauseable timer and accessible live-region semantics.
+ */
+declare const ToastItem: React.ForwardRefExoticComponent<{
+    toast: ToastRecord;
+    onClose: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ToastProvider manages notification queue, automatic dismissals, and portal layout.
+ */
+declare function ToastProvider({ children, defaultDuration, defaultPosition, maxVisibleToasts, }: ToastProviderProps): React.JSX.Element;
+
+/**
+ * Hook to imperatively trigger, update, or dismiss toast notifications.
+ */
+declare function useToast(): UseToastReturn;
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarShape = "circular" | "rounded" | "square";
+type AvatarStatus = "online" | "offline" | "busy" | "away";
+type AvatarPlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+interface AvatarContextValue {
+    size: AvatarSize;
+    shape: AvatarShape;
+    imageStatus: ImageLoadingStatus;
+    setImageStatus: (status: ImageLoadingStatus) => void;
+}
+interface AvatarGroupContextValue {
+    size?: AvatarSize | undefined;
+    shape?: AvatarShape | undefined;
+}
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source URL of the avatar image */
+    src?: string | undefined;
+    /** Responsive image srcset attribute */
+    srcSet?: string | undefined;
+    /** Alternate text for accessibility and screen readers */
+    alt?: string | undefined;
+    /** Entity or user name used to automatically derive initials */
+    name?: string | undefined;
+    /** Standardized optical size scale */
+    size?: AvatarSize | undefined;
+    /** Geometric border radius shape */
+    shape?: AvatarShape | undefined;
+    /** Custom fallback element rendered when image is absent or errors */
+    fallback?: React.ReactNode | undefined;
+    /** Custom generic icon rendered when initials and image are absent */
+    icon?: React.ReactNode | undefined;
+    /** Delegate root DOM element rendering via Slot primitive */
+    asChild?: boolean | undefined;
+    /** Callback fired when image fails to load */
+    onError?: React.ReactEventHandler<HTMLImageElement> | undefined;
+    /** Callback fired when image loads successfully */
+    onLoad?: React.ReactEventHandler<HTMLImageElement> | undefined;
+}
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Delegate image DOM element rendering via Slot primitive */
+    asChild?: boolean | undefined;
+}
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Delegate fallback DOM element rendering via Slot primitive */
+    asChild?: boolean | undefined;
+    /** Optional delay in ms before rendering fallback to avoid flashing */
+    delayMs?: number | undefined;
+}
+interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Presence indicator status intent */
+    status?: AvatarStatus | undefined;
+    /** Corner anchor position relative to avatar */
+    placement?: AvatarPlacement | undefined;
+    /** Delegate badge DOM element rendering via Slot primitive */
+    asChild?: boolean | undefined;
+}
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum number of avatars to render before displaying +N excess count */
+    max?: number | undefined;
+    /** Propagated size scale across all child avatars */
+    size?: AvatarSize | undefined;
+    /** Propagated geometric shape across all child avatars */
+    shape?: AvatarShape | undefined;
+    /** Overlap margin offset (default: -8px) */
+    spacing?: number | string | undefined;
+    /** Avatar elements to group */
+    children: React.ReactNode;
+}
+
+declare const AvatarGroupContext: React.Context<AvatarGroupContextValue>;
+declare const useAvatarGroupContext: () => AvatarGroupContextValue;
+/**
+ * AvatarGroup stacks multiple avatars with negative margin overlap and calculates +N excess items.
+ */
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const AvatarContext: React.Context<AvatarContextValue | null>;
+declare const useAvatarContext: () => AvatarContextValue | null;
+/**
+ * Extracts up to two uppercase initials from a given name string.
+ * Handles single names, multi-word names, hyphens, and unicode characters.
+ */
+declare function getInitials(name?: string): string;
+/**
+ * Avatar.Image renders the image element with automatic error and load management.
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Avatar.Fallback renders fallback initials, icons, or custom elements when image has not loaded.
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Avatar.Badge renders presence status indicator dot anchored to an avatar corner.
+ */
+declare const AvatarBadge: React.ForwardRefExoticComponent<AvatarBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Avatar represents a user, entity, or organization identity with automated fallbacks and presence indicators.
+ */
+declare const AvatarBase: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+interface AvatarComponent extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {
+    Root: typeof AvatarBase;
+    Image: typeof AvatarImage;
+    Fallback: typeof AvatarFallback;
+    Badge: typeof AvatarBadge;
+    Group: typeof AvatarGroup;
+}
+declare const Avatar: AvatarComponent;
+declare const AvatarRoot: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+type AccordionType = "single" | "multiple";
+type AccordionVariant = "outline" | "separated" | "flush";
+interface AccordionSingleProps {
+    /** Single expansion mode */
+    type?: "single" | undefined;
+    /** Controlled active item value in single mode */
+    value?: string | undefined;
+    /** Default active item value in uncontrolled single mode */
+    defaultValue?: string | undefined;
+    /** Callback fired when the active item value changes in single mode */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Whether the active item can be collapsed when clicked */
+    collapsible?: boolean | undefined;
+}
+interface AccordionMultipleProps {
+    /** Multiple simultaneous expansion mode */
+    type: "multiple";
+    /** Controlled active item values in multiple mode */
+    value?: string[] | undefined;
+    /** Default active item values in uncontrolled multiple mode */
+    defaultValue?: string[] | undefined;
+    /** Callback fired when the active item values change in multiple mode */
+    onValueChange?: ((value: string[]) => void) | undefined;
+    /** Not applicable in multiple mode */
+    collapsible?: never | undefined;
+}
+type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /** Visual style treatment: outline, separated, or flush */
+    variant?: AccordionVariant | undefined;
+    /** Whether all accordion items are globally disabled */
+    isDisabled?: boolean | undefined;
+    /** Child Accordion.Item elements */
+    children: React.ReactNode;
+};
+type AccordionProps = AccordionRootProps;
+interface AccordionContextValue {
+    type: AccordionType;
+    variant: AccordionVariant;
+    collapsible: boolean;
+    isDisabled: boolean;
+    expandedValues: string[];
+    toggleItem: (value: string) => void;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+}
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for the accordion item */
+    value: string;
+    /** Whether this individual item is disabled */
+    isDisabled?: boolean | undefined;
+    /** Subcomponents: Accordion.Header and Accordion.Content */
+    children: React.ReactNode;
+}
+interface AccordionItemContextValue {
+    value: string;
+    isOpen: boolean;
+    isDisabled: boolean;
+    triggerId: string;
+    panelId: string;
+}
+interface AccordionHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Semantic HTML heading tag level (h2 - h6). Defaults to 3 (h3) */
+    level?: 2 | 3 | 4 | 5 | 6 | undefined;
+    /** Child Accordion.Trigger element */
+    children: React.ReactNode;
+}
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Delegate button element rendering via Slot primitive */
+    asChild?: boolean | undefined;
+    /** Trigger text and optional Accordion.Icon */
+    children: React.ReactNode;
+}
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Panel body elements */
+    children: React.ReactNode;
+}
+interface AccordionIconProps extends React.SVGAttributes<SVGSVGElement> {
+    className?: string | undefined;
+}
+
+declare const AccordionContext: React.Context<AccordionContextValue | null>;
+declare const useAccordionContext: () => AccordionContextValue;
+declare const AccordionItemContext: React.Context<AccordionItemContextValue | null>;
+declare const useAccordionItemContext: () => AccordionItemContextValue;
+/**
+ * Accordion.Root provides expansion state management and keyboard navigation for accordion items.
+ */
+declare const AccordionRoot: React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion.Item encapsulates a single collapsible panel and header.
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion.Header renders a semantic heading wrapper (h2 - h6) around the trigger button.
+ */
+declare const AccordionHeader: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Accordion.Trigger renders the interactive button that toggles expansion.
+ */
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Accordion.Content renders the collapsible body region with CSS grid height transition.
+ */
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion.Icon renders a 16x16 chevron SVG icon that rotates 180° when expanded.
+ */
+declare const AccordionIcon: React.ForwardRefExoticComponent<AccordionIconProps & React.RefAttributes<SVGSVGElement>>;
+interface AccordionComponent extends React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<HTMLDivElement>> {
+    Root: typeof AccordionRoot;
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+    Icon: typeof AccordionIcon;
+}
+declare const Accordion: AccordionComponent;
+
+type TabsOrientation = "horizontal" | "vertical";
+type TabsVariant = "line" | "enclosed" | "pill" | "unstyled";
+type TabsSize = "sm" | "md" | "lg";
+type TabsActivationMode = "automatic" | "manual";
+interface TabsRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Controlled active tab value */
+    value?: string | undefined;
+    /** Uncontrolled default active tab value */
+    defaultValue?: string | undefined;
+    /** Callback fired when the active tab value changes */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Layout orientation: horizontal (default) or vertical */
+    orientation?: TabsOrientation | undefined;
+    /** Visual style variant: line (default), enclosed, pill, unstyled */
+    variant?: TabsVariant | undefined;
+    /** Sizing scale: sm (32px), md (40px, default), lg (48px) */
+    size?: TabsSize | undefined;
+    /** Tab activation mode: automatic (on focus) or manual (on Enter/Space) */
+    activationMode?: TabsActivationMode | undefined;
+    /** When true, inactive tab panels are unmounted instead of hidden */
+    isLazy?: boolean | undefined;
+    /** Child elements: Tabs.List and Tabs.Content */
+    children: React.ReactNode;
+}
+type TabsProps = TabsRootProps;
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible label for the tablist */
+    "aria-label"?: string | undefined;
+    /** Tab trigger buttons */
+    children: React.ReactNode;
+}
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Unique identifier matching a Tabs.Content panel */
+    value: string;
+    /** Whether the tab is disabled and cannot be activated */
+    isDisabled?: boolean | undefined;
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+    /** Tab label and optional icons */
+    children: React.ReactNode;
+}
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier matching a Tabs.Trigger */
+    value: string;
+    /** Panel content */
+    children: React.ReactNode;
+}
+interface TabsIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string | undefined;
+}
+interface TabsContextValue {
+    selectedValue: string;
+    setSelectedValue: (value: string) => void;
+    orientation: TabsOrientation;
+    variant: TabsVariant;
+    size: TabsSize;
+    activationMode: TabsActivationMode;
+    isLazy: boolean;
+    baseId: string;
+    listRef: React.RefObject<HTMLDivElement | null>;
+}
+
+declare const TabsContext: React.Context<TabsContextValue | null>;
+declare function useTabsContext(): TabsContextValue;
+/**
+ * Tabs.Root (Tabs) provides context, state synchronization, and orientation management.
+ */
+declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tabs.List renders the semantic role="tablist" container with roving keyboard navigation.
+ */
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tabs.Trigger renders the interactive tab button adhering to WAI-ARIA APG roving tabindex.
+ */
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Tabs.Content renders the role="tabpanel" for a corresponding tab trigger.
+ */
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tabs.Indicator renders an optional visual indicator track.
+ */
+declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Compound export namespace adhering to Chellaa React standards.
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+type PaginationSize = "sm" | "md" | "lg";
+type PaginationVariant = "outline" | "solid" | "ghost" | "subtle";
+interface PaginationRootProps extends React.HTMLAttributes<HTMLElement> {
+    /** Total number of items across all pages */
+    total: number;
+    /** Number of items displayed per page. Default is 10 */
+    pageSize?: number | undefined;
+    /** Controlled current active page number (1-indexed) */
+    page?: number | undefined;
+    /** Uncontrolled default active page number. Default is 1 */
+    defaultPage?: number | undefined;
+    /** Callback fired when the active page changes */
+    onPageChange?: ((page: number) => void) | undefined;
+    /** Callback fired when the page size is modified */
+    onPageSizeChange?: ((pageSize: number) => void) | undefined;
+    /** Number of adjacent sibling page buttons around active page. Default is 1 */
+    siblingCount?: number | undefined;
+    /** Number of boundary page buttons shown at beginning and end. Default is 1 */
+    boundaryCount?: number | undefined;
+    /** Sizing scale: sm (28px), md (36px, default), lg (44px) */
+    size?: PaginationSize | undefined;
+    /** Visual button variant: outline (default), solid, ghost, subtle */
+    variant?: PaginationVariant | undefined;
+    /** Globally disables all pagination controls */
+    isDisabled?: boolean | undefined;
+    /** Whether to render the integrated page size selector dropdown */
+    showSizeChanger?: boolean | undefined;
+    /** Available page size options for showSizeChanger. Default [10, 20, 50, 100] */
+    pageSizeOptions?: number[] | undefined;
+    /** Whether to render the direct page number quick jumper box */
+    showQuickJumper?: boolean | undefined;
+    /** Accessible label for the navigation landmark */
+    "aria-label"?: string | undefined;
+    /** Child elements or custom composition. When omitted, standard pagination layout is auto-generated */
+    children?: React.ReactNode | undefined;
+}
+type PaginationProps = PaginationRootProps;
+interface PaginationListProps extends React.HTMLAttributes<HTMLUListElement> {
+    children?: React.ReactNode | undefined;
+}
+interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The 1-indexed page number represented by this button */
+    page: number;
+    /** Whether this button represents the currently active page */
+    isCurrent?: boolean | undefined;
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+    /** Custom content, defaults to page number */
+    children?: React.ReactNode | undefined;
+}
+interface PaginationActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface PaginationEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode | undefined;
+}
+interface PaginationSizeSelectProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Available page size options. Default [10, 20, 50, 100] */
+    options?: number[] | undefined;
+    /** Optional callback fired when page size changes */
+    onChange?: ((pageSize: number) => void) | undefined;
+    /** Accessible label for the select trigger button. Default "Page size" */
+    "aria-label"?: string | undefined;
+    /** Whether the selector is disabled */
+    isDisabled?: boolean | undefined;
+}
+interface PaginationJumperProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode | undefined;
+}
+interface PaginationContextValue {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    setPage: (page: number) => void;
+    setPageSize: (pageSize: number) => void;
+    size: PaginationSize;
+    variant: PaginationVariant;
+    isDisabled: boolean;
+    siblingCount: number;
+    boundaryCount: number;
+}
+
+declare const PaginationContext: React.Context<PaginationContextValue | null>;
+declare function usePaginationContext(): PaginationContextValue;
+type PaginationRangeItem = number | "ellipsis-start" | "ellipsis-end";
+/**
+ * Calculates a windowed range of page items with ellipsis compression.
+ */
+declare function getPaginationRange({ totalPages, currentPage, siblingCount, boundaryCount, }: {
+    totalPages: number;
+    currentPage: number;
+    siblingCount?: number;
+    boundaryCount?: number;
+}): PaginationRangeItem[];
+/**
+ * Pagination.Root (Pagination) manages pagination state, page mathematics, and accessibility landmark.
+ */
+declare const PaginationRoot: React.ForwardRefExoticComponent<PaginationRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Pagination.List renders the semantic <ul role="list"> wrapper for page controls.
+ */
+declare const PaginationList: React.ForwardRefExoticComponent<PaginationListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Pagination.Item renders a numeric page button with aria-current marking.
+ */
+declare const PaginationItem: React.ForwardRefExoticComponent<PaginationItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.Prev navigates to the preceding page.
+ */
+declare const PaginationPrev: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.Next navigates to the succeeding page.
+ */
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.First jumps directly to the first page (Page 1).
+ */
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.Last jumps directly to the final page.
+ */
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.Ellipsis renders the non-interactive truncation indicator.
+ */
+declare const PaginationEllipsis: React.ForwardRefExoticComponent<PaginationEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Pagination.SizeSelect renders the page size dropdown reusing @chellaa/react's Select component.
+ */
+declare const PaginationSizeSelect: React.ForwardRefExoticComponent<PaginationSizeSelectProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination.Jumper renders a direct page jump number input.
+ */
+declare const PaginationJumper: React.ForwardRefExoticComponent<PaginationJumperProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Compound export object adhering to Chellaa React component architecture.
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationRootProps & React.RefAttributes<HTMLElement>> & {
+    Root: React.ForwardRefExoticComponent<PaginationRootProps & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<PaginationListProps & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<PaginationItemProps & React.RefAttributes<HTMLButtonElement>>;
+    Prev: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Next: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+    First: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Last: React.ForwardRefExoticComponent<PaginationActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Ellipsis: React.ForwardRefExoticComponent<PaginationEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
+    SizeSelect: React.ForwardRefExoticComponent<PaginationSizeSelectProps & React.RefAttributes<HTMLButtonElement>>;
+    Jumper: React.ForwardRefExoticComponent<PaginationJumperProps & React.RefAttributes<HTMLSpanElement>>;
+};
+
+type ComboboxSize = "sm" | "md" | "lg";
+type ComboboxVariant = "outline" | "filled" | "flushed";
+interface ComboboxOption {
+    value: string;
+    label?: React.ReactNode;
+    disabled?: boolean;
+}
+interface ComboboxRootProps<TValue = string | string[]> extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+    /** Value of the combobox in controlled mode */
+    value?: TValue | undefined;
+    /** Initial value in uncontrolled mode */
+    defaultValue?: TValue | undefined;
+    /** Callback fired when selection changes */
+    onValueChange?: ((value: TValue) => void) | undefined;
+    /** Current text inside search input in controlled mode */
+    searchValue?: string | undefined;
+    /** Initial search text in uncontrolled mode */
+    defaultSearchValue?: string | undefined;
+    /** Callback fired when search text changes */
+    onSearchChange?: ((search: string) => void) | undefined;
+    /** Open state of the listbox popup in controlled mode */
+    isOpen?: boolean | undefined;
+    /** Initial open state in uncontrolled mode */
+    defaultOpen?: boolean | undefined;
+    /** Callback fired when listbox popup opens or closes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Whether the combobox is globally disabled */
+    isDisabled?: boolean | undefined;
+    /** Whether the combobox is in an error / invalid state */
+    isInvalid?: boolean | undefined;
+    /** Whether search or asynchronous data fetch is loading */
+    isLoading?: boolean | undefined;
+    /** Whether multi-selection mode is enabled */
+    isMulti?: boolean | undefined;
+    /** Sizing scale: sm (32px), md (40px, default), lg (48px) */
+    size?: ComboboxSize | undefined;
+    /** Visual variant matching Input: outline (default), filled, flushed */
+    variant?: ComboboxVariant | undefined;
+    /** Optional custom filter function. Set false to disable local filtering */
+    filter?: ((itemValue: string, itemText: string, search: string) => boolean) | false | undefined;
+    /** Optional flat options array for convenience auto-layout */
+    options?: ComboboxOption[] | undefined;
+    /** Placeholder for the auto-layout input */
+    placeholder?: string | undefined;
+    /** Name of the input element for form submission */
+    name?: string | undefined;
+    /** Whether the combobox input is required */
+    isRequired?: boolean | undefined;
+    /** Accessible description element ID */
+    "aria-describedby"?: string | undefined;
+    /** Compound children or custom layout */
+    children?: React.ReactNode | undefined;
+}
+type ComboboxProps<TValue = string | string[]> = ComboboxRootProps<TValue>;
+interface ComboboxControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+}
+interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+}
+interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+}
+interface ComboboxPortalProps {
+    children: React.ReactNode;
+    container?: HTMLElement | null | undefined;
+}
+interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+}
+interface ComboboxItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Unique value represented by this option */
+    value: string;
+    /** Optional text label for search matching and display */
+    label?: string | undefined;
+    /** Whether this specific item is disabled */
+    isDisabled?: boolean | undefined;
+    /** When true, delegates rendering to child element via Slot */
+    asChild?: boolean | undefined;
+    /** Option contents */
+    children: React.ReactNode;
+}
+interface ComboboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Optional heading text or node */
+    heading?: React.ReactNode | undefined;
+}
+interface ComboboxGroupLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface ComboboxEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface ComboboxTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Value of the item represented by this tag */
+    value: string;
+    /** Callback fired when remove button is clicked */
+    onRemove?: (() => void) | undefined;
+    /** Whether remove action is disabled */
+    isDisabled?: boolean | undefined;
+}
+interface ComboboxClearProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+interface RegisteredItem {
+    id: string;
+    value: string;
+    text: string;
+    disabled: boolean;
+    isVisible: boolean;
+}
+interface ComboboxContextValue {
+    value: any;
+    selectItem: (value: string, text: string) => void;
+    removeItem: (value: string) => void;
+    clearSelection: () => void;
+    searchValue: string;
+    setSearchValue: (search: string) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    activeId: string | null;
+    setActiveId: (id: string | null) => void;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    controlRef: (node: HTMLElement | null) => void;
+    contentRef: (node: HTMLElement | null) => void;
+    floatingStyles: React.CSSProperties;
+    listboxId: string;
+    inputId: string;
+    isMulti: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isLoading: boolean;
+    size: ComboboxSize;
+    variant: ComboboxVariant;
+    filter: ((itemValue: string, itemText: string, search: string) => boolean) | false;
+    isFiltering: boolean;
+    setIsFiltering: (filtering: boolean) => void;
+    pendingHighlight: "first" | "last" | "selected" | null;
+    setPendingHighlight: (target: "first" | "last" | "selected" | null) => void;
+    openWithHighlight: (target: "first" | "last" | "selected") => void;
+    ariaDescribedBy?: string | undefined;
+    isRequired?: boolean | undefined;
+    name?: string | undefined;
+    registerItem: (item: RegisteredItem) => () => void;
+    updateItemVisibility: (id: string, isVisible: boolean) => void;
+    visibleItems: RegisteredItem[];
+    filteredCount: number;
+}
+
+declare function useComboboxContext(): ComboboxContextValue;
+declare const useCombobox: typeof useComboboxContext;
+declare const ComboboxRoot: React.ForwardRefExoticComponent<ComboboxRootProps<string | string[]> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxControl: React.ForwardRefExoticComponent<ComboboxControlProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const ComboboxTrigger: React.ForwardRefExoticComponent<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ComboboxPortal: React.FC<ComboboxPortalProps>;
+declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxItem: React.ForwardRefExoticComponent<ComboboxItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<ComboboxGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxGroup: React.ForwardRefExoticComponent<ComboboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxEmpty: React.ForwardRefExoticComponent<ComboboxEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxTag: React.ForwardRefExoticComponent<ComboboxTagProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ComboboxClear: React.ForwardRefExoticComponent<ComboboxClearProps & React.RefAttributes<HTMLButtonElement>>;
+interface ComboboxComponent extends React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>> {
+    Root: typeof ComboboxRoot;
+    Control: typeof ComboboxControl;
+    Input: typeof ComboboxInput;
+    Trigger: typeof ComboboxTrigger;
+    Portal: typeof ComboboxPortal;
+    Content: typeof ComboboxContent;
+    Item: typeof ComboboxItem;
+    Group: typeof ComboboxGroup;
+    GroupLabel: typeof ComboboxGroupLabel;
+    Empty: typeof ComboboxEmpty;
+    Tag: typeof ComboboxTag;
+    Clear: typeof ComboboxClear;
+}
+declare const Combobox: ComboboxComponent;
+declare const Autocomplete: ComboboxComponent;
+
+type SelectVariant = "outline" | "filled" | "flushed";
+type SelectSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean | undefined;
+}
+interface SelectContextValue<TValue extends string = string> {
+    value: TValue | undefined;
+    setValue: (value: TValue) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    highlightedValue: string | null;
+    setHighlightedValue: (value: string | null) => void;
+    size: SelectSize;
+    variant: SelectVariant;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    name?: string | undefined;
+    triggerId: string;
+    contentId: string;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    selectedLabel: string | null;
+    registerItem: (value: string, label: string) => () => void;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    floatingStyles: React.CSSProperties;
+}
+interface SelectRootProps<TValue extends string = string> {
+    value?: TValue | undefined;
+    defaultValue?: TValue | undefined;
+    onValueChange?: ((value: TValue) => void) | undefined;
+    isOpen?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    size?: SelectSize | undefined;
+    variant?: SelectVariant | undefined;
+    isDisabled?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    name?: string | undefined;
+    placeholder?: string | undefined;
+    options?: SelectOption[] | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+    "aria-describedby"?: string | undefined;
+}
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    placeholder?: string | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectPortalProps {
+    children: React.ReactNode;
+    container?: HTMLElement | null | undefined;
+}
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: "popper" | "item-aligned" | undefined;
+    sideOffset?: number | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectItemProps<TValue extends string = string> extends React.HTMLAttributes<HTMLDivElement> {
+    value: TValue;
+    isDisabled?: boolean | undefined;
+    textValue?: string | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectItemTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectItemIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string | undefined;
+}
+
+declare function useSelectContext<TValue extends string = string>(): SelectContextValue<TValue>;
+declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps<string> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+declare function SelectPortal({ children, container }: SelectPortalProps): React.JSX.Element | null;
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps<string> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItemText: React.ForwardRefExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Select: React.ForwardRefExoticComponent<SelectRootProps<string> & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<SelectRootProps<string> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Icon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+    Portal: typeof SelectPortal;
+    Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SelectItemProps<string> & React.RefAttributes<HTMLDivElement>>;
+    ItemText: React.ForwardRefExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+    Group: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+type DialogSize = "sm" | "md" | "lg" | "xl" | "full";
+interface DialogRootProps {
+    /**
+     * Controlled open state of the dialog.
+     */
+    isOpen?: boolean | undefined;
+    /**
+     * Initial open state when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Callback fired when dismissal is requested (via Escape, overlay, or close button).
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * If true, pressing Escape dismisses the dialog.
+     * @default true
+     */
+    closeOnEsc?: boolean | undefined;
+    /**
+     * If true, clicking the backdrop overlay dismisses the dialog.
+     * @default true
+     */
+    closeOnOverlayClick?: boolean | undefined;
+    /**
+     * Explicit DOM element to focus when the dialog opens.
+     */
+    initialFocusRef?: React.RefObject<HTMLElement | null> | undefined;
+    /**
+     * Explicit DOM element to focus when the dialog closes.
+     * Defaults to the triggering element.
+     */
+    finalFocusRef?: React.RefObject<HTMLElement | null> | undefined;
+    /**
+     * Dialog spatial max-width scale.
+     * @default "md"
+     */
+    size?: DialogSize | undefined;
+    /**
+     * If true, vertically centers the dialog in the viewport.
+     * @default true
+     */
+    isCentered?: boolean | undefined;
+    children: React.ReactNode;
+}
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    children: React.ReactNode;
+}
+interface DialogPortalProps {
+    /**
+     * Container element to mount the portal into. Defaults to document.body.
+     */
+    container?: HTMLElement | null | undefined;
+    children: React.ReactNode;
+}
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean | undefined;
+}
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean | undefined;
+}
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    asChild?: boolean | undefined;
+}
+interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    asChild?: boolean | undefined;
+}
+interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean | undefined;
+    children?: React.ReactNode;
+}
+type ModalSize = DialogSize;
+type ModalRootProps = DialogRootProps;
+type ModalTriggerProps = DialogTriggerProps;
+type ModalPortalProps = DialogPortalProps;
+type ModalOverlayProps = DialogOverlayProps;
+type ModalContentProps = DialogContentProps;
+type ModalHeaderProps = DialogHeaderProps;
+type ModalTitleProps = DialogTitleProps;
+type ModalDescriptionProps = DialogDescriptionProps;
+type ModalBodyProps = DialogBodyProps;
+type ModalFooterProps = DialogFooterProps;
+type ModalCloseProps = DialogCloseProps;
+
+/**
+ * DialogRoot component - manages controlled/uncontrolled visibility and dialog context.
+ */
+declare const DialogRoot: React.FC<DialogRootProps>;
+/**
+ * DialogTrigger component - wraps or renders a button that opens the dialog.
+ */
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DialogPortal component - mounts dialog children into document.body or container.
+ */
+declare const DialogPortal: React.FC<DialogPortalProps>;
+/**
+ * DialogOverlay component - background backdrop with static CSS centering.
+ */
+declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogContent component - main dialog window with focus trap and scroll locking.
+ */
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogHeader component - header slot containing title, description, or close button.
+ */
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogTitle component - accessible title that binds aria-labelledby.
+ */
+declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * DialogDescription component - accessible description that binds aria-describedby.
+ */
+declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * DialogBody component - scrollable content body.
+ */
+declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogFooter component - footer slot containing actions.
+ */
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogClose component - button that dismisses the dialog when clicked.
+ */
+declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Compound Dialog export
+ */
+declare const Dialog: React.FC<DialogRootProps> & {
+    Root: React.FC<DialogRootProps>;
+    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLElement>>;
+    Portal: React.FC<DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+/**
+ * Exact compatibility alias for Modal
+ */
+declare const Modal: React.FC<DialogRootProps> & {
+    Root: React.FC<DialogRootProps>;
+    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLElement>>;
+    Portal: React.FC<DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+
+type BadgeVariant = "subtle" | "solid" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+type BadgeColorScheme = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual aesthetic treatment of the badge.
+     * @default "subtle"
+     */
+    variant?: BadgeVariant | undefined;
+    /**
+     * Spatial sizing scale.
+     * @default "md"
+     */
+    size?: BadgeSize | undefined;
+    /**
+     * Semantic color intent.
+     * @default "neutral"
+     */
+    colorScheme?: BadgeColorScheme | undefined;
+    /**
+     * If true, renders with fully rounded pill corners (`--cl-rad-full`).
+     * @default false
+     */
+    isPill?: boolean | undefined;
+    /**
+     * If true, renders a small colored status dot before children.
+     * @default false
+     */
+    hasDot?: boolean | undefined;
+    /**
+     * If true, delegates rendering to the immediate child element.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps | undefined;
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * Badge component - A compact visual indicator communicating status, counts, or categorization.
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+type TableVariant = "simple" | "striped" | "bordered";
+type TableSize = "sm" | "md" | "lg";
+interface TableRootProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Visual aesthetic treatment of the table.
+     * @default "simple"
+     */
+    variant?: TableVariant | undefined;
+    /**
+     * Spatial density scale governing padding and font size.
+     * @default "md"
+     */
+    size?: TableSize | undefined;
+    /**
+     * If true, enables background hover transitions on table body rows.
+     * @default false
+     */
+    isHoverable?: boolean | undefined;
+    /**
+     * If true, pins the table header row to the top of the scrolling container.
+     * @default false
+     */
+    isStickyHeader?: boolean | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, applies a rounded border, background surface, and subtle shadow.
+     * @default false
+     */
+    bordered?: boolean | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+    /**
+     * Placement of the caption relative to the table.
+     * @default "bottom"
+     */
+    placement?: "top" | "bottom" | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableTheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children?: React.ReactNode | undefined;
+}
+interface TableTbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children?: React.ReactNode | undefined;
+}
+interface TableTfootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children?: React.ReactNode | undefined;
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * If true, enables hover background highlight on this row specifically.
+     */
+    isHoverable?: boolean | undefined;
+    /**
+     * If true, applies selected background styling to this row.
+     * @default false
+     */
+    isSelected?: boolean | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * If true, aligns text to the right and applies tabular-nums font styling.
+     * @default false
+     */
+    isNumeric?: boolean | undefined;
+    /**
+     * Text alignment of the cell content.
+     */
+    align?: "left" | "center" | "right" | undefined;
+    /**
+     * If true, renders the header with interactive sort affordance styling.
+     * @default false
+     */
+    isSortable?: boolean | undefined;
+    /**
+     * Current sort direction for accessible aria-sort attribute.
+     * @default "none"
+     */
+    sortDirection?: "asc" | "desc" | "none" | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * If true, aligns text to the right and applies tabular-nums font styling.
+     * @default false
+     */
+    isNumeric?: boolean | undefined;
+    /**
+     * Text alignment of the cell content.
+     */
+    align?: "left" | "center" | "right" | undefined;
+    children?: React.ReactNode | undefined;
+}
+interface TableContextValue {
+    size: TableSize;
+    variant: TableVariant;
+    isHoverable: boolean;
+}
+
+/**
+ * TableRoot component - Container for structured row and column data.
+ */
+declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLTableElement>>;
+/**
+ * TableContainer component - Responsive touch scroll container.
+ */
+declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TableCaption component - Programmatic description of table data.
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+/**
+ * TableThead component - Semantic table header section.
+ */
+declare const TableThead: React.ForwardRefExoticComponent<TableTheadProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableTbody component - Semantic table body section.
+ */
+declare const TableTbody: React.ForwardRefExoticComponent<TableTbodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableTfoot component - Semantic table footer section.
+ */
+declare const TableTfoot: React.ForwardRefExoticComponent<TableTfootProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableTr component - Semantic table row element.
+ */
+declare const TableTr: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+/**
+ * TableTh component - Semantic table header cell with scope="col" default.
+ */
+declare const TableTh: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * TableTd component - Semantic table data cell with isNumeric and align support.
+ */
+declare const TableTd: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * Compound Table component export
+ */
+declare const Table: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLTableElement>> & {
+    Root: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLTableElement>>;
+    Container: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+    Caption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+    Thead: React.ForwardRefExoticComponent<TableTheadProps & React.RefAttributes<HTMLTableSectionElement>>;
+    Tbody: React.ForwardRefExoticComponent<TableTbodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+    Tfoot: React.ForwardRefExoticComponent<TableTfootProps & React.RefAttributes<HTMLTableSectionElement>>;
+    Tr: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    Th: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    Td: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+};
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionContext, type AccordionContextValue, AccordionHeader, type AccordionHeaderProps, AccordionIcon, type AccordionIconProps, AccordionItem, AccordionItemContext, type AccordionItemContextValue, type AccordionItemProps, type AccordionMultipleProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionSingleProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionVariant, Alert, AlertAction, type AlertActionProps, AlertBody, type AlertBodyProps, AlertCloseButton, type AlertCloseButtonProps, type AlertContextValue, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertRoot, type AlertRootProps, type AlertStatus, AlertTitle, type AlertTitleProps, type AlertVariant, Autocomplete, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarContext, type AvatarContextValue, AvatarFallback, type AvatarFallbackProps, AvatarGroup, AvatarGroupContext, type AvatarGroupContextValue, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarPlacement, type AvatarProps, AvatarRoot, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeColorScheme, type BadgeProps, type BadgeSize, type BadgeVariant, Box, type BoxProps, type BreakpointKey, type Breakpoints, Button, type ButtonColorScheme, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonLoadingPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardOwnerState, type CardProps, CardRoot, type CardSize, CardTitle, type CardTitleProps, type CardVariant, Checkbox, type CheckboxColorScheme, CheckboxContext, type CheckboxContextValue, CheckboxGroup, type CheckboxGroupProps, type CheckboxOwnerState, type CheckboxProps, type CheckboxSize, type ChellaaTheme, Code, type CodeColorScheme, type CodeOwnerState, type CodeProps, type ColorMode, Combobox, ComboboxClear, type ComboboxClearProps, ComboboxContent, type ComboboxContentProps, type ComboboxContextValue, ComboboxControl, type ComboboxControlProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxOption, ComboboxPortal, type ComboboxPortalProps, type ComboboxProps, ComboboxRoot, type ComboboxRootProps, type ComboboxSize, ComboboxTag, type ComboboxTagProps, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxVariant, type ComponentOverride, type ComponentOverrideOptions, Container, type ContainerOwnerState, type ContainerProps, type DeepPartial, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, DialogRoot, type DialogRootProps, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLineStyle, type DividerOrientation, type DividerOwnerState, type DividerProps, type DividerTextAlign, type DividerVariant, type ExtendedThemeContextValue, Flex, type FlexOwnerState, type FlexProps, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormHelperText, type FormHelperTextProps, FormLabel, type FormLabelProps, Grid, type GridDirection, type GridOwnerState, type GridProps, type GridSize, type GridWrap, Heading, type HeadingLevel, type HeadingProps, type ImageLoadingStatus, Input, InputAdornment, type InputAdornmentProps, InputBase, type InputOwnerState, type InputProps, type InputSize, type InputVariant, Kbd, type KbdModifier, type KbdOwnerState, type KbdProps, type KbdSize, type KbdVariant, MODIFIER_SYMBOLS, Modal, type ModalBodyProps, type ModalCloseProps, type ModalContentProps, type ModalDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalSize, type ModalTitleProps, type ModalTriggerProps, Pagination, type PaginationActionProps, PaginationContext, type PaginationContextValue, PaginationEllipsis, type PaginationEllipsisProps, PaginationFirst, PaginationItem, type PaginationItemProps, PaginationJumper, type PaginationJumperProps, PaginationLast, PaginationList, type PaginationListProps, PaginationNext, PaginationPrev, type PaginationProps, PaginationRoot, type PaginationRootProps, type PaginationSize, PaginationSizeSelect, type PaginationSizeSelectProps, type PaginationVariant, type Palette, type PaletteColor, Paper, type PaperOwnerState, type PaperProps, type PaperVariant, Paragraph, type ParagraphProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverBody, type PopoverBodyProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverContextValue, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, PopoverPortal, type PopoverPortalProps, type PopoverProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Radio, type RadioColorScheme, RadioContext, type RadioContextValue, RadioGroup, type RadioGroupProps, type RadioOwnerState, type RadioProps, type RadioSize, type RegisteredItem, type ResponsiveValue, type RippleItem, Select, SelectContent, type SelectContentProps, type SelectContextValue, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, type SelectOption, SelectPortal, type SelectPortalProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Slot, type SlotProps, Snackbar, type SnackbarProps, Stack, type StackDirection, type StackOwnerState, type StackProps, type StandardCSSProperties, type StyleInterpolation, type StyledOptions, Switch, type SwitchColorScheme, type SwitchLabelPlacement, type SwitchOwnerState, type SwitchProps, type SwitchSize, type SxObject, type SxPropValue, type SxProps, type SystemCssProperties, type SystemStyleProperties, Table, TableCaption, type TableCaptionProps, type TableCellProps, TableContainer, type TableContainerProps, type TableContextValue, type TableHeaderCellProps, TableRoot, type TableRootProps, type TableRowProps, type TableSize, TableTbody, type TableTbodyProps, TableTd, TableTfoot, type TableTfootProps, TableTh, TableThead, type TableTheadProps, TableTr, type TableVariant, Tabs, type TabsActivationMode, TabsContent, type TabsContentProps, TabsContext, type TabsContextValue, TabsIndicator, type TabsIndicatorProps, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, Text, TextField, type TextFieldProps, type TextProps, type TextSize, Textarea, type TextareaOwnerState, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, type ThemeContextValue, type ThemeMode, type ThemeOptions, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, Toast, ToastContext, ToastItem, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastRecord, type ToastStatus, Tooltip, type TooltipOwnerState, type TooltipPlacement, type TooltipProps, TouchRipple, type TouchRippleProps, type TouchRippleRef, type Transitions, type TypeAction, type TypeBackground, type TypeText, Typography, type TypographyAlign, type TypographyOwnerState, type TypographyProps, type TypographyStyle, type TypographyTheme, type TypographyVariant, type UseRippleOptions, type UseRippleReturn, type UseToastReturn, type ZIndex, breakpointKeys, createBreakpoints, createPalette, createShadows, createShouldForwardProp, createSpacing, createTheme, darkPalette, defaultBreakpoints, defaultDarkTheme, defaultShadows, defaultSpacing, defaultTheme, defaultTransitions, defaultTypography, defaultZIndex, getInitials, getPaginationRange, lightPalette, parseSx, resolveComponentOverrides, resolveTypographyColor, rootShouldForwardProp, styled, useAccordionContext, useAccordionItemContext, useAlertContext, useAvatarContext, useAvatarGroupContext, useButtonGroupContext, useCheckboxGroup, useCombobox, useComboboxContext, useFormField, usePaginationContext, usePopoverContext, useRadioGroup, useRipple, useSelectContext, useTabsContext, useTheme, useToast };