@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Textarea/TextareaField.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { TextInputProps, TextInput } from 'react-native';
+import { useTextareaContext } from './Textarea.context';
+import { useTheme } from '../../hooks';
+
+const TextareaField = ({ style, ...props }: TextInputProps) => {
+  const { disabled } = useTextareaContext();
+  const { components, color } = useTheme();
+
+  return (
+    <TextInput
+      placeholderTextColor={components.input.placeholderColor}
+      selectionColor={color.purple[700]}
+      cursorColor={color.purple[700]}
+      verticalAlign="top"
+      aria-disabled={disabled}
+      {...props}
+      style={[styles.input, style]}
+    />
+  );
+};
+
+TextareaField.displayName = 'TextareaField';
+
+const styles = StyleSheet.create(theme => ({
+  input: {
+    flex: 1,
+    alignSelf: 'stretch',
+    width: 'auto',
+    justifyContent: 'flex-start',
+    textAlignVertical: 'top',
+    alignItems: 'flex-start',
+    color: theme.components.text.color,
+    fontSize: theme.typography.mobile.bodyText.md.fontSize,
+    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    borderWidth: 0,
+    outlineWidth: 0,
+    _web: {
+      width: '100%',
+    },
+  },
+}));
+
+export default TextareaField;

package/src/components/Textarea/TextareaRoot.tsx

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+import InputProps from './Textarea.props';
+import { TextareaContext } from './Textarea.context';
+
+const TextareaRoot = ({
+  children,
+  style,
+  states,
+  validationStatus,
+  ...props
+}: InputProps & { states?: { focus?: boolean; disabled?: boolean; readonly?: boolean } }) => {
+  const { focus = false, disabled = false, readonly = false } = states || {};
+  styles.useVariants({ validationStatus, focus, disabled, readonly });
+
+  const value = useMemo(
+    () => ({ focused: focus, disabled, readonly, validationStatus }),
+    [focus, disabled, readonly, validationStatus]
+  );
+
+  return (
+    <TextareaContext.Provider value={value}>
+      <View {...props} style={[styles.container, style]}>
+        {children}
+      </View>
+    </TextareaContext.Provider>
+  );
+};
+
+TextareaRoot.displayName = 'TextareaRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    borderColor: theme.components.input.borderColor,
+    height: theme.components.input.textArea.height,
+    borderRadius: theme.components.input.borderRadius,
+    flexDirection: 'row',
+    overflow: 'hidden',
+    alignContent: 'center',
+    paddingHorizontal: theme.components.input.paddingHorizontal,
+    paddingVertical: theme.components.input.paddingVertical,
+    backgroundColor: theme.components.input.backgroundColor,
+    gap: theme.components.input.gap,
+    outlineStyle: 'solid',
+    outlineWidth: theme.components.input.borderWidth,
+    outlineColor: theme.components.input.borderColor,
+    variants: {
+      focus: {
+        true: {
+          outlineWidth: theme.components.input.borderWidthFocused,
+        },
+      },
+      validationStatus: {
+        invalid: {
+          borderColor: theme.components.input.borderColorInvalid,
+          outlineColor: theme.components.input.borderColorInvalid,
+        },
+        valid: {
+          borderColor: theme.components.input.borderColorValid,
+          outlineColor: theme.components.input.borderColorValid,
+        },
+        initial: {},
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      readonly: {
+        true: {
+          borderColor: theme.components.input.borderColorReadOnly,
+        },
+      },
+    },
+  },
+}));
+
+export default TextareaRoot;

package/src/components/Textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea, TextareaField } from './Textarea';

package/src/components/ToggleButton/ToggleButton.props.tsx

