@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.1

package/build/components/StepperInput/StepperInput.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddSmallIcon, MinusSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
+import { FormField } from '../FormField';
+import { InputComponent, InputField } from '../Input/Input';
+import StepperButton from './StepperButton';
+const normalizeValue = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return '';
+    }
+    return `${value}`;
+};
+const getDecimalPlaces = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return 0;
+    }
+    const normalizedValue = `${value}`;
+    const decimalPart = normalizedValue.split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+};
+const formatNumber = (value, precision) => {
+    if (precision <= 0) {
+        return `${Math.trunc(value)}`;
+    }
+    return value
+        .toFixed(precision)
+        .replace(/\.0+$/, '')
+        .replace(/(\.\d*?)0+$/, '$1');
+};
+const sanitizeValue = (value, allowNegative, allowDecimal) => {
+    const strippedValue = value.replace(allowDecimal ? /[^\d,.-]/g : allowNegative ? /[^\d-]/g : /\D/g, '');
+    const normalizedValue = allowDecimal ? strippedValue.replace(/,/g, '.') : strippedValue;
+    if (!allowNegative) {
+        const unsignedValue = normalizedValue.replace(/-/g, '');
+        if (!allowDecimal) {
+            return unsignedValue;
+        }
+        const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+        const decimalPart = decimalParts.join('');
+        return decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    }
+    const hasLeadingMinus = normalizedValue.startsWith('-');
+    const unsignedValue = normalizedValue.replace(/-/g, '');
+    if (!allowDecimal) {
+        return `${hasLeadingMinus ? '-' : ''}${unsignedValue}`;
+    }
+    const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+    const decimalPart = decimalParts.join('');
+    const composedValue = decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    return `${hasLeadingMinus ? '-' : ''}${composedValue}`;
+};
+const parseValue = (value) => {
+    if (!value || value === '-' || value === '.' || value === '-.') {
+        return null;
+    }
+    const parsedValue = Number(value);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+};
+const clampValue = (value, min, max) => {
+    let nextValue = value;
+    if (typeof min === 'number') {
+        nextValue = Math.max(min, nextValue);
+    }
+    if (typeof max === 'number') {
+        nextValue = Math.min(max, nextValue);
+    }
+    return nextValue;
+};
+const StepperInput = ({ value, defaultValue, onChangeText, onChangeValue, min, max, step = 1, focusInputOnStepPress = false, validationStatus = 'initial', disabled = false, readonly = false, focused = false, inBottomSheet = false, required = true, label, labelVariant = 'body', helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel = 'Decrease value', incrementAccessibilityLabel = 'Increase value', onFocus, onBlur, ref, ...props }) => {
+    const inputRef = useRef(null);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => normalizeValue(defaultValue));
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const displayValue = isControlled ? normalizeValue(value) : internalValue;
+    const parsedValue = parseValue(displayValue);
+    const resolvedFocused = focused || isInputFocused;
+    const allowNegative = typeof min !== 'number' || min < 0 || (typeof max === 'number' && max < 0);
+    const decimalPrecision = Math.max(getDecimalPlaces(value), getDecimalPlaces(defaultValue), getDecimalPlaces(min), getDecimalPlaces(max), getDecimalPlaces(step));
+    const allowDecimal = decimalPrecision > 0;
+    const keyboardType = allowNegative || allowDecimal ? 'numeric' : 'number-pad';
+    const inputMode = allowDecimal ? 'decimal' : 'numeric';
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label,
+        helperText,
+        validText,
+        invalidText,
+        required,
+        validationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+    });
+    useImperativeHandle(ref, () => inputRef.current, []);
+    useEffect(() => {
+        if (!isControlled && defaultValue !== undefined) {
+            setInternalValue(normalizeValue(defaultValue));
+        }
+    }, [defaultValue, isControlled]);
+    const updateValue = (nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChangeText?.(nextValue);
+        const nextParsedValue = parseValue(nextValue);
+        if (nextParsedValue !== null) {
+            onChangeValue?.(clampValue(nextParsedValue, min, max));
+        }
+    };
+    const handleChangeText = (nextText) => {
+        const sanitizedValue = sanitizeValue(nextText, allowNegative, allowDecimal);
+        if (sanitizedValue === '' ||
+            sanitizedValue === '-' ||
+            sanitizedValue === '.' ||
+            sanitizedValue === '-.' ||
+            (allowDecimal && sanitizedValue.endsWith('.'))) {
+            updateValue(sanitizedValue);
+            return;
+        }
+        const nextParsedValue = parseValue(sanitizedValue);
+        if (nextParsedValue === null) {
+            updateValue(sanitizedValue);
+            return;
+        }
+        const clampedText = formatNumber(clampValue(nextParsedValue, min, max), decimalPrecision);
+        updateValue(clampedText);
+    };
+    const handleStepPress = (direction) => {
+        const baseValue = parsedValue ?? (typeof min === 'number' ? min : 0);
+        const nextValue = clampValue(baseValue + direction * step, min, max);
+        const normalizedValue = formatNumber(nextValue, decimalPrecision);
+        updateValue(normalizedValue);
+        if (focusInputOnStepPress) {
+            inputRef.current?.focus();
+        }
+    };
+    const decrementDisabled = disabled || readonly || (typeof min === 'number' && parsedValue !== null && parsedValue <= min);
+    const incrementDisabled = disabled || readonly || (typeof max === 'number' && parsedValue !== null && parsedValue >= max);
+    const handleFocus = (event) => {
+        setIsInputFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setIsInputFocused(false);
+        onBlur?.(event);
+    };
+    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, style: [styles.root, style], children: _jsxs(View, { style: styles.controls, children: [_jsx(StepperButton, { icon: MinusSmallIcon, disabled: decrementDisabled, accessibilityLabel: decrementAccessibilityLabel, onPress: () => handleStepPress(-1) }), _jsx(InputComponent, { validationStatus: validationStatus, isInvalid: validationStatus === 'invalid', isReadOnly: readonly, isDisabled: disabled, isFocused: resolvedFocused, isRequired: required, style: styles.inputRoot, children: _jsx(InputField
+                    // @ts-expect-error - ref forwarding issue mirrors the base Input component
+                    , { 
+                        // @ts-expect-error - ref forwarding issue mirrors the base Input component
+                        ref: inputRef, inputMode: inputMode, keyboardType: keyboardType, inBottomSheet: inBottomSheet, editable: !disabled && !readonly, textAlign: "center", value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleChangeText, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: {
+                            ...(props.accessibilityState ?? {}),
+                            disabled: disabled || readonly,
+                        }, "aria-disabled": disabled || readonly, "aria-readonly": readonly, "aria-required": required, "aria-invalid": validationStatus === 'invalid', ...props, style: styles.inputField }) }), _jsx(StepperButton, { icon: AddSmallIcon, disabled: incrementDisabled, accessibilityLabel: incrementAccessibilityLabel, onPress: () => handleStepPress(1) })] }) }));
+};
+StepperInput.displayName = 'StepperInput';
+const styles = StyleSheet.create(theme => ({
+    root: {
+        width: '100%',
+        maxWidth: theme.components.input.maxWidth,
+    },
+    controls: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.input.stepper.gap,
+    },
+    inputRoot: {
+        width: 80,
+        minWidth: 80,
+        paddingHorizontal: 0,
+        justifyContent: 'center',
+    },
+    inputField: {
+        textAlign: 'center',
+        paddingHorizontal: 0,
+    },
+}));
+export default StepperInput;

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

