@atomazing-org/design-system 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -1,19 +1,22 @@
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
-import * as React$1 from 'react';
-import React__default, { ErrorInfo, ReactNode, FC, PropsWithChildren } from 'react';
+import * as react from 'react';
+import react__default, { ErrorInfo, FC, PropsWithChildren } from 'react';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import * as _mui_material from '@mui/material';
-import { ThemeOptions, Theme } from '@mui/material';
+import { Theme as Theme$1, Components, TypographyVariantsOptions } from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeOptions as ThemeOptions$1 } from '@mui/material/styles';
+import * as _mui_material_styles from '@mui/material/styles';
+import { Theme, ThemeOptions, PaletteMode } from '@mui/material/styles';
+import { O as OptionItem, T as ThemeContextProps, a as ThemePreset, N as NamedThemeOptions, b as ThemeModeBackground, D as DarkModeOptions, c as NormalizedPreset, A as AppSettings } from './typography-Dq0wCojD.js';
+export { C as CustomTypographyVariants, d as DarkModeSetting, e as ThemeId, f as ThemeScheme } from './typography-Dq0wCojD.js';
 
-declare const DialogBtn: _emotion_styled.StyledComponent<_mui_material.ButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & {
+declare const DialogBtn: _emotion_styled.StyledComponent<_mui_material.ButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
 
 interface ErrorBoundaryProps {
-    children: React__default.ReactNode;
+    children: react__default.ReactNode;
 }
 interface ErrorBoundaryState {
     hasError: boolean;
@@ -22,11 +25,11 @@ interface ErrorBoundaryState {
 /**
  * ErrorBoundary component that catches and displays errors.
  */
-declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+declare class ErrorBoundary extends react__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<react__default.ReactNode> | Promise<string | number | bigint | boolean | react__default.ReactPortal | react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>> | Iterable<react__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 }
 
 declare const Loading: () => react_jsx_runtime.JSX.Element;
@@ -34,221 +37,911 @@ declare const Loading: () => react_jsx_runtime.JSX.Element;
 declare const PathName: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
-}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 
-/**
- * Available options for dark mode configuration.
- * - `system`: Follows the operating system preference.
- * - `auto`: Uses contrast-based detection (e.g., based on background color).
- * - `light`: Forces light mode.
- * - `dark`: Forces dark mode.
- */
-type DarkModeOptions = "system" | "auto" | "light" | "dark";
-interface OptionItem {
-    label: string;
-    value: DarkModeOptions;
-    icon: ReactNode;
-}
-type NamedThemeOptions = ThemeOptions & {
+declare const editorialClassic: {
     name: string;
-};
-/**
- * Represents user-specific theme preferences stored in the application.
- */
-interface AppSettings {
-    /**
-     * The selected theme name. `"system"` indicates the app should follow system preference.
-     * Other values are custom theme names defined by the application.
-     */
-    theme: "system" | (string & {});
-    /**
-     * Controls how dark mode is applied in the app.
-     */
-    darkMode: DarkModeOptions;
-}
-interface ThemeContextProps {
-    theme: string;
-    darkMode: DarkModeOptions;
-    setTheme: (theme: string) => void;
-    setDarkMode: (mode: DarkModeOptions) => void;
-}
-
-/**
- * Represents the theme mode as reported by the operating system or browser.
- * - `light`: Light mode
- * - `dark`: Dark mode
- * - `unknown`: Theme mode could not be determined
- */
-type SystemTheme = "light" | "dark" | "unknown";
-
-interface CustomTypographyVariants {
-    text_xl_regular: {
-        font: string;
-    };
-    text_lg_regular: {
-        font: string;
-    };
-    text_md_regular: {
-        font: string;
-    };
-    text_sm_regular: {
-        font: string;
-    };
-    text_xs_regular: {
-        font: string;
-    };
-    text_2xs_regular: {
-        font: string;
-    };
-    text_xl_bold: {
-        font: string;
-    };
-    text_lg_bold: {
-        font: string;
-    };
-    text_md_bold: {
-        font: string;
-    };
-    text_sm_bold: {
-        font: string;
-    };
-    text_xs_bold: {
-        font: string;
-    };
-    text_2xs_bold: {
-        font: string;
-    };
-    text_xl_semibold: {
-        font: string;
+    direction: "rtl";
+    palette: {
+        mode: "light";
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+        grey: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        action: {
+            hover: string;
+            selected: string;
+            focus: string;
+            active: string;
+            disabled: string;
+            disabledBackground: string;
+        };
     };
-    text_lg_semibold: {
-        font: string;
+    typography: {
+        fontFamily: "\"Source Serif 4\",\"Noto Naskh Arabic\",\"Tajawal\",\"Cairo\",\"Georgia\",\"Times New Roman\",serif";
+        h1: {
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        h2: {
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        h3: {
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: number;
+        };
+        h4: {
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: number;
+        };
+        subtitle1: {
+            fontWeight: number;
+            fontSize: string;
+        };
+        subtitle2: {
+            fontWeight: number;
+            fontSize: string;
+        };
+        body1: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        body2: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        button: {
+            textTransform: "none";
+            fontWeight: number;
+        };
+        caption: {
+            fontSize: string;
+        };
+        overline: {
+            fontSize: string;
+            letterSpacing: string;
+        };
     };
-    text_md_semibold: {
-        font: string;
+    shape: {
+        borderRadius: number;
     };
-    text_sm_semibold: {
-        font: string;
+    spacing: number;
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: (theme: Omit<_mui_material_styles.Theme, "components">) => {
+                body: {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+        };
+        MuiPaper: {
+            styleOverrides: {
+                root: ({ theme }: _mui_material.PaperOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
+                    component?: React.ElementType;
+                } & Record<string, unknown> & {
+                    ownerState: _mui_material.PaperOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
+                        component?: React.ElementType;
+                    } & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderRadius: number;
+                    backgroundImage: "none";
+                    border: string;
+                };
+            };
+        };
+        MuiCard: {
+            styleOverrides: {
+                root: ({ theme }: _mui_material.CardOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square" | "raised"> & {
+                    component?: React.ElementType;
+                } & Record<string, unknown> & {
+                    ownerState: _mui_material.CardOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square" | "raised"> & {
+                        component?: React.ElementType;
+                    } & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderRadius: number;
+                    border: string;
+                };
+            };
+        };
+        MuiAppBar: {
+            defaultProps: {
+                color: "inherit";
+                elevation: number;
+            };
+            styleOverrides: {
+                root: ({ theme }: _mui_material.AppBarOwnProps & Omit<_mui_material.PaperOwnProps, "classes" | "color" | "position"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "style" | "className" | "classes" | "children" | "sx" | "color" | "position" | "variant" | "elevation" | "square" | "enableColorOnDark"> & {
+                    component?: React.ElementType;
+                } & Record<string, unknown> & {
+                    ownerState: _mui_material.AppBarOwnProps & Omit<_mui_material.PaperOwnProps, "classes" | "color" | "position"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "style" | "className" | "classes" | "children" | "sx" | "color" | "position" | "variant" | "elevation" | "square" | "enableColorOnDark"> & {
+                        component?: React.ElementType;
+                    } & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    backgroundColor: string;
+                    borderBottom: string;
+                };
+            };
+        };
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true;
+            };
+            styleOverrides: {
+                root: {
+                    borderRadius: number;
+                    paddingInline: number;
+                    paddingBlock: number;
+                };
+                outlined: {
+                    borderWidth: number;
+                };
+            };
+        };
+        MuiLink: {
+            styleOverrides: {
+                root: {
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                };
+            };
+        };
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    borderRadius: number;
+                };
+                notchedOutline: ({ theme }: _mui_material.OutlinedInputProps & Record<string, unknown> & {
+                    ownerState: _mui_material.OutlinedInputProps & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderColor: string;
+                };
+            };
+        };
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    fontWeight: number;
+                };
+            };
+        };
+        MuiTabs: {
+            styleOverrides: {
+                root: {
+                    minHeight: number;
+                };
+                indicator: {
+                    height: number;
+                    borderRadius: number;
+                };
+            };
+        };
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    minHeight: number;
+                    fontWeight: number;
+                    paddingInline: number;
+                };
+            };
+        };
+        MuiTableHead: {
+            styleOverrides: {
+                root: ({ theme }: _mui_material.TableHeadOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "className" | "classes" | "children" | "sx"> & {
+                    component?: React.ElementType;
+                } & Record<string, unknown> & {
+                    ownerState: _mui_material.TableHeadOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "className" | "classes" | "children" | "sx"> & {
+                        component?: React.ElementType;
+                    } & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    backgroundColor: string;
+                };
+            };
+        };
+        MuiTableCell: {
+            styleOverrides: {
+                head: ({ theme }: _mui_material.TableCellProps & Record<string, unknown> & {
+                    ownerState: _mui_material.TableCellProps & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    fontWeight: number;
+                    borderBottom: string;
+                };
+                body: ({ theme }: _mui_material.TableCellProps & Record<string, unknown> & {
+                    ownerState: _mui_material.TableCellProps & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderBottom: string;
+                };
+            };
+        };
+        MuiDivider: {
+            styleOverrides: {
+                root: ({ theme }: _mui_material.DividerOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
+                    component?: React.ElementType;
+                } & Record<string, unknown> & {
+                    ownerState: _mui_material.DividerOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
+                        component?: React.ElementType;
+                    } & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderColor: string;
+                };
+            };
+        };
+        MuiAlert: {
+            styleOverrides: {
+                root: ({ theme }: _mui_material.AlertProps & Record<string, unknown> & {
+                    ownerState: _mui_material.AlertProps & Record<string, unknown>;
+                } & {
+                    theme: Omit<_mui_material_styles.Theme, "components">;
+                }) => {
+                    borderRadius: number;
+                    border: string;
+                };
+            };
+        };
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    borderRadius: number;
+                    fontSize: string;
+                };
+            };
+        };
+        MuiSnackbarContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: number;
+                };
+            };
+        };
     };
