# Getting Started with @zerda_lab/zedralab-ui-kit

### `npm install @zerda_lab/zedralab-ui-kit` or `yarn add @zerda_lab/zedralab-ui-kit`

## Components

### `Dropdown`

- `id:` string;
- `handleSelect`: method;
- `theme:` "light" | "dark";
- `placeholder?:` string;
- `title`: string;
- `options`: Array<number | number>;
- `devalultValues?:` Array<number | number>;;
- `errorText?:` string;
- `showCleanButton?:` boolean;

### `Button`

- `id:` string;
- `type?:` "outlined" | "filled";
- `theme:` "light" | "dark";
- `label?:` string;
- `disabled?` boolean;
- `handleClick`: method;

### `StatusLabel`

- `id:` string;
- `type?:` "primary" | "secondary" | "tertiary" | "quaternary";
- `status:` "phase out" | "concept" | "obsolete" | "standart" | "tender ready";
- `label?:` string;
- `theme?:` "light" | "dark";
- `size?:` "standart" | "min";

### `AddButton`

- `id:` string;
- `handleClick:` method;
- `disabled?:` boolean;
- `theme?:` "light" | "dark";

### `DeleteIcon`

- `id:` string;
- `handleClick:` method;
- `disabled?:` boolean;
- `theme?:` "light" | "dark";

### `CloseIcon`

- `id:` string;
- `handleClick:` method;
- `disabled?:` boolean;
- `theme?:` "light" | "dark";

### `BackIcon`

- `id:` string;
- `handleClick:` method;
- `disabled?:` boolean;
- `theme?:` "light" | "dark";

### `ShowMore`

- `id:` string;
- `handleClick:` method;
- `isActive:` boolean;
- `theme?:` "light" | "dark";

### `ModeSwicher`

- `id:` string;
- `handleClick:` method;
- `theme?:` "light" | "dark";

### `Filter`

- `id:` string;
- `handleSelect:` method;
- `theme?:` "light" | "dark";
- `placeholder?:` string;
- `options:` Array<{ label: string; value: string }>;
- `devalultValues?:`Array<string>;
- `errorText?:` string;

### `TextInput`

- `id:` string;
- `handleChange:` method;
- `theme?:` "light" | "dark";
- `placeholder?:` string;
- `title:` string;
- `devalultValue?:` string;
- `errorText?:` string;
- `showCleanButton?:` boolean;