### Install project dependencies

Source: https://github.com/caioedut/react-bulk/blob/main/examples/expo/README.md

Run this command in the project root to install all required packages.

```bash
npm install
```

--------------------------------

### InputPin Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/input-pin.md

Provides various examples of InputPin configurations, including basic usage, different input types, and custom lengths.

```APIDOC
## InputPin Examples

### Basic Usage

```jsx
<InputPin />
```

### Input Types

Demonstrates different `type` prop values for InputPin.

```jsx
<Grid gap maxw={400}>
    <Box>
        <Label mb={1}>Alphanumeric</Label>
        <InputPin type="alphanumeric" />
    </Box>
    <Box>
        <Label mb={1}>Numeric</Label>
        <InputPin type="numeric" />
    </Box>
    <Box>
        <Label mb={1}>Alphabetic</Label>
        <InputPin type="alphabetic" />
    </Box>
</Grid>
```

### Custom Length

Sets a custom length for the pin input.

```jsx
<InputPin length={6} />
```
```

--------------------------------

### InputDate Theming Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/input-date.md

Example of how to theme the InputDate component by defining default props and styles within the theme configuration.

```jsx
const theme = {
  components: {
    InputDate: {
      defaultProps: {
        /* ...props */
      },
      defaultStyles: {
        root: { /* ...styles */ },
      }
    }
  }
}
```

--------------------------------

### Start the development server

Source: https://github.com/caioedut/react-bulk/blob/main/examples/expo/README.md

Launches the Expo development server to run the application.

```bash
npx expo start
```

--------------------------------

### Basic Dropdown Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/dropdown.md

A simple example demonstrating how to open and close a Dropdown. Ensure the Dropdown is closed via the `onClose` prop.

```jsx
function Home() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(true)}>
        Open Dropdown
      </Button>
      <Dropdown visible={visible} w={400} onClose={() => setVisible(false)}>
        <Card>
          <Text>Dropdown is amazing!</Text>
        </Card>
      </Dropdown>
    </>
  );
}
```

--------------------------------

### Basic InputDate Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/input-date.md

A basic example of the InputDate component displaying the current date.

```jsx
<InputDate value={new Date()} />
```

--------------------------------

### Modal Theming Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/modal.md

Example of how to customize the Modal component's styles through theming. This allows for global style adjustments.

```jsx
const theme = {
  components: {
    Modal: {
      defaultStyles: {
        root: { /* ...styles */ },
        backdrop: { /* ...styles */ },
      }
    }
  }
}
```

--------------------------------

### Dropdown Placement and Positioning

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/dropdown.md

Examples demonstrating how to control the placement and position of the Dropdown.

```APIDOC
## Placement

You can use placements `top` and `bottom`. Default is `bottom`. Combine with `triggerRef` to position the `Dropdown` relative to the element.

```jsx
function Home() {
  const topTriggerRef = useRef();
  const [topVisible, setTopVisible] = useState(false);

  const bottomTriggerRef = useRef();
  const [bottomVisible, setBottomVisible] = useState(false);

  return (
    <Grid row gap>
      <Box>
        <Button ref={bottomTriggerRef} onPress={() => setBottomVisible(true)}>
          Expand to Bottom (Default)
        </Button>
        <Dropdown visible={bottomVisible} placement="bottom" triggerRef={bottomTriggerRef} onClose={() => setBottomVisible(false)}>
          <Card>
            <Text>Dropdown is amazing!</Text>
          </Card>
        </Dropdown>
      </Box>
      <Box>
        <Button ref={topTriggerRef} onPress={() => setTopVisible(true)}>
          Expand to Top
        </Button>
        <Dropdown visible={topVisible} placement="top" triggerRef={topTriggerRef} onClose={() => setTopVisible(false)}>
          <Card>
            <Text>Dropdown is amazing!</Text>
          </Card>
        </Dropdown>
      </Box>
    </Grid>
  );
}
```

## Position

You can use styles `top`, `bottom`, `left` and `right` as you want.

```jsx
function Home() {
  const triggerRef = useRef();
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button ref={triggerRef} onPress={() => setVisible(true)}>
        Open to Right
      </Button>
      <Dropdown visible={visible} triggerRef={triggerRef} t={0} b="auto" l="100%" onClose={() => setVisible(false)}>
        <Card>
          <Text>Dropdown is amazing!</Text>
        </Card>
      </Dropdown>
    </>
  );
}
```
```

--------------------------------

### Checkbox Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/checkbox.md

Examples demonstrating the usage of the Checkbox component in various scenarios.

```APIDOC
## Checkbox Examples

### Basic Usage

```jsx live
<>
    <Checkbox />
    <Checkbox unique />
</>
```

### Composition and States

```jsx live
<Box maxw={400}>
  <Grid gap>
    <Box xs>
        <Checkbox label="Checkbox" />
    </Box>
    <Box xs>
        <Checkbox label="Radio" unique />
    </Box>
  </Grid>
  <Grid gap>
    <Box xs>
        <Checkbox label="Checked" checked />
    </Box>
    <Box xs>
        <Checkbox label="Checked" unique checked />
    </Box>
  </Grid>
  <Grid gap>
    <Box xs>
        <Checkbox label="Disabled" disabled />
    </Box>
    <Box xs>
        <Checkbox label="Disabled" unique disabled />
    </Box>
  </Grid>
  <Grid gap>
    <Box xs>
        <Checkbox label="Read Only" readOnly />
    </Box>
    <Box xs>
        <Checkbox label="Read Only" unique readOnly />
    </Box>
  </Grid>
