@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/build/components/DescriptionList/DescriptionListItem.props.d.ts

@@ -8,5 +8,6 @@ export interface DescriptionListItemProps extends ViewProps {
     headingWidth?: number;
     trailingContent?: ReactNode;
     invalidText?: string;
+    numericValue?: string;
 }
 export default DescriptionListItemProps;

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

@@ -1,3 +1,9 @@
 import { FormFieldBaseProps } from './FormField.props';
-export declare const FormFieldContext: import("react").Context<FormFieldBaseProps>;
-export declare const useFormFieldContext: () => FormFieldBaseProps;
+export declare const FormFieldContext: import("react").Context<FormFieldBaseProps & {
+    setShouldHandleAccessibility?: (value: boolean) => void;
+    shouldHandleAccessibility?: boolean;
+}>;
+export declare const useFormFieldContext: () => FormFieldBaseProps & {
+    setShouldHandleAccessibility?: (value: boolean) => void;
+    shouldHandleAccessibility?: boolean;
+};

package/build/components/FormField/FormField.d.ts

@@ -23,7 +23,7 @@ export declare const FormFieldInvalidText: {
 };
 export declare const FormFieldTextContent: typeof View;
 declare const FormField: {
-    ({ children, disabled, validationStatus, readonly, label, helperText, helperIcon, validText, invalidText, required, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, validationStatus, readonly, label, helperText, helperIcon, validText, invalidText, required, labelVariant, accessibilityHandledByChildren, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default FormField;

package/build/components/FormField/FormField.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { createFormControl } from '@gluestack-ui/form-control';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
@@ -29,14 +29,34 @@ export const FormFieldHelperIcon = HelperIcon;
 export const FormFieldValidText = HelperText;
 export const FormFieldInvalidText = HelperText;
 export const FormFieldTextContent = View;
-const FormField = ({ children, disabled, validationStatus = 'initial', readonly, label, helperText, helperIcon, validText, invalidText, required = true, ...props }) => {
+const FormField = ({ children, disabled, validationStatus = 'initial', readonly, label, helperText, helperIcon, validText, invalidText, required = true, labelVariant = 'body', accessibilityHandledByChildren = false, ...props }) => {
+    const [shouldHandleAccessibility, setShouldHandleAccessibility] = useState(accessibilityHandledByChildren);
     const value = useMemo(() => ({
         validationStatus,
         disabled,
         readonly,
         required,
-    }), [validationStatus, disabled, readonly, required]);
-    return (_jsx(FormFieldContext.Provider, { value: value, children: _jsxs(FormFieldComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, children: [(!!label || !!helperText) && (_jsxs(FormFieldTextContent, { children: [!!label && (_jsxs(FormFieldLabelText, { children: [label, !required ? ` (Optional)` : ''] })), !!helperText && (_jsx(FormFieldHelper, { text: helperText, icon: helperIcon, showIcon: !!helperIcon }))] })), children, !!validText && _jsx(FormFieldValid, { text: validText }), !!invalidText && _jsx(FormFieldInvalidComponent, { text: invalidText })] }) }));
+        label,
+        helperText,
+        helperIcon,
+        validText,
+        invalidText,
+        setShouldHandleAccessibility,
+        shouldHandleAccessibility,
+    }), [
+        validationStatus,
+        disabled,
+        readonly,
+        required,
+        label,
+        helperText,
+        helperIcon,
+        validText,
+        invalidText,
+        setShouldHandleAccessibility,
+        shouldHandleAccessibility,
+    ]);
+    return (_jsx(FormFieldContext.Provider, { value: value, children: _jsxs(FormFieldComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, children: [(!!label || !!helperText) && (_jsxs(FormFieldTextContent, { children: [!!label && (_jsxs(FormFieldLabelText, { variant: labelVariant, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility, children: [label, !required ? ` (Optional)` : ''] })), !!helperText && (_jsx(FormFieldHelper, { text: helperText, icon: helperIcon, showIcon: !!helperIcon, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility }))] })), children, !!validText && _jsx(FormFieldValid, { text: validText }), !!invalidText && _jsx(FormFieldInvalidComponent, { text: invalidText })] }) }));
 };
 FormField.displayName = 'FormField';
 export default FormField;

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

@@ -5,11 +5,13 @@ export interface FormFieldBaseProps {
     disabled?: boolean;
     readonly?: boolean;
     label?: string;
+    labelVariant?: 'heading' | 'body';
     helperText?: string;
     helperIcon?: ComponentType;
     validText?: string;
     invalidText?: string;
     required?: boolean;
+    accessibilityHandledByChildren?: boolean;
 }
 interface FormFieldProps extends FormFieldBaseProps, ViewProps {
 }

