@utilitywarehouse/hearth-react-native 0.4.1 → 0.4.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.4.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.2 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.4.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.2 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.4.2
+
+### Patch Changes
+
+- [#570](https://github.com/utilitywarehouse/hearth/pull/570) [`364e1ac`](https://github.com/utilitywarehouse/hearth/commit/364e1ac1ee6c83327b0614d90bf280e283144ae6) Thanks [@dorota-uw](https://github.com/dorota-uw)! - Switched the logic for enabling/disabling comma separator in CurrencyInput
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Radio` and `Checkbox` helper overflow issue
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes semantic text colour issue
+
 ## 0.4.1
 
 ### Patch Changes

package/build/components/Checkbox/CheckboxTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const CheckboxTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CheckboxTextContent;

package/build/components/Checkbox/CheckboxTextContent.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
-const CheckboxTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+const CheckboxTextContent = ({ children, style, ...props }) => {
+    return (_jsx(Flex, { style: [styles.content, style], direction: "column", space: "none", ...props, children: children }));
 };
+const styles = StyleSheet.create({
+    content: {
+        flex: 1,
+        flexShrink: 1,
+    },
+});
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 export default CheckboxTextContent;

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, autoFormatThousands, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -5,14 +5,14 @@ import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, autoFormatThousands = false, value, onChangeText, ...rest }) => {
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const defaultFormat = '0.00';
     const getPlaceholder = placeholder ?? defaultFormat;
     const handleChangeText = (text) => {
-        if (autoFormatThousands) {
+        if (!disableGroupSeparator) {
             const formatted = formatThousands(text);
             onChangeText?.(formatted);
         }
@@ -20,7 +20,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
             onChangeText?.(text);
         }
     };
-    const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
     return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';

package/build/components/CurrencyInput/CurrencyInput.props.d.ts

@@ -7,8 +7,8 @@ export interface CurrencyInputBaseProps {
     placeholder?: string;
     inBottomSheet?: boolean;
     required?: boolean;
-    /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-    autoFormatThousands?: boolean;
+    /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+    disableGroupSeparator?: boolean;
 }
 export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
 export default CurrencyInputProps;

package/build/components/Radio/RadioTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const RadioTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioTextContent;

package/build/components/Radio/RadioTextContent.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
-const RadioTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+const RadioTextContent = ({ children, style, ...props }) => {
+    return (_jsx(Flex, { direction: "column", space: "none", style: [styles.content, style], ...props, children: children }));
 };
+const styles = StyleSheet.create({
+    content: {
+        flex: 1,
+        flexShrink: 1,
+    },
+});
 RadioTextContent.displayName = 'RadioTextContent';
 export default RadioTextContent;

package/build/utils/getFlattenedColorValue.js

@@ -1,23 +1,6 @@
+import { resolveThemeValue } from './themeValueHelpers';
 export default function getFlattenedColorValue(value, colors) {
     if (!value)
         return undefined;
-    if (colors?.[value] && typeof colors?.[value] === 'string') {
-        return colors?.[value];
-    }
-    // Extract trailing digits as shade
-    const shadeMatch = value.match(/\d+$/);
-    if (!shadeMatch)
-        return value;
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    if (shade && typeof base !== 'string')
-        return value;
-    const colorEntry = colors?.[base];
-    if (typeof colorEntry === 'object') {
-        return (colorEntry[shade] ?? value);
-    }
-    else if (typeof colorEntry === 'string') {
-        return colorEntry;
-    }
-    return value;
+    return resolveThemeValue(value, colors);
 }

package/build/utils/index.d.ts

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/build/utils/index.js

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/build/utils/styleUtils.d.ts

@@ -15,7 +15,3 @@ export declare const themeStyleMapping: {
  * Set of all possible ViewStyle property names
  */
 export declare const viewStyleProps: Set<string>;
-/**
- * Helper function to resolve a theme value
- */
-export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/styleUtils.js

@@ -218,53 +218,3 @@ export const viewStyleProps = new Set([
     // Z-index
     'zIndex',
 ]);
-/**
- * Helper function to convert camelCase back to nested object path
- * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
- */
-const camelCaseToPath = (camelCased) => {
-    // Split on uppercase letters but keep them
-    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
-    return parts;
-};
-/**
- * Helper function to get nested value from object using path array
- */
-const getNestedValue = (obj, path) => {
-    return path.reduce((current, key) => {
-        return current && typeof current === 'object' ? current[key] : undefined;
-    }, obj);
-};
-/**
- * Helper function to resolve a theme value
- */
-export const resolveThemeValue = (value, themeMapping) => {
-    if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
-        return value;
-    }
-    // First, try direct lookup for simple values
-    if (themeMapping[value] !== undefined) {
-        return themeMapping[value];
-    }
-    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
-    if (/^[a-z][a-zA-Z]*$/.test(value)) {
-        // Only camelCase strings without numbers
-        const path = camelCaseToPath(value);
-        const nestedValue = getNestedValue(themeMapping, path);
-        if (nestedValue !== undefined) {
-            return nestedValue;
-        }
-    }
-    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
-    const shadeMatch = value.match(/\d+$/);
-    if (shadeMatch) {
-        const shade = shadeMatch[0];
-        const base = value.slice(0, -shade.length);
-        const nested = themeMapping[base];
-        if (nested && typeof nested === 'object') {
-            return nested[shade] ?? value;
-        }
-    }
-    // If none of the approaches work, return the original value
-    return value;
-};

package/build/utils/themeValueHelpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export declare const camelCaseToPath: (camelCased: string) => string[];
+/**
+ * Helper function to get nested value from object using path array
+ */
+export declare const getNestedValue: (obj: any, path: string[]) => any;
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/themeValueHelpers.js

@@ -0,0 +1,54 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export const camelCaseToPath = (camelCased) => {
+    // Split on uppercase letters but keep them
+    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+    return parts;
+};
+/**
+ * Helper function to get nested value from object using path array
+ */
+export const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => {
+        return current && typeof current === 'object' ? current[key] : undefined;
+    }, obj);
+};
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export const resolveThemeValue = (value, themeMapping) => {
+    if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
+        return value;
+    }
+    // First, try direct lookup for simple values
+    if (themeMapping[value] !== undefined) {
+        return themeMapping[value];
+    }
+    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+    if (/^[a-z][a-zA-Z]*$/.test(value)) {
+        // Only camelCase strings without numbers
+        const path = camelCaseToPath(value);
+        const nestedValue = getNestedValue(themeMapping, path);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
+    const shadeMatch = value.match(/\d+$/);
+    if (shadeMatch) {
+        const shade = shadeMatch[0];
+        const base = value.slice(0, -shade.length);
+        const nested = themeMapping[base];
+        if (nested && typeof nested === 'object') {
+            return nested[shade] ?? value;
+        }
+    }
+    // If none of the approaches work, return the original value
+    return value;
+};

package/docs/getting-started.mdx

@@ -7,15 +7,23 @@ import { BackToTopButton, NextPrevPage } from './components';
 # Getting Started
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
+Although there are a few components that require a `BottomSheetModalProvider` to be wrapped around your app.
 
 ```tsx
-import { Box, Alert, BodyText } from '@utilitywarehouse/hearth-react-native';
+import {
+  Box,
+  Alert,
+  BodyText,
+  BottomSheetModalProvider,
+} from '@utilitywarehouse/hearth-react-native';
 
 const App: React.FC = () => (
-  <Box p="200">
-    <Alert variant="info" text="Welcome to Hearth React Native!" />
-    <BodyText>Start building your app with Hearth React Native components.</BodyText>
-  </Box>
+  <BottomSheetModalProvider>
+    <Box p="200">
+      <Alert variant="info" text="Welcome to Hearth React Native!" />
+      <BodyText>Start building your app with Hearth React Native components.</BodyText>
+    </Box>
+  </BottomSheetModalProvider>
 );
 ```
 

package/docs/introduction.mdx

@@ -23,8 +23,11 @@ Hearth React Native is a comprehensive design system library for React Native, p
 
 - [Installation](#installation)
 - [Additional packages](#additional-packages)
+- [Fonts](#fonts)
+  - [iOS Setup](#ios-setup)
   - [Linking the fonts to be used in your project](#linking-the-fonts-to-be-used-in-your-project)
-    - [Using Expo](#using-expo)
+  - [Android Setup](#android-setup)
+  - [Using Expo](#using-expo)
 - [Babel configuration](#babel-configuration)
 - [Jest configuration](#jest-configuration)
 
@@ -66,6 +69,8 @@ as well as fonts and icons. Feel free to additionally install these packages if
 npm install @utilitywarehouse/hearth-tokens
 ```
 
+## Fonts
+
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.
 The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` package.
 
@@ -73,6 +78,14 @@ The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` packag
 npm install @utilitywarehouse/hearth-fonts
 ```
 
+### iOS Setup
+
+For iOS, copy the font files to your project's assets folder:
+
+```console
+mkdir -p src/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* src/assets/fonts/
+```
+
 Next, create or update your `react-native.config.js` file in the root directory and paste the code below inside it:
 
 ```js
@@ -81,7 +94,7 @@ module.exports = {
     ios: {},
     android: {},
   },
-  assets: ['./node_modules/@utilitywarehouse/hearth-fornts/files/ttf'],
+  assets: ['./src/assets/fonts/'],
 };
 ```
 
@@ -93,7 +106,36 @@ Now we need to link them so we'll be able to use them in any files inside the pr
 npx react-native-asset
 ```
 
