open-index/open-npm huggingface dataset:
npm package: @nextools/suppress-experimental-warnings
Description: Suppress experimental warnings in Node.js
Latest version: 0.1.0

# @nextools/suppress-experimental-warnings ![npm](https://flat.badgen.net/npm/v/@nextools/suppress-experimental-warnings)

Suppress experimental warnings in Node.js.

* https://github.com/nodejs/node/issues/30810
* https://github.com/nodejs/node/pull/36137

## Install

```sh
$ yarn add @nextools/suppress-experimental-warnings
```

## Usage

```sh
node --require @nextools/suppress-experimental-warnings --experimental-import-meta-resolve --experimental-loader @nextools/typescript-esm-loader ./module.ts
```
npm package: @nextools/typescript-esm-loader
Description: TypeScript ESM Loader
Latest version: 0.1.1

# @nextools/typescript-esm-loader ![npm](https://flat.badgen.net/npm/v/@nextools/typescript-esm-loader)

Experimental TypeScript ESM Loader for Node.js >= 12.17.0.

## Install

```sh
$ yarn add @nextools/typescript-esm-loader
```

## Usage

```sh
node --require @nextools/suppress-experimental-warnings --experimental-import-meta-resolve --experimental-loader @nextools/typescript-esm-loader ./module.ts
```
npm package: @nextorders/avatar
Description: A toolkit for generating personalized SVG avatars
Latest version: 1.0.3

# Avatar 👩‍🎨

