onekijs-ui 0.9.2 → 0.15.2

package/dist/styles/typings.d.ts

@@ -1,20 +1,528 @@
-import { Globals } from 'csstype';
-import { AnonymousObject } from 'onekijs-core';
-import { FlattenInterpolation, ThemedStyledProps, ThemeProps } from 'styled-components';
-export declare type CssProperty<T> = (value: T, variants?: AnonymousObject) => FlattenInterpolation<ThemeProps<any>>;
-export declare type Formatter<T> = (value: T, theme: Theme) => string;
-export declare type Media = 'all' | 'sm' | 'md' | 'lg' | 'xl';
-export declare type Theme = AnonymousObject;
-export declare type TLength = string | 0;
-export declare type SizeProperty = Globals | TLength | '-moz-max-content' | '-moz-min-content' | '-webkit-max-content' | 'auto' | 'intrinsic' | 'max-content' | 'min-content' | 'min-intrinsic' | 'none' | 'full' | 'screen' | string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 'px' | 'xs' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'screen-sm' | 'screen-md' | 'screen-lg' | 'screen-xl';
-export declare type ColorPropertyTheme = string;
-export declare type SpacingPropertyTheme = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 'px';
-export declare type FontFamilyPropertyTheme = 'mono' | 'sans' | 'serif';
-export declare type FontSizePropertyTheme = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export declare type FontWeightPropertyTheme = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-export declare type LineHeightPropertyTheme = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-export declare type LetterSpacingPropertyTheme = 'tighte' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
-export declare type RadiusPropertyTheme = 'none' | 'sm' | 'default' | 'md' | 'lg' | 'full';
-export declare type ShadowPropertyTheme = 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'outline' | 'none';
-export declare type KindTheme = 'primary' | 'danger' | 'success' | 'info' | 'warning' | 'secondary';
-export declare type ComponentStyle<P, T extends Theme = Theme> = (propsWithTheme: ThemedStyledProps<P, T>) => FlattenInterpolation<ThemeProps<T>>;
+import { AppearanceProperty, BackgroundColorProperty, BorderBottomStyleProperty, BorderColorProperty, BorderRadiusProperty, BorderStyleProperty, BorderWidthProperty, BoxShadowProperty, ColorProperty, CursorProperty, FontSizeProperty, FontWeightProperty, Globals, HeightProperty, LetterSpacingProperty, LineHeightProperty, MarginProperty, OpacityProperty, OutlineProperty, PaddingProperty, TextDecorationProperty, TextOverflowProperty, TextTransformProperty, WhiteSpaceProperty, WidthProperty, ZIndexProperty } from 'csstype';
+import { AnonymousObject } from 'onekijs-framework';
+import { FlattenInterpolation, GlobalStyleComponent, ThemedStyledProps, ThemeProps as SytledThemeProps } from 'styled-components';
+export declare type TshirtSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare type CssProperty<T> = (value: T, variants?: AnonymousObject) => FlattenInterpolation<SytledThemeProps<any>>;
+export declare type Formatter<T> = (value: T, theme: Theme) => string;
+export declare type Media = 'all' | 'sm' | 'md' | 'lg' | 'xl';
+export declare enum ColorKeys {
+    white = "white",
+    lightest = "lightest",
+    lighter = "lighter",
+    light = "light",
+    dark = "dark",
+    darker = "darker",
+    darkest = "darkest",
+    black = "black",
+    success = "success",
+    info = "info",
+    warning = "warning",
+    danger = "danger",
+    primary = "primary",
+    secondary = "secondary",
+    blue = "blue",
+    red = "red",
+    purple = "purple",
+    pink = "pink",
+    indigo = "indigo",
+    teal = "teal",
+    orange = "orange",
+    yellow = "yellow",
+    green = "green",
+    lightblue = "lightblue",
+    lightred = "lightred",
+    lightpurple = "lightpurple",
+    lightpink = "lightpink",
+    lightindigo = "lightindigo",
+    lightteal = "lightteal",
+    lightorange = "lightorange",
+    lightyellow = "lightyellow",
+    lightgreen = "lightgreen",
+    background = "background"
+}
+export declare enum DashboardKeys {
+    left = "left",
+    right = "right",
+    header = "header",
+    footer = "footer",
+    body = "body"
+}
+export declare enum BreakpointKeys {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
+export declare enum SpacingKeys {
+    none = "none",
+    '2xs' = "2xs",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl",
+    '3xl' = "3xl",
+    '4xl' = "4xl",
+    '5xl' = "5xl",
+    '6xl' = "6xl",
+    '7xl' = "7xl",
+    '8xl' = "8xl",
+    '9xl' = "9xl",
+    '10xl' = "10xl",
+    '11xl' = "11xl",
+    '12xl' = "12xl",
+    '13xl' = "13xl",
+    px = "px"
+}
+export declare enum TshirtKeys {
+    xsmall = "xsmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge"
+}
+export declare enum FontWeightKeys {
+    hairline = "hairline",
+    thin = "thin",
+    light = "light",
+    normal = "normal",
+    medium = "medium",
+    semibold = "semibold",
+    bold = "bold",
+    extrabold = "extrabold",
+    black = "black"
+}
+export declare enum FontFamiliesKeys {
+    sans = "sans",
+    serif = "serif",
+    mono = "mono"
+}
+export declare enum FontLineHeightKeys {
+    none = "none",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl",
+    '3xl' = "3xl",
+    '4xl' = "4xl"
+}
+export declare enum FontSizeKeys {
+    '2xs' = "2xs",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl",
+    '3xl' = "3xl",
+    '4xl' = "4xl",
+    '5xl' = "5xl",
+    '6xl' = "6xl",
+    default = "default"
+}
+export declare enum FontSpacingKeys {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl"
+}
+export declare enum RadiusKeys {
+    none = "none",
+    '2xs' = "2xs",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    full = "full"
+}
+export declare enum ShadowKeys {
+    default = "default",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl",
+    'inner' = "inner",
+    'outline' = "outline",
+    'none' = "none"
+}
+export declare enum SizeKeys {
+    'zero' = 0,
+    'one' = 1,
+    'two' = 2,
+    'three' = 3,
+    'four' = 4,
+    'five' = 5,
+    'six' = 6,
+    'eight' = 8,
+    'ten' = 10,
+    'twelve' = 12,
+    'sixteen' = 16,
+    'twenty' = 20,
+    'twenty_four' = 24,
+    'thirty_two' = 32,
+    'fourty' = 40,
+    'fourty_eight' = 48,
+    'fifty_six' = 56,
+    'sixty_four' = 64,
+    'px' = "px",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    '2xl' = "2xl",
+    '3xl' = "3xl",
+    '4xl' = "4xl",
+    '5xl' = "5xl",
+    '6xl' = "6xl",
+    'screen-sm' = "screen-sm",
+    'screen-md' = "screen-md",
+    'screen-lg' = "screen-lg",
+    'screen-xl' = "screen-xl"
+}
+export declare type Theme = {
+    GlobalStyles: GlobalStyleComponent<any, any>;
+    breakpoints: {
+        [k in BreakpointKeys]: string;
+    };
+    colors: {
+        [k in ColorKeys]: string;
+    };
+    spacings: {
+        [k in SpacingKeys]: string;
+    };
+    palette: Palette;
+    font: {
+        families: {
+            [k in FontFamiliesKeys]: string;
+        };
+        lineHeights: {
+            [k in FontLineHeightKeys]: number;
+        };
+        sizes: {
+            [k in FontSizeKeys]: string | 0;
+        };
+        spacings: {
+            [k in FontSpacingKeys]: string | 0;
+        };
+        weights: {
+            [k in FontWeightKeys]: number;
+        };
+    };
+    radius: {
+        [k in RadiusKeys]: string | 0;
+    };
+    shadow: {
+        [k in ShadowKeys]: string;
+    };
+    sizes: {
+        [k in SizeKeys]: string | 0;
+    };
+    buttons: {
+        [k in ColorKeys]: {
+            bgColor: ColorPropertyTheme | BackgroundColorProperty;
+            bgColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            bgColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            borderColor: ColorPropertyTheme | BorderColorProperty;
+            borderColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            borderColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            borderRadius: RadiusPropertyTheme | string;
+            borderStyle: BorderStyleProperty;
+            borderWidth: BorderWidthProperty<TLength>;
+            color: ColorPropertyTheme | ColorProperty;
+            colorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            colorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            cursor: CursorProperty;
+            cursorDisabled: CursorProperty;
+            fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+            fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+            hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+            hoverBgColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            hoverBgColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            hoverBorderColor: ColorPropertyTheme | BackgroundColorProperty;
+            hoverBorderColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            hoverBorderColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            hoverColor: ColorPropertyTheme | ColorProperty;
+            hoverColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+            hoverColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+            letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+            lineHeight: LineHeightPropertyTheme | LineHeightProperty<TLength>;
+            opacity: OpacityProperty;
+            opacityDisabled: OpacityProperty;
+            paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+            paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+            textOverflow: TextOverflowProperty;
+            textTransform: TextTransformProperty;
+            whiteSpace: WhiteSpaceProperty;
+        };
+    };
+    fieldLayout: {
+        marginY: MarginProperty<TLength> | SpacingPropertyTheme;
+        helperMarginLeft: MarginProperty<TLength> | SpacingPropertyTheme;
+        helperMarginRight: MarginProperty<TLength> | SpacingPropertyTheme;
+        helperColor: ColorProperty | ColorPropertyTheme;
+        descriptionFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        descriptionColor: ColorProperty | ColorPropertyTheme;
+    };
+    table: {
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        shadow: ShadowPropertyTheme | BoxShadowProperty;
+        thPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        thPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        thBorderBottomWidth: number | BorderWidthProperty<TLength>;
+        thBorderBottomColor: ColorPropertyTheme | BorderColorProperty;
+        thBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        thFontWeigth: FontWeightPropertyTheme | FontWeightProperty;
+        thFontColor: ColorPropertyTheme | ColorProperty;
+        thFontCase: TextTransformProperty;
+        thFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        thLetterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+        thFilterInputBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        thFilterInputFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        thFilterInputPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        thFilterInputPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        tdFontColor: ColorPropertyTheme | ColorProperty;
+        tdPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        tdPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        tdBorderBottomColor: ColorPropertyTheme | BorderColorProperty;
+        tdBorderBottomWidth: number | BorderWidthProperty<TLength>;
+        tdBorderBottomStyle: BorderBottomStyleProperty;
+        tdStripBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        tdHoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        tdHoverFontColor: ColorPropertyTheme | ColorProperty;
+        tdExpandedBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        loadingRowBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        loadingRowMinHeight: SizePropertyTheme | HeightProperty<TLength>;
+    };
+    input: {
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        width: SizePropertyTheme | WidthProperty<TLength>;
+        borderWidth: number | BorderWidthProperty<TLength>;
+        borderColor: ColorPropertyTheme | BorderColorProperty;
+        borderRadius: RadiusPropertyTheme | string;
+        borderStyle: BorderBottomStyleProperty;
+        borderFocusColor: ColorPropertyTheme | BorderColorProperty;
+        borderFocusWidth: number | BorderWidthProperty<TLength>;
+        paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        xsPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        xsPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        xsFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        smPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        smPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        smFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        mdPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        mdPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        mdFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        lgPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        lgPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        lgFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        xlPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        xlPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        xlFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        appearance: AppearanceProperty;
+        outline: OutlineProperty<TLength>;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        placeholderColor: ColorPropertyTheme | ColorProperty;
+    };
+    checkbox: {
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        color: ColorPropertyTheme | BackgroundColorProperty;
+    };
+    label: {
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        fontCase: TextTransformProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+        requiredColor: ColorPropertyTheme | ColorProperty;
+        requiredWeight: FontWeightPropertyTheme | FontWeightProperty;
+        requiredMarginLeft: SpacingPropertyTheme | MarginProperty<TLength>;
+        helperIconColor: ColorPropertyTheme | ColorProperty;
+        helperMarginLeft: SpacingPropertyTheme | MarginProperty<TLength>;
+    };
+    link: {
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        textDecoration: TextDecorationProperty<TLength>;
+        fontWeightHover: FontWeightPropertyTheme | FontWeightProperty;
+        fontColorHover: ColorPropertyTheme | ColorProperty;
+        textDecorationHover: TextDecorationProperty<TLength>;
+    };
+    tooltip: {
+        [k in ColorKeys]: {
+            bgColor: ColorPropertyTheme | BackgroundColorProperty;
+            color: ColorPropertyTheme | ColorProperty;
+            linkColor: ColorPropertyTheme | ColorProperty;
+            borderColor: ColorPropertyTheme | BackgroundColorProperty;
+            borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+            borderStyle: BorderStyleProperty;
+            borderWidth: BorderWidthProperty<TLength>;
+            boxShadow: ShadowPropertyTheme | BoxShadowProperty;
+            padding: SpacingPropertyTheme | PaddingProperty<TLength>;
+            fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        };
+    };
+    accordion: {
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        activeFontColor: ColorPropertyTheme | ColorProperty;
+        hoverFontColor: ColorPropertyTheme | ColorProperty;
+        fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        togglerIconWidth: WidthProperty<TLength> | IconSizePropertyTheme;
+        togglerIconHeight: WidthProperty<TLength> | IconSizePropertyTheme;
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        borderColor: ColorPropertyTheme | BorderColorProperty;
+        borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+        borderStyle: BorderStyleProperty;
+        borderWidth: BorderWidthProperty<TLength>;
+        paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    };
+    tab: {
+        activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        activeBorderColor: ColorPropertyTheme | BorderColorProperty;
+        activeBorderStyle: BorderStyleProperty;
+        activeBorderWidth: BorderWidthProperty<TLength>;
+        activeFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        activeFontColor: ColorPropertyTheme | ColorProperty;
+        activeFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        borderColor: ColorPropertyTheme | BorderColorProperty;
+        borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+        borderStyle: BorderStyleProperty;
+        borderWidth: BorderWidthProperty<TLength>;
+        cursor: CursorProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        hoverBorderColor: ColorPropertyTheme | BorderColorProperty;
+        hoverBorderStyle: BorderStyleProperty;
+        hoverBorderWidth: BorderWidthProperty<TLength>;
+        hoverFontColor: ColorPropertyTheme | ColorProperty;
+        marginBefore: SpacingPropertyTheme | MarginProperty<TLength>;
+        marginAfter: SpacingPropertyTheme | MarginProperty<TLength>;
+        paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    };
+    wizard: {
+        activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        activeBorderColor: ColorPropertyTheme | BorderColorProperty;
+        activeFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        activeFontColor: ColorPropertyTheme | ColorProperty;
+        activeFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        borderColor: ColorPropertyTheme | BorderColorProperty;
+        borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+        borderStyle: BorderStyleProperty;
+        borderWidth: BorderWidthProperty<TLength>;
+        cursor: CursorProperty;
+        disabledBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        disabledBorderColor: ColorPropertyTheme | BorderColorProperty;
+        disabledFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        disabledFontColor: ColorPropertyTheme | ColorProperty;
+        disabledFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        errorBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        errorBorderColor: ColorPropertyTheme | BorderColorProperty;
+        errorFontColor: ColorPropertyTheme | ColorProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        hoverBorderColor: ColorPropertyTheme | BorderColorProperty;
+        hoverBorderStyle: BorderStyleProperty;
+        hoverBorderWidth: BorderWidthProperty<TLength>;
+        hoverFontColor: ColorPropertyTheme | ColorProperty;
+        marginBefore: SpacingPropertyTheme | MarginProperty<TLength>;
+        marginAfter: SpacingPropertyTheme | MarginProperty<TLength>;
+        paddingRight: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingLeft: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingTop: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingBottom: SpacingPropertyTheme | PaddingProperty<TLength>;
+        stepsBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        stepsBorderColor: ColorPropertyTheme | BorderColorProperty;
+        stepsBorderStyle: BorderStyleProperty;
+        stepsBorderWidth: BorderWidthProperty<TLength>;
+        stepsPaddingTop: SpacingPropertyTheme | PaddingProperty<TLength>;
+        stepsPaddingBottom: SpacingPropertyTheme | PaddingProperty<TLength>;
+        stepsPaddingLeft: SpacingPropertyTheme | PaddingProperty<TLength>;
+        stepsPaddingRight: SpacingPropertyTheme | PaddingProperty<TLength>;
+        successBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        successBorderColor: ColorPropertyTheme | BorderColorProperty;
+        successFontColor: ColorPropertyTheme | ColorProperty;
+        warningBgColor: ColorPropertyTheme | BackgroundColorProperty;
+        warningBorderColor: ColorPropertyTheme | BorderColorProperty;
+        warningFontColor: ColorPropertyTheme | ColorProperty;
+    };
+    card: {
+        borderColor: ColorPropertyTheme | BorderColorProperty;
+        borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+        borderStyle: BorderStyleProperty;
+        borderWidth: BorderWidthProperty<TLength>;
+        shadow: ShadowPropertyTheme | BoxShadowProperty;
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        fontColor: ColorPropertyTheme | ColorProperty;
+        fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        fontCase: 'uppercase';
+        paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+        paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+        letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+        iconColor: ColorPropertyTheme | ColorProperty;
+        iconWidth: SizePropertyTheme | WidthProperty<TLength>;
+        iconHeight: SizePropertyTheme | HeightProperty<TLength>;
+        marginTop: SpacingPropertyTheme | MarginProperty<TLength>;
+        titleBorderBottomWidth: BorderWidthProperty<TLength>;
+    };
+    properties: {
+        fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+        paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    };
+    dashboard: {
+        [k in DashboardKeys]: {
+            bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        };
+    };
+    modal: {
+        bgColor: ColorPropertyTheme | BackgroundColorProperty;
+        maskColor: ColorPropertyTheme | BackgroundColorProperty;
+        maskOpacity: OpacityProperty;
+        zIndex: ZIndexProperty;
+        xsmallSize: SizePropertyTheme | HeightProperty<TLength>;
+        smallSize: SizePropertyTheme | HeightProperty<TLength>;
+        mediumSize: SizePropertyTheme | HeightProperty<TLength>;
+        largeSize: SizePropertyTheme | HeightProperty<TLength>;
+        xlargeSize: SizePropertyTheme | HeightProperty<TLength>;
+        boxShadow: ShadowPropertyTheme | BoxShadowProperty;
+        borderRadius: RadiusPropertyTheme | string;
+    };
+};
+export declare type Palette = AnonymousObject;
+export declare type TLength = string | 0;
+export declare type SizePropertyTheme = Globals | TLength | '-moz-max-content' | '-moz-min-content' | '-webkit-max-content' | 'auto' | 'intrinsic' | 'max-content' | 'min-content' | 'min-intrinsic' | 'none' | 'full' | 'screen' | string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 'px' | 'xs' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'screen-sm' | 'screen-md' | 'screen-lg' | 'screen-xl';
+export declare type ThemeProps = {
+    theme?: Partial<Theme>;
+};
+export declare type ColorPropertyTheme = keyof typeof ColorKeys;
+export declare type SpacingPropertyTheme = keyof typeof SpacingKeys;
+export declare type FontFamilyPropertyTheme = keyof typeof FontFamiliesKeys;
+export declare type FontSizePropertyTheme = keyof typeof FontSizeKeys;
+export declare type IconSizePropertyTheme = keyof typeof FontSizeKeys;
+export declare type FontWeightPropertyTheme = keyof typeof FontWeightKeys | number;
+export declare type LineHeightPropertyTheme = keyof typeof FontLineHeightKeys | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export declare type LetterSpacingPropertyTheme = keyof typeof FontSpacingKeys;
+export declare type RadiusPropertyTheme = keyof typeof RadiusKeys;
+export declare type ShadowPropertyTheme = keyof typeof ShadowKeys;
+export declare type ComponentStyle<P, T extends Theme = Theme> = (propsWithTheme: ThemedStyledProps<P, T>) => FlattenInterpolation<SytledThemeProps<T>>;

package/dist/styles/typography.d.ts

@@ -1,49 +1,49 @@
-import { FontKerningProperty, FontOpticalSizingProperty, FontSizeAdjustProperty, FontVariantCapsProperty, FontVariantPositionProperty, HyphensProperty, OverflowWrapProperty, TextAlignProperty, TextDecorationStyleProperty, TextJustifyProperty, TextTransformProperty, WhiteSpaceProperty } from 'csstype';
-import { TLength } from './typings';
-export declare const color: import("./typings").CssProperty<string>;
-export declare const font: import("./typings").CssProperty<string>;
-export declare const fontFamily: import("./typings").CssProperty<string>;
-export declare const fontFeatureSettings: import("./typings").CssProperty<string>;
-export declare const fontKerning: import("./typings").CssProperty<FontKerningProperty>;
-export declare const fontLanguageOverride: import("./typings").CssProperty<string>;
-export declare const fontOpticalSizing: import("./typings").CssProperty<FontOpticalSizingProperty>;
-export declare const fontSize: import("./typings").CssProperty<TLength>;
-export declare const fontSizeAdjust: import("./typings").CssProperty<FontSizeAdjustProperty>;
-export declare const fontStretch: import("./typings").CssProperty<string>;
-export declare const fontStyle: import("./typings").CssProperty<string>;
-export declare const fontSynthesis: import("./typings").CssProperty<string>;
-export declare const fontVariant: import("./typings").CssProperty<string>;
-export declare const fontVariantAlternates: import("./typings").CssProperty<string>;
-export declare const fontVariantCaps: import("./typings").CssProperty<FontVariantCapsProperty>;
-export declare const fontVariantEastAsian: import("./typings").CssProperty<string>;
-export declare const fontVariantLigatures: import("./typings").CssProperty<string>;
-export declare const fontVariantNumeric: import("./typings").CssProperty<string>;
-export declare const fontVariantPosition: import("./typings").CssProperty<FontVariantPositionProperty>;
-export declare const fontVariationSettings: import("./typings").CssProperty<string>;
-export declare const fontWeight: import("./typings").CssProperty<number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "black" | "normal" | "medium" | "hairline" | "thin" | "light" | "semibold" | "bold" | "extrabold" | "bolder" | "lighter">;
-export declare const hyphens: import("./typings").CssProperty<HyphensProperty>;
-export declare const letterSpacing: import("./typings").CssProperty<TLength>;
-export declare const lineHeight: import("./typings").CssProperty<string | number>;
-export declare const lineHeightStep: import("./typings").CssProperty<TLength>;
-export declare const overflowWrap: import("./typings").CssProperty<OverflowWrapProperty>;
-export declare const textAlign: import("./typings").CssProperty<TextAlignProperty>;
-export declare const textDecoration: import("./typings").CssProperty<TLength>;
-export declare const textDecorationColor: import("./typings").CssProperty<string>;
-export declare const textDecorationLine: import("./typings").CssProperty<string>;
-export declare const textDecorationStyle: import("./typings").CssProperty<TextDecorationStyleProperty>;
-export declare const textDecorationThickness: import("./typings").CssProperty<TLength>;
-export declare const textEmphasis: import("./typings").CssProperty<string>;
-export declare const textEmphasisColor: import("./typings").CssProperty<string>;
-export declare const textEmphasisPosition: import("./typings").CssProperty<string>;
-export declare const textEmphasisStyle: import("./typings").CssProperty<string>;
-export declare const textIdent: import("./typings").CssProperty<TLength>;
-export declare const textJustify: import("./typings").CssProperty<TextJustifyProperty>;
-export declare const textOpacity: import("./typings").CssProperty<string | number>;
-export declare const textOverflow: import("./typings").CssProperty<string>;
-export declare const textTransform: import("./typings").CssProperty<TextTransformProperty>;
-export declare const textShadow: import("./typings").CssProperty<string>;
-export declare const textUnderlineOffset: import("./typings").CssProperty<string>;
-export declare const textUnderlinePosition: import("./typings").CssProperty<string>;
-export declare const whiteSpace: import("./typings").CssProperty<WhiteSpaceProperty>;
-export declare const wordBreak: import("./typings").CssProperty<"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "break-word" | "break-all" | "keep-all" | "words" | "all" | "truncate">;
-export declare const wordSpacing: import("./typings").CssProperty<TLength>;
+import { FontKerningProperty, FontOpticalSizingProperty, FontSizeAdjustProperty, FontSizeProperty, FontVariantCapsProperty, FontVariantPositionProperty, HyphensProperty, LetterSpacingProperty, LineHeightStepProperty, OpacityProperty, OverflowWrapProperty, TextAlignProperty, TextDecorationProperty, TextDecorationStyleProperty, TextDecorationThicknessProperty, TextIndentProperty, TextJustifyProperty, TextTransformProperty, WhiteSpaceProperty, WordBreakProperty, WordSpacingProperty } from 'csstype';
+import { TLength } from './typings';
+export declare const color: import("./typings").CssProperty<string>;
+export declare const font: import("./typings").CssProperty<string>;
+export declare const fontFamily: import("./typings").CssProperty<string>;
+export declare const fontFeatureSettings: import("./typings").CssProperty<string>;
+export declare const fontKerning: import("./typings").CssProperty<FontKerningProperty>;
+export declare const fontLanguageOverride: import("./typings").CssProperty<string>;
+export declare const fontOpticalSizing: import("./typings").CssProperty<FontOpticalSizingProperty>;
+export declare const fontSize: import("./typings").CssProperty<FontSizeProperty<TLength>>;
+export declare const fontSizeAdjust: import("./typings").CssProperty<FontSizeAdjustProperty>;
+export declare const fontStretch: import("./typings").CssProperty<string>;
+export declare const fontStyle: import("./typings").CssProperty<string>;
+export declare const fontSynthesis: import("./typings").CssProperty<string>;
+export declare const fontVariant: import("./typings").CssProperty<string>;
+export declare const fontVariantAlternates: import("./typings").CssProperty<string>;
+export declare const fontVariantCaps: import("./typings").CssProperty<FontVariantCapsProperty>;
+export declare const fontVariantEastAsian: import("./typings").CssProperty<string>;
+export declare const fontVariantLigatures: import("./typings").CssProperty<string>;
+export declare const fontVariantNumeric: import("./typings").CssProperty<string>;
+export declare const fontVariantPosition: import("./typings").CssProperty<FontVariantPositionProperty>;
+export declare const fontVariationSettings: import("./typings").CssProperty<string>;
+export declare const fontWeight: import("./typings").CssProperty<number | "bold" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "lighter" | "light" | "black" | "medium" | "thin" | "hairline" | "normal" | "semibold" | "extrabold" | "bolder">;
+export declare const hyphens: import("./typings").CssProperty<HyphensProperty>;
+export declare const letterSpacing: import("./typings").CssProperty<LetterSpacingProperty<TLength>>;
+export declare const lineHeight: import("./typings").CssProperty<string | number>;
+export declare const lineHeightStep: import("./typings").CssProperty<LineHeightStepProperty<TLength>>;
+export declare const overflowWrap: import("./typings").CssProperty<OverflowWrapProperty>;
+export declare const textAlign: import("./typings").CssProperty<TextAlignProperty>;
+export declare const textDecoration: import("./typings").CssProperty<TextDecorationProperty<TLength>>;
+export declare const textDecorationColor: import("./typings").CssProperty<string>;
+export declare const textDecorationLine: import("./typings").CssProperty<string>;
+export declare const textDecorationStyle: import("./typings").CssProperty<TextDecorationStyleProperty>;
+export declare const textDecorationThickness: import("./typings").CssProperty<TextDecorationThicknessProperty<TLength>>;
+export declare const textEmphasis: import("./typings").CssProperty<string>;
+export declare const textEmphasisColor: import("./typings").CssProperty<string>;
+export declare const textEmphasisPosition: import("./typings").CssProperty<string>;
+export declare const textEmphasisStyle: import("./typings").CssProperty<string>;
+export declare const textIdent: import("./typings").CssProperty<TextIndentProperty<TLength>>;
+export declare const textJustify: import("./typings").CssProperty<TextJustifyProperty>;
+export declare const textOpacity: import("./typings").CssProperty<OpacityProperty>;
+export declare const textOverflow: import("./typings").CssProperty<string>;
+export declare const textTransform: import("./typings").CssProperty<TextTransformProperty>;
+export declare const textShadow: import("./typings").CssProperty<string>;
+export declare const textUnderlineOffset: import("./typings").CssProperty<string>;
+export declare const textUnderlinePosition: import("./typings").CssProperty<string>;
+export declare const whiteSpace: import("./typings").CssProperty<WhiteSpaceProperty>;
+export declare const wordBreak: import("./typings").CssProperty<"all" | WordBreakProperty | "words" | "truncate">;
+export declare const wordSpacing: import("./typings").CssProperty<WordSpacingProperty<TLength>>;