@utilitywarehouse/hearth-react-native 0.15.2 → 0.16.0

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/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,54 @@
 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 (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/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/docs/components/AllComponents.web.tsx

@@ -55,6 +55,7 @@ import {
   Grid,
   Heading,
   HighlightBanner,
+  HighlightBannerImage,
   Icon,
   IconButton,
   IconContainer,
@@ -488,11 +489,13 @@ const AllComponents: React.FC = () => {
                 heading="Featured Content"
                 headingColor="energy"
                 imageContainerHeight={40}
-                image={{
-                  source: {
-                    uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-                  },
-                }}
+                image={
+                  <HighlightBannerImage
+                    source={{
+                      uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+                    }}
+                  />
+                }
                 description="Banner description goes here."
               />
             </Center>