### Install Grapp Stacks using Package Managers

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/getting-started.mdx

Installs the Grapp Stacks library using common package managers like bun, pnpm, yarn, and npm.

```shell
bun add @grapp/stacks
```

```shell
pnpm add @grapp/stacks
```

```shell
yarn add @grapp/stacks
```

```shell
npm install @grapp/stacks --save
```

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

### Get Inset Examples

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Retrieves examples for the 'inset/inset' component. This function is typically used in static site generation to pre-render example components.

```javascript
import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => {
  return getExamples(['inset/inset']);
}
```

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

### Inline Component: Get Examples

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Fetches examples for inline component variations like space, align-y, and align-x.

```javascript
import { Property } from '@grapp/nextra-theme'
import { Callout } from "nextra/components";

import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => {
  return getExamples(['inline/space', 'inline/align-y', 'inline/align-x']);
}
```

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

### Get Tile Examples Data

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/tiles.mdx

Fetches example data for 'tiles/space', 'tiles/columns', and 'tiles/fill' using the getExamples function. This is typically used for server-side rendering in frameworks like Next.js.

```javascript
export const getStaticProps = () => {
  return getExamples(['tiles/space', 'tiles/columns', 'tiles/fill']);
}
```

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

### Configure Grapp Stacks Theme with Unistyles

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/getting-started.mdx

Adds Grapp Stacks support to the existing Unistyles configuration by defining 'stacks' properties in the theme object.

```tsx
const theme = {
  ...
  stacks: {
    spacing: 4,
    debug: false,
  },
};
```

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

### Get Static Props for Examples

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Defines the getStaticProps function to retrieve examples for the 'bleed/bleed' path, likely for static site generation.

```javascript
export const getStaticProps = () => {
  return getExamples(['bleed/bleed']);
}
```

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

### Bleed Component Usage Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Demonstrates the usage of the Example component to display a visual example of the Bleed component.

```javascript
<Example title="Example" example="bleed/bleed" />
```

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

### Import Bleed and Example Components

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Imports the necessary Property and Callout components from '@grapp/nextra-theme' and 'nextra/components', and Example and getExamples from a local component.

```javascript
import { Property } from '@grapp/nextra-theme'
import { Callout } from "nextra/components";

import { Example, getExamples } from '../../../components/Example'
```

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

### FloatBox Component Example Data Fetching (JavaScript)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/float-box.mdx

Fetches example data for the FloatBox component. It imports necessary functions from '@grapp/nextra-theme' and a local components module. The getStaticProps function is used to retrieve specific examples.

```javascript
import { Property } from '@grapp/nextra-theme'

import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => {
  return getExamples(['float-box/float-box']);
}
```

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

### TypeScript Type Declarations for Grapp Stacks and Unistyles

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/getting-started.mdx

Provides TypeScript type declarations to extend Unistyles breakpoints and themes, and to define Grapp Stacks breakpoints. This is necessary for TypeScript users when overriding Unistyles types.

```tsx
declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

declare module '@grapp/stacks' {
  export interface StacksBreakpoints extends Breakpoints {}
}
```

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

### Fetching Example Data for Stacks Components

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/index.mdx

This JavaScript code defines the getStaticProps function, which is commonly used in Next.js for fetching data at build time. It calls `getExamples` to retrieve specific layout examples.

```javascript
export const getStaticProps = () => {
  return getExamples(['box/flex', 'columns/flex', 'inline/space', 'rows/rows', 'grid/grid', 'stack/space', 'tiles/columns']);
}
```

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

### Install Stacks using Bun

Source: https://github.com/grapp-dev/stacks/blob/main/README.md

Installs the Stacks library using the Bun package manager. This command adds the `@grapp/stacks` package to your project's dependencies.

```shell
bun add @grapp/stacks
```

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

### Inset Component Props - Start Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'start' prop for the Inset component, which adds padding to the left side in LTR mode and to the right side in RTL mode. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the left for the `ltr` direction, otherwise to the right.
</Property>
```

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

### Static Props Generation for Examples

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/stack.mdx

This code snippet defines the getStaticProps function, which is used in Next.js for fetching data at build time. It retrieves example data for various Stack component configurations.

```javascript
import { Example, getExamples } from '../../../components/Example';

