@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Timeline/Timeline.docs.mdx → public/llms/components/timeline.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Badge, BodyText, Box, Card, Center, Timeline, TimelineItem } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Timeline.stories';
-
-<Meta title="Components / Timeline" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4" />
-
 # Timeline
 
 Timeline presents a sequence of related stops or steps using either a static stop indicator or a progress state indicator. Each item supports a label, optional helper text, and optional custom content.
@@ -21,26 +10,38 @@ Timeline presents a sequence of related stops or steps using either a static sto
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Box style={{ width: 280 }}>
+  <Timeline {...args}>
+    <TimelineItem
+      label="Order placed"
+      helperText="We have received your request"
+      state={isProgress ? 'complete' : undefined}
+    />
+    <TimelineItem
+      label="Checking details"
+      helperText="We are validating the information"
+      state={isProgress ? 'complete' : undefined}
+    />
+    <TimelineItem
+      label="Engineer booked"
+      helperText="Your appointment has been reserved"
+      state={isProgress ? 'active' : undefined}
+    />
+    <TimelineItem
+      label="Service live"
+      helperText="Everything is ready to go"
+      state={isProgress ? 'incomplete' : undefined}
+    />
+  </Timeline>
+</Box>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Box style={{ width: 300 }}>
-      <Timeline variant="progress">
-        <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
-        <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
-        <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
-        <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
-      </Timeline>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -53,8 +54,6 @@ const MyComponent = () => (
 );
 ```
 
-## Props
-
 ### Timeline Props
 
 | Property   | Type                     | Description                                   | Default    |
@@ -71,30 +70,10 @@ const MyComponent = () => (
 | `state`      | `'complete' \| 'active' \| 'incomplete'` | Progress state used when `variant="progress"`.           | `'incomplete'` |
 | `children`   | `ReactNode`                              | Optional custom content rendered below the text content. | `undefined`    |
 
-## Examples
-
 ### Variants
 
-<UsageWrap>
-  <Center>
-    <Box style={{ width: 320 }}>
-      <Timeline variant="progress">
-        <TimelineItem label="Account created" helperText="Done" state="complete" />
-        <TimelineItem label="Documents uploaded" helperText="Done" state="complete" />
-        <TimelineItem label="Verification" helperText="In progress" state="active" />
-        <TimelineItem label="Decision" helperText="Pending" state="incomplete" />
-      </Timeline>
-      <Box style={{ height: 24 }} />
-      <Timeline variant="static">
-        <TimelineItem label="Collected" helperText="08:15" />
-        <TimelineItem label="Sorted" helperText="10:40" />
-        <TimelineItem label="Out for delivery" helperText="13:25" />
-      </Timeline>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Box, Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -117,30 +96,8 @@ const MyComponent = () => (
 
 ### Custom Content
 
-<UsageWrap>
-  <Center>
-    <Box style={{ width: 320 }}>
-      <Timeline variant="progress">
-        <TimelineItem
-          label="Application started"
-          helperText="We have saved your draft"
-          state="complete"
-        />
-        <TimelineItem label="Additional information" helperText="Action needed" state="active">
-          <Card variant="subtle" spacing="md">
-            <Badge>Required</Badge>
-            <Box>
-              <BodyText size="sm">Upload proof of address to continue.</BodyText>
-            </Box>
-          </Card>
-        </TimelineItem>
-        <TimelineItem label="Review complete" helperText="Pending" state="incomplete" />
-      </Timeline>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Badge,
   BodyText,

package/{src/components/Toast/Toast.docs.mdx → public/llms/components/toast.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import toastiOSVideo from '../../../docs/assets/toast-ios.MP4';
-import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Toast.stories';
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7072-902" />
-
-<Meta title="Components / Toast" />
-
-<BackToTopButton />
-
 # Toast
 
 The `Toast` component provides a non-intrusive way to display brief messages to users. Toasts appear at the bottom of the screen, can be stacked vertically, and automatically dismiss after a configurable duration. They support swipe-to-dismiss gestures and can include icons, action links, and a dismiss button.
@@ -29,17 +18,19 @@ The `Toast` component provides a non-intrusive way to display brief messages to
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<ViewWrap>
+  <PlaygroundDemo />
+</ViewWrap>
+```
 
 ### Setup
 
 First, wrap your app with the `ToastProvider` at the root level:
 
 ```tsx
+// Example usage
 import { ToastProvider } from '@utilitywarehouse/hearth-react-native';
 
 function App() {
@@ -54,6 +45,7 @@ function App() {
 Use the `useToast` hook to display toasts from any component:
 
 ```tsx
