@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/src/components/Badge/BadgeText.tsx

@@ -4,10 +4,10 @@ import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
 
 const BadgeText = ({ children, style, ...props }: TextProps) => {
-  const { variant, colorScheme } = useBadgeContext();
+  const { variant, colorScheme, size } = useBadgeContext();
   styles.useVariants({ variant, colorScheme });
   return (
-    <BodyText {...props} size="md" weight="semibold" style={[styles.text, style]}>
+    <BodyText {...props} size={size} weight="semibold" style={[styles.text, style]}>
       {children}
     </BodyText>
   );
@@ -30,91 +30,89 @@ const styles = StyleSheet.create(theme => ({
         insurance: {},
         cashback: {},
         pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {
+        emphasis: {
+          color: theme.color.text.primary,
+        },
+        subtle: {
           color: theme.color.text.primary,
         },
         outline: {},
       },
     },
     compoundVariants: [
-      // Solid
+      // Emphasis
       {
         colorScheme: 'info',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           color: theme.color.feedback.info.foreground.default,
         },
       },
       {
         colorScheme: 'danger',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           color: theme.color.feedback.danger.foreground.default,
         },
       },
       {
         colorScheme: 'positive',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           color: theme.color.feedback.positive.foreground.default,
         },
       },
       {
         colorScheme: 'warning',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           color: theme.color.feedback.warning.foreground.default,
         },
       },
       {
         colorScheme: 'functional',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           color: theme.color.feedback.functional.foreground.default,
         },
       },
+      // Subtle
       {
-        colorScheme: 'energy',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'broadband',
-        variant: 'solid',
+        colorScheme: 'info',
+        variant: 'subtle',
         styles: {
-          color: theme.color.text.primary,
+          color: theme.color.feedback.info.foreground.default,
         },
       },
       {
-        colorScheme: 'mobile',
-        variant: 'solid',
+        colorScheme: 'danger',
+        variant: 'subtle',
         styles: {
-          color: theme.color.text.primary,
+          color: theme.color.feedback.danger.foreground.default,
         },
       },
       {
-        colorScheme: 'insurance',
-        variant: 'solid',
+        colorScheme: 'positive',
+        variant: 'subtle',
         styles: {
-          color: theme.color.text.primary,
+          color: theme.color.feedback.positive.foreground.default,
         },
       },
       {
-        colorScheme: 'cashback',
-        variant: 'solid',
+        colorScheme: 'warning',
+        variant: 'subtle',
         styles: {
-          color: theme.color.text.primary,
+          color: theme.color.feedback.warning.foreground.default,
         },
       },
       {
-        colorScheme: 'pig',
-        variant: 'solid',
+        colorScheme: 'functional',
+        variant: 'subtle',
         styles: {
-          color: theme.color.text.primary,
+          color: theme.color.feedback.functional.foreground.default,
         },
       },
       // Outline

package/src/components/Button/ButtonGroupRoot.tsx

