@utilitywarehouse/hearth-react-native 0.3.0 → 0.3.1

package/src/components/Select/Select.docs.mdx

@@ -1,8 +1,8 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Select.stories';
-import { Select, SelectOption, FormField, Center } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Center, FormField, Select, SelectOption } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Select.stories';
 
 <Meta title="Forms / Select" />
 
@@ -195,7 +195,7 @@ import { Select, SelectOption } from '@utilitywarehouse/hearth-react-native';
 import {
   UserSmallIcon,
   HeartSmallIcon,
-  StarSmallIcon,
+  EyeSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
 
@@ -211,7 +211,7 @@ const MyComponent = () => {
     >
       <SelectOption label="Home option" value="home" leadingIcon={UserSmallIcon} />
       <SelectOption label="Car option" value="car" leadingIcon={HeartSmallIcon} />
-      <SelectOption label="World option" value="world" leadingIcon={StarSmallIcon} />
+      <SelectOption label="World option" value="world" leadingIcon={EyeSmallIcon} />
     </Select>
   );
 };

package/src/components/Select/Select.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import Select from './Select';
-import SelectOption from './SelectOption';
-import { FormField } from '../FormField';
 import {
-  UserSmallIcon,
+  EyeSmallIcon,
   HeartSmallIcon,
-  StarSmallIcon,
+  UserSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
 import { Box } from '../Box';
 import { Button } from '../Button';
+import { FormField } from '../FormField';
+import Select from './Select';
+import SelectOption from './SelectOption';
 
 const meta = {
   title: 'Stories / Select',
@@ -269,7 +269,7 @@ export const WithInlineOptions = () => {
     >
       <SelectOption label="Home option" value="home" leadingIcon={UserSmallIcon} />
       <SelectOption label="Car option" value="car" leadingIcon={HeartSmallIcon} />
-      <SelectOption label="World option" value="world" leadingIcon={StarSmallIcon} />
+      <SelectOption label="World option" value="world" leadingIcon={EyeSmallIcon} />
     </Select>
   );
 };

package/src/components/Select/SelectOption.tsx

@@ -1,5 +1,5 @@
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View, ViewStyle } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
@@ -42,10 +42,7 @@ const SelectOption = ({
     >
       {!!LeftIcon && (
         <View>
-          {(() => {
-            const IconAny = Icon as any;
-            return <IconAny style={styles.icon as ViewStyle} as={LeftIcon} />;
-          })()}
+          <Icon as={LeftIcon} style={styles.icon} />
         </View>
       )}
 
@@ -55,15 +52,12 @@ const SelectOption = ({
 
       {isSelected && (
         <View>
-          <TickSmallIcon style={styles.icon as ViewStyle} />
+          <Icon as={TickSmallIcon} style={styles.icon} />
         </View>
       )}
       {!!RightIcon && !isSelected && (
         <View>
-          {(() => {
-            const IconAny = Icon as any;
-            return <IconAny style={styles.icon as ViewStyle} as={RightIcon} />;
-          })()}
+          <Icon as={RightIcon} style={styles.icon} />
         </View>
       )}
     </Pressable>

package/src/components/UnstyledIconButton/UnstyledIconButton.props.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps } from 'react-native';
+import type { PressableProps, ViewProps } from 'react-native';
 
 export type UnstyledIconButtonProps = {
   /*
@@ -29,4 +29,5 @@ export type UnstyledIconButtonProps = {
    */
   inverted?: boolean;
   children?: React.ReactNode;
+  iconStyle?: ViewProps['style'];
 } & PressableProps;

package/src/components/UnstyledIconButton/UnstyledIconButton.tsx

@@ -1,9 +1,10 @@
 import { createButton } from '@gluestack-ui/button';
+import { ViewStyle } from 'react-native';
+import { useButtonGroupContext } from '../Button/ButtonGroup.context';
 import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
-import UnstyledIconButtonRootComponent from './UnstyledIconButtonRoot';
 import UnstyledIconButtonIconComponent from './UnstyledIconButtonIcon';
+import UnstyledIconButtonRootComponent from './UnstyledIconButtonRoot';
 import UnstyledIconButtonSpinerComponent from './UnstyledIconButtonSpinner';
-import { useButtonGroupContext } from '../Button/ButtonGroup.context';
 
 const UnstyledIconButtonComponent = createButton({
   Root: UnstyledIconButtonRootComponent,
@@ -25,6 +26,7 @@ const UnstyledIconButton = ({
   pressed,
   size = 'md',
   inverted = false,
+  iconStyle,
   ...props
 }: UnstyledIconButtonProps) => {
   const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
@@ -41,7 +43,11 @@ const UnstyledIconButton = ({
       isPressed={pressed}
       icon={icon}
     >
-      {loading ? <UnstyledIconButtonSpinner /> : <UnstyledIconButtonIcon as={icon} />}
+      {loading ? (
+        <UnstyledIconButtonSpinner />
+      ) : (
+        <UnstyledIconButtonIcon as={icon} style={iconStyle as ViewStyle} />
+      )}
     </UnstyledIconButtonComponent>
   );
 };

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/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/index.ts

@@ -34,6 +34,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/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/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/index.ts

@@ -34,6 +34,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/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/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;