@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/{src/components/CurrencyInput/CurrencyInput.docs.mdx → public/llms/components/currency-input.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Center, CurrencyInput, FormField } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './CurrencyInput.stories';
-
-<Meta title="Forms / Currency Input" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/pjuYVErQWaAvs8rCAVgPKX/Motion-Tokens?node-id=2161-1336" />
-
 # Currency Input
 
 An input specialised for monetary amounts. It shows a currency symbol prefix and uses a decimal keypad where supported.
@@ -24,18 +12,15 @@ An input specialised for monetary amounts. It shows a currency symbol prefix and
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<CurrencyInput {...args} value={value} onChangeText={setValue} />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <CurrencyInput placeholder="0.00" />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -69,24 +54,12 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 
-## Examples
-
 ## With Label and Helper Text
 
 The `CurrencyInput` component can display a label and helper text by passing the appropriate props.
 
-<UsageWrap>
-  <Center>
-    <CurrencyInput
-      label="Amount"
-      helperText="Enter the amount in GBP"
-      placeholder="0.00"
-      onChange={() => console.log('###')}
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -109,17 +82,10 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `CurrencyInput` component can be used with the `FormField` component to create a custom input field.
-For more information on the `FormField` component view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
-
-<UsageWrap>
-  <Center>
-    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <CurrencyInput onChange={() => console.log('###')} />
-    </FormField>
-  </Center>
-</UsageWrap>
+For more information on the `FormField` component view the `FormField` documentation.
 
 ```tsx
+// Example usage
 import { FormField, CurrencyInput } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -137,15 +103,53 @@ const MyComponent = () => {
 
 ## States
 
-<Canvas of={Stories.States} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg">
+  <VariantTitle title="Default">
+    <CurrencyInput />
+  </VariantTitle>
+  <VariantTitle title="With placeholder">
+    <CurrencyInput placeholder="0.00" />
+  </VariantTitle>
+  <VariantTitle title="Focused">
+    <CurrencyInput focused value="12.34" />
+  </VariantTitle>
+  <VariantTitle title="Valid">
+    <CurrencyInput validationStatus="valid" />
+  </VariantTitle>
+  <VariantTitle title="Invalid">
+    <CurrencyInput validationStatus="invalid" />
+  </VariantTitle>
+  <VariantTitle title="Valid - Focused">
+    <CurrencyInput validationStatus="valid" focused />
+  </VariantTitle>
+  <VariantTitle title="Invalid - Focused">
+    <CurrencyInput validationStatus="invalid" focused />
+  </VariantTitle>
+  <VariantTitle title="Disabled">
+    <CurrencyInput disabled />
+  </VariantTitle>
+  <VariantTitle title="Readonly">
+    <CurrencyInput readonly value="11666" />
+  </VariantTitle>
+  <VariantTitle title="Disable auto format thousands">
+    <CurrencyInput disableGroupSeparator value="1234.56" />
+  </VariantTitle>
+</Flex>
+```
 
 ## Formatting
 
 Automatic thousand separator formatting can be disabled by setting `disableGroupSeparator`.
 
-<Canvas of={Stories.DisableGroupSeparator} />
+```tsx
+// Example usage
+<CurrencyInput {...args} value={value} onChangeText={setValue} />
+```
 
 ```tsx
+// Example usage
 <CurrencyInput disableGroupSeparator value="1234567.89" /> // displays 1234567.89
 ```
 

package/{src/components/DateInput/DateInput.docs.mdx → public/llms/components/date-input.md}

@@ -1,13 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './DateInput.stories';
-
-<Meta title="Forms / Date Input" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2277-14708&t=dbFGPEbIX93BQlur-4" />
-
-<BackToTopButton />
-
 # Date Input
 
 The `DateInput` component allows users to enter dates manually using separate input fields for day, month, and year. It provides flexibility to show only the date segments you need, supports validation states, and integrates seamlessly with the React Native form system.
@@ -32,15 +22,17 @@ The `DateInput` component allows users to enter dates manually using separate in
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<DateInput label="Date" helperText="Helper text" />
+```
 
 ## Usage
 
 Use state to control the date values:
 
 ```tsx
+// Example usage
 import { useState } from 'react';
 import { DateInput } from '@utilitywarehouse/hearth-react-native';
 
@@ -63,8 +55,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### DateInputProps
 
 | Prop                  | Type                                | Default     | Description                                           |
