npm package: @mojito-inc/core-ui
Description: Mojito UI component based on MUI
Author: mojito
Latest version: 1.0.4-beta.0


<br />

<h1 align="center">☁️ Mojito Modules -  CoreUI</h1>

<br /><br />


<p align="center">
  👨‍💻 React components for the Mojito Platform, Reference App and third-party projects, including Mojito's CoreUI 
<br />


<p align="center">
   Version: 1.0.0
</p>

<br />


You can install this project with one of these commands:


    npm install --save @mojito-inc/core-ui



    yarn add @mojito-inc/core-ui



<br />
    
Once the package is installed, you can import the library using import;



```
  import { CoreUIThemeProvider } from "@mojitoinc/core-ui";
  import { createTheme } from "@mui/material/styles";

  const theme = createTheme({
    palette: {
      primary: {
        main: "#FDCC35",
      },
      secondary: {
        main: "#356045",
      },
      background: {
        default: "#000",
      },
      text: {
        primary: "#000",
      },
      grey: {
        100: "#868b93",
      },
      divider: "#fff",
    },
  });

  <CoreUIThemeProvider theme={ theme }>
      <Component {...pageProps} />
  </CoreUIThemeProvider>
```

<br />

### Accordion

```
  import { Accordion } from "@mojitoinc/core-ui";

  <Accordion
    open=<open>
    label=<label>
    children=<children>
    labelStyle=<labelStyle>
    collapseIcon=<collapseIcon>
    expandIcon=<expandIcon>
  />
```

|Param    |type    | Required   | Default | Description
|:--- | --- | :---:| :---:| :---:|
|open| boolean|| false|
|label| string |✅|
|children| JSX.Element |✅|
|labelStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/)| | |
|collapseIcon| JSX.Element | | [RemoveIcon](https://mui.com/material-ui/material-icons/?query=remove&selected=Remove)  | 
|expandIcon| JSX.Element| | [AddIcon](https://mui.com/material-ui/material-icons/?query=add&selected=Add) | 

### Breadcrumbs

```
import { Breadcrumbs, BreadcrumbItem } from "@mojitoinc/core-ui";

<Breadcrumbs 
    list=<BreadcrumbItem[]> 
    selectedValue=<selectedValue>
    separator=<separator>
    separatorStyle=<separatorStyle>
    itemStyle=<itemStyle>
    itemHighlightedStyle=<itemHighlightedStyle>
    />

```
|Param    |type    | Required   | Default| Description
|:--- | --- | :---:| :---:| :---:|
|list| object|✅| [] |[BreadcrumbItem](#BreadcrumbItem)|
|selectedValue| string |✅|
|separator| JSX.Element | |[NavigateNextIcon](https://mui.com/material-ui/material-icons/?query=NavigateNext&selected=NavigateNext)| |
|separatorStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/)| | { fontSize: 13 }| 
|itemStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/) | | { fontWeight: 500, fontSize: '12px' }| 
|itemHighlightedStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/) || { fontWeight: 700, fontSize: '12px', color: '#000' }| 

#### interface
##### BreadcrumbItem
|Param    |type    | Required   | Description
|:--- | --- | :---:| :---:|
|label| string|✅| | 
|value | string |✅|  |


### TextInput

```
  import { TextInput } from "@mojitoinc/core-ui";

  <TextInput
    placeholder=<placeholder>
    value=<value>
    InputPropsStyle=<InputPropsStyle>
    sx=<sx>
    error=<error>
    type=<type>
    disabled=<disabled>
    autoFocus=<autoFocus>
    onChange=<onChange>
    />
```

|Param    |type    | Required   | Default| Description
|:--- | --- | :---:| :---:| :---:|
|placeholder| string|| 
|value| string | |
|InputPropsStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/) | | |
|sx| [SxProps](https://mui.com/system/getting-started/the-sx-prop/)| | |
|error| string | |
|type| string | | text
|disabled| boolean| | false
|autoFocus| boolean| | false
|inputRef| React.Ref<HTMLElement> | |
|onChange| event(event: React.ChangeEvent<HTMLInputElement>)|

### BaseModal

```
  import { BaseModal } from "@mojitoinc/core-ui";

  <BaseModal
    title=<title>
    content=<content>
    children<children>
    titleStyle=<titleStyle>
    contentStyle=<contentStyle>
    />
```

|Param    |type    | Required   | Default| Description
|:--- | --- | :---:| :---:| :---:|
|title| string|| 
|content| string | |
|children| JSX.Element | |
|titleStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/) | | |
|contentStyle| [SxProps](https://mui.com/system/getting-started/the-sx-prop/)| | |

### TabSwitcher

```
  import { TabSwitcher, TabPanel } from "@mojitoinc/core-ui";

  <TabSwitcher 
    value=<value> 
    children=<children>
  />

  <TabPanel 
    id=<id>
    children=<children>
  />

  <TabSwitcher value='one'>
    <>
      <TabPanel id='one'>
        <p>one</p>
      </TabPanel>
      <TabPanel id='two'>
        <p>two</p>
      </TabPanel>
    </>
  </TabSwitcher>
```
##### TabSwitcher
|Param    |type    | Required   | Default| Description
|:--- | --- | :---:| :---:| :---:|
|value| string|✅| 
|children| JSX.Element |✅ |

##### TabPanel
|Param    |type    | Required   | Default| Description
|:--- | --- | :---:| :---:| :---:|
|id| string|✅| 
|children| JSX.Element |✅ |




</br>