@@ -0,0 +1,31 @@
+import type { ComponentType, Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
+export interface StepperBaseProps {
+    ref?: Ref<TextInput>;
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: ComponentType;
+    validText?: string;
+    invalidText?: string;
+    value?: number | string;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChangeValue?: (value: number) => void;
+    focusInputOnStepPress?: boolean;
+    decrementAccessibilityLabel?: string;
+    incrementAccessibilityLabel?: string;
+}
+export type StepperInputProps = StepperBaseProps & Omit<TextInputProps, 'children' | 'value' | 'defaultValue' | 'onChangeText' | 'editable' | 'keyboardType'> & ViewProps & {
+    onChangeText?: (text: string) => void;
+};
+export default StepperInputProps;

package/build/components/StepperInput/StepperInput.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/StepperInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepperInput } from './StepperInput';
+export type { StepperInputProps } from './StepperInput.props';

package/build/components/StepperInput/index.js

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

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, resizable, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -6,7 +6,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -18,7 +18,7 @@ export const TextareaField = TextareaComponent.Input;
 const DEFAULT_TEXTAREA_HEIGHT = 96;
 const RESIZE_HANDLE_TOUCH_SIZE = 28;
 const RESIZE_HANDLE_ICON_SIZE = 9;
-const Textarea = ({ validationStatus = 'initial', children, resizable = false, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }) => {
+const Textarea = ({ validationStatus = 'initial', children, resizable = false, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }) => {
     const formFieldContext = useFormFieldContext();
     const hasMeasuredHeight = useRef(false);
     const textareaLabel = label ?? formFieldContext?.label;
@@ -29,42 +29,31 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
     const textareaDisabled = disabled ?? formFieldContext?.disabled;
     const textareaReadonly = readonly ?? formFieldContext?.readonly;
     const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
-    const textareaHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
-    const resizeStartHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+    const textareaDefaultHeight = defaultHeight ?? DEFAULT_TEXTAREA_HEIGHT;
+    const textareaHeight = useSharedValue(textareaDefaultHeight);
+    const resizeStartHeight = useSharedValue(textareaDefaultHeight);
     const theme = useTheme();
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label: textareaLabel,
+        helperText: textareaHelperText,
+        validText: textareaValidText,
+        invalidText: textareaInvalidText,
+        required: textareaRequired,
+        validationStatus: textareaValidationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+    });
     useEffect(() => {
         if (formFieldContext?.setShouldHandleAccessibility) {
             formFieldContext.setShouldHandleAccessibility(true);
         }
     }, [formFieldContext]);
