@utilitywarehouse/hearth-react-native 0.32.2 → 0.32.3

package/.storybook/main.ts

@@ -1,5 +1,5 @@
-import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
 import remarkGfm from 'remark-gfm';
 import svgr from 'vite-plugin-svgr';
 
@@ -14,9 +14,9 @@ const unistylesPluginOptions = {
 const config = {
   stories: ['../**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath('@chromatic-com/storybook'),
     {
-      name: getAbsolutePath("@storybook/addon-docs"),
+      name: getAbsolutePath('@storybook/addon-docs'),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
@@ -25,11 +25,11 @@ const config = {
         },
       },
     },
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-vitest"),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-vitest'),
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-native-web-vite"),
+    name: getAbsolutePath('@storybook/react-native-web-vite'),
     options: {
       pluginReactOptions: {
         babel: {

package/.storybook/manager.ts

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

package/.storybook/preview.tsx

@@ -6,9 +6,12 @@ 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 theme from '../../../shared/storybook/theme';
 import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
 import { initializePrism } from './prism-setup';
+import { config } from '../../../shared/storybook/theme';
+import { create } from 'storybook/theming';
+
+const theme = create(config);
 
 // Initialize Prism.js for syntax highlighting
 initializePrism();

package/.turbo/turbo-build.log

@@ -1,4 +1 @@
-
-> @utilitywarehouse/hearth-react-native@0.32.2 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+$ tsc

package/.turbo/{turbo-lint.log → turbo-lint$colon$fix.log}

@@ -1,7 +1,4 @@
-
-> @utilitywarehouse/hearth-react-native@0.32.2 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
+$ TIMING=1 eslint --fix .
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
   6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
@@ -45,15 +42,15 @@
 
 ✖ 20 problems (0 errors, 20 warnings)
 
-Rule                                     | Time (ms) | Relative
-:----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars        |  1652.894 |    62.0%
-react-hooks/exhaustive-deps              |   139.717 |     5.2%
-react-hooks/rules-of-hooks               |   103.240 |     3.9%
-no-global-assign                         |    68.299 |     2.6%
-no-misleading-character-class            |    54.368 |     2.0%
-no-unexpected-multiline                  |    52.346 |     2.0%
-@typescript-eslint/ban-ts-comment        |    50.938 |     1.9%
-no-useless-escape                        |    46.618 |     1.7%
-no-loss-of-precision                     |    37.323 |     1.4%
-@typescript-eslint/no-unused-expressions |    32.985 |     1.2%
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1235.710 |    58.8%
+react-hooks/rules-of-hooks        |    84.526 |     4.0%
+react-hooks/exhaustive-deps       |    83.725 |     4.0%
+no-global-assign                  |    63.566 |     3.0%
+no-useless-escape                 |    42.579 |     2.0%
+no-unexpected-multiline           |    40.934 |     1.9%
+no-fallthrough                    |    40.545 |     1.9%
+@typescript-eslint/ban-ts-comment |    37.277 |     1.8%
+no-regex-spaces                   |    35.268 |     1.7%
+no-misleading-character-class     |    28.595 |     1.4%

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.32.3
+
+### Patch Changes
+
+- [#1192](https://github.com/utilitywarehouse/hearth/pull/1192) [`a74bf02`](https://github.com/utilitywarehouse/hearth/commit/a74bf02c58c12e1b42351e0d7f8e3e79ea0acbd6) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Fix dependencies and types
+
 ## 0.32.2
 
 ### Patch Changes

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

@@ -1,19 +1,19 @@
 import { AccordionProps } from './Accordion.props';
 import { AccordionItemProps } from './AccordionItem.props';
-export declare const AccordionHeader: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").ViewProps>>;
-export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-native").PressableProps & {
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<import("react-native/types").ViewProps & import("react").RefAttributes<import("react-native/types").ViewProps>>;
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-native/types").PressableProps & {
     states?: {
         active?: boolean;
     };
-}, "children"> & import("@gluestack-ui/accordion/lib/typescript/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native").PressableProps & {
+}, "children"> & import("@gluestack-ui/accordion/lib/typescript/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native/types").PressableProps & {
     states?: {
         active?: boolean;
     };
 }>>;
-export declare const AccordionContent: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").ViewProps>>;
-export declare const AccordionContentText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<import("react-native/types").ViewProps & import("react").RefAttributes<import("react-native/types").ViewProps>>;
+export declare const AccordionContentText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 export declare const AccordionIcon: import("react").ForwardRefExoticComponent<import("..").IconProps & import("react").RefAttributes<import("..").IconProps>>;
-export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 declare const Accordion: {
     ({ children, collapsible, type, heading, helperText, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Banner/Banner.props.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type CardProps from '../Card/Card.props';
 export type BannerDirection = 'horizontal' | 'vertical';
 export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
@@ -71,5 +72,6 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'center'
      */
     alignChevron?: 'center' | 'start' | 'end';
+    style?: StyleProp<ViewStyle>;
 }
 export default BannerProps;

package/build/components/Button/Button.d.ts

@@ -1,15 +1,15 @@
 import type { ButtonProps } from './Button.props';
-export declare const ButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextProps> & import("react-native").TextProps>;
+export declare const ButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextProps> & import("react-native/types").TextProps>;
 export declare const ButtonSpinner: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").SpinnerProps, "size">, "ref"> & import("react").RefAttributes<Omit<import("..").SpinnerProps, "size">>>;
 export declare const ButtonIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps>;
-export declare const ButtonGroupComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps & {
-    flexDirection?: import("react-native").ViewStyle["flexDirection"];
+export declare const ButtonGroupComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps & {
+    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
     spacing?: import("../../types").SpacingValues;
-}> & import("react-native").ViewProps & {
-    flexDirection?: import("react-native").ViewStyle["flexDirection"];
+}> & import("react-native/types").ViewProps & {
+    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;

package/build/components/Card/Card.d.ts

@@ -3,7 +3,7 @@ declare const Card: import("react").ForwardRefExoticComponent<import("./Card.pro
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Card/CardAction/CardAction.d.ts

@@ -4,7 +4,7 @@ declare const CardAction: import("react").ForwardRefExoticComponent<(((import(".
         disabled?: boolean;
     };
     isFirst?: boolean;
-}) & Omit<import("react-native").PressableProps, "children">) & {
+}) & Omit<import("react-native/types").PressableProps, "children">) & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Carousel/CarouselControlItem.d.ts

@@ -10,7 +10,7 @@ declare const CarouselControlItem: import("react").ForwardRefExoticComponent<Car
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Checkbox/Checkbox.d.ts

@@ -4,7 +4,7 @@ declare const CheckboxGroup: import("react").ForwardRefExoticComponent<import("r
 }> & import("./CheckboxGroup.props").default & {
     isCard?: boolean;
 } & import("@gluestack-ui/checkbox/lib/typescript/types").ICheckboxGroup>;
-declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
 declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;

package/build/components/ExpandableCard/ExpandableCardTrigger.d.ts

@@ -3,7 +3,7 @@ declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<(
         active?: boolean;
         disabled?: boolean;
     };
-}) & Omit<import("react-native").PressableProps, "children">) & {
+}) & Omit<import("react-native/types").PressableProps, "children">) & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/FormField/FormField.d.ts

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 import FormFieldProps from './FormField.props';
-export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
+export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native/types").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
 export declare const FormFieldLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>> & {
     Text: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 };

package/build/components/Icons/CircleIcon.d.ts

@@ -1,5 +1,5 @@
 declare const CircleIcon: import("@gluestack-ui/icon/lib/typescript/createIcon").IIconComponentType<import("react-native-svg").SvgProps | {
-    fill?: import("react-native").ColorValue | undefined;
-    stroke?: import("react-native").ColorValue | undefined;
+    fill?: import("react-native/types").ColorValue | undefined;
+    stroke?: import("react-native/types").ColorValue | undefined;
 }>;
 export default CircleIcon;

package/build/components/Input/Input.d.ts

@@ -9,13 +9,13 @@ export declare const InputComponent: import("@gluestack-ui/input/lib/typescript/
     };
 }, import("..").IconProps & {
     as?: ComponentType;
-}, import("react-native").ViewProps, import("react-native").TextInputProps & {
+}, import("react-native/types").ViewProps, import("react-native/types").TextInputProps & {
     inBottomSheet?: boolean;
 } & import("react").RefAttributes<TextInput>>;
-export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
-export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps & {
+export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
+export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextInputProps & {
     inBottomSheet?: boolean;
-} & import("react").RefAttributes<TextInput>> & Omit<import("react-native").TextInputProps & {
+} & import("react").RefAttributes<TextInput>> & Omit<import("react-native/types").TextInputProps & {
     inBottomSheet?: boolean;
 } & import("react").RefAttributes<TextInput>, "ref"> & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
 export declare const InputIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {

package/build/components/Input/InputField.js

@@ -10,9 +10,7 @@ const InputField = forwardRef(({ style, inBottomSheet = false, ...props }, ref)
     styles.useVariants({ focused, type });
     const { color } = useTheme();
     if (inBottomSheet) {
-        return (
-        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
-        _jsx(BottomSheetTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+        return (_jsx(BottomSheetTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
     }
     return (_jsx(RNTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 });

package/build/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from './Link.props';
-export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 declare const Link: {
     ({ children, icon, disabled, target, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/List/ListAction/ListAction.d.ts

@@ -4,7 +4,7 @@ declare const ListAction: import("react").ForwardRefExoticComponent<ListActionPr
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/List/ListItem/ListItem.d.ts

@@ -3,7 +3,7 @@ declare const ListItem: import("react").ForwardRefExoticComponent<(((import("./L
         active?: boolean;
         disabled?: boolean;
     };
-}) & Omit<import("react-native").PressableProps, "children">) & {
+}) & Omit<import("react-native/types").PressableProps, "children">) & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Menu/MenuItem.d.ts

@@ -4,7 +4,7 @@ declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/PillGroup/Pill.d.ts

@@ -3,7 +3,7 @@ export declare const Pill: import("react").ForwardRefExoticComponent<PillProps &
     states?: {
         active?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Radio/Radio.d.ts

@@ -4,7 +4,7 @@ declare const RadioGroup: import("react").ForwardRefExoticComponent<import("reac
 }> & import("./RadioGroup.props").default & {
     isCard?: boolean;
 } & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps>;
-declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
 declare const RadioIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;

package/build/components/RadioCard/RadioCard.d.ts

@@ -5,25 +5,25 @@ declare const RadioCardGroup: import("react").ForwardRefExoticComponent<import("
     onChange?: (value: string) => void;
     gap?: keyof typeof import("../../tokens").space;
     ref?: import("react").Ref<View>;
-} & import("react-native").ViewProps & {
+} & import("react-native/types").ViewProps & {
     columns?: never;
-    flexDirection?: import("react-native").ViewStyle["flexDirection"];
-    flexWrap?: import("react-native").ViewStyle["flexWrap"];
-    alignItems?: import("react-native").ViewStyle["alignItems"];
-    justifyContent?: import("react-native").ViewStyle["justifyContent"];
+    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
+    flexWrap?: import("react-native/types").ViewStyle["flexWrap"];
+    alignItems?: import("react-native/types").ViewStyle["alignItems"];
+    justifyContent?: import("react-native/types").ViewStyle["justifyContent"];
 }, "ref"> | Omit<{
     value?: string;
     onChange?: (value: string) => void;
     gap?: keyof typeof import("../../tokens").space;
     ref?: import("react").Ref<View>;
-} & import("react-native").ViewProps & {
+} & import("react-native/types").ViewProps & {
     columns: import("..").GridProps["columns"];
     flexDirection?: never;
     flexWrap?: never;
     alignItems?: never;
     justifyContent?: never;
 }, "ref">) & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps)>;
-declare const RadioCardIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const RadioCardIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
 declare const RadioCardIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;

package/build/components/SegmentedControl/SegmentedControlOption.d.ts

@@ -4,7 +4,7 @@ declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/StepperInput/StepperButton.d.ts

@@ -8,7 +8,7 @@ declare const StepperButton: import("react").ForwardRefExoticComponent<{
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Tabs/Tab.d.ts

@@ -4,7 +4,7 @@ declare const PressableTab: import("react").ForwardRefExoticComponent<TabProps &
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<import("react-native/types").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Tabs/Tab.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useTabsContext } from './Tabs.context';
-import { createPressable } from '@gluestack-ui/pressable';
-import { BodyText } from '../BodyText';
 const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     const { value: active, select, size, disabled: allDisabled, registerTabLayout, } = useTabsContext();
     const { active: pressed } = states || { active: false };

package/build/components/Textarea/Textarea.d.ts

@@ -5,7 +5,7 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
         disabled?: boolean;
         readonly?: boolean;
     };
-}, import("react-native").TextInputProps>;
-export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
+}, import("react-native/types").TextInputProps>;
+export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & import("react").RefAttributes<import("react-native/types").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
 declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/ToggleButton/ToggleButton.d.ts

@@ -1,7 +1,7 @@
 import type { ToggleButtonProps } from './ToggleButton.props';
-export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextProps & {
+export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextProps & {
     toggled: boolean;
-}> & import("react-native").TextProps & {
+}> & import("react-native/types").TextProps & {
     toggled: boolean;
 }>;
 export declare const ToggleButtonIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {

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.32.3
+
+### Patch Changes
+
+- [#1192](https://github.com/utilitywarehouse/hearth/pull/1192) [`a74bf02`](https://github.com/utilitywarehouse/hearth/commit/a74bf02c58c12e1b42351e0d7f8e3e79ea0acbd6) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Fix dependencies and types
+
 ## 0.32.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -9,6 +9,7 @@
   "sideEffects": false,
   "dependencies": {
     "@gluestack-ui/accordion": "1.0.7",
+    "@gluestack-ui/form-control": "0.1.19",
     "@gluestack-ui/alert": "0.1.15",
     "@gluestack-ui/button": "1.0.7",
     "@gluestack-ui/checkbox": "0.1.32",
@@ -21,7 +22,8 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
     "@quidone/react-native-wheel-picker": "^1.6.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "nanoid": "3.3.11"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
@@ -33,12 +35,13 @@
     "@storybook/addon-vitest": "^10.2.1",
     "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
-    "@types/react-dom": "^19.1.6",
     "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-native": "^0.72.8",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.2.1",
+    "globals": "^15.15.0",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -91,7 +94,7 @@
     "test": "vitest run --config vitest.unit.config.ts",
     "test:storybook": "vitest run --project storybook",
     "dev": "npm run copy:changelog && storybook dev -p 6006",
-    "dev:docs": "storybook dev -p 6002 --no-open --docs",
+    "dev:docs": "storybook dev -p 6002 --no-open",
     "build:storybook": "npm run copy:changelog && storybook build",
     "build:storybook:docs": "npm run copy:changelog && storybook build --docs",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"

package/src/components/Banner/Banner.props.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type CardProps from '../Card/Card.props';
 
 export type BannerDirection = 'horizontal' | 'vertical';
@@ -92,6 +93,7 @@ export interface BannerProps extends Omit<
    * @default 'center'
    */
   alignChevron?: 'center' | 'start' | 'end';
+  style?: StyleProp<ViewStyle>;
 }
 
 export default BannerProps;

package/src/components/ExpandableCard/ExpandableCardTrigger.tsx

@@ -4,7 +4,6 @@ import ExpandableCardTriggerRoot from './ExpandableCardTriggerRoot';
 const ExpandableCardTrigger = createPressable({
   Root: ExpandableCardTriggerRoot,
 });
-
 ExpandableCardTrigger.displayName = 'ExpandableCardTrigger';
 
 export default ExpandableCardTrigger;

package/src/components/Input/InputField.tsx

@@ -13,7 +13,6 @@ const InputField = forwardRef<RNTextInput, TextInputProps & { inBottomSheet?: bo
 
     if (inBottomSheet) {
       return (
-        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
         <BottomSheetTextInput
           ref={ref as any}
           placeholderTextColor={color.text.secondary}

package/src/components/Tabs/Tab.tsx

@@ -1,13 +1,12 @@
+import { createPressable } from '@gluestack-ui/pressable';
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import type TabProps from './Tab.props';
 import { useTabsContext } from './Tabs.context';
 
-import { createPressable } from '@gluestack-ui/pressable';
-import { BodyText } from '../BodyText';
-
 const Tab = ({
   value,
   children,

package/tsconfig.json

@@ -10,6 +10,10 @@
     ],
     "compilerOptions": {
         "baseUrl": ".",
+        "paths": {
+            "react-native": ["./node_modules/react-native"],
+            "react-native/*": ["./node_modules/react-native/*"]
+        },
         "ignoreDeprecations": "5.0",
         "noEmit": false,
         "declaration": true,