This components library utilizing Typescript to define the types of the configurations of the components.
Animation Speed Type
Typescript
type ANIMATE_SPEED = undefined | false | "slower" | "slow" | "normal" | "fast" | "faster";
Rounded Type
Typescript
type ROUNDED = "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
Shadow Types
Typescript
type SHADOW = "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none" | undefined;
Accordion Size
Typescript
type ACCORDION_SIZE = "compact" | "default" | "large"
Breadcrumb Data Type
Typescript
type BREADCRUMB_DATA = Array<{ text: string; url?: string }>;
Button Size Type
Typescript
type BUTTON_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "0";
Card Image Type
Typescript
type CARD_IMAGE_TYPE = {
class?: string,
src ?: string,
alt ?: string,
[key: string]: unknown
}
Dropdown Item Types
Typescript
// Dropdown item type
type?: "link" | "divider" | "header";
Dropdown Preload Type
Typescript
type PRELOAD = false | "off" | "tap" | "hover";
Notification Position
Typescript
type NOTIFICATION_POSITION = "top-end" | "top-center" | "top-start" | "bottom-end" | "bottom-center" | "bottom-start"
Placement
Typescript
type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"
Notification Types
Typescript
// Notification configuration type
type NOTIFY_CONFIG = {
removeAfter?: number;
removeOnClick?: boolean;
rounded: ROUNDED;
variant: "card" | "cardLight" | "borderTop" | "borderBottom" | "borderStart";
};
// Types of Notification
type NOTIFICATION_TYPE = "error" | "info" | "success" | "warning";
Table Data Type
Type definition
type TABLE_CONFIG = {
animationSpeed: ANIMATE_SPEED;
border: "x" | "y" | "both" | "none";
borderColor: string;
hover: boolean | string;
space: "compact" | "default" | "comfortable" | string;
stripe: boolean | string;
trClass: string;
}
Input Variant Type
Typescript
type INPUT_VARIANT = "bordered" | "filled" | "flat";
Input Size Type
Typescript
type INPUT_SIZE = "sm" | "md" | "lg" | "xl";
Input-Type Type
Typescript
type INPUT_TYPE = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
Select Data Type
Type definition
type SELECT_DATA = Array<{ disabled?: boolean, selected?: boolean, text: string, value?: any } | string>;