-#### Using Expo
+### Android Setup
+
+For Android, you need to copy the fonts to two locations:
+
+1. Copy TTF files to the assets folder:
+
+```console
+mkdir -p android/app/src/main/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* android/app/src/main/assets/fonts/
+```
+
+2. Copy XML font family definitions to the resources folder:
+
+```console
+mkdir -p android/app/src/main/res/font && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/xml/* android/app/src/main/res/font/
+```
+
+3. Update your `android/app/src/main/java/com/{yourapp}/MainApplication.kt` file to register the custom fonts:
+
+```kotlin
+import com.facebook.react.views.text.ReactFontManager;
+
+// ... inside your onCreate() or initialization method:
+ReactFontManager.getInstance().addCustomFont(this, "DM Sans", R.font.dm_sans)
+ReactFontManager.getInstance().addCustomFont(this, "DM Mono", R.font.dm_mono)
+ReactFontManager.getInstance().addCustomFont(this, "Comic Hams", R.font.comic_hams)
+```
+
+This approach ensures fonts work consistently across platforms with a single canonical name, as described in [this article](https://ospfranco.com/post/2023/08/11/react-native,-how-to-set-up-fonts-with-a-single-canonical-name/).
+
+### Using Expo
 
 If you are using Expo, you can use the `expo-font` and [`expo-xml-font`](https://github.com/Armster15/expo-xml-font) packages to load the fonts.
 Here is an example of how to load the fonts in your `App.tsx` file:
@@ -131,7 +173,7 @@ You will need to add the following Babel plugin to your `babel.config.js` file:
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
   autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
-  autoProcessRoot: 'src', // Adjust this to your project's structure
+  root: 'src', // Adjust this to your project's structure
   debug: false, // Set to true for debugging purposes
 };
 
@@ -152,7 +194,10 @@ If you are using Jest for testing, you will need to add the following configurat
 ```js
 module.exports = {
   // other Jest configurations...
-  setupFiles: ['react-native-unistyles/mocks'],
+  setupFiles: [
+    'react-native-unistyles/mocks',
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
   // other Jest configurations...
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -37,7 +37,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
     "eslint-plugin-storybook": "9.1.6",
-    "playwright": "^1.53.1",
+    "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
@@ -53,10 +53,10 @@
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.3",
     "@utilitywarehouse/hearth-react-icons": "^0.5.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.1.1"
+    "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Checkbox/CheckboxTextContent.tsx

@@ -1,14 +1,22 @@
-import FlexProps from '../Flex/Flex.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
-const CheckboxTextContent = ({ children, ...props }: FlexProps) => {
+const CheckboxTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex style={[styles.content, style]} direction="column" space="none" {...props}>
       {children}
     </Flex>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 
 export default CheckboxTextContent;

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -56,7 +56,7 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 | focused             | boolean                             | `false`     | Forces the focused visual state                                                                                           |
 | inBottomSheet       | boolean                             | `false`     | Use BottomSheetTextInput when true                                                                                        |
 | placeholder         | string                              | `'0.00'`    | Placeholder text                                                                                                          |
-| autoFormatThousands | boolean                             | `false`     | Automatically inserts thousand separators while the user types _(Only works with controlled components via onTextChange)_ |
+| disableGroupSeparator | boolean                             | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 
@@ -97,12 +97,12 @@ const MyComponent = () => {
 
 ## Formatting
 
-Enable automatic thousand separator formatting by setting `autoFormatThousands`.
+Automatic thousand separator formatting can be disabled by setting `disableGroupSeparator`.
 
-<Canvas of={Stories.AutoFormatThousands} />
+<Canvas of={Stories.DisableGroupSeparator} />
 
 ```tsx
-<CurrencyInput autoFormatThousands value="1234567.89" /> // displays 1,234,567.89
+<CurrencyInput disableGroupSeparator value="1234567.89" /> // displays 1234567.89
 ```
 
 Notes:

package/src/components/CurrencyInput/CurrencyInput.props.ts

@@ -8,8 +8,8 @@ export interface CurrencyInputBaseProps {
   placeholder?: string;
   inBottomSheet?: boolean;
   required?: boolean;
-  /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-  autoFormatThousands?: boolean;
+  /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+  disableGroupSeparator?: boolean;
 }
 
 export type CurrencyInputProps = CurrencyInputBaseProps &

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -37,10 +37,10 @@ const meta = {
       description: 'Focused',
       defaultValue: false,
     },
-    autoFormatThousands: {
+    disableGroupSeparator: {
       control: 'boolean',
       description:
-        'Automatically add thousand separators while typing _(Only works with controlled components via onTextChange)_',
+        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onTextChange)_',
       defaultValue: false,
     },
   },
@@ -50,26 +50,28 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
-    autoFormatThousands: false,
+    disableGroupSeparator: false,
   },
 } satisfies Meta<typeof CurrencyInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: args => {
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
 
-export const AutoFormatThousands: Story = {
+export const DisableGroupSeparator: Story = {
   parameters: {
-    controls: { include: ['autoFormatThousands'] },
+    controls: { include: ['disableGroupSeparator'] },
   },
-  args: { autoFormatThousands: true },
+  args: { disableGroupSeparator: true },
   render: args => {
-    const [value, setValue] = useState('1234.56');
-    const handleChange = (val: string) => {
-      setValue(val);
-    };
-    return <CurrencyInput {...args} value={value} onChangeText={handleChange} />;
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
   },
 };
 
@@ -105,10 +107,10 @@ export const States: Story = {
           <CurrencyInput disabled />
         </VariantTitle>
         <VariantTitle title="Readonly">
-          <CurrencyInput readonly />
+          <CurrencyInput readonly value="11666"/>
         </VariantTitle>
-        <VariantTitle title="Auto format thousands">
-          <CurrencyInput autoFormatThousands value="1234.56" />
+        <VariantTitle title="Disable auto format thousands">
+          <CurrencyInput disableGroupSeparator value="1234.56" />
         </VariantTitle>
       </Flex>
     );

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -14,7 +14,7 @@ const CurrencyInput = ({
   placeholder,
   inBottomSheet = false,
   required,
-  autoFormatThousands = false,
+  disableGroupSeparator = false,
   value,
   onChangeText,
   ...rest
@@ -27,7 +27,7 @@ const CurrencyInput = ({
   const getPlaceholder = placeholder ?? defaultFormat;
 
   const handleChangeText = (text: string) => {
-    if (autoFormatThousands) {
+    if (!disableGroupSeparator) {
       const formatted = formatThousands(text);
       onChangeText?.(formatted);
     } else {
@@ -36,7 +36,7 @@ const CurrencyInput = ({
   };
 
   const displayValue =
-    autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
 
   return (
     <Input

package/src/components/Radio/RadioTextContent.tsx

@@ -1,14 +1,22 @@
-import FlexProps from '../Flex/Flex.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
-const RadioTextContent = ({ children, ...props }: FlexProps) => {
+const RadioTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex direction="column" space="none" style={[styles.content, style]} {...props}>
       {children}
     </Flex>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
 RadioTextContent.displayName = 'RadioTextContent';
 
 export default RadioTextContent;

package/src/utils/getFlattenedColorValue.ts

@@ -1,4 +1,5 @@
 import { ColorValue } from '../types';
+import { resolveThemeValue } from './themeValueHelpers';
 
 type ThemeColor = string | { [key: string]: string | ThemeColor };
 
@@ -8,25 +9,5 @@ export default function getFlattenedColorValue(
 ): ColorValue {
   if (!value) return undefined;
 
-  if (colors?.[value] && typeof colors?.[value] === 'string') {
-    return colors?.[value] as ColorValue;
-  }
-
-  // Extract trailing digits as shade
-  const shadeMatch = value.match(/\d+$/);
-
-  if (!shadeMatch) return value as ColorValue;
-  const shade = shadeMatch[0];
-  const base = value.slice(0, -shade.length);
-
-  if (shade && typeof base !== 'string') return value as ColorValue;
-
-  const colorEntry = colors?.[base];
-
-  if (typeof colorEntry === 'object') {
-    return (colorEntry[shade] ?? value) as ColorValue;
-  } else if (typeof colorEntry === 'string') {
-    return colorEntry as ColorValue;
-  }
-  return value as ColorValue;
+  return resolveThemeValue(value, colors) as ColorValue;
 }

package/src/utils/getStyleValue.ts

@@ -1,6 +1,3 @@
- 
- 
-
 const getStyleValue = (value: any, type: Record<string, any>) => {
   if (typeof value === 'string') {
     const key = value;

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/src/utils/styleUtils.ts

@@ -231,60 +231,3 @@ export const viewStyleProps = new Set<string>([
   // Z-index
   'zIndex',
 ]);
-
-/**
- * Helper function to convert camelCase back to nested object path
- * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
- */
-const camelCaseToPath = (camelCased: string): string[] => {
-  // Split on uppercase letters but keep them
-  const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
-  return parts;
-};
-
-/**
- * Helper function to get nested value from object using path array
- */
-const getNestedValue = (obj: any, path: string[]): any => {
-  return path.reduce((current, key) => {
-    return current && typeof current === 'object' ? current[key] : undefined;
-  }, obj);
-};
-
-/**
- * Helper function to resolve a theme value
- */
-export const resolveThemeValue = (value: any, themeMapping: any): any => {
-  if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
-    return value;
-  }
-
-  // First, try direct lookup for simple values
-  if (themeMapping[value] !== undefined) {
-    return themeMapping[value];
-  }
-
-  // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
-  if (/^[a-z][a-zA-Z]*$/.test(value)) {
-    // Only camelCase strings without numbers
-    const path = camelCaseToPath(value);
-    const nestedValue = getNestedValue(themeMapping, path);
-    if (nestedValue !== undefined) {
-      return nestedValue;
-    }
-  }
-
-  // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
-  const shadeMatch = value.match(/\d+$/);
-  if (shadeMatch) {
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    const nested = themeMapping[base];
-    if (nested && typeof nested === 'object') {
-      return nested[shade] ?? value;
-    }
-  }
-
-  // If none of the approaches work, return the original value
-  return value;
-};

package/src/utils/themeValueHelpers.ts

@@ -0,0 +1,60 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export const camelCaseToPath = (camelCased: string): string[] => {
+  // Split on uppercase letters but keep them
+  const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+  return parts;
+};
+
+/**
+ * Helper function to get nested value from object using path array
+ */
+export const getNestedValue = (obj: any, path: string[]): any => {
+  return path.reduce((current, key) => {
+    return current && typeof current === 'object' ? current[key] : undefined;
+  }, obj);
+};
+
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export const resolveThemeValue = (value: any, themeMapping: any): any => {
+  if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
+    return value;
+  }
+
+  // First, try direct lookup for simple values
+  if (themeMapping[value] !== undefined) {
+    return themeMapping[value];
+  }
+
+  // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+  if (/^[a-z][a-zA-Z]*$/.test(value)) {
+    // Only camelCase strings without numbers
+    const path = camelCaseToPath(value);
+    const nestedValue = getNestedValue(themeMapping, path);
+    if (nestedValue !== undefined) {
+      return nestedValue;
+    }
+  }
+
+  // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
+  const shadeMatch = value.match(/\d+$/);
+  if (shadeMatch) {
+    const shade = shadeMatch[0];
+    const base = value.slice(0, -shade.length);
+    const nested = themeMapping[base];
+    if (nested && typeof nested === 'object') {
+      return nested[shade] ?? value;
+    }
+  }
+
+  // If none of the approaches work, return the original value
+  return value;
+};