@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/SegmentedControl/SegmentedControl.docs.mdx → public/llms/components/segmented-control.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { SegmentedControl, SegmentedControlOption } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './SegmentedControl.stories';
-
-<Meta title="Components / Segmented Control" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&t=c7xg5X0N2EL0t87h-4" />
-
 # Segmented Control
 
 Segmented Control lets users switch between a small set of related options.
@@ -24,21 +13,19 @@ Each option is presented as an equal-priority segment in a single horizontal gro
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<SegmentedControl defaultValue="day" {...args}>
+  <SegmentedControlOption value="day">Day</SegmentedControlOption>
+  <SegmentedControlOption value="week">Week</SegmentedControlOption>
+  <SegmentedControlOption value="month">Month</SegmentedControlOption>
+</SegmentedControl>
+```
 
 ## Usage
 
-<UsageWrap>
-  <SegmentedControl defaultValue="day">
-    <SegmentedControlOption value="day">Day</SegmentedControlOption>
-    <SegmentedControlOption value="week">Week</SegmentedControlOption>
-    <SegmentedControlOption value="month">Month</SegmentedControlOption>
-  </SegmentedControl>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
 
 const Example = () => {
@@ -52,8 +39,6 @@ const Example = () => {
 };
 ```
 
-## Props
-
 ### SegmentedControl
 
 | Property        | Type                      | Description                            | Default      |
@@ -74,8 +59,6 @@ const Example = () => {
 | `icon`     | `ComponentType` | Optional leading icon.         | -        |
 | `disabled` | `boolean`       | Disables only this option.     | `false`  |
 
-## Examples
-
 ### Sizes
 
 Figma defines two size variants for Segmented Control:
@@ -83,9 +66,24 @@ Figma defines two size variants for Segmented Control:
 - `sm` maps to `SM-32`
 - `md` maps to `MD-48`
 
-<Canvas of={Stories.Sizes} />
+```tsx
+// Example usage
+<Flex spacing="sm" align="center">
+  <SegmentedControl defaultValue="one" size="sm">
+    <SegmentedControlOption value="one">Label</SegmentedControlOption>
+    <SegmentedControlOption value="two">Label</SegmentedControlOption>
+    <SegmentedControlOption value="three">Label</SegmentedControlOption>
+  </SegmentedControl>
+  <SegmentedControl defaultValue="one" size="md">
+    <SegmentedControlOption value="one">Label</SegmentedControlOption>
+    <SegmentedControlOption value="two">Label</SegmentedControlOption>
+    <SegmentedControlOption value="three">Label</SegmentedControlOption>
+  </SegmentedControl>
+</Flex>
+```
 
 ```tsx
+// Example usage
 <SegmentedControl size="sm">...</SegmentedControl>
 <SegmentedControl size="md">...</SegmentedControl>
 ```
@@ -94,9 +92,23 @@ Figma defines two size variants for Segmented Control:
 
 SegmentedControlOption supports an optional leading icon.
 
-<Canvas of={Stories.WithIcons} />
+```tsx
+// Example usage
+<SegmentedControl defaultValue="energy" size="md">
+  <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+    Energy
+  </SegmentedControlOption>
+  <SegmentedControlOption value="broadband" icon={BroadbandSmallIcon}>
+    Broadband
+  </SegmentedControlOption>
+  <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
+    Mobile
+  </SegmentedControlOption>
+</SegmentedControl>
+```
 
 ```tsx
+// Example usage
 import { MobileSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 <SegmentedControl>

package/{src/components/Select/Select.docs.mdx → public/llms/components/select.md}

@@ -1,16 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Center, FormField, Select, SelectOption } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Select.stories';
-
-<Meta title="Forms / Select" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3224-12" />
-
 # Select
 
 The `Select` component creates a dropdown menu that allows users to choose from a list of options. It's commonly used in forms for selecting one option from many.
@@ -28,29 +15,27 @@ The `Select` component creates a dropdown menu that allows users to choose from
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Select
+  label="Choose an option"
+  placeholder="Select an option"
+  validationStatus="initial"
+  required
+  emptyText="No options available"
+  searchPlaceholder="Search"
+  options={[
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ]}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Select
-      label="Choose an option"
-      placeholder="Select an option"
-      options={[
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
-      ]}
-      value="1"
-      onValueChange={value => console.log('Selected:', value)}
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Select } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 
@@ -73,8 +58,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### `Select`
 
 The `Select` component inherits all of the React Native [`View` props](https://reactnative.dev/docs/view).
@@ -118,28 +101,10 @@ The `SelectOption` component is used to create individual options within the `Se
 | disabled     | `boolean`                 | `false` | Whether this option is disabled.       |
 | onPress      | `(value: string) => void` | `-`     | Callback when this option is selected. |
 
-## Examples
-
 ## With label and helper text
 
-<UsageWrap>
-  <Center>
-    <Select
-      label="Select an option"
-      helperText="This is some helper text for the select component."
-      placeholder="Select an option"
-      options={[
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
-      ]}
-      value="1"
-      onValueChange={value => console.log('Selected:', value)}
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Select } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -165,11 +130,27 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `Select` component can be used with the `FormField` component for additional functionality like validation messages and helper text.
-For more information on the `FormField` component, view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
+For more information on the `FormField` component, view the `FormField` documentation.
 
