@utilitywarehouse/hearth-react-native 0.32.4 → 0.33.0

package/.storybook/main.ts

@@ -71,16 +71,6 @@ const config = {
         ...config.optimizeDeps,
         exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
       },
-      build: {
-        ...config.build,
-        rolldownOptions: {
-          ...config.build?.rolldownOptions,
-          external: [
-            ...(config.build?.rolldownOptions?.external || []),
-            '@react-stately/utils',
-          ],
-        },
-      },
     };
   },
 };

package/.storybook/vitest.setup.ts

@@ -1,4 +1,3 @@
-import { setProjectAnnotations } from '@storybook/react-native-web-vite';
 import { vi } from 'vitest';
 
 // react-native-unistyles/mocks relies on Jest globals.
@@ -30,10 +29,3 @@ StyleSheet.configure({
     adaptiveThemes: false,
   },
 });
-
-const a11yAddonAnnotations = await import('@storybook/addon-a11y/preview');
-const projectAnnotations = await import('./preview');
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations as any, projectAnnotations as any]);

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.33.0
+
+### Minor Changes
+
+- [#1298](https://github.com/utilitywarehouse/hearth/pull/1298) [`43bf936`](https://github.com/utilitywarehouse/hearth/commit/43bf936fa03db109c669369cac6d0483877ae49a) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Remove component color tokens in favour of semantic tokens
+
+  Updated `TabsList` to use `theme.color.border.strong` and removed the
+  `tabs.divider.color` component token (and other unused component color tokens)
+  in favour of semantic tokens.
+
+## 0.32.5
+
+### Patch Changes
+
+- [#1261](https://github.com/utilitywarehouse/hearth/pull/1261) [`745df73`](https://github.com/utilitywarehouse/hearth/commit/745df73a245dfe89d07aae5bac14256a4ff89e0a) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Update dependencies
+
 ## 0.32.4
 
 ### Patch Changes

package/build/components/Accordion/Accordion.d.ts

@@ -5,7 +5,7 @@ export declare const AccordionTrigger: import("react").ForwardRefExoticComponent
     states?: {
         active?: boolean;
     };
-}, "children"> & import("@gluestack-ui/accordion/lib/typescript/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native/types").PressableProps & {
+}, "children"> & import("@gluestack-ui/accordion/lib/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native/types").PressableProps & {
     states?: {
         active?: boolean;
     };

package/build/components/Tabs/TabsList.js

@@ -67,7 +67,7 @@ const styles = StyleSheet.create(theme => ({
         position: 'relative',
         width: '100%',
         borderBottomWidth: theme.components.tabs.divider.borderWidth,
-        borderColor: theme.components.tabs.divider.color,
+        borderColor: theme.color.border.strong,
     },
     scrollContent: {
         paddingBottom: 0,

package/build/core/themes.d.ts

@@ -1358,7 +1358,7 @@ export declare const lightTheme: {
             readonly '1000': "#26164f";
         };
         readonly red: {
-            readonly '0': "#fffaf9";
+            readonly '0': "#fff6f5";
             readonly '50': "#fff3f1";
             readonly '100': "#ffe3df";
             readonly '200': "#ffccc5";
@@ -2775,7 +2775,7 @@ export declare const darkTheme: {
             readonly '1000': "#26164f";
         };
         readonly red: {
-            readonly '0': "#fffaf9";
+            readonly '0': "#fff6f5";
             readonly '50': "#fff3f1";
             readonly '100': "#ffe3df";
             readonly '200': "#ffccc5";
@@ -4182,7 +4182,7 @@ export declare const themes: {
                 readonly '1000': "#26164f";
             };
             readonly red: {
-                readonly '0': "#fffaf9";
+                readonly '0': "#fff6f5";
                 readonly '50': "#fff3f1";
                 readonly '100': "#ffe3df";
                 readonly '200': "#ffccc5";
@@ -5599,7 +5599,7 @@ export declare const themes: {
                 readonly '1000': "#26164f";
             };
             readonly red: {
-                readonly '0': "#fffaf9";
+                readonly '0': "#fff6f5";
                 readonly '50': "#fff3f1";
                 readonly '100': "#ffe3df";
                 readonly '200': "#ffccc5";

package/build/tokens/color.d.ts

@@ -170,7 +170,7 @@ export declare const purple: {
     readonly '1000': "#26164f";
 };
 export declare const red: {
-    readonly '0': "#fffaf9";
+    readonly '0': "#fff6f5";
     readonly '50': "#fff3f1";
     readonly '100': "#ffe3df";
     readonly '200': "#ffccc5";
@@ -881,7 +881,7 @@ declare const color: {
         readonly '1000': "#26164f";
     };
     readonly red: {
-        readonly '0': "#fffaf9";
+        readonly '0': "#fff6f5";
         readonly '50': "#fff3f1";
         readonly '100': "#ffe3df";
         readonly '200': "#ffccc5";

package/build/tokens/color.js

@@ -170,7 +170,7 @@ export const purple = {
     '1000': '#26164f',
 };
 export const red = {
-    '0': '#fffaf9',
+    '0': '#fff6f5',
     '50': '#fff3f1',
     '100': '#ffe3df',
     '200': '#ffccc5',

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

@@ -5,7 +5,6 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
-    readonly focus: "#101010";
     readonly gap: 8;
     readonly iconButton: {
         readonly unstyled: {

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

@@ -5,7 +5,6 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
-    focus: '#101010',
     gap: 8,
     iconButton: {
         unstyled: {

package/build/tokens/components/dark/bottom-navigation.d.ts

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderTopWidth: 2;
+    readonly borderTop: 2;
     readonly gap: 0;
     readonly indicator: {
         readonly borderRadius: 4;

package/build/tokens/components/dark/bottom-navigation.js

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderTopWidth: 2,
+    borderTop: 2,
     gap: 0,
     indicator: {
         borderRadius: 4,

package/build/tokens/components/dark/card-accordion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly buttonGroup: {
+        readonly gap: 12;
+    };
+    readonly gap: 24;
+    readonly item: {
+        readonly gap: 20;
+    };
+};
+export default _default;

package/build/tokens/components/dark/card-accordion.js

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    buttonGroup: {
+        gap: 12,
+    },
+    gap: 24,
+    item: {
+        gap: 20,
+    },
+};

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

@@ -18,6 +18,9 @@ declare const _default: {
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
         readonly gap: 16;
+        readonly label: {
+            readonly gap: 12;
+        };
     };
     readonly mobile: {
         readonly padding: 16;

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

@@ -18,6 +18,9 @@ export default {
         borderWidth: 1,
         borderWidthSelected: 2,
         gap: 16,
+        label: {
+            gap: 12,
+        },
     },
     mobile: {
         padding: 16,

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

@@ -12,7 +12,7 @@ declare const _default: {
     };
     readonly gap: 8;
     readonly group: {
-        readonly gap: 16;
+        readonly gap: 12;
         readonly stack: {
             readonly gap: 20;
         };

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

@@ -12,7 +12,7 @@ export default {
     },
     gap: 8,
     group: {
-        gap: 16,
+        gap: 12,
         stack: {
             gap: 20,
         },

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

@@ -5,7 +5,6 @@ declare const _default: {
     readonly borderWidth: 1;
     readonly divider: {
         readonly borderWidth: 2;
-        readonly color: "#ebebeb";
     };
 };
 export default _default;

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

@@ -5,6 +5,5 @@ export default {
     borderWidth: 1,
     divider: {
         borderWidth: 2,
-        color: '#ebebeb',
     },
 };

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

@@ -11,6 +11,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -11,6 +11,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -23,6 +23,9 @@ declare const _default: {
         };
     };
     readonly gap: 12;
+    readonly indicator: {
+        readonly padding: 8;
+    };
     readonly item: {
         readonly contentGap: 2;
         readonly functional: {

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

@@ -23,6 +23,9 @@ export default {
         },
     },
     gap: 12,
+    indicator: {
+        padding: 8,
+    },
     item: {
         contentGap: 2,
         functional: {

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

@@ -9,12 +9,53 @@ declare const _default: {
     readonly borderBottom: "#996cda";
     readonly borderRadius: 6;
     readonly desktop: {
+        readonly customer: {
+            readonly gap: 12;
+        };
         readonly height: 88;
+        readonly partner: {
+            readonly gap: 4;
+            readonly header: {
+                readonly gap: 24;
+            };
+            readonly padding: 24;
+        };
     };
     readonly dividerBorderColor: "#996cda";
-    readonly gap: 4;
+    readonly item: {
+        readonly customer: {
+            readonly container: {
+                readonly gap: 4;
+                readonly paddingHorizontal: 4;
+                readonly paddingVertical: 8;
+            };
+            readonly mobile: {
+                readonly container: {
+                    readonly paddingHorizontal: 8;
+                    readonly paddingVertical: 8;
+                };
+                readonly paddingHorizontal: 4;
+                readonly paddingVertical: 24;
+            };
+            readonly paddingHorizontal: 4;
+            readonly paddingVertical: 24;
+        };
+        readonly partner: {
+            readonly container: {
+                readonly gap: 4;
+                readonly padding: 8;
+            };
+            readonly paddingHorizontal: 16;
+            readonly sub: {
+                readonly paddingLeft: 32;
+                readonly paddingRight: 16;
+            };
+        };
+    };
     readonly mobile: {
+        readonly gap: 12;
         readonly height: 64;
+        readonly padding: 16;
     };
 };
 export default _default;

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

@@ -9,11 +9,52 @@ export default {
     borderBottom: '#996cda',
     borderRadius: 6,
     desktop: {
+        customer: {
+            gap: 12,
+        },
         height: 88,
+        partner: {
+            gap: 4,
+            header: {
+                gap: 24,
+            },
+            padding: 24,
+        },
     },
     dividerBorderColor: '#996cda',
-    gap: 4,
+    item: {
+        customer: {
+            container: {
+                gap: 4,
+                paddingHorizontal: 4,
+                paddingVertical: 8,
+            },
+            mobile: {
+                container: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 8,
+                },
+                paddingHorizontal: 4,
+                paddingVertical: 24,
+            },
+            paddingHorizontal: 4,
+            paddingVertical: 24,
+        },
+        partner: {
+            container: {
+                gap: 4,
+                padding: 8,
+            },
+            paddingHorizontal: 16,
+            sub: {
+                paddingLeft: 32,
+                paddingRight: 16,
+            },
+        },
+    },
     mobile: {
+        gap: 12,
         height: 64,
+        padding: 16,
     },
 };

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

@@ -4,6 +4,7 @@
 declare const _default: {
     readonly gap: 8;
     readonly item: {
+        readonly gap: 2;
         readonly height: 40;
         readonly radius: 8;
         readonly width: 40;

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

@@ -4,6 +4,7 @@
 export default {
     gap: 8,
     item: {
+        gap: 2,
         height: 40,
         radius: 8,
         width: 40,

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

@@ -9,7 +9,7 @@ declare const _default: {
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;
-        readonly padding: 4;
+        readonly padding: 2;
     };
     readonly height: 40;
     readonly minWidth: 66;

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

@@ -9,7 +9,7 @@ export default {
         borderWidth: 1,
         gap: 4,
         height: 48,
-        padding: 4,
+        padding: 2,
     },
     height: 40,
     minWidth: 66,

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

@@ -4,7 +4,6 @@
 declare const _default: {
     readonly divider: {
         readonly borderWidth: 2;
-        readonly color: "#ebebeb";
     };
     readonly gap: 12;
     readonly item: {

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

@@ -4,7 +4,6 @@
 export default {
     divider: {
         borderWidth: 2,
-        color: '#ebebeb',
     },
     gap: 12,
     item: {

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

@@ -6,6 +6,7 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly gapHorizontal: 8;
     readonly gapVertical: 2;
+    readonly maxWidth: 680;
     readonly paddingHorizontal: 12;
     readonly paddingVertical: 8;
 };

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

@@ -6,6 +6,7 @@ export default {
     borderRadius: 8,
     gapHorizontal: 8,
     gapVertical: 2,
+    maxWidth: 680,
     paddingHorizontal: 12,
     paddingVertical: 8,
 };

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

@@ -5,7 +5,6 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
-    readonly focus: "#101010";
     readonly gap: 8;
     readonly iconButton: {
         readonly unstyled: {

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

@@ -5,7 +5,6 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
-    focus: '#101010',
     gap: 8,
     iconButton: {
         unstyled: {

package/build/tokens/components/light/bottom-navigation.d.ts

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderTopWidth: 2;
+    readonly borderTop: 2;
     readonly gap: 0;
     readonly indicator: {
         readonly borderRadius: 4;

package/build/tokens/components/light/bottom-navigation.js

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderTopWidth: 2,
+    borderTop: 2,
     gap: 0,
     indicator: {
         borderRadius: 4,

package/build/tokens/components/light/card-accordion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly buttonGroup: {
+        readonly gap: 12;
+    };
+    readonly gap: 24;
+    readonly item: {
+        readonly gap: 20;
+    };
+};
+export default _default;

package/build/tokens/components/light/card-accordion.js

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    buttonGroup: {
+        gap: 12,
+    },
+    gap: 24,
+    item: {
+        gap: 20,
+    },
+};

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

@@ -18,6 +18,9 @@ declare const _default: {
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
         readonly gap: 16;
+        readonly label: {
+            readonly gap: 12;
+        };
     };
     readonly mobile: {
         readonly padding: 16;

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

@@ -18,6 +18,9 @@ export default {
         borderWidth: 1,
         borderWidthSelected: 2,
         gap: 16,
+        label: {
+            gap: 12,
+        },
     },
     mobile: {
         padding: 16,

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

@@ -12,7 +12,7 @@ declare const _default: {
     };
     readonly gap: 8;
     readonly group: {
-        readonly gap: 16;
+        readonly gap: 12;
         readonly stack: {
             readonly gap: 20;
         };

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

@@ -12,7 +12,7 @@ export default {
     },
     gap: 8,
     group: {
-        gap: 16,
+        gap: 12,
         stack: {
             gap: 20,
         },

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

@@ -5,7 +5,6 @@ declare const _default: {
     readonly borderWidth: 1;
     readonly divider: {
         readonly borderWidth: 2;
-        readonly color: "#101010";
     };
 };
 export default _default;

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

@@ -5,6 +5,5 @@ export default {
     borderWidth: 1,
     divider: {
         borderWidth: 2,
-        color: '#101010',
     },
 };

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

@@ -11,6 +11,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -11,6 +11,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -23,6 +23,9 @@ declare const _default: {
         };
     };
     readonly gap: 12;
+    readonly indicator: {
+        readonly padding: 8;
+    };
     readonly item: {
         readonly contentGap: 2;
         readonly functional: {