export const getStaticProps = () => {
  return getExamples(['stack/space', 'stack/align', 'stack/horizontal', 'stack/divider']);
}
```

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

### Tiles Component - Columns Prop

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/tiles.mdx

Illustrates the 'columns' prop for the Tiles component, setting the number of columns in the grid. This example shows a fixed column layout.

```javascript
<Example title="Columns" example="tiles/columns" expandable={false} />
```

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

### Install Stacks using pnpm

Source: https://github.com/grapp-dev/stacks/blob/main/README.md

Installs the Stacks library using the pnpm package manager. This command adds the `@grapp/stacks` package to your project's dependencies.

```shell
pnpm add @grapp/stacks
```

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

### Bleed Component Property: start

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Defines the 'start' property for the Bleed component, accepting a ResponsiveProp<number> to apply a negative margin to the start (left in LTR).

```javascript
<Property types={["ResponsiveProp<number>"]}>
  Applies a negative margin to the left for the `ltr` direction, otherwise to the right.
</Property>
```

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

### Tiles Component - Space Prop

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/tiles.mdx

Demonstrates the 'space' prop of the Tiles component, which controls the spacing between grid items. This example specifically focuses on the space prop.

```javascript
<Example title="Space" example="tiles/space" />
```

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

### Install Stacks using npm

Source: https://github.com/grapp-dev/stacks/blob/main/README.md

Installs the Stacks library using the npm package manager. This command adds the `@grapp/stacks` package to your project's dependencies.

```shell
npm install @grapp/stacks --save
```

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

### Grid Component React Native Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/grid.mdx

Demonstrates the usage of the Grid component in a React Native application. This component is intended for highest-level usage to ensure consistent grid application.

```javascript
import { Property } from '@grapp/nextra-theme'
import { Callout } from "nextra/components";

import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => {
  return getExamples(['grid/grid']);
}

<Example title="Grid" example="grid/grid" backgroundColor="" expandable={false} />
```

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

### Install Stacks using Yarn

Source: https://github.com/grapp-dev/stacks/blob/main/README.md

Installs the Stacks library using the Yarn package manager. This command adds the `@grapp/stacks` package to your project's dependencies.

```shell
yarn add @grapp/stacks
```

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

### Stack Component: Horizontal Layout Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/stack.mdx

Illustrates how to use the Stack component for horizontal arrangement by setting the 'horizontal' prop to true. This allows for side-by-side positioning of elements.

```jsx
import { Stack } from '@grapp/nextra-theme';

function MyComponent() {
  return (
    <Stack horizontal space={3}>
      <div>Item A</div>
      <div>Item B</div>
      <div>Item C</div>
    </Stack>
  );
}
```

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

### Custom Column Component Example (TypeScript)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/columns.mdx

Demonstrates how to create a custom Column component using `Column.from` by wrapping a Box component. This allows for custom styling and behavior within the Columns layout.

```tsx
const Content = Column.from<Props>(props => {
  return <Box {...props} />;
});
```

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

### Stack Component: Vertical Layout Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/stack.mdx

Demonstrates the basic usage of the Stack component for vertical arrangement of elements. It primarily uses the 'space' prop to define the gap between children.

```jsx
import { Stack } from '@grapp/nextra-theme';

