@utilitywarehouse/hearth-react-native 0.32.1 → 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.1 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.1 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         |  1452.998 |    57.8%
-react-hooks/exhaustive-deps               |   126.724 |     5.0%
-no-global-assign                          |    93.240 |     3.7%
-react-hooks/rules-of-hooks                |    91.457 |     3.6%
-@typescript-eslint/ban-ts-comment         |    64.809 |     2.6%
-no-unexpected-multiline                   |    56.861 |     2.3%
-@typescript-eslint/triple-slash-reference |    35.707 |     1.4%
-no-misleading-character-class             |    35.239 |     1.4%
-no-regex-spaces                           |    34.132 |     1.4%
-no-useless-escape                         |    32.069 |     1.3%
+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,33 @@
 # @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
+
+- [#1164](https://github.com/utilitywarehouse/hearth/pull/1164) [`c8848d9`](https://github.com/utilitywarehouse/hearth/commit/c8848d9b01611e4c25b9caef7f211b8c623432c4) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🐛 [FIX]: Badge and Tabs now adapt their height for larger accessibility font sizes.
+
+  When larger text sizes are enabled (for example in iOS accessibility settings),
+  Badge and Tabs no longer clip text within fixed-height layouts. Their containers
+  now grow to fit scaled text while keeping the default visual sizing at standard
+  font settings.
+
+  **Components affected**:
+  - Badge
+  - Tab
+
+  **Developer changes**:
+
+  No code changes are required.
+
+- Updated dependencies [[`e4167f2`](https://github.com/utilitywarehouse/hearth/commit/e4167f27325dacc0cbc1feae456697387162aa77)]:
+  - @utilitywarehouse/hearth-react-native-icons@0.8.1
+
 ## 0.32.1
 
 ### 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/Badge/Badge.js

@@ -47,11 +47,11 @@ const styles = StyleSheet.create(theme => ({
             size: {
                 sm: {
                     paddingVertical: theme.components.badge.sm.paddingVertical,
-                    height: theme.components.badge.sm.height,
+                    minHeight: theme.components.badge.sm.height,
                 },
                 md: {
                     paddingVertical: theme.components.badge.md.paddingVertical,
-                    height: theme.components.badge.md.height,
+                    minHeight: theme.components.badge.md.height,
                 },
             },
             flatBase: {

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 };
@@ -49,8 +49,8 @@ const styles = StyleSheet.create(theme => ({
         },
         variants: {
             size: {
-                md: { height: theme.components.tabs.md.height },
-                lg: { height: theme.components.tabs.lg.height },
+                md: { minHeight: theme.components.tabs.md.height },
+                lg: { minHeight: theme.components.tabs.lg.height },
             },
             pressed: {
                 true: {

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,96 @@ 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
+
+- [#1164](https://github.com/utilitywarehouse/hearth/pull/1164) [`c8848d9`](https://github.com/utilitywarehouse/hearth/commit/c8848d9b01611e4c25b9caef7f211b8c623432c4) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🐛 [FIX]: Badge and Tabs now adapt their height for larger accessibility font sizes.
+
+  When larger text sizes are enabled (for example in iOS accessibility settings),
+  Badge and Tabs no longer clip text within fixed-height layouts. Their containers
+  now grow to fit scaled text while keeping the default visual sizing at standard
+  font settings.
+
+  **Components affected**:
+  - Badge
+  - Tab
+
+  **Developer changes**:
+
+  No code changes are required.
+
+- Updated dependencies [[`e4167f2`](https://github.com/utilitywarehouse/hearth/commit/e4167f27325dacc0cbc1feae456697387162aa77)]:
+  - @utilitywarehouse/hearth-react-native-icons@0.8.1
+
+## 0.32.1
+
+### Patch Changes
+
+- [#1144](https://github.com/utilitywarehouse/hearth/pull/1144) [`85459f2`](https://github.com/utilitywarehouse/hearth/commit/85459f2f4d7dcd8a99685a11dcda070530cee8dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Add the missing `highlight` color scheme support across the `Banner` and `Card` components.
+
+## 0.32.0
+
+### Minor Changes
+
+- [#1134](https://github.com/utilitywarehouse/hearth/pull/1134) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/ebccb55afebcbd47508d7992614b2495c7839cc6) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Roundel` status indicator component.
+
+`Roundel` is a compact status indicator with `success`, `pending`, and `error` variants, intended for inline state cues.
+
+**Components affected**:
+
+- `Roundel`
+
+**Developer changes**:
+
+Import and use `Roundel` from `@utilitywarehouse/hearth-react-native`:
+
+```tsx
+import { Roundel } from '@utilitywarehouse/hearth-react-native';
+
+<Roundel variant="success" />;
+```
+
+- [#1132](https://github.com/utilitywarehouse/hearth/pull/1132) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/882418633ee8c3a11e204329d07363dc411996dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add the `Rating` component
+
+  **Components affected**:
+  - `Rating`
+
+  **Developer changes**:
+
+  ```tsx
+  import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => <Rating value={3} />;
+  ```
+
+- [#1129](https://github.com/utilitywarehouse/hearth/pull/1129) [`ec385a8`](https://github.com/utilitywarehouse/hearth/commit/ec385a8185bfa4ec7f4d5f1366ecc069a98cbba8) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `StepperInput` for controlled numeric input with increment and decrement buttons.
+
+  `StepperInput` is a new React Native form component for adjusting numeric values with direct text entry and dedicated step controls. It supports min and max bounds, configurable step size, validation and helper text through `FormField`, and an opt-in `focusInputOnStepPress` prop for keyboard-first flows.
+
+  **Components affected**:
+  - `StepperInput`
+
+  **Developer changes**:
+
+  Import and use `StepperInput` from `@utilitywarehouse/hearth-react-native`:
+
+  ```tsx
+  import { StepperInput } from '@utilitywarehouse/hearth-react-native';
+
+  <StepperInput label="Guests" min={1} max={10} value={value} onChangeText={setValue} />;
+  ```
+
+### Patch Changes
+
+- [#1133](https://github.com/utilitywarehouse/hearth/pull/1133) [`5cae98e`](https://github.com/utilitywarehouse/hearth/commit/5cae98e640a708a7d99eaf0395b7b52e71b8e6ec) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add a `defaultHeight` prop to `Textarea` so the initial height can be configured.
+
 ## 0.31.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.1",
+  "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",
@@ -60,9 +63,9 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.1",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {
@@ -81,7 +84,7 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
-    "copyChangelog": "node ./scripts/copyChangelog.js",
+    "copy:changelog": "node ./scripts/copyChangelog.js",
     "lint:fix": "TIMING=1 eslint --fix .",
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
@@ -90,10 +93,10 @@
     "figma:publish": "figma connect publish",
     "test": "vitest run --config vitest.unit.config.ts",
     "test:storybook": "vitest run --project storybook",
-    "dev": "npm run copyChangelog && storybook dev -p 6006",
-    "dev:docs": "storybook dev -p 6002 --no-open --docs",
-    "build:storybook": "npm run copyChangelog && storybook build",
-    "build:storybook:docs": "npm run copyChangelog && storybook build --docs",
+    "dev": "npm run copy:changelog && storybook dev -p 6006",
+    "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/Badge/Badge.tsx

@@ -78,11 +78,11 @@ const styles = StyleSheet.create(theme => ({
       size: {
         sm: {
           paddingVertical: theme.components.badge.sm.paddingVertical,
-          height: theme.components.badge.sm.height,
+          minHeight: theme.components.badge.sm.height,
         },
         md: {
           paddingVertical: theme.components.badge.md.paddingVertical,
-          height: theme.components.badge.md.height,
+          minHeight: theme.components.badge.md.height,
         },
       },
       flatBase: {

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,
@@ -87,8 +86,8 @@ const styles = StyleSheet.create(theme => ({
     },
     variants: {
       size: {
-        md: { height: theme.components.tabs.md.height },
-        lg: { height: theme.components.tabs.lg.height },
+        md: { minHeight: theme.components.tabs.md.height },
+        lg: { minHeight: theme.components.tabs.lg.height },
       },
       pressed: {
         true: {

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,