@@ -0,0 +1,7 @@
+import type { PressableProps } from 'react-native';
+
+export interface ToggleButtonProps extends PressableProps {
+  text?: string;
+  toggled?: boolean;
+  onToggle?: (toggled: boolean) => void;
+}

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,35 @@
+import { ToggleButton } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Stories / ToggleButton',
+  component: ToggleButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: {
+      type: 'string',
+      control: 'text',
+      description: 'The text of the button.',
+    },
+    toggled: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'Whether the button is toggled or not.',
+    },
+  },
+  args: {
+    text: 'Press me',
+    toggled: false,
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => {
+    return <ToggleButton {...args} />;
+  },
+};

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,32 @@
+import type { ToggleButtonProps } from './ToggleButton.props';
+import ToggleButtonTextComponent from './ToggleButtonText';
+import ToggleButtonIconComponent from './ToggleButtonIcon';
+import { createButton } from '@gluestack-ui/button';
+import ToggleButtonRoot from './ToggleButtonRoot';
+
+const ToggleButtonComponent = createButton({
+  Root: ToggleButtonRoot,
+  Group: () => null, // No group for ToggleButton
+  Icon: ToggleButtonIconComponent,
+  Spinner: () => null, // No spinner for ToggleButton
+  Text: ToggleButtonTextComponent,
+});
+
+export const ToggleButtonText = ToggleButtonComponent.Text;
+export const ToggleButtonIcon = ToggleButtonComponent.Icon;
+
+ToggleButtonText.displayName = 'ToggleButtonText';
+ToggleButtonIcon.displayName = 'ToggleButtonIcon';
+
+const ToggleButton = ({ text, toggled = false, onToggle, ...props }: ToggleButtonProps) => {
+  return (
+    <ToggleButtonComponent toggled={toggled} onToggle={onToggle} {...props}>
+      {toggled && <ToggleButtonIcon toggled={toggled} />}
+      <ToggleButtonText toggled={toggled}>{text}</ToggleButtonText>
+    </ToggleButtonComponent>
+  );
+};
+
+ToggleButton.displayName = 'ToggleButton';
+
+export default ToggleButton;

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -0,0 +1,46 @@
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import IconProps from '../Icon/Icon.props';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const ButtonIcon = ({
+  children,
+  toggled,
+  as = TickSmallIcon,
+  ...props
+}: IconProps & { toggled: boolean }) => {
+  styles.useVariants({ toggled });
+
+  const IconAny = Icon as any;
+  return (
+    <IconAny
+      as={as}
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          : [styles.icon as StyleProp<ViewStyle>, props.style]
+      }
+    >
+      {children}
+    </IconAny>
+  );
+};
+
+ButtonIcon.displayName = 'ButtonIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.components.toggleButton.foregroundColor,
+    variants: {
+      toggled: {
+        true: {
+          color: theme.components.toggleButton.selected.foregroundColor,
+        },
+      },
+    },
+  },
+}));
+
+export default ButtonIcon;

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -0,0 +1,100 @@
+import type { ToggleButtonProps } from './ToggleButton.props';
+import { Pressable, ViewStyle, GestureResponderEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardActionContext } from '../Card';
+
+const ButtonRoot = ({
+  children,
+  onToggle,
+  toggled,
+  states,
+  onPress,
+  ...props
+}: ToggleButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { active } = states || {};
+  const { pressed } = useCardActionContext();
+
+  styles.useVariants({
+    toggled,
+    active: active || pressed,
+  });
+
+  const handlePress = (e: GestureResponderEvent) => {
+    onPress?.(e);
+    if (onToggle) {
+      onToggle(!toggled);
+    }
+  };
+
+  return (
+    <Pressable
+      {...props}
+      style={[styles.container, props.style as ViewStyle]}
+      onPress={handlePress}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+ButtonRoot.displayName = 'ButtonRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: theme.components.toggleButton.borderWidth,
+    borderRadius: theme.components.toggleButton.borderRadius,
+    gap: theme.components.toggleButton.gap,
+    minWidth: theme.components.toggleButton.minWidth,
+    paddingHorizontal: theme.components.toggleButton.paddingHorizontal,
+    paddingVertical:
+      theme.components.toggleButton.paddingVertical - theme.components.toggleButton.borderWidth,
+    borderColor: theme.components.toggleButton.borderColor,
+    height: theme.components.toggleButton.height,
+    _web: {
+      '_focus-visible': theme.helpers.focusVisible,
+      _hover: {
+        backgroundColor: theme.components.toggleButton.backgroundColorHover,
+      },
+      _active: {
+        backgroundColor: theme.components.toggleButton.backgroundColorActive,
+      },
+    },
+    variants: {
+      toggled: {
+        true: {
+          backgroundColor: theme.components.toggleButton.selected.backgroundColor,
+          borderColor: theme.components.toggleButton.selected.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.toggleButton.selected.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+            },
+          },
+        },
+      },
+      active: {
+        true: {
+          backgroundColor: theme.components.toggleButton.backgroundColorActive,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        toggled: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+        },
+      },
+    ],
+  },
+}));
+
+export default ButtonRoot;

