@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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

@@ -6,12 +6,15 @@ export default {
     borderWidth: 2,
     checked: {
         backgroundColor: '#101010',
+        icon: {
+            color: '#fcfbf2',
+        },
     },
-    gap: 8,
+    gap: 12,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#d4d2c0',
@@ -21,7 +24,7 @@ export default {
         borderRadius: 8,
         borderWidth: 1,
         borderWidthSelected: 2,
-        gap: 8,
+        gap: 12,
         group: {
             gap: 6,
             stack: {

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

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
     readonly borderRadius: 8;
     readonly md: {
         readonly height: 48;
@@ -21,7 +28,7 @@ declare const _default: {
         readonly foregroundColorHover: "#3a3837";
         readonly inverted: {
             readonly foregroundColor: "#f7f7f7";
-            readonly foregroundColorActive: "#d4d2c0";
+            readonly foregroundColorActive: "#b2afae";
             readonly foregroundColorHover: "#d3d3d3";
         };
         readonly md: {

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

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
     borderRadius: 8,
     md: {
         height: 48,
@@ -21,7 +28,7 @@ export default {
         foregroundColorHover: '#3a3837',
         inverted: {
             foregroundColor: '#f7f7f7',
-            foregroundColorActive: '#d4d2c0',
+            foregroundColorActive: '#b2afae',
             foregroundColorHover: '#d3d3d3',
         },
         md: {

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

@@ -33,6 +33,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/build/tokens/components/light/index.js

@@ -33,6 +33,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/build/tokens/components/light/link.d.ts

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly color: "#101010";
     readonly colorActive: "#3f3f3f";
     readonly colorHover: "#3a3837";

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     color: '#101010',
     colorActive: '#3f3f3f',
     colorHover: '#3a3837',

package/build/tokens/components/light/progress-bar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly barColor: "#f1efe4";
+    readonly circular: {
+        readonly md: {
+            readonly bar: {
+                readonly width: 12;
+            };
+            readonly gap: 0;
+            readonly height: 140;
+            readonly label: {
+                readonly fontFamily: "DM Sans";
+                readonly fontSize: 24;
+                readonly fontWeight: 400;
+                readonly lineHeight: 24;
+            };
+        };
+        readonly sm: {
+            readonly barWidth: 8;
+            readonly height: 80;
+        };
+    };
+    readonly linear: {
+        readonly bar: {
+            readonly borderRadius: 9999;
+            readonly height: 12;
+        };
+        readonly gap: 8;
+        readonly label: {
+            readonly gap: 8;
+        };
+    };
+    readonly progress: {
+        readonly dangerColor: "#f4412a";
+        readonly defaultColor: "#26164f";
+        readonly successColor: "#19a660";
+    };
+};
+export default _default;

package/build/tokens/components/light/progress-bar.js

@@ -0,0 +1,40 @@
+/**
+ * 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',
+    },
+};

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

@@ -7,11 +7,11 @@ declare const _default: {
     readonly checked: {
         readonly color: "#101010";
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
@@ -23,7 +23,7 @@ declare const _default: {
         readonly borderWidthSelected: 2;
         readonly gap: 8;
         readonly group: {
-            readonly gap: 6;
+            readonly gap: 12;
             readonly stack: {
                 readonly gap: 12;
             };

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

@@ -7,11 +7,11 @@ export default {
     checked: {
         color: '#101010',
     },
-    gap: 8,
+    gap: 12,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#d4d2c0',
@@ -23,7 +23,7 @@ export default {
         borderWidthSelected: 2,
         gap: 8,
         group: {
-            gap: 6,
+            gap: 12,
             stack: {
                 gap: 12,
             },

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

@@ -9,6 +9,8 @@ declare const _default: {
     readonly gap: 12;
     readonly item: {
         readonly gap: 6;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 16;
         readonly selected: {
             readonly borderBottomRadius: 0;
             readonly borderTopRadius: 4;

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

@@ -9,6 +9,8 @@ export default {
     gap: 12,
     item: {
         gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 16,
         selected: {
             borderBottomRadius: 0,
             borderTopRadius: 4,

package/build/tokens/index.d.ts

@@ -13,6 +13,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/build/tokens/index.js

@@ -13,6 +13,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/build/tokens/layout.d.ts

@@ -20,11 +20,14 @@ export declare const mobile: {
         readonly margin: 16;
     };
     readonly spacing: {
-        readonly lg: 20;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 28;
-        readonly xs: 8;
+        readonly '2xl': 28;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 20;
+        readonly xs: 4;
     };
 };
 export declare const tablet: {
@@ -46,11 +49,14 @@ export declare const tablet: {
         readonly margin: 32;
     };
     readonly spacing: {
-        readonly lg: 24;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 28;
-        readonly xs: 8;
+        readonly '2xl': 28;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 24;
+        readonly xs: 4;
     };
 };
 export declare const desktop: {
@@ -72,11 +78,14 @@ export declare const desktop: {
         readonly margin: 32;
     };
     readonly spacing: {
-        readonly lg: 24;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 40;
-        readonly xs: 8;
+        readonly '2xl': 40;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 24;
+        readonly xs: 4;
     };
 };
 declare const layout: {
@@ -99,11 +108,14 @@ declare const layout: {
             readonly margin: 16;
         };
         readonly spacing: {
-            readonly lg: 20;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 28;
-            readonly xs: 8;
+            readonly '2xl': 28;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 20;
+            readonly xs: 4;
         };
     };
     readonly tablet: {
@@ -125,11 +137,14 @@ declare const layout: {
             readonly margin: 32;
         };
         readonly spacing: {
-            readonly lg: 24;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 28;
-            readonly xs: 8;
+            readonly '2xl': 28;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 24;
+            readonly xs: 4;
         };
     };
     readonly desktop: {
@@ -151,11 +166,14 @@ declare const layout: {
             readonly margin: 32;
         };
         readonly spacing: {
-            readonly lg: 24;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 40;
-            readonly xs: 8;
+            readonly '2xl': 40;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 24;
+            readonly xs: 4;
         };
     };
 };

package/build/tokens/layout.js

@@ -20,11 +20,14 @@ export const mobile = {
         margin: 16,
     },
     spacing: {
-        lg: 20,
-        md: 16,
-        sm: 12,
-        xl: 28,
-        xs: 8,
+        '2xl': 28,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 20,
+        xs: 4,
     },
 };
 export const tablet = {
@@ -46,11 +49,14 @@ export const tablet = {
         margin: 32,
     },
     spacing: {
-        lg: 24,
-        md: 16,
-        sm: 12,
-        xl: 28,
-        xs: 8,
+        '2xl': 28,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 24,
+        xs: 4,
     },
 };
 export const desktop = {
@@ -72,11 +78,14 @@ export const desktop = {
         margin: 32,
     },
     spacing: {
-        lg: 24,
-        md: 16,
-        sm: 12,
-        xl: 40,
-        xs: 8,
+        '2xl': 40,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 24,
+        xs: 4,
     },
 };
 const layout = { mobile, tablet, desktop };

package/build/tokens/motion.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly duration: {
+        readonly '100': 130;
+        readonly '200': 160;
+        readonly '300': 190;
+        readonly '400': 220;
+        readonly '500': 250;
+        readonly '600': 300;
+        readonly '700': 350;
+        readonly '800': 400;
+        readonly '900': 450;
+        readonly '1000': 500;
+    };
+    readonly ease: {
+        readonly in: "cubic-bezier(0.42, 0, 1, 1)";
+        readonly inOut: "cubic-bezier(0, 0, 1, 1)";
+        readonly out: "cubic-bezier(0.19, 0.91, 0.38, 1)";
+    };
+};
+export default _default;

package/build/tokens/motion.js

@@ -0,0 +1,22 @@
+/**
+ * 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)',
+    },
+};

package/build/tokens/primitive.d.ts

@@ -81,6 +81,25 @@ declare const _default: {
         readonly '1100': 72;
         readonly '1200': 90;
     };
+    readonly motion: {
+        readonly duration: {
+            readonly '100': 130;
+            readonly '200': 160;
+            readonly '300': 190;
+            readonly '400': 220;
+            readonly '500': 250;
+            readonly '600': 300;
+            readonly '700': 350;
+            readonly '800': 400;
+            readonly '900': 450;
+            readonly '1000': 500;
+        };
+        readonly ease: {
+            readonly in: "cubic-bezier(0.42, 0, 1, 1)";
+            readonly inOut: "cubic-bezier(0, 0, 1, 1)";
+            readonly out: "cubic-bezier(0.19, 0.91, 0.38, 1)";
+        };
+    };
     readonly space: {
         readonly '0': 0;
         readonly '25': 2;

package/build/tokens/primitive.js

@@ -81,6 +81,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,