[![npm version](https://badge.fury.io/js/%40nextorders%2Favatar.svg)](https://www.npmjs.com/package/@nextorders/avatar)

The `@nextorders/avatar` package allows you to easily generate SVG avatars.

Based on the [Open Peeps](https://www.openpeeps.com/) set by Pablo Stanley, which is licensed under [CC0 1.0](https://creativecommons.org/publicdomain/zero/1.0/).

![Avatars](https://github.com/user-attachments/assets/b4921fb0-97b9-4ccc-af64-9f81f1ba07a8)

## Installation

You can install the library via npm:

```bash
npm install @nextorders/avatar
```

## Usage

To generate an avatar, call the `createAvatar()` function and pass the options:

```typescript
type AvatarOptions = {
  seed: string
  gender?: Gender
  clothing?: 'amber' | 'green' | 'blue' | 'teal' | 'pink' | 'violet'
  emotion?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
}
```

## License

This project is licensed under the MIT License.
npm package: @nextpertise/readme-com-frontend
Description: A Vue.js frontend application for README.com changelog management
Latest version: 0.1.8

# Publishing a new package
1. Tag a new version `git flow release start x.x.x`
2. Follow release steps, update version in package.json
3. Push the tag to github `git push --tags`
4. Create a new release in the Github UI using the publish tags
npm package: @nextplus/addons-cli
Description: NextPlus addons CLI
Latest version: 0.0.5

# @nextplus/addons-cli (npaddons)

A simple CLI to publish NextPlus Addons to the Addons Server.

## Install

```bash
npm i -g @nextplus/addons-cli
```

Verify:

```bash
npaddons --help
```

## Commands

- `npaddons set-server <url>`: Set the server base URL (defaults to `https://addons.nextplus.io`).
- `npaddons set-token <token>`: Set the authentication token used to talk to the server.
- `npaddons publish <folder>`: Publish the folder contents to the server using a presigned upload.

## Usage

1. Set the token (you receive it out-of-band):

```bash
npaddons set-token YOUR_TOKEN_HERE
```

2. Optional: Override the server URL (default is `https://addons.nextplus.io`):

```bash
npaddons set-server https://addons-test.nextplus.io
```

3. Publish a folder (absolute or relative path):

```bash
npaddons publish ./build
```

During publish, the CLI will:

- Validate the folder size is ≤ 50 MB (sum of file sizes).
- Validate `index.html` exists at the root of the provided folder.
- Validate there is no `node_modules` directory at the folder root.
- Request a signed upload from the server and upload all files recursively, showing a progress bar.

## Troubleshooting

- 401 Unauthorized: Ensure you ran `npaddons set-token` with a valid token.
- Invalid URL: Use `http://` or `https://` (e.g., `npaddons set-server https://addons.nextplus.io`).
- Validation errors: Ensure `index.html` exists, the total size ≤ 50MB, and no `node_modules` in the root.

## Uninstall

```bash
npm uninstall -g @nextplus/addons-cli
```
npm package: @nextpush/sdk-expo
Description: This package is meant to be installed in Expo managed projects to communicate with NextPush Server
Latest version: 0.1.51

![Logo](images/logo.png)
# NextPush - SDK Expo

This package is meant to be installed in Expo managed projects to communicate with NextPush Server

## Installation

Install the SDK

```bash 
  npm i @nextpush/sdk-expo
  //OR
  yarn add @nextpush/sdk-expo
```


## Usage/Examples

```javascript
import NP from '@nextpush/sdk-expo';

NP.initialize(API_KEY, APP_VERSION)

NP.setExpoPushToken(EXPO_PUSH_TOKEN)

NP.setUserId(USER_ID)

NP.logEvent(EVENT_NAME)

```
npm package: @nextpy/accordion
Description: A simple and accessible accordion component for React & Chakra UI
Author: Segun Adebayo
Latest version: 2.3.1

# @chakra-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 @chakra-ui/accordion

# or

npm i @chakra-ui/accordion
```

## Import Components

```jsx
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
} from "@chakra-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 a 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: @nextpy/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: @nextpy/anatomy
Description: The anatomy of all chakra components
Author: Segun Adebayo
Latest version: 2.2.2

# @chakra-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 @chakra-ui/anatomy
# or
npm i @chakra-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: @nextpy/avatar
Description: A React component used to show users avatar or initials
Author: Segun Adebayo
Latest version: 2.3.0

# @chakra-ui/avatar

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

## Installation

```sh
yarn add @chakra-ui/avatar

# or

npm i @chakra-ui/avatar
```

## Import components

```jsx
import { Avatar, AvatarGroup } from "@chakra-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: @nextpy/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: @nextpy/button
Description: A React component that is a base button.
Author: Segun Adebayo
Latest version: 2.1.0

# 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 @chakra-ui/button

# or

npm i @chakra-ui/button
```

## Import component

```jsx
import { Button } from "@chakra-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: @nextpy/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: @nextpy/checkbox
Description: A React Checkbox component for use in forms
Author: Segun Adebayo
Latest version: 2.3.2

# @chakra-ui/checkbox

Checkbox component is used in forms when a user needs to select multiple values
from several options.

## Installation

```sh
yarn add @chakra-ui/checkbox

# or

npm i @chakra-ui/checkbox
```

## Import component

```jsx
import { Checkbox } from "@chakra-ui/checkbox"
```

## Usage

```jsx
<Checkbox>This is a checkbox</Checkbox>
```

### CheckboxGroup

CheckboxGroup is used to bind multiple checkboxes into a group, and it indicates
whether one or more options are selected.

```jsx
<CheckboxGroup defaultValue={["one", "two"]}>
  <Checkbox value="one">One</Checkbox>
  <Checkbox value="two">Two</Checkbox>
  <Checkbox value="three">Three</Checkbox>
</CheckboxGroup>
```

### Resources

- https://www.a11ymatters.com/pattern/checkbox/
- https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
npm package: @nextpy/clickable
Description: React hook and component that implements native button interactions
Author: Segun Adebayo
Latest version: 2.1.0

# @chakra-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 "@chakra-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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextpy/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: @nextqr/nextqr-cli
Description: My awesome command-line tool
Author: YOUR NAME
Latest version: 0.1.6

# node-cli-boilerplate

> Boilerplate to kickstart creating a Node.js command-line tool

This is what I use for [my own command-line tools](https://www.npmjs.com/~sindresorhus).

Also check out [`node-module-boilerplate`](https://github.com/sindresorhus/node-module-boilerplate).

## Getting started

**Click the "Use this template" button.**

Alternatively, create a new directory and then run:

```
$ curl -fsSL https://github.com/sindresorhus/node-cli-boilerplate/archive/main.tar.gz | tar -xz --strip-components=1
```

There's also a [Yeoman generator](https://github.com/sindresorhus/generator-nm).


---

**Remove everything from here and above**

---

# unicorn-fun-cli

> My awesome command-line tool

## Install

```
$ npm install --global unicorn-fun-cli
```

## Usage

```
$ unicorn-fun --help

  Usage
    $ unicorn-fun [input]

  Options
    --postfix  Lorem ipsum  [Default: rainbows]

  Examples
    $ cli-name
    unicorns & rainbows
    $ cli-name ponies
    ponies & rainbows
```
npm package: @nextra/theme-blog
Description: A Nextra theme for blogs.
Author: Dimitri POSTOLOV
Latest version: 4.3.0

# @nextra/theme-blog

A blog site theme for [Nextra](https://github.com/dimaMachina/nextra).

## Example

[site-icp9uk8zq.vercel.app](https://site-icp9uk8zq.vercel.app)
npm package: @nextract/database-prisma
Description: Prisma ORM database adapter for Nextract.js
Author: Sönke Peters
Latest version: 0.0.6

<p align="center">
    <h1 align="center">Prisma Database Adapter<p style="font-size: 1.5rem">for Nextract.js</p></h1>
</p>

<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@nextract/database-prisma">
    <img alt="" src="https://img.shields.io/npm/v/@nextract/database-prisma.svg">
  </a>
  <a aria-label="License" href="https://github.com/nextractjs/nextractjs/blob/main/LICENSE">
    <img alt="" src="https://img.shields.io/npm/l/@nextract/database-prisma.svg">
  </a>
</p>

## What's the Prisma Database Adapter for Nextract.js?

The Prisma Database Adapter connects Nextract.js to a supported database via [Prisma](https://prisma.io).
Nextract.js uses a database to store analytics data.

## Getting started

Visit https://nextractjs.org to view the full documentation.

## Author

- Sönke Peters ([@zunkp](https://twitter.com/zunkp))