-<Canvas of={Stories.WithValidationStatus} />
+```tsx
+// Example usage
+<Select
+  label="Choose an option"
+  placeholder="Select an option"
+  validationStatus="initial"
+  required
+  emptyText="No options available"
+  searchPlaceholder="Search"
+  options={[
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ]}
+/>
+```
 
 ```tsx
+// Example usage
 import { FormField, Select } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 
@@ -199,9 +180,25 @@ const MyComponent = () => {
 
 ### Searchable `Select`
 
-<Canvas of={Stories.Searchable} />
+```tsx
+// Example usage
+<Select
+  label="Choose an option"
+  placeholder="Select an option"
+  validationStatus="initial"
+  required
+  emptyText="No options available"
+  searchPlaceholder="Search"
+  options={[
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ]}
+/>
+```
 
 ```tsx
+// Example usage
 import { Select } from '@utilitywarehouse/hearth-react-native';
 import { useState } from 'react';
 
@@ -237,9 +234,25 @@ const MyComponent = () => {
 
 The `SelectOption` component can be used inline instead of the options prop. This allows for more flexibility in how the options are displayed.
 
-<Canvas of={Stories.WithInlineOptions} />
+```tsx
+// Example usage
+<Select
+  label="Choose an option"
+  placeholder="Select an option"
+  validationStatus="initial"
+  required
+  emptyText="No options available"
+  searchPlaceholder="Search"
+  options={[
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ]}
+/>
+```
 
 ```tsx
+// Example usage
 import { Select, SelectOption } from '@utilitywarehouse/hearth-react-native';
 import {
   UserSmallIcon,

package/{src/components/Skeleton/Skeleton.docs.mdx → public/llms/components/skeleton.md}

@@ -1,20 +1,16 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Skeleton.stories';
-import { BodyText, Center, Skeleton } from '../../';
-
-<Meta title="Components / Skeleton" />
-
 # Skeleton
 
 The `Skeleton` component is used to show a loading state for a component that is still loading.
 
 ## Usage
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Skeleton {...args} />
+```
 
 ```jsx
+// Example usage
 import { Center, Skeleton, Text } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (

package/{src/components/Spinner/Spinner.docs.mdx → public/llms/components/spinner.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { color } from '@utilitywarehouse/hearth-tokens/js';
-import { Box, Center, Pressable, Spinner } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Spinner.stories';
-
-<Meta title="Components / Spinner" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-158" />
-
 # Spinner
 
 Using a Spinner is a common method for indicating that an asynchronous process is ongoing. Additionally, it informs users that they should refrain from clicking or tapping the UI until the loading state has been resolved.
@@ -21,9 +9,10 @@ Using a Spinner is a common method for indicating that an asynchronous process i
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Spinner size="md" />
+```
 
 ## Usage
 
@@ -31,13 +20,8 @@ The Spinner can be used independently (it's a self-contained component) or in co
 such as in the loading state of a `Button` or `Input` Search retrieving data. It can also be used inside a `Dialog`
 with text, or directly in a container on the screen when we want the user to wait and avoid performing any actions.
 
-<UsageWrap>
-  <Center>
-    <Spinner size="lg" color={color.blue['400']} />
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Spinner, Center } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 
@@ -59,4 +43,20 @@ const MyComponent = () => (
 
 The `Spinner` component has different sizes to style the spinner.
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Box gap="200">
+  <VariantTitle title="XS">
+    <Spinner {...args} size="xs" />
+  </VariantTitle>
+  <VariantTitle title="SM">
+    <Spinner {...args} size="sm" />
+  </VariantTitle>
+  <VariantTitle title="MD">
+    <Spinner {...args} size="md" />
+  </VariantTitle>
+  <VariantTitle title="LG">
+    <Spinner {...args} size="lg" />
+  </VariantTitle>
+</Box>
+```

package/{src/components/StepperInput/StepperInput.docs.mdx → public/llms/components/stepper-input.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { StepperInput } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './StepperInput.stories';
-
-<Meta title="Forms / Stepper Input" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10612-1860&t=aFS22MoPV7Y08jdq-4" />
-
 # Stepper Input
 
 The Stepper Input combines a numeric text input with decrement and increment controls. Use it when the value should stay within a defined range but still needs direct text entry.
@@ -21,22 +10,26 @@ The Stepper Input combines a numeric text input with decrement and increment con
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<StepperInput
+  {...args}
+  value={value}
+  onChangeText={text => {
+    setValue(text);
+    handleChangeText?.(text);
+  }}
+  onChangeValue={nextValue => {
+    setValue(`${nextValue}`);
+    handleChangeValue?.(nextValue);
+  }}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <StepperInput
-    label="Guests"
-    helperText="Choose between 1 and 10"
-    value="2"
-    onChangeText={() => undefined}
-  />
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useState } from 'react';
 import { StepperInput } from '@utilitywarehouse/hearth-react-native';
 
@@ -83,23 +76,99 @@ The Stepper Input inherits React Native `TextInput` props except `children`, `va
 | `decrementAccessibilityLabel` | `string`                            | `'Decrease value'` | Accessibility label for the decrement button.                                               |
 | `incrementAccessibilityLabel` | `string`                            | `'Increase value'` | Accessibility label for the increment button.                                               |
 
-## Examples
-
 ### States
 
-<Canvas of={Stories.States} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg" style={{ width: 420 }}>
+  <VariantTitle title="Default">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      value={values.default}
+      onChangeText={updateValue('default')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Focused">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      focused
+      value={values.focused}
+      onChangeText={updateValue('focused')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Invalid">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      validationStatus="invalid"
+      invalidText="Validation text"
+      value={values.invalid}
+      onChangeText={updateValue('invalid')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Invalid Focused">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      focused
+      validationStatus="invalid"
+      invalidText="Validation text"
+      value={values.invalidFocused}
+      onChangeText={updateValue('invalidFocused')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Heading Label">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      labelVariant="heading"
+      value={values.heading}
+      onChangeText={updateValue('heading')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Heading Invalid">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      labelVariant="heading"
+      validationStatus="invalid"
+      invalidText="Validation text"
+      value={values.headingInvalid}
+      onChangeText={updateValue('headingInvalid')}
+    />
+  </VariantTitle>
+  <VariantTitle title="Disabled">
+    <StepperInput
+      label="Label"
+      helperText="Helper text"
+      disabled
+      value={values.disabled}
+      onChangeText={updateValue('disabled')}
+    />
+  </VariantTitle>
+</Flex>
+```
 
 ### Bounds
 
-<Canvas of={Stories.Bounds} />
+```tsx
+// Example usage
+<StepperInput {...args} value={value} onChangeText={setValue} />
+```
 
 ### Fractional Values
 
 `StepperInput` supports fractional steps and negative ranges. When `step`, `min`, `max`, or the current value uses decimals, the input switches to a numeric keyboard path that preserves decimal editing.
 
-<Canvas of={Stories.DecimalStep} />
+```tsx
+// Example usage
+<StepperInput {...args} value={value} onChangeText={setValue} />
+```
 
 ```tsx
+// Example usage
 <StepperInput label="Weight" min={-2} max={2} step={0.5} value={value} onChangeText={setValue} />
 ```
 
@@ -107,9 +176,13 @@ The Stepper Input inherits React Native `TextInput` props except `children`, `va
 
 By default, the increment and decrement buttons update the value without moving focus into the text field. Enable `focusInputOnStepPress` when keyboard-first flows need the caret to stay in the input after a button press.
 
-<Canvas of={Stories.FocusOnStepPress} />
+```tsx
+// Example usage
+<StepperInput {...args} value={value} onChangeText={setValue} />
+```
 
 ```tsx
+// Example usage
 <StepperInput label="Guests" value={value} onChangeText={setValue} focusInputOnStepPress />
 ```