@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Card/Card.docs.mdx → public/llms/components/card.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, Card, Center, DetailText } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Card.stories';
-import * as ActionStories from './CardAction/CardAction.stories';
-
-<Meta title="Components / Card" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-161" />
-
-<BackToTopButton />
-
 # Card
 
 A Card component serves as a visual container that groups related content and actions.
@@ -33,22 +21,17 @@ A Card component serves as a visual container that groups related content and ac
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Card {...props}>
+  <BodyText>{children as string}</BodyText>
+</Card>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Card colorScheme="neutralStrong" variant="subtle">
-      <DetailText size="2xl">Quick Start</DetailText>
-      <BodyText>Start building your next project in minutes.</BodyText>
-    </Card>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Card, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -61,22 +44,22 @@ const MyComponent = () => (
 
 ## Props
 
-| Property       | Type                                                                                                                                                        | Description                                | Default           |
-| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
-| variant        | `'subtle' \| 'emphasis' `                                                                                                                                   | The variant of the card.                   | `'subtle'`        |
+| Property       | Type                                                                                                                                                       | Description                                | Default           |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
+| variant        | `'subtle' \| 'emphasis' `                                                                                                                                  | The variant of the card.                   | `'subtle'`        |
 | colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'brand' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'highlight' \| 'pig'` | The color scheme of the card.              | `'neutralStrong'` |
-| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                                | The shadow color of the card.              | `-`               |
-| noPadding      | `boolean`                                                                                                                                                   | Whether or not the card has padding.       | `false`           |
-| onPress        | `() => void`                                                                                                                                                | Callback function to be called.            | `-`               |
-| disabled       | `boolean`                                                                                                                                                   | Whether the card is disabled.              | `false`           |
-| spacing        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                                          | The space between the content.             | `none`            |
-| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                                 | The align items of the flex container.     | `flex-start`      |
-| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                                    | The justify content of the flex container. | `flex-start`      |
-| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                                      | The wrap of the flex container.            | `nowrap`          |
-| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                    | The direction of the flex container.       | `column`          |
-| gap            | `number`                                                                                                                                                    | The gap between the content.               | `0`               |
-| rowGap         | `number`                                                                                                                                                    | The row gap between the content.           | `0`               |
-| columnGap      | `number`                                                                                                                                                    | The column gap between the content.        | `0`               |
+| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                               | The shadow color of the card.              | `-`               |
+| noPadding      | `boolean`                                                                                                                                                  | Whether or not the card has padding.       | `false`           |
+| onPress        | `() => void`                                                                                                                                               | Callback function to be called.            | `-`               |
+| disabled       | `boolean`                                                                                                                                                  | Whether the card is disabled.              | `false`           |
+| spacing        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                                         | The space between the content.             | `none`            |
+| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                                | The align items of the flex container.     | `flex-start`      |
+| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                                   | The justify content of the flex container. | `flex-start`      |
+| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                                     | The wrap of the flex container.            | `nowrap`          |
+| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                   | The direction of the flex container.       | `column`          |
+| gap            | `number`                                                                                                                                                   | The gap between the content.               | `0`               |
+| rowGap         | `number`                                                                                                                                                   | The row gap between the content.           | `0`               |
+| columnGap      | `number`                                                                                                                                                   | The column gap between the content.        | `0`               |
 
 ### `CardPressHandler` Props
 
@@ -106,9 +89,111 @@ const MyComponent = () => (
 
 ## Variants
 
-<Canvas of={Stories.Variants} />
-
-## Examples
+```tsx
+// Example usage
+<Flex spacing="lg">
+  <VariantTitle title="Subtle - White">
+    <Card {...props} variant="subtle" colorScheme="neutralStrong">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Emphasis - White">
+    <Card {...props} variant="emphasis" colorScheme="neutralStrong">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Subtle - Warm White">
+    <Card {...props} variant="subtle" colorScheme="neutralSubtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Emphasis - Warm White">
+    <Card {...props} variant="emphasis" colorScheme="neutralSubtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Brand - Subtle">
+    <Card {...props} colorScheme="brand" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Brand - Emphasis">
+    <Card {...props} colorScheme="brand" variant="emphasis">
+      <BodyText inverted>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Energy - Subtle">
+    <Card {...props} colorScheme="energy" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Energy - Emphasis">
+    <Card {...props} colorScheme="energy" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Broadband - Subtle">
+    <Card {...props} colorScheme="broadband" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Broadband - Emphasis">
+    <Card {...props} colorScheme="broadband" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Mobile - Subtle">
+    <Card {...props} colorScheme="mobile" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Mobile - Emphasis">
+    <Card {...props} colorScheme="mobile" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Insurance - Subtle">
+    <Card {...props} colorScheme="insurance" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Insurance - Emphasis">
+    <Card {...props} colorScheme="insurance" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Cashback - Subtle">
+    <Card {...props} colorScheme="cashback" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Cashback - Emphasis">
+    <Card {...props} colorScheme="cashback" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Piggy - Subtle">
+    <Card {...props} colorScheme="pig" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Piggy - Emphasis">
+    <Card {...props} colorScheme="pig" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Highlight - Subtle">
+    <Card {...props} colorScheme="highlight" variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Highlight - Emphasis">
+    <Card {...props} colorScheme="highlight" variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+</Flex>
+```
 
 ### Interactive
 
@@ -120,11 +205,77 @@ This will by default inherit the `onPress` handler from the child component. You
 by passing the `handlerToInherit` prop e.g `onChange`. Wrapping a component in a `CardPressHandler` component will
 make the card interactive and also show the `active` state of the child component when the `Card` is pressed.
 
-<Canvas of={Stories.Interactive} />
+```tsx
+// Example usage
+<Flex spacing="lg">
+  <VariantTitle title="Pressable - Subtle - White">
+    <Card
+      {...props}
+      onPress={() => console.log('pressed')}
+      variant="subtle"
+      colorScheme="neutralStrong"
+      spacing="md"
+      flexDirection="column"
+      alignItems="stretch"
+    >
+      <Heading size="md">Heading</Heading>
+      <BodyText>{children as string}</BodyText>
+      <Button onPress={() => console.log('pressed')}>Press me</Button>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Pressable - Emphasis - White">
+    <Card
+      {...props}
+      onPress={() => console.log('pressed')}
+      variant="emphasis"
+      colorScheme="neutralStrong"
+      spacing="md"
+      flexDirection="column"
+      alignItems="stretch"
+    >
+      <Heading size="md">Heading</Heading>
+      <BodyText>{children as string}</BodyText>
+      <Button onPress={() => console.log('pressed')}>Press me</Button>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Pressable - Subtle - Warm White">
+    <Card
+      {...props}
+      onPress={() => console.log('pressed')}
+      variant="subtle"
+      colorScheme="neutralSubtle"
+      spacing="md"
+      flexDirection="column"
+      alignItems="stretch"
+    >
+      <Heading size="md">Heading</Heading>
+      <BodyText>{children as string}</BodyText>
+      <Button onPress={() => console.log('pressed')}>Press me</Button>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Pressable - Emphasis - Warm White">
+    <Card
+      {...props}
+      variant="emphasis"
+      colorScheme="neutralSubtle"
+      spacing="md"
+      flexDirection="column"
+      alignItems="stretch"
+    >
+      <Heading size="md">Heading</Heading>
+      <BodyText>{children as string}</BodyText>
+      <CardPressHandler>
+        <Button onPress={() => console.log('pressed')}>Press me</Button>
+      </CardPressHandler>
+    </Card>
+  </VariantTitle>
+</Flex>
+```
 
 See example below for how to use the `CardPressHandler` component:
 
 ```jsx
+// Example usage
 import {
   Card,
   CardPressHandler,
@@ -151,9 +302,24 @@ const MyComponent = () => (
 
 You can add shadow to the `Card` component by using the `shadowColor` prop. This prop accepts various semantic color options to match your design needs.
 
-<Canvas of={Stories.WithShadow} />
+```tsx
+// Example usage
+<Flex spacing="lg">
+  <VariantTitle title="Subtle - White - Shadow">
+    <Card {...props} variant="subtle">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+  <VariantTitle title="Emphasis - White - Shadow">
+    <Card {...props} variant="emphasis">
+      <BodyText>{children as string}</BodyText>
+    </Card>
+  </VariantTitle>
+</Flex>
+```
 
 ```jsx
+// Example usage
 import { Card, BodyText, Heading } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -168,9 +334,60 @@ const MyComponent = () => (
 
 You can use the `CardAction` component within a `Card` to create actionable items with consistent styling.
 
-<Canvas of={Stories.WithActions} />
+```tsx
+// Example usage
+<Flex gap="400">
+  <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="emphasis">
+    <BodyText>{children as string}</BodyText>
+    <CardActions>
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        helperText="Some helper text"
+        leadingIcon={BellMediumIcon}
+      />
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        leadingIcon={BellMediumIcon}
+      />
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        helperText="Testing"
+        leadingIcon={BellMediumIcon}
+        iconContainer={false}
+      />
+    </CardActions>
+  </Card>
+  <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="subtle">
+    <BodyText>{children as string}</BodyText>
+    <CardActions>
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        helperText="Some helper text"
+        leadingIcon={BellMediumIcon}
+      />
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        leadingIcon={BellMediumIcon}
+      />
+      <CardAction
+        onPress={() => console.log('Card action pressed')}
+        heading="Card Action Head"
+        helperText="Testing"
+        leadingIcon={BellMediumIcon}
+        iconContainer={false}
+      />
+    </CardActions>
+  </Card>
+</Flex>
+```
 
 ```jsx
+// Example usage
 import {
   Card,
   CardAction,
@@ -209,14 +426,23 @@ const MyComponent = () => (
 
 #### `CardAction` Playground
 
-<Canvas of={ActionStories.Playground} />
-<Controls of={ActionStories.Playground} />
+```tsx
+// Example usage
+<View style={{ width: '100%', maxWidth: 400, gap: 16 }}>
+  <Card variant="emphasis">
+    <CardActions>
+      <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+    </CardActions>
+  </Card>
+</View>
+```
 
 #### `CardAction` With Badge
 
 The badge can be positioned in three different locations:
 
 ```tsx
+// Example usage
 import { Card, CardAction, CardActions, Badge } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -266,6 +492,7 @@ const MyComponent = () => (
 #### `CardAction` Size Variants
 
 ```tsx
+// Example usage
 import { Card, CardAction, CardActions } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -300,6 +527,7 @@ const MyComponent = () => (
 For more complex layouts, you can use the component parts directly:
 
 ```tsx
+// Example usage
 import {
   Card,
   CardAction,
@@ -347,6 +575,7 @@ Understanding how `Card` detects and renders `CardAction` components will help y
 direct child of `Card` to give the component a clear boundary for actions and remove heuristics.
 
 ```tsx
+// Example usage
 import { Card, CardAction, CardActions, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -363,6 +592,7 @@ const MyComponent = () => (
 **Using `CardContent` wrapper (For complex mixed content):**
 
 ```tsx
+// Example usage
 import {
   Card,
   CardContent,
@@ -403,6 +633,7 @@ Use the explicit `CardContent` wrapper when:
 3. **Nested components**: You have deeply nested content structures that might confuse the detection
 
 ```tsx
+// Example usage
 // Scenario: Complex nested structure with custom wrappers
 const MyComponent = () => (
   <Card>
@@ -423,6 +654,7 @@ When mapping over data to create `CardAction` components:
 1. **Wrap actions in `CardActions`** for better organisation:
 
 ```tsx
+// Example usage
 const ActionItem = ({ item }) => (
   <CardAction
     heading={item.label}
@@ -443,6 +675,7 @@ const ActionItem = ({ item }) => (
 2. **Keep action items simple** - avoid adding extra content alongside `CardAction` items:
 
 ```tsx
+// Example usage
 // ✅ Good: Simple action item
 const ActionItem = ({ label }) => <CardAction heading={label} onPress={() => {}} />;
 
@@ -458,6 +691,7 @@ const ActionItem = ({ label }) => (
 3. **Mix mapped actions with direct actions when needed**:
 
 ```tsx
+// Example usage
 <Card>
   <BodyText>Content</BodyText>
   <CardActions>

package/{src/components/Carousel/Carousel.docs.mdx → public/llms/components/carousel.md}

@@ -1,21 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, Box, Center } from '../../';
-import {
-  BackToTopButton,
-  DocComponentWrap,
-  UsageWrap,
-  ViewFigmaButton,
-} from '../../../docs/components';
-import { Carousel, CarouselControls, CarouselItem } from './';
-import * as Stories from './Carousel.stories';
-import { color } from '@utilitywarehouse/hearth-tokens';
-
-<Meta title="Components / Carousel" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=5190-621" />
-
-<BackToTopButton />
-
 # Carousel
 
 Carousels provide users with a dynamic and interactive way to browse through a series of content items, such as images, articles, or products. It allows users to view multiple items within a confined space, enabling efficient content discovery and engagement.
@@ -35,9 +17,12 @@ Carousel Controls are used to clearly indicate multiple pieces of content and to
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Box width={Platform.OS === 'web' ? 400 : '100%'} overflow="hidden" onLayout={handleLayout}>
+  <CarouselExample {...args} items={items} width={width} />
+</Box>
+```
 
 ## Usage
 
@@ -50,24 +35,8 @@ Carousel Controls are used to clearly indicate multiple pieces of content and to
 
 ## Basic Usage
 
-<UsageWrap>
-  <Center flex={1}>
-    <Carousel width={300}>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
-          <BodyText color="inverted">I'm a Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
-          <BodyText color="inverted">I'm another Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-    </Carousel>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -91,24 +60,8 @@ const MyComponent = () => (
 
 The `Carousel` component includes built-in pagination controls by default. You can customise their appearance or hide them entirely using props.
 
-<UsageWrap>
-  <Center flex={1}>
-    <Carousel width={300}>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
-          <BodyText color="inverted">I'm a Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
-          <BodyText color="inverted">I'm another Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-    </Carousel>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -132,24 +85,8 @@ const MyComponent = () => (
 
 Add previous and next navigation buttons to the controls by setting `showNavigation` to `true`.
 
-<UsageWrap>
-  <Center flex={1}>
-    <Carousel width={300} showNavigation>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
-          <BodyText color="inverted">I'm a Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
-          <BodyText color="inverted">I'm another Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-    </Carousel>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -173,25 +110,8 @@ const MyComponent = () => (
 
 The `CarouselControls` component is to be used in conjunction with the `Carousel` component. This component requires no props and automatically utilises the carousel context. When custom controls are provided, the built-in controls are automatically hidden.
 
-<UsageWrap>
-  <Center flex={1}>
-    <Carousel width={300}>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
-          <BodyText color="inverted">I'm a Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-      <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
-          <BodyText color="inverted">I'm another Carousel item!</BodyText>
-        </Box>
-      </CarouselItem>
-      <CarouselControls style={{ marginTop: 16 }} />
-    </Carousel>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText, Box, Carousel, CarouselControls } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -217,6 +137,7 @@ const MyComponent = () => (
 You can control the carousel programmatically using a ref. The carousel exposes `scrollToIndex` and `scrollToOffset` methods.
 
 ```jsx
+// Example usage
 import { useRef } from 'react';
 import {
   BodyText,
@@ -258,6 +179,7 @@ const MyComponent = () => {
 You can create a carousel with centered items that are smaller than the viewport width, showing partial views of adjacent items.
 
 ```jsx
+// Example usage
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -281,8 +203,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### `Carousel`
 
 This wraps a carousel in dynamic context context, automatically providing all functionality for `CarouselItem`, and `CarouselControls`.
@@ -348,6 +268,7 @@ When using a screen reader, users will navigate through the carousel items in or
 **Important:** You must add appropriate accessibility labels and hints to the content within each carousel item. The carousel itself does not automatically provide accessibility labels for item content.
 
 ```jsx
+// Example usage
 <Carousel width={300}>
   <CarouselItem>
     <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
@@ -379,6 +300,7 @@ When using a screen reader, users will navigate through the carousel items in or
 To make controls accessible to screen readers:
 
 ```jsx
+// Example usage
 // Make controls visible to screen readers globally
 <Carousel width={300} controlsAccessibilityHidden={false}>
   {/* items */}

package/public/llms/components/center.md

@@ -0,0 +1,24 @@
+# Center
+
+When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
+
+- [Usage](#usage)
+- [Props](#props)
+
+## Usage
+
+```jsx
+// Example usage
+import { Center, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
+
+const MyComponent = () => (
+  <Center backgroundColor={color.red[400]} width={300} height={200} padding="200">
+    <BodyText color="inverted">It's hard being in the middle of everything.</BodyText>
+  </Center>
+);
+```
+
+## Props
+
+The `Center` component extends the `Box` component, so it has all the same props as `Box`.