@utilitywarehouse/hearth-react-native 0.22.0 → 0.23.0-test-list

package/build/components/VerificationInput/VerificationInput.js

@@ -1,36 +1,187 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Platform, TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
-import { useVerificationInput } from './useVerificationInput';
 import { VerificationInputSlot } from './VerificationInputSlot';
 const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
     const length = 6;
-    const { inputRefs, displayValue, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress, } = useVerificationInput({
-        value,
-        onChangeText,
-    });
+    const inputRef = useRef(null);
+    const latestValueRef = useRef(value);
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const [selection, setSelection] = useState({ start: 0, end: 0 });
+    const latestSelectionRef = useRef(selection);
+    const ignoreNextSelectionRef = useRef(false);
+    const pendingFocusIndexRef = useRef(null);
+    useEffect(() => {
+        if (value !== latestValueRef.current) {
+            const trimmedValue = value.slice(0, length);
+            latestValueRef.current = trimmedValue;
+            setDisplayValue(trimmedValue);
+            const nextPos = Math.min(trimmedValue.length, length);
+            const nextSelection = { start: nextPos, end: nextPos };
+            ignoreNextSelectionRef.current = true;
+            latestSelectionRef.current = nextSelection;
+            setSelection(nextSelection);
+        }
+    }, [length, value]);
+    const updateValue = (nextValue) => {
+        const trimmedValue = nextValue.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        onChangeText?.(trimmedValue);
+    };
+    const setSelectionIndex = (index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length));
+        const hasChar = !!latestValueRef.current[clampedIndex];
+        const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
+        const nextSelection = { start: clampedIndex, end: endIndex };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+        setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+    const setCaretIndex = (index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length));
+        const nextSelection = { start: clampedIndex, end: clampedIndex };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+        setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+    const findDiffIndex = (prevValue, nextValue) => {
+        const minLength = Math.min(prevValue.length, nextValue.length);
+        for (let i = 0; i < minLength; i += 1) {
+            if (prevValue[i] !== nextValue[i]) {
+                return i;
+            }
+        }
+        return minLength;
+    };
+    const handleChangeText = (text) => {
+        const prevValue = latestValueRef.current;
+        const nextValue = text.slice(0, length);
+        const prevLength = prevValue.length;
+        const nextLength = nextValue.length;
+        const diff = nextLength - prevLength;
+        const isBulkInsert = text.length > 1 && diff > 1;
+        const shouldBlur = nextLength >= length;
+        let nextIndex = Math.max(0, Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length));
+        if (Platform.OS === 'android') {
+            const editedIndex = findDiffIndex(prevValue, nextValue);
+            nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
+        }
+        updateValue(nextValue);
+        if (isBulkInsert) {
+            setCaretIndex(Math.min(nextLength, length));
+            if (shouldBlur) {
+                inputRef.current?.blur();
+            }
+            return;
+        }
+        if (nextIndex >= length) {
+            setCaretIndex(nextIndex);
+            if (shouldBlur) {
+                inputRef.current?.blur();
+            }
+            return;
+        }
+        if (nextLength >= length) {
+            setSelectionIndex(nextIndex);
+            inputRef.current?.blur();
+            return;
+        }
+        const hasNextChar = !!nextValue[nextIndex];
+        if (hasNextChar) {
+            setSelectionIndex(nextIndex);
+        }
+        else {
+            setCaretIndex(nextIndex);
+        }
+    };
+    const handleFocus = () => {
+        if (pendingFocusIndexRef.current !== null) {
+            setSelectionIndex(pendingFocusIndexRef.current);
+            pendingFocusIndexRef.current = null;
+            return;
+        }
+        setFocusedIndex(Math.min(selection.start, length - 1));
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
     useImperativeHandle(ref, () => ({
-        focus: () => inputRefs.current[0]?.focus(),
-        blur: () => {
-            inputRefs.current.forEach(input => input?.blur());
+        focus: () => {
+            inputRef.current?.focus();
+            const nextIndex = Math.min(latestValueRef.current.length, length - 1);
+            if (latestValueRef.current.length >= length) {
+                setSelectionIndex(nextIndex);
+            }
+            else {
+                setCaretIndex(nextIndex);
+            }
+        },
+        blur: () => inputRef.current?.blur(),
+        clear: () => {
+            updateValue('');
+            setSelectionIndex(0);
+            inputRef.current?.blur();
+            setFocusedIndex(null);
         },
-        clear: () => onChangeText?.(''),
         focusIndex: (index) => {
             if (index >= 0 && index < length) {
-                inputRefs.current[index]?.focus();
+                inputRef.current?.focus();
+                setSelectionIndex(index);
             }
         },
     }), [length, onChangeText]);
     const slots = Array.from({ length }, (_, index) => index);
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
-                const char = displayValue[index] || '';
-                const isActive = focusedIndex === index;
-                return (_jsx(VerificationInputSlot, { ref: inputRef => {
-                        inputRefs.current[index] = inputRef;
-                    }, autoFocus: index === 0 && autoFocus, value: char, isActive: isActive, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onChangeText: text => handleChangeText(text, index), onKeyPress: e => handleKeyPress(e, index), onFocus: () => handleFocus(index), onBlur: handleBlur }, index));
-            }) }) }));
+    const getAccessibilityLabel = () => {
+        return label || props.accessibilityLabel;
+    };
+    const getAccessibilityHint = () => {
+        let accessibilityHint = '';
+        if (helperText) {
+            accessibilityHint = accessibilityHint + helperText;
+        }
+        if (validationStatus !== 'initial') {
+            if (accessibilityHint.length > 0) {
+                accessibilityHint = accessibilityHint + ', ';
+            }
+            if (validationStatus === 'invalid' && invalidText) {
+                accessibilityHint = accessibilityHint + invalidText;
+            }
+            if (validationStatus === 'valid' && validText) {
+                accessibilityHint = accessibilityHint + validText;
+            }
+        }
+        return accessibilityHint || props.accessibilityHint;
+    };
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
+                        const nextSelection = event.nativeEvent.selection;
+                        if (ignoreNextSelectionRef.current &&
+                            (nextSelection.start !== latestSelectionRef.current.start ||
+                                nextSelection.end !== latestSelectionRef.current.end)) {
+                            return;
+                        }
+                        if (pendingFocusIndexRef.current !== null) {
+                            return;
+                        }
+                        ignoreNextSelectionRef.current = false;
+                        latestSelectionRef.current = nextSelection;
+                        setSelection(nextSelection);
+                        setFocusedIndex(Math.min(nextSelection.start, length - 1));
+                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput, pointerEvents: "none" }), slots.map(index => {
+                    const char = displayValue[index] || '';
+                    const isActive = focusedIndex === index;
+                    const displayChar = secureTextEntry && char ? '*' : char;
+                    return (_jsx(VerificationInputSlot, { value: displayChar, isActive: isActive, showCaret: isActive && !displayChar, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onPress: () => {
+                            pendingFocusIndexRef.current = index;
+                            inputRef.current?.focus();
+                            setSelectionIndex(index);
+                        } }, index));
+                })] }) }));
 });
 const styles = StyleSheet.create(theme => ({
     root: {
@@ -42,6 +193,17 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'row',
         gap: theme.components.input.verification.gap,
         width: '100%',
+        position: 'relative',
+    },
+    hiddenInput: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        color: 'transparent',
+        fontSize: 1,
+        opacity: 0.1,
     },
 }));
 VerificationInput.displayName = 'VerificationInput';

