@brizy/ui
Version:
React elements in Brizy style
49 lines (48 loc) • 2.4 kB
TypeScript
import { CSSProperties } from "react";
import { ApplyProperties, Color } from "../types";
export type Size = "xsmall" | "small" | "middle" | number | {
custom: [number, number] | [number, number, number] | [number, number, number, number];
};
export type Device = "desktop" | "tablet" | "mobile";
type PropertyDesktop = {
"--brz-ui-card-custom-size-desktop-top"?: string;
"--brz-ui-card-custom-size-desktop-right"?: string;
"--brz-ui-card-custom-size-desktop-bottom"?: string;
"--brz-ui-card-custom-size-desktop-left"?: string;
};
type PropertyTablet = {
"--brz-ui-card-custom-size-tablet-top"?: string;
"--brz-ui-card-custom-size-tablet-right"?: string;
"--brz-ui-card-custom-size-tablet-bottom"?: string;
"--brz-ui-card-custom-size-tablet-left"?: string;
};
type PropertyMobile = {
"--brz-ui-card-custom-size-mobile-top"?: string;
"--brz-ui-card-custom-size-mobile-right"?: string;
"--brz-ui-card-custom-size-mobile-bottom"?: string;
"--brz-ui-card-custom-size-mobile-left"?: string;
};
interface CardColorProperties {
"--brz-ui-card-background": string;
"--brz-ui-card-background-hover": string;
}
export type CustomSize = PropertyDesktop & PropertyTablet & PropertyMobile;
export declare const getCustomSize: (data: Size | [Size, Size] | [Size, Size, Size]) => CustomSize & CSSProperties;
export declare const getSizeResponsive: (data: Size | [Size, Size] | [Size, Size, Size]) => string[];
export declare const getHeightStyle: (height?: string) => (CSSProperties & {
"--brz-ui-card--height": string;
}) | Record<string, unknown>;
export declare const getWidthStyle: (width?: string) => ApplyProperties<{
"--brz-ui-card--width": string;
}> | undefined;
export declare const getBorderStyle: (borderWidth?: string, borderRadius?: string, borderStyle?: "none" | "solid" | "dashed" | "dotted", borderColor?: Color) => ApplyProperties<{
"--brz-ui-card-border-width"?: string;
"--brz-ui-card-border-radius"?: string;
"--brz-ui-card-border-style"?: "none" | "solid" | "dashed" | "dotted";
"--brz-ui-card-border-color"?: string;
}> | undefined;
export declare const getColor: (color?: Color, hoverColor?: Color) => ApplyProperties<Partial<CardColorProperties>> | undefined;
export declare const getZIndexStyle: (zIndex?: number) => ApplyProperties<{
"--brz-ui-card--z-index": number;
}> | undefined;
export {};