</Box>
```
```

--------------------------------

### Input Component Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/input.md

Demonstrates various ways to use the Input component, including basic configurations, different sizes, error handling, and addons.

```APIDOC
### Basic Examples

```jsx live
<Grid gap maxw={400}>
  <Box>
    <Input placeholder="Default" />
  </Box>
  <Box>
    <Input placeholder="Secure" secure />
  </Box>
  <Box>
    <Input placeholder="Read Only" readOnly />
  </Box>
  <Box>
    <Input placeholder="Disabled" disabled />
  </Box>
  <Box>
    <Input label="Label" placeholder="Label + Input" />
  </Box>
  <Box>
    <Input label="Colorful" placeholder="Label + Input + Colorful" colorful />
  </Box>
</Grid>
```

### Sizes

```jsx live
<Grid column gap maxw={400}>
  <Box>
    <Input size="xsmall" placeholder="Input (xsmall)" />
  </Box>
  <Box>
    <Input size="small" placeholder="Input (small)" />
  </Box>
  <Box>
    <Input size="medium" placeholder="Input (medium)"/>
  </Box>
  <Box>
    <Input size="large" placeholder="Input (large)"/>
  </Box>
  <Box>
    <Input size="xlarge" placeholder="Input (xlarge)"/>
  </Box>
</Grid>
```

### Error State

```jsx live
<Box maxw={400}>
    <Input placeholder="Full Name" error="Please enter your full name." />
</Box>
```

### Addons

```jsx live
function Home () {

  const CustomIcon = () => <Text>👁</Text>

  return (
    <Grid column gap maxw={400}>
      <Box>
        <Input placeholder="Username" startAddon="👤" />
      </Box>
      <Box>
        <Input placeholder="Password" endAddon={<CustomIcon/>} />
      </Box>
      <Box>
        <Input placeholder="reactbulk" startAddon="https://" endAddon=".com" />
      </Box>
    </Grid>
  )
}
```
```

--------------------------------

### Image Component Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/image.md

Illustrates various ways to use the Image component with different props.

```APIDOC
## Image Component Examples

### Sizes

```jsx
<Grid center gap>
  <Box>
    <Image source="https://i.imgur.com/HdIl3Ef.png" w={100} />
  </Box>
  <Box>
    <Image source="https://i.imgur.com/HdIl3Ef.png" h={100} />
  </Box>
  <Box>
    <Image source="https://i.imgur.com/HdIl3Ef.png" w={100} h={100} />
  </Box>
</Grid>
```

### Border Radius

```jsx
<Grid center gap>
  <Box>
    <Image source="https://i.imgur.com/HdIl3Ef.png" w={100} h={100} corners={2} />
  </Box>
  <Box>
    <Image source="https://i.imgur.com/HdIl3Ef.png" w={100} h={100} circular />
  </Box>
</Grid>
```
```

--------------------------------

### Splitter Theming Configuration

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/splitter.md

Example of how to configure default props and styles for the Splitter component within the theme.

```javascript
const theme = {
  components: {
    Splitter: {
      defaultProps: {
        direction: 'horizontal',
        /* ...props */
      },
      defaultStyles: {
        root: { /* ...styles */ },
        item: { /* ...styles */ }
      }
    }
  }
}
```

--------------------------------

### Install React Bulk Packages

Source: https://context7.com/caioedut/react-bulk/llms.txt

Install the necessary React Bulk packages based on your target platform (React Web, React Native CLI, or Expo).

```bash
# React Web (DOM)
yarn add react-dom @react-bulk/core @react-bulk/web

# React Native (CLI)
yarn add react-native-svg @react-bulk/core @react-bulk/native

# Expo (Native + optional Web)
npx expo install react-native-svg
yarn add @react-bulk/core @react-bulk/expo
```

--------------------------------

### Basic List Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/list.md

Renders a basic virtual list with 100 items. Ensure `rowHeight` is set correctly for proper rendering.

```jsx
<List height={240} rowHeight={18}>
    {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} height={18}>
            Item Child {index + 1}
        </Text>
    ))}
</List>
```

--------------------------------

### Basic Box Styling Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/box.md

Demonstrates basic styling of Box components using properties like border, padding, margin, background color, and height.

```jsx
<Grid column center>
  <Box>
    <Box border p={3}>Styled Box</Box>
  </Box>
  <Box>
    <Box border mx="auto">Styled Box</Box>
  </Box>
  <Box>
    <Box bg="primary">Styled Box</Box>
  </Box>
  <Box>
    <Box border h={80}>Styled Box</Box>
  </Box>
  <Box>
    <Box border="1px solid secondary" corners={2} p={3}>Styled Box</Box>
  </Box>
</Grid>
```

--------------------------------

### Open Toast with Options

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/hooks/use-toaster.md