+// Example usage
 import { useToast } from '@utilitywarehouse/hearth-react-native';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -72,8 +64,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### ToastOptions
 
 | Prop              | Type                  | Default        | Description                                                      |
@@ -106,53 +96,82 @@ Returns an object with:
 - **Icons:** Add visual context by including an icon component. Icons are positioned at the start of the toast message.
 - **Action Links:** Include interactive action links (like "Undo" or "View") as secondary actions within the toast using the `actionText` prop. When `onPress` is provided, the entire toast becomes tappable, allowing users to trigger the action by tapping anywhere on the toast.
 
-### Native iOS Toast Animation
-
-<video src={toastiOSVideo} width={400} height="auto" controls loop autoPlay />
-
-## Examples
-
 ### Basic Toast
 
 A simple text-only toast:
 
-<Canvas of={Stories.BasicToast} />
+```tsx
+// Example usage
+<ViewWrap>
+  <BasicToastDemo />
+</ViewWrap>
+```
 
 ### With Icon
 
 Toasts with icons for different message types:
 
-<Canvas of={Stories.WithIcon} />
+```tsx
+// Example usage
+<ViewWrap>
+  <WithIconDemo />
+</ViewWrap>
+```
 
 ### With Action
 
 Include interactive action links for secondary actions:
 
-<Canvas of={Stories.WithAction} />
+```tsx
+// Example usage
+<ViewWrap>
+  <WithActionDemo />
+</ViewWrap>
+```
 
 ### Custom Duration
 
 Control how long toasts stay visible:
 
-<Canvas of={Stories.CustomDuration} />
+```tsx
+// Example usage
+<ViewWrap>
+  <CustomDurationDemo />
+</ViewWrap>
+```
 
 ### Stacked Toasts
 
 Multiple toasts stack vertically, newest on top:
 
-<Canvas of={Stories.StackedToasts} />
+```tsx
+// Example usage
+<ViewWrap>
+  <StackedToastsDemo />
+</ViewWrap>
+```
 
 ### Programmatic Dismiss
 
 Dismiss toasts programmatically using their ID:
 
-<Canvas of={Stories.ProgrammaticDismiss} />
+```tsx
+// Example usage
+<ViewWrap>
+  <ProgrammaticDismissDemo />
+</ViewWrap>
+```
 
 ### Dismiss Options
 
 Control dismiss behavior with `showDismissIcon` and `dismissOnPress`:
 
-<Canvas of={Stories.DismissOptions} />
+```tsx
+// Example usage
+<ViewWrap>
+  <DismissOptionsDemo />
+</ViewWrap>
+```
 
 ## Accessibility
 

package/{src/components/ToggleButtonCard/ToggleButtonCard.docs.mdx → public/llms/components/toggle-button-card.md}

@@ -1,23 +1,3 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './ToggleButtonCardGroup.stories';
-import {
-  ToggleButtonCard,
-  ToggleButtonCardGroup,
-  Center,
-  Box,
-  Heading,
-  BodyText,
-  DetailText,
-} from '../..';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
-
-<Meta title="Components / Toggle Button Card" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=1-161" />
-
 # Toggle Button Card
 
 The `ToggleButtonCard` component is a UI element that allows users to select one option from a set of predefined choices.
