@utilitywarehouse/hearth-react-native 0.17.0 → 0.19.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.17.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.19.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -50,20 +50,23 @@
   45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   9: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
-  94: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
-
-✖ 24 problems (0 errors, 24 warnings)
-
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1454.377 |    60.3%
-react-hooks/rules-of-hooks                        |   109.992 |     4.6%
-react-hooks/exhaustive-deps                       |    91.815 |     3.8%
-no-global-assign                                  |    66.528 |     2.8%
-no-loss-of-precision                              |    57.391 |     2.4%
-@typescript-eslint/ban-ts-comment                 |    54.505 |     2.3%
-no-misleading-character-class                     |    45.527 |     1.9%
-no-unexpected-multiline                           |    39.063 |     1.6%
-no-regex-spaces                                   |    29.197 |     1.2%
-@typescript-eslint/no-unnecessary-type-constraint |    28.583 |     1.2%
+   14: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
+  106: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
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
+  58:7  warning  React Hook useImperativeHandle has a missing dependency: 'inputRefs'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+✖ 25 problems (0 errors, 25 warnings)
+
+Rule                                       | Time (ms) | Relative
+:------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars          |  1284.680 |    57.7%
+react-hooks/exhaustive-deps                |   121.666 |     5.5%
+react-hooks/rules-of-hooks                 |    80.650 |     3.6%
+no-global-assign                           |    65.650 |     2.9%
+@typescript-eslint/ban-ts-comment          |    55.037 |     2.5%
+no-regex-spaces                            |    46.626 |     2.1%
+no-loss-of-precision                       |    42.743 |     1.9%
+no-misleading-character-class              |    41.075 |     1.8%
+no-unexpected-multiline                    |    38.229 |     1.7%
+@typescript-eslint/no-unsafe-function-type |    27.456 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.19.0
+
+### Minor Changes
+
+- [#882](https://github.com/utilitywarehouse/hearth/pull/882) [`7e5338c`](https://github.com/utilitywarehouse/hearth/commit/7e5338c75bf051897a5384fe4ce0f65533b7e1a7) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `safeAreaPadding` option to `ToastProvider`
+
+  `ToastProvider` now supports an optional `safeAreaPadding` prop to control whether toasts respect safe-area inset padding. This can be useful when you want to disable additional safe-area inset space while keeping the base toast padding.
+
+  **Components affected**:
+  - `ToastProvider`
+
+  **Developer changes**:
+
+  No changes required. To disable safe-area inset padding (while preserving the base bottom padding), set `safeAreaPadding` to `false`:
+
+  ```tsx
+  <ToastProvider safeAreaPadding={false}>{children}</ToastProvider>
+  ```
+
+- [`da893ff`](https://github.com/utilitywarehouse/hearth/commit/da893ff8a9d576a6ca69021737056c7289f8c6aa) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Unify spacing prop naming across layout components
+
+  The `space` prop has been renamed to `spacing` across all layout components for improved consistency and clarity. The `space` prop is now deprecated but will continue to work alongside the new `spacing` prop to maintain backward compatibility.
+
+  **Components affected**:
+  - `Box`
+  - `ButtonGroup`
+  - `Card`
+  - `Container`
+  - `Divider`
+  - `Flex`
+  - `Grid`
+
+  **Developer changes**:
+
+  No immediate changes are required. The `space` prop will continue to work as before. However, we recommend migrating to the `spacing` prop at your convenience:
+
+  ```diff
+  - <Flex space="md">
+  + <Flex spacing="md">
+      <Box>...</Box>
+      <Box>...</Box>
+    </Flex>
+  ```
+
+  ```diff
+  - <Grid columns={2} space="lg">
+  + <Grid columns={2} spacing="lg">
+      <Box>...</Box>
+      <Box>...</Box>
+    </Grid>
+  ```
+
+  ```diff
+  - <Container space="xl">
+  + <Container spacing="xl">
+      <Box>...</Box>
+    </Container>
+  ```
+
+  The deprecated `space` prop will be removed in a future major version release.
+
+- [#877](https://github.com/utilitywarehouse/hearth/pull/877) [`2cdf3a2`](https://github.com/utilitywarehouse/hearth/commit/2cdf3a2f4251b24f34c260f3f5da39f8c330fff5) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `autoFocus` prop to `VerificationInput`
+
+  `VerificationInput` now supports an `autoFocus` prop to control whether the first slot should focus on mount.
+  Default is `false` to avoid unexpected focus when the component is used.
+
+  **Developer changes**:
+
+  ```tsx
+  <VerificationInput autoFocus={false} />
+  ```
+
+- [#877](https://github.com/utilitywarehouse/hearth/pull/877) [`2cdf3a2`](https://github.com/utilitywarehouse/hearth/commit/2cdf3a2f4251b24f34c260f3f5da39f8c330fff5) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `VerificationInput` ref methods and improve rapid input handling
+
+  `VerificationInput` now forwards a ref with `focus`, `blur`, `clear`, and `focusIndex` helpers. Input updates also use the latest value to avoid dropped digits when typing quickly.
+
+  **Developer changes**:
+
+  If you want to control focus programmatically, pass a ref:
+
+  ```tsx
+  import { useRef } from 'react';
+  import {
+    VerificationInput,
+    type VerificationInputHandle,
+  } from '@utilitywarehouse/hearth-react-native';
+
+  const inputRef = useRef<VerificationInputHandle>(null);
+
+  <VerificationInput ref={inputRef} onChangeText={setCode} />;
+  ```
+
+### Patch Changes
+
+- [#880](https://github.com/utilitywarehouse/hearth/pull/880) [`a52bb03`](https://github.com/utilitywarehouse/hearth/commit/a52bb03352dd8b83c9cfd3311aaa390e96e75662) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Remove the unsupported `colorScheme` prop from `Banner` types so the API matches the `Card` component.
+
+- [#879](https://github.com/utilitywarehouse/hearth/pull/879) [`383b686`](https://github.com/utilitywarehouse/hearth/commit/383b6860c1b68da139f10a67cd001dd884143df0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Make `Banner` button full width in vertical layout
+
+- [#878](https://github.com/utilitywarehouse/hearth/pull/878) [`b31b8c3`](https://github.com/utilitywarehouse/hearth/commit/b31b8c3d37d4d1ec3df2f187ec18d00b3e663b49) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fix `Modal` bottom padding
+
+- [#881](https://github.com/utilitywarehouse/hearth/pull/881) [`5681b8f`](https://github.com/utilitywarehouse/hearth/commit/5681b8fd4bcc73ad532229018049f959f06f77ec) Thanks [@jordmccord](https://github.com/jordmccord)! - 📦 [DEPS]: Bump `@utilitywarehouse/hearth-react-native-icons` peerDependency to 0.8.0
+
+## 0.18.0
+
+### Minor Changes
+
+- [#869](https://github.com/utilitywarehouse/hearth/pull/869) [`89231c8`](https://github.com/utilitywarehouse/hearth/commit/89231c818dfd694f53b50f4cc961a38d0a50999e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add color override props to `IconButton` for service-specific branding
+
+  The `IconButton` component now supports custom color overrides through three new optional props: `backgroundColor`, `activeBackgroundColor`, and `shadowColor`. These props enable service-specific branding for use cases like service buttons (Electricity, Broadband, Mobile, Insurance, Cashback Card).
+
+  ⚠️ **Important**: These props should be used sparingly and only for specific use cases where brand-specific colors are required. For most use cases, continue using the standard `colorScheme` and `variant` props to maintain design system consistency.
+
+  **Components affected**:
+  - `IconButton`
+
+  **Developer changes**:
+
+  You can now customize `IconButton` colors for service-specific branding:
+
+  ```tsx
+  import { IconButton } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <IconButton
+    icon={ElectricityMediumIcon}
+    backgroundColor="energyBlue200"
+    activeBackgroundColor="energyBlue300"
+    shadowColor="energyBlue300"
+    variant="emphasis"
+    onPress={handlePress}
+  />;
+  ```
+
+  The new props are:
+  - `backgroundColor` - Sets the base background color, overriding the color scheme's default
+  - `activeBackgroundColor` - Sets the background color when pressed or in an active state
+  - `shadowColor` - Sets the shadow/elevation color
+
+  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customizing colors for specific branding requirements.
+
+### Patch Changes
+
+- [#871](https://github.com/utilitywarehouse/hearth/pull/871) [`8984335`](https://github.com/utilitywarehouse/hearth/commit/89843355d268aaa184bea75784e6841568c4784f) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fix style ordering in `BodyText` to ensure color props properly override custom styles
+
 ## 0.17.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 import type BannerProps from './Banner.props';
 declare const Banner: {
-    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme: _, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Banner;

package/build/components/Banner/Banner.js

@@ -9,9 +9,7 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
-const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-colorScheme: _, style, ...props }) => {
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
     const context = useMemo(() => ({
@@ -34,7 +32,7 @@ colorScheme: _, style, ...props }) => {
             return _jsx(View, { style: styles.action, children: link });
         }
         if (button) {
-            return _jsx(View, { style: styles.action, children: button });
+            return (_jsx(View, { style: [styles.action, styles.buttonWrap], children: _jsx(View, { style: styles.buttonInner, children: button }) }));
         }
         return null;
     };
@@ -152,6 +150,28 @@ const styles = StyleSheet.create(theme => ({
     action: {
         alignSelf: 'flex-start',
     },
+    buttonWrap: {
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    flexDirection: 'row',
+                    justifyContent: 'center',
+                    alignItems: 'stretch',
+                },
+            },
+        },
+    },
+    buttonInner: {
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    flex: 1,
+                },
+            },
+        },
+    },
     chevron: {
         alignSelf: 'center',
     },

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

@@ -1,7 +1,7 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type CardProps from '../Card/Card.props';
 export type BannerDirection = 'horizontal' | 'vertical';
-export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
     /**
      * Icon component to display in the banner
      * Mutually exclusive with image
@@ -66,10 +66,5 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'subtle'
      */
     variant?: 'subtle' | 'emphasis';
-    /**
-     * Color scheme for the banner
-     * @default 'pig'
-     */
-    colorScheme?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
 }
 export default BannerProps;

package/build/components/BodyText/BodyText.js

@@ -18,7 +18,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
             }
             : {}), style: [
             styles.text,
-            styles.getColours(color, textDecorationColor),
+            props.style,
             {
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
@@ -27,7 +27,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
                 ...(userSelect && { userSelect }),
                 ...(textAlignVertical && { textAlignVertical }),
             },
-            props.style,
+            styles.getColours(color, textDecorationColor),
         ], children: children }));
 };
 BodyText.displayName = 'BodyText';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ViewProps, ViewStyle } from 'react-native';