Illustrates opening a toast notification using the `open` method with custom options. This example shows how to pass an object to configure the toast's content and behavior.

```javascript
toaster.open(options)
```

--------------------------------

### Drawer Component Examples

Source: https://context7.com/caioedut/react-bulk/llms.txt

Shows how to implement drawers on the right and left sides of the screen. Customize placement and maximum width using props. Ensure necessary imports.

```jsx
import { Drawer, Card, Button, Text, Divider, Box } from '@react-bulk/web'; // OR @react-bulk/native
import { useState } from 'react';

function DrawerExample() {
  const [rightVisible, setRightVisible] = useState(false);
  const [leftVisible, setLeftVisible] = useState(false);

  return (
    <Box gap={2}>
      {/* Right drawer (default) */}
      <Button onPress={() => setRightVisible(true)}>Open Right Drawer</Button>
      <Drawer
        visible={rightVisible}
        onClose={() => setRightVisible(false)}
        placement="right"
        maxw={320}
      >
        <Card h="100%">
          <Text variant="title" bold>Menu</Text>
          <Divider my={3} />
          <Box gap={2}>
            <Button variant="text" align="start">Home</Button>
            <Button variant="text" align="start">Profile</Button>
            <Button variant="text" align="start">Settings</Button>
            <Button variant="text" align="start">Logout</Button>
          </Box>
          <Divider my={3} />
          <Button onPress={() => setRightVisible(false)}>Close</Button>
        </Card>
      </Drawer>

      {/* Left drawer */}
      <Button onPress={() => setLeftVisible(true)}>Open Left Drawer</Button>
      <Drawer
        visible={leftVisible}
        onClose={() => setLeftVisible(false)}
        placement="left"
        maxw={280}
      >
        <Card h="100%">
          <Text variant="title" bold>Navigation</Text>
          <Divider my={3} />
          <Text>Left side navigation drawer</Text>
          <Button mt={4} onPress={() => setLeftVisible(false)}>Close</Button>
        </Card>
      </Drawer>
    </Box>
  );
}
```

--------------------------------

### Form Component Usage

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/form.md

Demonstrates how to import and use the Form component with basic examples of submission and cancellation.

```APIDOC
## Import

```jsx
import { Form } from '@react-bulk/web'; // OR @react-bulk/native
```

## Examples

### Basic

```jsx live
function Home() {
  function handleSubmit(event, data) {
    alert(`Your name is "${data.name || ''}"`);
  }

  function handleCancel(event, data) {
    alert('Cancelled!');
  }

  return (
    <Form onSubmit={handleSubmit} onCancel={handleCancel}>
      <Input name="name" label="Full Name" placeholder="Type your full name" />
      <Box row noWrap justifyContent="end" mt={3}>
        <Button type="cancel" variant="outline" ml={3}>Cancel</Button>
        <Button type="clear" variant="outline" ml={3}>Clear</Button>
        <Button type="submit" ml={3}>Submit</Button>
      </Box>
    </Form>
  );
}
```
```

--------------------------------

### Implement Select Component

Source: https://context7.com/caioedut/react-bulk/llms.txt

Provides examples for single and multiple selection, colorful styling, error states, addons, and disabled options.

```jsx
import { Select, Box } from '@react-bulk/web'; // OR @react-bulk/native

function SelectExample() {
  return (
    <Box maxw={400} gap={2}>
      {/* Basic select */}
      <Select
        label="Theme"
        placeholder="Select a theme"
        options={[
          { value: 'light', label: 'Light' },
          { value: 'dark', label: 'Dark' },
          { value: 'system', label: 'System' },
        ]}
      />

      {/* Colorful style */}
      <Select
        colorful
        label="Priority"
        placeholder="Select priority"
        options={[
          { value: 'low', label: 'Low' },
          { value: 'medium', label: 'Medium' },
          { value: 'high', label: 'High' },
        ]}
      />

      {/* With error */}
      <Select
        error="Please select an option"
        placeholder="Required field"
        options={[
          { value: 1, label: 'Option 1' },
          { value: 2, label: 'Option 2' },
        ]}
      />

      {/* With addon */}
      <Select placeholder="Select user" startAddon="@" options={[
        { value: 'john', label: 'John' },
        { value: 'jane', label: 'Jane' },
      ]} />

      {/* Multiple selection */}
      <Select
        multiple
        label="Colors"
        placeholder="Select colors"
        options={[
          { value: 'red', label: 'Red' },
          { value: 'green', label: 'Green' },
          { value: 'blue', label: 'Blue' },
          { value: 'yellow', label: 'Yellow' },
        ]}
      />

      {/* With dividers between options */}
      <Select
        divider
        label="Category"
        placeholder="Select category"
        options={[
          { value: 'electronics', label: 'Electronics' },
          { value: 'clothing', label: 'Clothing' },
          { value: 'books', label: 'Books' },
        ]}
      />

      {/* Disabled option */}
      <Select
        label="Status"
        options={[
          { value: 'active', label: 'Active' },
          { value: 'pending', label: 'Pending', disabled: true },
          { value: 'archived', label: 'Archived' },
        ]}
      />
    </Box>
  );
}
```

--------------------------------

