open-index/open-npm huggingface dataset:
npm package: @packfleet/datetime
Description: A package for working with dates and times.
Author: Packfleet
Latest version: 0.2.0

# @packfleet/datetime

A comprehensive datetime library that wraps `@js-temporal/polyfill`, providing a rich set of utilities for date and time manipulation, formatting, and parsing.

## Installation

```bash
npm install @packfleet/datetime
# or
yarn add @packfleet/datetime
# or
pnpm add @packfleet/datetime
# or
bun install @packfleet/datetime
```

## Features

- 🕒 **Temporal API Support**: Built on top of `@js-temporal/polyfill` for modern date/time handling
- 🌍 **Timezone Support**: Full timezone handling with IANA timezone identifiers
- 📝 **Rich Formatting**: Multiple formatting options for dates and times
- 🔄 **Conversion Utilities**: Easy conversion between different date/time types
- 🎯 **Type Safety**: Written in TypeScript with full type definitions

## Usage

### Formatting

```typescript
import { formatFriendlyIso8601DateTimeStr, formatIso8601ToFriendlyDate } from '@packfleet/datetime';

// Format a datetime string in a friendly way
formatFriendlyIso8601DateTimeStr('2024-03-12T23:59:59.123Z', 'Europe/London');
// "Wednesday 12th March 2024 at 23:59"

// Format just the date
formatIso8601ToFriendlyDate('2024-03-12T23:59:59.123Z', 'Europe/London');
// "12 March 2024"
```

### Parsing

```typescript
import { parseInstant, parsePlainDateTime } from '@packfleet/datetime';

// Parse an ISO 8601 string to an Instant
const instant = parseInstant('2024-03-12T23:59:59.123Z');

// Parse to a PlainDateTime
const dateTime = parsePlainDateTime('2024-03-12T23:59:59.123');
```

### Current Time

```typescript
import { nowLocal, todayLocal } from '@packfleet/datetime';

// Get current time in a specific timezone
const now = nowLocal('Europe/London');

// Get today's date in a specific timezone
const today = todayLocal('Europe/London');
```

### Conversion

```typescript
import { toJSDateUTC, toPlainDate } from '@packfleet/datetime';

// Convert Temporal types to JavaScript Date
const jsDate = toJSDateUTC(instant);

// Convert JavaScript Date to Temporal PlainDate
const plainDate = toPlainDate(new Date(), 'Europe/London');
```

## Production Readiness

This library has been in use by Packfleet in production for multiple years. However, please note that the Temporal API spec may still change, as it's a relatively new addition to JavaScript.

## License

MIT
npm package: @packi_/feature-project-initializer
Description: .
Author: yusangeng
Latest version: 0.1.1

# tmpl

