@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Expandable/Expandable.docs.mdx → public/llms/components/expandable.md}

@@ -1,12 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BodyText, Button, Card, Center } from '../../';
-import { BackToTopButton, UsageWrap } from '../../../docs/components';
-import * as Stories from './Expandable.stories';
-
-<Meta title="Utility Components / Expandable" />
-
-<BackToTopButton />
-
 # Expandable
 
 The Expandable component is a primitive for creating expandable content with smooth animations. It's commonly used as a building block for components like accordions, collapsible sections, and other interactive content that needs to expand and collapse.
@@ -24,15 +15,41 @@ The Expandable component is a primitive for creating expandable content with smo
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    {expanded ? 'Collapse' : 'Expand'}
+  </Button>
+  <Expandable {...args} expanded={expanded}>
+    <Card>
+      <BodyText>
+        This is expandable content. It animates smoothly when toggled. You can put any content here,
+        and it will expand and collapse with animation.
+      </BodyText>
+    </Card>
+  </Expandable>
+</>
+```
 
 ## Usage
 
-<Canvas of={Stories.BasicExample} />
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    Toggle Content
+  </Button>
+  <Expandable expanded={expanded}>
+    <Card>
+      <BodyText>This content expands and collapses with a smooth animation.</BodyText>
+    </Card>
+  </Expandable>
+</>
+```
 
 ```tsx
+// Example usage
 import { useState } from 'react';
 import { View } from 'react-native';
 import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
@@ -70,9 +87,22 @@ const MyComponent = () => {
 
 The `duration` prop controls how long the expand/collapse animation takes. The default is 200ms, which provides a smooth, natural feel. You can adjust this for faster or slower animations.
 
-<Canvas of={Stories.FastAnimation} />
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    Fast Toggle
+  </Button>
+  <Expandable expanded={expanded} duration={150}>
+    <Card>
+      <BodyText>This expands and collapses quickly with a 150ms duration.</BodyText>
+    </Card>
+  </Expandable>
+</>
+```
 
 ```tsx
+// Example usage
 // Fast animation (150ms)
 <Expandable expanded={expanded} duration={150}>
   <Card>
@@ -88,22 +118,111 @@ The `duration` prop controls how long the expand/collapse animation takes. The d
 </Expandable>
 ```
 
-## Examples
-
 ### Basic Example
 
-<Canvas of={Stories.BasicExample} />
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    Toggle Content
+  </Button>
+  <Expandable expanded={expanded}>
+    <Card>
+      <BodyText>This content expands and collapses with a smooth animation.</BodyText>
+    </Card>
+  </Expandable>
+</>
+```
 
 ### With Different Animation Speeds
 
-<Canvas of={Stories.FastAnimation} />
-<Canvas of={Stories.SlowAnimation} />
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    Fast Toggle
+  </Button>
+  <Expandable expanded={expanded} duration={150}>
+    <Card>
+      <BodyText>This expands and collapses quickly with a 150ms duration.</BodyText>
+    </Card>
+  </Expandable>
+</>
+```
+
+```tsx
+// Example usage
+<>
+  <Button onPress={() => setExpanded(!expanded)} style={{ marginBottom: 16 }}>
+    Slow Toggle
+  </Button>
+  <Expandable expanded={expanded} duration={600}>
+    <Card>
+      <BodyText>This expands and collapses slowly with a 600ms duration.</BodyText>
+    </Card>
+  </Expandable>
+</>
+```
 
 ### Multiple Expandables
 