-    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;
-            }
+    useEffect(() => {
+        if (!hasMeasuredHeight.current) {
+            textareaHeight.value = textareaDefaultHeight;
+            resizeStartHeight.value = textareaDefaultHeight;
         }
-        return accessibilityHint || props.accessibilityHint;
-    };
+    }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
     const handleTextareaLayout = (event) => {
         if (!hasMeasuredHeight.current) {
             textareaHeight.value = event.nativeEvent.layout.height;
@@ -90,7 +79,7 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
     const rootStyle = (children ? props.style : undefined);
     const inputStyle = (!children ? props.style : undefined);
     const textareaStyle = (resizable ? [rootStyle, animatedHeightStyle] : rootStyle);
-    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: _jsxs(TextareaComponent, { ...(children ? props : {}), onLayout: handleTextareaLayout, style: textareaStyle, 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, onLayout: onLayout, style: [styles.textarea, inputStyle] }) })), resizable && !textareaDisabled ? (_jsx(GestureDetector, { gesture: resizeGesture, children: _jsx(View, { style: styles.resizeHandle, children: _jsx(Svg, { width: RESIZE_HANDLE_ICON_SIZE, height: RESIZE_HANDLE_ICON_SIZE, viewBox: "0 0 9 9", fill: "none", children: _jsx(Path, { d: "M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355", stroke: theme.color.icon.primary }) }) }) })) : null] }) }));
+    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: _jsxs(TextareaComponent, { ...(children ? props : {}), onLayout: handleTextareaLayout, style: textareaStyle, validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": accessibilityLabel, accessibilityHint: accessibilityHint, children: [children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props, onLayout: onLayout, style: [styles.textarea, inputStyle] }) })), resizable && !textareaDisabled ? (_jsx(GestureDetector, { gesture: resizeGesture, children: _jsx(View, { style: styles.resizeHandle, children: _jsx(Svg, { width: RESIZE_HANDLE_ICON_SIZE, height: RESIZE_HANDLE_ICON_SIZE, viewBox: "0 0 9 9", fill: "none", children: _jsx(Path, { d: "M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355", stroke: theme.color.icon.primary }) }) }) })) : null] }) }));
 };
 const styles = StyleSheet.create({
     textarea: {

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

@@ -1,5 +1,16 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 export interface TextareaBaseProps {
+    /**
+     * Sets the initial height of a resizable textarea in pixels.
+     * Has no effect unless `resizable` is enabled.
+     *
+     * @type number
+     * @example
+     * ```tsx
+     * <Textarea resizable defaultHeight={140} />
+     * ```
+     */
+    defaultHeight?: number;
     /**
      * If true, the textarea can be resized vertically using a drag handle.
      *

package/build/components/VerificationInput/VerificationInput.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
@@ -125,28 +126,17 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         },
     }), [length, updateValue]);
     const slots = Array.from({ length }, (_, index) => index);
-    const getAccessibilityLabel = () => {
-        return label || props.accessibilityLabel;
-    };
-    const getAccessibilityHint = () => {
-        let accessibilityHint = '';
-        if (helperText) {
-            accessibilityHint = accessibilityHint + helperText;
-        }
-        if (validationStatus !== 'initial') {
-            if (accessibilityHint.length > 0) {
-                accessibilityHint = accessibilityHint + ', ';
-            }
-            if (validationStatus === 'invalid' && invalidText) {
-                accessibilityHint = accessibilityHint + invalidText;
-            }
-            if (validationStatus === 'valid' && validText) {
-                accessibilityHint = accessibilityHint + validText;
-            }
-        }
-        return accessibilityHint || props.accessibilityHint;
-    };
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+        label,
+        helperText,
+        validText,
+        invalidText,
+        validationStatus,
+        fallbackLabel: props.accessibilityLabel,
+        fallbackHint: props.accessibilityHint,
+        includeRequiredInLabel: false,
+    });
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, style: [styles.root, style], ...props, children: _jsxs(View, { style: styles.slotsContainer, children: [_jsx(TextInput, { ref: inputRef, value: displayValue, autoFocus: autoFocus, editable: !disabled && !readonly, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: { disabled: disabled || readonly }, importantForAccessibility: "yes", onChangeText: handleChangeText, onSelectionChange: event => {
                         const nextSelection = event.nativeEvent.selection;
                         if (ignoreNextSelectionRef.current &&
                             (nextSelection.start !== latestSelectionRef.current.start ||

package/build/components/index.d.ts

@@ -47,11 +47,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

package/build/components/index.js

@@ -48,11 +48,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

package/build/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';

package/build/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';

package/build/hooks/useFormFieldAccessibility.d.ts

@@ -0,0 +1,17 @@
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+type UseFormFieldAccessibilityArgs = {
+    label?: string;
+    helperText?: string;
+    validText?: string;
+    invalidText?: string;
+    required?: boolean;
+    validationStatus?: ValidationStatus;
+    fallbackLabel?: string;
+    fallbackHint?: string;
+    includeRequiredInLabel?: boolean;
+};
+declare const useFormFieldAccessibility: ({ label, helperText, validText, invalidText, required, validationStatus, fallbackLabel, fallbackHint, includeRequiredInLabel, }: UseFormFieldAccessibilityArgs) => {
+    accessibilityHint: string | undefined;
+    accessibilityLabel: string | undefined;
+};
+export default useFormFieldAccessibility;

package/build/hooks/useFormFieldAccessibility.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+const useFormFieldAccessibility = ({ label, helperText, validText, invalidText, required = false, validationStatus = 'initial', fallbackLabel, fallbackHint, includeRequiredInLabel = true, }) => {
+    const accessibilityLabel = useMemo(() => {
+        const nextAccessibilityLabelParts = [];
+        if (label) {
+            nextAccessibilityLabelParts.push(label);
+        }
+        if (includeRequiredInLabel && required) {
+            nextAccessibilityLabelParts.push('required');
+        }
+        const nextAccessibilityLabel = nextAccessibilityLabelParts.join(', ');
+        return nextAccessibilityLabel || fallbackLabel;
+    }, [fallbackLabel, includeRequiredInLabel, label, required]);
+    const accessibilityHint = useMemo(() => {
+        const accessibilityHints = [];
+        if (helperText) {
+            accessibilityHints.push(helperText);
+        }
+        if (validationStatus === 'invalid' && invalidText) {
+            accessibilityHints.push(invalidText);
+        }
+        if (validationStatus === 'valid' && validText) {
+            accessibilityHints.push(validText);
+        }
+        return accessibilityHints.join(', ') || fallbackHint;
+    }, [fallbackHint, helperText, invalidText, validText, validationStatus]);
+    return {
+        accessibilityHint,
+        accessibilityLabel,
+    };
+};
+export default useFormFieldAccessibility;

package/build/hooks/useFormFieldAccessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/hooks/useFormFieldAccessibility.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import useFormFieldAccessibility from './useFormFieldAccessibility';
+const renderHook = (args) => {
+    let result;
+    const TestComponent = () => {
+        result = useFormFieldAccessibility(args);
+        return null;
+    };
+    renderToStaticMarkup(_jsx(TestComponent, {}));
+    if (!result) {
+        throw new Error('Hook did not return a result');
+    }
+    return result;
+};
+describe('useFormFieldAccessibility', () => {
+    it('builds a label from the field label and required state', () => {
+        expect(renderHook({
+            label: 'Email',
+            required: true,
+        })).toEqual({
+            accessibilityHint: undefined,
+            accessibilityLabel: 'Email, required',
+        });
+    });
+    it('builds a hint from helper text and validation feedback', () => {
+        expect(renderHook({
+            helperText: 'Enter the code we sent you',
+            validationStatus: 'invalid',
+            invalidText: 'Code is invalid',
+        })).toEqual({
+            accessibilityHint: 'Enter the code we sent you, Code is invalid',
+            accessibilityLabel: undefined,
+        });
+    });
+    it('falls back to provided accessibility props when no composed value exists', () => {
+        expect(renderHook({
+            fallbackLabel: 'Custom label',
+            fallbackHint: 'Custom hint',
+        })).toEqual({
+            accessibilityHint: 'Custom hint',
+            accessibilityLabel: 'Custom label',
+        });
+    });
+    it('supports omitting the required suffix from the label', () => {
+        expect(renderHook({
+            label: 'Verification code',
+            required: true,
+            includeRequiredInLabel: false,
+        })).toEqual({
+            accessibilityHint: undefined,
+            accessibilityLabel: 'Verification code',
+        });
+    });
+});

package/docs/adding-shadows.mdx

@@ -62,6 +62,6 @@ const MyComponent = () => <Card shadowColor="brand">{/* Card content */}</Card>;
 <NextPrevPage
   prevLink="all-components"
   prevTitle="All Components"
-  nextLink="primitives-box"
-  nextTitle="Box"
+  nextLink="guides-dark-mode-best-practice"
+  nextTitle="Dark Mode Best Practice"
 />

package/docs/changelog.mdx

@@ -9,6 +9,22 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.31.1
+
+### Patch Changes
+
+- [#1119](https://github.com/utilitywarehouse/hearth/pull/1119) [`19415d4`](https://github.com/utilitywarehouse/hearth/commit/19415d4d54458b3fb019df6647b9a5e4c375b672) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Refresh dark mode tokens across components and semantic colors.
+
+  Dark mode color tokens have been updated across semantic and component tokens to improve contrast and visual consistency. This also fixes `TableHeaderCell` text colors so purple and white header variants resolve the correct foreground token.
+
+  **Components affected**:
+  - dark mode tokens
+  - `TableHeaderCell`
+
+  **Developer changes**:
+
+  No code changes are required unless you rely on the previous dark mode token values or visual snapshots.
+
 ## 0.31.0
 
 ### Minor Changes