package/build/components/VerificationInput/VerificationInput.utils.d.ts

@@ -0,0 +1,8 @@
+interface GetNextIndexFromValueChangeOptions {
+    prevValue: string;
+    nextValue: string;
+    length: number;
+}
+export declare const findDiffIndex: (prevValue: string, nextValue: string) => number;
+export declare const getNextIndexFromValueChange: ({ prevValue, nextValue, length, }: GetNextIndexFromValueChangeOptions) => number;
+export {};

package/build/components/VerificationInput/VerificationInput.utils.js

@@ -0,0 +1,17 @@
+export const findDiffIndex = (prevValue, nextValue) => {
+    const minLength = Math.min(prevValue.length, nextValue.length);
+    for (let i = 0; i < minLength; i += 1) {
+        if (prevValue[i] !== nextValue[i]) {
+            return i;
+        }
+    }
+    return minLength;
+};
+export const getNextIndexFromValueChange = ({ prevValue, nextValue, length, }) => {
+    const diff = nextValue.length - prevValue.length;
+    const editedIndex = findDiffIndex(prevValue, nextValue);
+    if (diff >= 0) {
+        return Math.min(editedIndex + 1, length);
+    }
+    return Math.max(editedIndex, 0);
+};

package/build/components/VerificationInput/VerificationInput.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/VerificationInput/VerificationInput.utils.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
+describe('findDiffIndex', () => {
+    it('returns first differing index', () => {
+        expect(findDiffIndex('12', '19')).toBe(1);
+    });
+    it('returns previous length when next appends', () => {
+        expect(findDiffIndex('12', '123')).toBe(2);
+    });
+    it('returns next length when next shortens with same prefix', () => {
+        expect(findDiffIndex('123', '12')).toBe(2);
+    });
+});
+describe('getNextIndexFromValueChange', () => {
+    it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12',
+            nextValue: '123',
+            length: 6,
+        })).toBe(3);
+    });
+    it('caps at length when value becomes full', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12345',
+            nextValue: '123456',
+            length: 6,
+        })).toBe(6);
+    });
+    it('stays at edited index for deletions', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '123',
+            nextValue: '12',
+            length: 6,
+        })).toBe(2);
+    });
+});

