open-index/open-npm huggingface dataset:
npm package: @kata-kit/avatar
Description: Avatar component for Wicara.
Author: Kata.ai
Latest version: 0.7.3
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @wicara/avatar

> Avatar component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/avatar
# npm
npm install @kata-kit/avatar
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Avatar } from '@kata-kit/avatar';

const Component = () => <Avatar src="" />;
```

See more usage in the _JSX_ panel

## Props

| Property  | Type                  | Required | Default     |
| --------- | --------------------- | -------- | ----------- |
| src       | `any`                 | **Yes**  | -           |
| size      | `number`              | -        | `24`        |
| className | `string`              | -        | `undefined` |
| style     | `React.CSSProperties` | -        | `undefined` |
npm package: @kata-kit/badge
Description: Badge component for Wicara.
Author: Kata.ai
Latest version: 0.7.3
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @wicara/badge

> Badge component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/badge
# npm
npm install @kata-kit/badge
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Badge } from '@kata-kit/badge';

const Component = () => <Badge color="default" message="text" />;
```

See more usage in the _JSX_ panel

## Props

| Property  | Type                                                             | Required | Default     |
| --------- | ---------------------------------------------------------------- | -------- | ----------- |
| color     | `'primary'`, `'secondary'`, `'success'`, `'warning'`, `'danger'` | -        | -           |
| className | `string`                                                         | -        | `undefined` |
| style     | `React.CSSProperties`                                            | -        | `undefined` |
npm package: @kata-kit/banner
Description: Banner component for Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @wicara/banner

> Banner component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/banner
# npm
npm install @kata-kit/banner
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Banner } from '@kata-kit/banner';

const Component = () => (
  <Banner state="success" message="An alert! - You've succesfully read it." />
);
```

See more usage in the _JSX_ panel

## Props

| Property  | Type                                          | Required | Default     |
| --------- | --------------------------------------------- | -------- | ----------- |
| color     | `'error'`, `'success'`, `'warning'`, `'info'` | **Yes**  | -           |
| message   | `any`                                         | **Yes**  | -           |
| className | `string`                                      | -        | `undefined` |
| onClose   | `(e: any) => void`                            | -        | `undefined` |
npm package: @kata-kit/button
Description: Button component for Wicara.
Author: Kata.ai
Latest version: 0.7.4
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @wicara/button

> Button component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/button
# npm
npm install @kata-kit/button
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Button } from '@kata-kit/button';

const Component = () => <Button>Push Me</Button>;
```
npm package: @kata-kit/card
Description: Card component for Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/card

> Card component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/card
# npm
npm install @kata-kit/card
```

## Usage

To use this component within your React app, import as follows:

```javascript
import { CardGrid, Card } from '@kata-kit/card';

const Component = () => (
  <React.Fragment>
    <Card title="First Card">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </Card>
    <Card title="Second Card">
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </Card>
    <Card
      title="Card With Action"
      action={
        <Button color="secondary" isIcon>
          <i className="icon-more" />
        </Button>
      }
    >
      It has survived not only five centuries, but also the leap into electronic
      typesetting, remaining essentially unchanged.
    </Card>
  </React.Fragment>
);
```
npm package: @kata-kit/common
Description: Common components, toolkits, and methods for Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/common

> Common components, toolkits, and methods for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/common
# npm
npm install @kata-kit/common
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { EmptyMessage } from '@kata-kit/common';
```

## Components

### `FocusTrap`

```jsx
import { FocusTrap } from '@kata-kit/common';
```
npm package: @kata-kit/dashboard
Description: Dashboard component for Wicara.
Author: Kata.ai
Latest version: 0.7.5
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/dashboard

> Dashboard component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/dashboard
# npm
npm install @kata-kit/dashboard
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Dashboard } from '@kata-kit/dashboard';

const Component = () => (
  <Dashboard
    isStarter
    title="Wicara Demo"
    headerContent={
      <p>
        This project is intended to test the look and feel of the kata-kit
        component, as well as a development environment.
      </p>
    }
  >
    ...
  </Dashboard>
);
```

### Dashboard Cards

You can also render cards on a fluid grid inside a dashboard.

```jsx
import { Dashboard } from '@kata-kit/dashboard';
import { Card } from '@kata-kit/card';

