@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/build/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
@@ -23,12 +24,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';

package/build/components/index.js

@@ -7,6 +7,7 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
@@ -24,12 +25,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';

package/build/core/themes.d.ts

@@ -464,8 +464,8 @@ export declare const lightTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -474,7 +474,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -493,8 +492,8 @@ export declare const lightTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -503,7 +502,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -522,8 +520,8 @@ export declare const lightTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -532,7 +530,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -1814,8 +1811,8 @@ export declare const darkTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -1824,7 +1821,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1843,8 +1839,8 @@ export declare const darkTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -1853,7 +1849,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1872,8 +1867,8 @@ export declare const darkTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -1882,7 +1877,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -3176,8 +3170,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -3186,7 +3180,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3205,8 +3198,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -3215,7 +3208,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3234,8 +3226,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -3244,7 +3236,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;
@@ -4526,8 +4517,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -4536,7 +4527,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4555,8 +4545,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -4565,7 +4555,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4584,8 +4573,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -4594,7 +4583,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;

package/build/tokens/components/dark/button.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

package/build/tokens/components/dark/button.js

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

package/build/tokens/components/dark/dialog.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

package/build/tokens/components/dark/dialog.js

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

package/build/tokens/components/dark/illustrations.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "dark";
     readonly mode: "dark";
 };
 export default _default;

package/build/tokens/components/dark/illustrations.js

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'dark',
     mode: 'dark',
 };

package/build/tokens/components/dark/toast.d.ts

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#3f3f3f";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

package/build/tokens/components/dark/toast.js

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#3f3f3f',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };

package/build/tokens/components/light/button.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

package/build/tokens/components/light/button.js

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

package/build/tokens/components/light/dialog.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

package/build/tokens/components/light/dialog.js

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

package/build/tokens/components/light/illustrations.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "light";
     readonly mode: "light";
 };
 export default _default;

package/build/tokens/components/light/illustrations.js

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'light',
     mode: 'light',
 };

package/build/tokens/components/light/toast.d.ts

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

package/build/tokens/components/light/toast.js

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };

package/build/tokens/layout.d.ts

@@ -7,8 +7,8 @@ export declare const mobile: {
         readonly minWidth: 320;
     };
     readonly container: {
+        readonly margin: 16;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 16;
         readonly paddingTop: 24;
         readonly width: 360;
     };
@@ -17,7 +17,6 @@ export declare const mobile: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 16;
-        readonly margin: 16;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -36,8 +35,8 @@ export declare const tablet: {
         readonly minWidth: 740;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 24;
         readonly width: 744;
     };
@@ -46,7 +45,6 @@ export declare const tablet: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -65,8 +63,8 @@ export declare const desktop: {
         readonly minWidth: 992;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 48;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 32;
         readonly width: 1096;
     };
@@ -75,7 +73,6 @@ export declare const desktop: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 40;
@@ -95,8 +92,8 @@ declare const layout: {
             readonly minWidth: 320;
         };
         readonly container: {
+            readonly margin: 16;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 16;
             readonly paddingTop: 24;
             readonly width: 360;
         };
@@ -105,7 +102,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 16;
-            readonly margin: 16;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -124,8 +120,8 @@ declare const layout: {
             readonly minWidth: 740;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 24;
             readonly width: 744;
         };
@@ -134,7 +130,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -153,8 +148,8 @@ declare const layout: {
             readonly minWidth: 992;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 48;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 32;
             readonly width: 1096;
         };
@@ -163,7 +158,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 40;

package/build/tokens/layout.js

@@ -7,8 +7,8 @@ export const mobile = {
         minWidth: 320,
     },
     container: {
+        margin: 16,
         paddingBottom: 32,
-        paddingHorizontal: 16,
         paddingTop: 24,
         width: 360,
     },
@@ -17,7 +17,6 @@ export const mobile = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 16,
-        margin: 16,
     },
     spacing: {
         '2xl': 28,
@@ -36,8 +35,8 @@ export const tablet = {
         minWidth: 740,
     },
     container: {
+        margin: 32,
         paddingBottom: 32,
-        paddingHorizontal: 32,
         paddingTop: 24,
         width: 744,
     },
@@ -46,7 +45,6 @@ export const tablet = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 28,
@@ -65,8 +63,8 @@ export const desktop = {
         minWidth: 992,
     },
     container: {
+        margin: 32,
         paddingBottom: 48,
-        paddingHorizontal: 32,
         paddingTop: 32,
         width: 1096,
     },
@@ -75,7 +73,6 @@ export const desktop = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 40,

package/build/utils/getFlattenedColorValue.js

@@ -1,23 +1,6 @@
+import { resolveThemeValue } from './themeValueHelpers';
 export default function getFlattenedColorValue(value, colors) {
     if (!value)
         return undefined;
-    if (colors?.[value] && typeof colors?.[value] === 'string') {
-        return colors?.[value];
-    }
-    // Extract trailing digits as shade
-    const shadeMatch = value.match(/\d+$/);
-    if (!shadeMatch)
-        return value;
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    if (shade && typeof base !== 'string')
-        return value;
-    const colorEntry = colors?.[base];
-    if (typeof colorEntry === 'object') {
-        return (colorEntry[shade] ?? value);
-    }
-    else if (typeof colorEntry === 'string') {
-        return colorEntry;
-    }
-    return value;
+    return resolveThemeValue(value, colors);
 }

package/build/utils/index.d.ts

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

package/build/utils/index.js

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

package/build/utils/styleUtils.d.ts

@@ -15,7 +15,3 @@ export declare const themeStyleMapping: {
  * Set of all possible ViewStyle property names
  */
 export declare const viewStyleProps: Set<string>;
-/**
- * Helper function to resolve a theme value
- */
-export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/styleUtils.js

@@ -218,53 +218,3 @@ 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
- */
-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];
-        const base = value.slice(0, -shade.length);
-        const nested = themeMapping[base];
-        if (nested && typeof nested === 'object') {
-            return nested[shade] ?? value;
-        }
-    }
-    // If none of the approaches work, return the original value
-    return value;
-};