package/src/components/ToggleButton/ToggleButtonText.tsx

@@ -0,0 +1,29 @@
+import { type TextProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DetailText } from '../DetailText';
+
+const ToggleButtonText = ({ children, toggled, ...props }: TextProps & { toggled: boolean }) => {
+  styles.useVariants({ toggled });
+  return (
+    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+      {children}
+    </DetailText>
+  );
+};
+
+ToggleButtonText.displayName = 'ToggleButtonText';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.components.toggleButton.foregroundColor,
+    variants: {
+      toggled: {
+        true: {
+          color: theme.components.toggleButton.selected.foregroundColor,
+        },
+      },
+    },
+  },
+}));
+
+export default ToggleButtonText;

package/src/components/ToggleButton/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleButton, ToggleButtonText, ToggleButtonIcon } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton.props';

package/src/components/ToggleButtonCard/ToggleButtonCard.context.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+export const ToggleButtonCardContext = createContext<{
+  checked?: boolean;
+  active?: boolean;
+}>({});
+
+export const useToggleButtonCardContext = () => useContext(ToggleButtonCardContext);

package/src/components/ToggleButtonCard/ToggleButtonCard.docs.mdx

@@ -0,0 +1,146 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './ToggleButtonCardGroup.stories';
+import {
+  ToggleButtonCard,
+  ToggleButtonCardGroup,
+  Center,
+  Box,
+  Heading,
+  BodyText,
+  DetailText,
+} from '../..';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+
+<Meta title="Components / Toggle Button Card" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=1-161" />
+
+# Toggle Button Card
+
+The `ToggleButtonCard` component is a UI element that allows users to select one option from a set of predefined choices.
+It is commonly used in forms or surveys where only one selection is allowed. The `ToggleButtonCard` can be grouped together
+with other `ToggleButtonCard`s to create a `ToggleButtonCardGroup`, providing a cohesive and organised way to present multiple options.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <ToggleButtonCardGroup aria-label="ToggleButtonCard Group" nativeID="ToggleButtonCard-group">
+      <ToggleButtonCard value="fixed" aria-label="Fixed Tariff" label="Select tariff" gap="200">
+        <Heading size="md">Fixed</Heading>
+        <Box flexDirection="row" alignItems="center" gap="100">
+          <DetailText size="3xl">£163.00</DetailText>
+          <BodyText color="grey500"> monthly estimate</BodyText>
+        </Box>
+        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
+      </ToggleButtonCard>
+      <ToggleButtonCard
+        value="variable"
+        aria-label="Variable Tariff"
+        label="Select tariff"
+        gap="200"
+      >
+        <Heading size="md">Variable</Heading>
+        <Box flexDirection="row" alignItems="center" gap="100">
+          <DetailText size="3xl">£153.00</DetailText>
+          <BodyText color="grey500"> monthly estimate</BodyText>
+        </Box>
+        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
+      </ToggleButtonCard>
+    </ToggleButtonCardGroup>
+  </Center>
+</UsageWrap>
+
+```tsx
+import {
+  ToggleButtonCard,
+  ToggleButtonCardGroup,
+  Box,
+  Heading,
+  BodyText,
+  DetailText,
+} from '@utilitywarehouse/native-ui';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('Option 1');
+  return (
+    <ToggleButtonCardGroup
+      aria-label="Select Tariff"
+      value={value}
+      onChange={setValue}
+      nativeID="ToggleButtonCard-group"
+    >
+      <ToggleButtonCard value="fixed" aria-label="Fixed Tariff" label="Select tariff" gap="200">
+        <Heading size="md">Fixed</Heading>
+        <Box flexDirection="row" alignItems="center" gap="100">
+          <DetailText size="3xl">£163.00</DetailText>
+          <BodyText color="grey500"> monthly estimate</BodyText>
+        </Box>
+        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
+      </ToggleButtonCard>
+      <ToggleButtonCard
+        value="variable"
+        aria-label="Variable Tariff"
+        label="Select tariff"
+        gap="200"
+      >
+        <Heading size="md">Variable</Heading>
+        <Box flexDirection="row" alignItems="center" gap="100">
+          <DetailText size="3xl">£153.00</DetailText>
+          <BodyText color="grey500"> monthly estimate</BodyText>
+        </Box>
+        <BodyText>Your energy rates will stay the same until December 2025</BodyText>
+      </ToggleButtonCard>
+    </ToggleButtonCardGroup>
+  );
+};
+```
+
+## Props
+
+The `ToggleButtonCard` component accepts the following props:
+
+| Property         | Type                                                                                                    | Default | Description                                                                                                  |
+| ---------------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
+| `value`          | string                                                                                                  | -       | The value to be used in the toggle button input. This is the value that will be returned on form submission. |
+| `onChange`       | `(isSelected: boolean) => void`                                                                         | -       | Function called when the state of the toggle button changes.                                                 |
+| `children`       | `React.ReactNode`                                                                                       | -       | The content to be displayed inside the toggle button.                                                        |
+| `label`          | `string`                                                                                                | -       | The label to be displayed next to the toggle button.                                                         |
+| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                | -       | Sets the direction of the flex items.                                                                        |
+| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | -       | Sets whether flex items are forced onto one line or can wrap.                                                |
+| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'stretch' \| 'baseline'`                             | -       | Sets the alignment of flex items on the cross axis.                                                          |
+| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \|`<br />` 'space-between' \| 'space-around' \| 'space-evenly'` | -       | Sets the alignment of flex items on the main axis.                                                           |
+
+## Components
+
+### `ToggleButtonCard`
+
+Contains all ToggleButtonCard related layout style props and actions. It inherits all the properties of React Native's [`Pressable` component](https://reactnative.dev/docs/pressable) and [`View` component](https://reactnative.dev/docs/view) styles for layout.
+
+### `ToggleButtonCardGroup`
+
+Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View component](https://reactnative.dev/docs/view).
+
+| Property         | Type                                                                                                     | Default | Description                                                                                                |
+| ---------------- | -------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `value`          | `string`                                                                                                 | -       | The value of the currently selected `ToggleButtonCard`.                                                    |
+| `onChange`       | `(value: string) => void`                                                                                | -       | Callback fired when the selected `ToggleButtonCard` changes.                                               |
+| `gap`            | `keyof typeof space`                                                                                     | -       | The gap between the `ToggleButtonCard` items.                                                              |
+| `columns`        | `GridProps['columns']`                                                                                   | -       | If set, the group will use a grid layout with the specified number of columns. Otherwise, it uses flexbox. |
+| `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                 | `row`   | (Flexbox only) Sets the direction of the flex items.                                                       |
+| `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                   | `wrap`  | (Flexbox only) Sets whether flex items are forced onto one line or can wrap.                               |
+| `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'stretch' \| 'baseline'`                              | -       | (Flexbox only) Sets the alignment of flex items on the cross axis.                                         |
+| `justifyContent` | `'flex-start' \| 'flex-end' \| 'center' \| `<br /> `'space-between' \| 'space-around' \| 'space-evenly'` | -       | (Flexbox only) Sets the alignment of flex items on the main axis.                                          |

package/src/components/ToggleButtonCard/ToggleButtonCard.props.ts

@@ -0,0 +1,17 @@
+import type { PressableProps, ViewProps, ViewStyle } from 'react-native';
+import { SpaceValue } from '../../types';
+
+interface ToggleButtonCardProps extends Omit<PressableProps, 'children'> {
+  value: string;
+  onChange?: (isSelected: boolean) => void;
+  children?: ViewProps['children'];
+  label?: string;
+  flexDirection?: ViewStyle['flexDirection'];
+  flexWrap?: ViewStyle['flexWrap'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+  contentStyle?: ViewStyle;
+  gap?: SpaceValue;
+}
+
+export default ToggleButtonCardProps;

package/src/components/ToggleButtonCard/ToggleButtonCard.stories.tsx

@@ -0,0 +1,45 @@
+import { ToggleButtonCard, ToggleButtonCardGroup } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { BodyText } from '../BodyText';
+
+const meta = {
+  title: 'Stories / ToggleButtonCard',
+  component: ToggleButtonCard,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text',
+      description: 'The label component for the radio.',
+    },
+  },
+  args: {
+    label: '',
+  },
+} satisfies Meta<typeof ToggleButtonCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+  },
+  render: args => (
+    <ToggleButtonCardGroup>
+      <ToggleButtonCard
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="ToggleButtonCard-1"
+        {...args}
+      >
+        <BodyText>Toggle Button Content</BodyText>
+      </ToggleButtonCard>
+    </ToggleButtonCardGroup>
+  ),
+};