const Component = () => (
  <DashboardCards>
    <Card asButton>
      <CardButton label={'Create'} icon="add" />
    </Card>
    <Card
      title="Second Card"
      avatarComponent={
        <Avatar src="https://picsum.photos/350/150/?image=821" />
      }
      action={
        <Button color="secondary" isIcon>
          <i className="icon-more" />
        </Button>
      }
    >
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </Card>
    <Card title="Third Card">
      It has survived not only five centuries, but also the leap into electronic
      typesetting, remaining essentially unchanged.
    </Card>
  </DashboardCards>
);
```
npm package: @kata-kit/drawer
Description: Drawer component for Wicara.
Author: Kata.ai
Latest version: 0.7.7
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/drawer

> Drawer component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/drawer
# npm
npm install @kata-kit/drawer
```

## Usage

To use this component within your React app, import as follows:

```jsx
import {
  Drawer,
  DrawerHeader,
  DrawerBody,
  DrawerFooter
} from '@kata-kit/drawer';

const Component = () => (
  <Drawer isOpen={this.stateisOpen} onClose={() => this.setState({ isOpen: false })}>
    <DrawerHeader title="Drawer" />
    <DrawerBody>
      <p>Drawer Body</p>
    </DrawerBody>
    <DrawerFooter>
      Drawer Footer
    </DrawerFooter>
  </Drawer>
  <button type="button" onClick={() => this.setState({ isOpen: true })}>
    Open drawer
  </button>
);
```
npm package: @kata-kit/dropdown
Description: Dropdown component for Wicara.
Author: Kata.ai
Latest version: 0.7.4
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/dropdown

> Dropdown component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/dropdown
# npm
npm install @kata-kit/dropdown
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { DropdownSelector, DropdownItem } from '@kata-kit/dropdown';

const Component = ({ onSelect, value }) => (
  <DropdownSelector onSelect={onSelect} value={value}>
    <DropdownItem>Hehe</DropdownItem>
    <DropdownItem>Hoho</DropdownItem>
  </DropdownSelector>
);
```
npm package: @kata-kit/form
Description: Wicara form components.
Author: Kata.ai
Latest version: 0.7.3
Deprecated: Please use Wicara components instead: https://wicara-git-legacy-08.kata-ai.now.sh/

# @kata-kit/form

> Wicara form components.

## Install

```sh
# yarn
yarn add @kata-kit/form
# npm
npm install @kata-kit/form
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { InputText } from '@kata-kit/form';

const Component = ({ children }) => (
  <InputText name="username" placeholder="Username" />
);
```
npm package: @kata-kit/layout
Description: Layout components for Wicara.
Author: Kata.ai
Latest version: 0.7.5
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/layout

> Layout components for Wicara.

## Install

`@kata-kit/layout` requires `react-router`. To install, use:

```sh
# yarn
yarn add @kata-kit/layout react-router-dom
# npm
npm install @kata-kit/layout react-router-dom
```

## Usage

To use this component within your React app, import as follows:

```jsx
import {
  Wrapper,
  SidebarAndContent,
  Content,
  Sidebar,
  SidebarMain,
  SidebarMainMenu,
  SidebarSub,
  SidebarSubMenu
} from '@kata-kit/layout';