-    text_xs_semibold: {
-        font: string;
-    };
-    text_2xs_semibold: {
-        font: string;
-    };
-    text_xl_thin: {
-        font: string;
-    };
-    text_lg_thin: {
-        font: string;
-    };
-    text_md_thin: {
-        font: string;
-    };
-    text_sm_thin: {
-        font: string;
-    };
-    text_xs_thin: {
-        font: string;
-    };
-    text_2xs_thin: {
-        font: string;
-    };
-    header_2xl_regular: {
-        font: string;
-    };
-    header_xl_regular: {
-        font: string;
-    };
-    header_lg_regular: {
-        font: string;
-    };
-    header_md_regular: {
-        font: string;
-    };
-    header_sm_regular: {
-        font: string;
-    };
-    header_xs_regular: {
-        font: string;
-    };
-    header_2xl_bold: {
-        font: string;
+};
+
+declare const modernMinimal: {
+    name: string;
+    direction: "rtl";
+    palette: {
+        mode: "light";
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+        grey: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        action: {
+            hover: string;
+            selected: string;
+            focus: string;
+            active: string;
+            disabled: string;
+            disabledBackground: string;
+        };
     };
-    header_xl_bold: {
-        font: string;
+    typography: {
+        readonly fontFamily: "\"IBM Plex Sans\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Inter\",\"Arial\",sans-serif";
+        readonly h1: {
+            readonly fontWeight: 900;
+            readonly fontSize: "2.1rem";
+            readonly lineHeight: 1.16;
+            readonly letterSpacing: "-0.03em";
+        };
+        readonly h2: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.68rem";
+            readonly lineHeight: 1.22;
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly h3: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.32rem";
+            readonly lineHeight: 1.3;
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly h4: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.08rem";
+            readonly lineHeight: 1.4;
+        };
+        readonly subtitle1: {
+            readonly fontWeight: 600;
+            readonly fontSize: "0.94rem";
+        };
+        readonly subtitle2: {
+            readonly fontWeight: 600;
+            readonly fontSize: "0.86rem";
+        };
+        readonly body1: {
+            readonly fontSize: "0.94rem";
+            readonly lineHeight: 1.62;
+        };
+        readonly body2: {
+            readonly fontSize: "0.86rem";
+            readonly lineHeight: 1.56;
+        };
+        readonly button: {
+            readonly textTransform: "uppercase";
+            readonly fontWeight: 700;
+            readonly letterSpacing: "0.05em";
+        };
+        readonly caption: {
+            readonly fontSize: "0.74rem";
+        };
+        readonly overline: {
+            readonly fontSize: "0.72rem";
+            readonly letterSpacing: "0.12em";
+            readonly textTransform: "uppercase";
+        };
     };
-    header_lg_bold: {
-        font: string;
+    shape: {
+        borderRadius: number;
     };
-    header_md_bold: {
-        font: string;
+    spacing: number;
+    components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
+};
+
+declare const neoGlass: {
+    name: string;
+    direction: "rtl";
+    palette: {
+        mode: "light";
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+        grey: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        action: {
+            hover: string;
+            selected: string;
+            focus: string;
+            active: string;
+            disabled: string;
+            disabledBackground: string;
+        };
     };
-    header_sm_bold: {
-        font: string;
+    typography: {
+        readonly fontFamily: "\"Space Grotesk\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Inter\",\"Roboto\",\"Arial\",sans-serif";
+        readonly h1: {
+            readonly fontWeight: 800;
+            readonly fontSize: "2.08rem";
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "-0.025em";
+        };
+        readonly h2: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.56rem";
+            readonly lineHeight: 1.25;
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly h3: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.28rem";
+            readonly lineHeight: 1.32;
+        };
+        readonly h4: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.13rem";
+            readonly lineHeight: 1.4;
+        };
+        readonly subtitle1: {
+            readonly fontWeight: 700;
+            readonly fontSize: "0.95rem";
+        };
+        readonly subtitle2: {
+            readonly fontWeight: 700;
+            readonly fontSize: "0.875rem";
+        };
+        readonly body1: {
+            readonly fontSize: "0.95rem";
+            readonly lineHeight: 1.64;
+        };
+        readonly body2: {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: 1.58;
+        };
+        readonly button: {
+            readonly textTransform: "none";
+            readonly fontWeight: 700;
+            readonly letterSpacing: "0.01em";
+        };
+        readonly caption: {
+            readonly fontSize: "0.75rem";
+        };
+        readonly overline: {
+            readonly fontSize: "0.75rem";
+            readonly letterSpacing: "0.08em";
+        };
     };
-    header_xs_bold: {
-        font: string;
+    shape: {
+        borderRadius: number;
     };
-    header_2xl_semibold: {
-        font: string;
+    spacing: number;
+    components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
+};
+
+declare const retroTerminal: {
+    name: string;
+    direction: "rtl";
+    palette: {
+        mode: "light";
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+        grey: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        action: {
+            hover: string;
+            selected: string;
+            focus: string;
+            active: string;
+            disabled: string;
+            disabledBackground: string;
+        };
     };
-    header_xl_semibold: {
-        font: string;
+    typography: {
+        readonly fontFamily: "\"IBM Plex Mono\",\"JetBrains Mono\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Roboto Mono\",\"Consolas\",\"Arial\",monospace";
+        readonly h1: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.85rem";
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "0.03em";
+        };
+        readonly h2: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.42rem";
+            readonly lineHeight: 1.24;
+            readonly letterSpacing: "0.025em";
+        };
+        readonly h3: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.14rem";
+            readonly lineHeight: 1.3;
+            readonly letterSpacing: "0.02em";
+        };
+        readonly h4: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.02rem";
+            readonly lineHeight: 1.35;
+            readonly letterSpacing: "0.015em";
+        };
+        readonly subtitle1: {
+            readonly fontWeight: 700;
+            readonly fontSize: "0.92rem";
+            readonly letterSpacing: "0.02em";
+        };
+        readonly subtitle2: {
+            readonly fontWeight: 700;
+            readonly fontSize: "0.84rem";
+            readonly letterSpacing: "0.02em";
+        };
+        readonly body1: {
+            readonly fontSize: "0.92rem";
+            readonly lineHeight: 1.72;
+        };
+        readonly body2: {
+            readonly fontSize: "0.84rem";
+            readonly lineHeight: 1.62;
+        };
+        readonly button: {
+            readonly textTransform: "uppercase";
+            readonly fontWeight: 800;
+            readonly letterSpacing: "0.08em";
+        };
+        readonly caption: {
+            readonly fontSize: "0.73rem";
+            readonly letterSpacing: "0.03em";
+        };
+        readonly overline: {
+            readonly fontSize: "0.7rem";
+            readonly letterSpacing: "0.14em";
+            readonly textTransform: "uppercase";
+        };
     };
-    header_lg_semibold: {
-        font: string;
+    shape: {
+        borderRadius: number;
     };
-    header_md_semibold: {
-        font: string;
+    spacing: number;
+    components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
+};
+
+declare const warmEarth: {
+    name: string;
+    direction: "rtl";
+    palette: {
+        mode: "light";
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            dark: string;
+            light: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+        grey: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        action: {
+            hover: string;
+            selected: string;
+            focus: string;
+            active: string;
+            disabled: string;
+            disabledBackground: string;
+        };
     };
-    header_sm_semibold: {
-        font: string;
+    typography: {
+        readonly fontFamily: "\"Tajawal\",\"Cairo\",\"Noto Naskh Arabic\",\"Noto Sans Arabic\",\"Inter\",\"Roboto\",\"Arial\",sans-serif";
+        readonly h1: {
+            readonly fontWeight: 800;
+            readonly fontSize: "2rem";
+            readonly lineHeight: 1.24;
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly h2: {
+            readonly fontWeight: 800;
+            readonly fontSize: "1.5rem";
+            readonly lineHeight: 1.3;
+        };
+        readonly h3: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.24rem";
+            readonly lineHeight: 1.36;
+        };
+        readonly h4: {
+            readonly fontWeight: 700;
+            readonly fontSize: "1.1rem";
+            readonly lineHeight: 1.42;
+        };
+        readonly subtitle1: {
+            readonly fontWeight: 600;
+            readonly fontSize: "0.95rem";
+        };
+        readonly subtitle2: {
+            readonly fontWeight: 600;
+            readonly fontSize: "0.875rem";
+        };
+        readonly body1: {
+            readonly fontSize: "0.95rem";
+            readonly lineHeight: 1.78;
+        };
+        readonly body2: {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: 1.68;
+        };
+        readonly button: {
+            readonly textTransform: "none";
+            readonly fontWeight: 700;
+            readonly letterSpacing: "0.01em";
+        };
+        readonly caption: {
+            readonly fontSize: "0.75rem";
+        };
+        readonly overline: {
+            readonly fontSize: "0.75rem";
+            readonly letterSpacing: "0.06em";
+        };
     };
-    header_xs_semibold: {
-        font: string;
+    shape: {
+        borderRadius: number;
     };
-}
-declare module "@mui/material/styles" {
-    interface TypographyVariants extends CustomTypographyVariants {
-    }
-    interface TypographyVariantsOptions extends Partial<CustomTypographyVariants> {
-    }
-}
-declare module "@mui/material/Typography" {
-    interface TypographyPropsVariantOverrides extends Record<keyof CustomTypographyVariants, true> {
-    }
-}
+    spacing: number;
+    components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
+};
+
+/**
+ * Represents the theme mode as reported by the operating system or browser.
+ * - `light`: Light mode
+ * - `dark`: Dark mode
+ * - `unknown`: Theme mode could not be determined
+ */
+type SystemTheme = "light" | "dark" | "unknown";
 
 declare const darkModeOptions: OptionItem[];
 
 declare const useThemeSettings: () => ThemeContextProps;
 
-type Theme1 = ThemeOptions$1 & {
-    name?: string;
-};
-type ThemeN = ThemeOptions$1 & {
-    name: string;
-};
-type ThemesProp = [Theme1] | [ThemeN, ...ThemeN[]];
+type ThemesInput = ThemePreset[];
+
+/**
+ * Normalizes preset input so the result always includes valid theme names.
+ * - No input/empty: returns a single default theme.
+ * - Duplicate preset ids: resolved with last-wins while keeping first-order.
+ */
+declare const normalizeThemes: (input?: ThemesInput) => NamedThemeOptions[];
+declare const mergeThemes: (presets?: ThemesInput, customThemes?: ThemesInput) => NamedThemeOptions[];
+declare const resolveDefaultThemeName: (themes: NamedThemeOptions[]) => string;
+declare const resolveThemeById: (themes: NamedThemeOptions[], themeId: string) => NamedThemeOptions | undefined;
 
 type ThemeProviderWrapperProps = PropsWithChildren<{
     /** Optional font stack to apply across the app. */
     fontFamily?: string;
     /**
-     * Optional dynamic list of themes.
-     * Each theme is a full ThemeOptions object.
+     * Optional list of theme presets.
+     * Accepts only `ThemePreset[]`.
      */
-    themes?: ThemesProp;
+    themes?: ThemesInput;
 }>;
 declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
 
-/**
- * Common component style overrides and default props shared across the design system.
- * This object should be spread into the `components` field of the MUI theme.
- */
-declare const commonComponentProps: Theme["components"];
-
 /**
  * Injects global styles into the document using Emotion.
  * These styles include font setup, base HTML styles, custom scrollbars,
@@ -262,6 +955,43 @@ interface GlobalStylesProps {
 }
 declare const GlobalStyles: FC<GlobalStylesProps>;
 
+/**
+ * Common component style overrides and default props shared across the design system.
+ * This object should be spread into the `components` field of the MUI theme.
+ */
+declare const commonComponentProps: Theme$1["components"];
+
+type ThemeInput = ThemeOptions & {
+    background?: ThemeModeBackground;
+};
+declare const buildMuiTheme: (options: ThemeInput, mode: PaletteMode) => Theme;
+
+declare const resolveEffectiveMode: (darkMode: DarkModeOptions, systemTheme: SystemTheme) => PaletteMode;
+
+declare const selectThemeOptions: (preset: NormalizedPreset, mode: PaletteMode) => ThemeOptions;
+
+type ThemeWithPalette = Pick<Theme, "palette">;
+interface SurfaceTokens {
+    pageBg: string;
+    surfaceBg: string;
+    textPrimary: string;
+    textSecondary: string;
+    divider: string;
+}
+declare const getSurfaceTokens: (theme: ThemeWithPalette) => SurfaceTokens;
+declare const alphaText: (theme: ThemeWithPalette, opacity: number) => string;
+
+/**
+ * Mapping of custom typography variants to corresponding HTML elements.
+ */
+declare const muiTypography: Components<Theme$1>["MuiTypography"];
+/**
+ * Custom typography variant definitions with adjusted display sizes.
+ */
+declare const typographyVariants: TypographyVariantsOptions;
+
+declare const validateSchemeTokens: (options: ThemeOptions) => string[];
+
 /**
  * Fade in from the left with slight movement on the X-axis.
  */
@@ -353,6 +1083,31 @@ declare const installAppAnimation: {
     toString: () => string;
 } & string;
 
+/**
+ * A custom React hook to determine if the current device is a smaller device
+ * based on the screen width.
+ * @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
+ * @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
+ */
+declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
+
+/**
+ * A React hook to detect the system theme preference.
+ * @returns The current system theme ('light', 'dark', or 'unknown').
+ */
+declare const useSystemTheme: () => SystemTheme;
+
+declare const canUseDom: () => boolean;
+
+declare const APP_SETTINGS_VERSION = 1;
+interface StoredAppSettings {
+    version: typeof APP_SETTINGS_VERSION;
+    themeId: string;
+    darkMode: DarkModeOptions;
+}
+declare const readAppSettings: () => Partial<StoredAppSettings> | null;
+declare const writeAppSettings: (settings: StoredAppSettings) => void;
+
 /**
  * Validates whether a given string is a valid 3- or 6-digit hex color code (e.g., "#fff" or "#ffffff").
  *
@@ -380,6 +1135,16 @@ type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unkn
  * A list of supported browsers.
  */
 type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
+/**
+ * Detects the user's operating system based on the user agent string.
+ * Safe for SSR: falls back to "Unknown" on server.
+ */
+declare const getOperatingSystem: () => OperatingSystem;
+/**
+ * Detects the user's browser based on the user agent string.
+ * Safe for SSR: falls back to "Unknown" on server.
+ */
+declare const getBrowser: () => Browser;
 /**
  * Basic information about the user's system (OS and browser).
  * Safe for SSR: resolves to Unknown values on server.
@@ -394,7 +1159,6 @@ declare const systemInfo: {
  *
  * @param darkMode - User preference: 'light' | 'dark' | 'system' | 'auto'.
  * @param systemTheme - Detected OS-level theme: 'light' | 'dark'.
- * @param backgroundColor - The background color to assess contrast in 'auto' mode.
  * @returns True if dark mode should be used.
  */
 declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: SystemTheme) => boolean;
@@ -409,18 +1173,4 @@ declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: Syste
 declare const timeAgo: (date: Date, lang?: string) => string;
 declare const timeAgoFromStart: (date: Date, lang?: string) => string;
 
-/**
- * A custom React hook to determine if the current device is a smaller device
- * based on the screen width.
- * @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
- * @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
- */
-declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
-
-/**
- * A React hook to detect the system theme preference.
- * @returns The current system theme ('light', 'dark', or 'unknown').
- */
-declare const useSystemTheme: () => SystemTheme;
-
-export { type AppSettings, type CustomTypographyVariants, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, type NamedThemeOptions, type OptionItem, PathName, type SystemTheme, type Theme1, type ThemeContextProps, type ThemeN, ThemeProviderWrapper, type ThemesProp, commonComponentProps, darkModeOptions, displayGreeting, fadeIn, fadeInLeft, getDayIdentifier, installAppAnimation, isDarkMode, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, slideIn, slideInBottom, systemInfo, timeAgo, timeAgoFromStart, useResponsiveDisplay, useSystemTheme, useThemeSettings };
+export { APP_SETTINGS_VERSION, AppSettings, type Browser, DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, NamedThemeOptions, type OperatingSystem, OptionItem, PathName, type StoredAppSettings, type SurfaceTokens, type SystemTheme, ThemeContextProps, ThemeModeBackground, ThemePreset, ThemeProviderWrapper, type ThemesInput, alphaText, buildMuiTheme, canUseDom, commonComponentProps, darkModeOptions, displayGreeting, editorialClassic, fadeIn, fadeInLeft, getBrowser, getDayIdentifier, getOperatingSystem, getSurfaceTokens, installAppAnimation, isDarkMode, isHexColor, logoutAnimation, mergeThemes, modernMinimal, muiTypography, neoGlass, normalizeThemes, progressPulse, pulseAnimation, readAppSettings, resolveDefaultThemeName, resolveEffectiveMode, resolveThemeById, retroTerminal, scale, selectThemeOptions, slideIn, slideInBottom, systemInfo, timeAgo, timeAgoFromStart, typographyVariants, useResponsiveDisplay, useSystemTheme, useThemeSettings, validateSchemeTokens, warmEarth, writeAppSettings };