Properties
Forms

Forms

Label

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


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.


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


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 ·

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Properties

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