### Basic Form Usage

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/form.md

A basic example demonstrating how to set up a form with submit and cancel handlers, and includes input fields and buttons for user interaction.

```jsx
function Home() {
  function handleSubmit(event, data) {
    alert(`Your name is "${data.name || ''}"`);
  }

  function handleCancel(event, data) {
    alert('Cancelled!');
  }

  return (
    <Form onSubmit={handleSubmit} onCancel={handleCancel}>
      <Input name="name" label="Full Name" placeholder="Type your full name" />
      <Box row noWrap justifyContent="end" mt={3}>
        <Button type="cancel" variant="outline" ml={3}>Cancel</Button>
        <Button type="clear" variant="outline" ml={3}>Clear</Button>
        <Button type="submit" ml={3}>Submit</Button>
      </Box>
    </Form>
  );
}
```

--------------------------------

### Box Positioning and Spacing Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/box.md

Shows how to apply spacing and positioning styles using shorthand properties like `i`, `m`, `p`, `t`, `b`, `l`, `r`, `y`, `x`, `v`, `h`.

```jsx
<Box i={2} />     // inset: theme.shape.spacing * 2
<Box t={2} />     // top: theme.shape.spacing * 2
<Box m={2} />     // margin: theme.shape.spacing * 2
<Box ml={2} />    // marginLeft: theme.shape.spacing * 2
<Box mr="5%" />   // marginRight: '5%'
<Box p="2rem" />  // padding: theme.typography.fontSize * 2 (also works on native)
<Box pr="16px" /> // paddingRight: '16px'
<Box pv="16px" /> // paddingVertical: '16px' (on web, sets paddingTop and paddingBottom)
<Box ph="16px" /> // paddingHorizontal: '16px' (on web, sets paddingLeft and paddingRight)
```

--------------------------------

### Install React Bulk for React Web

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/getting-started/installation.md

Use this command for standard React DOM projects. Requires react and react-dom version 17.0.0 or higher.

```bash
yarn add react-dom @react-bulk/core @react-bulk/web
```

--------------------------------

### Box Gap Examples (Raw)

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/box.md

Demonstrates setting direct pixel or rem values for `gap`, `rowGap`, and `columnGap` properties on the Box component.

```jsx
<Box gap={16} /> // gap value is 16px
<Box gap="16px" /> // gap value is 16px
<Box gap="2rem" /> // gap value is 2rem (= 32px with default theme)
```

--------------------------------

### Install React Bulk for Expo

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/getting-started/installation.md

Use these commands for Expo projects. Requires expo 52.0.0+ and react-native-svg.

```bash
npx expo install react-native-svg
yarn add @react-bulk/core @react-bulk/expo
```

--------------------------------

### Basic Badge Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/data-display/badge.md

Demonstrates various basic usages of the Badge component, including dot indicators, numerical values, text content, and custom colors.

```jsx
<Grid center>
  <Box>
    <Badge dot />
  </Box>
  <Box>
    <Badge value={1} />
  </Box>
  <Box>
    <Badge>2</Badge>
  </Box>
  <Box>
    <Badge color="primary">primary</Badge>
  </Box>
  <Box>
    <Badge color="#6fd6ff">custom</Badge>
  </Box>
</Grid>
```

--------------------------------

### Animate Components with useAnimation

Source: https://context7.com/caioedut/react-bulk/llms.txt

Shows how to control animations using start, stop, and reset methods, and how to apply animation properties to components.

```jsx
import { useAnimation, Box, Button, Grid } from '@react-bulk/web'; // OR @react-bulk/native

function UseAnimationExample() {
  const from = { width: 50, height: 50, opacity: 0.5 };
  const to = { width: 200, height: 100, opacity: 1 };

  const sizeAnim = useAnimation(from);

  return (
    <Box gap={3}>
      {/* Animation controls */}
      <Grid gap={1}>
        <Box>
          <Button onPress={() => sizeAnim.start({ from, to })}>
            Forward
          </Button>
        </Box>
        <Box>
          <Button onPress={() => sizeAnim.start({ from: to, to: from })}>
            Backward
          </Button>
        </Box>
        <Box>
          <Button onPress={() => sizeAnim.start({ to, boomerang: true })}>
            Boomerang
          </Button>
        </Box>
        <Box>
          <Button onPress={() => sizeAnim.start({ to, iterations: 3 })}>
            Repeat 3x
          </Button>
        </Box>
        <Box>
          <Button onPress={() => sizeAnim.start({
            to,
            iterations: 'infinite',
            boomerang: true,
            duration: 1000,
          })}>
            Infinite Loop
          </Button>
        </Box>
        <Box>
          <Button color="warning" onPress={() => sizeAnim.stop()}>
            Stop
          </Button>
        </Box>
        <Box>
          <Button color="error" onPress={() => sizeAnim.reset()}>
            Reset
          </Button>
        </Box>
      </Grid>

      {/* Animated element - spread animation props */}
      <Box bg="primary" center {...sizeAnim.props}>
        <Text color="white">Animated</Text>
      </Box>
    </Box>
  );
}
```

--------------------------------

### Dropdown Placement Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/dropdown.md

