@utilitywarehouse/hearth-react-native 0.17.0 → 0.19.0

package/src/components/Divider/Divider.tsx

@@ -8,13 +8,14 @@ import type DividerProps from './Divider.props';
 const Divider = ({
   orientation = 'horizontal',
   color,
+  spacing,
   space,
   height,
   width,
   flexItem,
   ...props
 }: DividerProps) => {
-  styles.useVariants({ orientation, space, flexItem });
+  styles.useVariants({ orientation, spacing: space ?? spacing, flexItem });
   const { color: themeColor, colorMode } = useTheme();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode]);
@@ -42,7 +43,7 @@ const styles = StyleSheet.create(theme => ({
           width: theme.components.divider.borderWidth,
         },
       },
-      space: {
+      spacing: {
         none: {},
         '2xs': {},
         xs: {},
@@ -61,14 +62,14 @@ const styles = StyleSheet.create(theme => ({
     compoundVariants: [
       {
         orientation: 'horizontal',
-        space: 'none',
+        spacing: 'none',
         styles: {
           marginVertical: 0,
         },
       },
       {
         orientation: 'horizontal',
-        space: '2xs',
+        spacing: '2xs',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing['2xs'],
@@ -79,7 +80,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'xs',
+        spacing: 'xs',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.xs,
@@ -90,7 +91,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'sm',
+        spacing: 'sm',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.sm,
@@ -101,7 +102,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'md',
+        spacing: 'md',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.md,
@@ -112,7 +113,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'lg',
+        spacing: 'lg',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.lg,
@@ -123,7 +124,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'xl',
+        spacing: 'xl',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.xl,
@@ -134,7 +135,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: '2xl',
+        spacing: '2xl',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing['2xl'],
@@ -145,14 +146,14 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'none',
+        spacing: 'none',
         styles: {
           marginHorizontal: 0,
         },
       },
       {
         orientation: 'vertical',
-        space: '2xs',
+        spacing: '2xs',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing['2xs'],
@@ -163,7 +164,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'xs',
+        spacing: 'xs',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.xs,
@@ -174,7 +175,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'sm',
+        spacing: 'sm',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.sm,
@@ -185,7 +186,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'md',
+        spacing: 'md',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.md,
@@ -196,7 +197,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'lg',
+        spacing: 'lg',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.lg,
@@ -207,7 +208,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'xl',
+        spacing: 'xl',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.xl,
@@ -218,7 +219,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: '2xl',
+        spacing: '2xl',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing['2xl'],

package/src/components/ExpandableCard/ExpandableCardExpandedContent.tsx

@@ -20,7 +20,7 @@ const ExpandableCardExpandedContent = ({
     <View style={styles.container}>
       <Expandable expanded={isExpanded} duration={duration} animateOpacity={animateOpacity}>
         <View>
-          <Divider space="none" />
+          <Divider spacing="none" />
           <View style={styles.content}>{children}</View>
         </View>
       </Expandable>

package/src/components/Flex/Flex.docs.mdx

@@ -25,7 +25,7 @@ When you need to center-align content, the Center component comes in handy. It i
 
 <UsageWrap>
   <Center>
-    <Flex space="lg">
+    <Flex spacing="lg">
       <BodyText>Spaced out text</BodyText>
       <BodyText>Spaced out text</BodyText>
       <BodyText>Flexed</BodyText>
@@ -39,7 +39,7 @@ When you need to center-align content, the Center component comes in handy. It i
 import { Flex, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Flex space="lg">
+  <Flex spacing="lg">
     <BodyText>Spaced out text</BodyText>
     <BodyText>Spaced out text</BodyText>
     <BodyText>Flexed</BodyText>
@@ -57,4 +57,4 @@ const MyComponent = () => (
 | `wrap`      | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | `nowrap`     | The wrap of the flex container.            |
 | `justify`   | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'space-between' \| 'space-around' \| 'space-evenly'` | `flex-start` | The justify content of the flex container. |
 | `align`     | `'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`                                     | `flex-start` | The align items of the flex container.     |
-| `space`     | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |
+| `spacing`   | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |

package/src/components/Flex/Flex.props.ts

@@ -6,6 +6,11 @@ interface FlexProps extends ViewProps {
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];
   wrap?: ViewStyle['flexWrap'];
+  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/src/components/Flex/Flex.stories.tsx

@@ -39,7 +39,7 @@ const meta = {
       control: 'select',
       description: 'The justify of the flex container.',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'The space of the flex container.',
@@ -51,7 +51,7 @@ const meta = {
     align: 'center',
     wrap: 'wrap',
     justify: 'flex-start',
-    space: 'sm',
+    spacing: 'sm',
   },
 } satisfies Meta<typeof Flex>;
 

package/src/components/Flex/Flex.tsx

@@ -9,7 +9,8 @@ const Flex = ({
   align = 'flex-start',
   justify = 'flex-start',
   wrap = 'nowrap',
-  space = 'md',
+  spacing = 'md',
+  space,
   ...rest
 }: FlexProps) => {
   const propStyle: ViewStyle = {
@@ -19,7 +20,7 @@ const Flex = ({
     flexWrap: wrap,
   };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   return (
     <View style={[propStyle, styles.flex, style]} {...rest}>
@@ -34,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
   flex: {
     display: 'flex',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
 }));

package/src/components/FormField/FormField.docs.mdx

@@ -313,7 +313,7 @@ const MyComponent = () => {
     <FormField validationStatus="invalid">
       <Checkbox alignItems="flex-start">
         <CheckboxIndicator />
-        <Flex direction="column" space="xs">
+        <Flex direction="column" spacing="xs">
           <CheckboxLabel nested={false}>I accept the terms and conditions</CheckboxLabel>
           <FormFieldHelper>
             <FormFieldHelperText>Read and accept the terms and conditions</FormFieldHelperText>

package/src/components/FormField/FormField.stories.tsx

@@ -87,7 +87,7 @@ export const Playground: Story = {
 export const Variants: Story = {
   render: () => {
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <FormField label="Label">
             <Input />

package/src/components/Grid/Grid.docs.mdx

@@ -25,7 +25,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 <UsageWrap>
   <Center>
-    <Grid columns={2} space="md" width={300}>
+    <Grid columns={2} spacing="md" width={300}>
       <Box backgroundColor="green400" height={100} padding="200">
         <BodyText color="white">Item 1</BodyText>
       </Box>
@@ -46,7 +46,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Grid columns={2} space="md" width={300}>
+  <Grid columns={2} spacing="md" width={300}>
     <Box backgroundColor="green400" height={100} padding="200">
       <BodyText color="white">Item 1</BodyText>
     </Box>
@@ -76,7 +76,7 @@ The Grid component supports responsive column layouts based on screen size break
         md: 3,
         lg: 4,
       }}
-      space="md"
+      spacing="md"
       width="100%"
     >
       <Box backgroundColor="green400" height={100} padding="200">
@@ -106,7 +106,7 @@ const MyComponent = () => (
       md: 3,
       lg: 4,
     }}
-    space="md"
+    spacing="md"
     width="100%"
   >
     <Box backgroundColor="green400" height={100} padding="200">
@@ -176,7 +176,7 @@ The Grid component extends all the props from the [View component](https://react
 | Name             | Type                                                               | Default | Description                                                   |
 | ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------- |
 | `columns`        | `number` or `GridColumns`                                          | 2       | Number of columns or responsive object with breakpoint values |
-| `space`          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
+| `spacing`        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
 | `columnGap`      | `number`                                                           | -       | Gap between columns (overrides spacing if provided)           |
 | `rowGap`         | `number`                                                           | -       | Gap between rows (overrides spacing if provided)              |
 | `containerStyle` | `StyleProp\<ViewStyle\>`                                           | -       | Style for the grid container                                  |

package/src/components/Grid/Grid.props.ts

@@ -17,6 +17,12 @@ export interface GridProps extends ViewProps {
   /**
    * Spacing between grid items (applies to both rows and columns)
    */
+  spacing?: SpacingValues;
+
+  /**
+   * Spacing between grid items (applies to both rows and columns)
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
 
   /**

package/src/components/Grid/Grid.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
       control: 'object',
       description: 'Number of columns or responsive object with breakpoints',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'Responsive spacing between grid items (applied to both rows and columns).',
@@ -33,7 +33,7 @@ const meta = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -69,7 +69,7 @@ export const Playground: Story = {
     controls: {
       include: [
         'columns',
-        'space',
+        'spacing',
         'gap',
         'columnGap',
         'rowGap',
@@ -81,7 +81,7 @@ export const Playground: Story = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>
@@ -98,7 +98,7 @@ export const Playground: Story = {
 export const ThreeColumns: Story = {
   args: {
     columns: 3,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -124,7 +124,7 @@ export const ResponsiveColumns: Story = {
       lg: 4,
       xl: 5,
     },
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: '100%' }}>
@@ -145,7 +145,7 @@ export const ResponsiveColumns: Story = {
 export const DifferentSizes: Story = {
   args: {
     columns: 3,
-    space: 'sm',
+    spacing: 'sm',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -178,7 +178,7 @@ export const CustomGaps: Story = {
 export const WithContent: Story = {
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>

package/src/components/Grid/Grid.tsx

@@ -9,6 +9,7 @@ const Grid = ({
   containerStyle,
   itemStyle,
   rowStyle,
+  spacing,
   space,
   children,
   ...props
@@ -19,7 +20,7 @@ const Grid = ({
   const { width } = useWindowDimensions();
   const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   const getColumnsForWidth = useMemo(() => {
     // If columns is a number, use that number
@@ -124,14 +125,14 @@ const styles = StyleSheet.create(theme => ({
   rowsContainer: {
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   row: {
     flexDirection: 'row',
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   item: {

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -83,7 +83,7 @@ const MyComponent = () => (
 | button               | `ReactElement`                                                                                     | Optional Button component displayed below description         | `-`          |
 | variant              | `'emphasis' \| 'subtle'`                                                                           | Visual style variant with strong or subtle borders            | `'emphasis'` |
 
-The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `colorScheme`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ### `HighlightBannerImage` Props
 

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -103,7 +103,7 @@ export const ColorVariants: Story = {
   render: args => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column" align="stretch">
+        <Flex spacing="lg" direction="column" align="stretch">
           <HighlightBanner
             {...args}
             heading="Energy Blue"
@@ -237,7 +237,7 @@ export const SubtleCard: Story = {
 export const DifferentImages: Story = {
   render: args => {
     return (
-      <Flex space="lg" direction="column">
+      <Flex spacing="lg" direction="column">
         <View style={{ width: 400 }}>
           <HighlightBanner
             {...args}

package/src/components/Icon/Icon.docs.mdx

@@ -38,7 +38,7 @@ The following example shows how to use the icons directly from the `@utilityware
 
 <UsageWrap>
   <Center>
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={lightTheme.color.energyBlue['700']} />
       <MobileMediumIcon color={lightTheme.color.mobileRose['700']} />
       <BroadbandMediumIcon color={lightTheme.color.broadbandGreen['700']} />
@@ -59,7 +59,7 @@ import {
 const MyComponent = () => {
   const { color } = useTheme();
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={color.energyBlue['700']} />
       <MobileMediumIcon color={color.mobileRose['700']} />
       <BroadbandMediumIcon color={color.broadbandGreen['700']} />
@@ -82,7 +82,7 @@ import {
 
 const MyComponent = () => {
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <Icon as={ElectricityMediumIcon} color="energyBlue700" />
       <Icon as={MobileMediumIcon} color="mobileRose700" />
       <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />

package/src/components/IconButton/IconButton.docs.mdx

@@ -22,6 +22,7 @@ The `IconButton` component is used to trigger an action or event, such as openin
 - [Usage](#usage)
 - [Props](#props)
 - [Variants](#variants)
+- [Custom Color Overrides](#custom-color-overrides)
 
 ## Playground
 
@@ -63,16 +64,97 @@ const MyComponent = () => {
 
 ## Props
 
-| Property      | Type                                                                     | Description                                                | Default     |
-| ------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `onPress`     | `() => void`                                                             | Callback function to be called when the button is pressed. | -           |
-| `variant`     | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`                          | The variant of the button.                                 | 'solid'     |
-| `size`        | `'xs' \| 'md' `                                                          | The size of the button.                                    | 'md'        |
-| `colorScheme` | `'highlight' \| 'affirmative \| 'destructive' \| 'functional' \| 'gold'` | The colour scheme of the button.                           | 'highlight' |
-| `loading`     | `boolean`                                                                | Changes the button to a loading state.                     | `false`     |
-| `disabled`    | `boolean`                                                                | Disables the button.                                       | `false`     |
-| `pressed`     | `boolean`                                                                | Changes the button to a pressed state.                     | `false`     |
+| Property                | Type                                                                             | Description                                                                                 | Default     |
+| ----------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------- |
+| `onPress`               | `() => void`                                                                     | Callback function to be called when the button is pressed.                                  | -           |
+| `variant`               | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`                                  | The variant of the button.                                                                  | 'solid'     |
+| `size`                  | `'xs' \| 'md' `                                                                  | The size of the button.                                                                     | 'md'        |
+| `colorScheme`           | `'highlight' \| 'affirmative \| 'destructive' \|`<br />` 'functional' \| 'gold'` | The colour scheme of the button.                                                            | 'highlight' |
+| `loading`               | `boolean`                                                                        | Changes the button to a loading state.                                                      | `false`     |
+| `disabled`              | `boolean`                                                                        | Disables the button.                                                                        | `false`     |
+| `pressed`               | `boolean`                                                                        | Changes the button to a pressed state.                                                      | `false`     |
+| `backgroundColor`       | `ColorValue`                                                                     | Custom background color override. Use sparingly for specific use cases only.                | -           |
+| `activeBackgroundColor` | `ColorValue`                                                                     | Custom active/pressed background color override. Use sparingly for specific use cases only. | -           |
+| `shadowColor`           | `ColorValue`                                                                     | Custom shadow color override. Use sparingly for specific use cases only.                    | -           |
 
 ## Variants
 
 <Canvas of={Stories.KitchenSink} />
+
+## Custom Color Overrides
+
+The `IconButton` component supports custom color overrides through the `backgroundColor`, `activeBackgroundColor`, and `shadowColor` props.
+
+**⚠️ Important:** These props should be used **sparingly** and only for specific use cases where brand-specific colors are required, such as service buttons (Electricity, Broadband, Mobile, Insurance, Cashback Card).
+
+For most use cases, you should use the standard `colorScheme` and `variant` props which maintain design system consistency.
+
+### Example: Service Icon Buttons
+
+<Canvas of={Stories.ServiceIconButtons} />
+
+```tsx
+import { IconButton } from '@utilitywarehouse/hearth-react-native';
+import {
+  ElectricityMediumIcon,
+  BroadbandMediumIcon,
+  MobileMediumIcon,
+  InsuranceMediumIcon,
+  CashbackCardMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  return (
+    <>
+      <IconButton
+        icon={ElectricityMediumIcon}
+        backgroundColor="energyBlue200"
+        activeBackgroundColor="energyBlue300"
+        variant="emphasis"
+        shadowColor="energyBlue300"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={BroadbandMediumIcon}
+        backgroundColor="broadbandGreen200"
+        activeBackgroundColor="broadbandGreen300"
+        variant="emphasis"
+        shadowColor="broadbandGreen300"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={MobileMediumIcon}
+        backgroundColor="mobileRose200"
+        activeBackgroundColor="mobileRose300"
+        variant="emphasis"
+        shadowColor="mobileRose400"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={InsuranceMediumIcon}
+        backgroundColor="insuranceOrange300"
+        activeBackgroundColor="insuranceOrange400"
+        variant="emphasis"
+        shadowColor="insuranceOrange400"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={CashbackCardMediumIcon}
+        backgroundColor="cashbackLilac300"
+        activeBackgroundColor="cashbackLilac400"
+        variant="emphasis"
+        shadowColor="cashbackLilac500"
+        onPress={() => console.log('Pressed')}
+      />
+    </>
+  );
+};
+```
+
+### Override Props Behavior
+
+- **`backgroundColor`**: Sets the base background color of the button, overriding the color scheme's default background
+- **`activeBackgroundColor`**: Sets the background color when the button is pressed or in an active state
+- **`shadowColor`**: Sets the shadow/elevation color for the button
+
+These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain the structural styling while customising colors for specific branding requirements.

package/src/components/IconButton/IconButton.props.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react';
 import type { PressableProps } from 'react-native';
 import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ColorValue } from '../../types';
 import { ButtonVariants } from '../Button/Button.props';
 
 export type IconButtonProps = {
@@ -22,5 +23,23 @@ export type IconButtonProps = {
    */
   loading?: boolean;
   children?: ViewProps['children'];
+  /**
+   * Custom background color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * Custom active/pressed background color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  activeBackgroundColor?: ColorValue;
+  /**
+   * Custom shadow color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  shadowColor?: ColorValue;
 } & Omit<PressableProps, 'children'> &
   ButtonVariants;