function MyComponent() {
  return (
    <Stack space={2}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}
```

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

### Displaying Stacks Features with a Slider

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/index.mdx

This JSX code demonstrates how to use the `Features` and `SectionHeader` components to showcase the key features of Stacks. It includes a slider for example previews and individual `Feature` components detailing each feature.

```jsx
  <Features
    className="mb-16"
    header={
      <SectionHeader 
        badge="Features" 
        title="A closer look at the key features of Stacks."
        description="Discover how Stacks can boost your productivity when building React Native layouts."
      />
    }
    preview={
      <div className="lg:pr-8">
        <NoSSR>
          <Slider dots={false} arrows={false} infinite={true} speed={500} slidesToShow={1} slidesToScroll={1} autoplay={true} autoplaySpeed={4000}>
            <Example example="box/flex" isDeviceOnly={true} />
            <Example example="columns/flex" isDeviceOnly={true} />
            <Example example="inline/space" isDeviceOnly={true} />
            <Example example="rows/rows" isDeviceOnly={true} />
            <Example example="stack/space" isDeviceOnly={true} />
            <Example example="tiles/columns" isDeviceOnly={true} />
            <Example example="grid/grid" isDeviceOnly={true} />
          </Slider>
        </NoSSR>
      </div>
    }
  >
    <Feature
      icon={IconMultipleDevices}
      color="#33bdff"
      title="Compatibility"
      description="Stacks is compatible with the most popular platforms, including web, mobile, and desktop applications (thanks to Unistyles 🦄)."
    />
    <Feature
      icon={IconDesign}
      color="#1bca67"
      title="Design Flexibility"
      description="Stacks allows you to think like a designer and easily create layouts. You can eliminate margins and distribute your content evenly with the provided components."
    />
    <Feature
      icon={IconGlasses} 
      color="#f34d4f"
      title="Debug Mode"
      description="Stacks comes with a debug mode that lets you quickly investigate visual issues. You can easily switch to debug mode and identify UI issues."
    />
    <Feature
      icon={IconGrid}
      color="#7657e5"
      title="Design Grid"
      description="Stacks also has a design grid component that helps you align and organize your content."
    />
    <Feature
      icon={IconSmartphoneTablet}
      color="#1bcabe"
      title="Responsive Props"
      description="Stacks supports the responsive prop format. You can use responsive props to customize the spacing, number of columns, or alignments per screen size."
    />
  </Features>
```

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

### Tiles Component - Fill Prop

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/tiles.mdx

Shows the 'fill' prop of the Tiles component, which determines if the last row is padded to match the defined column count. This example sets fill to false.

```javascript
<Example title="Fill" example="tiles/fill" expandable={false} />
```

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

### Stack Component: Alignment Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/stack.mdx

Shows how to align children within a Stack component using the 'align' prop. This prop controls alignment along the cross-axis, whether vertical or horizontal.

```jsx
import { Stack } from '@grapp/nextra-theme';

function MyComponent() {
  return (
    <Stack align="center" space={2}>
      <div>Centered Item 1</div>
      <div>Centered Item 2</div>
    </Stack>
  );
}
```

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

### Stack Component: Divider Example

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/stack.mdx

Demonstrates how to use the 'divider' prop to insert a custom React element between each child in a Stack. This is useful for visual separation like lines or custom spacing.

```jsx
import { Stack } from '@grapp/nextra-theme';

function MyComponent() {
  const Divider = <div style={{ height: '1px', backgroundColor: 'gray' }} />;
  return (
    <Stack divider={Divider} space={2}>
      <div>Section 1</div>
      <div>Section 2</div>
      <div>Section 3</div>
    </Stack>
  );
}
```

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

### Custom Row Component Example - TypeScript

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/rows.mdx

Demonstrates how to create a custom Row component using the Row.from method, allowing integration of custom components within the Rows layout. Requires 'Props' type definition.

```tsx
import { Row } from '@grapp/nextra-theme';
import { Box } from '@grapp/nextra-theme';

interface Props {}

const Content = Row.from<Props>(props => {
  return <Box {...props} />;
});
```

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

### Update Import Path for Stacks

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/migration-guide.mdx

This code snippet demonstrates how to update the import path for the Stacks library after its migration to the @grapp scope. It's a common fix required when upgrading from Stacks v2 to v3.

```javascript
import { Callout } from "nextra/components";

// Old import:
// ~`@mobily/stacks`~ 
// New import:
// `@grapp/stacks`
```

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

### Importing Stacks and Card Components

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/index.mdx

Imports the necessary Cards and Card components from the 'nextra/components' library, and a custom Components from a local path.

```javascript
import { Cards, Card } from 'nextra/components';
import { Components } from '../../components/Components'
```

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

### Tiles Component API

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/tiles.mdx

Details about the props available for the Tiles component, including customization options for spacing, columns, and fill behavior.

```APIDOC
## Tiles Component

### Description
The `Tiles` component displays a grid of elements with equal spacing between them. It allows customization of spacing, number of columns, and how the last row is filled.

### Props

The `Tiles` component extends props from `Box` and React Native View.

#### `columns`
- **Type**: `ResponsiveProp<number>`
- **Default**: `1`
- **Description**: Defines the number of columns to display. This can be responsive.

#### `space`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the uniform space between children (both horizontally and vertically). This can be responsive.

#### `spaceX`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the horizontal space between children. This can be responsive.

#### `spaceY`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the vertical space between children. This can be responsive.

#### `fill`
- **Type**: `ResponsiveProp<boolean>`
- **Default**: `false`
- **Description**: Determines whether the last row should be filled with empty elements if it has fewer columns than specified. This can be responsive.

### Examples

#### Space Example
Displays the `Tiles` component with custom spacing.

#### Columns Example
Demonstrates how to set the number of columns for the `Tiles` component.

#### Fill Example
Illustrates the `fill` prop's behavior in managing the last row of the `Tiles` component.
```

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

### Box Component: Rendering Custom Elements (as Prop)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Demonstrates using the `as` prop to render custom components, like `Animated.View` from Reanimated, instead of the default `View`.

```tsx
import Animated from 'react-native-reanimated'

const progress = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: withTiming(progress.value),
  }
});

