@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/src/hooks/useTheme.ts

@@ -1,8 +1,9 @@
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { useUnistyles } from 'react-native-unistyles';
+import { AppThemes } from '../types';
 
 const useTheme = () => {
-  const theme = UnistylesRuntime.getTheme();
-  return theme;
+  const { theme } = useUnistyles();
+  return theme as AppThemes['light'] | AppThemes['dark'];
 };
 
 export default useTheme;

package/src/tokens/color.ts

@@ -473,13 +473,13 @@ export const light = {
     brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
-    secondary: '#888888',
+    secondary: '#5b5b5b',
   },
 } as const;
 
 export const dark = {
   background: {
-    brand: '#996cda',
+    brand: '#7a42c8',
     primary: '#191917',
     secondary: '#232323',
   },
@@ -555,7 +555,7 @@ export const dark = {
   interactive: {
     affirmative: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#58ca93',
       },
       foreground: {
@@ -591,7 +591,7 @@ export const dark = {
     },
     destructive: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#ff7964',
       },
       foreground: {
@@ -639,7 +639,7 @@ export const dark = {
     },
     highlight: {
       border: {
-        strong: '#f7f7f7',
+        strong: '#101010',
       },
       foreground: {
         strong: '#101010',
@@ -719,7 +719,7 @@ export const dark = {
   text: {
     affirmative: '#58ca93',
     brand: '#af90de',
-    inverted: '#191917',
+    inverted: '#fcfbf2',
     primary: '#ebebeb',
     secondary: '#b2afae',
   },

package/src/tokens/components/dark/alert.ts

@@ -6,6 +6,19 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
+  focus: '#101010',
   gap: 8,
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   padding: 14,
 } as const;

package/src/tokens/components/dark/checkbox.ts

@@ -7,6 +7,9 @@ export default {
   borderWidth: 2,
   checked: {
     backgroundColor: '#ebebeb',
+    icon: {
+      color: '#101010',
+    },
   },
   gap: 8,
   group: {

package/src/tokens/components/dark/date-picker.ts

@@ -21,6 +21,7 @@ export default {
     item: {
       borderRadius: 8,
       minWidth: 32,
+      rangeBackground: '#191919',
       roundelBackgroundColorInverted: '#fcfbf2',
       roundelHeight: 6,
       roundelWidth: 6,

package/src/tokens/components/dark/icon-button.ts

@@ -3,6 +3,13 @@
  */
 
 export default {
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
   borderRadius: 8,
   md: {
     height: 48,

package/src/tokens/components/dark/illustrations.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  mode: 'dark',
+} as const;

package/src/tokens/components/dark/index.ts

@@ -22,6 +22,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -34,6 +35,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

package/src/tokens/components/dark/link.ts

@@ -3,6 +3,11 @@
  */
 
 export default {
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   color: '#ebebeb',
   colorActive: '#b2afae',
   colorHover: '#d3d3d3',

package/src/tokens/components/dark/progress-bar.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  barColor: '#4c473d',
+  circular: {
+    md: {
+      bar: {
+        width: 12,
+      },
+      gap: 0,
+      height: 140,
+      label: {
+        fontFamily: 'DM Sans',
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 24,
+      },
+    },
+    sm: {
+      barWidth: 8,
+      height: 80,
+    },
+  },
+  linear: {
+    bar: {
+      borderRadius: 9999,
+      height: 12,
+    },
+    gap: 8,
+    label: {
+      gap: 8,
+    },
+  },
+  progress: {
+    dangerColor: '#ff634a',
+    defaultColor: '#c6b5e2',
+    successColor: '#36bf7d',
+  },
+} as const;

package/src/tokens/components/dark/segmented-control.ts

@@ -3,10 +3,10 @@
  */
 
 export default {
-  borderRadius: 6,
+  borderRadius: 9999,
   gap: 6,
   group: {
-    borderRadius: 8,
+    borderRadius: 9999,
     borderWidth: 1,
     gap: 4,
     height: 48,

package/src/tokens/components/dark/table.ts

@@ -14,6 +14,9 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    neutral: {
+      backgroundColor: '#30302c',
+    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/light/alert.ts

@@ -6,6 +6,19 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
+  focus: '#101010',
   gap: 8,
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   padding: 14,
 } as const;

package/src/tokens/components/light/checkbox.ts

@@ -7,6 +7,9 @@ export default {
   borderWidth: 2,
   checked: {
     backgroundColor: '#101010',
+    icon: {
+      color: '#fcfbf2',
+    },
   },
   gap: 12,
   group: {

package/src/tokens/components/light/date-picker.ts

@@ -21,6 +21,7 @@ export default {
     item: {
       borderRadius: 8,
       minWidth: 32,
+      rangeBackground: '#f7f7f7',
       roundelBackgroundColorInverted: '#fcfbf2',
       roundelHeight: 6,
       roundelWidth: 6,

package/src/tokens/components/light/icon-button.ts

@@ -3,6 +3,13 @@
  */
 
 export default {
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
   borderRadius: 8,
   md: {
     height: 48,

package/src/tokens/components/light/illustrations.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  mode: 'light',
+} as const;

package/src/tokens/components/light/index.ts

@@ -22,6 +22,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -34,6 +35,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

package/src/tokens/components/light/link.ts

@@ -3,6 +3,11 @@
  */
 
 export default {
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   color: '#101010',
   colorActive: '#3f3f3f',
   colorHover: '#3a3837',

package/src/tokens/components/light/progress-bar.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  barColor: '#f1efe4',
+  circular: {
+    md: {
+      bar: {
+        width: 12,
+      },
+      gap: 0,
+      height: 140,
+      label: {
+        fontFamily: 'DM Sans',
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 24,
+      },
+    },
+    sm: {
+      barWidth: 8,
+      height: 80,
+    },
+  },
+  linear: {
+    bar: {
+      borderRadius: 9999,
+      height: 12,
+    },
+    gap: 8,
+    label: {
+      gap: 8,
+    },
+  },
+  progress: {
+    dangerColor: '#f4412a',
+    defaultColor: '#26164f',
+    successColor: '#19a660',
+  },
+} as const;

package/src/tokens/components/light/segmented-control.ts

@@ -3,10 +3,10 @@
  */
 
 export default {
-  borderRadius: 6,
+  borderRadius: 9999,
   gap: 6,
   group: {
-    borderRadius: 8,
+    borderRadius: 9999,
     borderWidth: 1,
     gap: 4,
     height: 48,

package/src/tokens/components/light/table.ts

@@ -14,6 +14,9 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    neutral: {
+      backgroundColor: '#f1efe4',
+    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/index.ts

@@ -14,6 +14,7 @@ export { default as borderWidth } from './border-width';
 export { default as font } from './font';
 export { default as letterSpacing } from './letter-spacing';
 export { default as lineHeight } from './line-height';
+export { default as motion } from './motion';
 export { default as space } from './space';
 export { default as typography } from './typography';
 export * as components from './components';

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',
   },
@@ -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: {
@@ -164,7 +164,7 @@ export default {
     },
     highlight: {
       border: {
-        strong: '#f7f7f7',
+        strong: '#101010',
       },
       foreground: {
         strong: '#101010',
@@ -247,7 +247,7 @@ export default {
   text: {
     affirmative: '#58ca93',
     brand: '#af90de',
-    inverted: '#191917',
+    inverted: '#fcfbf2',
     primary: '#ebebeb',
     secondary: '#b2afae',
   },

package/src/tokens/semantic-light.ts

@@ -249,6 +249,6 @@ export default {
     brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
-    secondary: '#888888',
+    secondary: '#5b5b5b',
   },
 } as const;

package/src/utils/index.ts

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

package/src/utils/isEqual.ts

@@ -0,0 +1,30 @@
+const isEqual = (a: any, b: any): boolean => {
+  if (a === b) return true;
+
+  if (typeof a !== typeof b) return false;
+
+  if (typeof a !== 'object' || a === null || b === null) return false;
+
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  if (Array.isArray(a)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!isEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (!keysB.includes(key) || !isEqual(a[key], b[key])) return false;
+  }
+
+  return true;
+};
+
+export default isEqual;

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;