@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/{src/components/Checkbox/Checkbox.docs.mdx → public/llms/components/checkbox.md}

@@ -1,26 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import {
-  Box,
-  Center,
-  Checkbox,
-  CheckboxGroup,
-  CheckboxIndicator,
-  CheckboxLabel,
-  CheckboxTile,
-  FormField,
-  Grid,
-} from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Checkbox.stories';
-
-<Meta title="Forms / Checkbox" />
-
-<ViewFigmaButton url="https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4454-2156" />
-
-<BackToTopButton />
-
 # Checkbox
 
 Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
@@ -46,23 +23,22 @@ Whether you're building a simple form or a complex data collection system, the C
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Checkbox
+  onChange={val => {
+    console.log('-----');
+    setChecked(val);
+  }}
+  {...args}
+  checked={checked}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Checkbox
-      value="Label"
-      onChange={checked => console.log(checked, '###')}
-      label="I accept the terms and conditions"
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Checkbox } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -97,8 +73,6 @@ const MyComponent = () => {
 | `type`               | `'default' \| 'tile'`               | `'default'` | The type of the checkbox.                                                                                            |
 | `image`              | `ReactNode`                         | -           | The image to be displayed next to the label.                                                                         |
 
-## Components
-
 ### `Checkbox`
 
 The `Checkbox` component is the wrapper for the checkbox input. It is used to handle the state of the checkbox input.
@@ -130,7 +104,8 @@ The `CheckboxGroup` component is used to group multiple checkbox inputs together
 | Property             | Type                                | Default     | Description                                                            |
 | -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------- |
 | `value`              | string                              | -           | The value of the checkbox group.                                       |
-| `onChange`           | function                            | -           | The callback fired when any children Checkbox is checked or unchecked. |
+| `onValueChange`      | `(values: Array<string>) => void`   | -           | The callback fired when any children Checkbox is checked or unchecked. |
+| `onChange`           | function                            | -           | **Deprecated** — use `onValueChange` instead.                          |
 | `disabled`           | bool                                | -           | To manually set disable to the checkbox group.                         |
 | `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the checkbox group.                           |
 | `label`              | `string`                            | -           | The label to be displayed above the checkbox group.                    |
@@ -144,39 +119,9 @@ The `CheckboxGroup` component is used to group multiple checkbox inputs together
 | `direction`          | `'row' \| 'column'`                 | `'column'`  | The direction of the checkbox group.                                   |
 | `gap`                | `string`                            | -           | The gap between the checkbox group items.                              |
 
-<UsageWrap>
-    <Center>
-      <CheckboxGroup
-        aria-label="Checkbox Group"
-        value={['Label 1']}
-        nativeID="checkbox-group"
-      >
-        <Checkbox
-          value="Label 1"
-          aria-label="Label 1"
-          onChange={(checked) =>
-            console.log(checked, '###')
-          }
-        label="Label 1" />
-        <Checkbox
-          value="Label 2"
-          aria-label="Label 2"
-          onChange={(checked) =>
-            console.log(checked, '###')
-          }
-         label="Label 2" />
-      </CheckboxGroup>
-    </Center>
-
-  </UsageWrap>
-
 ```jsx
-import {
-  Checkbox,
-  CheckboxGroup,
-  CheckboxIndicator,
-  CheckboxLabel,
-} from '@utilitywarehouse/hearth-react-native';
+// Example usage
+import { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxLabel, } from '@utilitywarehouse/hearth-react-native';
 
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -186,7 +131,7 @@ const MyComponent = () => {
     <CheckboxGroup
       aria-label="Checkbox Group"
       value={values}
-      onChange={setValues}
+      onValueChange={setValues}
       nativeID="checkbox-group"
     >
       <Checkbox
@@ -209,7 +154,8 @@ const MyComponent = () => {
 | Property           | Type                                | Default | Description                                                            |
 | ------------------ | ----------------------------------- | ------- | ---------------------------------------------------------------------- |
 | `value`            | `string[]`                          | -       | The value of the checkbox group.                                       |
-| `onChange`         | `(values: Array<string>) => void`   | -       | The callback fired when any children Checkbox is checked or unchecked. |
+| `onValueChange`    | `(values: Array<string>) => void`   | -       | The callback fired when any children Checkbox is checked or unchecked. |
+| `onChange`         | `(values: Array<string>) => void`   | -       | **Deprecated** — use `onValueChange` instead.                          |
 | `disabled`         | `bool`                              | `false` | To manually set disable to the checkbox.                               |
 | `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -       | The validation status of the checkbox group.                           |
 
@@ -222,50 +168,71 @@ const MyComponent = () => {
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
+For more details about the ThemedImage component used internally, refer to the `ThemedImage` documentation.
 
 The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
 
 ## Variants
 
-<Canvas of={Stories.Variants} />
+```tsx
+// Example usage
+<CheckboxGroup
+  aria-label="Checkbox Group"
+  value={values}
+  onChange={setValues}
+  nativeID="checkbox-group"
+  style={{ gap: 16 }}
+>
+  <VariantTitle title="Checkbox">
+    <Checkbox
+      value="Label 1"
+      aria-label="Label 1"
+      onChange={(checked: boolean) => {
+        console.log(checked, '###');
+      }}
+      nativeID="checkbox-1"
+    />
+  </VariantTitle>
+  <VariantTitle title="Checkbox with label">
+    <Checkbox
+      value="Label 2"
+      aria-label="Label 2"
+      onChange={(checked: boolean) => {
+        console.log(checked, '###');
+      }}
+      nativeID="checkbox-2"
+      label="Label 1"
+    />
+  </VariantTitle>
+  <VariantTitle title="Checkbox disabled">
+    <Checkbox
+      aria-label="Label 3"
+      value="Label 3"
+      disabled
+      checked
+      onChange={(checked: boolean) => console.log(checked, '###')}
+      nativeID="checkbox-3"
+    />
+  </VariantTitle>
+  <VariantTitle title="Checkbox disabled with label">
+    <Checkbox
+      aria-label="Label 4"
+      value="Label 4"
+      disabled
+      onChange={(checked: boolean) => console.log(checked, '###')}
+      nativeID="checkbox-4"
+      label="Label 2"
+    />
+  </VariantTitle>
+</CheckboxGroup>
+```
 
 ## Advanced Usage
 
 You can create a custom checkbox by using the `CheckboxIndicator`, `CheckboxIcon` and `CheckboxLabel` components.
 
-<UsageWrap>
-  <Center>
-    <CheckboxGroup label="Which fruit do you enjoy?">
-      <Checkbox
-        value="Apple"
-        aria-label="Apple"
-        onChange={checked => console.log(checked, '###')}
-        label="Apple"
-      />
-      <Checkbox
-        value="Banana"
-        aria-label="Banana"
-        onChange={checked => console.log(checked, '###')}
-        label="Banana"
-      />
-      <Checkbox
-        value="Orange"
-        aria-label="Orange"
-        onChange={checked => console.log(checked, '###')}
-        label="Orange"
-      />
-      <Checkbox
-        value="Grapes"
-        aria-label="Grapes"
-        onChange={checked => console.log(checked, '###')}
-        label="Grapes"
-      />
-    </CheckboxGroup>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   CheckboxGroup,
   Checkbox,
@@ -281,7 +248,7 @@ const MyComponent = () => {
       aria-label="Checkbox Group"
       label="Which fruit do you enjoy?"
       value={values}
-      onChange={setValues}
+      onValueChange={setValues}
       nativeID="checkbox-group"
     >
       <Checkbox value="Apple" aria-label="Apple">
@@ -313,28 +280,12 @@ const MyComponent = () => {
 };
 ```
 
-## Examples
-
 ### Grid Layout With Tiles
 
 Wrap tile checkboxes in a `Grid` when you want a multi-column layout inside a `CheckboxGroup`.
 
-<UsageWrap>
-  <Center>
-    <Box minWidth={400}>
-      <CheckboxGroup label="Which options helped?" type="tile">
-        <Grid columns={2} spacing="md">
-          <Checkbox label="Fast response" value="fast-response" />
-          <Checkbox label="Clear steps" value="clear-steps" />
-          <Checkbox label="Useful example" value="useful-example" />
-          <Checkbox label="Still investigating" value="still-investigating" />
-        </Grid>
-      </CheckboxGroup>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Checkbox, CheckboxGroup, Grid } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -358,17 +309,9 @@ const MyComponent = () => {
 The `CheckboxTile` component is a variant of the `Checkbox` component that displays the radio button as a card.
 It is used to present options in a more visually appealing way.
 
-<UsageWrap>
-  <Center>
-    <CheckboxGroup>
-      <CheckboxTile value="option-1" aria-label="Label 1" label="Option 1" />
-      <CheckboxTile value="option-2" aria-label="Label 2" label="Option 2" />
-    </CheckboxGroup>
-  </Center>
-</UsageWrap>
-
 ```tsx
-import { CheckboxTile, CheckboxGroup } from '@utilitywarehouse/native-ui';
+// Example usage
+import { CheckboxTile, CheckboxGroup } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = React.useState(['option-1']);
@@ -385,9 +328,43 @@ const MyComponent = () => {
 
 The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
 
-<Canvas of={Stories.WithImage} />
+```tsx
+// Example usage
+<CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
+  <Checkbox
+    aria-label="Visa"
+    onChange={(checked: boolean) => {
+      console.log(checked, '###');
+    }}
+    nativeID="checkbox-1"
+    {...args}
+    value="visa"
+    label="Visa"
+    image={
+      <CheckboxImage source={bankLogo1 as ImageSourcePropType} style={{ width: 40, height: 24 }} />
+    }
+  />
+  <Checkbox
+    aria-label="Mastercard"
+    onChange={(checked: boolean) => {
+      console.log(checked, '###');
+    }}
+    nativeID="checkbox-2"
+    {...args}
+    value="mastercard"
+    label="Mastercard"
+    image={
+      <CheckboxImage
+        source={bankLogo as ImageSourcePropType}
+        style={{ width: 40, height: 24, resizeMode: 'contain' }}
+      />
+    }
+  />
+</CheckboxGroup>
+```
 
 ```tsx
+// Example usage
 import { Checkbox, CheckboxImage } from '@utilitywarehouse/hearth-react-native';
 import visaLogo from '../../../assets/visa.png';
 import mastercardLogo from '../../../assets/mastercard.png';
@@ -427,27 +404,9 @@ const MyComponent = () => {
 The `CheckboxGroup` component is used to group multiple `Checkbox` components together.
 You can pass props like `label` and `helperText` to the `CheckboxGroup` component to provide context for the group of radios.
 
-<UsageWrap>
-  <Center>
-    <CheckboxGroup
-      aria-label="Checkbox Group"
-      label="Checkbox Group Label"
-      helperText="This is the supporting text"
-      invalidText="This is an invalid text"
-      validText="This is a valid text"
-      validationStatus="invalid"
-    >
-      <Checkbox value="option-1" aria-label="Label 1" label="Option 1" />
-      <Checkbox value="option-2" aria-label="Label 2" label="Option 2" />
-      <Checkbox value="option-3" aria-label="Label 3" label="Option 3" />
-      <Checkbox value="option-4" aria-label="Label 4" label="Option 4" />
-    </CheckboxGroup>
-
-  </Center>
-</UsageWrap>
-
 ```tsx
-import { Checkbox, CheckboxGroup } from '@utilitywarehouse/native-ui';
+// Example usage
+import { Checkbox, CheckboxGroup } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = React.useState(['option-1']);

package/{src/components/Combobox/Combobox.docs.mdx → public/llms/components/combobox.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BottomSheetFlatList, Box, Center, Combobox, ComboboxOption } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Combobox.stories';
-
-<Meta title="Forms / Combobox" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=9359-2923&t=c7xg5X0N2EL0t87h-4" />
-
 # Combobox
 
 The `Combobox` component lets people search and select from a list inside a bottom sheet. It keeps the trigger text and the bottom sheet search input in sync, and can render either the built-in options list or fully custom sheet content.
@@ -21,29 +10,23 @@ The `Combobox` component lets people search and select from a list inside a bott
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Combobox
+  label="Combobox"
+  helperText="Helper text"
+  placeholder="Search for a country"
+  searchPlaceholder="Search for a country"
+  validationStatus="initial"
+  noOptionsFoundText="No options found"
+  options={countries}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Combobox
-      label="Country"
-      placeholder="Search for a country"
-      searchPlaceholder="Search for a country"
-      options={[
-        { label: 'United Kingdom', value: 'uk' },
-        { label: 'United States', value: 'us' },
-        { label: 'Canada', value: 'ca' },
-      ]}
-      value="uk"
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Combobox } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 
@@ -89,13 +72,23 @@ The `Combobox` component inherits all of the React Native [`View` props](https:/
 | `getValueLabel`      | `(value) => string`                 | `-`                  | Resolve a label for selected values that are not present in `options`.       |
 | `filterOption`       | `(option, search) => boolean`       | `-`                  | Override the default label and keyword filtering logic.                      |
 
-## Examples
-
 ### Static Searchable List
 
-<Canvas of={Stories.StaticSearchableList} />
+```tsx
+// Example usage
+<Combobox
+  label="Combobox"
+  helperText="Helper text"
+  placeholder="Search for a country"
+  searchPlaceholder="Search for a country"
+  validationStatus="initial"
+  noOptionsFoundText="No options found"
+  options={countries}
+/>
+```
 
 ```tsx
+// Example usage
 import { Combobox } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 
@@ -127,9 +120,21 @@ const MyComponent = () => {
 
 ### Dynamic Items
 
-<Canvas of={Stories.DynamicItems} />
+```tsx
+// Example usage
+<Combobox
+  label="Combobox"
+  helperText="Helper text"
+  placeholder="Search for a country"
+  searchPlaceholder="Search for a country"
+  validationStatus="initial"
+  noOptionsFoundText="No options found"
+  options={countries}
+/>
+```
 
 ```tsx
+// Example usage
 import { Combobox } from '@utilitywarehouse/hearth-react-native';
 import { useEffect, useState } from 'react';
 
@@ -176,9 +181,21 @@ const MyComponent = () => {
 
 ### Custom Bottom Sheet Flat List
 
-<Canvas of={Stories.CustomFlatList} />
+```tsx
+// Example usage
+<Combobox
+  label="Combobox"
+  helperText="Helper text"
+  placeholder="Search for a country"
+  searchPlaceholder="Search for a country"
+  validationStatus="initial"
+  noOptionsFoundText="No options found"
+  options={countries}
+/>
+```
 
 ```tsx
+// Example usage
 import {
   BottomSheetFlatList,
   Combobox,
@@ -213,19 +230,8 @@ const MyComponent = () => {
 
 ### Inline Custom Content
 
-<UsageWrap>
-  <Center>
-    <Combobox label="Inline options" placeholder="Search for a country">
-      <Box>
-        <ComboboxOption label="United Kingdom" value="uk" />
-        <ComboboxOption label="United States" value="us" />
-        <ComboboxOption label="Canada" value="ca" />
-      </Box>
-    </Combobox>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Box, Combobox, ComboboxOption } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 

package/{src/components/Container/Container.docs.mdx → public/llms/components/container.md}

@@ -1,13 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { color } from '@utilitywarehouse/hearth-tokens';
-import { BodyText, Box, Container } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Container.stories';
-
-<Meta title="Primitives / Container" />
-
-<BackToTopButton />
-
 # Container
 
 The Container component is a layout primitive that provides consistent spacing and structure using the design system's layout tokens. It automatically applies responsive margin and padding based on the current breakpoint, and supports additional customization through spacing props.
@@ -23,25 +13,29 @@ The Container component is a layout primitive that provides consistent spacing a
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<Box backgroundColor={color.red['100']}>
+  <Container {...args} backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
+      <BodyText>Container content 1</BodyText>
+    </Box>
+    <Box bg={color.purple['400']} p="200" borderRadius="md">
+      <BodyText>Container content 2</BodyText>
+    </Box>
+    <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
+      <BodyText>Container content 3</BodyText>
+    </Box>
+  </Container>
+</Box>
+```
 
 ### Basic Usage
 
 The Container component uses layout tokens automatically for responsive spacing:
 
-<UsageWrap>
-  <Container backgroundColor="secondary">
-    <Box bg={color.blue['400']} p="200" borderRadius="md">
-      <BodyText>Container content</BodyText>
-    </Box>
-  </Container>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -58,9 +52,19 @@ const MyComponent = () => (
 
 You can override the default padding with custom values using space tokens:
 
-<Canvas of={Stories.WithPadding} />
+```tsx
+// Example usage
+<Box backgroundColor={color.red['100']}>
+  <Container {...args} backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
+      <BodyText>Container with padding</BodyText>
+    </Box>
+  </Container>
+</Box>
+```
 
 ```jsx
+// Example usage
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -77,9 +81,19 @@ const MyComponent = () => (
 
 You can override the default margin with custom values using space tokens:
 
-<Canvas of={Stories.WithMargin} />
+```tsx
+// Example usage
+<Box backgroundColor={color.red['100']}>
+  <Container {...args} backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
+      <BodyText>Container with margin</BodyText>
+    </Box>
+  </Container>
+</Box>
+```
 
 ```jsx
+// Example usage
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -96,9 +110,28 @@ const MyComponent = () => (
 
 The Container component supports a `spacing` prop for controlling gap between child elements, as well as directional padding and margin props:
 
-<Canvas of={Stories.WithCustomSpacing} />
+```tsx
+// Example usage
+<Box backgroundColor={color.red['100']}>
+  <Container {...args} backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
+      <BodyText>Item 1</BodyText>
+    </Box>
+    <Box bg={color.purple['400']} p="200" borderRadius="md">
+      <BodyText>Item 2</BodyText>
+    </Box>
+    <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
+      <BodyText>Item 3</BodyText>
+    </Box>
+    <Box bg={color.orange['400']} p="200" borderRadius="md">
+      <BodyText>Item 4</BodyText>
+    </Box>
+  </Container>
+</Box>
+```
 
 ```jsx
+// Example usage
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';