You can install this project with one of these commands:

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



yarn add @mojito-inc/core-ui

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>

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| | | |collapseIcon| JSX.Element | | RemoveIcon | |expandIcon| JSX.Element| | AddIcon |

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| |selectedValue| string |✅| |separator| JSX.Element | |NavigateNextIcon| | |separatorStyle| SxProps| | { fontSize: 13 }| |itemStyle| SxProps | | { fontWeight: 500, fontSize: '12px' }| |itemHighlightedStyle| SxProps || { 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 | | | |sx| SxProps| | | |error| string | | |type| string | | text |disabled| boolean| | false |autoFocus| boolean| | false |inputRef| React.Ref | | |onChange| event(event: React.ChangeEvent)|

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 | | | |contentStyle| SxProps| | |

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