Forms

Label

This component is included with all our components. Depending on how we want to represented our form inputs, it maybe hidden.

Input Label

export interface Label extends FontStyle {}
 
export type FontStyle = {
  color?: CSSProperties["color"];
  fontFamily?: CSSProperties["fontFamily"];
  fontSize?: CSSProperties["fontSize"];
  fontWeight?: CSSProperties["fontWeight"];
  margin?: CSSProperties["margin"];
};

Select

Select properties extend the Input properties.

Label

Select...

Properties

export interface Select extends Input {
  indicatorColor?: CSSProperties["color"];
}
 
export type InputStyle = {
  padding?: CSSProperties["padding"];
  fontSize?: CSSProperties["fontSize"];
  borderRadius?: CSSProperties["borderRadius"];
  fontWeight?: CSSProperties["fontWeight"];
  color?: CSSProperties["color"];
};
 
export type InputState = {
  border?: CSSProperties["border"];
  boxShadow?: CSSProperties["boxShadow"];
  background?: CSSProperties["background"];
};
 
export interface Input extends InputStyle, InputState {
  "&:focus"?: InputState;
  "&:hover"?: InputState;
  "&:focus:hover"?: InputState;
}

Input

Label

Properties

export type InputStyle = {
  padding?: CSSProperties["padding"];
  fontSize?: CSSProperties["fontSize"];
  borderRadius?: CSSProperties["borderRadius"];
  fontWeight?: CSSProperties["fontWeight"];
  color?: CSSProperties["color"];
};
 
export type InputState = {
  border?: CSSProperties["border"];
  boxShadow?: CSSProperties["boxShadow"];
  background?: CSSProperties["background"];
};
 
export interface Input extends InputStyle, InputState {
  "&:focus"?: InputState;
  "&:hover"?: InputState;
  "&:focus:hover"?: InputState;
}

DateTime

Date Picker ·

Properties

export interface DateTime {
  input?: DateTimeInput;
  calendar?: Calendar;
}
 
export interface DateTimeInput extends Input {}
 
export interface Calendar {
  title?: FontStyle;
  selected?: CalendarState;
}
 
export interface CalendarState {
  color?: CSSProperties["color"];
  background?: CSSProperties["background"];
}