Demonstrates positioning the Dropdown above or below a trigger element using the `placement` prop and `triggerRef`. The default placement is 'bottom'.

```jsx
function Home() {
  const topTriggerRef = useRef();
  const [topVisible, setTopVisible] = useState(false);

  const bottomTriggerRef = useRef();
  const [bottomVisible, setBottomVisible] = useState(false);

  return (
    <Grid row gap>
      <Box>
        <Button ref={bottomTriggerRef} onPress={() => setBottomVisible(true)}>
          Expand to Bottom (Default)
        </Button>
        <Dropdown visible={bottomVisible} placement="bottom" triggerRef={bottomTriggerRef} onClose={() => setBottomVisible(false)}>
          <Card>
            <Text>Dropdown is amazing!</Text>
          </Card>
        </Dropdown>
      </Box>
      <Box>
        <Button ref={topTriggerRef} onPress={() => setTopVisible(true)}>
          Expand to Top
        </Button>
        <Dropdown visible={topVisible} placement="top" triggerRef={topTriggerRef} onClose={() => setTopVisible(false)}>
          <Card>
            <Text>Dropdown is amazing!</Text>
          </Card>
        </Dropdown>
      </Box>
    </Grid>
  );
}
```

--------------------------------

### Basic Image Display

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/image.md

A basic example of displaying an image using the Image component with a source URL.

```jsx
<Image source="https://i.imgur.com/HdIl3Ef.png" />
```

--------------------------------

### Basic Modal Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/modal.md

A simple modal that opens and closes with a button click. The 'visible' prop controls its display state.

```jsx
function Home() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal visible={visible}>
        <Text>Modal is amazing!</Text>

        <Button mt={3} onPress={() => setVisible(false)}>
          Close
        </Button>
      </Modal>
    </>
  );
}
```

--------------------------------

### Badge Composition Examples

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/data-display/badge.md

Shows how the Badge component can be composed with other elements, such as positioning it relative to a container or attaching it to a Button.

```jsx
<Grid center gap={4}>
  <Box position="relative" border>
    <Badge top left>2</Badge>
  </Box>
  <Box>
    <Button badge={4}>Notifications</Button>
  </Box>
  <Box position="relative" border>
    <Badge bottom right value={3} />
  </Box>
</Grid>
```

--------------------------------

### Pressed Style Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/box.md

Applies styles to pressable components when they are actively being pressed. Defaults to reduced opacity.

```javascript
{ opacity: 0.7 }
```

--------------------------------

### Resizable Component API

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/resizable.md

Documentation for the Resizable component, including its import statement, available props, and usage examples.

```APIDOC
## Resizable Component

Used to create resizable containers.

### Import

```jsx
import { Resizable } from '@react-bulk/web'; // OR @react-bulk/native
```

### Examples

#### Basic Resizable Container

```jsx
<Resizable w={100} h={100}>
    <Box flex border bg="primary.light" w="100%" h="100%" />
</Resizable>
```

#### Vertical Resizable Container

```jsx
<Resizable vertical w={100} h={100}>
    <Box flex border bg="primary.light" w="100%" h="100%" />
</Resizable>
```

#### Horizontal Resizable Container

```jsx
<Resizable horizontal w={100} h={100}>
    <Box flex border bg="primary.light" w="100%" h="100%" />
</Resizable>
```

### Props

Extends all [`Box`](/docs/core/box#props) props.

#### `horizontal`

➤ Type: `boolean`<br/>
Controls horizontal resizing.

#### `vertical`

➤ Type: `boolean`<br/>
Controls vertical resizing.

### Styles

#### `style`

To the main element.

```

--------------------------------

### Basic Grid Layout

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/layout/grid.md

A basic example of using the Grid component to arrange two Box components side-by-side.

```jsx
<Grid>
  <Box>
    <Text border>Hello World!</Text>
  </Box>
  <Box>
    <Text border>Welcome!</Text>
  </Box>
</Grid>
```

--------------------------------

### Basic Splitter Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/splitter.md

A basic horizontal splitter with two panels. The left panel has a fixed width and background, while the right panel takes up the remaining space.

```jsx
<Splitter>
    <Box width={360} minw={160} bg="primary" p={4}>
      <Text>Sidebar</Text>
    </Box>
    <Box flex bg="secondary" p={4}>
      <Text>Content</Text>
    </Box>
</Splitter>
```

--------------------------------

### Install React Bulk for React Native CLI

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/getting-started/installation.md

Use this command for React Native CLI projects. Requires react 17.0.0+, react-native 0.71.0+, and react-native-svg.

```bash
yarn add react-native-svg @react-bulk/core @react-bulk/native
```

--------------------------------

### Text Component Examples

Source: https://context7.com/caioedut/react-bulk/llms.txt

Illustrates the usage of the Text component for displaying and styling text, including basic styling, color options, heading variants, size multipliers, alignment, text transformation, and line limiting.

