@utilitywarehouse/hearth-react-native 0.36.1 → 0.36.3

package/build/components/TimePicker/TimePickerWheel.web.js

@@ -34,7 +34,14 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
     const height = 140;
     const radius = height / 2;
     const valueIndex = useMemo(() => {
-        return Math.max(0, items.findIndex(item => item.value === value));
+        const rawIndex = items.findIndex(item => item.value === value);
+        if (rawIndex === -1) {
+            if (__DEV__) {
+                console.warn(`TimePickerWheel: value "${value}" not found in items [${items.map(item => item.value).join(', ')}]; falling back to index 0.`);
+            }
+            return 0;
+        }
+        return rawIndex;
     }, [items, value]);
     const handlePanEnd = useCallback((deltaY) => {
         let newValueIndex = valueIndex - Math.round(deltaY / ((radius * 2) / displayCount));
@@ -81,7 +88,9 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
             return items[targetIndex] || items[0];
         });
     }, [renderCount, valueIndex, items, circular]);
-    const currentIndex = Math.max(0, displayValues.findIndex(item => item?.value === value));
+    // displayValues is centered on valueIndex by construction, so the current item always
+    // sits at the middle index rather than needing a second findIndex/fallback lookup.
+    const currentIndex = Math.floor(renderCount / 2);
     return (_jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: styles.container, children: [_jsx(View, { style: [
                         styles.selectedIndicator,
                         {

package/build/components/TimePicker/utils.d.ts

@@ -0,0 +1,9 @@
+import type { PickerOption } from './TimePicker.props';
+/**
+ * Snaps a value to the closest matching option's value. Used to guarantee the value
+ * handed to a wheel picker always exists in its own options list — an exact match is
+ * returned as-is, a numeric mismatch snaps to the nearest option by distance, and a
+ * non-numeric or unmatched value falls back to the first option, since a mismatched
+ * value has nothing for the wheel to scroll to.
+ */
+export declare const getClosestOption: <T extends number | string>(value: T, options: PickerOption[]) => T;

package/build/components/TimePicker/utils.js

@@ -0,0 +1,30 @@
+/**
+ * Snaps a value to the closest matching option's value. Used to guarantee the value
+ * handed to a wheel picker always exists in its own options list — an exact match is
+ * returned as-is, a numeric mismatch snaps to the nearest option by distance, and a
+ * non-numeric or unmatched value falls back to the first option, since a mismatched
+ * value has nothing for the wheel to scroll to.
+ */
+export const getClosestOption = (value, options) => {
+    if (!options.length)
+        return value;
+    const values = options.map(option => option.value);
+    if (values.includes(value))
+        return value;
+    const numericValues = values.filter((optionValue) => {
+        return typeof optionValue === 'number';
+    });
+    if (typeof value !== 'number' || Number.isNaN(value) || !numericValues.length) {
+        return (options[0]?.value ?? value);
+    }
+    let closest = numericValues[0];
+    let closestDiff = Math.abs(value - closest);
+    numericValues.forEach(optionValue => {
+        const diff = Math.abs(value - optionValue);
+        if (diff < closestDiff) {
+            closestDiff = diff;
+            closest = optionValue;
+        }
+    });
+    return closest;
+};

package/build/components/TimePicker/utils.test.d.ts

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

package/build/components/TimePicker/utils.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { getClosestOption } from './utils';
+const minuteOptions = [0, 15, 30, 45].map(value => ({
+    value,
+    text: String(value),
+}));
+const periodOptions = [
+    { value: 'AM', text: 'AM' },
+    { value: 'PM', text: 'PM' },
+];
+describe('getClosestOption', () => {
+    it('returns the value unchanged when it matches an option exactly', () => {
+        expect(getClosestOption(30, minuteOptions)).toBe(30);
+    });
+    it('snaps a mismatched numeric value to the nearest option', () => {
+        expect(getClosestOption(20, minuteOptions)).toBe(15);
+        expect(getClosestOption(23, minuteOptions)).toBe(30);
+    });
+    it('returns the value unchanged when options is empty', () => {
+        expect(getClosestOption(37, [])).toBe(37);
+    });
+    it('falls back to the first option for a NaN value', () => {
+        expect(getClosestOption(NaN, minuteOptions)).toBe(0);
+    });
+    it('matches a non-numeric value against string options', () => {
+        expect(getClosestOption('PM', periodOptions)).toBe('PM');
+    });
+    it('falls back to the first option for an unmatched non-numeric value', () => {
+        expect(getClosestOption('unknown', periodOptions)).toBe('AM');
+    });
+});

package/build/components/TimePickerInput/TimePickerInput.d.ts

@@ -1,6 +1,11 @@
 import type TimePickerInputProps from './TimePickerInput.props';
+/**
+ * A text input for entering a time directly, paired with a trigger button that opens a
+ * TimePicker for selecting the same value. Formats and parses input using Day.js.
+ * @summary A text input with a time picker trigger.
+ */
 declare const TimePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, disableManualEntry, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TimePickerInput;

package/build/components/TimePickerInput/TimePickerInput.js

@@ -3,7 +3,7 @@ import { CloseSmallIcon, TimeSmallIcon } from '@utilitywarehouse/hearth-react-na
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
@@ -12,7 +12,12 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { DEFAULT_FORMAT_12, DEFAULT_FORMAT_24, maskDefaultFormat } from './TimePickerInput.utils';
 import TimePickerInputDoneButton from './TimePickerInputDoneButton';
 dayjs.extend(customParseFormat);
-const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
+/**
+ * A text input for entering a time directly, paired with a trigger button that opens a
+ * TimePicker for selecting the same value. Formats and parses input using Day.js.
+ * @summary A text input with a time picker trigger.
+ */
+const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, disableManualEntry = false, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
@@ -103,18 +108,24 @@ const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder;
-    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": "Time 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 time", accessibilityHint: "Removes the current time", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the time picker", icon: TimeSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(TimePicker, { ref: pickerRef, date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restTimePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(TimePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+    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(Pressable, { style: styles.fieldPressable, disabled: !disableManualEntry || isDisabled || isReadonly, onPress: openPicker, children: _jsx(InputField, { value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Time input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+                                disabled: isDisabled || isReadonly,
+                            }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, editable: !isReadonly && !isDisabled && !disableManualEntry, style: [styles.input, inputStyle, disableManualEntry && styles.noPointerEvents] }) }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear time", accessibilityHint: "Removes the current time", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the time picker", icon: TimeSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(TimePicker, { ref: pickerRef, date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restTimePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(TimePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };
 TimePickerInput.displayName = 'TimePickerInput';
 const styles = StyleSheet.create(theme => ({
     wrap: {
         gap: theme.components.input.date.gap,
     },
+    fieldPressable: {
+        flex: 1,
+    },
     input: {
         paddingLeft: 0,
         paddingRight: 0,
     },
+    noPointerEvents: {
+        pointerEvents: 'none',
+    },
 }));
 export default TimePickerInput;

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

@@ -2,18 +2,46 @@ import type { TextInputProps, ViewProps } from 'react-native';
 import type { DateType } from '../DatePicker/DatePicker.props';
 import type { TimePickerProps } from '../TimePicker/TimePicker.props';
 export interface TimePickerInputBaseProps {
+    /** Disables both typing and the time picker trigger button. */
     disabled?: boolean;
+    /**
+     * Renders the corresponding validation style. Inherited from FormField when nested.
+     * @default 'initial'
+     */
     validationStatus?: 'initial' | 'valid' | 'invalid';
+    /** Prevents manual typing while keeping the picker trigger available. */
     readonly?: boolean;
+    /** Forces the focused state styling. */
     focused?: boolean;
+    /** Label for the input. Inherited from FormField context when nested. */
     label?: string;
+    /**
+     * Visual variant of the label text.
+     * @default 'body'
+     */
     labelVariant?: 'heading' | 'body';
+    /** Helper text shown below the input. Inherited from FormField context when nested. */
     helperText?: string;
+    /** Icon shown alongside the helper text. */
     helperIcon?: React.ComponentType;
+    /** Text shown when `validationStatus` is `'valid'`. Inherited from FormField context when nested. */
     validText?: string;
+    /** Text shown when `validationStatus` is `'invalid'`. Inherited from FormField context when nested. */
     invalidText?: string;
+    /**
+     * Placeholder text shown when the input is empty.
+     * @default '--:--'
+     */
     placeholder?: string;
+    /**
+     * Uses BottomSheetTextInput when rendering inside a bottom sheet.
+     * @default false
+     */
     inBottomSheet?: boolean;
+    /**
+     * Whether the input is required.
+     * @default true
+     */
     required?: boolean;
     /**
      * Controls how the selected time is formatted when displayed inside the input.
@@ -28,6 +56,13 @@ export interface TimePickerInputBaseProps {
      * When true (default), the picker sheet is dismissed as soon as a time is picked.
      */
     autoCloseOnSelect?: boolean;
+    /**
+     * Blocks manual keyboard entry and makes tapping anywhere on the field open the
+     * time picker, instead of only the trailing trigger button. Independent of
+     * `disabled`/`readonly`, which still disable the whole field regardless of this prop.
+     * @default false
+     */
+    disableManualEntry?: boolean;
     /**
      * Additional props forwarded to the underlying TimePicker instance.
      */

package/build/components/Timeline/Timeline.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import type { TimelineProps } from './Timeline.props';
+/**
+ * Renders a vertical sequence of TimelineItem components, connecting them with a line and
+ * passing each its position so start, middle, and end connectors draw correctly.
+ * @summary A vertical timeline of connected steps.
+ */
 declare const Timeline: {
     ({ children, variant, style, ...rest }: TimelineProps): React.JSX.Element;
     displayName: string;

package/build/components/Timeline/Timeline.js

@@ -14,6 +14,11 @@ const getItemPosition = (index, count) => {
     }
     return 'middle';
 };
+/**
+ * Renders a vertical sequence of TimelineItem components, connecting them with a line and
+ * passing each its position so start, middle, and end connectors draw correctly.
+ * @summary A vertical timeline of connected steps.
+ */
 const Timeline = ({ children, variant = 'static', style, ...rest }) => {
     const childElements = React.Children.toArray(children).filter(React.isValidElement);
     return (_jsx(View, { accessibilityRole: "list", style: [styles.root, style], ...rest, children: childElements.map((child, index) => {

package/build/components/Timeline/TimelineItem.d.ts

@@ -1,4 +1,8 @@
 import type { TimelineItemProps } from './Timeline.props';
+/**
+ * A single step within a Timeline, showing a label, optional helper text, and a connector
+ * indicator. Can also be used standalone outside of Timeline.
+ */
 declare const TimelineItem: {
     ({ children, helperText, label, position, state, style, variant, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }: TimelineItemProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Timeline/TimelineItem.js

@@ -4,6 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
+/**
+ * A single step within a Timeline, showing a label, optional helper text, and a connector
+ * indicator. Can also be used standalone outside of Timeline.
+ */
 const TimelineItem = ({ children, helperText, label, position = 'single', state = 'incomplete', style, variant = 'static', accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }) => {
     styles.useVariants({ position, state, variant });
     const hasCustomContent = Boolean(children);

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

@@ -2,6 +2,10 @@ import React from 'react';
 import type { ToastContextValue, ToastProviderProps } from './Toast.props';
 declare const ToastContext: React.Context<ToastContextValue | undefined>;
 export declare const useToastContext: () => ToastContextValue;
+/**
+ * Renders and manages toast notifications for its subtree. Mount once near the
+ * app root, then trigger toasts anywhere below it via `useToast()`.
+ */
 export declare const ToastProvider: React.FC<ToastProviderProps>;
 export declare const useToast: () => ToastContextValue;
 export default ToastContext;

package/build/components/Toast/Toast.context.js

@@ -10,6 +10,10 @@ export const useToastContext = () => {
         throw new Error('useToastContext must be used within ToastProvider');
     return ctx;
 };
+/**
+ * Renders and manages toast notifications for its subtree. Mount once near the
+ * app root, then trigger toasts anywhere below it via `useToast()`.
+ */
 export const ToastProvider = ({ children, safeAreaPadding = true, }) => {
     const [toasts, setToasts] = useState([]);
     const timers = useRef({});

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

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 export interface ToastOptions {
+    /** Custom ID for the toast; auto-generated when omitted. */
     id?: string;
+    /** The main message to display. */
     text: string | ReactNode;
     /** Optional action text to display as a link */
     actionText?: string;
@@ -23,7 +25,12 @@ export interface ToastInstance extends ToastOptions {
     duration: number;
 }
 export interface ToastProviderProps {
+    /** App content to render below the toast stack. */
     children: ReactNode;
+    /**
+     * Whether to pad the toast stack for the device's safe area insets.
+     * @default true
+     */
     safeAreaPadding?: boolean;
 }
 export interface ToastContextValue {

package/build/components/ToggleButton/ToggleButton.d.ts

@@ -9,6 +9,10 @@ export declare const ToggleButtonIcon: import("react").ForwardRefExoticComponent
 }> & import("..").IconProps & {
     toggled: boolean;
 }>;
+/**
+ * A pressable button that switches between an on and off state, such as for a single
+ * standalone setting.
+ */
 declare const ToggleButton: {
     ({ text, toggled, onToggle, ...props }: ToggleButtonProps): import("react").JSX.Element;
     displayName: string;

package/build/components/ToggleButton/ToggleButton.js

@@ -14,6 +14,10 @@ export const ToggleButtonText = ToggleButtonComponent.Text;
 export const ToggleButtonIcon = ToggleButtonComponent.Icon;
 ToggleButtonText.displayName = 'ToggleButtonText';
 ToggleButtonIcon.displayName = 'ToggleButtonIcon';
+/**
+ * A pressable button that switches between an on and off state, such as for a single
+ * standalone setting.
+ */
 const ToggleButton = ({ text, toggled = false, onToggle, ...props }) => {
     return (_jsxs(ToggleButtonComponent, { toggled: toggled, onToggle: onToggle, ...props, children: [toggled && _jsx(ToggleButtonIcon, { toggled: toggled }), _jsx(ToggleButtonText, { toggled: toggled, children: text })] }));
 };

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

@@ -1,6 +1,12 @@
 import type { PressableProps } from 'react-native';
 export interface ToggleButtonProps extends PressableProps {
+    /** The text label of the button. */
     text?: string;
+    /**
+     * Whether the button is in the toggled (pressed/selected) state.
+     * @default false
+     */
     toggled?: boolean;
+    /** Called with the new toggled state whenever the button is pressed. */
     onToggle?: (toggled: boolean) => void;
 }

package/build/components/ToggleButtonCard/ToggleButtonCard.d.ts

@@ -1,9 +1,17 @@
 import ToggleButtonCardProps from './ToggleButtonCard.props';
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
+/**
+ * Groups a set of `ToggleButtonCard`s so only one can be selected at a time, laid out as a
+ * flexbox row or a grid. Use it for forms or surveys that present multiple selectable options.
+ */
 declare const ToggleButtonCardGroup: {
     ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
+/**
+ * A selectable card used as a single option within a `ToggleButtonCardGroup`. Use it to let
+ * users pick one option from a set of predefined choices in forms or surveys.
+ */
 declare const ToggleButtonCard: {
     ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react").JSX.Element;
     displayName: string;

package/build/components/ToggleButtonCard/ToggleButtonCard.js

@@ -12,11 +12,19 @@ const ToggleButtonCardComponent = createRadio({
     Label: () => null,
 });
 const ToggleButtonCardGroupComponent = ToggleButtonCardComponent.Group;
+/**
+ * Groups a set of `ToggleButtonCard`s so only one can be selected at a time, laid out as a
+ * flexbox row or a grid. Use it for forms or surveys that present multiple selectable options.
+ */
 const ToggleButtonCardGroup = ({ onChange, onValueChange, ...props }) => (_jsx(ToggleButtonCardGroupComponent, { ...props, onChange: (value) => {
         onChange?.(value);
         onValueChange?.(value);
     } }));
 ToggleButtonCardGroup.displayName = 'ToggleButtonCardGroup';
+/**
+ * A selectable card used as a single option within a `ToggleButtonCardGroup`. Use it to let
+ * users pick one option from a set of predefined choices in forms or surveys.
+ */
 const ToggleButtonCard = ({ children, contentStyle, ...props }) => {
     const { computedStyles } = useStyleProps(props);
     return (_jsx(ToggleButtonCardComponent, { ...props, children: !!children && _jsx(View, { style: [computedStyles, contentStyle], children: children }) }));

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

@@ -1,15 +1,24 @@
 import type { PressableProps, ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
 interface ToggleButtonCardProps extends Omit<PressableProps, 'children'> {
+    /** The value used for the toggle button, returned on form submission. */
     value: string;
+    /** Called when the state of the toggle button changes. */
     onChange?: (isSelected: boolean) => void;
     children?: ViewProps['children'];
+    /** The label to be displayed next to the toggle button. */
     label?: string;
+    /** Flex direction. */
     flexDirection?: ViewStyle['flexDirection'];
+    /** Flex wrap. */
     flexWrap?: ViewStyle['flexWrap'];
+    /** Align items. */
     alignItems?: ViewStyle['alignItems'];
+    /** Justify content. */
     justifyContent?: ViewStyle['justifyContent'];
+    /** Style applied to the content wrapper around `children`. */
     contentStyle?: ViewStyle;
+    /** Gap between child elements. */
     gap?: SpaceValue;
 }
 export default ToggleButtonCardProps;

package/build/components/ToggleButtonCard/ToggleButtonCardGroup.props.d.ts

@@ -2,22 +2,37 @@ import { ViewProps, ViewStyle } from 'react-native';
 import { space } from '../../tokens';
 import { GridProps } from '../Grid';
 type ToggleButtonCardGroupBaseProps = {
+    /** The value of the currently selected toggle button card. */
     value?: string;
+    /** Called when the selected toggle button card changes. */
     onValueChange?: (value: string) => void;
     /**
+     * Called when any child ToggleButtonCard is checked or unchecked.
      * @deprecated Use `onValueChange` instead.
      */
     onChange?: (value: string) => void;
+    /**
+     * Gap between child elements.
+     * @default '200'
+     */
     gap?: keyof typeof space;
 } & ViewProps;
 type ToggleButtonCardGroupFlexProps = {
     columns?: never;
+    /**
+     * Flex direction.
+     * @default 'row'
+     */
     flexDirection?: ViewStyle['flexDirection'];
+    /** Flex wrap. */
     flexWrap?: ViewStyle['flexWrap'];
+    /** Align items. */
     alignItems?: ViewStyle['alignItems'];
+    /** Justify content. */
     justifyContent?: ViewStyle['justifyContent'];
 };
 type ToggleButtonCardGroupGridProps = {
+    /** Number of grid columns. When set, the group uses a grid layout instead of flexbox. */
     columns: GridProps['columns'];
     flexDirection?: never;
     flexWrap?: never;

package/build/components/UnstyledIconButton/UnstyledIconButton.d.ts

@@ -1,4 +1,9 @@
 import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
+/**
+ * A pressable icon with no default visual styling, used as a building block for buttons that
+ * need bespoke appearance (such as input adornments) while keeping button accessibility and
+ * loading behaviour.
+ */
 declare const UnstyledIconButton: {
     ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react").JSX.Element;
     displayName: string;

package/build/components/UnstyledIconButton/UnstyledIconButton.js

@@ -15,6 +15,11 @@ const UnstyledIconButtonSpinner = UnstyledIconButtonComponent.Spinner;
 const UnstyledIconButtonIcon = UnstyledIconButtonComponent.Icon;
 UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
+/**
+ * A pressable icon with no default visual styling, used as a building block for buttons that
+ * need bespoke appearance (such as input adornments) while keeping button accessibility and
+ * loading behaviour.
+ */
 const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, iconStyle, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
     const { loading, accessibilityRole = 'button', accessible = true, focusable = true, importantForAccessibility = 'yes', ...restProps } = props;

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

@@ -3,12 +3,29 @@ import type { PressableProps, ViewProps } from 'react-native';
 import { ColorValue } from '../../types';
 export type UnstyledIconButtonProps = {
     disabled?: boolean;
+    /** Whether the button is currently pressed. */
     pressed?: boolean;
+    /**
+     * The icon component displayed on the button.
+     */
     icon: ComponentType;
+    /**
+     * If `true`, the button will show a spinner.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
     size?: 'sm' | 'md';
+    /**
+     * If `true`, the button colours will be inverted.
+     * @default false
+     */
     inverted?: boolean;
     children?: React.ReactNode;
+    /** Style applied to the icon. */
     iconStyle?: ViewProps['style'] & {
         color?: ColorValue;
     };

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

@@ -1,3 +1,7 @@
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+/**
+ * Captures a one-time password or other verification code as a sequence of single-character slots.
+ * Use it for OTP and SMS/email verification flows.
+ */
 declare const VerificationInput: import("react").ForwardRefExoticComponent<VerificationInputProps & import("react").RefAttributes<VerificationInputHandle>>;
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -6,6 +6,10 @@ import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
+/**
+ * Captures a one-time password or other verification code as a sequence of single-character slots.
+ * Use it for OTP and SMS/email verification flows.
+ */
 const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, testID, ...props }, ref) => {
     const length = 6;
     const inputRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.36.1",
+  "version": "0.36.3",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -59,6 +59,7 @@
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "globals": "^15.15.0",
+    "oversight-lint": "^0.7.0",
     "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
     "react": "19.2.3",
@@ -75,15 +76,16 @@
     "react-native-worklets": "0.10.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.5.6",
+    "storybook-addon-oversight": "^0.7.0",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.2",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.2",
     "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-tokens": "^0.4.6"
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
+    "@utilitywarehouse/hearth-tokens": "^0.4.7"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
@@ -115,6 +117,7 @@
     "dev": "storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open",
     "build:storybook": "storybook build",
-    "build:storybook:docs": "storybook build --docs"
+    "build:storybook:docs": "storybook build --docs",
+    "lint:oversight": "oversight"
   }
 }

package/public/llms/components/date-picker.md

@@ -24,11 +24,17 @@ The `DatePicker` component presents a calendar experience in a bottom sheet so p
 <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
   <ViewWrap>
     <Button onPress={() => modalRef.current?.present()}>Show Date Picker</Button>
+    <BodyText>
+      {confirmedDate ? `Confirmed: ${dayjs(confirmedDate).format('YYYY-MM-DD')}` : 'Not confirmed'}
+    </BodyText>
     <DatePicker
       ref={modalRef}
       mode="single"
       date={selected}
-      onChange={({ date }) => setSelected(date)}
+      onChange={({ date }) => {
+        setSelected(date);
+        setConfirmedDate(date);
+      }}
       onCancel={() => setSelected(undefined)}
     />
   </ViewWrap>

package/public/llms/components/time-picker.md

@@ -14,6 +14,7 @@
 <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
   <ViewWrap>
     <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
+    <BodyText>{selected ? 'Confirmed' : 'Not confirmed'}</BodyText>
     <TimePicker
       ref={modalRef}
       date={selected}

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.36.1
+Current version: v0.36.3
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.