@@ -103,73 +93,208 @@ const MyComponent = () => {
 | `inputStyle`          | `ViewStyle`                         | -           | Custom style for each input field                     |
 | `inputLabelStyle`     | `TextStyle`                         | -           | Custom style for each input label                     |
 
-## Examples
-
 ### Date of Birth
 
-<Canvas of={Stories.DateOfBirth} />
+```tsx
+// Example usage
+<DateInput label="Date of birth" helperText="Enter your date of birth" required />
+```
 
 ### Card Expiry
 
 Hide the day segment for card expiry dates:
 
-<Canvas of={Stories.CardExpiry} />
+```tsx
+// Example usage
+<DateInput
+  label="Card expiry"
+  helperText="Enter the expiry month and year"
+  monthValue={month}
+  yearValue={year}
+  onMonthChange={setMonth}
+  onYearChange={setYear}
+  hideDay
+  required
+/>
+```
 
 ### Year Only
 
 Hide day and month segments for year-only inputs:
 
-<Canvas of={Stories.YearOnly} />
+```tsx
+// Example usage
+<DateInput label="Year" helperText="Enter the year" hideDay hideMonth />
+```
 
 ### Validation
 
 Show validation states with helper text and icons:
 
-<Canvas of={Stories.Validation} />
+```tsx
+// Example usage
+<View style={{ gap: 16 }}>
+  <DateInput
+    label="Valid date"
+    dayValue={day}
+    monthValue={month}
+    yearValue={year}
+    onDayChange={setDay}
+    onMonthChange={setMonth}
+    onYearChange={setYear}
+    validationStatus="valid"
+    validText="Date is valid"
+    helperIcon={TickSmallIcon}
+    required
+  />
+  <DateInput
+    label="Invalid date"
+    dayValue="32"
+    monthValue="13"
+    yearValue="2025"
+    validationStatus="invalid"
+    invalidText="Please enter a valid date"
+    helperIcon={WarningSmallIcon}
+    required
+  />
+</View>
+```
 
 ### Disabled
 
 Disabled date inputs:
 
-<Canvas of={Stories.Disabled} />
+```tsx
+// Example usage
+<DateInput
+  label="Date of birth"
+  helperText="This field is disabled"
+  dayValue="15"
+  monthValue="06"
+  yearValue="1990"
+  disabled
+/>
+```
 
 ### Default Value
 
 Set initial values with `value` props:
 
-<Canvas of={Stories.DefaultValue} />
+```tsx
+// Example usage
+<DateInput label="Date of birth" dayValue="01" monthValue="01" yearValue="2000" />
+```
 
 ### Custom Validation
 
 Implement custom validation logic:
 
-<Canvas of={Stories.WithCustomValidation} />
+```tsx
+// Example usage
+<DateInput
+  label="Date of birth"
+  helperText="Enter a valid date between 1900 and today"
+  dayValue={day}
+  monthValue={month}
+  yearValue={year}
+  onDayChange={setDay}
+  onMonthChange={setMonth}
+  onYearChange={setYear}
+  validationStatus={validation.status}
+  validText={validation.status === 'valid' ? validation.message : undefined}
+  invalidText={validation.status === 'invalid' ? validation.message : undefined}
+  required
+/>
+```
 
 ### Flexible Segments
 
 Control which segments are visible:
 
-<Canvas of={Stories.FlexibleSegments} />
+```tsx
+// Example usage
+<View style={{ gap: 16 }}>
+  <DateInput label="Full date" helperText="DD/MM/YYYY" />
+  <DateInput label="Month and year" helperText="MM/YYYY" hideDay required />
+  <DateInput label="Year only" helperText="YYYY" hideDay hideMonth required />
+</View>
+```
 
 ### Grouping Inputs
 
 Group date inputs with other form fields in a card:
 
-<Canvas of={Stories.GroupingInputs} />
+```tsx
+// Example usage
+<Flex spacing="sm">
+  <Heading size="lg">Event Registration</Heading>
+  <Card variant="subtle" gap="250">
+    <DateInput label="Date of birth" helperText="Enter your date of birth" required />
+    <DateInput
+      label="Event date preference"
+      helperText="Select your preferred date"
+      required={false}
+    />
+  </Card>
+</Flex>
+```
 
 ### With State
 
 Programmatically control date values:
 
-<Canvas of={Stories.WithState} />
+```tsx
+// Example usage
+<Flex spacing="md">
+  <DateInput
+    label="Date"
+    helperText="Select or enter a date"
+    dayValue={day}
+    monthValue={month}
+    yearValue={year}
+    onDayChange={setDay}
+    onMonthChange={setMonth}
+    onYearChange={setYear}
+  />
+  <Flex spacing="xs">
+    <Button onPress={handleSetToday}>Set to Today</Button>
+    <Button onPress={handleReset} variant="solid">
+      Reset
+    </Button>
+  </Flex>
+</Flex>
+```
 
 ### Segment Refs
 
 Use `dayRef`, `monthRef`, and `yearRef` to focus each segment programmatically:
 
-<Canvas of={Stories.WithRefs} />
+```tsx
+// Example usage
+<Flex spacing="md">
+  <DateInput
+    label="Date"
+    helperText="Use buttons to focus each segment"
+    dayValue={day}
+    monthValue={month}
+    yearValue={year}
+    onDayChange={setDay}
+    onMonthChange={setMonth}
+    onYearChange={setYear}
+    dayRef={dayRef}
+    monthRef={monthRef}
+    yearRef={yearRef}
+  />
+  <Flex spacing="xs">
+    <Button onPress={() => dayRef.current?.focus()}>Focus day</Button>
+    <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+    <Button onPress={() => yearRef.current?.focus()}>Focus year</Button>
+  </Flex>
+</Flex>
+```
 
 ```tsx
+// Example usage
 import { useRef, useState } from 'react';
 import { TextInput } from 'react-native';
 import { Button, DateInput } from '@utilitywarehouse/hearth-react-native';
@@ -206,9 +331,17 @@ const MyComponent = () => {
 
 You can override the styles of the input containers, input fields, and input labels using the `inputContainerStyle`, `inputStyle`, and `inputLabelStyle` props respectively:
 
-<Canvas of={Stories.CustomWidth} />
+```tsx
+// Example usage
+<DateInput
+  label="Custom width date input"
+  helperText="Date input with custom width"
+  inputContainerStyle={{ maxWidth: 'auto' }}
+/>
+```
 
 ```tsx
+// Example usage
 <DateInput
   label="Custom width date input"
   helperText="Date input with custom width"

package/{src/components/DatePickerInput/DatePickerInput.docs.mdx → public/llms/components/date-picker-input.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BottomSheetModalProvider, Center, DatePickerInput, FormField } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './DatePickerInput.stories';
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3725-357" />
-
-<Meta title="Forms / Date Picker Input" />
-
-<BackToTopButton />
-
 # Date Picker Input
 
 `DatePickerInput` extends the base input to present a calendar trigger for choosing dates while still allowing direct text entry. It keeps the field inline while delegating selection to the `DatePicker` bottom sheet and formats values with Day.js when needed. The default `DD/MM/YYYY` mask auto-inserts separators and surfaces a numeric keypad for faster entry.
@@ -25,22 +14,19 @@ import * as Stories from './DatePickerInput.stories';
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>{picker}</ViewWrap>
+</View>
+```
 
 ## Usage
 
 Wrap the component with `BottomSheetModalProvider` so the underlying picker can render its modal. Provide a controlled `value` if you want to react to changes immediately or let the component manage its own display string.
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <DatePickerInput placeholder="DD/MM/YYYY" />
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useState } from 'react';
 import {
   BottomSheetModalProvider,
@@ -92,8 +78,6 @@ When used inside `FormField`, validation, disabled, and required states are inhe
 | `onChange`          | `(payload: { date: DateType }) => void`                                | `-`                  | Fired whenever a valid date is parsed from typing or picked via the calendar.                                                                                               |
 | `onClear`           | `() => void`                                                           | `-`                  | Called after the clear action resets the input. Also displays a trailing clear button when provided.                                                                        |
 
-## Formatting and validation
-
 ### Automatic formatting
 
 When `format` is left as `'DD/MM/YYYY'`, the input automatically inserts `/` separators as people type and requests a numeric keypad on supported platforms. This keeps manual entry quick while matching the preferred UK date layout.
@@ -105,6 +89,7 @@ On iOS, a contextual **Done** button appears above the keyboard so people can di
 `DatePickerInput` doesn't display validation styles by itself. Pair it with `FormField` (or your own state) to surface errors whenever the typed value doesn't match your expected format.
 
 ```tsx
+// Example usage
 import { useState } from 'react';
 import dayjs from 'dayjs';
 import { DatePickerInput, FormField, type DateType } from '@utilitywarehouse/hearth-react-native';
@@ -156,37 +141,19 @@ Swap `'DD/MM/YYYY'` in the example for the `format` you're using, and reuse the
 
 Selection through the calendar always returns a JavaScript `Date` that is reformatted according to `format` when displayed in the field.
 
-## Examples
-
 ## With Label and Helper Text
 
 The `DatePickerInput` component can display a label and helper text by passing the appropriate props.
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
 ```
 
 ### With `FormField`
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <FormField label="Travel date" helperText="Choose a departure day">
-        <DatePickerInput onClear={() => {}} />
-      </FormField>
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <FormField label="Travel date" helperText="Choose a departure day">
   <DatePickerInput onClear={() => {}} />
 </FormField>
@@ -194,15 +161,8 @@ The `DatePickerInput` component can display a label and helper text by passing t
 
 ### Custom formatting
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <DatePickerInput format="MMM D, YYYY" placeholder="MMM D, YYYY" />
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <DatePickerInput format="MMM D, YYYY" placeholder="MMM D, YYYY" />
 ```
 

package/{src/components/DatePicker/DatePicker.docs.mdx → public/llms/components/date-picker.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Button, Center } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './DatePicker.stories';
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3725-357" />
-
-<Meta title="Components / Date Picker" />
-
-<BackToTopButton />
-
 # Date Picker
 
 The `DatePicker` component presents a calendar experience in a bottom sheet so people can choose one or more dates without leaving the current screen. It supports single-day, ranged, and multi-date selection while respecting locale, calendar, and availability rules.
@@ -30,21 +19,28 @@ The `DatePicker` component presents a calendar experience in a bottom sheet so p
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={() => modalRef.current?.present()}>Show Date Picker</Button>
+    <DatePicker
+      ref={modalRef}
+      mode="single"
+      date={selected}
+      onChange={({ date }) => setSelected(date)}
+      onCancel={() => setSelected(undefined)}
+    />
+  </ViewWrap>
+</View>
+```
 
 ## Usage
 
 Use the `DatePicker` with a ref so you can present and dismiss the bottom sheet when people tap a trigger like a button or form field. The picker respects the locale and calendar you provide and can be configured to limit which dates are selectable.
 
-<UsageWrap>
-  <Center>
-    <Button onPress={() => {}}>Pick a date</Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useRef, useState } from 'react';
 import {
   BottomSheetModalProvider,
@@ -74,8 +70,6 @@ const BookingDates = () => {
 };
 ```
 
-## Props
-
 ### `DatePicker`
 
 The `DatePicker` extends the `BottomSheetModal` component. The table below highlights the most frequently used props.
@@ -129,13 +123,27 @@ Each selection mode provides specialised payloads when `onChange` fires:
 
 Attach a ref that conforms to `BottomSheetModalMethods` so you can call `present()`, `close()`, or `dismiss()` as needed. This matches the API surface of `BottomSheetModal`.
 
-## Examples
-
 ### Range selection
 
-<Canvas of={Stories.Range} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={() => modalRef.current?.present()}>Show Range Date Picker</Button>
+    <DatePicker
+      mode="range"
+      ref={modalRef}
+      startDate={range.startDate}
+      endDate={range.endDate}
+      onChange={params => setRange(params)}
+      onCancel={() => setRange({ startDate: undefined, endDate: undefined })}
+    />
+  </ViewWrap>
+</View>
+```
 
 ```tsx
+// Example usage
 import { useRef, useState } from 'react';
 import {
   BottomSheetModalProvider,
@@ -170,9 +178,24 @@ const Example = () => {
 
 ### Multiple selection
 
-<Canvas of={Stories.Multi} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={() => modalRef.current?.present()}>Show Multi Date Picker</Button>
+    <DatePicker
+      mode="multiple"
+      ref={modalRef}
+      dates={dates}
+      onChange={({ dates }) => setDates(dates)}
+      onCancel={() => setDates([])}
+    />
+  </ViewWrap>
+</View>
+```
 
 ```tsx
+// Example usage
 import { useRef, useState } from 'react';
 import {
   BottomSheetModalProvider,