package/build/components/VerificationInput/VerificationInputSlot.d.ts

@@ -1,9 +1,13 @@
-import { TextInput, TextInputProps } from 'react-native';
-interface VerificationInputSlotProps extends TextInputProps {
+import { View, ViewProps } from 'react-native';
+interface VerificationInputSlotProps extends ViewProps {
+    value: string;
     isActive: boolean;
+    showCaret?: boolean;
     validationStatus: 'initial' | 'valid' | 'invalid';
     disabled?: boolean;
     readonly?: boolean;
+    onPress?: () => void;
+    secureTextEntry?: boolean;
 }
-export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<TextInput>>;
+export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<View>>;
 export {};

package/build/components/VerificationInput/VerificationInputSlot.js

@@ -1,28 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { Pressable, Text } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
-import InputField from '../Input/InputField';
-export const VerificationInputSlot = forwardRef(({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+export const VerificationInputSlot = forwardRef(({ value, isActive, showCaret, validationStatus, disabled, readonly, style, onPress, secureTextEntry, ...props }, ref) => {
     styles.useVariants({
         disabled,
         readonly,
         validationStatus,
         active: isActive,
+        secureTextEntry,
     });
-    return (_jsx(InputField, { ref: ref, ...props, editable: !disabled && !readonly, selectTextOnFocus: true, keyboardType: "number-pad", style: [styles.slot, style] }));
+    const caretOpacity = useSharedValue(0);
+    const animatedCaretStyle = useAnimatedStyle(() => ({
+        opacity: caretOpacity.value,
+    }));
+    useEffect(() => {
+        if (showCaret && !disabled && !readonly) {
+            caretOpacity.value = withRepeat(withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }), -1, true);
+            return;
+        }
+        caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
+    }, [caretOpacity, disabled, readonly, showCaret]);
+    return (_jsxs(Pressable, { ref: ref, onPress: onPress, disabled: disabled || readonly, style: [styles.slot, style], accessibilityRole: "button", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...props, children: [_jsx(Text, { style: styles.slotText, children: value }), showCaret && !disabled && !readonly && (_jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }))] }));
 });
 VerificationInputSlot.displayName = 'VerificationInputSlot';
 const styles = StyleSheet.create(theme => ({
     slot: {
-        flex: 0,
+        flexGrow: 0,
+        flexShrink: 0,
         width: theme.components.input.height,
         height: theme.components.input.height,
+        minWidth: theme.components.input.height,
+        minHeight: theme.components.input.height,
         borderWidth: theme.components.input.borderWidth,
         borderColor: theme.color.border.strong,
         borderRadius: theme.components.input.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        textAlign: 'center',
+        alignItems: 'center',
+        justifyContent: 'center',
         padding: 0,
+        position: 'relative',
         variants: {
             disabled: {
                 true: {
@@ -69,4 +87,24 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
     },
+    slotText: {
+        color: theme.color.text.primary,
+        fontSize: theme.typography.mobile.bodyText.md.fontSize,
+        fontFamily: theme.typography.mobile.bodyText.fontFamily,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
+        textAlign: 'center',
+        variants: {
+            secureTextEntry: {
+                true: {
+                    paddingTop: 5,
+                },
+            },
+        },
+    },
+    caret: {
+        position: 'absolute',
+        width: 2,
+        height: '55%',
+        backgroundColor: theme.color.text.brand,
+    },
 }));

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.22.0",
+  "version": "0.23.0-test-list",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -43,7 +43,7 @@
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.28.0",
-    "react-native-nitro-modules": "^0.31.4",
+    "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",
@@ -55,9 +55,9 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },