@acuteinfo/common-base 1.2.84 → 1.2.85

package/dist/theme/components/ThemeToggleButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconButtonProps } from "@mui/material/IconButton";
+export interface ThemeToggleButtonProps extends Omit<IconButtonProps, "onClick"> {
+    tooltipTitle?: string;
+}
+/**
+ * MUI IconButton component demonstrating light/dark color mode toggling.
+ */
+export declare const ThemeToggleButton: React.FC<ThemeToggleButtonProps>;

package/dist/theme/examples/ThemeUsageExample.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ThemeUsageExample: React.FC;
+export default ThemeUsageExample;

package/dist/theme/generateTheme/buildPalette.d.ts

@@ -0,0 +1,137 @@
+import { ResolvedColors } from "./resolveColors";
+import { GeneratedTokens } from "./types";
+export declare const buildPalette: (colors: ResolvedColors, tokens: GeneratedTokens) => {
+    mode: "dark" | "light";
+    primary: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    secondary: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+    };
+    error: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    warning: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    info: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    success: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    divider: string;
+    action: {
+        hover: string;
+        selected: string;
+        focus: string;
+        disabled: string;
+        disabledBackground: string;
+    };
+    surface: {
+        page: string;
+        card: string;
+        elevated: string;
+        sidebar: string;
+        header: string;
+        footer: string;
+        input: string;
+        tabs: string;
+    };
+    border: import("..").ThemeBorderTokens;
+    state: {
+        hover: string;
+        selected: string;
+        focus: string;
+        pressed: string;
+    };
+    greyPalette: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    shadow: {
+        input: string;
+        card: string;
+        popover: string;
+        dialog: string;
+        paper: string;
+        alert: string;
+        default: string;
+        tooltip: string;
+        button: string;
+        table: string;
+        form: string;
+        box: string;
+        grid: string;
+        stack: string;
+        container: string;
+        stepper: string;
+        tabs: string;
+    };
+    radius: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        pill: string;
+        dialog: string;
+        card: string;
+        button: string;
+        input: string;
+    };
+    gradient: import("..").ThemeGradients;
+    space: import("..").ThemeSpacingTokens;
+    transition: {
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+};

package/dist/theme/generateTheme/componentOverrides/appBar.d.ts