```jsx
import { Text } from '@react-bulk/web'; // OR @react-bulk/native

function TextExample() {
  return (
    <Box>
      {/* Basic text with styling */}
      <Text bold>Bold Text</Text>
      <Text italic>Italic Text</Text>
      <Text color="primary">Primary Color</Text>
      <Text color="text.secondary">Secondary Text Color</Text>
      <Text color="#ff0000">Hex Color</Text>

      {/* Heading variants */}
      <Text variant="h1">Heading 1</Text>
      <Text variant="h2">Heading 2</Text>
      <Text variant="h3">Heading 3</Text>
      <Text variant="title">Title</Text>
      <Text variant="subtitle">Subtitle</Text>
      <Text variant="caption">Caption</Text>

      {/* Size multiplier (multiplied by theme.typography.fontSize) */}
      <Text size={1}>Default Size</Text>
      <Text size={2}>Double Size</Text>
      <Text size={1.5}>1.5x Size</Text>

      {/* Text alignment and transform */}
      <Text center>Centered Text</Text>
      <Text right>Right Aligned</Text>
      <Text transform="uppercase">Uppercase Text</Text>

      {/* Line limiting */}
      <Text numberOfLines={2}>
        This is a very long text that will be truncated after two lines...
      </Text>
    </Box>
  );
}
```

--------------------------------

### Basic Animation Control with useAnimation

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/hooks/use-animation.md

Demonstrates how to use the useAnimation hook to control element animations. Use the start method with 'from' and 'to' properties to define animation keyframes. The hook's props are applied to the target element.

```jsx
function App() {
  const from = { width: 40, height: 40 };
  const to = { width: 200, height: 200 };

  const sizeAnim = useAnimation(from);

  return (
    <Grid gap>
      <Box>
        <Button onPress={() => sizeAnim.start({
          from,
          to,
        })}>Forward</Button>
      </Box>
      <Box>
        <Button onPress={() => sizeAnim.start({
          from: to,
          to: from,
        })}>Backward</Button>
      </Box>
      <Box>
        <Button onPress={() => sizeAnim.start({
          to,
          iterations: 3,
        })}>Repeat 3x</Button>
      </Box>
      <Box>
        <Button onPress={() => sizeAnim.start({
          to,
          boomerang: true
        })}>Boomerang</Button>
      </Box>
      <Box>
        <Button onPress={() => sizeAnim.start({
          to,
          iterations: 3,
          boomerang: true,
        })}>3x Boomerang</Button>
      </Box>
      <Box>
        <Button onPress={() => sizeAnim.start({
          to,
          iterations: 'infinite',
          boomerang: true,
        })}>Infinite</Button>
      </Box>
      <Box>
        <Button color="warning" onPress={() => sizeAnim.stop()}>
          Stop
        </Button>
      </Box>
      <Box>
        <Button color="error" onPress={() => sizeAnim.reset()}>
          Reset
        </Button>
      </Box>
      <Box xs={12}>
        <Box border="1px solid primary" align="start" {...sizeAnim.props} />
      </Box>
    </Grid>
  );
}
```

--------------------------------

### Vertical Splitter Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/splitter.md

A vertical splitter with a fixed height. The top panel has a fixed height, and the bottom panel expands to fill the remaining space.

```jsx
<Splitter direction="vertical" height={480}>
    <Box height={100} bg="primary" p={4}>
      <Text>Top</Text>
    </Box>
    <Box flex bg="secondary" p={4}>
      <Text>Bottom</Text>
    </Box>
</Splitter>
```

--------------------------------

### Box Component Examples

Source: https://context7.com/caioedut/react-bulk/llms.txt

Demonstrates various uses of the Box component for layout and styling, including basic styling, centering, background colors, fixed height, custom borders, flexbox layouts, and platform-specific props.

```jsx
import { Box } from '@react-bulk/web'; // OR @react-bulk/native

function BoxExample() {
  return (
    <Box>
      {/* Basic styled box with border and padding */}
      <Box border p={3}>Styled Box</Box>

      {/* Centered with auto margin */}
      <Box border mx="auto">Centered Box</Box>

      {/* Background color using theme token */}
      <Box bg="primary">Primary Color Background</Box>

      {/* Fixed height */}
      <Box border h={80}>Fixed Height Box</Box>

      {/* Custom border and rounded corners */}
      <Box border="1px solid secondary" corners={2} p={3}>Custom Border</Box>

      {/* Flexbox row layout with gap */}
      <Box row gap={2} center>
        <Box p={2} bg="info">Item 1</Box>
        <Box p={2} bg="success">Item 2</Box>
      </Box>

      {/* Using custom component */}
      <Box component="a" href="/about">Link as Box</Box>

      {/* Platform-specific props */}
      <Box
        platform={{
          web: { type: 'password' },
          native: { secureTextEntry: true },
        }}
      />
    </Box>
  );
}
```

--------------------------------

### Composed Modal Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/modal.md

Demonstrates a composed modal with a title, text, and buttons. The 'onClose' prop is used to manage the modal's visibility.

```jsx
function Home() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal visible={visible} onClose={() => setVisible(false)}>
        <Text variant="title" bold>
          React Bulk
        </Text>
        <Divider my={3} mx={-3}/>
        <Text>
          Complete and uniform UI for React Web and Native
        </Text>
        <Divider my={3} mx={-3}/>
        <Button onPress={() => setVisible(false)}>
          Close
        </Button>
      </Modal>
    </>
  );
}
```

--------------------------------

