@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/tokens/semantic-light.js

@@ -2,23 +2,250 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    color: {
-        background: '#fcfbf2',
-        background1: '#ffffff',
-        backgroundPurple: '#7a42c8',
-        invalidText: '#de2612',
+    background: {
+        brand: '#7a42c8',
+        primary: '#fcfbf2',
+        secondary: '#ffffff',
+    },
+    border: {
+        strong: '#101010',
+        subtle: '#d4d2c0',
+    },
+    feedback: {
+        danger: {
+            border: '#de2612',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#de2612',
+            },
+            surface: {
+                default: '#de2612',
+                subtle: '#ffccc5',
+            },
+        },
+        functional: {
+            border: '#888888',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#888888',
+            },
+            surface: {
+                default: '#888888',
+                subtle: '#d3d3d3',
+            },
+        },
+        info: {
+            border: '#1c6cd4',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#1c6cd4',
+            },
+            surface: {
+                default: '#1c6cd4',
+                subtle: '#bcddff',
+            },
+        },
+        positive: {
+            border: '#0f834a',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#0f834a',
+            },
+            surface: {
+                default: '#0f834a',
+                subtle: '#a2e2c3',
+            },
+        },
+        warning: {
+            border: '#be5400',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#be5400',
+            },
+            surface: {
+                default: '#be5400',
+                subtle: '#ffcca8',
+            },
+        },
+    },
+    focus: {
+        inverted: '#fcfbf2',
+        primary: '#101010',
+    },
+    icon: {
+        inverted: '#fcfbf2',
+        primary: '#101010',
+    },
+    interactive: {
+        affirmative: {
+            border: {
+                strong: '#101010',
+                subtle: '#04663a',
+            },
+            foreground: {
+                strong: '#fcfbf2',
+                subtle: '#04663a',
+            },
+            surface: {
+                strong: {
+                    active: '#074b2a',
+                    default: '#0f834a',
+                    hover: '#04663a',
+                },
+                subtle: {
+                    active: '#c5edda',
+                    hover: '#e7f9f0',
+                },
+            },
+        },
+        brand: {
+            border: {
+                strong: '#101010',
+            },
+            foreground: {
+                strong: '#fcfbf2',
+            },
+            surface: {
+                strong: {
+                    active: '#442484',
+                    default: '#7a42c8',
+                    hover: '#5c2ca9',
+                },
+            },
+        },
+        destructive: {
+            border: {
+                strong: '#101010',
+                subtle: '#a4281e',
+            },
+            foreground: {
+                strong: '#fcfbf2',
+                subtle: '#a4281e',
+            },
+            surface: {
+                strong: {
+                    active: '#6b1f1a',
+                    default: '#de2612',
+                    hover: '#a4281e',
+                },
+                subtle: {
+                    active: '#ffe3df',
+                    hover: '#fff3f1',
+                },
+            },
+        },
+        functional: {
+            border: {
+                strong: '#101010',
+                subtle: '#101010',
+                inverted: '#f7f7f7',
+            },
+            foreground: {
+                strong: '#fcfbf2',
+                subtle: '#101010',
+                inverted: '#f7f7f7',
+            },
+            surface: {
+                strong: {
+                    active: '#4c4c4c',
+                    default: '#888888',
+                    hover: '#5b5b5b',
+                },
+                subtle: {
+                    active: '#d3d3d3',
+                    hover: '#ebebeb',
+                    inverted: {
+                        active: '#3a3837',
+                        hover: '#3f3f3f',
+                    },
+                },
+            },
+        },
+        highlight: {
+            border: {
+                strong: '#101010',
+            },
+            foreground: {
+                strong: '#101010',
+            },
+            surface: {
+                strong: {
+                    active: '#d1950b',
+                    default: '#ffb921',
+                    hover: '#eba400',
+                },
+            },
+        },
+        neutral: {
+            border: {
+                subtle: '#101010',
+            },
+            foreground: {
+                subtle: '#101010',
+            },
+            surface: {
+                subtle: {
+                    active: '#f1efe4',
+                    hover: '#f7f6eb',
+                },
+            },
+        },
     },
     opacity: {
         disabled: 50,
     },
     shadow: {
-        broadbandGreenColor: '#8cba3b',
-        cashbackLilacColor: '#be7aeb',
-        defaultColor: '#101010',
-        energyBlueColor: '#6db5c3',
-        insuranceOrangeColor: '#ff7b00',
-        mobileRoseColor: '#ee6dbb',
-        piggyPinkColor: '#f295ff',
-        purpleColor: '#7a42c8',
+        brand: '#7a42c8',
+        broadband: '#8cba3b',
+        cashback: '#be7aeb',
+        default: '#101010',
+        energy: '#6db5c3',
+        insurance: '#ff7b00',
+        mobile: '#ee6dbb',
+        pig: '#f295ff',
+    },
+    surface: {
+        brand: {
+            default: '#7a42c8',
+            strong: '#26164f',
+            subtle: '#af90de',
+        },
+        broadband: {
+            default: '#8cba3b',
+            subtle: '#d2e6b0',
+        },
+        cashback: {
+            default: '#be7aeb',
+            subtle: '#dfbdf5',
+        },
+        energy: {
+            default: '#6db5c3',
+            subtle: '#bddee4',
+        },
+        highlight: {
+            default: '#ffb921',
+            subtle: '#ffd885',
+        },
+        insurance: {
+            default: '#ff7b00',
+            subtle: '#ffb46d',
+        },
+        mobile: {
+            default: '#ee6dbb',
+            subtle: '#fad0e9',
+        },
+        neutral: {
+            strong: '#ffffff',
+            subtle: '#fcfbf2',
+        },
+        pig: {
+            default: '#f295ff',
+            subtle: '#f9ceff',
+        },
+    },
+    text: {
+        inverted: '#fcfbf2',
+        primary: '#101010',
+        secondary: '#888888',
     },
 };