-<Canvas of={Stories.MultipleExpandables} />
+```tsx
+// Example usage
+<View style={{ width: 300, gap: 16 }}>
+  <View>
+    <Button
+      onPress={() => setExpanded1(!expanded1)}
+      style={{ marginBottom: 8 }}
+      iconPosition="right"
+      icon={expanded1 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
+    >
+      Section 1
+    </Button>
+    <Expandable expanded={expanded1}>
+      <Card>
+        <BodyText>Content for section 1</BodyText>
+      </Card>
+    </Expandable>
+  </View>
+
+  <View>
+    <Button
+      onPress={() => setExpanded2(!expanded2)}
+      style={{ marginBottom: 8 }}
+      iconPosition="right"
+      icon={expanded2 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
+    >
+      Section 2
+    </Button>
+    <Expandable expanded={expanded2}>
+      <Card>
+        <BodyText>Content for section 2 with more detailed information.</BodyText>
+      </Card>
+    </Expandable>
+  </View>
+
+  <View>
+    <Button
+      onPress={() => setExpanded3(!expanded3)}
+      style={{ marginBottom: 8 }}
+      iconPosition="right"
+      icon={expanded3 ? ChevronUpMediumIcon : ChevronDownMediumIcon}
+    >
+      Section 3
+    </Button>
+    <Expandable expanded={expanded3}>
+      <Card>
+        <BodyText>
+          Content for section 3 with even more information that spans multiple lines.
+        </BodyText>
+      </Card>
+    </Expandable>
+  </View>
+</View>
+```
 
 ```tsx
+// Example usage
 import { useState } from 'react';
 import { View } from 'react-native';
 import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
@@ -148,9 +267,33 @@ const MyComponent = () => {
 
 ### Controlled Example
 
-<Canvas of={Stories.ControlledExample} />
+```tsx
+// Example usage
+<View style={{ width: 300 }}>
+  <View style={{ flexDirection: 'row', gap: 8, marginBottom: 16 }}>
+    <Button onPress={() => setExpanded(true)} style={{ flex: 1 }}>
+      Expand
+    </Button>
+    <Button onPress={() => setExpanded(false)} style={{ flex: 1 }}>
+      Collapse
+    </Button>
+  </View>
+  <Expandable
+    expanded={expanded}
+    onExpandedChange={setExpanded}
+    accessibilityLabel="Expandable content section"
+  >
+    <Card>
+      <BodyText>
+        This is a controlled expandable with separate expand and collapse buttons.
+      </BodyText>
+    </Card>
+  </Expandable>
+</View>
+```
 
 ```tsx
+// Example usage
 import { useState } from 'react';
 import { View } from 'react-native';
 import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