@@ -0,0 +1,14 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { ResolvedColors } from "../resolveColors";
+import { GeneratedTokens } from "../types";
+/**
+ * AppBar overrides.
+ *
+ * Default background: `gradient.primaryToSecondary` (brand gradient).
+ * Text color: Dynamically computed `appBarTextColor` (WCAG-safe contrast against the gradient).
+ * Consumers can override via `sx={{ background }}` or `sx={{ color }}` props.
+ *
+ * `backgroundImage: "none"` is NOT set here because the AppBar intentionally
+ * uses a gradient as its background-image.
+ */
+export declare const getAppBarOverrides: (colors: ResolvedColors, tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/button.d.ts

@@ -0,0 +1,4 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { ResolvedColors } from "../resolveColors";
+import { GeneratedTokens } from "../types";
+export declare const getButtonOverrides: (colors: ResolvedColors, tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/cssBaseline.d.ts

@@ -0,0 +1,10 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { GeneratedTokens } from "../types";
+/**
+ * MuiCssBaseline override.
+ *
+ * Note: MUI's <CssBaseline /> automatically applies palette.background.default
+ * to the <body> background and palette.text.primary to root text nodes.
+ * This override only adds the smooth transition for theme switching.
+ */
+export declare const getCssBaselineOverrides: (tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/index.d.ts

@@ -0,0 +1,4 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { ResolvedColors } from "../resolveColors";
+import { GeneratedTokens } from "../types";
+export declare const buildComponentOverrides: (colors: ResolvedColors, tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/input.d.ts

@@ -0,0 +1,3 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { GeneratedTokens } from "../types";
+export declare const getInputOverrides: (tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/navigation.d.ts

@@ -0,0 +1,3 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { GeneratedTokens } from "../types";
+export declare const getNavigationOverrides: (tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/surfaces.d.ts

@@ -0,0 +1,4 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { ResolvedColors } from "../resolveColors";
+import { GeneratedTokens } from "../types";
+export declare const getSurfaceOverrides: (colors: ResolvedColors, tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/componentOverrides/tabs.d.ts

@@ -0,0 +1,3 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { GeneratedTokens } from "../types";
+export declare const getTabsOverrides: (tokens: GeneratedTokens) => ThemeOptions["components"];

package/dist/theme/generateTheme/index.d.ts

@@ -0,0 +1,8 @@
+import { ThemeOptions } from "@mui/material/styles";
+import { ThemeConfig } from "../types/ThemeConfig";
+export { resolveColors } from "./resolveColors";
+export type { ResolvedColors } from "./resolveColors";
+export { buildPalette } from "./buildPalette";
+export { buildComponentOverrides } from "./componentOverrides";
+export type { GeneratedTokens } from "./types";
+export declare const generateTheme: (config: ThemeConfig, skipSyncVars?: boolean) => ThemeOptions;

package/dist/theme/generateTheme/resolveColors.d.ts

@@ -0,0 +1,30 @@
+import { ThemeConfig } from "../types/ThemeConfig";
+export interface ResolvedColors {
+    mode: "light" | "dark";
+    isDark: boolean;
+    /** Raw validated user hex — preserved for gradients, borders, legacy sync */
+    baseColor: string;
+    /** Raw validated user secondary hex */
+    secondaryColor: string;
+    /** Mode-adapted primary for palette.primary.main */
+    adaptedPrimary: string;
+    /** Mode-adapted secondary for palette.secondary.main */
+    adaptedSecondary: string;
+    /** Mode-adapted status colors */
+    adaptedSuccess: string;
+    adaptedError: string;
+    adaptedWarning: string;
+    adaptedInfo: string;
+    /** Raw validated status colors */
+    successColor: string;
+    errorColor: string;
+    warningColor: string;
+    infoColor: string;
+    /** Resolved background/paper/text */
+    resolvedBg: string;
+    resolvedText: string;
+    resolvedPaper: string;
+    defaultTextSecondary: string;
+    rawText?: string;
+}
+export declare const resolveColors: (config: ThemeConfig) => ResolvedColors;

package/dist/theme/generateTheme/types.d.ts

@@ -0,0 +1,18 @@
+import { generateNeutralPalette } from "../generators/neutralPaletteGenerator";
+import { generateSurfaces, generateBorders, generateStates, generateTransitions } from "../generators/semanticGenerator";
+import { generateShadows } from "../generators/shadowGenerator";
+import { generateRadius } from "../generators/radiusGenerator";
+import { generateGradients } from "../generators/gradientGenerator";
+import { generateSpacing } from "../generators/spacingGenerator";
+export interface GeneratedTokens {
+    greyPalette: ReturnType<typeof generateNeutralPalette>;
+    surface: ReturnType<typeof generateSurfaces>;
+    border: ReturnType<typeof generateBorders>;
+    state: ReturnType<typeof generateStates>;
+    shadow: ReturnType<typeof generateShadows>;
+    radius: ReturnType<typeof generateRadius>;
+    gradient: ReturnType<typeof generateGradients>;
+    space: ReturnType<typeof generateSpacing>;
+    transition: ReturnType<typeof generateTransitions>;
+    appBarTextColor: string;
+}

package/dist/theme/generators/borderGenerator.d.ts

@@ -0,0 +1,13 @@
+export interface ThemeBorderTokens {
+    subtle: string;
+    default: string;
+    strong: string;
+    primary: string;
+    secondary: string;
+    disabled: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+}
+export declare const generateBorders: (greyPalette: Record<number, string>, isDark: boolean, primaryColor?: string, secondaryColor?: string, errorColor?: string, successColor?: string, warningColor?: string, infoColor?: string) => ThemeBorderTokens;

package/dist/theme/generators/gradientGenerator.d.ts

@@ -0,0 +1,14 @@
+export interface ThemeGradients {
+    primary: string;
+    secondary: string;
+    primaryToSecondary: string;
+    subtle: string;
+    glow: string;
+    button: string;
+    buttonHover: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+}
+export declare const generateGradients: (primaryHex: string, secondaryHex: string, isDark: boolean, successHex?: string, errorHex?: string, warningHex?: string, infoHex?: string) => ThemeGradients;

package/dist/theme/generators/neutralPaletteGenerator.d.ts

@@ -0,0 +1,12 @@
+export declare const generateNeutralPalette: (baseBg: string, isDark: boolean) => {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};

package/dist/theme/generators/radiusGenerator.d.ts

@@ -0,0 +1,12 @@
+export declare const generateRadius: () => {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    pill: string;
+    dialog: string;
+    card: string;
+    button: string;
+    input: string;
+};

package/dist/theme/generators/semanticGenerator.d.ts

@@ -0,0 +1,22 @@
+export declare const generateSurfaces: (resolvedBg: string, resolvedPaper: string, isDark: boolean) => {
+    page: string;
+    card: string;
+    elevated: string;
+    sidebar: string;
+    header: string;
+    footer: string;
+    input: string;
+    tabs: string;
+};
+export { generateBorders } from "./borderGenerator";
+export declare const generateStates: (isDark: boolean) => {
+    hover: string;
+    selected: string;
+    focus: string;
+    pressed: string;
+};
+export declare const generateTransitions: () => {
+    fast: string;
+    normal: string;
+    slow: string;
+};

package/dist/theme/generators/shadowGenerator.d.ts

@@ -0,0 +1,19 @@
+export declare const generateShadows: (isDark: boolean) => {
+    input: string;
+    card: string;
+    popover: string;
+    dialog: string;
+    paper: string;
+    alert: string;
+    default: string;
+    tooltip: string;
+    button: string;
+    table: string;
+    form: string;
+    box: string;
+    grid: string;
+    stack: string;
+    container: string;
+    stepper: string;
+    tabs: string;
+};

package/dist/theme/generators/spacingGenerator.d.ts

@@ -0,0 +1,23 @@
+export interface ThemeSpacingTokens {
+    none: string;
+    hairline: string;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    huge: string;
+    appbar: string;
+    card: string;
+    container: string;
+    section: string;
+    compact: string;
+    relaxed: string;
+    gridDensity: string;
+    cellPaddingHorizontal: string;
+    resizerWidth: string;
+}
+export declare const generateSpacing: () => ThemeSpacingTokens;

package/dist/theme/index.d.ts

@@ -0,0 +1,19 @@
+export * from "./types/ThemeConfig";
+export * from "./types/themeExtensions";
+export * from "./utils/colorUtils";
+export * from "./utils/accessibility";
+export * from "./generators/neutralPaletteGenerator";
+export * from "./generators/semanticGenerator";
+export * from "./generators/shadowGenerator";
+export * from "./generators/radiusGenerator";
+export * from "./generators/gradientGenerator";
+export * from "./generators/spacingGenerator";
+export * from "./generators/borderGenerator";
+export * from "./generateTheme";
+export * from "./presets/presets";
+export * from "./legacy/syncLegacyVars";
+export * from "./legacy/theme";
+export * from "./providers/BaseThemeProvider";
+export * from "./providers/ColorModeContext";
+export * from "./components/ThemeToggleButton";
+export * from "./examples/ThemeUsageExample";

package/dist/theme/legacy/syncLegacyVars.d.ts

@@ -0,0 +1,2 @@
+import { PaletteMode } from "@mui/material";
+export declare const syncLegacyVars: (primaryHex: string, secondaryHex: string, mode: PaletteMode, presetId?: string, resolvedBg?: string) => void;

package/dist/theme/legacy/theme.d.ts

@@ -0,0 +1,60 @@
+import { Theme } from "@mui/material/styles";
+/**
+ * Base color token interface representing the single source of truth for Light Mode.
+ */
+export interface LightPaletteTokens {
+    primary: string;
+    secondary: string;
+    backgroundDefault: string;
+    backgroundPaper: string;
+    textPrimary: string;
+    textSecondary: string;
+}
+/**
+ * Single Source of Truth Theme Configuration (Immutable Base Light Tokens).
+ * Frozen at runtime to guarantee zero state drift or mutation when toggling back to Light Mode.
+ */
+export declare const LIGHT_PALETTE: Readonly<LightPaletteTokens>;
+/**
+ * Utility function to ensure WCAG AAA/AA contrast compliance (min 4.5:1 ratio for normal text).
+ * Dynamically lightens text foreground if contrast against dark background is insufficient.
+ */
+export declare const ensureWCAGContrast: (foregroundHex: string, backgroundHex: string, minRatio?: number) => string;
+/**
+ * Deterministic utility function that converts baseline Light Mode colors into softer,
+ * lighter shades appropriate for Dark Mode.
+ *
+ * Target Adjustments:
+ * 1. primary.main & secondary.main: Lightened by 30-35% to eliminate visual vibration on dark surfaces.
+ * 2. background.default: Converted into a rich deep dark canvas (#0b0f17).
+ * 3. background.paper: Derived by slightly elevating luminance (+7%) above default dark background.
+ * 4. text.primary & text.secondary: Dynamic high-contrast light shades validated against WCAG standards.
+ */
+export declare const generateDynamicDarkPalette: (lightTokens?: LightPaletteTokens) => {
+    mode: "dark";
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+    };
+};
+/**
+ * Creates a complete MUI Theme instance using theme generators from @/theme/generators
+ * instead of static inline color and structural style fallbacks.
+ */
+export declare const createAppTheme: (mode: "light" | "dark", customTokens?: LightPaletteTokens) => Theme;

package/dist/theme/presets/presets.d.ts

@@ -0,0 +1,10 @@
+export interface ThemePreset {
+    id: string;
+    name: string;
+    primary: string;
+    secondary: string;
+    background: string;
+    text?: string;
+    cssVars?: Record<string, string>;
+}
+export declare const THEME_PRESETS: Record<string, ThemePreset>;

package/dist/theme/providers/BaseThemeProvider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { PaletteMode } from "@mui/material";
+import { ThemeConfig } from "../types/ThemeConfig";
+interface BaseThemeType {
+    themed: string;
+    themeConfig: ThemeConfig;
+    setTheme: (presetId: string) => void;
+    themeObj: any;
+    mode: PaletteMode;
+    setThemeMode: (mode: PaletteMode) => void;
+    applyTheme: (config: ThemeConfig) => void;
+}
+export declare const BaseThemeProvider: ({ children, onFetchInitialTheme, }: {
+    children: React.ReactNode;
+    onFetchInitialTheme?: (() => Promise<ThemeConfig | null>) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useBaseTheme: () => BaseThemeType;
+export {};

package/dist/theme/providers/ColorModeContext.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { PaletteMode } from "@mui/material";
+import { LightPaletteTokens } from "../legacy/theme";
+export interface ColorModeContextValue {
+    mode: PaletteMode;
+    toggleColorMode: () => void;
+    setColorMode: (mode: PaletteMode) => void;
+}
+/**
+ * Custom hook to safely access the ColorModeContext state.
+ */
+export declare const useColorMode: () => ColorModeContextValue;
+export interface ColorModeProviderProps {
+    children: React.ReactNode;
+    initialTokens?: LightPaletteTokens;
+}
+/**
+ * React Context Provider managing mode state ('light' | 'dark') and memoizing
+ * the generated MUI theme to avoid theme recalculations on unrelated renders.
+ */
+export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;

package/dist/theme/types/ThemeConfig.d.ts

@@ -0,0 +1,12 @@
+export interface ThemeConfig {
+    mode: "light" | "dark";
+    primary: string;
+    secondary: string;
+    background: string;
+    text: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    presetId?: string;
+}