@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

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

@@ -76,22 +76,22 @@ const MyComponent = () => {
 
 ## Props
 
-| Property             | Type                                | Default   | Description                                                                                                          |
-| -------------------- | ----------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------- |
-| `value`              | `string`                            | -         | The value to be used in the checkbox input. This is the value that will be returned on form submission.              |
-| `onChange`           | `(value: boolean) => void`          | -         | Function called when the state of the checkbox changes.                                                              |
-| `defaultchecked`     | `bool`                              | `false`   | If true, the checkbox will be initially checked.                                                                     |
-| `checked`            | `bool`                              | `false`   | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the checkbox.                                                                               |
-| `disabled`           | `bool`                              | `false`   | To manually set disable to the checkbox.                                                                             |
-| `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.                                                                    |
-| `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.                                                                                 |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the checkbox.                                                                                            |
-| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                                         |
+| Property             | Type                                | Default     | Description                                                                                                          |
+| -------------------- | ----------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
+| `value`              | `string`                            | -           | The value to be used in the checkbox input. This is the value that will be returned on form submission.              |
+| `onChange`           | `(value: boolean) => void`          | -           | Function called when the state of the checkbox changes.                                                              |
+| `defaultchecked`     | `bool`                              | `false`     | If true, the checkbox will be initially checked.                                                                     |
+| `checked`            | `bool`                              | `false`     | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the checkbox.                                                                               |
+| `disabled`           | `bool`                              | `false`     | To manually set disable to the checkbox.                                                                             |
+| `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.                                                                    |
+| `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.                                                                                 |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the checkbox.                                                                                            |
+| `image`              | `ReactNode`                         | -           | The image to be displayed next to the label.                                                                         |
 
 ## Components
 
@@ -123,21 +123,22 @@ The `CheckboxLabel` component is used to create the label for the checkbox input
 
 The `CheckboxGroup` component is used to group multiple checkbox inputs together. It inherits all the properties of React Native's `View` component.
 
-| Property             | Type                                | Default   | Description                                                            |
-| -------------------- | ----------------------------------- | --------- | ---------------------------------------------------------------------- |
-| `value`              | string                              | -         | The value of the checkbox group.                                       |
-| `onChange`           | function                            | -         | The callback fired when any children Checkbox is checked or unchecked. |
-| `disabled`           | bool                                | -         | To manually set disable to the checkbox group.                         |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the checkbox group.                           |
-| `label`              | `string`                            | -         | The label to be displayed above the checkbox group.                    |
-| `helperText`         | `string`                            | -         | The helper text to be displayed below the checkbox group.              |
-| `helperIcon`         | `React.ComponentType`               | -         | The icon to be displayed next to the helper text.                      |
-| `invalidText`        | `string`                            | -         | The invalid text to be displayed below the checkbox group.             |
-| `validText`          | `string`                            | -         | The valid text to be displayed below the checkbox group.               |
-| `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                   |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the checkbox group.                                        |
-| `direction`          | `'row' \| 'column'`                 | `column`  | The direction of the checkbox group.                                   |
-| `gap`                | `string`                            | -         | The gap between the checkbox group items.                              |
+| Property             | Type                                | Default     | Description                                                            |
+| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------- |
+| `value`              | string                              | -           | The value of the checkbox group.                                       |
+| `onChange`           | function                            | -           | The callback fired when any children Checkbox is checked or unchecked. |
+| `disabled`           | bool                                | -           | To manually set disable to the checkbox group.                         |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the checkbox group.                           |
+| `label`              | `string`                            | -           | The label to be displayed above the checkbox group.                    |
+| `labelVariant`       | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                                         |
+| `helperText`         | `string`                            | -           | The helper text to be displayed below the checkbox group.              |
+| `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                      |
+| `invalidText`        | `string`                            | -           | The invalid text to be displayed below the checkbox group.             |
+| `validText`          | `string`                            | -           | The valid text to be displayed below the checkbox group.               |
+| `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                   |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the checkbox group.                                        |
+| `direction`          | `'row' \| 'column'`                 | `'column'`  | The direction of the checkbox group.                                   |
+| `gap`                | `string`                            | -           | The gap between the checkbox group items.                              |
 
 <UsageWrap>
     <Center>

package/src/components/Checkbox/Checkbox.figma.tsx

@@ -1,29 +1,26 @@
 import figma from '@figma/code-connect';
 import { Checkbox } from './Checkbox';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087%3A7316', {
+figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087-7316', {
   props: {
-    // These props were automatically mapped based on your linked code:
     disabled: figma.enum('State', {
       Disabled: true,
     }),
     checked: figma.boolean('Checked?'),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    label: figma.string('Label'),
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+      false: undefined,
     }),
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('Label'),
-    // "helperText": figma.string('Helper text'),
-    // "helperText": figma.boolean('Helper text?'),
-    // "validationText": figma.string('Validation text'),
-    // "image": figma.boolean('Image?')
+    validationText: figma.string('Validation text'),
   },
-  example: props => <Checkbox disabled={props.disabled} checked={props.checked} />,
+  example: props => (
+    <Checkbox
+      disabled={props.disabled}
+      checked={props.checked}
+      label={props.label}
+      helperText={props.helperText}
+      invalidText={props.validationText}
+    />
+  ),
 });

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

@@ -76,7 +76,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ checked: checkedArg = false, value, children, onChange, ...args }) => {
+  render: ({ checked: checkedArg = false, value, onChange, ...args }) => {
     const [checked, setChecked] = React.useState(checkedArg);
     useEffect(() => {
       setChecked(checkedArg);
@@ -95,7 +95,7 @@ export const Playground: Story = {
 };
 
 export const WithImage: Story = {
-  render: ({ children, ...args }) => (
+  render: ({ ...args }) => (
     <CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
       <Checkbox
         aria-label="Visa"

package/src/components/Checkbox/CheckboxGroup.figma.tsx

@@ -1,20 +1,53 @@
-import React from "react"
-import CheckboxGroup from "./CheckboxGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CheckboxGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+const props = {
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  direction: figma.enum('Direction', {
+    Column: undefined,
+    Row: 'row',
+  }),
+  tiles: figma.children('Checkbox Tile'),
+  checkboxes: figma.children('Checkbox'),
+};
 
 figma.connect(
   CheckboxGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3141%3A4275",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
   {
-    props: {},
-    example: (props) => <CheckboxGroup />,
-  },
-)
+    variant: {
+      Content: 'Checkbox Tile',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup
+        type="tile"
+        label={props.label}
+        helperText={props.helperText}
+        direction={props.direction}
+      >
+        {props.tiles}
+      </CheckboxGroup>
+    ),
+  }
+);
+
+figma.connect(
+  CheckboxGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
+  {
+    variant: {
+      Content: 'Checkbox',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup label={props.label} helperText={props.helperText} direction={props.direction}>
+        {props.checkboxes}
+      </CheckboxGroup>
+    ),
+  }
+);

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

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { space } from '../../tokens';
 import { ViewProps } from 'react-native';
+import { space } from '../../tokens';
 
 interface CheckboxGroupProps extends ViewProps {
   disabled?: boolean;
@@ -9,6 +9,7 @@ interface CheckboxGroupProps extends ViewProps {
   readonly?: boolean;
   validationStatus?: 'valid' | 'invalid' | 'initial';
   label?: string;
+  labelVariant?: 'heading' | 'body';
   helperText?: string;
   showValidationIcon?: boolean;
   invalidText?: string;

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -14,6 +14,7 @@ const CheckboxGroup = ({
   readonly,
   validationStatus,
   label,
+  labelVariant = 'body',
   helperText,
   invalidText,
   validText,
@@ -50,7 +51,11 @@ const CheckboxGroup = ({
       >
         {showHeader && (
           <CheckboxGroupTextContent>
-            {!!label && <Label disabled={disabled}>{label}</Label>}
+            {!!label && (
+              <Label disabled={disabled} variant={labelVariant}>
+                {label}
+              </Label>
+            )}
             {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
             {validationStatus === 'invalid' && !!invalidText && (
               <Helper

package/src/components/Checkbox/CheckboxTileRoot.figma.tsx

@@ -1,32 +1,29 @@
-import React from "react"
-import CheckboxTileRoot from "./CheckboxTileRoot"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
 
 figma.connect(
-  CheckboxTileRoot,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4961%3A23797",
+  Checkbox,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4961-23797&m=dev',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "label": figma.string('Label'),
-      // "image": figma.boolean('Image?'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid",
-      //   "Focus": "focus"
-      // }),
-      // "checked": figma.boolean('Checked?')
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      checked: figma.boolean('Checked?'),
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+        false: undefined,
+      }),
     },
-    example: (props) => <CheckboxTileRoot />,
-  },
-)
+    example: props => (
+      <Checkbox
+        type="tile"
+        disabled={props.disabled}
+        checked={props.checked}
+        label={props.label}
+        helperText={props.helperText}
+      />
+    ),
+  }
+);

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

@@ -16,6 +16,7 @@ An input specialised for monetary amounts. It shows a currency symbol prefix and
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
+- [Examples](#examples)
 - [States](#states)
 - [Formatting](#formatting)
 - [Accessibility](#accessibility)
@@ -48,20 +49,62 @@ const MyComponent = () => {
 
 When using `CurrencyInput`, the component inherits React Native TextInput props (except `children`). In addition, it supports:
 
-| Prop                | Type                                | Default     | Description                                                                                                               |
-| ------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- |
-| validationStatus    | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation styling state                                                                                                  |
-| disabled            | boolean                             | `false`     | Disables the input                                                                                                        |
-| readonly            | boolean                             | `false`     | Makes the input read-only                                                                                                 |
-| focused             | boolean                             | `false`     | Forces the focused visual state                                                                                           |
-| inBottomSheet       | boolean                             | `false`     | Use BottomSheetTextInput when true                                                                                        |
-| placeholder         | string                              | `'0.00'`    | Placeholder text                                                                                                          |
-| disableGroupSeparator | boolean                             | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
+| Prop                  | Type                                             | Default     | Description                                                                                                                                    |
+| --------------------- | ------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| validationStatus      | `'initial' \| 'valid' \| 'invalid'`              | `'initial'` | Validation styling state                                                                                                                       |
+| onChangeText          | `(e: { nativeEvent: { text: string } }) => void` | -           | Callback when the text changes                                                                                                                 |
+| value                 | `string`                                         | -           | The value of the input                                                                                                                         |
+| label                 | `string`                                         | -           | The label for the input                                                                                                                        |
+| labelVariant          | `'heading' \| 'body'`                            | `'body'`    | The variant of the label text                                                                                                                  |
+| helperText            | `string`                                         | -           | Helper text to display below the input                                                                                                         |
+| helperIcon            | `ComponentType`                                  | -           | Icon to display alongside the helper text                                                                                                      |
+| required              | `boolean`                                        |
+| disabled              | `boolean`                                        | `false`     | Disables the input                                                                                                                             |
+| readonly              | `boolean`                                        | `false`     | Makes the input read-only                                                                                                                      |
+| focused               | `boolean`                                        | `false`     | Forces the focused visual state                                                                                                                |
+| inBottomSheet         | `boolean`                                        | `false`     | Use BottomSheetTextInput when true                                                                                                             |
+| placeholder           | `string`                                         | `'0.00'`    | Placeholder text                                                                                                                               |
+| 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.
 
 ## Examples
 
+## With Label and Helper Text
+
+The `CurrencyInput` component can display a label and helper text by passing the appropriate props.
+
+<UsageWrap>
+  <Center>
+    <CurrencyInput
+      label="Amount"
+      helperText="Enter the amount in GBP"
+      placeholder="0.00"
+      onChange={() => console.log('###')}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <CurrencyInput
+      label="Amount"
+      helperText="Enter the amount in GBP"
+      placeholder="0.00"
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `CurrencyInput` component can be used with the `FormField` component to create a custom input field.

package/src/components/CurrencyInput/CurrencyInput.figma.tsx

@@ -1,56 +1,72 @@
-import React from "react"
-import CurrencyInput from "./CurrencyInput"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CurrencyInput, FormField } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const props = {
+  placeholder: figma.string('Value'),
+  value: figma.string('Value'),
+  label: figma.string('Label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  invalidText: figma.enum('State', {
+    Default: undefined,
+    Invalid: figma.string('Validation'),
+  }),
+  validationStatus: figma.enum('State', {
+    Default: undefined,
+    Invalid: 'invalid',
+  }),
+  // "labelVariant": figma.enum('Label variant', {
+  //   "Body": "body",
+  //   "Heading": "heading"
+  // })
+};
+
+const onChangeHandler = () => {
+  // Placeholder for onChange handler
+};
+
+const value = 'some value';
+
+figma.connect(
+  CurrencyInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
+  {
+    props,
+    variant: {
+      'Value type': 'Filled',
+    },
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput value={props.value} onChange={onChangeHandler} />
+      </FormField>
+    ),
+  }
+);
 
 figma.connect(
   CurrencyInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
   {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      focused: figma.boolean("Focus?"),
-      placeholder: figma.string("Label"),
-      autoFocus: figma.boolean("Focus?"),
-      defaultValue: figma.string("Value"),
-      value: figma.string("Value"),
-      focusable: figma.boolean("Focus?"),
-      hasTVPreferredFocus: figma.boolean("Focus?"),
-      // No matching props could be found for these Figma properties:
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "label": figma.string('Label'),
-      // "value": figma.string('Value'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid"
-      // }),
-      // "valueType": figma.enum('Value type', {
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // }),
-      // "labelVariant": figma.enum('Label variant', {
-      //   "Body": "body",
-      //   "Heading": "heading"
-      // })
+    props,
+    variant: {
+      'Value type': 'Placeholder',
     },
-    example: (props) => (
-      <CurrencyInput
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        value={props.value}
-        focusable={props.focusable}
-        hasTVPreferredFocus={props.hasTVPreferredFocus}
-      />
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput placeholder={props.placeholder} value={value} onChange={onChangeHandler} />
+      </FormField>
     ),
-  },
-)
+  }
+);

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

@@ -12,6 +12,12 @@ export interface CurrencyInputBaseProps {
   required?: boolean;
   /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
   disableGroupSeparator?: boolean;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: React.ComponentType;
+  validText?: string;
+  invalidText?: string;
 }
 
 export type CurrencyInputProps = CurrencyInputBaseProps &

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

@@ -22,6 +22,35 @@ const meta = {
       description: 'The validation status',
       defaultValue: 'initial',
     },
+    label: {
+      control: 'text',
+      description: 'The label for the CurrencyInput',
+      defaultValue: 'Currency Input Label',
+    },
+    helperText: {
+      control: 'text',
+      description: 'The helper text for the CurrencyInput',
+      defaultValue: 'Supporting text',
+    },
+    labelVariant: {
+      control: 'radio',
+      options: ['heading', 'body'],
+      description: 'The label text variant',
+    },
+    helperIcon: {
+      control: 'object',
+      description: 'The helper icon component',
+    },
+    validText: {
+      control: 'text',
+      description: 'The valid text for the CurrencyInput',
+      defaultValue: 'Valid text',
+    },
+    invalidText: {
+      control: 'text',
+      description: 'The invalid text for the CurrencyInput',
+      defaultValue: 'Invalid text',
+    },
     disabled: {
       control: 'boolean',
       description: 'Disable the input',
@@ -107,7 +136,7 @@ export const States: Story = {
           <CurrencyInput disabled />
         </VariantTitle>
         <VariantTitle title="Readonly">
-          <CurrencyInput readonly value="11666"/>
+          <CurrencyInput readonly value="11666" />
         </VariantTitle>
         <VariantTitle title="Disable auto format thousands">
           <CurrencyInput disableGroupSeparator value="1234.56" />

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -2,7 +2,6 @@ import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
 import type CurrencyInputProps from './CurrencyInput.props';
 
@@ -13,17 +12,19 @@ const CurrencyInput = ({
   readonly,
   placeholder,
   inBottomSheet = false,
-  required,
+  required = true,
   disableGroupSeparator = false,
   value,
   onChangeText,
+  label,
+  labelVariant = 'body',
+  helperText,
+  helperIcon,
+  validText,
+  invalidText,
   ref,
   ...rest
 }: CurrencyInputProps) => {
-  const formFieldContext = useFormFieldContext();
-  const { disabled: formFieldDisabled } = formFieldContext;
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-
   const defaultFormat = '0.00';
   const getPlaceholder = placeholder ?? defaultFormat;
 
@@ -41,11 +42,18 @@ const CurrencyInput = ({
 
   return (
     <Input
-      validationStatus={validationStatusFromContext}
-      disabled={formFieldDisabled ?? disabled}
+      validationStatus={validationStatus}
+      disabled={disabled}
       readonly={readonly}
       focused={focused}
+      required={required}
       style={styles.wrap}
+      label={label}
+      labelVariant={labelVariant}
+      helperText={helperText}
+      helperIcon={helperIcon}
+      validText={validText}
+      invalidText={invalidText}
     >
       <InputSlot>
         <DetailText size="4xl" style={styles.text} accessible={false}>