@utilitywarehouse/hearth-react-native 0.33.0 → 0.33.1

package/.storybook/manager.ts

@@ -1,7 +1,7 @@
 import '@utilitywarehouse/hearth-fonts';
 import { addons } from 'storybook/manager-api';
-import '../../../shared/storybook/styles/manager.css';
-import { config } from '../../../shared/storybook/theme';
+import '@utilitywarehouse/hearth-storybook-utils/styles/manager.css';
+import { config } from '@utilitywarehouse/hearth-storybook-utils';
 import { create } from 'storybook/theming';
 
 const theme = create(config);

package/.storybook/preview.tsx

@@ -4,11 +4,11 @@ import { color } from '@utilitywarehouse/hearth-tokens';
 import '@utilitywarehouse/hearth-tokens/index.css';
 import { useEffect } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import '../../../shared/storybook/styles/diff-highlighting.css';
-import '../../../shared/storybook/styles/preview.css';
+import '@utilitywarehouse/hearth-storybook-utils/styles/diff-highlighting.css';
+import '@utilitywarehouse/hearth-storybook-utils/styles/preview.css';
 import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
 import { initializePrism } from './prism-setup';
-import { config } from '../../../shared/storybook/theme';
+import { config } from '@utilitywarehouse/hearth-storybook-utils';
 import { create } from 'storybook/theming';
 
 const theme = create(config);

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.33.1
+
+### Patch Changes
+
+- [#1311](https://github.com/utilitywarehouse/hearth/pull/1311) [`3d286c9`](https://github.com/utilitywarehouse/hearth/commit/3d286c97710a1483a054e4b19c2453920cda4598) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Update token usage for Divider
+
 ## 0.33.0
 
 ### Minor Changes

package/build/components/Accordion/AccordionItemRoot.js

@@ -10,8 +10,8 @@ const AccordionItem = ({ children, style, noPadding, disabled, ...props }) => {
 AccordionItem.displayName = 'AccordionItemRoot';
 const styles = StyleSheet.create(theme => ({
     item: {
-        borderBottomWidth: theme.components.divider.borderWidth,
-        borderBottomColor: theme.color.border.subtle,
+        borderBottomWidth: theme.components.divider.size,
+        borderBottomColor: theme.components.divider.color,
     },
 }));
 export default AccordionItem;

package/build/components/Divider/Divider.js

@@ -14,16 +14,16 @@ const Divider = ({ orientation = 'horizontal', color, spacing, space, height, wi
 Divider.displayName = 'Divider';
 const styles = StyleSheet.create(theme => ({
     divider: {
-        backgroundColor: theme.color.border.subtle,
+        backgroundColor: theme.components.divider.color,
         variants: {
             orientation: {
                 horizontal: {
                     width: '100%',
-                    height: theme.components.divider.borderWidth,
+                    height: theme.components.divider.size,
                 },
                 vertical: {
                     height: '100%',
-                    width: theme.components.divider.borderWidth,
+                    width: theme.components.divider.size,
                 },
             },
             spacing: {

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

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderWidth: 1;
+    readonly color: "#5b5b5b";
+    readonly size: 1;
     readonly divider: {
         readonly borderWidth: 2;
     };

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

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderWidth: 1,
+    color: '#5b5b5b',
+    size: 1,
     divider: {
         borderWidth: 2,
     },

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

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderWidth: 1;
+    readonly color: "#d4d2c0";
+    readonly size: 1;
     readonly divider: {
         readonly borderWidth: 2;
     };

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

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderWidth: 1,
+    color: '#d4d2c0',
+    size: 1,
     divider: {
         borderWidth: 2,
     },

package/docs/changelog.mdx

@@ -9,6 +9,12 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.33.1
+
+### Patch Changes
+
+- [#1311](https://github.com/utilitywarehouse/hearth/pull/1311) [`3d286c9`](https://github.com/utilitywarehouse/hearth/commit/3d286c97710a1483a054e4b19c2453920cda4598) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Update token usage for Divider
+
 ## 0.33.0
 
 ### Minor Changes

package/docs/components/AllComponents.web.tsx

@@ -22,7 +22,7 @@ import { color } from '@utilitywarehouse/hearth-tokens';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
-import { navigateToStory } from '../../../../shared/storybook/storybookLinks';
+import { navigateToStory } from '@utilitywarehouse/hearth-storybook-utils';
 import {
   Accordion,
   AccordionItem,

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet, View } from 'react-native';
-import StorybookLink from '../../../../shared/storybook/StorybookLink';
+import { StorybookLink } from '@utilitywarehouse/hearth-storybook-utils';
 import { Card, CardPressHandler, Heading, Link } from '../../src';
 
 type NextPrevPageProps = {

package/docs/components/index.ts

@@ -1,4 +1,4 @@
-export { default as StorybookLink } from '../../../../shared/storybook/StorybookLink';
+export { StorybookLink } from '@utilitywarehouse/hearth-storybook-utils';
 export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
 export { default as BadgeList } from './BadgeList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -59,6 +59,7 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
+    "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.2",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",

package/src/components/Accordion/AccordionItemRoot.tsx

@@ -19,8 +19,8 @@ AccordionItem.displayName = 'AccordionItemRoot';
 
 const styles = StyleSheet.create(theme => ({
   item: {
-    borderBottomWidth: theme.components.divider.borderWidth,
-    borderBottomColor: theme.color.border.subtle,
+    borderBottomWidth: theme.components.divider.size,
+    borderBottomColor: theme.components.divider.color,
   },
 }));
 

package/src/components/Divider/Divider.tsx

@@ -31,16 +31,16 @@ Divider.displayName = 'Divider';
 
 const styles = StyleSheet.create(theme => ({
   divider: {
-    backgroundColor: theme.color.border.subtle,
+    backgroundColor: theme.components.divider.color,
     variants: {
       orientation: {
         horizontal: {
           width: '100%',
-          height: theme.components.divider.borderWidth,
+          height: theme.components.divider.size,
         },
         vertical: {
           height: '100%',
-          width: theme.components.divider.borderWidth,
+          width: theme.components.divider.size,
         },
       },
       spacing: {

package/src/tokens/components/dark/divider.ts

@@ -3,7 +3,8 @@
  */
 
 export default {
-  borderWidth: 1,
+  color: '#5b5b5b',
+  size: 1,
   divider: {
     borderWidth: 2,
   },

package/src/tokens/components/light/divider.ts

@@ -3,7 +3,8 @@
  */
 
 export default {
-  borderWidth: 1,
+  color: '#d4d2c0',
+  size: 1,
   divider: {
     borderWidth: 2,
   },