package/build/tokens/{components/light/focus.d.ts → semantic.d.ts}

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly border: "#101010";
-    readonly borderInverted: "#fcfbf2";
+    readonly opacity: {
+        readonly disabled: 50;
+    };
 };
 export default _default;

package/build/tokens/{components/light/focus.js → semantic.js}

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    border: '#101010',
-    borderInverted: '#fcfbf2',
+    opacity: {
+        disabled: 50,
+    },
 };

package/build/types/values.d.ts

@@ -1,5 +1,6 @@
 import { AnimatableNumericValue, DimensionValue } from 'react-native';
 import { lightTheme } from '../core/themes';
+import color from '../tokens/color';
 export type addPrefixToObject<T, P extends string> = {
     [K in keyof T as K extends string | number ? `${P}${K}` : never]: T[K];
 };
@@ -13,12 +14,15 @@ export type RGBA = `rgba(${OptionalSpace}${number}${OptionalSpace},${OptionalSpa
 export type HEX = `#${string}`;
 export type HSLA = `hsla(${string})` | `hsla(${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace})`;
 export type HSL = `hsl(${string})` | `hsl(${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace})`;
-type FlattenColorKeys<T> = {
-    [K in keyof T]: T[K] extends Record<string, unknown> ? {
-        [K2 in keyof T[K]]: `${K & string}${K2 & string}`;
-    }[keyof T[K]] : K;
-}[keyof T];
-export type ColorValue = 'currentColor' | 'transparent' | FlattenColorKeys<(typeof lightTheme)['color']> | HSLA | HSL | RGB | RGBA | HEX | undefined;
+type ToCamelCase<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}` ? `${P1}${Uppercase<P2>}${ToCamelCase<P3>}` : S;
+type Capitalise<S extends string> = S extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : S;
+export type FlattenColorKeys<T> = T extends Record<string, unknown> ? {
+    [K in keyof T]: T[K] extends string ? ToCamelCase<K & string> : T[K] extends Record<string, unknown> ? FlattenColorKeys<T[K]> extends infer Nested ? Nested extends string ? ToCamelCase<`${K & string}${Capitalise<Nested>}`> : never : never : never;
+}[keyof T] : never;
+export type ColorValue = 'currentColor' | 'transparent' | FlattenColorKeys<Omit<typeof color, 'light' | 'dark'> & {
+    white: '#ffffff';
+    black: '#000000';
+}> | FlattenColorKeys<(typeof color)['light']> | HSLA | HSL | RGB | RGBA | HEX | undefined;
 export type BorderRadiusValue = `${keyof (typeof lightTheme)['borderRadius'] & (string | number)}` | AnimatableNumericValue | undefined;
 export type BordeWidthValue = `${keyof (typeof lightTheme)['borderWidth'] & (string | number)}` | number | undefined;
 export type OpacityValue = AnimatableNumericValue | undefined;

package/build/utils/coloursAsArray.d.ts

@@ -1,2 +1,10 @@
 export declare function extractLightColorValues(): Record<string, string>;
+/**
+ * Extract flattened semantic color values from light theme
+ */
+export declare function extractSemanticColorValues(): Record<string, string>;
+/**
+ * Extract all flattened color values (primitive + semantic)
+ */
+export declare function extractAllColorValues(): Record<string, string>;
 export default function coloursAsArray(): Array<string>;

package/build/utils/coloursAsArray.js

@@ -1,12 +1,47 @@
 import { color } from '../tokens';
+const { light, dark, ...restOfColors } = color;
+/**
+ * Recursively flatten nested color objects into camelCase keys
+ */
+function flattenColorObject(obj, prefix = '') {
+    const result = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        const camelKey = prefix ? `${prefix}${key.charAt(0).toUpperCase()}${key.slice(1)}` : key;
+        if (typeof value === 'string') {
+            result[camelKey] = value;
+        }
+        else if (value && typeof value === 'object') {
+            Object.assign(result, flattenColorObject(value, camelKey));
+        }
+    });
+    return result;
+}
 export function extractLightColorValues() {
-    return Object.entries(color).reduce((acc, [colorName, variants]) => {
+    return Object.entries(restOfColors).reduce((acc, [colorName, variants]) => {
         Object.entries(variants).forEach(([variantName, hexValue]) => {
             acc[`${colorName}${variantName}`] = hexValue;
         });
         return acc;
     }, {});
 }
+/**
+ * Extract flattened semantic color values from light theme
+ */
+export function extractSemanticColorValues() {
+    return flattenColorObject(light);
+}
+/**
+ * Extract all flattened color values (primitive + semantic)
+ */
+export function extractAllColorValues() {
+    return {
+        ...extractLightColorValues(),
+        ...extractSemanticColorValues(),
+    };
+}
 export default function coloursAsArray() {
-    return [...Object.keys(color), ...Object.keys(extractLightColorValues())];
+    const primitiveColors = Object.keys(restOfColors);
+    const primitiveColorValues = Object.keys(extractLightColorValues());
+    const semanticColorValues = Object.keys(extractSemanticColorValues());
+    return [...primitiveColors, ...primitiveColorValues, ...semanticColorValues];
 }

package/build/utils/getFlattenedColorValue.d.ts

@@ -1,4 +1,6 @@
 import { ColorValue } from '../types';
-type ThemeColor = string | Record<string, string>;
+type ThemeColor = string | {
+    [key: string]: string | ThemeColor;
+};
 export default function getFlattenedColorValue(value?: string, colors?: Record<string, ThemeColor>): ColorValue;
 export {};

package/build/utils/hexWithOpacity.d.ts

@@ -0,0 +1,2 @@
+declare const hexWithOpacity: (hex: string, opacity: number) => string;
+export default hexWithOpacity;

package/build/utils/hexWithOpacity.js

@@ -0,0 +1,15 @@
+const hexWithOpacity = (hex, opacity) => {
+    'worklet';
+    // Remove # if present
+    const cleanHex = hex.replace('#', '');
+    // Validate hex string format
+    if (cleanHex.length !== 6 || !/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        throw new Error(`Invalid hex color format: ${hex}. Expected format: #RRGGBB or RRGGBB`);
+    }
+    // Convert hex to RGB
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+export default hexWithOpacity;

