open-index/open-npm huggingface dataset:
npm package: @hakuna-matata-ui/accordion
Description: A simple and accessible accordion component for React & Chakra UI
Author: logan
Latest version: 1.5.1

# @hakuna-matata-ui/accordion

An accordion is a vertically stacked set of interactive headings that each
contain a title or content snippet representing a section of content.

The headings function as controls that enable users to reveal or hide their
associated sections of content.

## Installation

```sh
yarn add @hakuna-matata-ui/accordion

# or

npm i @hakuna-matata-ui/accordion
```

## Import Components

```jsx
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
} from "@hakuna-matata-ui/accordion"
```

## Component:

- `Accordion`: manages the global state of all opened accordion items via
  context.
- `AccordionItem`: manages the state for a single accordion item.
- `AccordionButton`: the trigger to open/close an accordion item.
- `AccordionPanel`: the main content area for the accordion item.

## Usage

By default, only one accordion can be visible at a time, and it can't be
toggled.

**Note 🚨**: Each accordion button must be wrapped in an heading tag, that is
appropriate for the information architecture of the page.

```jsx
<Accordion>
  <AccordionItem>
    <h2>
      <AccordionButton>Section 1 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>Section 2 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>
```

To make each accordion toggle (expand/collapse) on click, pass the `allowToggle`
prop.

```jsx
<Accordion allowToggle>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>
```

To allow multiple accordions to be visible at a time, pass the `allowMultiple`
prop.

```jsx
<Accordion allowMultiple>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>
```

## References:

https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
https://inclusive-components.design/collapsible-sections/
https://github.com/stereobooster/react-accessible-accordion
https://jqueryui.com/accordion/
npm package: @hakuna-matata-ui/alert
Description: A React component used to alert users of a particular screen area that needs user action
Author: logan
Latest version: 1.3.3

# Alert

A react component used to alert users of a particular screen area that needs
user action

## Installation

```sh
npm i @hakuna-matata-ui/alert

# or

yarn add @hakuna-matata-ui/alert
```
npm package: @hakuna-matata-ui/anatomy
Description: The anatony of all chakra components
Author: logan
Latest version: 1.2.2

# @hakuna-matata-ui/anatomy

This package declares the anatomy for the Chakra UI components.

It was inspired the `::part()` selector from the
[W3C CSS Shadow Parts Draft](https://www.w3.org/TR/css-shadow-parts-1/) with
data-attributes.

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @hakuna-matata-ui/anatomy
# or
npm i @hakuna-matata-ui/anatomy
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/core/blob/main/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/core/blob/main/LICENSE).
npm package: @hakuna-matata-ui/avatar
Description: A React component used to show users avatar or initials
Author: logan
Latest version: 1.3.2

# @hakuna-matata-ui/avatar

The Avatar component is used to represent user, and displays the profile
picture, initials or fallback icon.

## Installation

```sh
yarn add @hakuna-matata-ui/avatar

# or

npm i @hakuna-matata-ui/avatar
```

## Import components

```jsx
import { Avatar, AvatarGroup } from "@hakuna-matata-ui/avatar"
```

## Basic Usage

Simply import the `Avatar` component and pass it the image `src` and name of the
user in the avatar.

```jsx
<Avatar src="john-doe.png" name="John doe" />
```

Stack Avatars in a group by using the `AvatarGroup` component

```jsx
<AvatarGroup size="md" max={2}>
  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
  <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
</AvatarGroup>
```
npm package: @hakuna-matata-ui/breadcrumb
Description: A React component used for navigation, with each item acting as a link
Author: logan
Latest version: 1.3.2

# @hakuna-matata-ui/breadcrumb

Breadcrumbs help users visualize their current location in relation to the rest
of the website or application by showing the hierarchy of pages.

## Installation

```sh
yarn add @hakuna-matata-ui/breadcrumb

# or

npm i @hakuna-matata-ui/breadcrumb
```

## Import components

Chakra UI exports 3 breadcrumb related components:

- `Breadcrumb`: The parent container for breadcrumbs.
- `BreadcrumbItem`: Individual breadcrumb element containing a link and a
  divider.
- `BreadcrumbLink`: The breadcrumb link.

```js
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
} from "@hakuna-matata-ui/react"
```

## Usage

Add `isCurrentPage` prop to the `BreadcrumbItem` that matches the current path.
When this prop is present, the `BreadcrumbItem` doesn't have a separator, and
the `BreadcrumbLink` has `aria-current` set to `page`.

```jsx
<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">Docs</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>Help</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

### Separators

Change the separator used in the breadcrumb by passing a string, like `-` or any
react element (e.g. an icon)

```jsx
<Breadcrumb separator="-">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

### Using an icon as the separator

```jsx
<Breadcrumb
  spacing="8px"
  separator={<Icon color="gray.300" name="chevron-right" />}
>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```
npm package: @hakuna-matata-ui/button
Description: A React component that is a base button.
Author: logan
Latest version: 1.5.3

# Button

