@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/tokens/semantic-light.d.ts

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

package/build/tokens/semantic-light.js

@@ -2,23 +2,252 @@
  * 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: '#101010',
+                subtle: '#de2612',
+            },
+            surface: {
+                default: '#ff634a',
+                subtle: '#ffa89d',
+            },
+        },
+        functional: {
+            border: '#5b5b5b',
+            foreground: {
+                default: '#101010',
+                subtle: '#5b5b5b',
+            },
+            surface: {
+                default: '#919191',
+                subtle: '#d3d3d3',
+            },
+        },
+        info: {
+            border: '#1c6cd4',
+            foreground: {
+                default: '#101010',
+                subtle: '#1c6cd4',
+            },
+            surface: {
+                default: '#6bb0ff',
+                subtle: '#bcddff',
+            },
+        },
+        positive: {
+            border: '#0f834a',
+            foreground: {
+                default: '#101010',
+                subtle: '#0f834a',
+            },
+            surface: {
+                default: '#36bf7d',
+                subtle: '#a2e2c3',
+            },
+        },
+        warning: {
+            border: '#be5400',
+            foreground: {
+                default: '#101010',
+                subtle: '#be5400',
+            },
+            surface: {
+                default: '#ff8010',
+                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: {
+                inverted: '#f7f7f7',
+                strong: '#101010',
+                subtle: '#101010',
+            },
+            foreground: {
+                inverted: '#f7f7f7',
+                strong: '#fcfbf2',
+                subtle: '#101010',
+            },
+            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: {
+        affirmative: '#0f834a',
+        brand: '#7a42c8',
+        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 { lightTheme, themes } 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,13 +14,17 @@ 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;
+export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['space'];
 export {};

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/formatThousands.d.ts

@@ -0,0 +1,2 @@
+declare const formatThousands: (value: string) => string;
+export default formatThousands;

package/build/utils/formatThousands.js

@@ -0,0 +1,16 @@
+const formatThousands = (value) => {
+    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/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;