<Box as={Animated.View} style={animatedStyle} />
```

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

### Showcasing Stacks Components with a Component Grid

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/index.mdx

This JSX snippet displays a section dedicated to showcasing the available Stacks components. It uses `SectionHeader` for the title and description, followed by the `Components` component to render a grid of these components.

```jsx
  <Section className="pb-8">
   <SectionHeader 
      badge="Components" 
      title="Component showcase."
      description="A collection of reusable layout components in your React Native projects."
    />
    <Components num={6} />
  </Section>
</Homepage>
```

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

### Grid Component Props Documentation

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/grid.mdx

Details the various properties available for configuring the Grid component, including responsive design options.

```javascript
gutter
<Property types={["ResponsiveProp<number>"]} defaultValue="2">
  Set the space between columns.
</Property>
```

```javascript
margin
<Property types={["ResponsiveProp<number>"]} defaultValue="2">
  Specifies the amount of space on both the left and right sides.
</Property>
```

```javascript
columns
<Property types={["ResponsiveProp<number>"]} defaultValue="8">
  Sets the number of columns.
</Property>
```

```javascript
opacity
<Property types={["ResponsiveProp<number>"]} defaultValue="0.2">
  Adjusts the transparency level for each column.
</Property>
```

```javascript
color
<Property types={["ResponsiveProp<string>"]} defaultValue="red">
  Sets the color of each column.
</Property>
```

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

### Homepage Hero Section with Stacks Description

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/index.mdx

This JSX code renders the hero section of the homepage, including a title, logo, and a description that highlights the project's reliance on React Native Unistyles.

```jsx
<Homepage>
  <Hero 
    title="A set of components for building layouts in React Native."
    logo={StacksLogo}
    description={
      <>
        Create and manage React Native layouts effortlessly. Powered by{' '}
        <a
          href="https://github.com/jpudysz/react-native-unistyles"
          target="_blank"
          rel="noopener noreferrer"
          className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
        >
           React Native Unistyles
        </a>.
      </>
    }
  />
```

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

### Box Component: Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Illustrates the use of the `padding` prop to create space between the content and the boundaries of the Box component, applicable in all directions.

```tsx
// ...
<Example title="Padding" example="box/padding" />
```

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

### Inline Component: Collapse Below Breakpoint (collapseBelow)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Shows how to collapse Inline component items into a vertical stack on smaller screens using the collapseBelow prop.

```javascript
const collapseBelow: Breakpoint;
```

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

### FloatBox Component

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/float-box.mdx

Details on the FloatBox component, its purpose, and available props.

```APIDOC
## FloatBox

### Description
`FloatBox` is a component that can position its child elements over the parent component using absolute positioning. It's similar to the [`Box`](/docs/components/box) component but has the added benefit of positioning elements precisely within the parent container.

With `FloatBox`, you can easily control the position of each child element by specifying exact coordinates, such as `top`, `bottom`, `left`, and `right`.

