@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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

@@ -3,7 +3,7 @@
  */
 declare const _default: {
     readonly background: {
-        readonly brand: "#996cda";
+        readonly brand: "#7a42c8";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -15,56 +15,56 @@ declare const _default: {
         readonly danger: {
             readonly border: "#ff7964";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly surface: {
-                readonly default: "#de2612";
-                readonly subtle: "#521a16";
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
             };
         };
         readonly functional: {
             readonly border: "#b2afae";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#b2afae";
             };
             readonly surface: {
-                readonly default: "#888888";
-                readonly subtle: "#232323";
+                readonly default: "#919191";
+                readonly subtle: "#d3d3d3";
             };
         };
         readonly info: {
             readonly border: "#6bb0ff";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#6bb0ff";
             };
             readonly surface: {
-                readonly default: "#1c6cd4";
-                readonly subtle: "#042455";
+                readonly default: "#6bb0ff";
+                readonly subtle: "#bcddff";
             };
         };
         readonly positive: {
             readonly border: "#58ca93";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly surface: {
-                readonly default: "#0f834a";
-                readonly subtle: "#033d21";
+                readonly default: "#36bf7d";
+                readonly subtle: "#a2e2c3";
             };
         };
         readonly warning: {
             readonly border: "#ff9639";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#ff9639";
             };
             readonly surface: {
-                readonly default: "#cb5b00";
-                readonly subtle: "#6b2d00";
+                readonly default: "#ff8010";
+                readonly subtle: "#ffcca8";
             };
         };
     };
@@ -79,7 +79,7 @@ declare const _default: {
     readonly interactive: {
         readonly affirmative: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly foreground: {
@@ -115,7 +115,7 @@ declare const _default: {
         };
         readonly destructive: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly foreground: {
@@ -136,14 +136,14 @@ declare const _default: {
         };
         readonly functional: {
             readonly border: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#ebebeb";
                 readonly subtle: "#ebebeb";
-                readonly inverted: "#f7f7f7";
             };
             readonly foreground: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#fcfbf2";
                 readonly subtle: "#ebebeb";
-                readonly inverted: "#f7f7f7";
             };
             readonly surface: {
                 readonly strong: {
@@ -155,15 +155,15 @@ declare const _default: {
                     readonly active: "#4c4c4c";
                     readonly hover: "#3a3837";
                     readonly inverted: {
-                        readonly active: "#d3d3d3";
-                        readonly hover: "#ebebeb";
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
                     };
                 };
             };
         };
         readonly highlight: {
             readonly border: {
-                readonly strong: "#f7f7f7";
+                readonly strong: "#101010";
             };
             readonly foreground: {
                 readonly strong: "#101010";
@@ -244,7 +244,9 @@ declare const _default: {
         };
     };
     readonly text: {
-        readonly inverted: "#191917";
+        readonly affirmative: "#58ca93";
+        readonly brand: "#af90de";
+        readonly inverted: "#fcfbf2";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";
     };

package/build/tokens/semantic-dark.js

@@ -3,7 +3,7 @@
  */
 export default {
     background: {
-        brand: '#996cda',
+        brand: '#7a42c8',
         primary: '#191917',
         secondary: '#232323',
     },
@@ -15,56 +15,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',
             },
         },
     },
@@ -79,7 +79,7 @@ export default {
     interactive: {
         affirmative: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#58ca93',
             },
             foreground: {
@@ -115,7 +115,7 @@ export default {
         },
         destructive: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#ff7964',
             },
             foreground: {
@@ -136,14 +136,14 @@ export default {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#ebebeb',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -155,15 +155,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',
@@ -244,7 +244,9 @@ export default {
         },
     },
     text: {
-        inverted: '#191917',
+        affirmative: '#58ca93',
+        brand: '#af90de',
+        inverted: '#fcfbf2',
         primary: '#ebebeb',
         secondary: '#b2afae',
     },

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

@@ -15,55 +15,55 @@ declare const _default: {
         readonly danger: {
             readonly border: "#de2612";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#de2612";
             };
             readonly surface: {
-                readonly default: "#de2612";
-                readonly subtle: "#ffccc5";
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
             };
         };
         readonly functional: {
-            readonly border: "#888888";
+            readonly border: "#5b5b5b";
             readonly foreground: {
-                readonly default: "#fcfbf2";
-                readonly subtle: "#888888";
+                readonly default: "#101010";
+                readonly subtle: "#5b5b5b";
             };
             readonly surface: {
-                readonly default: "#888888";
+                readonly default: "#919191";
                 readonly subtle: "#d3d3d3";
             };
         };
         readonly info: {
             readonly border: "#1c6cd4";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#1c6cd4";
             };
             readonly surface: {
-                readonly default: "#1c6cd4";
+                readonly default: "#6bb0ff";
                 readonly subtle: "#bcddff";
             };
         };
         readonly positive: {
             readonly border: "#0f834a";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#0f834a";
             };
             readonly surface: {
-                readonly default: "#0f834a";
+                readonly default: "#36bf7d";
                 readonly subtle: "#a2e2c3";
             };
         };
         readonly warning: {
             readonly border: "#be5400";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#be5400";
             };
             readonly surface: {
-                readonly default: "#be5400";
+                readonly default: "#ff8010";
                 readonly subtle: "#ffcca8";
             };
         };
@@ -136,14 +136,14 @@ declare const _default: {
         };
         readonly functional: {
             readonly border: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#101010";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly foreground: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#fcfbf2";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly surface: {
                 readonly strong: {
@@ -244,9 +244,11 @@ declare const _default: {
         };
     };
     readonly text: {
+        readonly affirmative: "#0f834a";
+        readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
-        readonly secondary: "#888888";
+        readonly secondary: "#5b5b5b";
     };
 };
 export default _default;

package/build/tokens/semantic-light.js

@@ -15,55 +15,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',
             },
         },
@@ -136,14 +136,14 @@ export default {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#101010',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -244,8 +244,10 @@ export default {
         },
     },
     text: {
+        affirmative: '#0f834a',
+        brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
-        secondary: '#888888',
+        secondary: '#5b5b5b',
     },
 };

package/build/types/values.d.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> = {
     [K in keyof T as K extends string | number ? `${P}${K}` : never]: T[K];
@@ -26,4 +26,5 @@ export type ColorValue = 'currentColor' | 'transparent' | FlattenColorKeys<Omit<
 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/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/index.d.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/build/utils/index.js

@@ -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';