### Accessibility Props Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/box.md

Defines accessibility properties for components, including roles, states, and values. Ensure these are configured for better screen reader support.

```javascript
{
  accessible: boolean
  hint: string
  label: string
  role: 'none' | 'button' | 'link'
        | 'search' | 'image' | 'alert'
        | 'checkbox' | 'combobox' | 'menu'
        | 'menubar' | 'menuitem' | 'progressbar'
        | 'radio' | 'radiogroup' | 'scrollbar'
        | 'spinbutton' | 'switch' | 'tab'
        | 'tablist' | 'timer' | 'toolbar'
  state: {
    busy: boolean
    checked: boolean
    disabled: boolean
    expanded: boolean
    selected: boolean
  }
  value: {
    max: number
    min: number
    now: number
    text: string
  }
}
```

--------------------------------

### Reset project structure

Source: https://github.com/caioedut/react-bulk/blob/main/examples/expo/README.md

Moves existing starter code to app-example and initializes a blank app directory.

```bash
npm run reset-project
```

--------------------------------

### Select Addons

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/select.md

Shows how to add a prefix icon or text using the startAddon prop.

```jsx
<Box maxw={400}>
  <Select placeholder="Username" startAddon="👤" />
</Box>
```

--------------------------------

### Dropdown Custom Positioning Example

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/overlays/dropdown.md

Allows custom positioning of the Dropdown using styles like `top`, `bottom`, `left`, and `right` in conjunction with `triggerRef`. This example positions the dropdown to the right.

```jsx
function Home() {
  const triggerRef = useRef();
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button ref={triggerRef} onPress={() => setVisible(true)}>
        Open to Right
      </Button>
      <Dropdown visible={visible} triggerRef={triggerRef} t={0} b="auto" l="100%" onClose={() => setVisible(false)}>
        <Card>
          <Text>Dropdown is amazing!</Text>
        </Card>
      </Dropdown>
    </>
  );
}
```

--------------------------------

### Grid Breakpoints Configuration

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/layout/grid.md

Example of overriding default layout breakpoints for a specific Grid component.

```js
{
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
}
```

--------------------------------

### Button Group API

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/button-group.md

Documentation for the Button Group component, including its props and usage examples.

```APIDOC
## Button Group Component

Used to group multiple buttons into a single scrollable container.

### Import

```jsx
import { ButtonGroup } from '@react-bulk/web'; // OR @react-bulk/native
```

### Props

#### `color`

➤ Type: `string` [`RbkColor`](/docs/type-reference/rbk-color)

➤ Default: `primary`

---

#### `disabled`

➤ Type: `boolean`

---

#### `size`

➤ Type: `'small'` `'medium'` `'large'` `'xlarge'`

➤ Default: `medium`

---

#### `variant`

➤ Type: `'solid'` `'outline'` `'text'`

➤ Default: `solid`

---

### Styles

#### `style`

To the outer wrapper element ([Scrollable](/docs/core/scrollable)).

#### `contentStyle`

To the inner wrapper.

### Examples

#### Basic Usage

```jsx
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
```

#### Variants

```jsx
<Grid column center gap>
  <Box>
    <ButtonGroup variant="solid">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup variant="outline">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup variant="outline">
      <Button>One</Button>
      <Button variant="solid">Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
</Grid>
```

#### Sizes

```jsx
<Grid column center gap>
  <Box>
    <ButtonGroup size="xsmall">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup size="small">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup size="medium">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup size="large">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
  <Box>
    <ButtonGroup size="xlarge">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Box>
</Grid>
```
```

--------------------------------

### Import Form Component

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/forms/form.md

Import the Form component from either '@react-bulk/web' or '@react-bulk/native' depending on your project setup.

```jsx
import { Form } from '@react-bulk/web'; // OR @react-bulk/native
```

--------------------------------

### Theme Configuration for Scrollable

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/core/scrollable.md

Example of how to override default props and styles for the Scrollable component within the theme object.

```jsx
const theme = {
  components: {
    Scrollable: {
      defaultProps: {
        /* ...props */
      },
      defaultStyles: {
        root: { /* ...styles */ },
        content: { /* ...styles */ },
        stickyHeader: { /* ...styles */ },
      }
    }
  }
}
```

--------------------------------

### Initialize ReactBulk Theme

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/layout/theme.md

Wrap the application with the ReactBulk provider and pass the custom theme object.

```jsx
import { ReactBulk } from '@react-bulk/web'; // OR @react-bulk/native
import theme from './src/themes/main.js'

export default function App() {
  return (
    <ReactBulk theme={theme}>
      {/* other like contexts and routes */}
    </ReactBulk>
  );
}
```

--------------------------------

### Basic and Confirmation Modals

Source: https://context7.com/caioedut/react-bulk/llms.txt

Demonstrates how to implement a basic modal for general content and a confirmation modal for user actions. Ensure the necessary components are imported from '@react-bulk/web' or '@react-bulk/native'.

