open-index/open-npm huggingface dataset:
npm package: @packpackman/react-use-disclosure
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-disclosure

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/use-disclosure
# or
npm i @chakra-ui/use-disclosure
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-event-listener
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-event-listener

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-event-listener
# or
npm i @chakra-ui/react-use-event-listener
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-focus-effect
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-focus-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-focus-effect
# or
npm i @chakra-ui/react-use-focus-effect
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-focus-on-pointer-down
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-focus-on-pointer-down

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-focus-on-pointer-down
# or
npm i @chakra-ui/react-use-focus-on-pointer-down
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-interval
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-interval

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-interval
# or
npm i @chakra-ui/react-use-interval
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-latest-ref
Description: React hook to track previous value
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-latest-ref

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-latest-ref
# or
npm i @chakra-ui/react-use-latest-ref
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-merge-refs
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-merge-refs

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/use-merge-refs
# or
npm i @chakra-ui/use-merge-refs
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-outside-click
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.2.0

# @chakra-ui/use-outside-click

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-outside-click
# or
npm i @chakra-ui/react-use-outside-click
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-pan-event
Description: React hook to track pan events
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-pan-gesture

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-pan-gesture
# or
npm i @chakra-ui/react-use-pan-gesture
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-previous
Description: React hook to track previous value
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-previous

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-previous
# or
npm i @chakra-ui/react-use-previous
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-safe-layout-effect
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-safe-layout-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-safe-layout-effect
# or
npm i @chakra-ui/react-use-safe-layout-effect
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-size
Description: Track an element size over time
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-size

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-size
# or
npm i @chakra-ui/react-use-size
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-timeout
Description: React hook for setTimeout
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-timeout

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-timeout
# or
npm i @chakra-ui/react-use-timeout
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-use-update-effect
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-update-effect

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-update-effect
# or
npm i @chakra-ui/react-use-update-effect
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/react-utils
Description: React utilities and helpers for Chakra UI
Author: Segun Adebayo
Latest version: 2.0.12

# @chakra-ui/react-utils

This package contains all React-related utilities and types that may be consumed
by other packages.

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-utils
# or
npm i @chakra-ui/react-utils
```
npm package: @packpackman/shared-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.5

# @chakra-ui/shared-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/shared-utils
# or
npm i @chakra-ui/shared-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/skeleton
Description: React component to render a placeholders while you wait for content to load
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-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 @chakra-ui/skeleton

# or

npm i @chakra-ui/skeleton
```

## Import component

```jsx
import { Skeleton } from "@chakra-ui/skeleton"
```

## Usage

```jsx
<Skeleton>
  <span>Chakra ui is cool</span>
</Skeleton>
```
npm package: @packpackman/skip-nav
Description: Skip navigation links for screen reader and keyboard users
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-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 @chakra-ui/skip-nav
# or
yarn add @chakra-ui/skip-nav
```

## Import

```jsx
import { SkipNavLink, SkipNavContent } from "@chakra-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: @packpackman/slider
Description: Accessible slider component for React that implements <input type=range>
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-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 @chakra-ui/slider

# or

npm i @chakra-ui/slider
```

## Import components

```js
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from "@chakra-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: @packpackman/spinner
Description: A React component for displaying spinners and loaders
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/spinner

Spinners provide a visual cue that an action is processing, awaiting a course of
change or a result.

## Installation

```sh
yarn add @chakra-ui/spinner

# or

npm i @chakra-ui/spinner
```

## Import component

```jsx
import { Spinner } from "@chakra-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: @packpackman/stat
Description: A React component for displaying statistics
Author: Segun Adebayo
Latest version: 2.1.1

# Stat

As the name implies, the Stat component is used to display some statistics.

## Installation

```sh
yarn add @chakra-ui/stat

# or

npm i @chakra-ui/stat
```

## Import components

```jsx
import {
  Stat,
  StatArrow,
  StatLabel,
  StatGroup,
  StatNumber,
  StatUpArrow,
  StatHelpText,
  StatDownArrow,
} from "@chakra-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: @packpackman/stepper
Description: The stepper component to create a logical sequence of steps
Author: Segun Adebayo
Latest version: 2.3.1

# @chakra-ui/stepper

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/stepper
# or
npm i @chakra-ui/stepper
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/storybook-addon
Description: The official Storybook Addon for Chakra UI
Author: Andres Tuñón
Latest version: 5.1.0

# @chakra-ui/storybook-addon

Use Chakra UI in your Storybook stories.

This Plugin wraps each of your stories with [`ChakraProvider`][chakraprovider]
which can be configured using Storybook parameters.

## Installation

### yarn

```sh
yarn add -D @chakra-ui/storybook-addon
```

