@utilitywarehouse/hearth-react-native 0.21.0 → 0.22.1

package/docs/changelog.mdx

@@ -9,6 +9,255 @@ 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.21.0
+
+### Minor Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add 2xl size variant to Heading component
+
+  The `Heading` component now supports a `2xl` size option, providing a larger heading size for prominent page titles and hero sections. This size is responsive across device sizes with appropriate font sizes and line heights for mobile, tablet, and desktop viewports.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  Use the new `2xl` size prop:
+
+  ```tsx
+  <Heading size="2xl">Welcome to Hearth</Heading>
+  ```
+
+  The `2xl` size will render with:
+  - Mobile: 44px font size, 52px line height
+  - Tablet: 44px font size, 52px line height
+  - Desktop: 54px font size, 62px line height
+
+- [#949](https://github.com/utilitywarehouse/hearth/pull/949) [`e1aacf0`](https://github.com/utilitywarehouse/hearth/commit/e1aacf06a58fd8358e9e7546ec35d8194a0d8d74) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🌟 [FEATURE]: Add segment refs to `DateInput` for programmatic focus control
+
+  The `DateInput` component now supports direct refs for each segment input via `dayRef`, `monthRef`, and `yearRef`.
+  This makes it easier to move focus between segments from custom flows (for example, advancing focus after validation or from custom buttons).
+
+  Documentation and Storybook examples are also updated to show how to use segment refs in real usage.
+
+  **Components affected**:
+  - `DateInput`
+
+  **Developer changes**:
+
+  You can now pass refs to each segment and call `.focus()` when needed:
+
+  ```tsx
+  import { useRef, useState } from 'react';
+  import { TextInput } from 'react-native';
+  import { Button, DateInput } from '@utilitywarehouse/hearth-react-native';
+
+  const DateWithSegmentFocus = () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const dayRef = useRef<TextInput>(null);
+    const monthRef = useRef<TextInput>(null);
+    const yearRef = useRef<TextInput>(null);
+
+    return (
+      <>
+        <DateInput
+          label="Date of birth"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+          dayRef={dayRef}
+          monthRef={monthRef}
+          yearRef={yearRef}
+        />
+
+        <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+      </>
+    );
+  };
+  ```
+
+  This is a non-breaking enhancement, so existing `DateInput` usage continues to work without any changes.
+
+- [#918](https://github.com/utilitywarehouse/hearth/pull/918) [`2db4dbe`](https://github.com/utilitywarehouse/hearth/commit/2db4dbe273583239b148c4399af829df596a00c1) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Simplify semantic token naming and introduce utility prop types
+
+  This release simplifies the semantic token naming convention and introduces a new utility prop system to make the API more intuitive and consistent across components.
+
+  **Components affected**:
+  - `Box`
+  - `Container`
+  - `Card`
+  - `Flex`
+  - `Grid`
+  - `Center`
+  - `BodyText`
+  - `Heading`
+  - `DetailText`
+  - `Carousel`
+  - `CarouselItem`
+
+  **Developer changes**:
+
+  ### Background Colors
+
+  Background color props now accept simplified semantic tokens. Update your code as follows:
+
+  ```diff
+  - <Box backgroundColor="backgroundPrimary">
+  + <Box backgroundColor="primary">
+
+  - <Box backgroundColor="backgroundSecondary">
+  + <Box backgroundColor="secondary">
+
+  - <Box backgroundColor="backgroundBrand">
+  + <Box backgroundColor="brand">
+
+  - <Container bg="backgroundPrimary">
+  + <Container bg="primary">
+  ```
+
+  You can still use full color tokens (e.g., `backgroundColor={color.blue[400]}`) by using a `StyleSheet`, the `useTheme` hook, or directly importing from the tokens library:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.blue[400]} />;
+  ```
+
+  ### Text Colors
+
+  Text color props now accept simplified semantic tokens:
+
+  ```diff
+  - <BodyText color="white">Text</BodyText>
+  + <BodyText color="inverted">Text</BodyText>
+
+  - <BodyText color="grey1000">Text</BodyText>
+  + <BodyText color="primary">Text</BodyText>
+
+  - <Heading color="textSecondary">Heading</Heading>
+  + <Heading color="secondary">Heading</Heading>
+  ```
+
+  ### Border Colors
+
+  Border color props now accept simplified semantic tokens:
+
+  ```diff
+  - <Box borderColor="grey800">
+  + <Box borderColor="strong">
+
+  - <Box borderColor="borderSubtle">
+  + <Box borderColor="subtle">
+  ```
+
+  ### Utility Props
+
+  Components now support consistent utility props through shared type interfaces. The following components have been updated to support additional utility props:
+  - **Container**: Added `MarginProps`, `PaddingProps`, `GapProps`, and `BackgroundColorProps`
+  - **Card**: Added `MarginProps` and `GapProps`
+  - **Flex**: Now properly supports `MarginProps`, `PaddingProps`, and `GapProps`
+  - **Text components** (BodyText, Heading, DetailText): Now support `MarginProps`
+
+  This means you can now use margin utilities directly on these components:
+
+  ```tsx
+  <BodyText mt="200" mb="100">Text with margin utilities</BodyText>
+  <Container mx="300" py="200">Container with spacing utilities</Container>
+  <Card mt="200" gap="100">Card with margin and gap utilities</Card>
+  ```
+
+  **Migration guide**:
+  1. Replace semantic background color tokens:
+     - `backgroundPrimary` → `primary`
+     - `backgroundSecondary` → `secondary`
+     - `backgroundBrand` → `brand`
+  2. Replace semantic text color tokens:
+     - `white` → `inverted` (for text on dark backgrounds)
+     - `grey1000` / `textPrimary` → `primary`
+     - `textSecondary` → `secondary`
+  3. Replace semantic border color tokens:
+     - `grey800` / `borderStrong` → `strong`
+     - `borderSubtle` → `subtle`
+  4. For non-semantic colors, use a `StyleSheet` and use the full color token from the theme:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  or the `useTheme` hook:
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  or use the tokens library:
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.purple[800]} />;
+  ```
+
+  **Backwards compatibility**:
+
+  The full color tokens (e.g., `backgroundPrimary`, `grey1000`) are still supported as fallbacks but are deprecated and will cause type errors. We recommend migrating to the simplified tokens for a cleaner API.
+
+  **References**:
+  - [Semantic tokens documentation](https://github.com/utilitywarehouse/hearth/blob/main/packages/tokens/src/semantic-light.ts)
+
+### Patch Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Update design tokens from Figma
+
+  Updated design tokens to include new font sizes, line heights, and component-specific tokens:
+  - Added `background.loading` colour token for both light and dark modes
+  - Added new font sizes: 575 (44px) and 650 (54px)
+  - Added new line heights: 975 (52px) and 1050 (62px)
+  - Updated `Modal` component tokens with `mobile.paddingBottom` and `handle.paddingBottom` properties
+  - Added `borderBottom` property to `Navigation` component tokens
+  - Updated `Skeleton` component `loadingColor` value in light mode
+
+  **Developer changes**:
+
+  No changes required. These tokens are automatically applied to components that use them.
+
 ## 0.20.0
 
 ### Minor Changes

package/docs/components/NextPrevPage.tsx

@@ -32,7 +32,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
     <div className="sb-unstyled">
       <View style={styles.container}>
         {!!prevLink && (
-          <Card gap="100">
+          <Card gap="100" alignItems="flex-start">
             {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
             <CardPressHandler>
               <Link
@@ -47,7 +47,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
         )}
         <div />
         {!!nextLink && (
-          <Card gap="100">
+          <Card gap="100" alignItems="flex-start">
             {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
             <CardPressHandler>
               <Link onPress={() => openLink(nextLink)}>Next Page</Link>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -42,13 +42,13 @@
     "react": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
-    "react-native-gesture-handler": "2.26.0",
-    "react-native-nitro-modules": "^0.31.4",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-nitro-modules": "0.31.4",
     "react-native-reanimated": "4.1.3",
     "react-native-svg": "^15.12.1",
     "react-native-unistyles": "3.0.17",
     "react-native-web": "^0.20.0",
-    "react-native-worklets": "^0.6.1",
+    "react-native-worklets": "^0.5.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.2.1",
     "typescript": "^5.7.3",
@@ -56,8 +56,8 @@
     "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-react-native-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },
@@ -66,7 +66,7 @@
     "@utilitywarehouse/hearth-react-native-icons": "0.8.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
-    "react-native-gesture-handler": "^2.22.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": "3.x || ^4.x",
     "react-native-svg": ">=13.4.0",
     "react-native-unistyles": ">=3.0.0",

package/src/components/Card/Card.props.ts

@@ -1,7 +1,8 @@
-import { PressableProps, ViewStyle } from 'react-native';
-import { GapProps, MarginProps, SpacingValues } from '../../types';
+import { PressableProps } from 'react-native';
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
 
-interface CardProps extends PressableProps, MarginProps, GapProps {
+interface CardProps
+  extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
   variant?: 'emphasis' | 'subtle';
   colorScheme?:
     | 'neutralStrong'
@@ -25,12 +26,8 @@ interface CardProps extends PressableProps, MarginProps, GapProps {
   noPadding?: boolean;
   disabled?: boolean;
   spacing?: SpacingValues;
-  /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
+  /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
   space?: SpacingValues;
-  alignItems?: ViewStyle['alignItems'];
-  justifyContent?: ViewStyle['justifyContent'];
-  flexDirection?: ViewStyle['flexDirection'];
-  flexWrap?: ViewStyle['flexWrap'];
 }
 
 export default CardProps;

package/src/components/Card/CardRoot.tsx

@@ -123,7 +123,6 @@ Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({
   card: {
     overflow: 'hidden',
-    alignItems: 'flex-start',
     borderRadius: theme.components.card.borderRadius,
     variants: {
       spacing: theme.globalStyle.variants.spacing,

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -87,6 +87,7 @@ const MyComponent = () => {
 | `label`              | `string`                            | -           | The label to be displayed next to the checkbox.                                                                      |
 | `helperText`         | `string`                            | -           | The helper text to be displayed below the checkbox.                                                                  |
 | `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                                    |
+| `badge`              | `ReactNode`                         | -           | The badge to be displayed below the helper text.                                                                     |
 | `invalidText`        | `string`                            | -           | The invalid text to be displayed below the checkbox.                                                                 |
 | `validText`          | `string`                            | -           | The valid text to be displayed below the checkbox.                                                                   |
 | `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                                 |

package/src/components/Checkbox/Checkbox.props.ts

@@ -23,6 +23,7 @@ type CheckboxWithChildrenProps = {
   label?: never;
   helperText?: never;
   helperIcon?: never;
+  badge?: never;
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
@@ -34,6 +35,7 @@ type CheckboxWithoutChildrenProps = {
   label?: string;
   helperText?: string;
   helperIcon?: ComponentType;
+  badge?: ReactNode;
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -5,6 +5,7 @@ import { Checkbox, CheckboxGroup, CheckboxImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
 
 const meta = {
   title: 'Stories / Checkbox',
@@ -133,6 +134,31 @@ export const WithImage: Story = {
   ),
 };
 
+export const WithBadge: Story = {
+  args: {
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ checked: checkedArg = false, onChange, ...args }) => {
+    const [checked, setChecked] = React.useState(checkedArg);
+    useEffect(() => {
+      setChecked(checkedArg);
+    }, [checkedArg]);
+    return (
+      <Checkbox
+        onChange={val => {
+          console.log('-----');
+          setChecked(val);
+        }}
+        badge={<Badge>New</Badge>}
+        {...args}
+        checked={checked}
+      />
+    );
+  },
+};
+
 export const Variants: Story = {
   render: () => {
     const [values, setValues] = React.useState(['Label 1']);

package/src/components/Checkbox/Checkbox.tsx

@@ -36,6 +36,7 @@ const Checkbox = ({
   checked,
   helperIcon,
   helperText,
+  badge,
   invalidText,
   validText,
   validationStatus: validation,
@@ -61,6 +62,7 @@ const Checkbox = ({
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
+        {badge ? badge : null}
         {validationStatus === 'invalid' && !!invalidText && (
           <Helper
             showIcon={showValidationIcon}

package/src/components/Modal/Modal.tsx

@@ -254,7 +254,7 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!stickyFooter && !noButtons ? footer : null}
+          {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
     </>

package/src/components/Radio/Radio.docs.mdx

@@ -100,6 +100,7 @@ const MyComponent = () => {
 | `label`              | `string`                            | -           | The label to be displayed next to the radio.                                                         |
 | `helperText`         | `string`                            | -           | The helper text to be displayed below the radio.                                                     |
 | `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                    |
+| `badge`              | `ReactNode`                         | -           | The badge to be displayed below the helper text.                                                     |
 | `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio.                                                    |
 | `validText`          | `string`                            | -           | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                 |

package/src/components/Radio/Radio.props.ts

@@ -14,6 +14,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
   label?: never;
   helperText?: never;
   helperIcon?: never;
+  badge?: never;
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
@@ -25,6 +26,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   label?: string;
   helperText?: string;
   helperIcon?: ComponentType;
+  badge?: ReactNode;
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;

package/src/components/Radio/Radio.stories.tsx

@@ -5,6 +5,7 @@ import { Radio, RadioGroup, RadioImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
 import { Flex } from '../Flex';
 import { FormField } from '../FormField';
 
@@ -136,6 +137,27 @@ export const WithImage: Story = {
   ),
 };
 
+export const WithBadge: Story = {
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  render: args => (
+    <RadioGroup>
+      <Radio
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-1"
+        badge={<Badge>New</Badge>}
+        {...args}
+      />
+    </RadioGroup>
+  ),
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['value', 'label', 'disabled'] },

package/src/components/Radio/Radio.tsx

@@ -36,6 +36,7 @@ const Radio = ({
   disabled,
   helperIcon,
   helperText,
+  badge,
   invalidText,
   validText,
   validationStatus: validation,
@@ -60,6 +61,7 @@ const Radio = ({
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
+        {badge ? badge : null}
         {validationStatus === 'invalid' && !!invalidText && (
           <Helper
             showIcon={showValidationIcon}

package/src/components/Radio/RadioTile.figma.tsx

@@ -9,6 +9,9 @@ figma.connect(
       helperText: figma.boolean('Helper text?', {
         true: figma.string('Helper text'),
       }),
+      badge: figma.boolean('Badge?', {
+        true: figma.children('Badge'),
+      }),
       label: figma.string('Label'),
       image: figma.boolean('Image?', {
         true: figma.instance('Radio Image'),
@@ -24,6 +27,7 @@ figma.connect(
       <RadioTile
         label={props.label}
         helperText={props.helperText}
+        badge={props.badge}
         image={props.image}
         checked={props.checked}
         disabled={props.indicator.disabled}