package/build/utils/index.d.ts

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

package/build/utils/index.js

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

package/build/utils/styleUtils.js

@@ -218,6 +218,23 @@ export const viewStyleProps = new Set([
     // Z-index
     'zIndex',
 ]);
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+const camelCaseToPath = (camelCased) => {
+    // Split on uppercase letters but keep them
+    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+    return parts;
+};
+/**
+ * Helper function to get nested value from object using path array
+ */
+const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => {
+        return current && typeof current === 'object' ? current[key] : undefined;
+    }, obj);
+};
 /**
  * Helper function to resolve a theme value
  */
@@ -225,6 +242,20 @@ export const resolveThemeValue = (value, themeMapping) => {
     if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
         return value;
     }
+    // First, try direct lookup for simple values
+    if (themeMapping[value] !== undefined) {
+        return themeMapping[value];
+    }
+    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+    if (/^[a-z][a-zA-Z]*$/.test(value)) {
+        // Only camelCase strings without numbers
+        const path = camelCaseToPath(value);
+        const nestedValue = getNestedValue(themeMapping, path);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
     const shadeMatch = value.match(/\d+$/);
     if (shadeMatch) {
         const shade = shadeMatch[0];
@@ -234,5 +265,6 @@ export const resolveThemeValue = (value, themeMapping) => {
             return nested[shade] ?? value;
         }
     }
-    return themeMapping[value] ?? value;
+    // If none of the approaches work, return the original value
+    return value;
 };

package/docs/components/AllComponents.web.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
   BroadbandMediumIcon,
   ChevronRightMediumIcon,
