@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/src/tokens/layout.ts

@@ -21,11 +21,14 @@ export const mobile = {
     margin: 16,
   },
   spacing: {
-    lg: 20,
-    md: 16,
-    sm: 12,
-    xl: 28,
-    xs: 8,
+    '2xl': 28,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 20,
+    xs: 4,
   },
 } as const;
 
@@ -48,11 +51,14 @@ export const tablet = {
     margin: 32,
   },
   spacing: {
-    lg: 24,
-    md: 16,
-    sm: 12,
-    xl: 28,
-    xs: 8,
+    '2xl': 28,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 24,
+    xs: 4,
   },
 } as const;
 
@@ -75,11 +81,14 @@ export const desktop = {
     margin: 32,
   },
   spacing: {
-    lg: 24,
-    md: 16,
-    sm: 12,
-    xl: 40,
-    xs: 8,
+    '2xl': 40,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 24,
+    xs: 4,
   },
 } as const;
 

package/src/tokens/motion.ts

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  duration: {
+    '100': 130,
+    '200': 160,
+    '300': 190,
+    '400': 220,
+    '500': 250,
+    '600': 300,
+    '700': 350,
+    '800': 400,
+    '900': 450,
+    '1000': 500,
+  },
+  ease: {
+    in: 'cubic-bezier(0.42, 0, 1, 1)',
+    inOut: 'cubic-bezier(0, 0, 1, 1)',
+    out: 'cubic-bezier(0.19, 0.91, 0.38, 1)',
+  },
+} as const;

package/src/tokens/primitive.ts

@@ -82,6 +82,25 @@ export default {
     '1100': 72,
     '1200': 90,
   },
+  motion: {
+    duration: {
+      '100': 130,
+      '200': 160,
+      '300': 190,
+      '400': 220,
+      '500': 250,
+      '600': 300,
+      '700': 350,
+      '800': 400,
+      '900': 450,
+      '1000': 500,
+    },
+    ease: {
+      in: 'cubic-bezier(0.42, 0, 1, 1)',
+      inOut: 'cubic-bezier(0, 0, 1, 1)',
+      out: 'cubic-bezier(0.19, 0.91, 0.38, 1)',
+    },
+  },
   space: {
     '0': 0,
     '25': 2,

package/src/tokens/semantic-dark.ts

@@ -4,7 +4,7 @@
 
 export default {
   background: {
-    brand: '#996cda',
+    brand: '#7a42c8',
     primary: '#191917',
     secondary: '#232323',
   },
@@ -16,56 +16,56 @@ export default {
     danger: {
       border: '#ff7964',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#521a16',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
       border: '#b2afae',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#b2afae',
       },
       surface: {
-        default: '#888888',
-        subtle: '#232323',
+        default: '#919191',
+        subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#6bb0ff',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#1c6cd4',
-        subtle: '#042455',
+        default: '#6bb0ff',
+        subtle: '#bcddff',
       },
     },
     positive: {
       border: '#58ca93',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#0f834a',
-        subtle: '#033d21',
+        default: '#36bf7d',
+        subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#ff9639',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#cb5b00',
-        subtle: '#6b2d00',
+        default: '#ff8010',
+        subtle: '#ffcca8',
       },
     },
   },
@@ -80,7 +80,7 @@ export default {
   interactive: {
     affirmative: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#58ca93',
       },
       foreground: {
@@ -116,7 +116,7 @@ export default {
     },
     destructive: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#ff7964',
       },
       foreground: {
@@ -137,14 +137,14 @@ export default {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#ebebeb',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -156,15 +156,15 @@ export default {
           active: '#4c4c4c',
           hover: '#3a3837',
           inverted: {
-            active: '#d3d3d3',
-            hover: '#ebebeb',
+            active: '#3a3837',
+            hover: '#3f3f3f',
           },
         },
       },
     },
     highlight: {
       border: {
-        strong: '#f7f7f7',
+        strong: '#101010',
       },
       foreground: {
         strong: '#101010',
@@ -245,7 +245,9 @@ export default {
     },
   },
   text: {
-    inverted: '#191917',
+    affirmative: '#58ca93',
+    brand: '#af90de',
+    inverted: '#fcfbf2',
     primary: '#ebebeb',
     secondary: '#b2afae',
   },

package/src/tokens/semantic-light.ts

@@ -16,55 +16,55 @@ export default {
     danger: {
       border: '#de2612',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#de2612',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#ffccc5',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
-      border: '#888888',
+      border: '#5b5b5b',
       foreground: {
-        default: '#fcfbf2',
-        subtle: '#888888',
+        default: '#101010',
+        subtle: '#5b5b5b',
       },
       surface: {
-        default: '#888888',
+        default: '#919191',
         subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#1c6cd4',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#1c6cd4',
       },
       surface: {
-        default: '#1c6cd4',
+        default: '#6bb0ff',
         subtle: '#bcddff',
       },
     },
     positive: {
       border: '#0f834a',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#0f834a',
       },
       surface: {
-        default: '#0f834a',
+        default: '#36bf7d',
         subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#be5400',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#be5400',
       },
       surface: {
-        default: '#be5400',
+        default: '#ff8010',
         subtle: '#ffcca8',
       },
     },
@@ -137,14 +137,14 @@ export default {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#101010',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -245,8 +245,10 @@ export default {
     },
   },
   text: {
+    affirmative: '#0f834a',
+    brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
-    secondary: '#888888',
+    secondary: '#5b5b5b',
   },
 } as const;

