open-index/open-npm huggingface dataset:
npm package: @naturalpay/cli
Description: CLI for Natural Payments — create payments, check balances, manage agents
Latest version: 0.1.3

# Natural CLI

[![NPM version](https://img.shields.io/npm/v/@naturalpay/cli.svg)](https://npmjs.org/package/@naturalpay/cli)

Command-line interface for Natural Payments — create payments, check balances, and manage agents from your terminal.

## Installation

```sh
npm install -g @naturalpay/cli
```

Requires Node.js 20+. Run `natural doctor` to verify your setup.

## Documentation

Full documentation — quick start, authentication, commands, flags, JSON mode, and exit codes — lives at **[docs.natural.co/guides/platform/cli](https://docs.natural.co/guides/platform/cli)**.

## License

MIT
npm package: @naturalpay/sdk
Description: Natural Payments SDK - AI agent payment infrastructure
Author: Natural
Latest version: 0.1.4

# Natural Payments SDK

[![NPM version](https://img.shields.io/npm/v/@naturalpay/sdk.svg)](https://npmjs.org/package/@naturalpay/sdk)

The Natural Payments SDK provides access to the [Natural API](https://docs.natural.co) from server-side TypeScript and JavaScript applications, for building AI agents that send, receive, and manage money.

## Documentation

Full documentation, guides, and API reference are available at **[docs.natural.co/guides/platform/sdks](https://docs.natural.co/guides/platform/sdks)**.

## Installation

```sh
npm install @naturalpay/sdk
```

## Getting started

```typescript
import { NaturalClient } from '@naturalpay/sdk';

const client = new NaturalClient({ apiKey: process.env['NATURAL_API_KEY'] });

const payment = await client.payments.create({
  recipient: 'alice@example.com',
  amount: 5000,
  memo: 'Payment for consulting',
  agentId: 'agt_019cd1798d637a4da75dce386343931d',
  instanceId: 'session-abc123',
  customerPartyId: 'pty_019cd34e27c179bfbbe6870486b11b67',
  idempotencyKey: 'pay_unique_key',
});

console.log(payment.transactionId);
```

## MCP server

The SDK ships with an MCP server for AI agent integration with Claude Desktop, Cursor, and other MCP clients:

```sh
npx @naturalpay/sdk mcp serve
```

See [docs.natural.co/guides/platform/sdks#mcp-server](https://docs.natural.co/guides/platform/sdks#mcp-server) for client configuration.

## Requirements

Node.js 18+

## License

MIT
npm package: @nature-ui/alert
Description: A React component used to alert users of a particular screen area that needs user action
Author: Divine Hycenth
Latest version: 2.2.13

# Alert `@nature-ui/alert`

> # Alert

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

## Installation

```sh
npm i @nature-ui/alert

# or

yarn add @nature-ui/alert
```

## Usage

```js
import Alert from '@nature-ui/alert';

() => {
  return (
    <Alert status='success' alertTitle='Wow: ' variant='subtle'>
      This is a success alert!
    </Alert>
  );
};
```
npm package: @nature-ui/avatar
Description: A base React component for icons
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/avatar

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

## Installation

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

# or

npm i @nature-ui/avatar
```

## Import components

```jsx
import { Avatar, AvatarGroup } from '@nature-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 size='2xl' name='Divine Nature' src='https://tinyurl.com/y4mmkc9v' />
  <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: @nature-ui/breadcrumb
Description: A base React component for icons
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-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 @nature-ui/breadcrumb

# or

npm i @nature-ui/breadcrumb
```

## Import components

Nature 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, obviously.

```js
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
} from '@nature-ui/breadcrumb';
```

## Usage

Add `isCurrent` 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 isCurrent>
    <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 isCurrent>
    <BreadcrumbLink href='/contact'>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

### Using an icon as the separator

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

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

  <BreadcrumbItem isCurrent>
    <BreadcrumbLink href='/contact'>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```
npm package: @nature-ui/button
Description: A React component that is a base button.
Author: Divine Hycenth
Latest version: 2.2.13

# Button `@nature-ui/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 @nature-ui/button

# or

npm i @nature-ui/button
```

## Import component

```jsx
import { Button } from '@nature-ui/button';
```

## Usage

```jsx
<Button color='green-500'>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
<Stack spacing='1rem'>
  <Button variant='solid'>Button</Button>
  <Button variant='outline'>Button</Button>
  <Button variant='ghost'>Button</Button>
  <Button variant='link'>Button</Button>
</Stack>
```

### Button loading state

Pass `isLoading` prop to the Button component to show it's 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 color='blue-500' variant='solid'>
    Email
  </Button>

  <Button isLoading color='blue-500' variant='outline' spinner={<BarSpinner />}>
    Submit
  </Button>
</Stack>
```
npm package: @nature-ui/checkbox
Description: A React Checkbox component for use in forms
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/checkbox

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

## Installation

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

# or

npm i @nature-ui/checkbox
```

## Import component

```jsx
import { Checkbox, CheckboxGroup } from '@nature-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']}>
  <Stack spacing={24} row>
    <Checkbox value='one'>One</Checkbox>
    <Checkbox value='two'>Two</Checkbox>
    <Checkbox value='three'>Three</Checkbox>
  </Stack>
</CheckboxGroup>
```
npm package: @nature-ui/clickable
Description: React hook and component that implements native button interactions
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/clickable

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

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

## Installation

```jsx
import { useClickable } from '@nature-ui/clickable';
```

## Usage

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

// use the clickable primitive
const Example = () => (
  <Clickable isDisabled isFocusable>
    {({ disabled, 'aria-disabled': Disabled }: ClickableProps) => {
      return (
        <span
          style={{
            opacity: disabled || Disabled ? 0.5 : 1,
            pointerEvents: disabled || Disabled ? 'none' : 'initial',
          }}
        >
          Clickable
        </span>
      );
    }}
  </Clickable>
);
```
npm package: @nature-ui/close-button
Description: A React and Nature UI close button component.
Author: Divine Hycenth
Latest version: 2.1.13

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

# or

npm i @nature-ui/close-button
```

## Import component

```jsx
import { CloseButton } from '@nature-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: @nature-ui/collapse
Description: An accessible auto-height and collapse component for elements with variable (and dynamic) height
Author: Divine Hycenth
Latest version: 1.1.3

# 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.

## Installation

```sh
yarn add @nature-ui/collapse

# or

npm i @nature-ui/collapse
```

## Import component

```jsx
import { Collapse } from '@nature-ui/collapse';
```

## Usage

```jsx
function SampleSpring() {
  const { isOpen, onToggle } = useDisclosure();
  return (
    <>
      <Button onClick={onToggle}>Click</Button>
      <Collapse isOpen={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} isOpen={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}>
        Show {show ? 'Less' : 'More'}
      </Button>
    </>
  );
}
```

## With string as child

```jsx
function Example() {
  const { isOpen, onToggle } = useDisclosure();
  return (
    <>
      <button style={{ marginBottom: 10 }} onClick={onToggle}>
        Click
      </button>
      <Collapse isOpen={isOpen}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
      </Collapse>
    </>
  );
}
```
npm package: @nature-ui/container
Description: Container, nature-ui, component, Nature-UI container
Author: Divine Hycenth
Latest version: 2.0.13

# `@nature-ui/container`

> Container is just a div component with different sizes

## Installation

```sh
yarn add @nature-ui/container

# or

npm i @nature-ui/container
```

## Import Components

```jsx
import Container from '@nature-ui/container';
```

## Usage with sizes

```jsx
<span>
  <Container className='bg-gray-300' size='xs'>
    I love Nature
  </Container>
  <Container className='bg-blue-300' size='lg'>
    I love Nature
  </Container>
  <Container className='bg-green-300' size='md'>
    I love Nature
  </Container>
  <Container className='bg-blue-300' size='sm'>
    I love Nature
  </Container>
  <Container className='bg-red-300' size='xs'>
    I love Nature
  </Container>
</span>
```
npm package: @nature-ui/counter
Description: A React hook for managing counters
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-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 @nature-ui/number-input

# or

npm i @nature-ui/number-input
```

## Import components

```js
import {
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
} from '@nature-ui/react';
```

## Usage

// TO DO
npm package: @nature-ui/descendant
Description: Register child nodes of a react element for better accessibility
Author: Divine Hycenth
Latest version: 2.2.13

# Descendant

A descendant index solution for better accessibility support in compound
components.

> **Note 🚨:** This package is primarily intended for internal use by the Nature
> UI library. You should not use it directly in your production projects.

## Installation

```sh
yarn add @nature-ui/descendant

# or

npm i @nature-ui/descendant
```
npm package: @nature-ui/drawer
Description: React component the renders a Drawer from the edges of the screen
Author: Divine Hycenth
Latest version: 2.2.13

# Drawer

The Drawer component is a panel that slides out from the edge of the screen. It
can be useful when you need users to complete a task or view some details
without leaving the current page.

## Installation

```sh
yarn add @nature-ui/drawer
```

## Import component

```jsx
import { Drawer, DrawerContent, DrawerOverlay } from '@nature-ui/drawer';
```

## Usage

```jsx
<>
  <button onClick={() => setOpen(!open)}>Open</button>
  <Drawer placement='right' isOpen={open} onClose={() => setOpen(false)}>
    <DrawerOverlay>
      <DrawerContent>
        <div>This is the drawer content</div>
        <button>This is a button</button>
      </DrawerContent>
    </DrawerOverlay>
  </Drawer>
</>
```
npm package: @nature-ui/focus-lock
Description: React focus lock for all Nature UI components
Author: Divine Hycenth
Latest version: 2.2.13

# Focus Lock

A React component that traps focus within an element. It's useful for modal
dialogs and popovers.

## Installation

```sh
yarn add @nature-ui/focus-lock

# or

npm i @nature-ui/focus-lock
```
npm package: @nature-ui/form-control
Description: React component to provide validation states to form fields
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/form-control

Form Control component is used to manange form controls such input fields,
checkbox and radio buttons. It provides components and context that make your
form fields accessible by default.

- **FormControl** - the top level component that provides context
- **FormLabel** - the visible form control label
- **FormHelperText** - the from control's assistive text that guides the user.
  If added, it hides when there's an error in the field.
- **FormErrorMessage** - the form control's error feedback. If there's a help
  text visible when the control is invalid, it replaces the help text, to
  prevent content shift
- **FormErrorIcon** - an icon that indicates the error state for colorbind
  users.

## Installation

```sh
yarn add @nature-ui/form-control

# or

npm install @nature-ui/form-control
```

## Import component

```jsx
import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  FormErrorIcon,
} from '@nature-ui/form-control';
```

## Basic Usage

The `FormControl` component automatically provides the `id` for the input
component to be fully accessible.

### With Input

```jsx
<FormControl>
  // automatically gets `htmlFor`
  <FormLabel>First name:</FormLabel>
  // automatically gets `id` and `aria-*` properties
  <Input placeholder='Enter your first name...' />
  // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`
  <FormHelpText>Keep your first name short</FormHelpText>
  // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
  <FormErrorMessage>First name is invalid</FormErrorMessage>
</FormControl>
```

### With Checkbox group

```jsx
<FormControl as='fieldset'>
  <FormLabel as='legend'>Who is better:</FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>
```

## Focus, Invalid and Disabled States

- When the `Input` component receives focus, it notifies the `FormControl` and
  adds `data-focus` on the `FormLabel`. Simply pass `_focus` to the `FormLabel`
  to style this state.

- If `isInvalid` is passed to the `FormControl`, it notifies the `Input` and
  adds `data-invalid` to the `FormLabel` so you can change the styles of the
  label

- If `isDisabled` is passed to the `FormControl`, it makes the `Input` disabled,
  and adds `data-disabled` to the `FormLabel` so you can change the styles of
  the label

## Changing the requried indicator

To change the required indicator beside the `FormLabel`, simply pass the
`indicator` prop and set it to your custom indicator components.

```jsx
<FormControl as='fieldset'>
  <FormLabel as='legend' indicator={CustomIndicator}>
    Who is better:
  </FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>
```
npm package: @nature-ui/image
Description: A base React component for icons
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/image

The Image component is used to display images.

## Installation

```sh
yarn add @nature-ui/image
```

## Import component

```jsx
import { Image } from '@nature-ui/image';
```

## Basic Usage

```jsx
import React from 'react'
import { Image } from '@nature-ui/image'
​
const Example = () => (
  <Image src="photo.png"  fallbackSrc="https://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'
  />
  <Image
    src='https://bit.ly/dan-abramov'
    fallback={
      <div
        style={{
          width: 240,
          height: 240,
          background: 'red',
        }}
      />
    }
  />
</>
```
npm package: @nature-ui/input
Description: A React component for input text field
Author: Divine Hycenth
Latest version: 2.2.13

# Input

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

## Installation

```sh
yarn add @nature-ui/input

# or

npm i @nature-ui/input
```

## Import components

```jsx
import { Input } from '@nature-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. nature UI input size
values are: `sm`, `md` and `lg`. The size of the input component is `md` by
default.

```jsx
<>
  <Input size='sm' placeholder='A simple placeholder' />

  <Input size='md' 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.
nature UI input variant types are: `outline`, `filled`, `flushed` and
`unstyled`.

```jsx
<>
  <Input variant='outline' placeholder='Outline' />
  <Input variant='filled' placeholder='Filled' />
  <Input variant='flushed' placeholder='Flushed' />
  <Input variant='unstyled' placeholder='Unstyled' />
</>
```

## Input with addon

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

```jsx
<>
  <Input
    placeholder='Phone number...'
    type='number'
    addonLeft='+234'
    size='sm'
  />

  <br />

  <Input
    placeholder='your-website'
    defaultValue='divinehycenth'
    addonLeft='https://'
    addonRight='.com'
  />
</>
```

## Input with custom element

```jsx
<Input
  placeholder='Enter amount'
  type='number'
  addonRight={<CheckIcon color='green' />}
/>
```
npm package: @nature-ui/layout
Description: A React component for displaying spinners and loaders
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-ui/layout

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

## Installation

```sh
yarn add @nature-ui/layout

# or

npm i @nature-ui/layout
```

## Import Components

```jsx
import { Box, Stack, Badge, Divider } from '@nature-ui/layout';
```

## Usage

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

```jsx
<Box className='text-blue-500 hover:bg-red-600 hover:text-white'>
  Welcome to Box
</Box>
```

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

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

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

```jsx
<Badge variant='solid' color='blue-500'>
  Verified <FaCheck />
</Badge>
```
npm package: @nature-ui/modal
Description: An accessible dialog (modal) component for React & Nature UI
Author: Divine Hycenth
Latest version: 2.2.13

# Modal

A modal is a window overlaid on either the primary window or another dialog
window. Contents behind a modal dialog are **inert** meaning that users cannot
interact with content behind the dialog.

## Installation

```sh
yarn add @nature-ui/modal

# or

npm i @nature-ui/modal
```

## Import components

```jsx
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  ModalCloseButton,
} from '@nature-ui/core';
```

## Usage

When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbled element, focus is set on the `ModalContent`.

```jsx
export const BasicUsage = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open</Button>

      <Modal
        variant='blur'
        scrollBehavior='outside'
        isOpen={isOpen}
        onClose={onClose}
      >
        <ModalOverlay>
          <ModalContent>
            <ModalCloseButton />

            <ModalHeader>Welcome Home</ModalHeader>

            <ModalBody>Sit nulla est ex deserunt ...</ModalBody>

            <ModalFooter>
              <Button
                onClick={onClose}
                className='bg-gray-200 hover:bg-gray-300 transition duration-200 mr-3'
              >
                Cancel
              </Button>
              <Button className='bg-blue-600 text-white hover:bg-blue-500 ml-3'>
                Save
              </Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  );
};
```

### Control Focus when Modal closes

When the dialog closes, it returns focus to the element that triggered. Set
`finalFocusRef` to element that should receive focus when the modal opens.

```jsx

export const ReturnFocus = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const finalRef = React.useRef<any>();

  return (
    <>
      <div ref={finalRef} tabIndex={-1} aria-label='Focus moved to this box'>
        Some other content that&apos;ll receive focus on close.
      </div>

      <Button mt={4} onClick={onOpen}>
        Open Modal
      </Button>

      <Modal
        variant='normal'
        finalFocusRef={finalRef}
        isOpen={isOpen}
        onClose={onClose}
      >
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              Sit nulla est ex ...
            </ModalBody>

            <ModalFooter>
              <Button onClick={onClose}>Close</Button>
              <Button variant='ghost'>Secondary Action</Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  );
};

```
npm package: @nature-ui/number-input
Description: A React hook for managing counters
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-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 @nature-ui/number-input

# or

npm i @nature-ui/number-input
```

## Import components

```js
import {
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
} from '@nature-ui/react';
```

## Usage

// TO DO
npm package: @nature-ui/popover
Description: A React component to render that renders it's content in a popover
Author: Divine Hycenth
Latest version: 2.2.13

# Popover

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

## Installation

```sh
yarn add @nature-ui/popover

# or

npm i @nature-ui/popover
```

## Import components

```jsx
import {
  usePopover,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverArrow,
  PopoverCloseButton,
} from '@nature-ui/core';
```

## 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's critical for accessiblity.

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

```jsx
<Popover>
  <PopoverTrigger>
    <Button variant='solid' className=''>
      Trigger
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverCloseButton />
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
  </PopoverContent>
</Popover>
```
npm package: @nature-ui/portal
Description: React component used to render children outside the DOM hierarchy of the parent component
Author: Divine Hycenth
Latest version: 2.2.13

# Portal

A wrapper for rendering components in React Portals, with support for nested
portals and stacking. No need to use `z-index` at all with this portal, that's
right!

## Installation

```sh
yarn add @nature-ui/portal

# or

npm i @nature-ui/portal
```

## Import components

```jsx
import { Portal, PortalManager } from '@nature-ui/portal';
```

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

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

### Basic usage

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

> It'll only render into `document.body` if you don't include `PortalManager`.

```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>
```
npm package: @nature-ui/radio
Description: A React component to render custom Radio input types
Author: Divine Hycenth
Latest version: 2.2.13

# Radio

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

## Installation

```sh
yarn add @nature-ui/radio

# or

npm i @nature-ui/radio
```

## Import component

```jsx
import { Radio } from '@nature-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: @nature-ui/react-types
Description: A Quick description of the component
Author: Segun Adebayo
Latest version: 0.0.4

# @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: @nature-ui/react-utils
Description: React utilities and helpers for Nature UI
Author: Divine Hycenth
Latest version: 2.2.13

# @nature-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 @nature-ui/react-utils
# or
npm i @nature-ui/react-utils
```
npm package: @nature-ui/spinner
Description: A React component for displaying spinners and loaders
Author: Divine Hycenth
Latest version: 2.2.13

# Spinner

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

## Installation

```sh
yarn add @nature-ui/spinner

# or

npm i @nature-ui/spinner
```

## Import component

```jsx
import { Spinner } from '@nature-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 with color

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

```jsx
<Spinner color='red-500' />
```
npm package: @nature-ui/utils
Description: Utility functions
Author: Divine Hycenth
Latest version: 2.2.13

# `@nature-ui/utils`

Shared utilities for various Nature UI components

> **Note **: This package is intended for internal use by the Nature UI
> components.

## Installation

```sh
yarn add @nature-ui/utils

// TODO: DEMONSTRATE API
```

## Usage

```jsx
import utils from '@nature-ui/utils';
```
npm package: @nature-ui/visually-hidden
Description: A React component that visually hides it's content
Author: Divine Hycenth
Latest version: 2.2.13

# 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 @nature-ui/visually-hidden

# or

npm i @nature-ui/visually-hidden
```

## Import component

```jsx
import { VisuallyHidden } from '@nature-ui/visually-hidden';
```

## Basic usage

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

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

## References

- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- https://a11yproject.com/posts/how-to-hide-content/
npm package: @naturefw/nf-state
Description: 轻量级状态管理，直接使用 Vue3 的 reactive 实现，TS版。
Latest version: 0.4.20

# nf-state-轻量级状态管理

#### Description
vite + vue3 做一个轻量级的状态管理。

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @naturefw/press-edit
Description: 帮助文档在线编辑和展示
Latest version: 0.1.24

# nf-press-edit 帮助文档的管理平台（源码）

> 源码目录：https://naturefw.gitee.io/  

#### 介绍
在线文档的编辑环境，可以编写文档。这里是函数库。

#### 技术栈
* vite: ^2.7.0
* vue: ^3.2.23 
* axios: ^0.25.0 获取json格式的配置和文档 （CDN方式使用）
* element-plus: ^2.0.2 UI库
* @element-plus/icons-vue: ^0.2.4 图标
* @naturefw/ui-elp: ^0.1.0 二次封装的UI库
* @kangc/v-md-editor: ^2.3.13 md 编辑器
* vite-plugin-prismjs: ^0.0.8 代码高亮
* @naturefw/nf-state: ^0.2.4 状态管理
* @naturefw/storage: ^0.2.3 访问 indexedDB

#### 安装教程

1.  yarn
2.  yarn dev -- 运行
3.  yarn lib -- 打包库文件
4.  yarn build -- 打包网站

或者

* yarn add @kangc/v-md-editor@next
* yarn add vite-plugin-prismjs --dev
* yarn add element-plus
* yarn add @element-plus/icons-vue
* yarn add @naturefw/ui-elp
* yarn add @naturefw/nf-state
* yarn add @naturefw/storage
* yarn add axios

#### 源码
https://gitee.com/nfpress/nf-press-edit

[![帮助文档/nf-press-edit_帮助文档的管理平台](https://gitee.com/nfpress/nf-press-edit/widgets/widget_card.svg?colors=ffffff,1e252b,323d47,455059,d7deea,99a0ae)](https://gitee.com/nfpress/nf-press-edit)

#### 在线演示
https://nfpress.gitee.io/nf-press-edit/

#### 在线文档
https://nfpress.gitee.io/nf-press-edit/

#### 使用说明

如果执行 yarn dev 时出现``` error: [plugin: vite:dep-scan] ```这样的错误的话，请删除distp文件夹，然后再执行即可。



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @naturefw/press-view
Description: 帮助文档显示工具
Latest version: 0.1.0

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
npm package: @naturefw/storage
Description: 基于 Promise 对indexedDB、webSQL进行封装，在 vue3 环境里使用。
Latest version: 0.2.6

# nf-webstorage-前端存储的管理

#### Description
vite + vue3 做一个前端存储的管理类，包括indexedDB、webSQL和localstorage、localsession。

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @naturefw/ui-core
Description: 二次封装 UI库 共用的 JavaScript 函数库。TS 版
Latest version: 0.2.18

# nf-ui-controller-UI库的二次封装的共用 JavaScript 函数

#### Description
对UI库做二次封装的纯JavaScript函数，支持更多的UI库的时候便于复用。

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @naturefw/ui-elp
Description: 基于 element-plus 的二次封装。TS 版
Latest version: 0.2.9

# nf-ui-elementPlus-基于 element-plus 的二次开发

#### Description
封装UI库（elementPlus），实现更简洁的使用方式。

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @natuurlijklevi/ui-components
Description: A reusable library of UI components for your projects for Turborepo with React, Next.js and Typescript.
Latest version: 1.1.1

# UI Components

A reusable library of UI components for your projects for Turborepo with React, Next.js and Typescript.

## Installation

1. **Install the package:**

    ```bash
    npm i @natuurlijklevi/ui-components
    ```

2. **Install Tailwind CSS** (required):

    Follow the [Turborepo Tailwind CSS installation guide](https://turborepo.com/docs/guides/tools/tailwind#guide) for your project.
    > NOTE: When you follow the Tailwind CSS guide, you need to select 'Using PostCSS' instead of 'Using Vite' because that works best for Next.js

3. **Register Tailwind source paths** in your `packages/tailwind-config/shared-styles.css` file:

    ```css
    @source '../../packages/**/*.{js,ts,jsx,tsx}';
    @source '../../apps/**/*.{js,ts,jsx,tsx}';
    ```

## Usage

Import and use components in your React project:

```jsx
import { ButtonTw } from '@natuurlijklevi/ui-components';

function App() {
  return <ButtonTw>Click me</ButtonTw>;
}
```

## Storybook Integration

To view and develop components in Storybook:

1. **Import stories:**

    In your `.storybook/main.ts` (in the apps/docs or storybook folder), add the following to the `stories` array:

    ```ts
    module.exports = {
      stories: [
         "../../../packages/ui-components/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
         // other story paths...
      ],
      // ...other config
    };
    ```

2. **Restart Storybook** to load the new stories.

## License

MIT