@@ -30,41 +10,40 @@ with other `ToggleButtonCard`s to create a `ToggleButtonCardGroup`, providing a
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<ToggleButtonCardGroup {...args}>
+  <ToggleButtonCard
+    aria-label="Label 1"
+    label="Option 1"
+    value="Option 1"
+    nativeID="ToggleButtonCard-1"
+  >
+    <BodyText>Additional content for option</BodyText>
+  </ToggleButtonCard>
+  <ToggleButtonCard
+    aria-label="Label 2"
+    label="Option 2 "
+    value="Option 2"
+    nativeID="ToggleButtonCard-2"
+  >
+    <BodyText>Additional content for option</BodyText>
+  </ToggleButtonCard>
+  <ToggleButtonCard
+    aria-label="Label 3"
+    label="Option 3"
+    value="Option 3"
+    nativeID="ToggleButtonCard-3"
+  >
+    <BodyText>Additional content for option</BodyText>
+  </ToggleButtonCard>
+</ToggleButtonCardGroup>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <ToggleButtonCardGroup aria-label="ToggleButtonCard Group" nativeID="ToggleButtonCard-group">
-      <ToggleButtonCard value="fixed" aria-label="Fixed Tariff" label="Select tariff" gap="200">
-        <Heading size="md">Fixed</Heading>
-        <Box flexDirection="row" alignItems="center" gap="100">
-          <DetailText size="3xl">£163.00</DetailText>
-          <BodyText color="grey500"> monthly estimate</BodyText>
-        </Box>
-        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
-      </ToggleButtonCard>
-      <ToggleButtonCard
-        value="variable"
-        aria-label="Variable Tariff"
-        label="Select tariff"
-        gap="200"
-      >
-        <Heading size="md">Variable</Heading>
-        <Box flexDirection="row" alignItems="center" gap="100">
-          <DetailText size="3xl">£153.00</DetailText>
-          <BodyText color="grey500"> monthly estimate</BodyText>
-        </Box>
-        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
-      </ToggleButtonCard>
-    </ToggleButtonCardGroup>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   ToggleButtonCard,
   ToggleButtonCardGroup,
