unich-ui-kit-web/dist/index.d.mts

Mantine theme configuration and provider for Unich UI Kit

import * as type_fest_source_partial_deep from 'type-fest/source/partial-deep';
import * as _mantine_core from '@mantine/core';
import { MantineThemeOverride, MantineProviderProps } from '@mantine/core';
import { semanticColors } from './theme/colors.mjs';
export { BackgroundColors, ColorShades, TextColors, baseColors, getSemanticColor } from './theme/colors.mjs';
import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';

declare const convertPaletteToArray: (palette: Record<string, string>) => [string, string, string, string, string, string, string, string, string, string, string];
/**
 * Default UI Kit theme with semantically organized colors
 * and standardized components based on brand colors:
 * - #FF990A (orange) as main color in logo
 * - #ECECEC (white) as light color in logo text
 * - #171717 (dark) as dark color for backgrounds
 * - #0A85FF (blue) as accent color
 */
declare const theme: MantineThemeOverride;
/**
 * Theme variants for specific brand identities
 * or alternative color schemes
 */
declare const themeVariants: {
    brand: type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;
    darkBrand: type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;
    blue: type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;
    gray: type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;
    default: type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;
};
/**
 * Semantic color reference for use in custom styling
 * Example: useStyles = createStyles((theme) => ({
 *   successText: { color: getThemeColor(theme, 'success') }
 * }))
 */
declare const getThemeColor: (theme: MantineThemeOverride, semantic: keyof typeof semanticColors, shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950) => string;

/**
 * Theme variant options available in the UI Kit
 */
type ThemeVariant = keyof typeof themeVariants;
interface ThemeProviderProps extends Omit<MantineProviderProps, 'theme'> {
    children: React.ReactNode;
    /** Optional theme overrides */
    themeOverrides?: Partial<typeof theme>;
    /** Theme variant selection */
    variant?: ThemeVariant;
}
/**
 * Theme provider component that applies the UI kit theme
 * and allows for easy theme customization with semantic colors
 *
 * @example
 * // Basic usage with default brand theme (orange primary)
 * <ThemeProvider>
 *   <App />
 * </ThemeProvider>
 *
 * @example
 * // With blue accent color as primary
 * <ThemeProvider variant="blue">
 *   <App />
 * </ThemeProvider>
 *
 * @example
 * // With dark brand theme
 * <ThemeProvider variant="darkBrand">
 *   <App />
 * </ThemeProvider>
 */
declare function ThemeProvider({ children, themeOverrides, variant, ...otherProps }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
/**
 * Create a custom theme by extending the base theme
 *
 * @example
 * const customTheme = extendTheme({
 *   primaryColor: 'orange',
 *   defaultRadius: 'lg',
 * });
 */
declare const extendTheme: (themeOverrides: Partial<typeof theme>) => type_fest_source_partial_deep.PartialObjectDeep<_mantine_core.MantineTheme, {}>;

export { ThemeProvider, type ThemeVariant, convertPaletteToArray, theme as defaultTheme, extendTheme, getThemeColor, semanticColors, themeVariants };