@@ -187,6 +330,7 @@ The Expandable component includes built-in accessibility support:
 - Automatically announces state changes to assistive technologies
 
 ```tsx
+// Example usage
 <Expandable expanded={expanded} accessibilityLabel="Additional information section">
   {/* content */}
 </Expandable>

package/{src/components/Flex/Flex.docs.mdx → public/llms/components/flex.md}

@@ -1,12 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, Center, Flex, Pressable } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Flex.stories';
-
-<Meta title="Primitives / Flex" />
-
-<BackToTopButton />
-
 # Flex
 
 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.
@@ -17,25 +8,28 @@ When you need to center-align content, the Center component comes in handy. It i
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Flex {...args}>
+  {Array.from({ length: 4 }).map((_, index) => (
+    <Box
+      key={index}
+      // @ts-expect-error - This is a playground
+      bg={`grey${index + 1}00`}
+      w={100 + index * 10}
+      h={100 + index * 10}
+      borderColor="strong"
+      borderWidth="2"
+      borderRadius="md"
+    />
+  ))}
+</Flex>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Flex spacing="lg">
-      <BodyText>Spaced out text</BodyText>
-      <BodyText>Spaced out text</BodyText>
-      <BodyText>Flexed</BodyText>
-      <BodyText>Spaced out text</BodyText>
-      <BodyText>Spaced out text</BodyText>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Flex, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (

package/{src/components/FormField/FormField.docs.mdx → public/llms/components/form-field.md}

@@ -1,35 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  Center,
-  FormField,
-  FormFieldHelper,
-  FormFieldHelperText,
-  FormFieldInvalid,
-  FormFieldInvalidIcon,
-  FormFieldInvalidText,
-  FormFieldLabel,
-  FormFieldLabelText,
-  FormFieldTextContent,
-  FormFieldValid,
-  FormFieldValidIcon,
-  FormFieldValidText,
-  Input,
-  InputField,
-  Radio,
-  RadioGroup,
-  RadioIndicator,
-  RadioLabel,
-} from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './FormField.stories';
-
-<Meta title="Forms / Form Field" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-152" />
-
-<BackToTopButton />
-
 # Form Field
 
 The `FormField` component is a container for form elements such as input fields. It provides a consistent layout and styling for form elements in which developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
@@ -48,21 +16,17 @@ The `FormField` component is a container for form elements such as input fields.
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<FormField validationStatus={validationStatus} helperIcon={helperIcon} {...props}>
+  <Input />
+</FormField>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
-    </FormField>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input, FormField } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -78,21 +42,8 @@ const MyComponent = () => {
 
 The `FormField` component can display helper text to provide additional context to the user. This text can be used to provide information about the field, such as the format of the input or the requirements for the field.
 
-<UsageWrap>
-  <Center>
-    <FormField
-      validationStatus="invalid"
-      label="Label"
-      helperText="Helper text"
-      validText="Valid form field text"
-      invalidText="Invalid form field text"
-    >
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
-    </FormField>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input, FormField } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -148,37 +99,58 @@ The `FormField` component is composed of the following components:
 
 ## Variants
 
-<Canvas of={Stories.Variants} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg">
+  <VariantTitle title="Default">
+    <FormField label="Label">
+      <Input />
+    </FormField>
+  </VariantTitle>
+  <VariantTitle title="With helper text bottom">
+    <FormField label="Label" helperText="Helper text">
+      <Input />
+    </FormField>
+  </VariantTitle>
+  <VariantTitle title="With helper text top">
+    <FormField label="Label" helperText="Helper text">
+      <Input />
+    </FormField>
+  </VariantTitle>
+  <VariantTitle title="Valid with valid text">
+    <FormField
+      validationStatus="valid"
+      label="Label"
+      helperText="Helper text"
+      validText="Valid form field text"
+    >
+      <Input />
+    </FormField>
+  </VariantTitle>
+  <VariantTitle title="Invalid with invalid text">
+    <FormField
+      validationStatus="invalid"
+      label="Label"
+      helperText="Helper Text"
+      invalidText="Invalid form field text"
+    >
+      <Input />
+    </FormField>
+  </VariantTitle>
+  <VariantTitle title="Disabled">
+    <FormField disabled label="Label" helperText="Helper text">
+      <Input />
+    </FormField>
+  </VariantTitle>
+</Flex>
+```
 
 ## Advanced Usage
 
 The `FormField` component can be broken down into smaller components to provide more control over the layout and styling of the form field.
 
-<UsageWrap>
-  <Center>
-    <FormField validationStatus="valid" showValidationIcon={false}>
-      <FormFieldTextContent>
-        <FormFieldLabel>
-          <FormFieldLabelText>Label</FormFieldLabelText>
-        </FormFieldLabel>
-        <FormFieldHelper>
-          <FormFieldHelperText>Helper text</FormFieldHelperText>
-        </FormFieldHelper>
-      </FormFieldTextContent>
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
-      <FormFieldInvalid>
-        <FormFieldInvalidIcon />
-        <FormFieldInvalidText>Invalid form field text</FormFieldInvalidText>
-      </FormFieldInvalid>
-      <FormFieldValid>
-        <FormFieldValidIcon />
-        <FormFieldValidText>Valid form field text</FormFieldValidText>
-      </FormFieldValid>
-    </FormField>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Input,
   FormField,