package/build/components/FormField/FormFieldLabel.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from '../Label/Label.props';
 declare const FormFieldLabel: {
-    ({ children }: Omit<LabelProps, "disabled">): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: Omit<LabelProps, "disabled">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default FormFieldLabel;

package/build/components/FormField/FormFieldLabel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFormFieldContext } from './FormField.context';
 import { Label } from '../Label';
-const FormFieldLabel = ({ children }) => {
+import { useFormFieldContext } from './FormField.context';
+const FormFieldLabel = ({ children, ...props }) => {
     const { disabled } = useFormFieldContext();
-    return _jsx(Label, { disabled: disabled, children: children });
+    return (_jsx(Label, { disabled: disabled, ...props, children: children }));
 };
 FormFieldLabel.displayName = 'FormFieldLabel';
 export default FormFieldLabel;

package/build/components/FormField/FormFieldValid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFormFieldContext } from './FormField.context';
-import { Helper } from '../Helper';
 import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Helper } from '../Helper';
+import { useFormFieldContext } from './FormField.context';
 const FormFieldValid = ({ children, icon = TickCircleSmallIcon, text, ...props }) => {
     const { validationStatus, disabled } = useFormFieldContext();
     return validationStatus === 'valid' ? (children ? (_jsx(Helper, { validationStatus: "valid", showIcon: true, disabled: disabled, ...props, children: children })) : (_jsx(Helper, { validationStatus: "valid", disabled: disabled, showIcon: true, icon: icon, text: text, ...props }))) : null;

package/build/components/Input/Input.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createInput } from '@gluestack-ui/input';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, 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 InputFieldComponent from './InputField';
@@ -19,11 +19,21 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, style, ...props }, ref) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, 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(type === 'password' ? 'password' : 'text');
     const { color } = useTheme();
     const inputRef = useRef(null);
@@ -46,11 +56,39 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         }
         return undefined;
     })();
-    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
-                // @ts-expect-error - ref forwarding issue
-                , { 
+    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 (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
                     // @ts-expect-error - ref forwarding issue
-                    ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }));
+                    , { 
+                        // @ts-expect-error - ref forwarding issue
+                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
 });
 Input.displayName = 'Input';
 export default Input;

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

@@ -25,6 +25,13 @@ export interface InputBaseProps {
     focused?: boolean;
     placeholder?: string;
     inBottomSheet?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: ComponentType;
+    validText?: string;
+    invalidText?: string;
+    required?: boolean;
 }
 export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     children: ViewProps['children'];
@@ -36,7 +43,6 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     onClear?: never;
     leadingIcon?: never;
     trailingIcon?: never;
-    required?: never;
 }
 interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
     children?: never;