Buttons are used as triggers for actions. They are used in forms, toolbars,
dialog footers and as stand-alone action triggers.

## Installation

```sh
yarn add @hakuna-matata-ui/button

# or

npm i @hakuna-matata-ui/button
```

## Import component

```jsx
import { Button } from "@hakuna-matata-ui/button"
```

## Usage

```jsx
<Button colorScheme="green">Button</Button>
```

### Button Sizes

Use the `size` prop to change the size of the button. You can set the value to
`xs`, `sm`, `md`, or `lg`.

```jsx
<Stack>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</Stack>
```

### Button Variant

Use the `variant` prop to change the visual style of the Button. You can set the
value to `solid`, `ghost`, `outline`, or `link`.

```jsx
<ButtonGroup>
  <Button variant="solid">Button</Button>
  <Button variant="outline">Button</Button>
  <Button variant="ghost">Button</Button>
  <Button variant="link">Button</Button>
</ButtonGroup>
```

### Button with Icon

You can add left and right icons to the Button components.

```jsx
<ButtonGroup>
  <Button leftIcon={<EmailIcon />} variant="solid">
    Email
  </Button>
  <Button rightIcon={<ArrowForwardIcon />} variant="outline">
    Call us
  </Button>
</ButtonGroup>
```

### Button loading state

Pass `isLoading` prop to the Button component to show its loading state. You can
optionally pass `loadingText` prop.

You can also use a custom spinner to render your own spinner component.

```jsx
<Stack>
  <Button isLoading colorScheme="teal" variant="solid">
    Email
  </Button>

  <Button
    isLoading
    colorScheme="teal"
    variant="outline"
    spinner={<BarSpinner />}
  >
    Submit
  </Button>
</Stack>
```
npm package: @hakuna-matata-ui/clickable
Description: React hook and component that implements native button interactions
Author: logan
Latest version: 1.2.2

# @hakuna-matata-ui/clickable

React hook that implements all the interactions of a native `button` component
with support for making it focusable even if it is disabled.

It can be used with both native button elements or other elements (like `div`).

## Installation

```jsx
import { useClickable } from "@hakuna-matata-ui/clickable"
```

## Usage

```jsx
// create a clickable primitive
const Clickable = (props) => {
  const clickable = useClickable(props)
  return <chakra.button display="inline-flex" {...clickable} />
}

// use the clickable primitive
const Example = () => (
  <Clickable
    as="div"
    onClick={(event) => {
      alert("clicked")
    }}
    _active={{ bg: "blue", color: "white" }}
    _disabled={{ opacity: 0.4, pointerEvents: "none" }}
  >
    Clickable
  </Clickable>
)
```
npm package: @hakuna-matata-ui/close-button
Description: A React and Chakra UI close button component.
Author: logan
Latest version: 1.2.3

# Close Button

CloseButton is essentially a button with a close icon. It is used to handle the
close functionality in feedback and overlay components like Alerts, Toasts,
Drawers and Modals.

## Installation

```sh
yarn add @hakuna-matata-ui/close-button

# or

npm i @hakuna-matata-ui/close-button
```

## Import component

```jsx
import { CloseButton } from "@hakuna-matata-ui/close-button"
```

## Usage

```jsx
<CloseButton />
```

## Disabled

Pass the `isDisabled` prop to put the close button component in a disabled
state.

```jsx
<CloseButton isDisabled />
```

## Sizes

Pass the size prop to adjust the size of the close button. Values can be sm, md
or lg.

```jsx
<>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</>
```
npm package: @hakuna-matata-ui/color-mode
Description: React component and hooks for handling light and dark mode.
Author: logan
Latest version: 1.3.3

# Color Mode

React component that adds support for light mode and dark mode using
`localStorage` and `matchMedia`.

## Installation

```sh
yarn add @hakuna-matata-ui/color-mode

# or

npm i @hakuna-matata-ui/color-mode
```

## Import component

To enable this behavior within your apps, wrap your application in a
`ColorModeProvider` below the `ThemeProvider`

```jsx live=false
import * as React from "react"
import { ColorModeProvider } from "@hakuna-matata-ui/color-mode"
import theme from "./theme"

function App({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ThemeProvider>
  )
}
```

Then you can use the hook `useColorMode` within your application.

```jsx
function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}
```
npm package: @hakuna-matata-ui/control-box
Description: Chakra UI ControlBox component
Author: logan
Latest version: 1.1.2

# @hakuna-matata-ui/control-box

Control Box component for Chakra UI.

## Installation

```sh
yarn add @hakuna-matata-ui/control-box

# or

npm i @hakuna-matata-ui/control-box
```
npm package: @hakuna-matata-ui/counter
Description: A React hook for managing counters
Author: logan
Latest version: 1.2.2

# Counter

A React hook that provides simple and advance counter functionalities. Mostly
used to create numeric inputs and countdown timers.

## Installation

```sh
yarn add @hakuna-matata-ui/counter

# or

npm i @hakuna-matata-ui/counter
```