@@ -220,23 +192,14 @@ const MyComponent = () => {
 };
 ```
 
-## Examples
-
 ### Optional `FormField` Components
 
 The `FormField` component can be used to wrap any component to provide additional context to the user.
 The `FormField` component can be marked as optional by setting the `required` prop to `false`.
 This will add the "optional" text to the label.
 
-<UsageWrap>
-  <Center>
-    <FormField label="Label" helperText="Helper text" required={false}>
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
-    </FormField>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input, FormField } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -252,24 +215,8 @@ const MyComponent = () => {
 
 The `FormField` component can be used to wrap a `RadioGroup` component to provide additional context to the user.
 
-<UsageWrap>
-  <Center>
-    <FormField
-      label="What is your favourite fruit?"
-      helperText="Choose the fruit you like the most"
-      helperPosition="bottom"
-    >
-      <RadioGroup aria-label="Radio Group">
-        <Radio value="mango" label="Mango" />
-        <Radio value="apple" label="Apple" />
-        <Radio value="orange" label="Orange" />
-        <Radio value="banana" label="Banana" />
-      </RadioGroup>
-    </FormField>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { RadioGroup, Radio, FormField } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -295,6 +242,7 @@ const MyComponent = () => {
 The `FormField` component can be used to wrap a `Checkbox` component to provide additional context to the user.
 
 ```tsx
+// Example usage
 import {
   Checkbox,
   CheckboxIndicator,

package/{src/components/Grid/Grid.docs.mdx → public/llms/components/grid.md}

@@ -1,13 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, Box, Center, Grid } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Grid.stories';
-import { color } from '@utilitywarehouse/hearth-tokens';
-
-<Meta title="Primitives / Grid" />
-
-<BackToTopButton />
-
 # Grid
 
 The Grid component helps you create responsive grid layouts with configurable columns and spacing. It's perfect for creating photo galleries, card layouts, and other grid-based UI elements.
@@ -18,32 +8,22 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Grid {...args} style={{ width: 400 }}>
+  <GridItem color="#FFD6D6" />
+  <GridItem color="#D6FFD6" />
+  <GridItem color="#D6D6FF" />
+  <GridItem color="#FFFFD6" />
+  <GridItem color="#FFD6FF" />
+  <GridItem color="#D6FFFF" />
+</Grid>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Grid columns={2} spacing="md" width={300}>
-      <Box backgroundColor={color.green[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 1</BodyText>
-      </Box>
-      <Box backgroundColor={color.blue[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 2</BodyText>
-      </Box>
-      <Box backgroundColor={color.red[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 3</BodyText>
-      </Box>
-      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 4</BodyText>
-      </Box>
-    </Grid>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -69,35 +49,8 @@ const MyComponent = () => (
 
 The Grid component supports responsive column layouts based on screen size breakpoints:
 
-<UsageWrap>
-  <Center>
-    <Grid
-      columns={{
-        xs: 1,
-        sm: 2,
-        md: 3,
-        lg: 4,
-      }}
-      spacing="md"
-      width="100%"
-    >
-      <Box backgroundColor={color.green[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 1</BodyText>
-      </Box>
-      <Box backgroundColor={color.blue[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 2</BodyText>
-      </Box>
-      <Box backgroundColor={color.red[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 3</BodyText>
-      </Box>
-      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 4</BodyText>
-      </Box>
-    </Grid>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -132,26 +85,8 @@ const MyComponent = () => (
 
 You can specify different horizontal and vertical spacing:
 
-<UsageWrap>
-  <Center>
-    <Grid columns={2} columnGap={24} rowGap={16}>
-      <Box backgroundColor={color.green[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 1</BodyText>
-      </Box>
-      <Box backgroundColor={color.blue[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 2</BodyText>
-      </Box>
-      <Box backgroundColor={color.red[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 3</BodyText>
-      </Box>
-      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
-        <BodyText color="inverted">Item 4</BodyText>
-      </Box>
-    </Grid>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -190,6 +125,7 @@ The Grid component extends all the props from the [View component](https://react
 Where `GridColumns` is defined as:
 
 ```tsx
+// Example usage
 type GridColumns = {
   [key in keyof UnistylesBreakpoints]?: number;
 };