@utilitywarehouse/hearth-react-native 0.26.0 → 0.27.0

package/docs/changelog.mdx

@@ -9,6 +9,142 @@ import { BackToTopButton } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.25.0
+
+### Minor Changes
+
+- [#982](https://github.com/utilitywarehouse/hearth/pull/982) [`506b388`](https://github.com/utilitywarehouse/hearth/commit/506b388ae1ef1065f013024a14bd9e2599a6442d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `TimePicker` and `TimePickerInput` components with 12/24-hour support and minute intervals.
+
+  Includes a shared time picker view, updated wheel behavior for native platforms, and polished visuals like gradient fades.
+
+  **Components affected**:
+  - `TimePicker`
+  - `TimePickerInput`
+
+  ```tsx
+  import { TimePicker, TimePickerInput } from '@utilitywarehouse/hearth-react-native';
+  import { useRef, useState } from 'react';
+  import type { DateType } from '@utilitywarehouse/hearth-react-native';
+
+  const Example = () => {
+    const [value, setValue] = useState<DateType>();
+    const pickerRef = useRef(null);
+
+    return (
+      <>
+        <TimePickerInput
+          value={value}
+          onChange={({ date }) => setValue(date ?? undefined)}
+          onClear={() => setValue(undefined)}
+          timePickerProps={{ use12Hours: true, minuteInterval: 5 }}
+        />
+        <TimePicker
+          ref={pickerRef}
+          date={value}
+          onChange={({ date }) => setValue(date)}
+          use12Hours
+          minuteInterval={5}
+        />
+      </>
+    );
+  };
+  ```
+
+## 0.24.0
+
+### Minor Changes
+
+- [#977](https://github.com/utilitywarehouse/hearth/pull/977) [`9d2b534`](https://github.com/utilitywarehouse/hearth/commit/9d2b5348a5748cb613f537808069de2e86bd21d7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `ProgressBar` component with linear and circular variants.
+
+  **Developer changes**:
+
+  Use `ProgressBar` with a default percentage label, or override the label to show a custom value:
+
+  ```tsx
+  import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+  <ProgressBar value={42} label="Uploading documents" />
+
+  <ProgressBar
+      value={68}
+      max={100}
+      label="Data allowance"
+      variant="circular"
+      formatValueText={(value, { max }) => `${max - value}GB remaining`}
+  />
+  ```
+
+### Patch Changes
+
+- [#978](https://github.com/utilitywarehouse/hearth/pull/978) [`26a1173`](https://github.com/utilitywarehouse/hearth/commit/26a11731a493a8b92ac2a3a183516376ab54663b) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Tighten `Modal` prop types and fix brand background text styling
+
+  Improves TypeScript safety so `stickyFooter` is not allowed when `inNavModal` is true, and `background` can only be set when `inNavModal` is true. Also ensures headings, body text, and button content are correctly inverted when using the brand background.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+  No changes required unless you were relying on invalid prop combinations.
+
+## 0.23.0
+
+### Minor Changes
+
+- [#975](https://github.com/utilitywarehouse/hearth/pull/975) [`102f04e`](https://github.com/utilitywarehouse/hearth/commit/102f04e0d560cf0faa21da5020c230e88e857251) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add a `background` option for Modal when used inside navigation modals
+
+  Modal now supports a `background` prop with `default` and `brand` values. When `background="brand"` is used in a navigation modal, the buttons and close icon invert for contrast, and the content area is scrollable.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required. To opt in to the brand background:
+
+  ```tsx
+  <Modal background="brand" inNavModal>
+    ...
+  </Modal>
+  ```
+
+## 0.22.1
+
+### Patch Changes
+
+- [#971](https://github.com/utilitywarehouse/hearth/pull/971) [`be1dfeb`](https://github.com/utilitywarehouse/hearth/commit/be1dfebd4b43f2df8ef6c5eaa42a88364e796479) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Improve VerificationInput OTP handling and accessibility
+
+  VerificationInput now uses a single hidden input to manage focus, selection, and paste behaviour across platforms, improving caret handling and bulk entry. Accessibility labels and hints are now derived from the form field to provide clearer screen reader output.
+
+  **Components affected**:
+  - `VerificationInput`
+
+  **Developer changes**:
+
+  No changes required.
+
+## 0.22.0
+
+### Minor Changes
+
+- [#968](https://github.com/utilitywarehouse/hearth/pull/968) [`cee5811`](https://github.com/utilitywarehouse/hearth/commit/cee5811020af02fe754d8311ec8313c1793f108a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `badge` support to Radio and Checkbox (including tiles).
+
+  **Components affected**:
+  - `Radio`
+  - `RadioTile`
+  - `Checkbox`
+  - `CheckboxTile`
+
+  **Developer changes**:
+  You can now pass a `badge` React node to render beneath helper text. No changes required unless you want to use the new prop.
+
+### Patch Changes
+
+- [#966](https://github.com/utilitywarehouse/hearth/pull/966) [`4e9f3f0`](https://github.com/utilitywarehouse/hearth/commit/4e9f3f0284e50da5ba4e49e132dac745a1a8a68d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Allow Card layout props and remove forced alignment
+
+  Card now accepts flex layout and display props, and it no longer forces `alignItems: flex-start` on the root, so custom alignment works as expected.
+
+- [#969](https://github.com/utilitywarehouse/hearth/pull/969) [`c5c988b`](https://github.com/utilitywarehouse/hearth/commit/c5c988b65f1133b85b822037b086a524bc1255e3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render the Modal footer in navigation modals
+
 ## 0.21.0
 
 ### Minor Changes

package/docs/components/AllComponents.web.tsx

@@ -82,6 +82,8 @@ import {
   RadioCardGroup,
   RadioGroup,
   SectionHeader,
+  SegmentedControl,
+  SegmentedControlOption,
   Select,
   Skeleton,
   Spinner,
@@ -743,6 +745,18 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Segmented Control"
+            link="/?path=/docs/components-segmented-control--docs"
+          >
+            <Center flex={1}>
+              <SegmentedControl defaultValue="day" alignSelf="center">
+                <SegmentedControlOption value="day">Day</SegmentedControlOption>
+                <SegmentedControlOption value="week">Week</SegmentedControlOption>
+                <SegmentedControlOption value="month">Month</SegmentedControlOption>
+              </SegmentedControl>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
             <Center flex={1}>
               <BottomSheetModalProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,10 +57,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3"
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-tokens": "^0.2.3",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Banner/Banner.tsx

@@ -29,7 +29,7 @@ const Banner = ({
   ...props
 }: BannerProps) => {
   const hasIllustration = Boolean(illustration);
-  styles.useVariants({ direction, hasIllustration });
+  styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
 
   const context = useMemo(
     () => ({
@@ -174,6 +174,10 @@ const styles = StyleSheet.create(theme => ({
         true: {},
         false: {},
       },
+      isPressable: {
+        true: {},
+        false: {},
+      },
     },
     compoundVariants: [
       {
@@ -190,6 +194,13 @@ const styles = StyleSheet.create(theme => ({
           alignItems: 'center',
         },
       },
+      {
+        direction: 'horizontal',
+        isPressable: false,
+        styles: {
+          flex: 1,
+        },
+      },
     ],
   },
   media: {

package/src/components/PillGroup/Pill.tsx

@@ -61,7 +61,6 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      // '_focus-visible': theme.helpers.focusVisible,
     },
     variants: {
       active: {

package/src/components/PillGroup/PillGroup.tsx

@@ -42,6 +42,7 @@ export const PillGroup = ({
       ) : (
         <ScrollView
           horizontal
+          style={styles.scrollView}
           contentContainerStyle={[styles.group, style]}
           showsHorizontalScrollIndicator={false}
           {...props}
@@ -56,6 +57,9 @@ export const PillGroup = ({
 PillGroup.displayName = 'PillGroup';
 
 const styles = StyleSheet.create(theme => ({
+  scrollView: {
+    flexGrow: 0,
+  },
   group: {
     flexDirection: 'row',
     gap: theme.components.pill.group.gap,

package/src/components/SegmentedControl/SegmentedControl.context.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+export type SegmentedControlContextValue = {
+  value?: string;
+  select: (value: string) => void;
+  disabled?: boolean;
+  size: 'sm' | 'md';
+  registerOptionLayout: (
+    value: string,
+    layout: { x: number; y: number; width: number; height: number }
+  ) => void;
+};
+
+export const SegmentedControlContext = createContext<SegmentedControlContextValue | null>(null);
+
+export const useSegmentedControlContext = () => {
+  const context = useContext(SegmentedControlContext);
+  if (!context) {
+    throw new Error('SegmentedControlOption must be used within SegmentedControl');
+  }
+  return context;
+};

package/src/components/SegmentedControl/SegmentedControl.docs.mdx

@@ -0,0 +1,90 @@
+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.
+Each option is presented as an equal-priority segment in a single horizontal group.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Sizes](#sizes)
+- [Props](#props)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <SegmentedControl defaultValue="day">
+    <SegmentedControlOption value="day">Day</SegmentedControlOption>
+    <SegmentedControlOption value="week">Week</SegmentedControlOption>
+    <SegmentedControlOption value="month">Month</SegmentedControlOption>
+  </SegmentedControl>
+</UsageWrap>
+
+```tsx
+import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+
+const Example = () => {
+  return (
+    <SegmentedControl defaultValue="day">
+      <SegmentedControlOption value="day">Day</SegmentedControlOption>
+      <SegmentedControlOption value="week">Week</SegmentedControlOption>
+      <SegmentedControlOption value="month">Month</SegmentedControlOption>
+    </SegmentedControl>
+  );
+};
+```
+
+## Sizes
+
+Figma defines two size variants for Segmented Control:
+
+- `sm` maps to `SM-32`
+- `md` maps to `MD-48`
+
+<Canvas of={Stories.Sizes} />
+
+## Props
+
+### SegmentedControl
+
+| Property        | Type                      | Description                            | Default      |
+| --------------- | ------------------------- | -------------------------------------- | ------------ |
+| `value`         | `string`                  | Controlled selected option value.      | -            |
+| `defaultValue`  | `string`                  | Initial selected value (uncontrolled). | first option |
+| `onValueChange` | `(value: string) => void` | Called when selected option changes.   | -            |
+| `size`          | `'sm' \| 'md'`            | Size variant (`SM-32` / `MD-48`).      | `'sm'`       |
+| `disabled`      | `boolean`                 | Disables all options in the group.     | `false`      |
+| `children`      | `ReactNode`               | `SegmentedControlOption` children.     | required     |
+
+### SegmentedControlOption
+
+| Property   | Type        | Description                    | Default  |
+| ---------- | ----------- | ------------------------------ | -------- |
+| `value`    | `string`    | Unique value for this segment. | required |
+| `children` | `ReactNode` | Option label/content.          | required |
+| `disabled` | `boolean`   | Disables only this option.     | `false`  |
+
+## Accessibility
+
+SegmentedControl uses radio semantics so assistive technologies can understand it as a single-choice group.
+
+- SegmentedControl root uses `accessibilityRole="radiogroup"`.
+- Each SegmentedControlOption uses `accessibilityRole="radio"`.
+- Option state is communicated with `accessibilityState={{ checked, disabled }}`.
+- If `accessibilityLabel` is not provided on an option, the component falls back to the option text content and then to the option `value`.

package/src/components/SegmentedControl/SegmentedControl.figma.tsx

@@ -0,0 +1,40 @@
+import figma from '@figma/code-connect';
+import { SegmentedControl, SegmentedControlOption } from '../';
+
+figma.connect(
+  SegmentedControl,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&t=c7xg5X0N2EL0t87h-4',
+  {
+    props: {
+      size: figma.enum('Size', {
+        'SM-32': 'sm',
+        'MD-48': 'md',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      options: figma.children('Option'),
+    },
+    example: props => (
+      <SegmentedControl defaultValue="option-1" size={props.size} disabled={props.disabled}>
+        {props.options}
+      </SegmentedControl>
+    ),
+  }
+);
+
+figma.connect(
+  SegmentedControlOption,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&t=c7xg5X0N2EL0t87h-4',
+  {
+    props: {
+      label: figma.string('Label'),
+      value: figma.string('Value'),
+    },
+    example: props => (
+      <SegmentedControlOption value={props.value ?? 'option'}>
+        {props.label ?? 'Option'}
+      </SegmentedControlOption>
+    ),
+  }
+);

package/src/components/SegmentedControl/SegmentedControl.props.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { FlexLayoutProps } from '../../types';
+
+export interface SegmentedControlProps extends ViewProps, FlexLayoutProps {
+  /** Controlled selected option value. */
+  value?: string;
+  /** Initial selected option value for uncontrolled mode. */
+  defaultValue?: string;
+  /** Called when selected option changes. */
+  onValueChange?: (value: string) => void;
+  /** Size variant. */
+  size?: 'sm' | 'md';
+  /** Disables all options in the control. */
+  disabled?: boolean;
+  /** SegmentedControlOption children. */
+  children: ReactNode;
+}
+
+export default SegmentedControlProps;

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { BodyText, Flex, SegmentedControl, SegmentedControlOption } from '../';
+
+const meta = {
+  title: 'Stories / Segmented Control',
+  component: SegmentedControl,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    size: 'sm',
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+export const Playground = {
+  render: (args: { size?: 'sm' | 'md'; disabled?: boolean }) => (
+    <SegmentedControl defaultValue="day" {...args}>
+      <SegmentedControlOption value="day">Day</SegmentedControlOption>
+      <SegmentedControlOption value="week">Week</SegmentedControlOption>
+      <SegmentedControlOption value="month">Month</SegmentedControlOption>
+    </SegmentedControl>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <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>
+  ),
+};
+
+export const Controlled = {
+  render: () => {
+    const [value, setValue] = useState('annual');
+    return (
+      <Flex spacing="sm" align="center">
+        <SegmentedControl value={value} onValueChange={setValue}>
+          <SegmentedControlOption value="monthly">Monthly</SegmentedControlOption>
+          <SegmentedControlOption value="annual">Annual</SegmentedControlOption>
+        </SegmentedControl>
+        <BodyText size="sm">Selected: {value}</BodyText>
+      </Flex>
+    );
+  },
+};
+
+export const Disabled = {
+  render: () => (
+    <SegmentedControl defaultValue="left" disabled>
+      <SegmentedControlOption value="left">Left</SegmentedControlOption>
+      <SegmentedControlOption value="center">Center</SegmentedControlOption>
+      <SegmentedControlOption value="right">Right</SegmentedControlOption>
+    </SegmentedControl>
+  ),
+};