## Import hook

```js
import { useCounter } from "@hakuna-matata-ui/counter"
```

## Basic usage

```jsx
export function Example() {
  const counter = useCounter({
    max: 10,
    min: 0,
    step: 0.1,
  })

  return (
    <div>
      <button onClick={() => counter.increment()}>Increment</button>
      <p>{counter.value}</p>
      <button onClick={() => counter.decrement()}>Decrement</button>
    </div>
  )
}
```
npm package: @hakuna-matata-ui/cra-template
Description: The official Chakra+JavaScript template for Create React App
Latest version: 1.1.1

# @hakuna-matata-ui/cra-template

This is the official Chakra+JavaScript template for
[Create React App](https://github.com/facebook/create-react-app).

## Usage

```sh
npx create-react-app my-app --template @hakuna-matata-ui
```
npm package: @hakuna-matata-ui/cra-template-typescript
Description: The official Chakra+TypeScript template for Create React App.
Latest version: 1.1.1

# @hakuna-matata-ui/cra-template-typescript

This is the official Chakra+TypeScript template for
[Create React App](https://github.com/facebook/create-react-app).

## Usage

```sh
npx create-react-app my-app --template @hakuna-matata-ui/typescript
```
npm package: @hakuna-matata-ui/css-reset
Description: CSS reset component for Chakra UI
Author: logan
Latest version: 1.1.2

# @hakuna-matata-ui/css-reset

A CSS Reset component for Chakra UI components.

## Installation

```sh
npm i @hakuna-matata-ui/css-reset
# or
yarn add @hakuna-matata-ui/css-reset
```

## Disabling border for non-keyboard interactions

We've added global style for `focus-visible` in event you need to remove focus
styles for non-keyboard interactions.

```bash
# as a dependency
yarn add focus-visible

# at the root of your application
import "focus-visible/dist/focus-visible"
```
npm package: @hakuna-matata-ui/editable
Description: React component used to build inline-editable components
Author: logan
Latest version: 1.3.2

# @hakuna-matata-ui/editable

EditableText is used for inline renaming of some text. It appears as normal UI
text but transforms into a text input field when the user clicks or focuses on
it.

## Installation

```sh
yarn add @hakuna-matata-ui/editable

# or

npm i @hakuna-matata-ui/editable
```

## Import component

```js
import {
  Editable,
  EditableInput,
  EditablePreview,
} from "@hakuna-matata-ui/react"
```

## Usage

```jsx
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>
```
npm package: @hakuna-matata-ui/image
Description: React component for progressive image loading
Author: logan
Latest version: 1.1.2

# @hakuna-matata-ui/image

The Image component is used to display images.

## Installation

```sh
yarn add @hakuna-matata-ui/image
```

## Import component

```jsx
import { Image } from "@hakuna-matata-ui/image"
```

## Basic Usage

```jsx
import React from 'react'
import { Image } from '@hakuna-matata-ui/image'
​
const Example = () => (
  <Image src="photo.png"  fallbackSrc="placeholdit.com/200x200" alt="A Placeholder Image" />
)
```

## Fallback support

You can provide a fallback image for when there is an error loading the `src` of
the image. You can also opt out of this behavior by passing the `ignoreFallback`
prop.

```jsx
<Image
  src="photo.png"
  fallbackSrc="placeholdit.com/200x200"
  alt="A Placeholder Image"
/>
```
npm package: @hakuna-matata-ui/input
Description: A React component for input text field
Author: logan
Latest version: 1.3.3

# Input

Input component is a component that is used to get user input in a text field.

## Installation

```sh
yarn add @hakuna-matata-ui/input

# or

npm i @hakuna-matata-ui/input
```

## Import components

```jsx
import {
  Input,
  InputGroup,
  InputAddon,
  InputLeftAddon,
  InputRightAddon,
  InputElement,
  InputLeftElement,
  InputRightElement,
} from "@hakuna-matata-ui/input"
```

## Usage

```jsx
<Input placeholder="A simple input component" />
```

## Disabled

Pass the `isDisabled` prop to have the input in the disabled state.

```jsx
<Input isDisabled placeholder="A disabled input" />
```

## Invalid

Pass the `isInvalid` prop to have the input in the invalid state.

```jsx
<Input isInvalid placeholder="An invalid input" />
```

## Readonly

Pass the `isReadOnly` prop to have the input in the read-only state.

```jsx
<Input isReadOnly placeholder="An invalid input" />
```

## Sizes

Pass the `size` prop to change the size of the input. Chakra UI input size
values are: `sm`, `md` and `lg`. The size of the input component is `md` by
default.

```jsx
<>
  <Input size="sm" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="md" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="lg" placeholder="A simple placeholder" />
</>
```

## Variant

Pass the `variant` prop to change the visual appearance of the input component.
Chakra UI input variant types are: `outline`, `filled`, `flushed` and
`unstyled`.

```jsx
<>
  <Input variant="outline" placeholder="Outline" marginBottom="1rem" />
  <Input variant="filled" placeholder="Filled" marginBottom="1rem" />
  <Input variant="flushed" placeholder="Flushed" marginBottom="1rem" />
  <Input variant="unstyled" placeholder="Unstyled" />
</>
```

## Input with addon

Prepend or append an element, generally a label or a button to the input
component.

```jsx
<>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input borderLeftRadius="0" placeholder="Phone number..." />
  </InputGroup>

  <br />

  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input borderRadius="0" placeholder="website.com" />
    <InputRightAddon children=".com" />
  </InputGroup>
</>
```

## Input with custom element

```jsx
<InputGroup>
  <InputLeftElement children={"P"} />
  <Input type="tel" placeholder="Phone number" />
</InputGroup>
```
npm package: @hakuna-matata-ui/layout
Description: Chakra UI layout components that give you massive speed
Author: logan
Latest version: 1.6.1

# @hakuna-matata-ui/layout

A set of layout primitives that make it super easy to manage page and
components.

## Installation

```sh
yarn add @hakuna-matata-ui/layout

# or

npm i @hakuna-matata-ui/layout
```

## Import Components

```jsx
import {
  Box,
  Flex,
  Stack,
  Grid,
  Wrap,
  AspectRatio,
} from "@hakuna-matata-ui/layout"
```

## Usage

Box is just a `div` on steroids. It gives you the ability to pass style props

```jsx
<Box color="tomato" _hover={{ bg: "red.500", color: "white" }}>
  Welcome to Box
</Box>
```

Flex is just a `Box` with `display: flex`

```jsx
<Flex>
  <Box flex="1">Box 1</Box>
  <Box>Box 2</Box>
</Flex>
```

Stack is used to group elements and apply a spacing between them. It stacks its
children vertically by default.

```jsx
<Stack spacing="20px">
  <Box>Box 1</Box>
  <Box>Box 2</Box>
</Stack>
```

AspectRatio is used to constrain its child to specific aspect ratio. It is
mostly used for embedding videos, images, and maps.

```jsx
<AspectRatio ratio={16 / 9}>
  <img src="./some-ig-story" alt="Instagram story" />
</AspectRatio>
```

Wrap is used to manage the distribution of child elements that are liable to
wrap. It is mostly used for button groups, tag group, badge group, and chips.

```jsx
<AspectRatio ratio={16 / 9}>
  <img src="./some-ig-story" alt="Instagram story" />
</AspectRatio>
```

Badge is used to render a badge. It can comes in different variants and color
schemes as defined in the `theme.components.Badge`

```jsx
<Badge variant="solid" colorScheme="green">
  Verified <FaCheck />
</Badge>
```

Center is used to vertically and horizontally center its child

```jsx
<Center bg="blue.500" borderRadius="4px" boxSize="40px">
  <FaPhoneIcon />
</Center>
```

Container is used to manage content areas on a website or blog. It center's
itself using `margin-left: auto` and `margin-right: auto`. It also applies a
default max-width of `60ch` (60 characters)

```jsx
<Container>
  <BlogContent />
</Container>
```

Spacer is a component that takes up the remaining space in a flex container. It
is mostly useful to manage space and wrapping in flex containers

```jsx
<Flex>
  <Box boxSize="40px" />
  <Spacer />
  <Box boxSize="40px" />
</Flex>
```
npm package: @hakuna-matata-ui/live-region
Description: Aria live region for React components
Author: logan
Latest version: 1.1.2

# Live Regions

ARIA Live Regions are used to communicate important information to screen reader
software.

## Installation

```sh
yarn add @hakuna-matata-ui/live-region
```

## Import components

```jsx
import { LiveRegion, useLiveRegion } from "@hakuna-matata-ui/live-region"
```

## Usage

```jsx
import { useLiveRegion } from "@hakuna-matata-ui/live-region"

function Example() {
  const region = useLiveRegion()
  return (
    <button
      onClick={() => {
        region.speak("Filtering categories was successful")
      }}
    >
      Click me
    </button>
  )
}
```
npm package: @hakuna-matata-ui/media-query
Description: A React hook for changing properties or visibility of a component based on css media query
Author: logan
Latest version: 1.2.3

# Component Name

A Quick description of the component

## Installation

```sh
yarn add @hakuna-matata-ui/media-query
```

## Inspirations

Chakra takes inspiration from these amazing libraries

- https://github.com/iiroj/use-breakpoint
- https://github.com/contra/react-responsive
npm package: @hakuna-matata-ui/pin-input
Description: A React component optimized for entering sequences of digits
Author: logan
Latest version: 1.7.2

# Pin Input

The PinInupt component is optimized for entering sequences of digits. The most
common application is for entering single-use security codes. It is optimized
for entering digits quickly.

## Installation

```sh
yarn add @hakuna-matata-ui/pin-input

or

npm i @hakuna-matata-ui/pin-input
```

## Import component

```jsx
import {
  PinInput,
  PinInputField,
  usePinInput,
  usePinInputField,
} from "@hakuna-matata-ui/pin-input"
```

## Usage

Chakra UI exports two primary components, `PinInput` and `PinInputField` to
compose a PinInput component. Chakra UI also provides hooks to can create a
custom PinInput component.

```jsx
<PinInput defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>
```

```jsx
function PinInputHookExample() {
  const context = usePinInput({ autoFocus: true })
  const input1 = usePinInputField({ context })
  const input2 = usePinInputField({ context })
  const input3 = usePinInputField({ context })
  const input4 = usePinInputField({ context })

  return (
    <div>
      <input style={style} {...input1} />
      <input style={style} {...input2} />
      <input style={style} {...input3} />
      <input style={style} {...input4} />
    </div>
  )
}
```

## Sizes

```jsx
<PinInput size="lg" defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>
```

## Controlled

```jsx
function ControlledPinInput() {
  const [value, setValue] = React.useState("")

  const handleChange = (value: string) => {
    setValue(value)
  }

  const handleComplete = (value: string) => {
    console.log(value)
  }
  return (
    <PinInput value={value} onChange={handleChange} onComplete={handleComplete}>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  )
}
```
npm package: @hakuna-matata-ui/popover
Description: A React component to render that renders its content in a popover
Author: logan
Latest version: 1.11.1

# @hakuna-matata-ui/popover

Popover is a non-modal dialog that floats around a trigger. It is used to
display contextual information to the user, and should be paired with a
clickable trigger element.

## Installation

```sh
yarn add @hakuna-matata-ui/popover

# or

npm i @hakuna-matata-ui/popover
```

## Import components

```jsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from "@hakuna-matata-ui/react"
```

## Basic Usage

When using this component, ensure the children passed to `PopoverTrigger` is
focusable, user can tab to it using their keyboard, and it can take a `ref`. It
is critical for accessiblity.

> **A11y:** When the Popover opens, focus is sent to the `PopoverContent`. When
> it closes, focus is returned to the trigger.

```jsx
<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverCloseButton />
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
  </PopoverContent>
</Popover>
```

## Rendering the Popover in a Portal

By default, the Popover doesn't render in a Portal. To make them display in a
portal, pass the `usePortal` prop.

> You might need to **Inspect Element** to see this in action. Notice the
> `PopoverContent` is rendered as a child of `<body>`

```jsx
<Popover usePortal>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>Header</PopoverHeader>
    <PopoverCloseButton />
    <PopoverBody>
      <Button colorScheme="blue">Button</Button>
    </PopoverBody>
    <PopoverFooter>This is the footer</PopoverFooter>
  </PopoverContent>
</Popover>
```
npm package: @hakuna-matata-ui/portal
Description: React component used to render children outside the DOM hierarchy of the parent component
Author: logan
Latest version: 1.3.2

# @hakuna-matata-ui/portal

A wrapper for rendering components in React Portals, with support for nested
portals and stacking.

## Installation

```sh
yarn add @hakuna-matata-ui/portal

# or

npm i @hakuna-matata-ui/portal
```

## Import components

```jsx
import { Portal, PortalManager } from "@hakuna-matata-ui/portal"
```

Render the `PortalManager` once at the root of your application

```jsx
function App() {
  return (
    <ThemeProvider>
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>
    </ThemeProvider>
  )
}
```

### Basic usage

Portals are render into the portal manager's node by default not
`document.body`.

```jsx
<div>
  <p>Welcome</p>
  <Portal>This text has been portaled</Portal>
</div>
```

### Nested portals

Nesting portal can be very useful to build complex widgets like nested menu,
popovers, modal, etc.

```jsx
<Portal>
  This is a portal.
  <Portal>This is a nested portal</Portal>
</Portal>
```

### Custom container

You can also portal elements into a custom containers. Simply pass a
`containerRef` prop that points to the `node` of that element.

```jsx
<>
  <div ref={ref} />
  <Portal containerRef={ref}>
    <h1>Hello world</h1>
  </Portal>
</>
```
npm package: @hakuna-matata-ui/provider
Description: Theme and components agnostic ChakraProvider
Author: logan
Latest version: 1.7.4

# @hakuna-matata-ui/provider

Standalone React provider for Chakra-based custom component libraries.

## Warning

This package is provided for building custom component libraries, and does not
include any default theme or configurations. If you are not sure why you are
using it, please use `@hakuna-matata-ui/react` instead;

## Installation

```sh
yarn add @hakuna-matata-ui/provider

# or

npm i @hakuna-matata-ui/provider
```

## Usage

As the default theme and config is not included, you will need a theme object
folowing the [system-ui specification](https://system-ui.com/theme/), augmented
with the following configuration properties.

More details on ChakraProvider's available props can be found
[here](https://chakra-ui.com/docs/getting-started#chakraprovider-props)

```
import * as React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@hakuna-matata-ui/provider"

// 2. build your theme and config
const theme = {
  // ... your system-ui theme
  config: {
    useSystemColorMode: false, // or true
    initialColorMode: "light", // or "dark"
    cssVarPrefix: "chakra", // any string
  }
}

// 3. Use at the root of your app
function App({ Component }) {
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}

```
npm package: @hakuna-matata-ui/radio
Description: A React component to render custom Radio input types
Author: logan
Latest version: 1.4.4

# Radio

Radio component is used in forms when a user needs to select a single value from
several options.

## Installation

```sh
yarn add @hakuna-matata-ui/radio

# or

npm i @hakuna-matata-ui/radio
```

## Import component

```jsx
import { Radio } from "@hakuna-matata-ui/radio"
```

## Usage

```jsx
<Radio>This is a radio</Radio>
```

### RadioGroup

RadioGroup is used to bind multiple radios into a group, and it indicates
whether which option is selected.

```jsx
<RadioGroup defaultValue="one">
  <Radio value="one">One</Radio>
  <Radio value="two">Two</Radio>
  <Radio value="three">Three</Radio>
</RadioGroup>
```
npm package: @hakuna-matata-ui/react-env
Description: Component and hook for handling window and document object in iframe or ssr environment
Author: logan
Latest version: 1.1.2

# @hakuna-matata-ui/react-env

React component and hook for handling window and document object in iframe or
ssr environment

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @hakuna-matata-ui/react-env
# or
npm i @hakuna-matata-ui/react-env
```

## Usage

To get it working, you need to wrap your app in `EnvironmentProvider` and call
the `useEnvironment` hook anywhere in your app to get access to the correct
`window` and `document`.

```jsx
import { EnvironmentProvider } from "@hakuna-matata-ui/react-env"

// in your App
const App = ({ children }) => {
  return <EnvironmentProvider>{children}</EnvironmentProvider>
}

// read the environment
const WindowSize = () => {
  const { window } = useEnvironment()
  return (
    <pre>
      {JSON.stringify({
        w: window.innerWidth,
        h: window.innerHeight,
      })}
    </pre>
  )
}
```

If you wrap specific aspects of your app within an `iframe`, you'll need to wrap
the content in the iframe in `EnvironmentProvider` to provide the correct
`window` and `document` to its content.

```jsx
// in your app
const EmbeddedIFrame = () => {
  return (
    <Frame>
      <EnvironmentProvider>
        <WindowSize />
      </EnvironmentProvider>
    </Frame>
  )
}
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/monacohq/hakuna-matata-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/monacohq/hakuna-matata-ui/blob/master/LICENSE).
npm package: @hakuna-matata-ui/skeleton
Description: React component to render a placeholders while you wait for content to load
Author: logan
Latest version: 1.2.4

# @hakuna-matata-ui/skeleton

Skeleton page is used to provide a low fidelity representation of the user
interface (UI) before content appears on the page

A skeleton screen is a user experience pattern that’s shown to reduce load time
frustration. They create better “perceived performance”.

## Installation

```sh
yarn add @hakuna-matata-ui/skeleton

# or

npm i @hakuna-matata-ui/skeleton
```

## Import components

```jsx
<Skeleton>
  <span>Chakra ui is cool</span>
</Skeleton>
```
npm package: @hakuna-matata-ui/skip-nav
Description: Skip navigation links for screen reader and keyboard users
Author: logan
Latest version: 1.2.2

# @hakuna-matata-ui/skip-nav

Skip navigation link for screen reader and keyboard users. Because the main
content is not usually the first thing in the document, it is valuable to
provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

## Install

```sh
npm i @hakuna-matata-ui/skip-nav
# or
yarn add @hakuna-matata-ui/skip-nav
```

## Import

```jsx
import { SkipNavLink, SkipNavContent } from "@hakuna-matata-ui/skip-nav"
```

## Usage

```jsx
ReactDOM.render(
  <>
    {/* 👇🏻 put the link at the top of your app */}
    <SkipNavLink>Skip to content</SkipNavLink>
    <div>
      <Navbar />
      {/* 👇🏻 and the content next to your main content */}
      <SkipNavContent>
        <App />
      </SkipNavContent>
    </div>
  </>,
  rootNode,
)
```
npm package: @hakuna-matata-ui/slider
Description: Accessible slider component for React that implements <input type=range>
Author: logan
Latest version: 1.5.3

# @hakuna-matata-ui/slider

The Slider is used to allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a
single value. They are ideal for adjusting settings such as volume, brightness,
or applying image filters.

## Installation

```sh
yarn add @hakuna-matata-ui/slider

# or

npm i @hakuna-matata-ui/slider
```

## Import components

```js
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from "@hakuna-matata-ui/react"
```

## Usage

```jsx
<Slider defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
```

### Changing the slider color

```jsx
<Slider colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
```

### Customized Sliders

Slider component was designed to be composed to make it easy for you to
customize its styles.

```jsx
<Slider defaultValue={30}>
  <SliderTrack bg="red.100">
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb size={6}>
    <Box color="tomato" as={MdGraphicEq} />
  </SliderThumb>
</Slider>
```
npm package: @hakuna-matata-ui/spinner
Description: A React component for displaying spinners and loaders
Author: logan
Latest version: 1.2.2

# @hakuna-matata-ui/spinner

Spinners provide a visual cue that an action is processing, awaiting a course of
change or a result.

## Installation

```sh
yarn add @hakuna-matata-ui/spinner

# or

npm i @hakuna-matata-ui/spinner
```

## Import component

```jsx
import { Spinner } from "@hakuna-matata-ui/spinner"
```

## Usage

```jsx
<Spinner />
```

## Spinner with different sizes

Change the size of the spinner by passing the `size` prop.

```jsx
<>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</>
```

## Spinner with color

Change the background color of the moving section of the spinner by passing the
`color` prop.

```jsx
<Spinner color="red.500" />
```

## Spinner with empty area color

Change the background color of the spinner by passing the `emptyColor` prop.

```jsx
<Spinner color="red.500" emptyColor="gray.200" />
```

## Spinner with different speed

Change the spinner's animation speed area by passing the `speed` prop. The unit
of the value matches the
[`animation-duration` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
property.

```jsx
<Spinner color="red.500" emptyColor="gray.200" speed="0.65s" />
```
npm package: @hakuna-matata-ui/stat
Description: A React component for displaying statistics
Author: logan
Latest version: 1.2.3

# Stat

As the name implies, the Stat component is used to display some statistics.

## Installation

```sh
yarn add @hakuna-matata-ui/stat

# or

npm i @hakuna-matata-ui/stat
```

## Import components

```jsx
import {
  Stat,
  StatArrow,
  StatLabel,
  StatGroup,
  StatNumber,
  StatUpArrow,
  StatHelpText,
  StatDownArrow,
} from "@hakuna-matata-ui/stat"
```

## Usage

```jsx
<Stat>
  <StatLabel>Collected Fees</StatLabel>
  <StatNumber>£0.00</StatNumber>
  <StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>


<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      23.36%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Clicked</StatLabel>
    <StatNumber>45</StatNumber>
    <StatHelpText>
      9.05%
    </StatHelpText>
  </Stat>
</StatGroup>
```

## Stat with Indicator

```jsx
<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" />
      23.36%
    </StatHelpText>
  </Stat>
</StatGroup>
```
npm package: @hakuna-matata-ui/tabs
Description: Accessible Tabs component for React and Chakra UI
Author: logan
Latest version: 1.6.2

# @hakuna-matata-ui/tabs

An accessible tabs component.

The `Tab` and `TabPanel` elements are associated by their order in the tree.
None of the components are empty wrappers, each is associated with a real DOM
element in the document, giving you maximum control over styling and
composition.

## Installation

```sh
yarn add @hakuna-matata-ui/tabs

# or

npm i @hakuna-matata-ui/tabs
```

## Import components

```jsx
import {
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from "@hakuna-matata-ui/react"
```

## Usage

```jsx
<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
```

### Tab variants and color schemes

Tabs come in 6 different variants to style the tabs: `line`,`enclosed`,
`enclosed-colored`, `soft-rounded`, `solid-rounded`. Each variant comes it
different color schemes.

```jsx
<Tabs variant="enclosed" colorScheme="red">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
```

### Manually Activated Tabs

By default, `Tabs` are activated automatically. This means when you use the
arrow keys to change tabs, the tab is activated and focused.

The content of a `TabPanel` should ideally be preloaded. However, if switching
to a tab panel causes a network request and possibly a page refresh, there might
be some notable latency and this might affect the experience for keyboard and
screen reader users.

In this scenario, you should use a manually activated tab, it moves focus
without activating the tabs. With focus on a specifc tab, users can activate a
tab by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.

```jsx
<Tabs isManual variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
```

### Tab sizes

You can change the size of the tab by passing `size` prop. We support 3 sizes
`sm`, `md`, `lg`

```jsx
<Tabs size="md" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
```
npm package: @hakuna-matata-ui/tag
Description: This component displays as a tag with an optional link and/or button to remove the given tag.
Author: logan
Latest version: 1.2.3

# Tag

This component is displayed as an accessible tag with an optional link and/or
button to remove it.

## Installation

```sh
yarn add @hakuna-matata-ui/tag
```

## Import component

```jsx
import { Tag } from "@hakuna-matata-ui/tag"
```

## Basic Usage

```jsx
<Tag />
```

## Sizes

Pass the `size` prop to change the size of the tag.

```jsx
<>
  <Tag size="sm" colorScheme="gray">
    Gray
  </Tag>
  <Tag colorScheme="gray">Gray</Tag>
  <Tag size="lg" colorScheme="gray">
    Gray
  </Tag>
</>
```

## Color

Pass the `colorScheme` prop to change the background color of the tag component

```jsx
<>
  <Tag colorScheme="pink">Pink</Tag>
</>
```

## With icon

The tag component can contain an Icon. This is done by using the `TagIcon`
component withtin the tag component.

```jsx
<>
  <Tag colorScheme="cyan">
    <TagIcon size="12px" as={AddIcon} />
    <TagLabel>Green</TagLabel>
  </Tag>
</>
```

## With close button

Use the `TagCloseButton` to apply a close button to the tag component.

```jsx
<Tag variant="solid" size="sm" colorScheme="cyan">
  <TagLabel>Tab Label</TagLabel>
  <TagCloseButton />
</Tag>
```

## With custom element

Tag component can contain a custom element. This is done by placing the custom
element within the tag component.

```jsx
<Tag size="lg" colorScheme="red" borderRadius="full">
  <Avatar
    src="https://bit.ly/sage-adebayo"
    size="xs"
    name="Segun Adebayo"
    ml={-1}
    mr={2}
  />
  <TagLabel>Segun</TagLabel>
  <TagCloseButton />
</Tag>
```
npm package: @hakuna-matata-ui/textarea
Description: Textarea React component for Chakra UI
Author: logan
Latest version: 1.2.3

# Textarea

The Textarea component allows you to easily create multi-line text inputs.

## Installation

```sh
yarn add @hakuna-matata-ui/textarea
```

## Import component

```jsx
import { Textarea } from "@hakuna-matata-ui/textarea"
```

## Basic Usage

```jsx
<Textarea defaultValue="This is a textarea" placeholder="A simple textarea" />
```

## Disabled

Pass the `isDisabled` prop to put the textarea in the disabled state

```jsx
<Textarea isDisabled placeholder="A disabled textarea" />
```

## Invalid

Pass the `isInvalid` prop to put the textarea in the invalid state

```jsx
<Textarea isInvalid placeholder="An invalid textarea" />
```

## Sizes

Pass the `size` prop to change the size of the textarea

```jsx
<>
  <Textarea
    size="sm"
    placeholder="A sample placeholder"
    defaultValue="This is a small textarea"
  />
  <Textarea
    placeholder="A sample placeholder"
    defaultValue="This is a default textarea"
  />
  <Textarea
    size="lg"
    placeholder="A sample placeholder"
    defaultValue="This is a large textarea"
  />
</>
```

## Resize

Pass the `resize` prop to resize to textarea in the vertical or horizontal
direction

```jsx
<Textarea placeholder="Here is a sample placeholder" resize="horizontal" />
```
npm package: @hakuna-matata-ui/tooltip
Description: A React Component for rendering dynamically positioned Tooltips
Author: logan
Latest version: 1.4.3

# Tooltip

Use this component to display extra information about an element by displaying a
floating description.

## Installation

```sh
yarn add @hakuna-matata-ui/tooltip

# or

npm i @hakuna-matata-ui/tooltip
```

## Import components

```js
import { Tooltip } from "@hakuna-matata-ui/react"
```

## Usage

If the `children` of Tooltip is a string, we wrap with in a `span` with
`tabIndex` set to `0`, to ensure it meets the accessibility requirements.

```jsx
<Tooltip label="Hey, I'm here!">Hover me</Tooltip>
```
npm package: @hakuna-matata-ui/visually-hidden
Description: A React component that visually hides its content
Author: logan
Latest version: 1.1.2

# @hakuna-matata-ui/visually-hidden

The visually hidden component styles itself so that it’s content is not visible,
but it is available to assistive technologies like screen readers and other text
to speech programs.

## Installation

```sh
yarn add @hakuna-matata-ui/visually-hidden

# or

npm i @hakuna-matata-ui/visually-hidden
```

## Import component

```jsx
import { VisuallyHidden } from "@hakuna-matata-ui/visually-hidden"
```

## Basic usage

```jsx
// it renders a `span` by default
<VisuallyHidden>This content will be hidden on screen</VisuallyHidden>

// for visually hidden input fields
<VisuallyHiddenInput type="checkbox" defaultChecked/>
```

## References

- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- https://a11yproject.com/posts/how-to-hide-content/
npm package: @hakunatitans/audittab
Description: Patra AuditTab Library - React Library
Author: PatraCorp
Latest version: 1.7.3

| Statements                                                                                      | Branches                                                                                       | Functions                                                                               | Lines                                                                                    |
| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat&logo=jest) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat&logo=jest) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat&logo=jest) | ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat&logo=jest) |

# Patra Components
npm package: @hakunatitans/audittabnew
Description: Patra AuditTab Library - React Library
Author: PatraCorp
Latest version: 1.7.3

| Statements                                                                                      | Branches                                                                                       | Functions                                                                               | Lines                                                                                    |
| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat&logo=jest) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat&logo=jest) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat&logo=jest) | ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat&logo=jest) |

# Patra Components
npm package: @hakunatitans/core
Description: Patra AuditTab Library - React Library
Author: PatraCorp
Latest version: 0.0.1

| Statements                                                                                      | Branches                                                                                       | Functions                                                                               | Lines                                                                                    |
| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat&logo=jest) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat&logo=jest) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat&logo=jest) | ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat&logo=jest) |

# Patra Components