package/src/components/ToggleButtonCard/ToggleButtonCard.tsx

@@ -0,0 +1,32 @@
+import { createRadio } from '@gluestack-ui/radio';
+import StyledToggleButtonCard from './ToggleButtonCardRoot';
+import StyledToggleButtonCardGroup from './ToggleButtonCardGroup';
+import ToggleButtonCardProps from './ToggleButtonCard.props';
+import { View } from 'react-native';
+import { useStyleProps } from '../../hooks';
+
+const ToggleButtonCardComponent = createRadio({
+  Root: StyledToggleButtonCard,
+  Group: StyledToggleButtonCardGroup,
+  Indicator: () => null,
+  Icon: () => null,
+  Label: () => null,
+});
+
+const ToggleButtonCardGroup = ToggleButtonCardComponent.Group;
+
+ToggleButtonCardGroup.displayName = 'ToggleButtonCardGroup';
+
+const ToggleButtonCard = ({ children, contentStyle, ...props }: ToggleButtonCardProps) => {
+  const { computedStyles } = useStyleProps(props);
+  return (
+    <ToggleButtonCardComponent {...props}>
+      {!!children && <View style={[computedStyles, contentStyle]}>{children}</View>}
+    </ToggleButtonCardComponent>
+  );
+};
+ToggleButtonCard.displayName = 'ToggleButtonCard';
+
+export { ToggleButtonCard, ToggleButtonCardGroup };
+
+export default ToggleButtonCard;

