fictoan-react/dist/components/Element/constants.d.ts

A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.

import { ElementType, FormEvent, HTMLProps } from 'react';

export declare const DefaultColours: readonly ["red", "salmon", "orange", "amber", "yellow", "spring", "pistachio", "green", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "pink", "crimson", "brick", "sienna", "brown", "slate", "grey"];
export declare const BasicColours: readonly ["transparent", "black", "white"];
export declare const FictoanColours: readonly ["red", "salmon", "orange", "amber", "yellow", "spring", "pistachio", "green", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "pink", "crimson", "brick", "sienna", "brown", "slate", "grey", "transparent", "black", "white"];
type DefaultColoursType = typeof DefaultColours[number];
type BasicColoursType = typeof BasicColours[number];
type Luminance = "dark" | "light";
type ShadeLevel = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
type OpacityLevel = 0 | 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
type CustomColours = "hue" | "tint" | "shade" | "analogue" | "accent";
export type EmphasisTypes = "primary" | "secondary" | "tertiary" | "custom";
export type SpacingTypes = "none" | "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
export type ShadowTypes = "none" | "mild" | "hard" | "soft";
export type ShapeTypes = "rounded" | "curved";
export type OpacityTypes = "0" | "5" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90";
export type WeightTypes = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
export type ColourPropTypes = `${DefaultColoursType}-${Luminance}${ShadeLevel}` | `${DefaultColoursType}-${Luminance}${ShadeLevel}-opacity${OpacityLevel}` | `${DefaultColoursType}-opacity${OpacityLevel}` | `${BasicColoursType}-opacity${OpacityLevel}` | DefaultColoursType | BasicColoursType | CustomColours | "";
export interface CommonProps {
    bgColor?: ColourPropTypes;
    bgColour?: ColourPropTypes;
    textColor?: ColourPropTypes;
    textColour?: ColourPropTypes;
    borderColor?: ColourPropTypes;
    borderColour?: ColourPropTypes;
    fillColor?: ColourPropTypes;
    fillColour?: ColourPropTypes;
    strokeColor?: ColourPropTypes;
    strokeColour?: ColourPropTypes;
    shadow?: ShadowTypes;
    shape?: ShapeTypes;
    opacity?: OpacityTypes;
    layoutAsFlexbox?: boolean;
    layoutAsGrid?: boolean;
    columns?: string;
    gap?: string;
    margin?: SpacingTypes;
    horizontalMargin?: SpacingTypes;
    verticalMargin?: SpacingTypes;
    marginTop?: SpacingTypes;
    marginRight?: SpacingTypes;
    marginBottom?: SpacingTypes;
    marginLeft?: SpacingTypes;
    padding?: SpacingTypes;
    horizontalPadding?: SpacingTypes;
    verticalPadding?: SpacingTypes;
    paddingTop?: SpacingTypes;
    paddingRight?: SpacingTypes;
    paddingBottom?: SpacingTypes;
    paddingLeft?: SpacingTypes;
    horizontallyCentreThis?: boolean;
    horizontallyCenterThis?: boolean;
    verticallyCentreItems?: boolean;
    verticallyCenterItems?: boolean;
    pushItemsToEnds?: boolean;
    isFullWidth?: boolean;
    isFullHeight?: boolean;
    hideOnMobile?: boolean;
    showOnlyOnMobile?: boolean;
    hideOnTabletPortrait?: boolean;
    showOnlyOnTabletPortrait?: boolean;
    hideOnTabletLandscape?: boolean;
    showOnlyOnTabletLandscape?: boolean;
    hideOnDesktop?: boolean;
    showOnlyOnDesktop?: boolean;
    weight?: WeightTypes;
    classNames?: string[];
}
export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
}
export type FlexibleEventHandler<T, V = any> = ((event: T) => void) | ((value: V) => void);
export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
    as?: ElementType;
    className?: string;
    ariaLabel?: string;
    onChange?: FlexibleEventHandler<FormEvent<T>, any>;
}
export {};
//# sourceMappingURL=constants.d.ts.map