@@ -37,11 +38,13 @@ import {
   Link,
   List,
   ListItem,
+  Modal,
   OL,
   Radio,
   RadioCard,
   RadioCardGroup,
   RadioGroup,
+  SectionHeader,
   Select,
   Skeleton,
   Spinner,
@@ -86,6 +89,10 @@ const AllComponents: React.FC = () => {
   const handleOpenPress = useCallback(() => {
     bottomSheetRef.current?.expand();
   }, []);
+  const modalRef = useRef<BottomSheetModalMethods>(null);
+  const handleModalOpenPress = useCallback(() => {
+    modalRef.current?.present();
+  }, []);
   useEffect(() => {
     if (bottomSheetRef.current) {
       setTimeout(() => {
@@ -93,6 +100,13 @@ const AllComponents: React.FC = () => {
       }, 300);
     }
   }, [bottomSheetRef]);
+  useEffect(() => {
+    if (modalRef.current) {
+      setTimeout(() => {
+        modalRef.current?.present();
+      }, 400);
+    }
+  }, [modalRef]);
   const [switchEnabled, setSwitchEnabled] = React.useState(false);
   const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
   const [colorMode] = useColorMode();
@@ -124,7 +138,7 @@ const AllComponents: React.FC = () => {
                 <Badge>This is a badge</Badge>
               </View>
               <View>
-                <Badge colorScheme="red">This is a red badge</Badge>
+                <Badge colorScheme="danger">This is a red badge</Badge>
               </View>
             </Center>
           </ComponentWrapper>
@@ -159,7 +173,7 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Button" link="/?path=/docs/components-button--docs">
             <Center flex={1}>
-              <Button colorScheme="yellow" variant="emphasis" onPress={() => null}>
+              <Button colorScheme="highlight" variant="emphasis" onPress={() => null}>
                 Press me
               </Button>
             </Center>
@@ -286,6 +300,21 @@ const AllComponents: React.FC = () => {
               </List>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Modal" link="/?path=/docs/components-modal--docs">
+            <Center flex={1}>
+              <Button onPress={handleModalOpenPress}>Open Modal</Button>
+              <BottomSheetModalProvider>
+                <Modal
+                  ref={modalRef}
+                  heading="This is a Modal"
+                  description="This is a modal description"
+                  primaryButtonText="Primary"
+                  secondaryButtonText="Close"
+                  index={0}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Ordered List"
             link="/?path=/docs/utility-components-ul-ol-lists--docs"
@@ -320,6 +349,14 @@ const AllComponents: React.FC = () => {
               </RadioCardGroup>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Section Header"
+            link="/?path=/docs/components-section-header--docs"
+          >
+            <Center flex={1}>
+              <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
             <Center flex={1}>
               <BottomSheetModalProvider>

package/docs/components/BadgeList.tsx

@@ -1,17 +1,17 @@
 import {
+  Badge,
+  BadgeText,
+  Box,
+  Flex,
   List,
   ListItem,
+  ListItemContent,
+  ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemHelperText,
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
-  ListItemContent,
-  Badge,
-  BadgeText,
-  Flex,
-  Box,
 } from '../../src';
 
 import {
@@ -31,7 +31,7 @@ const BadgeList = () => {
         </ListItemLeadingContent>
         <ListItemContent>
           <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="blue">
+          <Badge colorScheme="info">
             <BadgeText>Text</BadgeText>
           </Badge>
           <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
@@ -49,7 +49,7 @@ const BadgeList = () => {
         <ListItemContent>
           <Flex direction="row" style={{ justifyContent: 'space-between' }}>
             <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="green">
+            <Badge colorScheme="positive">
               <BadgeText>Smart meter</BadgeText>
             </Badge>
           </Flex>

package/docs/components/ViewFigmaButton.tsx

@@ -1,8 +1,8 @@
-import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
 
 import { Platform } from 'react-native';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 
 interface Props {
   url: string;
@@ -20,7 +20,7 @@ const ViewFigmaButton: React.FC<Props> = ({ url }) => (
   <div className="sb-unstyled">
     <Button
       variant="ghost"
-      colorScheme="grey"
+      colorScheme="functional"
       size="sm"
       style={{
         zIndex: 1,

package/docs/introduction.mdx

@@ -39,7 +39,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.26.4 react-native-svg react-native-reanimated react-native-gesture-handler
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -139,7 +139,7 @@ module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     // other plugins...
-    'react-native-reanimated/plugin',
+    'react-native-worklets/plugin',
     ['react-native-unistyles/plugin', unistylesPluginOptions],
   ],
 };

package/docs/llm-docs/unistyles-llms-full.txt

@@ -6395,7 +6395,7 @@ module.exports = function (api) {
         ['react-native-unistyles/plugin', {
             root: 'app'
         }],
-        ['react-native-reanimated/plugin']
+        ['react-native-worklets/plugin']
     ]
   };
 };