@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/src/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 import { createInput } from '@gluestack-ui/input';
-import { ComponentType, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { ComponentType, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput } from 'react-native';
 import type InputProps from './Input.props';
 
@@ -10,7 +10,7 @@ import {
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { InputWithoutChildrenProps } from './Input.props';
@@ -43,20 +43,37 @@ const Input = forwardRef<TextInput, InputProps>(
       type,
       showPasswordToggle = true,
       onClear,
-      format,
       loading,
       clearable = false,
-      required,
+      required = true,
       inBottomSheet = false,
       style,
+      label,
+      labelVariant,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
       ...props
     },
     ref
   ) => {
     const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-    const isRequired = formFieldContext?.required ?? required;
+    const inputLabel = label ?? formFieldContext?.label;
+    const inputHelperText = helperText ?? formFieldContext?.helperText;
+    const inputValidText = validText ?? formFieldContext?.validText;
+    const inputInvalidText = invalidText ?? formFieldContext?.invalidText;
+    const inputRequired = required ?? formFieldContext?.required;
+    const inputDisabled = disabled ?? formFieldContext?.disabled;
+    const inputReadonly = readonly ?? formFieldContext?.readonly;
+    const inputValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+
+    useEffect(() => {
+      if (formFieldContext?.setShouldHandleAccessibility) {
+        formFieldContext.setShouldHandleAccessibility(true);
+      }
+    }, []);
+
     const [fieldType, setFieldType] = useState<'password' | 'text'>(
       type === 'password' ? 'password' : 'text'
     );
@@ -87,61 +104,108 @@ const Input = forwardRef<TextInput, InputProps>(
       return undefined;
     })();
 
+    const getAccessibilityLabel = () => {
+      let accessibilityLabel = '';
+      if (inputLabel) {
+        accessibilityLabel = accessibilityLabel + inputLabel;
+      }
+      if (inputRequired) {
+        accessibilityLabel = accessibilityLabel + ', required';
+      }
+
+      return accessibilityLabel || props.accessibilityLabel;
+    };
+
+    const getAccessibilityHint = () => {
+      let accessibilityHint = '';
+      if (inputHelperText) {
+        accessibilityHint = accessibilityHint + inputHelperText;
+      }
+      if (inputValidationStatus !== 'initial') {
+        if (accessibilityHint.length > 0) {
+          accessibilityHint = accessibilityHint + ', ';
+        }
+        if (inputValidationStatus === 'invalid' && inputInvalidText) {
+          accessibilityHint = accessibilityHint + inputInvalidText;
+        }
+        if (inputValidationStatus === 'valid' && inputValidText) {
+          accessibilityHint = accessibilityHint + inputValidText;
+        }
+      }
+      return accessibilityHint || props.accessibilityHint;
+    };
+
     return (
-      <InputComponent
-        {...(children ? props : {})}
-        validationStatus={validationStatusFromContext}
-        isInvalid={validationStatusFromContext === 'invalid'}
-        isReadOnly={readonly}
-        isDisabled={formFieldDisabled ?? disabled}
-        isFocused={focused}
-        type={type as undefined}
-        isRequired={isRequired}
-        style={style}
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validText={validText}
+        invalidText={invalidText}
+        required={required}
+        validationStatus={validationStatus}
+        disabled={disabled}
+        readonly={readonly}
+        accessibilityHandledByChildren
       >
-        {children ? (
-          <>{children}</>
-        ) : (
-          <>
-            {!!leadingIconComponent && (
-              <InputSlot>
-                <InputIcon as={leadingIconComponent} />
-              </InputSlot>
-            )}
-            <InputField
-              // @ts-expect-error - ref forwarding issue
-              ref={inputRef}
-              type={fieldType}
-              inputMode={getInputMode}
-              inBottomSheet={inBottomSheet}
-              {...props}
-            />
-            {shouldShowClear && (
-              <InputSlot>
-                <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
-              </InputSlot>
-            )}
-            {loading && (
-              <InputSlot>
-                <Spinner size="xs" color={color.icon.primary} />
-              </InputSlot>
-            )}
-            {shouldShowPasswordToggle && (
-              <InputSlot>
-                <UnstyledIconButton
-                  onPress={toggleFieldType}
-                  icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
-                />
-              </InputSlot>
-            )}
-            {!!trailingIcon && (
-              <InputSlot>
-                <InputIcon as={trailingIcon} />
-              </InputSlot>
-            )}
-          </>
-        )}
-      </InputComponent>
+        <InputComponent
+          {...(children ? props : {})}
+          validationStatus={inputValidationStatus}
+          isInvalid={inputValidationStatus === 'invalid'}
+          isReadOnly={inputReadonly}
+          isDisabled={inputDisabled}
+          isFocused={focused}
+          type={type as undefined}
+          isRequired={inputRequired}
+          style={style}
+        >
+          {children ? (
+            <>{children}</>
+          ) : (
+            <>
+              {!!leadingIconComponent && (
+                <InputSlot>
+                  <InputIcon as={leadingIconComponent} />
+                </InputSlot>
+              )}
+              <InputField
+                // @ts-expect-error - ref forwarding issue
+                ref={inputRef}
+                type={fieldType}
+                inputMode={getInputMode}
+                inBottomSheet={inBottomSheet}
+                {...props}
+                aria-label={getAccessibilityLabel()}
+                accessibilityHint={getAccessibilityHint()}
+              />
+              {shouldShowClear && (
+                <InputSlot>
+                  <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
+                </InputSlot>
+              )}
+              {loading && (
+                <InputSlot>
+                  <Spinner size="xs" color={color.icon.primary} />
+                </InputSlot>
+              )}
+              {shouldShowPasswordToggle && (
+                <InputSlot>
+                  <UnstyledIconButton
+                    onPress={toggleFieldType}
+                    icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
+                  />
+                </InputSlot>
+              )}
+              {!!trailingIcon && (
+                <InputSlot>
+                  <InputIcon as={trailingIcon} />
+                </InputSlot>
+              )}
+            </>
+          )}
+        </InputComponent>
+      </FormField>
     );
   }
 );