### Props
The `FloatBox` component is created using the [`Box`](/docs/components/box) component. It extends all the props supported by `Box`, as well as [React Native View](https://reactnative.dev/docs/view#props), and the props mentioned below.

#### offset
- **offset** (ResponsiveProp<DimensionValue>) - Description: Specifies the value of each offset.

#### top
- **top** (ResponsiveProp<DimensionValue>) - Description: Sets the top offset.

#### right
- **right** (ResponsiveProp<DimensionValue>) - Description: Sets the right offset.

#### bottom
- **bottom** (ResponsiveProp<DimensionValue>) - Description: Sets the bottom offset.

#### left
- **left** (ResponsiveProp<DimensionValue>) - Description: Sets the left offset.
```

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

### Importing React Native Stacks Components

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/index.mdx

This snippet shows the necessary imports for using the Stacks components and related utilities from the '@grapp/nextra-theme' package, along with SVG icons and custom components.

```javascript
import Slider from 'react-slick';

import { Homepage, Hero, Features, Feature, Section, SectionHeader, NoSSR } from '@grapp/nextra-theme';
import { Components } from '../components/Components';
import { Example, getExamples } from '../components/Example'

import StacksLogo from '../components/svg/stacks-logo.svg';
import IconDesign from '../components/svg/icon-design.svg';
import IconMultipleDevices from '../components/svg/icon-multiple-devices.svg';
import IconSmartphoneTablet from '../components/svg/icon-smartphone-tablet.svg';
import IconGrid from '../components/svg/icon-grid.svg';
import IconGlasses from '../components/svg/icon-glasses.svg';
```

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

### Box Component: Fixed Size

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Illustrates setting a fixed width and height for the Box component when the `flex` prop does not yield the desired layout.

```tsx
// ...
<Example title="Size" example="box/size" />
```

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

### Inset Component Props - Space

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'space' prop for the Inset component, which adds uniform padding to all sides of the content. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Add padding to all sides.
</Property>
```

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

### useSpacingHelpers Hook for Adjusting Element Spacing

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/hooks.mdx

The `useSpacingHelpers` hook provides `multiply` and `divide` functions to dynamically adjust spacing in components. These helpers interact with the spacing values defined in the Unistyles theme object. The input is a number, and the output is a number representing the adjusted spacing.

```typescript
type SpacingHelper = {
  (value: number): number;
  (value: number | undefined): number | undefined;
};

type SpacingHelpers = {
  multiply: SpacingHelper;
  divide: SpacingHelper;
};

function useSpacingHelpers(): SpacingHelpers;
```

```tsx
type Props = React.PropsWitchChildren<{
  value: number;
}>;

const Padding = (props: Props) => {
  const { value, children } = props
  const { multiply } = useSpacingHelpers()

  return (
    <View style={{ padding: multiply(value) }}>
      {children}
    </View>
  );
};

<Padding value={2}>
  <Text>Hello!</Text>
</Padding>
```

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

### Inset Component Props - Top Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'top' prop for the Inset component, specifically for adding padding to the top of the content. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the top.
</Property>
```

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

### Box Component: Flex Layout

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Demonstrates the use of the `flex` prop in the Box component for controlling how children distribute space along the main axis. Supports fractional values up to 1/5.

```tsx
import { Property } from '@grapp/nextra-theme'

import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => {
  return getExamples(['box/flex', 'box/size', 'box/align-x', 'box/align-y', 'box/gap', 'box/padding', 'box/margin']);
}

// ...
<Example title="Flex" example="box/flex" />
```

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

### Box Component: Margin

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Shows how to apply the `margin` prop to create space between an element and its surrounding elements, with application in all directions.

```tsx
// ...
<Example title="Margin" example="box/margin" />
```

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

### useDebugStyle Hook for Visual Component Identification

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/hooks.mdx

The `useDebugStyle` hook generates a style object containing a random `backgroundColor`. This hook is intended for development environments to easily identify and distinguish between different components by visually highlighting them. It returns a `ViewStyle` object or undefined.

```typescript
function useDebugStyle(): ViewStyle | undefined;
```

```tsx
const Debug = (props: React.PropsWitchChildren) => {
  const { children } = props;
  const debugStyle = useDebugStyle();

  return (
    <View style={debugStyle}>
      {children}
    </View>
  );
};

<Debug>
  <Text>Debug</Text>
</Debug>
```

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

### Inset Component Props - Bottom Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'bottom' prop for the Inset component, allowing padding to be added to the bottom of the content. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the bottom.
</Property>
```

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

### Configure Breakpoints for Responsive Props

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/usage.mdx

Define breakpoint values for different screen sizes (e.g., mobile, tablet, desktop) to enable responsive styling. This configuration allows Stacks to adapt its properties based on the current viewport.

```tsx
const breakpoints = {
  mobile: 0,
  tablet: 768,
  desktop: 998,
} as const;
```

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

### useResponsiveProp Hook for Resolving Responsive Values

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/hooks.mdx

The `useResponsiveProp` hook returns a function to resolve responsive props in components. It takes the responsive prop value (e.g., an array of values for different breakpoints) and returns the appropriate value based on the current breakpoint. Dependencies include the responsive prop itself.

```typescript
function useResponsiveProp<T>(value: ResponsiveProp<T>): T;
```

```tsx
type Props = {
  size: ResponsiveProp<number>;
};

const Avatar = (props: Props) => {
  const resolveResponsiveProp = useResponsiveProp();
  const size = resolveResponsiveProp(props.size);

  return (
    <Image width={size} height={size} />
  );
};

<Avatar size={[48, 64, 96]} />
```

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

### Inline Component: Horizontal Alignment (alignX)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Demonstrates horizontal alignment of children within the Inline component using the alignX prop.

```javascript
<Example title="AlignX" example="inline/align-x" expandable={false} />
```

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

### Box Component Overview

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

The Box component is a versatile layout element that renders a React Native View with numerous props for styling and layout management. It supports properties like flex, size, alignment, gap, padding, and margin.

```APIDOC
## Box Component

### Description
The `Box` component is a fundamental layout element that renders a single [`View`](https://reactnative.dev/docs/view) element. It provides a wide range of props for easy layout creation, including standard padding and margin scales, alignments, and other common layout properties.

### Core Features
- **Flexibility**: Control how children fill space with the `flex` prop.
- **Sizing**: Define fixed `width` and `height` for precise control.
- **Alignment**: Use `alignX` and `alignY` to position children.
- **Spacing**: Manage gaps between elements with `gap`, `rowGap`, and `columnGap`.
- **Padding & Margin**: Apply spacing with `padding` and `margin` props.
- **Customization**: Render other elements using the `as` prop.

### Example Usage

#### Flex
```jsx
<Box flex={1/2}>Content</Box>
```

#### Size
```jsx
<Box width={100} height={50}>Sized Box</Box>
```

#### Alignment
```jsx
<Box alignX="center">Centered Content</Box>
<Box alignY="flex-end">Bottom Content</Box>
```

#### Gap
```jsx
<Box gap={10}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>
```

#### Padding & Margin
```jsx
<Box padding={16}>Padded Box</Box>
<Box marginX={8}>Box with horizontal margin</Box>
```

#### Using `as` prop
```jsx
import Animated from 'react-native-reanimated';

<Box as={Animated.View} style={{ opacity: 0.5 }} />
```

### Props
The `Box` component extends all props from React Native's `View` component, plus the following:

#### `flex`
- **Type**: `ResponsiveProp<Flex>`
- **Description**: Fills over the available space along the main axis defined by the `direction` prop. Supports fractional values down to `1/5`.

#### `width`
- **Type**: `ResponsiveProp<DimensionValue>`
- **Description**: Specifies the component width.

#### `height`
- **Type**: `ResponsiveProp<DimensionValue>`
- **Description**: Specifies the component height.

#### `as`
- **Type**: `React.ReactElement`
- **Description**: Renders another element instead of `View` when composing `Box`.

#### `alignX`
- **Type**: `ResponsiveProp<AxisX | AxisY | Space | Stretch>`
- **Description**: Aligns children horizontally or vertically, depending on the `direction` prop.

#### `alignY`
- **Type**: `ResponsiveProp<AxisX | AxisY | Space | Stretch>`
- **Description**: Aligns children horizontally or vertically, depending on the `direction` prop.

#### `gap`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the size of the gap between rows and columns.

#### `rowGap`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the size of the gap between rows.

#### `columnGap`
- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the size of the gap between columns.

#### `direction`
- **Type**: `ResponsiveProp<Direction>`
- **Description**: Sets the direction in which the children are laid out.

#### `wrap`
- **Type**: `ResponsiveProp<Wrap>`
- **Description**: Determines whether children should be wrapped when they overflow the container's size along the main axis.

#### `reverse`
- **Type**: `ResponsiveProp<boolean>`
- **Description**: Sets the reversed order for children.

#### `padding`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to all sides of the component.

#### `paddingX`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the left and right sides.

#### `paddingY`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the top and bottom sides.

#### `paddingTop`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the top side.

#### `paddingRight`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the right side.

#### `paddingBottom`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the bottom side.

#### `paddingLeft`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies padding to the left side.

#### `margin`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to all sides of the component.

#### `marginX`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the left and right sides.

#### `marginY`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the top and bottom sides.

#### `marginTop`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the top side.

#### `marginRight`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the right side.

#### `marginBottom`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the bottom side.

#### `marginLeft`
- **Type**: `ResponsiveProp<number>`
- **Description**: Applies margin to the left side.

```

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

### Inset Component Props - End Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'end' prop for the Inset component, which adds padding to the right side in LTR mode and to the left side in RTL mode. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the right for the `ltr` direction, otherwise to the left.
</Property>
```

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

### Box Component: Gap Between Children

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/box.mdx

Explains the `gap` prop for setting the spacing between rows and columns, serving as a shorthand for `rowGap` and `columnGap`.

```tsx
// ...
<Example title="Gap" example="box/gap" />
```

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

### Inline Component: Vertical Alignment (alignY)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Illustrates vertical alignment of children with varying heights using the alignY prop in the Inline component.

```javascript
<Example title="AlignY" example="inline/align-y" expandable={false} />
```

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

### Inset Component Props - Left Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'left' prop for the Inset component, enabling the addition of padding to the left side of the content. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the left.
</Property>
```

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

### Inset Component Props - Right Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'right' prop for the Inset component, used for adding padding to the right side of the content. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding to the right.
</Property>
```

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

### useBreakpointComparators Hook for Breakpoint Comparisons

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/hooks.mdx

This hook offers `isAbove` and `isBelow` functions for comparing the current screen breakpoint with a specified breakpoint. This is useful for conditionally applying styles or rendering components based on screen size. The functions accept an optional breakpoint and return a boolean.

```typescript
type BreakpointComparator = (breakpoint?: Breakpoint) => boolean;

type BreakpointComparators = {
  isBelow: BreakpointComparator;
  isAbove: BreakpointComparator;
};

function useBreakpointComparators(): BreakpointComparators;
```

```tsx
type Props = React.PropsWitchChildren<{
  below: Breakpoint;
}>;

const Collapse = (props: Props) => {
  const { below, children } = props;
  const { isBelow } = useBreakpointComparators();

  const isCollapsed = breakpoint.isBelow(below);
  const direction = isCollapsed ? 'column' : 'row';

  return (
    <Box direction={direction}>
      {children}
    </Box>
  );
};

<Collapse below="tablet">
  {elements}
</Collaps>
```

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

### Apply Responsive Spacing Values in Stacks

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/usage.mdx

Utilize responsive props within the Stacks component to set spacing values that vary across different screen breakpoints. Values can be a single primitive for all breakpoints or an array for specific breakpoint assignments.

```tsx
<Stack space={[1]} /> \
// Applies '1' to all breakpoints

<Stack space={[1, 4]} /> \
// Applies '1' to mobile, '4' to tablet and desktop

<Stack space={[1, 4, 8]} /> \
// Applies '1' to mobile, '4' to tablet, and '8' to desktop
```

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

### Inset Component Props - Vertical Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'vertical' prop for the Inset component, enabling the addition of padding to the top and bottom sides. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding vertically.
</Property>
```

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

### Bleed Component Info Callout

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Uses a Callout component with type 'info' and an emoji to provide additional information about the Bleed component's unavailable Box props.

```javascript
<Callout type="info" emoji="*">
  Unavailable `Box` props: `margin`, `marginX`, `marginY`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginStart`, `marginEnd`
</Callout>
```

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

### Inset Component Props - Horizontal Padding

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inset.mdx

Defines the 'horizontal' prop for the Inset component, allowing for the addition of padding to the left and right sides. Accepts responsive values.

```javascript
import { Property } from '@grapp/nextra-theme'

<Property types={["ResponsiveProp<number>"]}>
  Adds padding horizontally.
</Property>
```

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

### Inline Component: Space Between Children (space)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Defines the space between children in the Inline component using the space prop.

```javascript
space: ResponsiveProp<number>;
```

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

### Bleed Component Property: right

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Defines the 'right' property for the Bleed component, accepting a ResponsiveProp<number> to apply a negative margin to the right.

```javascript
<Property types={["ResponsiveProp<number>"]}>
  Applies a negative margin to the right.
</Property>
```

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

### Define Default Spacing for Stacks

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/usage.mdx

Configure the default spacing unit for Stacks by adding a 'stacks.spacing' property to your Unistyles theme object. This value is multiplied by the 'space' prop in Stacks components to calculate actual pixel values.

```tsx
const theme = {
  stacks: {
    spacing: 4,
  },
};

<Stack space={2}>…</Stack> // 4 * 2 = 8 logical pixels
<Box padding={3}>…</Box> // 4 * 3 = 12 logical pixels
```

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

### Inline Component: Vertical Alignment (alignY Prop)

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/inline.mdx

Explains the alignY prop for vertically aligning children within the Inline component.

```javascript
alignY: ResponsiveProp<AxisY>;
```

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

### Bleed Component Property: space

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/bleed.mdx

Defines the 'space' property for the Bleed component, which accepts a ResponsiveProp<number> to apply negative margins to all sides.

```javascript
<Property types={["ResponsiveProp<number>"]}>
  Applies a negative margin to each side.
</Property>
```

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

### Rows Component

Source: https://github.com/grapp-dev/stacks/blob/main/docs/pages/docs/components/rows.mdx

The Rows component organizes children in rows, offering flexible alignment and spacing options. It extends the Box component and supports various props for layout control.

```APIDOC
## Rows Component

### Description
The `Rows` component is designed to organize its children in rows with consistent vertical spacing. It is particularly useful in building the generic `Screen` component. It extends the `Box` component and supports props from `Box`, React Native View, and specific props detailed below.

### Usage

**Basic Usage:**
Organize children in a simple row layout.

```tsx
<Rows>
  <Box>Child 1</Box>
  <Box>Child 2</Box>
</Rows>
```

**With AlignY:**
Align rows vertically when they have varying heights.

```tsx
<Rows alignY="center">
  <Box>Child 1</Box>
  <Box style={{ height: 100 }}>Child 2</Box>
</Rows>
```

**With AlignX:**
Horizontally align rows when their total width is less than the parent container.

```tsx
<Rows alignX="flex-end">
  <Box>Child 1</Box>
  <Box>Child 2</Box>
</Rows>
```

**With Flex:**
Set flex values for individual rows or a default flex for all rows.

```tsx
<Rows defaultFlex="50%">
  <Row flex="20%">Child 1</Row>
  <Row>Child 2</Row>
</Rows>
```

### Custom Row Component

To integrate a custom component within `Rows`, use `Row.from`:

```tsx
const Content = Row.from<Props>(props => {
  return <Box {...props} />;
});
```

### Props

The `Rows` component inherits props from [`Box`](/docs/components/box) and [React Native View](https://reactnative.dev/docs/view#props), with the following additional or overridden props:

#### `defaultFlex`

- **Type**: `ResponsiveProp<Flex>`
- **Default**: `fluid`
- **Description**: Assigns a default flex value to each child row. This can be a percentage, pixel value, or keyword like 'fluid'.

#### `space`

- **Type**: `ResponsiveProp<number>`
- **Description**: Sets the space (gap) between children in the row.

#### `alignX`

- **Type**: `ResponsiveProp<AxisX | Space>`
- **Description**: Aligns children horizontally within the `Rows` container. Accepts values like `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, or `space-evenly`.

#### `alignY`

- **Type**: `ResponsiveProp<AxisY>`
- **Description**: Aligns children vertically within the `Rows` container. Accepts values like `flex-start`, `center`, `flex-end`, `stretch`, or `baseline`.

<Callout type="info" emoji="*">
  Unavailable `Box` props: `direction`, `gap`, `rowGap`, `columnGap`
</Callout>

### Request Example (Conceptual)

This example demonstrates setting various props on the `Rows` component.

```json
{
  "component": "Rows",
  "props": {
    "defaultFlex": "50%",
    "space": 16,
    "alignX": "center",
    "alignY": "center"
  },
  "children": [
    {
      "component": "Box",
      "content": "Row 1"
    },
    {
      "component": "Box",
      "content": "Row 2"
    }
  ]
}
```

### Response Example (Conceptual)

The `Rows` component renders children based on the provided props.

```json
{
  "status": "rendered",
  "output": "HTML or Native Element Structure"
}
```
```