package/src/components/ToggleButtonCard/ToggleButtonCardGroup.props.ts

@@ -0,0 +1,34 @@
+import { ViewProps, ViewStyle } from 'react-native';
+import { space } from '../../tokens';
+import { GridProps } from '../Grid';
+
+// Base props shared by both layout modes
+type ToggleButtonCardGroupBaseProps = {
+  value?: string;
+  onChange?: (value: string) => void;
+  gap?: keyof typeof space;
+} & ViewProps;
+
+// Props specific to flexbox layout (when columns is not set)
+type ToggleButtonCardGroupFlexProps = {
+  columns?: never;
+  flexDirection?: ViewStyle['flexDirection'];
+  flexWrap?: ViewStyle['flexWrap'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+};
+
+// Props specific to grid layout (when columns is set)
+type ToggleButtonCardGroupGridProps = {
+  columns: GridProps['columns'];
+  flexDirection?: never;
+  flexWrap?: never;
+  alignItems?: never;
+  justifyContent?: never;
+};
+
+// Combine base props with either flex or grid specific props
+type ToggleButtonCardGroupProps = ToggleButtonCardGroupBaseProps &
+  (ToggleButtonCardGroupFlexProps | ToggleButtonCardGroupGridProps);
+
+export default ToggleButtonCardGroupProps;