package/src/types/values.ts

@@ -1,5 +1,5 @@
 import { AnimatableNumericValue, DimensionValue } from 'react-native';
-import { lightTheme } from '../core/themes';
+import { lightTheme, themes } from '../core/themes';
 import color from '../tokens/color';
 
 export type addPrefixToObject<T, P extends string> = {
@@ -80,3 +80,5 @@ export type BordeWidthValue =
   | undefined;
 
 export type OpacityValue = AnimatableNumericValue | undefined;
+
+export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['space'];

package/src/utils/formatThousands.ts

@@ -0,0 +1,14 @@
+const formatThousands = (value: string) => {
+  if (!value) return value;
+  // Remove existing commas first
+  const cleaned = value.replace(/,/g, '');
+  // Allow leading minus, digits, optional decimal part
+  const match = cleaned.match(/^(-)?(\d*)(\.\d*)?$/);
+  if (!match) return value; // If it doesn't match a numeric pattern, return original (lets user continue typing)
+  const [, sign = '', intPart = '', decimalPart = ''] = match;
+  if (!intPart) return sign + intPart + decimalPart; // nothing to format yet
+  const withCommas = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return sign + withCommas + (decimalPart || '');
+};
+
+export default formatThousands;

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';

package/docs/components/AdvancedRadioExample.tsx

@@ -1,126 +0,0 @@
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import {
-  Badge,
-  BodyText,
-  Box,
-  Heading,
-  Radio,
-  RadioGroup,
-  RadioIcon,
-  RadioIndicator,
-  type RadioProps as NativeUIRadioProps,
-} from '../../src';
-
-import { TextProps, ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-interface RadioProps {
-  currentValue: string;
-}
-
-const styles = StyleSheet.create(({ colorMode, color, borderRadius, borderWidth, space }) => ({
-  radio: {
-    borderWidth: borderWidth[2],
-    borderColor: colorMode === 'light' ? color.grey[500] : color.grey[700],
-    borderRadius: borderRadius.xl,
-    padding: space[200],
-    variants: {
-      checked: {
-        true: {
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  indicator: {
-    variants: {
-      checked: {
-        true: {
-          backgroundColor: colorMode === 'light' ? color.green[500] : color.green[700],
-          borderColor: colorMode === 'light' ? color.green[500] : color.green[700],
-        },
-      },
-    },
-  },
-  heading: {
-    marginBottom: space[100],
-  },
-  badge: {
-    marginRight: space[200],
-    alignSelf: 'flex-end',
-  },
-}));
-
-const CustomRadio = ({
-  children,
-  currentValue,
-  ...props
-}: RadioProps &
-  Omit<
-    NativeUIRadioProps,
-    'label' | 'helperText' | 'helperIcon' | 'invalidText' | 'validText' | 'showValidationIcon'
-  >) => {
-  styles.useVariants({ checked: currentValue === props.value });
-  return (
-    <Radio style={styles.radio} {...props}>
-      <Box flexDirection="row" flex={1}>
-        <Box pr="200" flex={1}>
-          {children}
-        </Box>
-        <RadioIndicator style={styles.indicator}>
-          <RadioIcon as={TickSmallIcon} color="white" />
-        </RadioIndicator>
-      </Box>
-    </Radio>
-  );
-};
-
-const BulletListItem = ({ children }: { children: TextProps['children'] }) => (
-  <BodyText>
-    {'\u2022'} {children}
-  </BodyText>
-);
-
-const BulletList = ({ children }: { children: ViewProps['children'] }) => (
-  <Box pl="200" gap="100">
-    {children}
-  </Box>
-);
-
-const AdvancedRadioExample = () => {
-  const [value, setValue] = useState('Option 1');
-
-  const handleChange = (val: string) => setValue(val);
-
-  return (
-    <RadioGroup onChange={handleChange} value={value} gap="200">
-      <Box>
-        <Badge colorScheme={value === 'Option 1' ? 'green' : 'grey'} flatBase style={styles.badge}>
-          Recommended
-        </Badge>
-        <CustomRadio value="Option 1" currentValue={value}>
-          <Heading size="md" style={styles.heading}>
-            Instant bank transfer
-          </Heading>
-          <BulletList>
-            <BulletListItem>Receive your money instantly</BulletListItem>
-            <BulletListItem>No fees</BulletListItem>
-            <BulletListItem>Available 24/7</BulletListItem>
-          </BulletList>
-        </CustomRadio>
-      </Box>
-      <CustomRadio value="Option 2" currentValue={value}>
-        <Heading size="md" style={styles.heading}>
-          Debit card payment
-        </Heading>
-        <BulletList>
-          <BulletListItem>£0.35 fee</BulletListItem>
-          <BulletListItem>Available 24/7</BulletListItem>
-        </BulletList>
-      </CustomRadio>
-    </RadioGroup>
-  );
-};
-
-export default AdvancedRadioExample;