@octoguide/mui-ui-toolkit 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,759 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { Theme } from '@mui/material/styles';
+import * as _mui_material from '@mui/material';
+import { ButtonProps as ButtonProps$1, ChipProps as ChipProps$1, CardProps as CardProps$1, CardActions as CardActions$1, TextFieldProps as TextFieldProps$1, AlertProps as AlertProps$1, AlertTitleProps as AlertTitleProps$1, AccordionProps as AccordionProps$1, AccordionDetailsProps as AccordionDetailsProps$1, AccordionSummaryProps as AccordionSummaryProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, Grid2Props, TypographyProps } from '@mui/material';
+export { CardActionsProps, CardHeaderProps } from '@mui/material';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_material_transitions from '@mui/material/transitions';
+import * as _mui_system from '@mui/system';
+import { AvatarProps as AvatarProps$1 } from '@mui/material/Avatar';
+import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePickerProps as DesktopDatePickerProps$1 } from '@mui/x-date-pickers/DesktopDatePicker';
+import { MobileDatePickerProps as MobileDatePickerProps$1 } from '@mui/x-date-pickers/MobileDatePicker';
+import { DateFieldProps as DateFieldProps$1 } from '@mui/x-date-pickers/DateField';
+import { StaticDatePickerProps as StaticDatePickerProps$1 } from '@mui/x-date-pickers/StaticDatePicker';
+import { TimePickerProps as TimePickerProps$1 } from '@mui/x-date-pickers/TimePicker';
+import { DesktopTimePickerProps as DesktopTimePickerProps$1 } from '@mui/x-date-pickers/DesktopTimePicker';
+import { MobileTimePickerProps as MobileTimePickerProps$1 } from '@mui/x-date-pickers/MobileTimePicker';
+import { TimeFieldProps as TimeFieldProps$1 } from '@mui/x-date-pickers/TimeField';
+import { StaticTimePickerProps as StaticTimePickerProps$1 } from '@mui/x-date-pickers/StaticTimePicker';
+import { DateTimePickerProps as DateTimePickerProps$1 } from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDateTimePickerProps as DesktopDateTimePickerProps$1 } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import { MobileDateTimePickerProps as MobileDateTimePickerProps$1 } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { DateTimeFieldProps as DateTimeFieldProps$1 } from '@mui/x-date-pickers/DateTimeField';
+import { StaticDateTimePickerProps as StaticDateTimePickerProps$1 } from '@mui/x-date-pickers/StaticDateTimePicker';
+import { DateCalendarProps as DateCalendarProps$1 } from '@mui/x-date-pickers/DateCalendar';
+import { Dayjs } from 'dayjs';
+export { default as AvatarGroup, AvatarGroupProps } from '@mui/material/AvatarGroup';
+
+/**
+ * ThemeTokens defines every value used across all components.
+ * No component may use a hard-coded CSS value — every value must
+ * come from one of these tokens.
+ *
+ * All themes must fully implement this interface so the compiler
+ * enforces completeness.
+ */
+interface ColorTokens {
+    primary: string;
+    primaryDark: string;
+    primaryLight: string;
+    primaryContrast: string;
+    secondary: string;
+    secondaryDark: string;
+    secondaryLight: string;
+    secondaryContrast: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    background: string;
+    backgroundPaper: string;
+    backgroundSubtle: string;
+    textPrimary: string;
+    textSecondary: string;
+    textDisabled: string;
+    divider: string;
+    border: string;
+    borderFocus: string;
+    overlayLight: string;
+    overlayDark: string;
+}
+interface TypographyTokens {
+    fontFamilyBase: string;
+    fontFamilyMono: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
+    fontSize2xl: string;
+    fontSize3xl: string;
+    fontWeightLight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    lineHeightTight: number;
+    lineHeightBase: number;
+    lineHeightRelaxed: number;
+    letterSpacingTight: string;
+    letterSpacingBase: string;
+    letterSpacingWide: string;
+}
+interface SpacingTokens {
+    /** Base unit in px. All spacing values are multiples of this. */
+    unit: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+interface BorderRadiusTokens {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+interface ShadowTokens {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface TransitionTokens {
+    durationFast: string;
+    durationBase: string;
+    durationSlow: string;
+    easingDefault: string;
+    easingIn: string;
+    easingOut: string;
+}
+interface ZIndexTokens {
+    base: number;
+    dropdown: number;
+    sticky: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    toast: number;
+    tooltip: number;
+}
+interface ComponentTokens {
+    button: {
+        paddingX: string;
+        paddingY: string;
+        paddingXSm: string;
+        paddingYSm: string;
+        paddingXLg: string;
+        paddingYLg: string;
+        paddingXXl: string;
+        paddingYXl: string;
+        fontSizeSm: string;
+        fontSizeMd: string;
+        fontSizeLg: string;
+        heightSm: string;
+        heightMd: string;
+        heightLg: string;
+        heightXl: string;
+        borderRadius: string;
+        borderWidth: string;
+        fontWeight: number;
+        letterSpacing: string;
+        textTransform: string;
+        iconGap: string;
+        minWidth: string;
+    };
+    input: {
+        paddingX: string;
+        paddingY: string;
+        borderRadius: string;
+        borderWidth: string;
+        borderWidthFocus: string;
+        background: string;
+        backgroundDisabled: string;
+        labelFontSize: string;
+        helperFontSize: string;
+        minHeight: string;
+    };
+    card: {
+        padding: string;
+        paddingCompact: string;
+        borderRadius: string;
+        borderWidth: string;
+        background: string;
+    };
+    chip: {
+        height: string;
+        heightSm: string;
+        paddingX: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        iconSize: string;
+    };
+    badge: {
+        height: string;
+        minWidth: string;
+        paddingX: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        borderWidth: string;
+    };
+    tooltip: {
+        paddingX: string;
+        paddingY: string;
+        borderRadius: string;
+        fontSize: string;
+        maxWidth: string;
+        background: string;
+        color: string;
+    };
+    dialog: {
+        borderRadius: string;
+        padding: string;
+        maxWidth: string;
+        background: string;
+    };
+    table: {
+        cellPaddingX: string;
+        cellPaddingY: string;
+        headerFontWeight: number;
+        headerBackground: string;
+        rowHoverBackground: string;
+        borderWidth: string;
+        borderColor: string;
+    };
+    avatar: {
+        sizeXs: string;
+        sizeSm: string;
+        sizeMd: string;
+        sizeLg: string;
+        sizeXl: string;
+        sizeXxl: string;
+        borderRadius: string;
+        borderRadiusRounded: string;
+        groupSpacing: string;
+        groupBorderWidth: string;
+    };
+    divider: {
+        thickness: string;
+        color: string;
+    };
+    alert: {
+        borderRadius: string;
+        padding: string;
+    };
+    accordion: {
+        borderRadius: string;
+        standaloneRadius: string;
+        summaryPaddingX: string;
+        summaryPaddingY: string;
+        summaryFontWeight: number;
+        detailsPaddingX: string;
+        detailsPaddingBottom: string;
+        standaloneBackground: string;
+        standaloneBackgroundExpanded: string;
+    };
+    toggleButton: {
+        borderRadius: string;
+        borderWidth: string;
+        paddingXSm: string;
+        paddingYSm: string;
+        paddingXMd: string;
+        paddingYMd: string;
+        paddingXLg: string;
+        paddingYLg: string;
+        fontWeight: number;
+    };
+}
+/**
+ * The complete token set every theme must implement.
+ * Import this type when creating a new theme.
+ */
+interface ThemeTokens {
+    colors: ColorTokens;
+    typography: TypographyTokens;
+    spacing: SpacingTokens;
+    borderRadius: BorderRadiusTokens;
+    shadows: ShadowTokens;
+    transitions: TransitionTokens;
+    zIndex: ZIndexTokens;
+    components: ComponentTokens;
+}
+/**
+ * Recursive partial — every field at every depth is optional.
+ * Used for theme overrides so themes only need to specify what
+ * differs from the default theme.
+ */
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+/**
+ * The shape a theme override file exports.
+ * Deep-merged with the default theme at resolution time.
+ */
+type ThemeOverrides = DeepPartial<ThemeTokens>;
+
+/**
+ * All available theme names. Add a new key here whenever you create a
+ * new theme in its own sub-directory.
+ */
+type ThemeName = 'theme1' | 'theme2' | 'cpsTheme';
+/**
+ * Each entry is a partial override on top of the default theme.
+ * Only brand-specific values need to be listed.
+ */
+declare const themeRegistry: Record<ThemeName, ThemeOverrides>;
+/**
+ * Returns the fully resolved token set for the given theme name —
+ * the default theme deep-merged with the theme's overrides.
+ * Throws at runtime if an unknown name is provided.
+ */
+declare function getThemeTokens(name: ThemeName): ThemeTokens;
+
+interface ToolkitThemeProviderProps {
+    /**
+     * Explicitly override which theme to use.
+     *
+     * If omitted, the theme is read from the environment variable
+     * configured in your app's .env file (VITE_THEME, REACT_APP_THEME,
+     * or NEXT_PUBLIC_THEME).
+     *
+     * Passing this prop is useful in tests, Storybook, or when you want
+     * to let a user switch themes at runtime.
+     */
+    theme?: ThemeName;
+    children: React.ReactNode;
+    /**
+     * Inject MUI's CssBaseline (recommended for normalizing browser styles).
+     * Defaults to true.
+     */
+    injectCssBaseline?: boolean;
+}
+/**
+ * Drop-in ThemeProvider for any app using the mui-ui-toolkit.
+ *
+ * Usage in your app root:
+ *
+ *   // .env
+ *   VITE_THEME=theme2
+ *
+ *   // main.tsx
+ *   import { ToolkitThemeProvider } from '@mui-ui-toolkit/core';
+ *
+ *   <ToolkitThemeProvider>
+ *     <App />
+ *   </ToolkitThemeProvider>
+ *
+ * Or to override at runtime (e.g. user preference):
+ *
+ *   <ToolkitThemeProvider theme="theme1">
+ *     <App />
+ *   </ToolkitThemeProvider>
+ */
+declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, }: ToolkitThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Takes a ThemeTokens object and produces a fully configured MUI Theme.
+ *
+ * MUI's own theme properties (palette, typography, shape, shadows, etc.)
+ * are derived from our tokens — not from hard-coded values — so that
+ * swapping the tokens object swaps the entire visual language.
+ *
+ * The raw tokens are also attached as `theme.tokens` (via module
+ * augmentation in types/mui.d.ts) so components can read any token
+ * not already exposed by MUI's built-in theme shape.
+ */
+declare function createMuiTheme(tokens: ThemeTokens): Theme;
+
+/**
+ * Resolves the active theme name from the environment.
+ *
+ * Priority order (first match wins):
+ *   1. VITE_THEME          — used by Vite-based apps
+ *   2. REACT_APP_THEME     — used by Create React App
+ *   3. NEXT_PUBLIC_THEME   — used by Next.js
+ *   4. 'cpsTheme'            — hardcoded fallback
+ *
+ * In your app's .env file, add one of:
+ *
+ *   VITE_THEME=theme2
+ *   REACT_APP_THEME=theme2
+ *   NEXT_PUBLIC_THEME=theme2
+ *
+ * The value must match one of the keys in ThemeName ('theme1' | 'theme2' | …).
+ * A typo will throw at runtime when getThemeTokens() is called.
+ */
+declare function resolveThemeName(): ThemeName;
+
+interface ButtonProps extends ButtonProps$1 {
+    /** Show a loading spinner and disable interaction */
+    loading?: boolean;
+}
+declare function Button({ loading, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+type ChipProps = ChipProps$1;
+/**
+ * Chip component extending MUI Chip.
+ *
+ * Adds a `soft` variant (like Button) and `black`/`white` color options.
+ * Uses a custom circular-X delete icon by default when `onDelete` is provided.
+ *
+ * All visual values come from the active theme's token set — no hard-coded CSS.
+ */
+declare function Chip({ deleteIcon, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare namespace Chip {
+    var displayName: string;
+}
+
+interface CardProps extends CardProps$1 {
+    /** Use the more compact inner padding variant */
+    compact?: boolean;
+}
+declare function Card({ compact, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare namespace Card {
+    var displayName: string;
+}
+declare const CardContent: _mui_material_OverridableComponent.OverridableComponent<_mui_material.CardContentTypeMap<{}, "div">>;
+declare const CardHeader: _mui_material.OverridableCardHeader;
+declare const CardActions: typeof CardActions$1;
+
+type TextFieldProps = TextFieldProps$1;
+declare function TextField({ error, FormHelperTextProps, inputProps, label, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare namespace TextField {
+    var displayName: string;
+}
+
+type AlertProps = AlertProps$1;
+type AlertTitleProps = AlertTitleProps$1;
+/**
+ * Extended Alert.
+ *
+ * Supports all three MUI variants (standard, filled, outlined) across all
+ * four severities (info, success, warning, error). Uses custom minimals-style
+ * severity icons by default; override via the `iconMapping` prop.
+ *
+ * Visual values come from the active theme tokens — no hard-coded CSS.
+ */
+declare function Alert({ iconMapping, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare namespace Alert {
+    var displayName: string;
+}
+declare function AlertTitle(props: AlertTitleProps): react_jsx_runtime.JSX.Element;
+declare namespace AlertTitle {
+    var displayName: string;
+}
+
+type AccordionProps = AccordionProps$1;
+type AccordionSummaryProps = AccordionSummaryProps$1;
+type AccordionDetailsProps = AccordionDetailsProps$1;
+/**
+ * Standalone accordion variant — each item is its own card with a
+ * subtle grey background. Expands to a slightly darker tint.
+ * Drop-in replacement for Accordion in contexts where you want
+ * independent card-per-item styling.
+ */
+declare const StandaloneAccordion: _emotion_styled.StyledComponent<{
+    children: NonNullable<React.ReactNode>;
+    classes?: Partial<_mui_material.AccordionClasses>;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    disableGutters?: boolean;
+    expanded?: boolean;
+    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+    sx?: _mui_system.SxProps<_mui_material.Theme>;
+    TransitionComponent?: React.JSXElementConstructor<_mui_material_transitions.TransitionProps & {
+        children?: React.ReactElement<unknown, any>;
+    }>;
+    TransitionProps?: _mui_material_transitions.TransitionProps;
+} & _mui_material.AccordionSlotsAndSlotProps & Omit<_mui_material.PaperOwnProps, "classes" | "onChange"> & _mui_material_OverridableComponent.CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | keyof _mui_material_OverridableComponent.CommonProps | "children" | "sx" | "variant" | "onChange" | "elevation" | "square" | "expanded" | "defaultExpanded" | "disableGutters" | "TransitionComponent" | "TransitionProps" | keyof _mui_material.AccordionSlotsAndSlotProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare function Accordion(props: AccordionProps): react_jsx_runtime.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+/**
+ * Renders the clickable header of an accordion panel.
+ *
+ * A default expand/collapse chevron is injected automatically; pass
+ * `expandIcon` to override it.
+ *
+ * For reliable screen-reader support, pair `id` on this component with
+ * a matching `aria-controls` pointing to the AccordionDetails panel id,
+ * or let MUI auto-generate them by passing a consistent `id` to the
+ * parent Accordion:
+ *
+ *   <Accordion>
+ *     <AccordionSummary id="panel1-header" aria-controls="panel1-content">
+ *       Title
+ *     </AccordionSummary>
+ *     <AccordionDetails id="panel1-content">…</AccordionDetails>
+ *   </Accordion>
+ */
+declare function AccordionSummary({ expandIcon, ...props }: AccordionSummaryProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionSummary {
+    var displayName: string;
+}
+declare function AccordionDetails(props: AccordionDetailsProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionDetails {
+    var displayName: string;
+}
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+interface AvatarProps extends Omit<AvatarProps$1, 'ref'> {
+    size?: AvatarSize;
+}
+declare function Avatar({ size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type ToggleButtonProps = ToggleButtonProps$1;
+type ToggleButtonGroupProps = ToggleButtonGroupProps$1;
+declare function ToggleButton(props: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace ToggleButton {
+    var displayName: string;
+}
+declare function ToggleButtonGroup(props: ToggleButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare namespace ToggleButtonGroup {
+    var displayName: string;
+}
+
+type DatePickerProps = DatePickerProps$1;
+type DesktopDatePickerProps = DesktopDatePickerProps$1;
+type MobileDatePickerProps = MobileDatePickerProps$1;
+type DateFieldProps = DateFieldProps$1;
+type StaticDatePickerProps = StaticDatePickerProps$1;
+type TimePickerProps = TimePickerProps$1;
+type DesktopTimePickerProps = DesktopTimePickerProps$1;
+type MobileTimePickerProps = MobileTimePickerProps$1;
+type TimeFieldProps = TimeFieldProps$1;
+type StaticTimePickerProps = StaticTimePickerProps$1;
+type DateTimePickerProps = DateTimePickerProps$1;
+type DesktopDateTimePickerProps = DesktopDateTimePickerProps$1;
+type MobileDateTimePickerProps = MobileDateTimePickerProps$1;
+type DateTimeFieldProps = DateTimeFieldProps$1;
+type StaticDateTimePickerProps = StaticDateTimePickerProps$1;
+type DateCalendarProps = DateCalendarProps$1;
+interface DateLocalizationProviderProps {
+    children: React.ReactNode;
+}
+declare function DateLocalizationProvider({ children }: DateLocalizationProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace DateLocalizationProvider {
+    var displayName: string;
+}
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+declare function DesktopDatePicker(props: DesktopDatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DesktopDatePicker {
+    var displayName: string;
+}
+declare function MobileDatePicker(props: MobileDatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace MobileDatePicker {
+    var displayName: string;
+}
+declare function DateField(props: DateFieldProps): react_jsx_runtime.JSX.Element;
+declare namespace DateField {
+    var displayName: string;
+}
+declare function StaticDatePicker(props: StaticDatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace StaticDatePicker {
+    var displayName: string;
+}
+declare function TimePicker(props: TimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace TimePicker {
+    var displayName: string;
+}
+declare function DesktopTimePicker(props: DesktopTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DesktopTimePicker {
+    var displayName: string;
+}
+declare function MobileTimePicker(props: MobileTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace MobileTimePicker {
+    var displayName: string;
+}
+declare function TimeField(props: TimeFieldProps): react_jsx_runtime.JSX.Element;
+declare namespace TimeField {
+    var displayName: string;
+}
+declare function StaticTimePicker(props: StaticTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace StaticTimePicker {
+    var displayName: string;
+}
+declare function DateTimePicker(props: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DateTimePicker {
+    var displayName: string;
+}
+declare function DesktopDateTimePicker(props: DesktopDateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DesktopDateTimePicker {
+    var displayName: string;
+}
+declare function MobileDateTimePicker(props: MobileDateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace MobileDateTimePicker {
+    var displayName: string;
+}
+declare function DateTimeField(props: DateTimeFieldProps): react_jsx_runtime.JSX.Element;
+declare namespace DateTimeField {
+    var displayName: string;
+}
+declare function StaticDateTimePicker(props: StaticDateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace StaticDateTimePicker {
+    var displayName: string;
+}
+declare function DateCalendar(props: DateCalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+interface DateRangeValue {
+    start: Dayjs | null;
+    end: Dayjs | null;
+}
+interface DateRangePickerInputProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    startLabel?: string;
+    endLabel?: string;
+    buttonLabel?: string;
+}
+declare function DateRangePickerInput({ value, onChange, startLabel, endLabel, buttonLabel, }: DateRangePickerInputProps): react_jsx_runtime.JSX.Element;
+declare namespace DateRangePickerInput {
+    var displayName: string;
+}
+interface DateRangePickerCalendarProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    buttonLabel?: string;
+}
+declare function DateRangePickerCalendar({ value, onChange, buttonLabel, }: DateRangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace DateRangePickerCalendar {
+    var displayName: string;
+}
+
+type GridProps = Grid2Props;
+/**
+ * 12-column layout grid, based on MUI Grid2.
+ *
+ * Use `container` on the wrapper and `size` on children to set column spans.
+ * `size` accepts a number (fixed across all breakpoints) or a responsive
+ * object mapping breakpoints to spans:
+ *
+ *   size={6}                        // 6/12 at all sizes
+ *   size={{ xs: 12, md: 6 }}        // full width → half width
+ *   size="grow"                     // fills remaining space
+ *   size="auto"                     // shrinks to content
+ *
+ * Spacing multiplies the theme spacing unit (8px):
+ *   spacing={1} → 8px gap
+ *   spacing={2} → 16px gap  (default on containers)
+ *   spacing={3} → 24px gap
+ *   spacing={4} → 32px gap
+ *   spacing={5} → 40px gap
+ *
+ * @example
+ * // 2-column layout, 16px gap, stacks on mobile
+ * <Grid container spacing={2}>
+ *   <Grid size={{ xs: 12, md: 6 }}>Left</Grid>
+ *   <Grid size={{ xs: 12, md: 6 }}>Right</Grid>
+ * </Grid>
+ *
+ * @example
+ * // 4-column card grid
+ * <Grid container spacing={3}>
+ *   {items.map((item) => (
+ *     <Grid key={item.id} size={{ xs: 12, sm: 6, md: 3 }}>
+ *       <Card>…</Card>
+ *     </Grid>
+ *   ))}
+ * </Grid>
+ */
+declare function Grid({ container, spacing, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
+
+interface H1Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H1({ color, children, ...props }: H1Props): react_jsx_runtime.JSX.Element;
+declare namespace H1 {
+    var displayName: string;
+}
+
+interface H2Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H2({ color, children, ...props }: H2Props): react_jsx_runtime.JSX.Element;
+declare namespace H2 {
+    var displayName: string;
+}
+
+interface H3Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H3({ color, children, ...props }: H3Props): react_jsx_runtime.JSX.Element;
+declare namespace H3 {
+    var displayName: string;
+}
+
+interface H4Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H4({ color, children, ...props }: H4Props): react_jsx_runtime.JSX.Element;
+declare namespace H4 {
+    var displayName: string;
+}
+
+interface H5Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H5({ color, children, ...props }: H5Props): react_jsx_runtime.JSX.Element;
+declare namespace H5 {
+    var displayName: string;
+}
+
+interface H6Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function H6({ color, children, ...props }: H6Props): react_jsx_runtime.JSX.Element;
+declare namespace H6 {
+    var displayName: string;
+}
+
+interface Subtitle1Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function Subtitle1({ color, children, ...props }: Subtitle1Props): react_jsx_runtime.JSX.Element;
+declare namespace Subtitle1 {
+    var displayName: string;
+}
+
+interface Subtitle2Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function Subtitle2({ color, children, ...props }: Subtitle2Props): react_jsx_runtime.JSX.Element;
+declare namespace Subtitle2 {
+    var displayName: string;
+}
+
+interface Body1Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function Body1({ color, children, ...props }: Body1Props): react_jsx_runtime.JSX.Element;
+declare namespace Body1 {
+    var displayName: string;
+}
+
+interface Body2Props extends Omit<TypographyProps, 'variant'> {
+}
+declare function Body2({ color, children, ...props }: Body2Props): react_jsx_runtime.JSX.Element;
+declare namespace Body2 {
+    var displayName: string;
+}
+
+interface CaptionProps extends Omit<TypographyProps, 'variant'> {
+}
+declare function Caption({ color, children, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
+declare namespace Caption {
+    var displayName: string;
+}
+
+interface OverlineProps extends Omit<TypographyProps, 'variant'> {
+}
+declare function Overline({ color, children, ...props }: OverlineProps): react_jsx_runtime.JSX.Element;
+declare namespace Overline {
+    var displayName: string;
+}
+
+interface TypographyButtonProps extends Omit<TypographyProps, 'variant'> {
+}
+declare function TypographyButton({ color, children, ...props }: TypographyButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace TypographyButton {
+    var displayName: string;
+}
+
+export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, Alert, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Body1, type Body1Props, Body2, type Body2Props, type BorderRadiusTokens, Button, type ButtonProps, Caption, type CaptionProps, Card, CardActions, CardContent, CardHeader, type CardProps, Chip, type ChipProps, type ColorTokens, type ComponentTokens, DateCalendar, type DateCalendarProps, DateField, type DateFieldProps, DateLocalizationProvider, type DateLocalizationProviderProps, DatePicker, type DatePickerProps, DateRangePickerCalendar, type DateRangePickerCalendarProps, DateRangePickerInput, type DateRangePickerInputProps, type DateRangeValue, DateTimeField, type DateTimeFieldProps, DateTimePicker, type DateTimePickerProps, DesktopDatePicker, type DesktopDatePickerProps, DesktopDateTimePicker, type DesktopDateTimePickerProps, DesktopTimePicker, type DesktopTimePickerProps, Grid, type GridProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, H4, type H4Props, H5, type H5Props, H6, type H6Props, MobileDatePicker, type MobileDatePickerProps, MobileDateTimePicker, type MobileDateTimePickerProps, MobileTimePicker, type MobileTimePickerProps, Overline, type OverlineProps, type ShadowTokens, type SpacingTokens, StandaloneAccordion, StaticDatePicker, type StaticDatePickerProps, StaticDateTimePicker, type StaticDateTimePickerProps, StaticTimePicker, type StaticTimePickerProps, Subtitle1, type Subtitle1Props, Subtitle2, type Subtitle2Props, TextField, type TextFieldProps, type ThemeName, type ThemeTokens, TimeField, type TimeFieldProps, TimePicker, type TimePickerProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, ToolkitThemeProvider, type TransitionTokens, TypographyButton, type TypographyButtonProps, type TypographyTokens, type ZIndexTokens, createMuiTheme, getThemeTokens, resolveThemeName, themeRegistry };