const Component = ({ children, isSidebarCollapsed }) => (
  <Wrapper>
    <SidebarAndContent>
      <Sidebar collapsed={isSidebarCollapsed}>
        <SidebarMain logo={Logo}>
          <SidebarMainMenu asNavLink exact to="/" icon="bot">
            Demo
          </SidebarMainMenu>
          <SidebarMainMenu asNavLink to="/docs" icon="docs">
            Docs
          </SidebarMainMenu>
          <SidebarMainMenu asNavLink to="/components" icon="method">
            Components
          </SidebarMainMenu>
        </SidebarMain>
        <SidebarSub titleElement={<SidebarSubTitle>Docs</SidebarSubTitle>}>
          <SidebarSubMenu asNavLink exact to="/docs">
            Index
          </SidebarSubMenu>
          <SidebarSubMenu asNavLink exact to="/docs/page">
            Page
          </SidebarSubMenu>
        </SidebarSub>
      </Sidebar>
      <Content>{children}</Content>
    </SidebarAndContent>
  </Wrapper>
);
```
npm package: @kata-kit/loading
Description: Loading component for Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/loading

> Loading component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/loading
# npm
npm install @kata-kit/loading
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Robot } from '@kata-kit/loading';

const Component = () => <Robot />;
```
npm package: @kata-kit/modal
Description: modal component for Wicara.
Author: Kata.ai
Latest version: 0.7.7
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/modal

> Modal component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/modal
# npm
npm install @kata-kit/modal
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Modal, ModalHeader, ModalBody, ModalFooter } from '@kata-kit/modal';

const Component = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Modal show={isOpen} onClose={() => setIsOpen(false)}>
      <ModalHeader title="Modal" />

      <ModalBody>...</ModalBody>

      <ModalFooter>...</ModalFooter>
    </Modal>
  );
};
```
npm package: @kata-kit/pagination
Description: Pagination component for Wicara.
Author: Kata.ai
Latest version: 0.7.4
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/pagination

> Pagination component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/pagination
# npm
npm install @kata-kit/pagination
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { Pagination } from '@kata-kit/pagination';

const Component = () => (
  <Pagination
    current={3}
    total={50}
    onSelect={select => console.log('selected', select)}
  />
);
```
npm package: @kata-kit/react-select
Description: Wicara wrapper for react-select.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Wicara components instead: https://wicara-git-legacy-08.kata-ai.now.sh/

# @kata-kit/react-select

> Wicara wrapper for react-select.

## Install

```sh
# yarn
yarn add @kata-kit/react-select
# npm
npm install @kata-kit/react-select
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { SelectBase } from '@kata-kit/react-select';
import options from './options';

const Component = ({ children }) => (
  <SelectBase options={options} isClearable />
);
```
npm package: @kata-kit/reset
Description: Provides necessary CSS resets to use Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/reset

> Provides necessary CSS resets to use Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/reset
# npm
npm install @kata-kit/reset
```

## Usage

At the bare minimum, you should at least import this CSS reset to write apps
according to the Kata Design Language.

```jsx
import '@kata-kit/reset';
```
npm package: @kata-kit/split-button
Description: Split Button component for Wicara.
Author: Kata.ai
Latest version: 0.7.4
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/split-button

> Split Button component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/split-button
# npm
npm install @kata-kit/split-button
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { SplitButton } from '@kata-kit/split-button';
import { DropdownItem } from '@kata-kit/dropdown';

const Component = () => (
  <SplitButton title="Publish" color="primary">
    <DropdownItem>Dropdown Item 1</DropdownItem>
    <DropdownItem>Dropdoen Item 2</DropdownItem>
  </SplitButton>
);
```
npm package: @kata-kit/theme
Description: Wicara theming framework.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/theme

> Wicara theming framework.

## Install

```sh
# yarn
yarn add @kata-kit/theme
# npm
npm install @kata-kit/theme
```

## Usage

TODO!
npm package: @kata-kit/tooltip
Description: Tooltip component for Wicara.
Author: Kata.ai
Latest version: 0.7.2
Deprecated: Please use Aksara UI instead: https://aksara-ui.vercel.app/

# @kata-kit/dashboard

> Tooltip component for Wicara.

## Install

```sh
# yarn
yarn add @kata-kit/tooltip
# npm
npm install @kata-kit/tooltip
```

## Usage

To use this component within your React app, import as follows:

```jsx
import { TooltipTarget, Tooltip } from '@kata-kit/tooltip';

const Component = () => (
  <TooltipTarget component={<Tooltip>Hello! This is a tooltip.</Tooltip>}>
    <span>Hover over me!</span>
  </TooltipTarget>
);
```