package/build/components/Label/Label.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from './Label.props';
 declare const Label: {
-    ({ children, nested, disabled, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, nested, disabled, style, variant, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Label;

package/build/components/Label/Label.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
-const Label = ({ children, nested, disabled, style, ...props }) => {
+import { Heading } from '../Heading';
+const Label = ({ children, nested, disabled, style, variant = 'body', ...props }) => {
     styles.useVariants({ disabled });
+    if (variant === 'heading') {
+        return (_jsx(Heading, { size: "md", style: [styles.text, style], ...props, children: children }));
+    }
     return (_jsx(BodyText, { size: "md", weight: nested ? 'regular' : 'semibold', style: [styles.text, style], ...props, children: children }));
 };
 Label.displayName = 'Label';

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

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

package/build/components/Radio/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import RadioGroupProps from './RadioGroup.props';
 declare const RadioGroup: {
-    ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, readonly, validationStatus, label, labelVariant, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioGroup;

package/build/components/Radio/RadioGroup.js

@@ -7,7 +7,7 @@ import { Label } from '../Label';
 import { RadioGroup as RadioGroupComponent } from './Radio';
 import { RadioGroupContext } from './RadioGroup.context';
 import RadioGroupTextContent from './RadioGroupTextContent';
-const RadioGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
+const RadioGroup = ({ children, disabled, readonly, validationStatus, label, labelVariant = 'body', helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
     const value = useMemo(() => ({ disabled, validationStatus, type, direction }), [disabled, validationStatus, type, direction]);
     const showHeader = !!label || !!helperText || !!invalidText || !!validText;
     const childrenArray = React.Children.toArray(children);
@@ -16,7 +16,7 @@ const RadioGroup = ({ children, disabled, readonly, validationStatus, label, hel
             // @ts-expect-error - child.type is not typed
             (child.props.type === 'tile' || child.type.displayName === 'RadioTile'));
     styles.useVariants({ type: childIsCard ? 'tile' : 'radio', direction });
-    return (_jsx(RadioGroupContext.Provider, { value: value, children: _jsxs(RadioGroupComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(RadioGroupTextContent, { children: [!!label && _jsx(Label, { disabled: disabled, children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })), _jsx(View, { style: [styles.container, styles.containerGap(gap)], children: children })] }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: value, children: _jsxs(RadioGroupComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(RadioGroupTextContent, { children: [!!label && (_jsx(Label, { disabled: disabled, variant: labelVariant, children: label })), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })), _jsx(View, { style: [styles.container, styles.containerGap(gap)], children: children })] }) }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Radio/RadioGroup.props.d.ts

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

package/build/components/RadioCard/RadioCard.d.ts

@@ -29,7 +29,7 @@ declare const RadioCardIcon: import("react").ForwardRefExoticComponent<import("r
 }>;
 declare const RadioCardLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const RadioCard: {
-    ({ children, label, contentStyle, ...props }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, labelVariant, contentStyle, ...props }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { RadioCard, RadioCardGroup, RadioCardIcon, RadioCardIndicator, RadioCardLabel };

package/build/components/RadioCard/RadioCard.js

@@ -23,9 +23,9 @@ RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardIndicator.displayName = 'RadioCardIndicator';
 RadioCardIcon.displayName = 'RadioCardIcon';
 RadioCardLabel.displayName = 'RadioCardLabel';
-const RadioCard = ({ children, label, contentStyle, ...props }) => {
+const RadioCard = ({ children, label, labelVariant = 'body', contentStyle, ...props }) => {
     const { computedStyles } = useStyleProps(props);
-    return (_jsxs(RadioCardComponent, { ...props, children: [_jsxs(View, { style: styles.radioContainer, children: [_jsx(RadioCardIndicator, { children: _jsx(RadioCardIcon, {}) }), !!label && _jsx(RadioCardLabel, { children: label })] }), !!children && _jsx(View, { style: [computedStyles, contentStyle], children: children })] }));
+    return (_jsxs(RadioCardComponent, { ...props, children: [_jsxs(View, { style: styles.radioContainer, children: [_jsx(RadioCardIndicator, { children: _jsx(RadioCardIcon, {}) }), !!label && _jsx(RadioCardLabel, { variant: labelVariant, children: label })] }), !!children && _jsx(View, { style: [computedStyles, contentStyle], children: children })] }));
 };
 const styles = StyleSheet.create(theme => ({
     radioContainer: {

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

@@ -6,6 +6,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/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -12,7 +12,7 @@ import { Input } from '../Input';
 import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -67,7 +67,7 @@ const Select = ({ options = [], value, onValueChange, label, placeholder = 'Sele
     }, []);
     const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { children: [label, !isRequired && _jsx(Label, { children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { variant: labelVariant, children: [label, !isRequired && _jsx(Label, { variant: labelVariant, children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
                     styles.selectContainer,
                     styles.pressedContainer(pressed || isOpen),
                 ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {

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

@@ -40,6 +40,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/build/components/Switch/Switch.js

@@ -8,7 +8,7 @@ import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
-    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 = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;

package/build/components/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import type TabsProps from './Tabs.props';
 declare const Tabs: {
-    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, withPanels, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Tabs;

package/build/components/Tabs/Tabs.js

@@ -3,7 +3,7 @@ import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useS
 import { View } from 'react-native';
 import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
 import { TabsContext } from './Tabs.context';
-const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, withPanels, ...props }) => {
+const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, ...props }) => {
     // Collect child tab values
     const tabValues = useMemo(() => {
         const vals = [];

package/build/components/Textarea/Textarea.d.ts

@@ -7,5 +7,5 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
     };
 }, import("react-native").TextInputProps>;
 export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
-declare const Textarea: ({ validationStatus, children, disabled, focused, readonly, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -1,17 +1,57 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createTextarea } from '@gluestack-ui/textarea';
-import TextareaRoot from './TextareaRoot';
+import { useEffect } from 'react';
+import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
-import { useFormFieldContext } from '../FormField';
+import TextareaRoot from './TextareaRoot';
 export const TextareaComponent = createTextarea({
     Root: TextareaRoot,
     Input: TextareaFieldComponent,
 });
 export const TextareaField = TextareaComponent.Input;
-const Textarea = ({ validationStatus = 'initial', children, disabled, focused, readonly, ...props }) => {
+const Textarea = ({ validationStatus = 'initial', children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }) => {
     const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-    return (_jsx(TextareaComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, children: children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props }) })) }));
+    const textareaLabel = label ?? formFieldContext?.label;
+    const textareaHelperText = helperText ?? formFieldContext?.helperText;
+    const textareaValidText = validText ?? formFieldContext?.validText;
+    const textareaInvalidText = invalidText ?? formFieldContext?.invalidText;
+    const textareaRequired = required ?? formFieldContext?.required;
+    const textareaDisabled = disabled ?? formFieldContext?.disabled;
+    const textareaReadonly = readonly ?? formFieldContext?.readonly;
+    const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+    useEffect(() => {
+        if (formFieldContext?.setShouldHandleAccessibility) {
+            formFieldContext.setShouldHandleAccessibility(true);
+        }
+    }, []);
+    const getAccessibilityLabel = () => {
+        let accessibilityLabel = '';
+        if (textareaLabel) {
+            accessibilityLabel = accessibilityLabel + textareaLabel;
+        }
+        if (textareaRequired) {
+            accessibilityLabel = accessibilityLabel + ', required';
+        }
+        return accessibilityLabel || props.accessibilityLabel;
+    };
+    const getAccessibilityHint = () => {
+        let accessibilityHint = '';
+        if (textareaHelperText) {
+            accessibilityHint = accessibilityHint + textareaHelperText;
+        }
+        if (textareaValidationStatus !== 'initial') {
+            if (accessibilityHint.length > 0) {
+                accessibilityHint = accessibilityHint + ', ';
+            }
+            if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
+                accessibilityHint = accessibilityHint + textareaInvalidText;
+            }
+            if (textareaValidationStatus === 'valid' && textareaValidText) {
+                accessibilityHint = accessibilityHint + textareaValidText;
+            }
+        }
+        return accessibilityHint || props.accessibilityHint;
+    };
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(TextareaComponent, { ...(children ? props : {}), validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), children: children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props }) })) }) }));
 };
 export default Textarea;

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

@@ -23,6 +23,14 @@ export interface TextareaBaseProps {
     readonly?: boolean;
     focused?: boolean;
     placeholder?: string;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
+    required?: boolean;
+    isInBottomSheet?: boolean;
 }
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {
 }

package/build/components/Toast/ToastItem.js

@@ -26,7 +26,7 @@ const ToastItem = forwardRef(({ toast, onClose }, ref) => {
             AccessibilityInfo.announceForAccessibility(announcement);
         }, 100);
         return () => clearTimeout(timer);
-    }, [toast.text, toast.actionText]);
+    }, [toast.text, toast.actionText, translateY, opacity]);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: translateY.value + gestureTranslateY.value }],
         opacity: opacity.value,

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,7 +7,7 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? // @ts-ignore
+            ? // @ts-expect-error - Spread types may only be created from object types.
                 { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardPressHandlerContext } from '../Card';
 const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props }) => {
     const { active } = states || {};
-    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
         active,

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -7,7 +7,7 @@ const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? // @ts-ignore
+            ? // @ts-expect-error - Spread types may only be created from object types.
                 { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };

package/build/components/VerificationInput/VerificationInput.d.ts

@@ -1,6 +1,6 @@
 import VerificationInputProps from './VerificationInput.props';
 declare const VerificationInput: {
-    ({ value, onChangeText, label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, onChangeText, label, labelVariant, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -4,14 +4,14 @@ import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { useVerificationInput } from './useVerificationInput';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = ({ value = '', onChangeText, label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+const VerificationInput = ({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
     const length = 6;
     const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
         value,
         onChangeText,
     });
     const slots = Array.from({ length }, (_, index) => index);
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
                 const char = value[index] || '';
                 const isActive = focusedIndex === index;
                 return (_jsx(VerificationInputSlot, { ref: ref => {

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

@@ -13,6 +13,10 @@ export interface VerificationInputProps extends ViewProps {
      * The label for the input.
      */
     label?: string;
+    /**
+     * The label variant for the input.
+     */
+    labelVariant?: 'heading' | 'body';
     /**
      * Helper text to display below the input.
      */

package/build/utils/coloursAsArray.js

@@ -1,5 +1,5 @@
 import { color } from '../tokens';
-const { light, dark, ...restOfColors } = color;
+const { light, ...restOfColors } = color;
 /**
  * Recursively flatten nested color objects into camelCase keys
  */