Types

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"

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
}

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>;