@@ -1,5 +1,6 @@
-import { type StyleProp, type ViewStyle, type ViewProps, View } from 'react-native';
+import { type StyleProp, type ViewProps, type ViewStyle, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { SpacingValues } from '../../types';
 
 const ButtonGroupRoot = ({
   children,
@@ -12,7 +13,7 @@ const ButtonGroupRoot = ({
   flexDirection?: ViewStyle['flexDirection'];
   reversed?: boolean;
   attached?: boolean;
-  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
 }) => {
   let direction = flexDirection;
   if (reversed) {
@@ -41,6 +42,12 @@ const styles = StyleSheet.create(theme => ({
   text: {
     variants: {
       space: {
+        none: {
+          gap: theme.layout.mobile.spacing.none,
+        },
+        '2xs': {
+          gap: theme.layout.mobile.spacing['2xs'],
+        },
         xs: {
           gap: theme.layout.mobile.spacing.xs,
         },
@@ -56,6 +63,9 @@ const styles = StyleSheet.create(theme => ({
         xl: {
           gap: theme.layout.mobile.spacing.xl,
         },
+        '2xl': {
+          gap: theme.layout.mobile.spacing['2xl'],
+        },
       },
       attached: {
         true: {

package/src/components/Button/ButtonRoot.tsx

@@ -201,6 +201,7 @@ const styles = StyleSheet.create(theme => ({
         colorScheme: 'affirmative',
         styles: {
           backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
+          borderColor: theme.color.interactive.affirmative.border.strong,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,

package/src/components/Card/Card.docs.mdx

@@ -57,7 +57,7 @@ const MyComponent = () => (
 | selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
 | onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | -                 |
 | disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
-| space          | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                                                                             | The space between the content.             | `none`            |
+| space          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
 | alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
 | justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                     | The justify content of the flex container. | `flex-start`      |
 | flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                       | The wrap of the flex container.            | `nowrap`          |

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

@@ -1,5 +1,5 @@
 import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 
 interface CardProps extends PressableProps {
   variant?: 'emphasis' | 'subtle';
@@ -15,7 +15,7 @@ interface CardProps extends PressableProps {
     | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
-  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
   alignItems?: ViewStyle['alignItems'];
   justifyContent?: ViewStyle['justifyContent'];
   flexDirection?: ViewStyle['flexDirection'];

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

@@ -1,17 +1,17 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Checkbox.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Box,
+  Center,
   Checkbox,
   CheckboxGroup,
-  CheckboxTile,
   CheckboxIndicator,
   CheckboxLabel,
-  Center,
-  Box,
+  CheckboxTile,
   FormField,
 } from '../../';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Checkbox.stories';
 
 <Meta title="Forms / Checkbox" />
 
@@ -33,10 +33,12 @@ Whether you're building a simple form or a complex data collection system, the C
   - [`CheckboxIcon`](#checkboxicon)
   - [`CheckboxLabel`](#checkboxlabel)
   - [`CheckboxGroup`](#checkboxgroup)
+  - [`CheckboxImage`](#checkboximage)
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
   - [`CheckboxTile` component](#checkboxtile-component)
+  - [`CheckboxImage` component](#checkboximage-component)
   - [`CheckboxGroup` component](#checkboxgroup-component)
 
 ## Playground
@@ -89,6 +91,7 @@ const MyComponent = () => {
 | `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`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                                         |
 
 ## Components
 
@@ -205,6 +208,10 @@ const MyComponent = () => {
 | `disabled`         | `bool`                              | `false` | To manually set disable to the checkbox.                               |
 | `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -       | The validation status of the checkbox group.                           |
 
+### `CheckboxImage`
+
+The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
+
 ## Variants
 
 <Canvas of={Stories.Variants} />
@@ -322,6 +329,37 @@ const MyComponent = () => {
 };
 ```
 
+### `CheckboxImage` component
+
+The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
+
+<Canvas of={Stories.WithImage} />
+
+```tsx
+import { Checkbox } from '@utilitywarehouse/native-ui';
+import visaLogo from '../../../assets/visa.png';
+import mastercardLogo from '../../../assets/mastercard.png';
+
+const MyComponent = () => {
+  return (
+    <CheckboxGroup>
+      <Checkbox
+        value="visa"
+        aria-label="Visa"
+        label="Visa"
+        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+      <Checkbox
+        value="mastercard"
+        aria-label="Mastercard"
+        label="Mastercard"
+        image={{ source: mastercardLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+    </CheckboxGroup>
+  );
+};
+```
+
 ### `CheckboxGroup` component
 
 The `CheckboxGroup` component is used to group multiple `Checkbox` components together.

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

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 
 type CheckboxBaseProps = {
   onChange?: (isSelected: boolean) => void;
@@ -26,6 +26,7 @@ type CheckboxWithChildrenProps = {
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
+  image?: never;
 } & CheckboxBaseProps;
 
 type CheckboxWithoutChildrenProps = {
@@ -36,6 +37,7 @@ type CheckboxWithoutChildrenProps = {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
+  image?: ImageProps;
 } & CheckboxBaseProps;
 
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;

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

@@ -1,6 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
+import { ImageSourcePropType } from 'react-native';
 import { Checkbox, CheckboxGroup } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
+import bankLogo from '../../../docs/assets/bank-logo.png';
+import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 
 const meta = {
@@ -91,6 +94,39 @@ export const Playground: Story = {
   },
 };
 
+export const WithImage: Story = {
+  render: ({ children, ...args }) => (
+    <CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
+      <Checkbox
+        aria-label="Visa"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="checkbox-1"
+        {...args}
+        value="visa"
+        label="Visa"
+        image={{ source: bankLogo1 as ImageSourcePropType, style: { width: 40, height: 24 } }}
+      />
+      <Checkbox
+        aria-label="Mastercard"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="checkbox-2"
+        {...args}
+        value="mastercard"
+        label="Mastercard"
+        image={{
+          source: bankLogo as ImageSourcePropType,
+          style: { width: 40, height: 24 },
+          resizeMode: 'contain',
+        }}
+      />
+    </CheckboxGroup>
+  ),
+};
+
 export const Variants: Story = {
   render: () => {
     const [values, setValues] = React.useState(['Label 1']);

package/src/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,16 @@
 import { createCheckbox } from '@gluestack-ui/checkbox';
-import StyledCheckbox from './CheckboxRoot';
-import StyledCheckboxIndicator from './CheckboxIndicator';
-import StyledCheckboxIcon from './CheckboxIcon';
-import StyledCheckboxLabel from './CheckboxLabel';
-import StyledCheckboxGroup from './CheckboxGroupRoot';
-import CheckboxProps from './Checkbox.props';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
+import CheckboxProps from './Checkbox.props';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
-import { useFormFieldContext } from '../FormField';
-import CheckboxTileRoot from './CheckboxTileRoot';
+import StyledCheckboxGroup from './CheckboxGroupRoot';
+import StyledCheckboxIcon from './CheckboxIcon';
+import CheckboxImage from './CheckboxImage';
+import StyledCheckboxIndicator from './CheckboxIndicator';
+import StyledCheckboxLabel from './CheckboxLabel';
+import StyledCheckbox from './CheckboxRoot';
 import CheckboxTextContent from './CheckboxTextContent';
+import CheckboxTileRoot from './CheckboxTileRoot';
 
 const CheckboxComponent = createCheckbox({
   Root: StyledCheckbox,
@@ -41,6 +42,7 @@ const Checkbox = ({
   validationStatus: validation,
   showValidationIcon,
   type = 'default',
+  image,
   ...props
 }: CheckboxProps) => {
   const { validationStatus: fieldValidationStatus } = useFormFieldContext();
@@ -55,6 +57,7 @@ const Checkbox = ({
       <CheckboxIndicator>
         <CheckboxIcon />
       </CheckboxIndicator>
+      {image ? <CheckboxImage {...image} /> : null}
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
@@ -96,6 +99,6 @@ CheckboxTile.displayName = 'CheckboxTile';
 
 Checkbox.displayName = 'Checkbox';
 
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 
 export default Checkbox;

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -20,7 +20,7 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.color.icon.inverted,
+    color: theme.components.checkbox.checked.icon.color,
   },
 }));
 

package/src/components/Checkbox/CheckboxImage.tsx

@@ -0,0 +1,9 @@
+import { Image, ImageProps } from 'react-native';
+
+const CheckboxImage = ({ source, style, ...props }: ImageProps) => (
+  <Image source={source} style={style} {...props} />
+);
+
+CheckboxImage.displayName = 'CheckboxImage';
+
+export default CheckboxImage;

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.checkbox.gap,
     padding: theme.components.checkbox.tile.padding,
     borderWidth: theme.components.checkbox.tile.borderWidth,
-    borderColor: theme.color.border.subtle,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.checkbox.tile.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
     variants: {

package/src/components/Checkbox/index.ts

@@ -1,11 +1,12 @@
 export {
   default as Checkbox,
+  CheckboxIcon,
   CheckboxIndicator,
   CheckboxLabel,
-  CheckboxIcon,
   CheckboxTile,
 } from './Checkbox';
+export type { default as CheckboxProps } from './Checkbox.props';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';
-export type { default as CheckboxProps } from './Checkbox.props';

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

@@ -0,0 +1,120 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Center, CurrencyInput, FormField } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './CurrencyInput.stories';
+
+<Meta title="Forms / Currency Input" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/pjuYVErQWaAvs8rCAVgPKX/Motion-Tokens?node-id=2161-1336" />
+
+# Currency Input
+
+An input specialised for monetary amounts. It shows a currency symbol prefix and uses a decimal keypad where supported.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [States](#states)
+- [Formatting](#formatting)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <CurrencyInput placeholder="0.00" />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  return (
+    <CurrencyInput value={value} onChange={e => setValue(e.nativeEvent.text)} placeholder="0.00" />
+  );
+};
+```
+
+## Props
+
+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                                                                                                          |
+| autoFormatThousands | boolean                             | `false`     | Automatically inserts thousand separators while the user types _(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 `FormField`
+
+The `CurrencyInput` component can be used with the `FormField` component to create a custom input field.
+For more information on the `FormField` component view the [docs here](/docs/components-form-field--docs).
+
+<UsageWrap>
+  <Center>
+    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
+      <CurrencyInput onChange={() => console.log('###')} />
+    </FormField>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { FormField, CurrencyInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
+      <CurrencyInput onChange={handleChange} value={value} />
+    </FormField>
+  );
+};
+```
+
+## States
+
+<Canvas of={Stories.States} />
+
+## Formatting
+
+Enable automatic thousand separator formatting by setting `autoFormatThousands`.
+
+<Canvas of={Stories.AutoFormatThousands} />
+
+```tsx
+<CurrencyInput autoFormatThousands value="1234567.89" /> // displays 1,234,567.89
+```
+
+Notes:
+
+- Only digits, an optional leading minus and a single decimal point are formatted.
+- Formatting is applied as you type; caret will move to the end (standard RN behaviour when programmatically updating value).
+- Provide a controlled `value` if you need to manipulate or strip commas before persisting.
+
+## Accessibility
+
+The component uses a standard TextInput field and supports:
+
+- Screen readers (VoiceOver/TalkBack)
+- `aria-disabled`, `aria-required`, `aria-invalid` via underlying Input
+- Decimal keypad and selection/cursor colors aligned with theme

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

@@ -0,0 +1,19 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+
+export interface CurrencyInputBaseProps {
+  disabled?: boolean;
+  validationStatus?: 'initial' | 'valid' | 'invalid';
+  readonly?: boolean;
+  focused?: boolean;
+  placeholder?: string;
+  inBottomSheet?: boolean;
+  required?: boolean;
+  /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
+  autoFormatThousands?: boolean;
+}
+
+export type CurrencyInputProps = CurrencyInputBaseProps &
+  Omit<TextInputProps, 'children'> &
+  ViewProps;
+
+export default CurrencyInputProps;