```jsx
import { Modal, Button, Text, Divider, Box } from '@react-bulk/web'; // OR @react-bulk/native
import { useState } from 'react';

function ModalExample() {
  const [visible, setVisible] = useState(false);
  const [confirmVisible, setConfirmVisible] = useState(false);

  return (
    <Box gap={2}>
      {/* Basic modal */}
      <Button onPress={() => setVisible(true)}>Open Modal</Button>
      <Modal visible={visible} onClose={() => setVisible(false)}>
        <Text variant="title" bold>Modal Title</Text>
        <Divider my={3} mx={-3} />
        <Text>
          This is the modal content. You can put any components here.
        </Text>
        <Divider my={3} mx={-3} />
        <Box row justifyContent="end" gap={2}>
          <Button variant="outline" onPress={() => setVisible(false)}>
            Cancel
          </Button>
          <Button onPress={() => setVisible(false)}>
            Confirm
          </Button>
        </Box>
      </Modal>

      {/* Confirmation modal */}
      <Button color="error" onPress={() => setConfirmVisible(true)}>
        Delete Item
      </Button>
      <Modal
        visible={confirmVisible}
        onClose={() => setConfirmVisible(false)}
        halign="center"
        valign="center"
      >
        <Text variant="title" bold>Confirm Delete</Text>
        <Text mt={2}>Are you sure you want to delete this item?</Text>
        <Box row justifyContent="end" mt={4} gap={2}>
          <Button variant="outline" onPress={() => setConfirmVisible(false)}>
            Cancel
          </Button>
          <Button color="error" onPress={() => {
            // Handle delete
            setConfirmVisible(false);
          }}>
            Delete
          </Button>
        </Box>
      </Modal>
    </Box>
  );
}
```

--------------------------------

### Tabs Variants

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/tabs.md

Examples of different tab styles including group, card, and nav variants using controlled state.

```jsx
function App() {
  const [tab, setTab] = useState(0);

  return (
    <Tabs
      variant='group'
      value={tab}
      onChange={(e, newValue) => setTab(newValue)}
      tabs={[
        { label: 'Tab 1' },
        { label: 'Tab 2' },
        { label: 'Tab 3' },
      ]}
    />
  )
}
```

```jsx
function App() {
  const [tab, setTab] = useState(0);

  return (
    <Tabs
      variant='card'
      value={tab}
      onChange={(e, newValue) => setTab(newValue)}
      tabs={[
        { label: 'Tab 1' },
        { label: 'Tab 2' },
        { label: 'Tab 3' },
      ]}
    />
  )
}
```

```jsx
function App() {
  const [tab, setTab] = useState(0);

  return (
    <Tabs
      variant='nav'
      value={tab}
      onChange={(e, newValue) => setTab(newValue)}
      tabs={[
        { label: 'Tab 1' },
        { label: 'Tab 2' },
        { label: 'Tab 3' },
      ]}
    />
  )
}
```

--------------------------------

### Implement Input Component

Source: https://context7.com/caioedut/react-bulk/llms.txt

Demonstrates various Input configurations including validation, masks, addons, and controlled states.

```jsx
import { Input, Box, Form, Button } from '@react-bulk/web'; // OR @react-bulk/native
import { useState } from 'react';

function InputExample() {
  const [value, setValue] = useState('');

  return (
    <Box maxw={400} gap={2}>
      {/* Basic input */}
      <Input placeholder="Enter text" />

      {/* With label */}
      <Input label="Full Name" placeholder="Enter your full name" />

      {/* Colorful style */}
      <Input label="Email" placeholder="Enter email" colorful />

      {/* Password/secure input */}
      <Input label="Password" placeholder="Enter password" secure />

      {/* Input sizes */}
      <Input size="small" placeholder="Small" />
      <Input size="medium" placeholder="Medium" />
      <Input size="large" placeholder="Large" />

      {/* With error message */}
      <Input
        label="Username"
        placeholder="Enter username"
        error="Username is required"
      />

      {/* With addons */}
      <Input placeholder="Username" startAddon="@" />
      <Input placeholder="Website" startAddon="https://" endAddon=".com" />

      {/* Input types */}
      <Input type="email" placeholder="Email" />
      <Input type="number" placeholder="Number" min={0} max={100} />
      <Input type="phone" placeholder="Phone" />

      {/* Multiline (textarea) */}
      <Input multiline placeholder="Enter description..." />

      {/* Controlled input */}
      <Input
        controlled
        value={value}
        onChange={(e) => setValue(e.value)}
        placeholder="Controlled input"
      />

      {/* Read-only and disabled states */}
      <Input placeholder="Read Only" readOnly defaultValue="Cannot edit" />
      <Input placeholder="Disabled" disabled />

      {/* With mask function */}
      <Input
        label="Phone"
        placeholder="(000) 000-0000"
        mask={(val) => val.replace(/\D/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')}
      />
    </Box>
  );
}
```

--------------------------------

### Image Component Usage

Source: https://github.com/caioedut/react-bulk/blob/main/docs/docs/content/image.md

Demonstrates how to import and use the Image component.

```APIDOC
## Image Component Usage

### Description
This section shows how to import and use the Image component from the @react-bulk library.

### Import
```jsx
import { Image } from '@react-bulk/web'; // OR @react-bulk/native
```

### Basic Example
```jsx
<Image source="https://i.imgur.com/HdIl3Ef.png" />
```
```