@@ -72,7 +51,7 @@ import {
   Heading,
   BodyText,
   DetailText,
-} from '@utilitywarehouse/native-ui';
+} from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = React.useState('Option 1');
@@ -80,7 +59,7 @@ const MyComponent = () => {
     <ToggleButtonCardGroup
       aria-label="Select Tariff"
       value={value}
-      onChange={setValue}
+      onValueChange={setValue}
       nativeID="ToggleButtonCard-group"
     >
       <ToggleButtonCard value="fixed" aria-label="Fixed Tariff" label="Select tariff" gap="200">
@@ -124,8 +103,6 @@ The `ToggleButtonCard` component accepts the following props:
 | `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'stretch' \| 'baseline'`                             | -       | Sets the alignment of flex items on the cross axis.                                                          |
 | `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'space-between' \| 'space-around' \| 'space-evenly'` | -       | Sets the alignment of flex items on the main axis.                                                           |
 
-## Components
-
 ### `ToggleButtonCard`
 
 Contains all ToggleButtonCard related layout style props and actions. It inherits all the properties of React Native's [`Pressable` component](https://reactnative.dev/docs/pressable) and [`View` component](https://reactnative.dev/docs/view) styles for layout.
@@ -137,7 +114,8 @@ Contains all Group related layout style props and actions. It inherits all the p
 | Property         | Type                                                                                                     | Default | Description                                                                                                |
 | ---------------- | -------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
 | `value`          | `string`                                                                                                 | -       | The value of the currently selected `ToggleButtonCard`.                                                    |
-| `onChange`       | `(value: string) => void`                                                                                | -       | Callback fired when the selected `ToggleButtonCard` changes.                                               |
+| `onValueChange`  | `(value: string) => void`                                                                                | -       | Callback fired when the selected `ToggleButtonCard` changes.                                               |
+| `onChange`       | `(value: string) => void`                                                                                | -       | **Deprecated** — use `onValueChange` instead.                                                              |
 | `gap`            | `keyof typeof space`                                                                                     | -       | The gap between the `ToggleButtonCard` items.                                                              |
 | `columns`        | `GridProps['columns']`                                                                                   | -       | If set, the group will use a grid layout with the specified number of columns. Otherwise, it uses flexbox. |
 | `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                 | `row`   | (Flexbox only) Sets the direction of the flex items.                                                       |

package/{src/components/VerificationInput/VerificationInput.docs.mdx → public/llms/components/verification-input.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { VerificationInput } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './VerificationInput.stories';
-
-<Meta title="Forms / Verification Input" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&t=m0WHtPBmyE9YVP8Q-0" />
-
 # Verification Input
 
 The verification input component is used to capture OTP (One Time Password) or other verification codes.
@@ -22,17 +10,22 @@ The verification input component is used to capture OTP (One Time Password) or o
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<VerificationInput
+  {...args}
+  value={value}
+  onChangeText={text => {
+    setValue(text);
+    args.onChangeText?.(text);
+  }}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <VerificationInput label="Enter Code" onChangeText={code => console.log(code)} />
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { VerificationInput } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -62,9 +55,33 @@ const MyComponent = () => {
 
 ## Ref Methods
 
-<Canvas of={Stories.RefMethods} />
+```tsx
+// Example usage
+<Flex direction="column" space="lg" style={{ width: 400 }}>
+  <VariantTitle title="Ref Methods">
+    <VerificationInput
+      ref={inputRef}
+      label="Verification Code"
+      value={value}
+      onChangeText={setValue}
+    />
+  </VariantTitle>
+  <VariantTitle title="Actions">
+    <Flex direction="column" space="sm">
+      <Flex direction="row" space="sm">
+        <Button onPress={handleFocus}>Focus</Button>
+        <Button onPress={handleFocusIndex}>Focus Slot 4</Button>
+        <Button onPress={handleBlur}>Blur</Button>
+        <Button onPress={handleClear}>Clear</Button>
+      </Flex>
+      <BodyText>{status}</BodyText>
+    </Flex>
+  </VariantTitle>
+</Flex>
+```
 
 ```tsx
+// Example usage
 import { useRef } from 'react';
 import {
   VerificationInput,
@@ -89,4 +106,72 @@ Available methods:
 
 ## States
 
-<Canvas of={Stories.Variants} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg" style={{ width: 400 }}>
+  <VariantTitle title="Default">
+    <VerificationInput
+      label="Verification Code"
+      helperText="Enter the code sent to your phone"
+      value={values.default}
+      onChangeText={updateValue('default')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="Filled">
+    <VerificationInput
+      label="Filled Input"
+      value={values.filled}
+      onChangeText={updateValue('filled')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="Invalid">
+    <VerificationInput
+      label="Invalid Input"
+      validationStatus="invalid"
+      invalidText="The code you entered is incorrect"
+      value={values.invalid}
+      onChangeText={updateValue('invalid')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="Valid">
+    <VerificationInput
+      label="Valid Input"
+      validationStatus="valid"
+      validText="Code verified!"
+      value={values.valid}
+      onChangeText={updateValue('valid')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="Disabled">
+    <VerificationInput
+      label="Disabled Input"
+      disabled
+      value={values.disabled}
+      onChangeText={updateValue('disabled')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="Secure Text Entry">
+    <VerificationInput
+      label="Secure Input"
+      secureTextEntry
+      value={values.secure}
+      onChangeText={updateValue('secure')}
+    />
+  </VariantTitle>
+
+  <VariantTitle title="With Helper Icon">
+    <VerificationInput
+      label="Helper Icon"
+      helperText="Some information"
+      helperIcon={InfoMediumIcon}
+      value={values.default}
+      onChangeText={updateValue('default')}
+    />
+  </VariantTitle>
+</Flex>
+```

package/{docs/adding-shadows.mdx → public/llms/docs/adding-shadows.md}

@@ -1,10 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BodyText, Box, Card, Center, Heading } from '../src';
-import { BackToTopButton, InputShadowExample, NextPrevPage, UsageWrap } from './components';
-
-<Meta title="Guides / Adding Shadows" />
-<BackToTopButton />
-
 # Adding Shadows
 
 You can add shadows to your components in Hearth React Native using the Unistyles styling system. Shadows help create depth and visual hierarchy in your UI.
@@ -16,13 +9,8 @@ You can add shadows to your components in Hearth React Native using the Unistyle
 
 Hearth provides a set of predefined shadow styles that you can easily apply to your components. These shadows are defined in the theme and can be accessed via the `theme.helpers.shadow` object.
 
-<UsageWrap>
-  <Center>
-    <InputShadowExample />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { View } from 'react-native';
 import { StyleSheet, Input } from '@utilitywarehouse/hearth-react-native';
 import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
@@ -42,26 +30,11 @@ const MyComponent = () => (
 
 ## Components with Shadow Props
 
-<UsageWrap>
-  <Center>
-    <Card shadowColor="brand" spacing="md">
-      <Heading size="md">Card with Shadow</Heading>
-      <BodyText>This card has a shadow color set to the brand color.</BodyText>
-    </Card>
-  </Center>
-</UsageWrap>
-
 Some Hearth components, like `Card`, allow you to specify shadow colors directly via props. You can use the `shadowColor` prop to set the shadow color based on the theme.
 
 ```tsx
+// Example usage
 import { Card } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Card shadowColor="brand">{/* Card content */}</Card>;
 ```
-
-<NextPrevPage
-  prevLink="all-components"
-  prevTitle="All Components"
-  nextLink="guides-dark-mode-best-practice"
-  nextTitle="Dark Mode Best Practice"
-/>

package/public/llms/docs/all-components.md

@@ -0,0 +1,3 @@
+# All Components
+
+This page showcases all the components available in the Hearth React Native library.