@utilitywarehouse/hearth-react-native 0.3.0 → 0.3.1

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

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,

package/build/tokens/semantic-dark.d.ts

@@ -3,7 +3,7 @@
  */
 declare const _default: {
     readonly background: {
-        readonly brand: "#996cda";
+        readonly brand: "#7a42c8";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -79,7 +79,7 @@ declare const _default: {
     readonly interactive: {
         readonly affirmative: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly foreground: {
@@ -115,7 +115,7 @@ declare const _default: {
         };
         readonly destructive: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly foreground: {
@@ -163,7 +163,7 @@ declare const _default: {
         };
         readonly highlight: {
             readonly border: {
-                readonly strong: "#f7f7f7";
+                readonly strong: "#101010";
             };
             readonly foreground: {
                 readonly strong: "#101010";
@@ -246,7 +246,7 @@ declare const _default: {
     readonly text: {
         readonly affirmative: "#58ca93";
         readonly brand: "#af90de";
-        readonly inverted: "#191917";
+        readonly inverted: "#fcfbf2";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";
     };

package/build/tokens/semantic-dark.js

@@ -3,7 +3,7 @@
  */
 export default {
     background: {
-        brand: '#996cda',
+        brand: '#7a42c8',
         primary: '#191917',
         secondary: '#232323',
     },
@@ -79,7 +79,7 @@ export default {
     interactive: {
         affirmative: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#58ca93',
             },
             foreground: {
@@ -115,7 +115,7 @@ export default {
         },
         destructive: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#ff7964',
             },
             foreground: {
@@ -163,7 +163,7 @@ export default {
         },
         highlight: {
             border: {
-                strong: '#f7f7f7',
+                strong: '#101010',
             },
             foreground: {
                 strong: '#101010',
@@ -246,7 +246,7 @@ export default {
     text: {
         affirmative: '#58ca93',
         brand: '#af90de',
-        inverted: '#191917',
+        inverted: '#fcfbf2',
         primary: '#ebebeb',
         secondary: '#b2afae',
     },

package/build/tokens/semantic-light.d.ts

@@ -248,7 +248,7 @@ declare const _default: {
         readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
-        readonly secondary: "#888888";
+        readonly secondary: "#5b5b5b";
     };
 };
 export default _default;

package/build/tokens/semantic-light.js

@@ -248,6 +248,6 @@ export default {
         brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
-        secondary: '#888888',
+        secondary: '#5b5b5b',
     },
 };

package/docs/components/index.ts

@@ -1,11 +1,10 @@
-export { default as VariantTitle } from './VariantTitle';
-export { default as UsageWrap } from './UsageWrap';
+export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
-export { default as ViewFigmaButton } from './ViewFigmaButton';
-export { default as DocComponentWrap } from './DocComponentWrap';
 export { default as BadgeList } from './BadgeList';
-export { default as AdvancedInputExample } from './AdvancedInputExample';
+export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as NextPrevPage } from './NextPrevPage';
 export { default as SwitchExample } from './SwitchExample';
 export { default as SwitchList } from './SwitchList';
-export { default as AdvancedRadioExample } from './AdvancedRadioExample';
-export { default as NextPrevPage } from './NextPrevPage';
+export { default as UsageWrap } from './UsageWrap';
+export { default as VariantTitle } from './VariantTitle';
+export { default as ViewFigmaButton } from './ViewFigmaButton';

package/docs/introduction.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import pig from '../../../shared/storybook/assets/images/react-native-pig.png';
 import { version } from '../package.json';
 import { Box } from '../src';
-import pig from './assets/react-native-pig.png';
 import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Introduction" />
@@ -39,7 +39,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -63,7 +63,7 @@ The `@utilitywarehouse/hearth-react-native` library uses a few packages under th
 as well as fonts and icons. Feel free to additionally install these packages if you need to use them in your project.
 
 ```console
-npm install @utilitywarehouse/hearth-tokens @utilitywarehouse/hearth-react-native-icons
+npm install @utilitywarehouse/hearth-tokens
 ```
 
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -20,23 +20,22 @@
     "@gluestack-ui/radio": "0.1.33",
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
-    "@gluestack-ui/textarea": "0.1.23",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.1.0"
+    "@gluestack-ui/textarea": "0.1.23"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@chromatic-com/storybook": "^4.1.1",
     "@figma/code-connect": "^1.3.3",
     "@gorhom/bottom-sheet": "5.1.6",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-vitest": "^9.1.3",
-    "@storybook/react-native-web-vite": "^9.1.3",
+    "@storybook/addon-a11y": "^9.1.6",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-vitest": "^9.1.6",
+    "@storybook/react-native-web-vite": "^9.1.6",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint-plugin-storybook": "9.1.3",
+    "eslint-plugin-storybook": "9.1.6",
     "playwright": "^1.53.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -49,16 +48,18 @@
     "react-native-unistyles": "3.0.10",
     "react-native-web": "^0.20.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.6",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.1.1",
-    "@utilitywarehouse/hearth-tokens": "^0.0.8"
+    "@utilitywarehouse/hearth-react-native-icons": "^0.4.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.4.0",
+    "@utilitywarehouse/hearth-tokens": "^0.1.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
+    "@utilitywarehouse/hearth-react-native-icons": "~0.4.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",

package/src/components/Alert/AlertCloseButton.tsx

@@ -3,22 +3,50 @@ import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertCloseButton = ({
   style,
   icon = CloseSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={[styles.icon, style as ViewStyle]} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={[styles.button, style as ViewStyle]}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
 
 const styles = StyleSheet.create(theme => ({
-  icon: {
+  button: {
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
     minWidth: 20,
     minHeight: 20,
   },
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
 }));
 
 AlertCloseButton.displayName = 'AlertCloseButton';