package/src/components/Label/Label.props.ts

@@ -1,8 +1,9 @@
-import type TextProps from '../BodyText/BodyText.props';
+import { BodyTextProps } from '../BodyText';
 
-interface LabelProps extends TextProps {
+interface LabelProps extends Omit<BodyTextProps, 'size' | 'weight'> {
   nested?: boolean;
   disabled?: boolean;
+  variant?: 'heading' | 'body';
 }
 
 export default LabelProps;

package/src/components/Label/Label.tsx

@@ -1,9 +1,19 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Heading } from '../Heading';
 import LabelProps from './Label.props';
 
-const Label = ({ children, nested, disabled, style, ...props }: LabelProps) => {
+const Label = ({ children, nested, disabled, style, variant = 'body', ...props }: LabelProps) => {
   styles.useVariants({ disabled });
+
+  if (variant === 'heading') {
+    return (
+      <Heading size="md" style={[styles.text, style]} {...props}>
+        {children}
+      </Heading>
+    );
+  }
+
   return (
     <BodyText
       size="md"

package/src/components/List/List.stories.tsx

@@ -9,7 +9,7 @@ import {
   SettingsMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { FC, PropsWithChildren, useState } from 'react';
+import { useState } from 'react';
 import { List, ListAction, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Badge } from '../Badge';
@@ -18,9 +18,6 @@ import { Flex } from '../Flex';
 import { IconContainer } from '../IconContainer';
 import { Link } from '../Link';
 import { Switch } from '../Switch';
-// import { Card } from '../Card';
-
-const Card: FC<PropsWithChildren> = ({ children }) => <div>{children}</div>;
 
 const meta = {
   title: 'Stories / List',

package/src/components/Radio/Radio.docs.mdx

@@ -90,21 +90,21 @@ const MyComponent = () => {
 
 ## Props
 
-| Property             | Type                                | Default   | Description                                                                                          |
-| -------------------- | ----------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
-| `value`              | string                              | -         | The value to be used in the radio input. This is the value that will be returned on form submission. |
-| `onChange`           | function                            | -         | Function called when the state of the radio changes.                                                 |
-| `disabled`           | bool                                | false     | To manually set disable to the radio.                                                                |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the radio.                                                                  |
-| `disabled`           | `bool`                              | `false`   | To manually set disable to the radio.                                                                |
-| `label`              | `string`                            | -         | The label to be displayed next to the radio.                                                         |
-| `helperText`         | `string`                            | -         | The helper text to be displayed below the radio.                                                     |
-| `helperIcon`         | `React.ComponentType`               | -         | The icon to be displayed next to the helper text.                                                    |
-| `invalidText`        | `string`                            | -         | The invalid text to be displayed below the radio.                                                    |
-| `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
-| `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
-| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                         |
+| Property             | Type                                | Default     | Description                                                                                          |
+| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `value`              | string                              | -           | The value to be used in the radio input. This is the value that will be returned on form submission. |
+| `onChange`           | function                            | -           | Function called when the state of the radio changes.                                                 |
+| `disabled`           | bool                                | false       | To manually set disable to the radio.                                                                |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the radio.                                                                  |
+| `disabled`           | `bool`                              | `false`     | To manually set disable to the radio.                                                                |
+| `label`              | `string`                            | -           | The label to be displayed next to the radio.                                                         |
+| `helperText`         | `string`                            | -           | The helper text to be displayed below the radio.                                                     |
+| `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                    |
+| `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio.                                                    |
+| `validText`          | `string`                            | -           | The valid text to be displayed below the radio.                                                      |
+| `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                 |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the radio.                                                                               |
+| `image`              | `ReactNode`                         | -           | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -132,21 +132,22 @@ Contains all Label related layout style props and actions. It inherits all the p
 
 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 radio group.                                       |
-| `onChange`           | function                            | -         | The callback fired when any children Radio is checked or unchecked. |
-| `disabled`           | bool                                | -         | To manually set disable to the radio group.                         |
-| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -         | The validation status of the radio group.                           |
-| `label`              | `string`                            | -         | The label to be displayed above the radio group.                    |
-| `helperText`         | `string`                            | -         | The helper text to be displayed below the radio group.              |
-| `helperIcon`         | `React.ComponentType`               | -         | The icon to be displayed next to the helper text.                   |
-| `invalidText`        | `string`                            | -         | The invalid text to be displayed below the radio group.             |
-| `validText`          | `string`                            | -         | The valid text to be displayed below the radio group.               |
-| `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                |
-| `type`               | `'default' \| 'tile'`               | `default` | The type of the radio group.                                        |
-| `direction`          | `'row' \| 'column'`                 | `column`  | The direction of the radio group.                                   |
-| `gap`                | `string`                            | -         | The gap between the radio group items.                              |
+| Property             | Type                                | Default     | Description                                                         |
+| -------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------- |
+| `value`              | string                              | -           | The value of the radio group.                                       |
+| `onChange`           | function                            | -           | The callback fired when any children Radio is checked or unchecked. |
+| `disabled`           | bool                                | -           | To manually set disable to the radio group.                         |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -           | The validation status of the radio group.                           |
+| `label`              | `string`                            | -           | The label to be displayed above the radio group.                    |
+| `labelVariant`       | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                                      |
+| `helperText`         | `string`                            | -           | The helper text to be displayed below the radio group.              |
+| `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                   |
+| `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio group.             |
+| `validText`          | `string`                            | -           | The valid text to be displayed below the radio group.               |
+| `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                |
+| `type`               | `'default' \| 'tile'`               | `'default'` | The type of the radio group.                                        |
+| `direction`          | `'row' \| 'column'`                 | `'column'`  | The direction of the radio group.                                   |
+| `gap`                | `string`                            | -           | The gap between the radio group items.                              |
 
 ### `RadioImage`
 

package/src/components/Radio/Radio.stories.tsx

@@ -96,7 +96,7 @@ export const WithImage: Story = {
     value: 'Option 1',
     label: 'Label',
   },
-  render: ({ children, ...args }) => (
+  render: ({ ...args }) => (
     <RadioGroup>
       <Radio
         aria-label="Label 1"

package/src/components/Radio/RadioGroup.props.ts

@@ -9,6 +9,7 @@ interface RadioGroupProps extends ViewProps {
   readonly?: boolean;
   validationStatus?: 'valid' | 'invalid' | 'initial';
   label?: string;
+  labelVariant?: 'heading' | 'body';
   helperText?: string;
   showValidationIcon?: boolean;
   invalidText?: string;

package/src/components/Radio/RadioGroup.stories.tsx

@@ -19,6 +19,11 @@ const meta = {
       control: 'text',
       description: 'The label component for the radio group.',
     },
+    labelVariant: {
+      control: 'radio',
+      options: ['heading', 'body'],
+      description: 'The variant of the label text.',
+    },
     helperText: {
       type: 'string',
       control: 'text',
@@ -51,6 +56,7 @@ const meta = {
   args: {
     disabled: false,
     label: 'Group label',
+    labelVariant: 'body',
     helperText: 'Supporting text',
     validationStatus: 'initial',
     showValidationIcon: true,

package/src/components/Radio/RadioGroup.tsx

@@ -14,6 +14,7 @@ const RadioGroup = ({
   readonly,
   validationStatus,
   label,
+  labelVariant = 'body',
   helperText,
   invalidText,
   validText,
@@ -49,7 +50,11 @@ const RadioGroup = ({
       >
         {showHeader && (
           <RadioGroupTextContent>
-            {!!label && <Label disabled={disabled}>{label}</Label>}
+            {!!label && (
+              <Label disabled={disabled} variant={labelVariant}>
+                {label}
+              </Label>
+            )}
             {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
             {validationStatus === 'invalid' && !!invalidText && (
               <Helper

package/src/components/RadioCard/RadioCard.docs.mdx

@@ -1,18 +1,18 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './RadioCardGroup.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
-  RadioCard,
-  RadioCardGroup,
-  Center,
-  Box,
-  Heading,
   BodyText,
+  Box,
+  Center,
   DetailText,
-  UL,
+  Heading,
   LI,
+  RadioCard,
+  RadioCardGroup,
+  UL,
 } from '../..';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './RadioCardGroup.stories';
 
 <Meta title="Components / Radio Card" />
 
@@ -92,16 +92,17 @@ const MyComponent = () => {
 
 The `RadioCard` component accepts the following props:
 
-| Property         | Type                                                                                                    | Default | Description                                                                                               |
-| ---------------- | ------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
-| `value`          | string                                                                                                  | -       | The value to be used in the radio card input. This is the value that will be returned on form submission. |
-| `onChange`       | `(isSelected: boolean) => void`                                                                         | -       | Function called when the state of the radio card changes.                                                 |
-| `children`       | `React.ReactNode`                                                                                       | -       | The content to be displayed inside the radio card.                                                        |
-| `label`          | `string`                                                                                                | -       | The label to be displayed next to the radio card.                                                         |
-| `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.                                                        |
+| Property         | Type                                                                                                    | Default  | Description                                                                                               |
+| ---------------- | ------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `value`          | string                                                                                                  | -        | The value to be used in the radio card input. This is the value that will be returned on form submission. |
+| `onChange`       | `(isSelected: boolean) => void`                                                                         | -        | Function called when the state of the radio card changes.                                                 |
+| `children`       | `React.ReactNode`                                                                                       | -        | The content to be displayed inside the radio card.                                                        |
+| `label`          | `string`                                                                                                | -        | The label to be displayed next to the radio card.                                                         |
+| `labelVariant`   | `'heading' \| 'body'`                                                                                   | `'body'` | The variant of the label text.                                                                            |
+| `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
 
@@ -113,13 +114,13 @@ Contains all RadioCard related layout style props and actions. It inherits all t
 
 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 `RadioCard`.                                                           |
-| `onChange`       | `(value: string) => void`                                                                                | -       | Callback fired when the selected `RadioCard` changes.                                                      |
-| `gap`            | `keyof typeof space`                                                                                     | -       | The gap between the `RadioCard` 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.                                          |
+| Property         | Type                                                                                                     | Default  | Description                                                                                                |
+| ---------------- | -------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `value`          | `string`                                                                                                 | -        | The value of the currently selected `RadioCard`.                                                           |
+| `onChange`       | `(value: string) => void`                                                                                | -        | Callback fired when the selected `RadioCard` changes.                                                      |
+| `gap`            | `keyof typeof space`                                                                                     | -        | The gap between the `RadioCard` 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/RadioCard/RadioCard.props.ts

@@ -7,6 +7,7 @@ interface RadioCardProps extends Omit<PressableProps, 'children'> {
   onChange?: (isSelected: boolean) => void;
   children?: ViewProps['children'];
   label?: string;
+  labelVariant?: 'heading' | 'body';
   flexDirection?: ViewStyle['flexDirection'];
   flexWrap?: ViewStyle['flexWrap'];
   alignItems?: ViewStyle['alignItems'];

package/src/components/RadioCard/RadioCard.tsx

@@ -27,7 +27,13 @@ RadioCardIndicator.displayName = 'RadioCardIndicator';
 RadioCardIcon.displayName = 'RadioCardIcon';
 RadioCardLabel.displayName = 'RadioCardLabel';
 
-const RadioCard = ({ children, label, contentStyle, ...props }: RadioCardProps) => {
+const RadioCard = ({
+  children,
+  label,
+  labelVariant = 'body',
+  contentStyle,
+  ...props
+}: RadioCardProps) => {
   const { computedStyles } = useStyleProps(props);
   return (
     <RadioCardComponent {...props}>
@@ -35,7 +41,7 @@ const RadioCard = ({ children, label, contentStyle, ...props }: RadioCardProps)
         <RadioCardIndicator>
           <RadioCardIcon />
         </RadioCardIndicator>
-        {!!label && <RadioCardLabel>{label}</RadioCardLabel>}
+        {!!label && <RadioCardLabel variant={labelVariant}>{label}</RadioCardLabel>}
       </View>
       {!!children && <View style={[computedStyles, contentStyle]}>{children}</View>}
     </RadioCardComponent>

package/src/components/Select/Select.props.ts

@@ -43,6 +43,16 @@ interface SelectProps extends ViewProps {
    * Label for the select
    */
   label?: string;
+  /**
+   * The variant of the label text.
+   *
+   * Supported values are:
+   * - `'heading'` – use heading text styling for the label.
+   * - `'body'` – use body text styling for the label.
+   *
+   * @default 'body'.
+   */
+  labelVariant?: 'heading' | 'body';
   /**
    * Placeholder text to show when no value is selected
    */

package/src/components/Select/Select.tsx

@@ -23,6 +23,7 @@ const Select = ({
   value,
   onValueChange,
   label,
+  labelVariant = 'body',
   placeholder = 'Select an option',
   disabled = false,
   leadingIcon: LeadingIcon,
@@ -123,9 +124,9 @@ const Select = ({
     <View {...rest} style={[styles.container, rest.style]}>
       {!!label && (
         <View>
-          <Label>
+          <Label variant={labelVariant}>
             {label}
-            {!isRequired && <Label> (Optional)</Label>}
+            {!isRequired && <Label variant={labelVariant}> (Optional)</Label>}
           </Label>
         </View>
       )}

package/src/components/Switch/Switch.tsx

@@ -23,7 +23,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components, color } = useTheme();
+  const { components } = useTheme();
   const theme = useAnimatedTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =

package/src/components/Tabs/Tabs.tsx

@@ -11,7 +11,6 @@ const Tabs = ({
   size = 'md',
   disabled,
   children,
-  withPanels,
   ...props
 }: TabsProps) => {
   // Collect child tab values