@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/build/tokens/components/dark/date-picker.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
         readonly item: {
             readonly borderRadius: 8;
             readonly minWidth: 32;
+            readonly rangeBackground: "#191919";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;

package/build/tokens/components/dark/date-picker.js

@@ -20,6 +20,7 @@ export default {
         item: {
             borderRadius: 8,
             minWidth: 32,
+            rangeBackground: '#191919',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

package/build/tokens/components/dark/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;

package/build/tokens/components/dark/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,

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

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

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

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

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

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -33,6 +34,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/dark/index.js

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -33,6 +34,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/dark/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: "#ebebeb";
     readonly colorActive: "#b2afae";
     readonly colorHover: "#d3d3d3";

package/build/tokens/components/dark/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: '#ebebeb',
     colorActive: '#b2afae',
     colorHover: '#d3d3d3',

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

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly barColor: "#4c473d";
+    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: "#ff634a";
+        readonly defaultColor: "#c6b5e2";
+        readonly successColor: "#36bf7d";
+    };
+};
+export default _default;

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

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    barColor: '#4c473d',
+    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: '#ff634a',
+        defaultColor: '#c6b5e2',
+        successColor: '#36bf7d',
+    },
+};

package/build/tokens/components/dark/segmented-control.d.ts

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderRadius: 6;
+    readonly borderRadius: 9999;
     readonly gap: 6;
     readonly group: {
-        readonly borderRadius: 8;
+        readonly borderRadius: 9999;
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;

package/build/tokens/components/dark/segmented-control.js

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderRadius: 6,
+    borderRadius: 9999,
     gap: 6,
     group: {
-        borderRadius: 8,
+        borderRadius: 9999,
         borderWidth: 1,
         gap: 4,
         height: 48,

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

@@ -13,6 +13,9 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly neutral: {
+            readonly backgroundColor: "#30302c";
+        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

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

@@ -13,6 +13,9 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        neutral: {
+            backgroundColor: '#30302c',
+        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

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

@@ -5,7 +5,20 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
+    readonly focus: "#101010";
     readonly gap: 8;
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly padding: 14;
 };
 export default _default;

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

@@ -5,6 +5,19 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
+    focus: '#101010',
     gap: 8,
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     padding: 14,
 };

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

@@ -6,6 +6,9 @@ declare const _default: {
     readonly borderWidth: 2;
     readonly checked: {
         readonly backgroundColor: "#101010";
+        readonly icon: {
+            readonly color: "#fcfbf2";
+        };
     };
     readonly gap: 12;
     readonly group: {

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

@@ -6,6 +6,9 @@ export default {
     borderWidth: 2,
     checked: {
         backgroundColor: '#101010',
+        icon: {
+            color: '#fcfbf2',
+        },
     },
     gap: 12,
     group: {

package/build/tokens/components/light/date-picker.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
         readonly item: {
             readonly borderRadius: 8;
             readonly minWidth: 32;
+            readonly rangeBackground: "#f7f7f7";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;

package/build/tokens/components/light/date-picker.js

@@ -20,6 +20,7 @@ export default {
         item: {
             borderRadius: 8,
             minWidth: 32,
+            rangeBackground: '#f7f7f7',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

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;

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,

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

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

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

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

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

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -33,6 +34,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

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
@@ -33,6 +34,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/segmented-control.d.ts

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderRadius: 6;
+    readonly borderRadius: 9999;
     readonly gap: 6;
     readonly group: {
-        readonly borderRadius: 8;
+        readonly borderRadius: 9999;
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;

package/build/tokens/components/light/segmented-control.js

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderRadius: 6,
+    borderRadius: 9999,
     gap: 6,
     group: {
-        borderRadius: 8,
+        borderRadius: 9999,
         borderWidth: 1,
         gap: 4,
         height: 48,

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

@@ -13,6 +13,9 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly neutral: {
+            readonly backgroundColor: "#f1efe4";
+        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

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

@@ -13,6 +13,9 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        neutral: {
+            backgroundColor: '#f1efe4',
+        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

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/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)',
+    },
+};