-import type { BorderRadiusValue, BordeWidthValue, ColorValue, OpacityValue, SpaceValue } from '../../types';
+import type { BorderRadiusValue, BordeWidthValue, ColorValue, OpacityValue, SpaceValue, SpacingValues } from '../../types';
 export type OmittedStyles = Omit<ViewStyle, 'backgroundColor' | 'borderBlockColor' | 'borderBlockEndColor' | 'borderBlockStartColor' | 'borderBottomColor' | 'borderBottomEndRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStartRadius' | 'borderBottomWidth' | 'borderColor' | 'borderEndColor' | 'borderEndEndRadius' | 'borderEndStartRadius' | 'borderEndWidth' | 'borderLeftColor' | 'borderLeftWidth' | 'borderRadius' | 'borderRightColor' | 'borderRightWidth' | 'borderStartColor' | 'borderStartEndRadius' | 'borderStartStartRadius' | 'borderStartWidth' | 'borderTopColor' | 'borderTopEndRadius' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStartRadius' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'columnGap' | 'end' | 'gap' | 'height' | 'left' | 'margin' | 'marginBottom' | 'marginEnd' | 'marginHorizontal' | 'marginLeft' | 'marginRight' | 'marginStart' | 'marginTop' | 'marginVertical' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'outlineColor' | 'padding' | 'paddingBottom' | 'paddingEnd' | 'paddingHorizontal' | 'paddingLeft' | 'paddingRight' | 'paddingStart' | 'paddingTop' | 'paddingVertical' | 'right' | 'rowGap' | 'shadowColor' | 'start' | 'top' | 'width' | 'rotation' | 'scaleX' | 'scaleY' | 'transformMatrix' | 'translateX' | 'translateY'>;
 export type OtherBoxViewStyles = Pick<OmittedStyles, 'alignContent' | 'alignItems' | 'alignSelf' | 'aspectRatio' | 'backfaceVisibility' | 'borderCurve' | 'borderStyle' | 'cursor' | 'direction' | 'display' | 'elevation' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'justifyContent' | 'boxShadow' | 'outlineOffset' | 'outlineStyle' | 'outlineWidth' | 'overflow' | 'pointerEvents' | 'position' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'transform' | 'transformOrigin' | 'zIndex'>;
 export interface BoxStyleMappingValues {
@@ -93,7 +93,10 @@ export interface ThemedBoxViewStyleProps {
     borderTopWidth?: BordeWidthValue;
     borderWidth?: BordeWidthValue;
 }
-export interface BoxProps extends BoxStyleMappingValues, ThemedBoxViewStyleProps, OtherBoxViewStyles, ViewProps {
+interface CustomBoxProps {
     as?: React.ElementType;
+    spacing?: SpacingValues;
+}
+export interface BoxProps extends BoxStyleMappingValues, ThemedBoxViewStyleProps, OtherBoxViewStyles, ViewProps, CustomBoxProps {
 }
 export default BoxProps;

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

@@ -7,11 +7,13 @@ export declare const ButtonGroupComponent: import("react").ForwardRefExoticCompo
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
+    spacing?: import("../../types").SpacingValues;
 }> & import("react-native").ViewProps & {
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
+    spacing?: import("../../types").SpacingValues;
 } & import("@gluestack-ui/button/lib/typescript/types").IButtonGroupProps>;
 declare const Button: {
     ({ children, disabled, pressed, text, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,15 @@
 import { type ViewProps, type ViewStyle } from 'react-native';
 import { SpacingValues } from '../../types';
 declare const ButtonGroupRoot: {
-    ({ children, attached, flexDirection, reversed, space, ...props }: ViewProps & {
+    ({ children, attached, flexDirection, reversed, spacing, space, ...props }: ViewProps & {
         flexDirection?: ViewStyle["flexDirection"];
         reversed?: boolean;
         attached?: boolean;
+        /**
+         * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release
+         */
         space?: SpacingValues;
+        spacing?: SpacingValues;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/Button/ButtonGroupRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', reversed = false, space = 'md', ...props }) => {
+const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', reversed = false, spacing = 'md', space, ...props }) => {
     let direction = flexDirection;
     if (reversed) {
         if (flexDirection === 'row')
@@ -15,7 +15,7 @@ const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', re
     }
     styles.useVariants({
         attached,
-        space,
+        spacing: space ?? spacing,
     });
     return (_jsx(View, { ...props, style: [styles.text, styles.extraStyles(direction), props.style], children: children }));
 };
@@ -23,7 +23,7 @@ ButtonGroupRoot.displayName = 'ButtonGroupRoot';
 const styles = StyleSheet.create(theme => ({
     text: {
         variants: {
-            space: {
+            spacing: {
                 none: {
                     gap: theme.layout.mobile.spacing.none,
                 },

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

@@ -5,7 +5,7 @@ interface CardContextProps {
     hasActions?: boolean;
     hasContent?: boolean;
     hasOnlyActions?: boolean;
-    space?: CardProps['space'];
+    spacing?: CardProps['spacing'];
     variant?: CardProps['variant'];
 }
 export declare const CardContext: import("react").Context<CardContextProps>;

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

@@ -6,6 +6,8 @@ interface CardProps extends PressableProps {
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
+    spacing?: SpacingValues;
+    /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
     space?: SpacingValues;
     alignItems?: ViewStyle['alignItems'];
     justifyContent?: ViewStyle['justifyContent'];

package/build/components/Card/CardContent.js

@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCardContext } from './Card.context';
 const CardContent = ({ children, style, ...props }) => {
-    const { noPadding, space } = useCardContext();
+    const { noPadding, spacing } = useCardContext();
     styles.useVariants({
         noPadding,
-        space,
+        spacing,
     });
     return (_jsx(View, { style: [styles.container, style], ...props, children: children }));
 };
@@ -14,7 +14,7 @@ CardContent.displayName = 'CardContent';
 const styles = StyleSheet.create(theme => ({
     container: {
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
             noPadding: {
                 true: {
                     padding: theme.components.card.mobile.paddingNone,

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

@@ -1,6 +1,6 @@
 import CardProps from './Card.props';
 declare const Card: {
-    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
+    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, spacing, space, disabled, onPress, ...rest }: CardProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/Card/CardRoot.js

@@ -7,7 +7,7 @@ import { CardContext } from './Card.context';
 import CardActions from './CardActions';
 import CardContent from './CardContent';
 import { checkForComponentType, collectChildActionHandlers, extractCardActions, filterChildren, hasOnlyPotentialActions, } from './helpers';
-const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, spacing, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     const hasActions = checkForComponentType(children, CardActions);
@@ -31,9 +31,19 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
         hasActions,
         hasContent,
         hasOnlyActions,
+        spacing: space ?? spacing,
+        variant,
+    }), [
+        showPressed,
+        active,
+        hasActions,
+        hasContent,
+        hasOnlyActions,
+        noPadding,
         space,
+        spacing,
         variant,
-    }), [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]);
+    ]);
     styles.useVariants({
         variant,
         colorScheme,
@@ -41,7 +51,7 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
         active,
         showPressed,
         disabled,
-        space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
+        spacing: hasActions || hasContent || hasOnlyActions ? 'none' : spacing,
         shadowColor,
     });
     const renderChildren = () => {
@@ -63,7 +73,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'flex-start',
         borderRadius: theme.components.card.borderRadius,
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
             variant: {
                 subtle: {
                     borderWidth: theme.components.card.neutral.subtle.borderWidth,

package/build/components/Checkbox/CheckboxGroupTextContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '../Flex';
 const CheckboxGroupTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", ...props, children: children }));
 };
 CheckboxGroupTextContent.displayName = 'CheckboxGroupTextContent';
 export default CheckboxGroupTextContent;

package/build/components/Checkbox/CheckboxTextContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
 const CheckboxTextContent = ({ children, style, ...props }) => {
-    return (_jsx(Flex, { style: [styles.content, style], direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { style: [styles.content, style], direction: "column", spacing: "none", ...props, children: children }));
 };
 const styles = StyleSheet.create({
     content: {

package/build/components/Container/Container.d.ts

@@ -1,6 +1,6 @@
 import type ContainerProps from './Container.props';
 declare const Container: {
-    ({ style, children, space, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, children, spacing, space, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Container;

package/build/components/Container/Container.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
-const Container = ({ style, children, space = 'md', ...props }) => {
+const Container = ({ style, children, spacing = 'md', space, ...props }) => {
     const { computedStyles, remainingProps } = useStyleProps(props);
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     return (_jsx(View, { style: [styles.container(computedStyles), style], ...remainingProps, children: children }));
 };
 Container.displayName = 'Container';
@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
             : undefined,
         ...extra,
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     }),
 }));

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

@@ -71,8 +71,13 @@ interface ContainerProps extends ViewProps {
     mb?: SpaceValue;
     ml?: SpaceValue;
     mr?: SpaceValue;
+    /**
+     * The spacing between child elements (gap).
+     */
+    spacing?: SpacingValues;
     /**
      * The space between child elements (gap).
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
      */
     space?: SpacingValues;
     /**

package/build/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import type DividerProps from './Divider.props';
 declare const Divider: {
-    ({ orientation, color, space, height, width, flexItem, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    ({ orientation, color, spacing, space, height, width, flexItem, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Divider;