### npm

```sh
npm i -D @chakra-ui/storybook-addon
```

Add the addon to your configuration in `.storybook/main.js` and disable the
emotion alias (available with Storybook >6.4).

```js
module.exports = {
  addons: ["@chakra-ui/storybook-addon"],
  features: {
    emotionAlias: false,
  },
}
```

## Configuring `ChakraProvider`

If you need to customize the props passed to `ChakraProvider` for your stories
(to use a custom `theme`, for example), you'll need to create custom Storybook
parameters.

To set global parameters for this addon, add a `chakra` object to the
`parameters` export in `.storybook/preview.js`:

```js
import myTheme from "../theme"

export const parameters = {
  chakra: {
    theme: myTheme,
  },
}
```

The `chakra` parameters take the same shape as the `props` for `ChakraProvider`.
[See the `ChakraProvider` props table][chakraprovider] to see the list of
possible parameters.

### Overriding `ChakraProvider` configuration for individual components or stories

Storybook allows you to define parameters at multiple levels: global, component,
and story. We recommend setting default parameters at the global level, and
overriding them at the component or story when necessary. See the
[Storybook Parameters documentation](https://storybook.js.org/docs/react/writing-stories/parameters)
for more information.

## Color Mode Tool

You will be able to toggle your color mode with the button in the toolbar. It
tries to sync with your theme through the localstorage key.

## Story Controls for Theme Components

Get controls for the theming props `variant`, `size` and `colorScheme` in your
stories with `getThemingArgTypes(theme, componentName)`.

```tsx
import { Meta, StoryFn } from "@storybook/react"
import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
import { theme } from "<your-theme>"

export default {
  title: "Components / Forms / Button",
  // get controls for `variant`, `size` and `colorScheme`
  argTypes: getThemingArgTypes(theme, "Button"),
} as Meta

interface StoryProps extends ThemingProps<"Button"> {}

export const Basic: StoryFn<StoryProps> = (props) => (
  <Button {...props}>Button</Button>
)
```

This will render input fields to choose the theming prop values:

![Storybook screenshot with controls tab](theming-arg-types.png)

[chakraprovider]:
  https://chakra-ui.com/docs/getting-started#chakraprovider-props
npm package: @packpackman/styled-system
Description: Style function for css-in-js building component libraries
Author: Segun Adebayo
Latest version: 2.9.2

# @chakra-ui/styled-system

The framework's agnostic styling engine for Chakra UI. It's used in the `system`
package.

## Installation

```sh
npm i @chakra-ui/styled-system

# or

yarn add @chakra-ui/styled-system
```

### CSS Logical Properties

Chakra UI provides pretty good support for bidirectional (`bidi`) CSS
properties. For our shorthand props, we provide a `*Bidi` suffix to manage the
rtl/ltr switching.

```jsx
import { css } from "@chakra-ui/styled-system"

const theme = {
  direction: "rtl", // ltr | rtl
}

const styles = css({
  mt: "40px",
  // bi-directional `margin-right`
  // `margin-right` in ltr, `margin-left` in rtl
  mrBidi: "30px",
})(theme)
```

### References

```js
const cssLogicalValueMap = {
  float: { left: "inline-start", right: "inline-end" },
  clear: { left: "inline-start", right: "inline-end" },
  resize: { horizontal: "block", vertical: "inline" },
  textAlign: { left: "start", right: "end" },
  captionSize: { top: "block-start", bottom: "block-end" },
}

const cssLogicalPropertiesMap = {
  // Margin and Padding Logical Properties
  "marginTop|mt": "marginBlockStart",
  "marginLeft|ml": "marginInlineStart",
  "marginRight|mr": "marginInlineEnd",
  "marginBottom|mb": "marginBlockEnd",
  "paddingTop|pt": "paddingBlockStart",
  "paddingBottom|pb": "paddingBlockEnd",
  "paddingLeft|pl": "paddingInlineStart",
  "paddingRight|pr": "paddingInlineEnd",
  "marginY|my": "marginBlock",
  "marginX|mx": "marginInline",
  "paddingY|py": "paddingBlock",
  "paddingX|px": "paddingInline",

  // Floating and positioning logical properties
  top: "insetBlockStart",
  bottom: "insetBlockEnd",
  left: "insetInlineStart",
  right: "insetInlineEnd",

  // Sizing Logical properties
  "width|w": "inlineSize",
  "minW|minWidth": "minInlineSize",
  "maxW|maxWidth": "maxInlineSize",
  "height|h": "blockSize",
  "minH|minHeight": "minBlockSize",
  "maxH|maxHeight": "maxBlockSize",

  // Border logical properties
  borderY: "borderBlock",
  borderX: "borderInline",

  borderTop: "borderBlockStart",
  borderTopWidth: "borderBlockStartWidth",
  borderTopStyle: "borderBlockStartStyle",
  borderTopColor: "borderBlockStartColor",

  borderBottom: "borderBlockEnd",
  borderBottomWidth: "borderBlockEndWidth",
  borderBottomStyle: "borderBlockEndStyle",
  borderBottomColor: "borderBlockEndColor",

  borderLeft: "borderInlineStart",
  borderLeftWidth: "borderInlineStartWidth",
  borderLeftStyle: "borderInlineStartStyle",
  borderLeftColor: "borderInlineStartColor",

  borderRight: "borderInlineEnd",
  borderRightWidth: "borderInlineEndWidth",
  borderRightStyle: "borderInlineEndStyle",
  borderRightColor: "borderInlineEndColor",
}
```
npm package: @packpackman/switch
Description: A React component to view and switch between on or off states.
Author: Segun Adebayo
Latest version: 2.1.2

# Switch

The Switch component is used as an alternative for the checkbox component,
switch between enabled or disabled states.

## Installation

```sh
yarn add @chakra-ui/switch

# or

npm i @chakra-ui/switch
```

## Import component

```jsx
import { Switch } from "@chakra-ui/switch"
```

## Usage

```jsx
<Switch />
```

## Sizes

Pass the `size` prop to change the size of the switch.

```jsx
<>
  <Switch size="sm" marginLeft="1rem" colorScheme="green" />

  <Switch size="md" marginLeft="1rem" colorScheme="green" />

  <Switch size="lg" marginLeft="1rem" colorScheme="green" />
</>
```

## Switch background-color

You can change the checked background color of the `switch` by passing the
`colorScheme` prop

```jsx
<Switch colorScheme="blue" />
```

## Resources

- https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
- https://www.lightningdesignsystem.com/components/checkbox-button/
npm package: @packpackman/tabs
Description: Accessible Tabs component for React and Chakra UI
Author: Segun Adebayo
Latest version: 3.0.0

# @chakra-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 @chakra-ui/tabs

# or

npm i @chakra-ui/tabs
```

## Import components

```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-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 specific 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: @packpackman/tag
Description: This component displays as a tag with an optional link and/or button to remove the given tag.
Author: Segun Adebayo
Latest version: 3.1.1

# Tag

This component is displayed as an accessible tag with an optional link and/or
button to remove it.

## Installation

```sh
yarn add @chakra-ui/tag
```

## Import component

```jsx
import { Tag } from "@chakra-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 within 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: @packpackman/textarea
Description: Textarea React component for Chakra UI
Author: Segun Adebayo
Latest version: 2.1.2

# Textarea

The Textarea component allows you to easily create multi-line text inputs.

## Installation

```sh
yarn add @chakra-ui/textarea
```

## Import component

```jsx
import { Textarea } from "@chakra-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: @packpackman/theme-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.21

# @chakra-ui/theme-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/theme-utils
# or
npm i @chakra-ui/theme-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
npm package: @packpackman/tooltip
Description: A React Component for rendering dynamically positioned Tooltips
Author: Segun Adebayo
Latest version: 2.3.1

# Tooltip

Use this component to display extra information about an element by displaying a
floating description.

## Installation

```sh
yarn add @chakra-ui/tooltip

# or

npm i @chakra-ui/tooltip
```

## Import components

```js
import { Tooltip } from "@chakra-ui/react"
```

## Usage

If the `children` of Tooltip is a string, it will be wrapped with a focusable
`span` element to ensure the Tooltip meets accessibility requirements.

```jsx
<Tooltip label="Hey, I'm here!">Hover me</Tooltip>
```
npm package: @packpackman/transition
Description: Common transition components for Chakra UI
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/transition

## Installation

```sh
yarn add @chakra-ui/transition
# or
npm i @chakra-ui/transition
```

## Collapse

The Collapse component is used to create regions of content that can
expand/collapse with a simple animation. It helps to hide content that's not
immediately relevant to the user.

## Import component

```jsx
import { Collapse } from "@chakra-ui/transition"
```

## Usage

```jsx
function SampleSpring() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click</Button>
      <Collapse in={isOpen}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  )
}
```

## Changing the starting height

```jsx
function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} in={show}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}
```

// TODO: Explain the `framer-motion` part and how to customize the motion
variants
npm package: @packpackman/visually-hidden
Description: A React component that visually hides its content
Author: Segun Adebayo
Latest version: 2.2.0

# @chakra-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 @chakra-ui/visually-hidden

# or

npm i @chakra-ui/visually-hidden
```

## Import component

```jsx
import { VisuallyHidden } from "@chakra-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/