@utilitywarehouse/hearth-react-native 0.15.2 → 0.16.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.2 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.16.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,8 +1,6 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.2 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.16.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative
 :----|----------:|--------:
-Rule | Time (ms) | Relative
-:----|----------:|--------:

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.16.0
+
+### Minor Changes
+
+- [#810](https://github.com/utilitywarehouse/hearth/pull/810) [`eae4c24`](https://github.com/utilitywarehouse/hearth/commit/eae4c24a421415247c720f88bb8341133340cc7b) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: All `Input` components accessibility improvements and you can now pass a label, helper text and validation to the `Input` component directly.
+
+  ### Input accessibility improvements and FormField integration
+
+  The `Input` component has been updated to internally use `FormField`. This allows you to pass props like `label`, `helperText`, and validation status directly to the `Input` component, streamlining its usage.
+
+  We have also greatly improved accessibility behavior. The `Input` component now intelligently constructs `aria-label` and `accessibilityHint` based on the provided label, helper text, and validation state. To support this, `FormField` now has a mechanism to hide its own accessibility elements when a child component is handling them, preventing duplicate announcements.
+
+  #### Affected components
+  - `Input`
+  - `CurrencyInput`
+  - `DatePickerInput`
+  - `Textarea`
+  - `FormField`
+
+  #### Developer changes
+
+  You can now use `Input`, `CurrencyInput`, `DatePickerInput`, and `Textarea` without explicitly wrapping them in `FormField` for standard layouts:
+
+  ```tsx
+  // Before
+  <FormField label="Email" helperText="Enter email">
+    <Input />
+  </FormField>
+
+  // After
+  <Input label="Email" helperText="Enter email" />
+  ```
+
+  No breaking changes. The `Input` component continues to support being wrapped externally by `FormField`.
+
+  #### References
+  - UWDS-4179
+
+- [#803](https://github.com/utilitywarehouse/hearth/pull/803) [`8e96af6`](https://github.com/utilitywarehouse/hearth/commit/8e96af69f3a3498f264f2a6dc2416cdb6a298275) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Adds `labelVariant` prop to components with a label
+
+  ### Adds `labelVariant` prop to components with a label
+
+  Added a `labelVariant` prop to allow consumers to choose between a body or heading style for component labels. Defaults to `body`.
+
+  #### Affected components
+  - `CheckboxGroup`
+  - `FormField`
+  - `Label`
+  - `RadioGroup`
+  - `RadioCard`
+  - `Select`
+  - `VerificationInput`
+  - `Input`
+  - `CurrencyInput`
+  - `DatePickerInput`
+  - `Textarea`
+
+  #### Developer changes
+
+  You can now pass `labelVariant="heading"` to these components to render the label as a heading instead of body text.
+
+  ```tsx
+  <FormField label="My Label" labelVariant="heading">
+    <Input />
+  </FormField>
+  ```
+
+## 0.15.3
+
+### Patch Changes
+
+- [#801](https://github.com/utilitywarehouse/hearth/pull/801) [`6d11339`](https://github.com/utilitywarehouse/hearth/commit/6d1133997b28efa104c282522a5708f1d4d8614c) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `Modal` without handle heading padding issue
+
+- [#796](https://github.com/utilitywarehouse/hearth/pull/796) [`f0ccadb`](https://github.com/utilitywarehouse/hearth/commit/f0ccadbb48fb7a7a70520d7521746a63421e01cc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `CheckboxTile` text wrapping issue
+
 ## 0.15.2
 
 ### Patch Changes
@@ -23,7 +98,6 @@
   Added new props to `UL`, `OL`, and `ListItem` components to support custom list markers, including icons, images, and colors. This brings the functionality closer to CSS-like list styling. We also fixed a layout issue where list item text could overflow the container.
 
   **Components affected**:
-
   - `UL` (UnorderedList)
   - `OL` (OrderedList)
   - `ListItem`
@@ -43,7 +117,6 @@
   ```
 
   Supported props:
-
   - `listStyleImage`: React Element (e.g. `<Image />`)
   - `listStyleIcon`: Icon component
   - `listStyleWidth` / `listStyleHeight`: Dimensions for the marker (default: 20)
@@ -180,7 +253,6 @@
 - [#567](https://github.com/utilitywarehouse/hearth/pull/567) [`b6869cf`](https://github.com/utilitywarehouse/hearth/commit/b6869cfaca7b3a5aacb27c06733f0243b6faa02a) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `ProgressStepper` component
 
 - [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - `List` component updates:
-
   - [BREAKING] The `text` prop in `ListItem` is now `heading`.
   - Added `ListAction` component.
   - Added `badge` prop to `ListItem`.
@@ -188,7 +260,6 @@
   - Removes `divider` prop from `List` and `ListItem`; dividers are now handled automatically.
 
 - [#585](https://github.com/utilitywarehouse/hearth/pull/585) [`4894c34`](https://github.com/utilitywarehouse/hearth/commit/4894c34acaadcbbaba78fd64be2f8ae862200e1f) Thanks [@dorota-uw](https://github.com/dorota-uw)! - [BREAKING] `DescriptionListItem` updates:
-
   - Removed `Link` props: `linkText`, `linkHref`, `linkIcon`, `linkIconPosition`, `linkOnPress`, `linkTarget`, `linkShowIcon`.
   - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
   - Added validation text support to `DescriptionListItem` via `invalidText` prop.
@@ -196,7 +267,6 @@
 - [#572](https://github.com/utilitywarehouse/hearth/pull/572) [`9fa6499`](https://github.com/utilitywarehouse/hearth/commit/9fa6499b6eb1534c2ce7dc4352b1f848b94786ec) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `IndicatorIconButton` component
 
 - [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] `SectionHeader` updates:
-
   - Removed `Link` props: `linkText`, `linkOnPress`, `linkAccessibilityLabel`.
   - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
   - Added `badge` prop to display a `Badge` next to the heading.
@@ -248,7 +318,6 @@
 - [#472](https://github.com/utilitywarehouse/hearth/pull/472) [`009fe4b`](https://github.com/utilitywarehouse/hearth/commit/009fe4bff4fc54e424f22629040f715d3d4714ea) Thanks [@jordmccord](https://github.com/jordmccord)! - Add `image` prop to `Checkbox` and `Radio` components
 
 - [#500](https://github.com/utilitywarehouse/hearth/pull/500) [`cc49e74`](https://github.com/utilitywarehouse/hearth/commit/cc49e74e3736b9647e8c5576ce45020add258625) Thanks [@jordmccord](https://github.com/jordmccord)! - - Updated dependencies [[`8dac8c1`](https://github.com/utilitywarehouse/hearth/commit/8dac8c1def9083d8e4efa1385e0ee7be23428c46)]:
-
   - @utilitywarehouse/hearth-react-native-icons@0.4.0
 
 - [#499](https://github.com/utilitywarehouse/hearth/pull/499) [`7b6781c`](https://github.com/utilitywarehouse/hearth/commit/7b6781cc054cf9f1ed4969a2c663abceb526c249) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes dark mode styles for several components

package/build/components/BottomSheet/BottomSheetScrollView.js

@@ -14,6 +14,8 @@ const BottomSheetScrollView = ({ children, style, contentContainerStyle, isModal
 const styles = StyleSheet.create((theme, rt) => ({
     container: {
         backgroundColor: theme.color.surface.neutral.strong,
+        borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
+        borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
     },
     contentContainer: {
         paddingHorizontal: theme.components.bottomSheet.padding,

package/build/components/Checkbox/CheckboxGroup.d.ts

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

package/build/components/Checkbox/CheckboxGroup.js

@@ -7,7 +7,7 @@ import { Label } from '../Label';
 import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
 import { CheckboxGroupContext } from './CheckboxGroup.context';
 import CheckboxGroupTextContent from './CheckboxGroupTextContent';
-const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
+const CheckboxGroup = ({ 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 CheckboxGroup = ({ children, disabled, readonly, validationStatus, label,
             // @ts-expect-error - child.type is not typed
             (child.props.type === 'tile' || child.type.displayName === 'CheckboxTile'));
     styles.useVariants({ type: childIsCard ? 'tile' : 'checkbox', direction });
-    return (_jsx(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(CheckboxGroupTextContent, { 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(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(CheckboxGroupTextContent, { 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/Checkbox/CheckboxGroup.props.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { space } from '../../tokens';
 import { ViewProps } from 'react-native';
+import { space } from '../../tokens';
 interface CheckboxGroupProps extends ViewProps {
     disabled?: boolean;
     value?: Array<string>;
@@ -8,6 +8,7 @@ interface CheckboxGroupProps extends ViewProps {
     readonly?: boolean;
     validationStatus?: 'valid' | 'invalid' | 'initial';
     label?: string;
+    labelVariant?: 'heading' | 'body';
     helperText?: string;
     showValidationIcon?: boolean;
     invalidText?: string;

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -36,6 +36,9 @@ const styles = StyleSheet.create(theme => ({
                 column: {
                     flex: 1,
                 },
+                default: {
+                    flex: 1,
+                },
             },
         },
     },

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, label, labelVariant, helperText, helperIcon, validText, invalidText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -3,12 +3,8 @@ import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ref, ...rest }) => {
-    const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required = true, disableGroupSeparator = false, value, onChangeText, label, labelVariant = 'body', helperText, helperIcon, validText, invalidText, ref, ...rest }) => {
     const defaultFormat = '0.00';
     const getPlaceholder = placeholder ?? defaultFormat;
     const handleChangeText = (text) => {
@@ -21,7 +17,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, required: required, style: styles.wrap, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

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

@@ -11,6 +11,12 @@ export interface CurrencyInputBaseProps {
     required?: boolean;
     /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
     disableGroupSeparator?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
 }
 export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
 export default CurrencyInputProps;

package/build/components/DateInput/DateInputSegment.js

@@ -24,7 +24,6 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     input: {
-        flex: 1,
         maxWidth: 96,
     },
 }));

package/build/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import type DatePickerInputProps from './DatePickerInput.props';
 declare const DatePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.js

@@ -19,7 +19,7 @@ const maskDefaultFormat = (value) => {
     const year = digitsOnly.slice(4, 8);
     return [day, month, year].filter(Boolean).join('/');
 };
-const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isDisabled = formFieldContext?.disabled ?? disabled;
@@ -109,7 +109,7 @@ const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder ?? format;
-    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: isDisabled, readonly: isReadonly, focused: focused, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
                             disabled: isDisabled || isReadonly,
                         }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };

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

@@ -6,6 +6,12 @@ export interface DatePickerInputBaseProps {
     validationStatus?: 'initial' | 'valid' | 'invalid';
     readonly?: boolean;
     focused?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
     placeholder?: string;
     inBottomSheet?: boolean;
     required?: boolean;

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, format, 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/Modal/Modal.js

@@ -104,6 +104,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
         noButtons,
         stickyFooter,
+        showHandle: props.showHandle,
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
     const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
@@ -159,6 +160,14 @@ const styles = StyleSheet.create((theme, rt) => ({
     header: {
         flexDirection: 'row',
         gap: theme.components.modal.gap,
+        variants: {
+            showHandle: {
+                true: {},
+                false: {
+                    marginTop: -6,
+                },
+            },
+        },
     },
     headerTextContent: {
         flex: 1,

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;