[![TypeScript](https://img.shields.io/badge/lang-typescript-blue.svg)](https://www.tslang.cn/) [![Build Status](https://github.com/yusangeng/tmpl/workflows/test/badge.svg)](https://github.com/yusangeng/tmpl/actions?query=workflow%3Atest) [![Coverage Status](https://coveralls.io/repos/github/yusangeng/tmpl/badge.svg?branch=master)](https://coveralls.io/github/yusangeng/tmpl) [![Npm Package Info](https://badge.fury.io/js/tmpl.svg)](https://www.npmjs.com/package/tmpl) [![Downloads](https://img.shields.io/npm/dw/tmpl.svg?style=flat)](https://www.npmjs.com/package/tmpl)


## 综述

## 安装

```shell
npm i tmpl --save 
```

## 使用
npm package: @packi_/feature-webpack
Description: webpack打包相关命令.
Author: yusangeng
Latest version: 0.3.0

# webpack

[![TypeScript](https://img.shields.io/badge/lang-typescript-blue.svg)](https://www.tslang.cn/) [![Build Status](https://github.com/yusangeng/webpack/workflows/test/badge.svg)](https://github.com/yusangeng/webpack/actions?query=workflow%3Atest) [![Coverage Status](https://coveralls.io/repos/github/yusangeng/webpack/badge.svg?branch=master)](https://coveralls.io/github/yusangeng/webpack) [![Npm Package Info](https://badge.fury.io/js/webpack.svg)](https://www.npmjs.com/package/webpack) [![Downloads](https://img.shields.io/npm/dw/webpack.svg?style=flat)](https://www.npmjs.com/package/webpack)


## 综述

## 安装

```shell
npm i webpack --save 
```

## 使用
npm package: @packi_/lint-config
Description: 常用lint与代码排版规则
Author: yusangeng
Latest version: 0.2.0

# @packi_/lint-config

常用 lint 与代码排版规则。

## 安装

```shell
npm i packi-lint-config --save-dev
```

## 使用

.eslintrc.js

```js
const base = require('@packi_/lint-config/eslintrc');

module.exports = Object.assign({}, base, {});
```

.pretterrc.js

```js
const base = require('@packi_/lint-config/prettierrc');

module.exports = Object.assign({}, base, {});
```
npm package: @packit/tldr
Description: Easily manage TL;DR pages for your project
Author: David Zukowski
Latest version: 0.3.2

# TL;DR

Easily create and manage TL;DR pages to help users find their way around your project. These pages are designed to supplement, not replace, richer documentation, and should act as a quick reference manual for common tasks.

See an example [here](./docs/example-screenshot.png).

## Installation

```sh
yarn add --dev @packit/tldr       # yarn users
npm install --dev @packit/tldr    # npm users

# create your first TL;DR document:
npx tldr init!

```

Additionally, you can optionally create `{{topic}}.md` files in `docs/tldr`.

> These topics can be displayed by running `npx tldr {{topic}}`. See [usage](#usage) for more.

## Usage

> yarn users can replace `npx` with `yarn`, if desired.

```sh
npx tldr              # display the content of tldr.md
npx tldr {{topic}}    # display topic from ./docs/tldr/{{topic}}.md

# display multiple topics:
npx tldr {{topic1}} {{topic2}} {{topic3}}

# display all topics:
npx tldr "*"

# display topics matching pattern:
npx tldr "build*"

# display TL;DR page for an external package:
npx tldr jest?        # reads from node_modules

# search all topics:
npx tldr "*" | grep "pattern" -A 1 -B 1
```

## Meta Commands

> All meta commands are suffixed with `!`.

```sh
npx tldr init!   # initialize a TLDR.md file for your project
npx tldr list!   # list available topics (found in docs/tldr)
```

## Options

```sh
npx tldr --root /some/path/here    # run tldr in another directory
```

## Prior Art

Inspired by https://tldr.sh
npm package: @packlet/cli
Description: Umbrella CLI for packlet utilities (gpr, validate, list-artifacts).
Author: KazViz
Latest version: 0.3.3

<div align="center">

# 📦️ @packlet/cli

[![TypeScript](https://img.shields.io/badge/TypeScript-%23007ACC.svg?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Bun](https://img.shields.io/badge/Bun-%23000000.svg?logo=bun&logoColor=white)](https://bun.sh)
![NodeJS](https://img.shields.io/badge/node.js-6DA55F?logo=node.js&logoColor=white)<br />
![license](https://img.shields.io/github/license/nazahex/packlet-js)

</div>

`@packlet/cli` provides the implementation behind the `packlet` command-line interface. It exposes the build, packaging, validation, and artifact utilities used across the Packlet toolchain.

Most users should install the higher-level `packlet` package, which bundles this CLI with defaults and additional conveniences. Use `@packlet/cli` directly only when you specifically need the standalone CLI internals.

## Installation

```sh
# bun
bun add -D @packlet/cli

# npm
npm install -D @packlet/cli
```

## Usage

When installed as a development dependency, the `packlet` binary becomes available through your package manager:

```sh
npx packlet --help
```

You may also invoke the commands via npm scripts:

```jsonc
{
  "scripts": {
    "build": "packlet build",
    "gpr": "packlet gpr --root .",
    "validate": "packlet validate --root .",
    "list-artifacts": "packlet list-artifacts --artifacts .artifacts"
  }
}
```

The behavior matches the public `packlet` package, including configuration resolution and defaults.

## Commands overview

The CLI offers four primary commands:

- **`packlet build`** — Bundles the package (ESM by default, optional CJS) and generates declaration files.
- **`packlet gpr`** — Produces a GitHub Packages–compatible scoped variant and emits `.tgz` artifacts.
- **`packlet validate`** — Verifies that required output files exist in `dist/`.
- **`packlet list-artifacts`** — Enumerates `.tgz` files in an artifacts directory.

All commands use the shared configuration model from `@packlet/core`, respecting overrides from CLI flags, environment variables, and `package.json.packlet`.

## When to use @packlet/cli

Install and use `@packlet/cli` directly if:

- You are embedding the Packlet CLI within another system and require only the CLI implementation.
- You maintain a wrapper or custom workflow that should not depend on the higher-level `packlet` meta-package.

For typical development workflows, the `packlet` package remains the recommended entry point.

## License

MIT © KazViz
npm package: @packpackman/alert
Description: A React component used to alert users of a particular screen area that needs user action
Author: Segun Adebayo
Latest version: 2.2.2

# @chakra-ui/alert

Alerts visually highlight important content for the user. They can contain a
title, an icon and content. Each intent has a default icon associated with it.

## Installation

```sh
yarn add @chakra-ui/alert

# or

npm i @chakra-ui/alert
```

## Import components

```jsx
import {
  Alert,
  AlertTitle,
  AlertIcon,
  AlertDescription,
} from "@chakra-ui/alert"
```

## Basic usage

```jsx
<Alert status="error" variant="solid" justifyContent="center">
  <AlertIcon />
  <AlertTitle>Your browser is outdated!</AlertTitle>
  <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
</Alert>
```
npm package: @packpackman/breadcrumb
Description: A React component used for navigation, with each item acting as a link
Author: Segun Adebayo
Latest version: 2.2.0

# @chakra-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 @chakra-ui/breadcrumb

# or

npm i @chakra-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 "@chakra-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: @packpackman/breakpoint-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.8

# @chakra-ui/breakpoint-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/breakpoint-utils
# or
npm i @chakra-ui/breakpoint-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/card
Description: React component used to group related content
Author: Segun Adebayo
Latest version: 2.2.0

# @chakra-ui/card

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/card
# or
npm i @chakra-ui/card
```

## 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/cli
Description: Generate theme typings for autocomplete
Author: Tim Kolberger
Latest version: 2.4.1

# @chakra-ui/cli

Generate TypeScript types to provide autocomplete for your custom theme.

## Usage

```sh
npx @chakra-ui/cli tokens <path/to/your/theme.(js|ts)>
```

or

```sh
npx @chakra-ui/cli tokens <@your-org/chakra-theme-package>
```

```sh
$ npx @chakra-ui/cli tokens --help

Usage: chakra-cli tokens [options] <source>

Options:
  --out <path>              output file e.g. node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts
  --strict-component-types  Generate strict types for props variant and size
  --strict-token-types      Generate strict types for theme tokens (e.g. color, spacing)
  --no-format               Disable auto formatting
  --watch [path]            Watch directory for changes and rebuild
  --template <template>     Choose the template to use for the generation (choices: "default", "augmentation", default: "default"
  -h, --help                display help for command

Example call:
  $ chakra-cli tokens theme.ts
```

> Note 🚨: If you delete the `node_modules` directory, you'll need to re-run the
> command to get proper typings again.

For convenience, you can add a `postinstall` script to your `package.json`, so
you don't have to think about this every time you re-install your dependencies.

```json title="package.json"
"scripts": {
  "gen:theme-typings": "chakra-cli tokens <path/to/your/theme.(js|ts)>",
  "postinstall": "npm run gen:theme-typings"
}
```
npm package: @packpackman/close-button
Description: A React and Chakra UI close button component.
Author: Segun Adebayo
Latest version: 2.1.1

# 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 @chakra-ui/close-button

# or

npm i @chakra-ui/close-button
```

## Import component

```jsx
import { CloseButton } from "@chakra-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: @packpackman/color-mode
Description: React component and hooks for handling light and dark mode.
Author: Segun Adebayo
Latest version: 2.2.0

# Color Mode

React component that adds support for light mode and dark mode using
`localStorage` and `matchMedia`.

## Installation

```sh
yarn add @chakra-ui/color-mode

# or

npm i @chakra-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 "@chakra-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: @packpackman/counter
Description: A React hook for managing counters
Author: Segun Adebayo
Latest version: 2.1.0

# Counter

A React hook that provides simple and advance counter functionalities. Mostly
used to create numeric inputs and countdown timers.

## Installation

```sh
yarn add @chakra-ui/counter

# or

npm i @chakra-ui/counter
```

## Import hook

```js
import { useCounter } from "@chakra-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: @packpackman/cra-template
Description: The official Chakra+JavaScript template for Create React App
Latest version: 2.0.8

# @chakra-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 @chakra-ui
```
npm package: @packpackman/cra-template-typescript
Description: The official Chakra+TypeScript template for Create React App.
Latest version: 2.0.7

# @chakra-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 @chakra-ui/typescript
```
npm package: @packpackman/css-reset
Description: CSS reset component for Chakra UI
Author: Segun Adebayo
Latest version: 2.3.0

# @chakra-ui/css-reset

A CSS Reset component for Chakra UI components.

## Installation

```sh
npm i @chakra-ui/css-reset
# or
yarn add @chakra-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: @packpackman/dom-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/dom-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/dom-utils
# or
npm i @chakra-ui/dom-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/editable
Description: React component used to build inline-editable components
Author: Segun Adebayo
Latest version: 3.1.0

# @chakra-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 @chakra-ui/editable

# or

npm i @chakra-ui/editable
```

## Import component

```js
import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"
```

## Usage

```jsx
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>
```
npm package: @packpackman/event-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.8

# @chakra-ui/number-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/number-utils
# or
npm i @chakra-ui/number-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/gatsby-plugin
Description: Drop-in Chakra UI support for Gatsby sites
Author: Alex Luong
Latest version: 3.1.3

# @chakra-ui/gatsby-plugin

Gatsby plugin for adding Chakra UI

## Installation

⚡ To use Chakra UI in your Gatsby site, you need to install the plugin and its
peer dependencies.

```sh
npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

# or

yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

## Usage

1. Add `@chakra-ui/gatsby-plugin` as a plugin in your Gatsby config.

```js
// gatsby-config.js
module.exports = {
  plugins: ["@chakra-ui/gatsby-plugin"],
}
```

2. Use Chakra ⚡

```jsx
// src/pages/index.js
import React from "react"
import { Box, Text } from "@chakra-ui/react"

function IndexPage() {
  return (
    <Box p={8}>
      <Text fontSize="xl">Hello World</Text>
    </Box>
  )
}

export default IndexPage
```

## Plugin options

By default, this plugin adds the main context provider to make all components
work correctly.

- **ChakraProvider:** Your custom theme and all
  [ChakraProvider Props](https://chakra-ui.com/docs/getting-started#chakraprovider-props)
  are passed to this instance

```jsx
<ChakraProvider theme={theme} resetCSS={resetCSS} portalZIndex={portalZIndex}>
  {element}
</ChakraProvider>
```

You can disable either of these with Gatsby options:

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@chakra-ui/gatsby-plugin",
      options: {
        /**
         * @property {boolean} [resetCSS=true]
         * if `false`, this plugin will not use `<CSSReset />
         */
        resetCSS: true,
        /**
         * @property {number} [portalZIndex=40]
         * The z-index to apply to all portal nodes. This is useful
         * if your app uses a lot z-index to position elements.
         */
        portalZIndex: 40,
      },
    },
  ],
}
```

## Customizing the theme

To use customize the theme in your Gatsby site, you can shadow the plugin's
`src/@chakra-ui/gatsby-plugin/theme.js` file with your own theme:

```js
// src/@chakra-ui/gatsby-plugin/theme.js
import { extendTheme } from "@chakra-ui/react"
const theme = {
  colors: {
    primary: "rebeccapurple",
  },
}

export default extendTheme(theme) // or extendBaseTheme
```

You can learn more about custom theme at
[Chakra UI's documentation](https://chakra-ui.com/theme).

By default, Chakra provides a sensible
[default theme](https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme)
inspired by Tailwind CSS.
npm package: @packpackman/image
Description: React component for progressive image loading
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/image

The Image component is used to display images.

## Installation

```sh
yarn add @chakra-ui/image
```

## Import component

```jsx
import { Image } from "@chakra-ui/image"
```

## Basic Usage

```jsx
import React from "react"
import { Image } from "@chakra-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: @packpackman/input
Description: A React component for input text field
Author: Segun Adebayo
Latest version: 2.1.2

# Input

Input component is a component that is used to get user input in a text field.

## Installation

```sh
yarn add @chakra-ui/input

# or

npm i @chakra-ui/input
```

## Import components

```jsx
import {
  Input,
  InputGroup,
  InputAddon,
  InputLeftAddon,
  InputRightAddon,
  InputElement,
  InputLeftElement,
  InputRightElement,
} from "@chakra-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: @packpackman/layout
Description: Chakra UI layout components that give you massive speed
Author: Segun Adebayo
Latest version: 2.3.1

# @chakra-ui/layout

A set of layout primitives that make it super easy to manage page and
components.

## Installation

```sh
yarn add @chakra-ui/layout

# or

npm i @chakra-ui/layout
```

## Import Components

```jsx
import { Box, Flex, Stack, Grid, Wrap, AspectRatio } from "@chakra-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
<Wrap spacing={3}>
  <Box>Box 1</Box>
  <Box>Box 2</Box>
</Wrap>
```

Badge is used to render a badge. It can come 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 centers
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: @packpackman/lazy-utils
Description: Utility functions for lazy loading disclosure elements
Author: Segun Adebayo
Latest version: 2.0.5

# @chakra-ui/lazy-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/lazy-utils
# or
npm i @chakra-ui/lazy-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/live-region
Description: Aria live region for React components
Author: Segun Adebayo
Latest version: 2.1.0

# Live Regions

ARIA Live Regions are used to communicate important information to screen reader
software.

## Installation

```sh
yarn add @chakra-ui/live-region
```

## Import components

```jsx
import { LiveRegion, useLiveRegion } from "@chakra-ui/live-region"
```

## Usage

```jsx
import { useLiveRegion } from "@chakra-ui/live-region"

function Example() {
  const region = useLiveRegion()
  return (
    <button
      onClick={() => {
        region.speak("Filtering categories was successful")
      }}
    >
      Click me
    </button>
  )
}
```
npm package: @packpackman/media-query
Description: A React hook for changing properties or visibility of a component based on css media query
Author: Segun Adebayo
Latest version: 3.3.0

# Media Query

A Quick description of the component

## Installation

```sh
yarn add @chakra-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: @packpackman/merge-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.7

# @chakra-ui/extend-theme

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/merge-utils
# or
npm i @chakra-ui/merge-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/next-js
Description: Chakra UI Integrations for Next.js 13
Author: Segun Adebayo
Latest version: 2.2.0

# @chakra-ui/next-js

Chakra UI Integrations for Next.js 13

## Installation

```sh
yarn add @chakra-ui/next-js
# or
npm i @chakra-ui/next-js
```

## 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/number-input
Description: An accessible numeric input alternative to <input type='number' />
Author: Segun Adebayo
Latest version: 2.1.2

# @chakra-ui/number-input

The NumberInput component is similar to the [Input](/input), but it has controls
for incrementing or decrementing numeric values.

It follows the
[WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#spinbutton)
for the Spinbutton widget.

## Installation

```sh
yarn add @chakra-ui/number-input

# or

npm i @chakra-ui/number-input
```

## Import components

```js
import {
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
} from "@chakra-ui/react"
```

## Usage

// TO DO
npm package: @packpackman/number-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.7

# @chakra-ui/number-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/number-utils
# or
npm i @chakra-ui/number-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/object-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/object-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/object-utils
# or
npm i @chakra-ui/object-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/pin-input
Description: A React component optimized for entering sequences of digits
Author: Segun Adebayo
Latest version: 2.1.0

# Pin Input

The PinInput 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 @chakra-ui/pin-input

or

npm i @chakra-ui/pin-input
```

## Import component

```jsx
import {
  PinInput,
  PinInputField,
  usePinInput,
  usePinInputField,
} from "@chakra-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

```tsx
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: @packpackman/popover
Description: A React component to render that renders its content in a popover
Author: Segun Adebayo
Latest version: 2.2.1

# @chakra-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 @chakra-ui/popover

# or

npm i @chakra-ui/popover
```

## Import components

```jsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from "@chakra-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 accessibility.

> **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: @packpackman/portal
Description: React component used to render children outside the DOM hierarchy of the parent component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/portal

A wrapper for rendering components in React Portals, with support for nested
portals and stacking.

## Installation

```sh
yarn add @chakra-ui/portal

# or

npm i @chakra-ui/portal
```

## Import components

```jsx
import { Portal, PortalManager } from "@chakra-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: @packpackman/provider
Description: Theme and components agnostic ChakraProvider
Author: Segun Adebayo
Latest version: 2.4.2

# @chakra-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 `@chakra-ui/react` instead;

## Installation

```sh
yarn add @chakra-ui/provider

# or

npm i @chakra-ui/provider
```

## Usage

As the default theme and config is not included, you will need a theme object
following 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 "@chakra-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: @packpackman/radio
Description: A React component to render custom Radio input types
Author: Segun Adebayo
Latest version: 2.1.2

# Radio

Radio component is used in forms when a user needs to select a single value from
several options.

## Installation

```sh
yarn add @chakra-ui/radio

# or

npm i @chakra-ui/radio
```

## Import component

```jsx
import { Radio } from "@chakra-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: @packpackman/react-children-utils
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.6

# @chakra-ui/react-children-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-children-utils
# or
npm i @chakra-ui/react-children-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/react-context
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-callback-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-callback-ref
# or
npm i @chakra-ui/react-use-callback-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-env
Description: Component and hook for handling window and document object in iframe or ssr environment
Author: Segun Adebayo
Latest version: 3.1.0

# @chakra-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 @chakra-ui/react-env
# or
npm i @chakra-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 "@chakra-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/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-types
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.0.7

# @chakra-ui/react-types

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-types
# or
npm i @chakra-ui/react-types
```

## 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-animation-state
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/use-animation-state

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @chakra-ui/react-use-animation-state
# or
npm i @chakra-ui/react-use-animation-state
```

## 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-callback-ref
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-callback-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-callback-ref
# or
npm i @chakra-ui/react-use-callback-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-controllable-state
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-ui/react-use-callback-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-callback-ref
# or
npm i @chakra-ui/react-use-callback-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).