@utilitywarehouse/hearth-react-native 0.36.1 → 0.36.3

package/build/components/SectionHeader/SectionHeader.d.ts

@@ -1,4 +1,5 @@
 import SectionHeaderProps from './SectionHeader.props';
+/** A heading row for a section or list, with an optional helper text, badge and trailing content. */
 declare const SectionHeader: {
     ({ heading, helperText, children, style, trailingContent, badge, invalidText, ...props }: SectionHeaderProps): import("react").JSX.Element;
     displayName: string;

package/build/components/SectionHeader/SectionHeader.js

@@ -8,6 +8,7 @@ import SectionHeaderTitle from './SectionHeaderHeading';
 import SectionHeaderHelperText from './SectionHeaderHelperText';
 import SectionHeaderTextContent from './SectionHeaderTextContent';
 import SectionHeaderTrailingContent from './SectionHeaderTrailingContent';
+/** A heading row for a section or list, with an optional helper text, badge and trailing content. */
 const SectionHeader = ({ heading, helperText, children, style, trailingContent, badge, invalidText, ...props }) => {
     return (_jsx(View, { ...props, style: [styles.container, style], children: children ? (children) : (_jsxs(_Fragment, { children: [_jsxs(SectionHeaderTextContent, { children: [_jsx(SectionHeaderTitle, { children: heading }), !!helperText && _jsx(SectionHeaderHelperText, { children: helperText }), !!invalidText && (_jsx(Helper, { validationStatus: "invalid", showIcon: true, icon: ErrorCircleSmallIcon, text: invalidText || '' }))] }), !!badge && _jsx(Badge, { ...badge }), !!trailingContent && (_jsx(SectionHeaderTrailingContent, { children: trailingContent }))] })) }));
 };

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

@@ -2,9 +2,11 @@ import { Ref } from 'react';
 import type { View, ViewProps } from 'react-native';
 import BadgeProps from '../Badge/Badge.props';
 interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
+    /** Forwarded ref to the underlying view. */
     ref?: Ref<View>;
 }
 export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
+    /** Custom content rendered in place of the default heading, helper text, badge and trailing content. */
     children: ViewProps['children'];
     heading?: never;
     helperText?: never;
@@ -14,10 +16,15 @@ export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
 }
 export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
     children?: never;
+    /** The text to display in the heading of the section. */
     heading: string;
+    /** The helper text to display below the heading. */
     helperText?: string;
+    /** Optional content to display on the right side. */
     trailingContent?: React.ReactNode;
+    /** Optional badge to display next to the heading. */
     badge?: BadgeProps;
+    /** The invalid text to be displayed below the helper text. */
     invalidText?: string;
 }
 type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;

package/build/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,4 +1,9 @@
 import type SegmentedControlProps from './SegmentedControl.props';
+/**
+ * Lets a user switch between a small set of mutually exclusive options rendered as
+ * `SegmentedControlOption` children, with an animated indicator tracking the current selection.
+ * @summary A single-choice, tab-like control for switching between a few options.
+ */
 declare const SegmentedControl: {
     ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, style, ...props }: SegmentedControlProps): import("react").JSX.Element;
     displayName: string;

package/build/components/SegmentedControl/SegmentedControl.js

@@ -7,6 +7,11 @@ import { useStyleProps } from '../../hooks';
 import { SegmentedControlContext } from './SegmentedControl.context';
 const Indicator = Animated.createAnimatedComponent(View);
 const GROUP_BORDER_WIDTH = 1;
+/**
+ * Lets a user switch between a small set of mutually exclusive options rendered as
+ * `SegmentedControlOption` children, with an animated indicator tracking the current selection.
+ * @summary A single-choice, tab-like control for switching between a few options.
+ */
 const SegmentedControl = ({ value: controlledValue, defaultValue, onValueChange, size = 'sm', disabled = false, children, style, ...props }) => {
     const { computedStyles, remainingProps } = useStyleProps(props);
     const isReducedMotion = useReducedMotion();

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import SelectProps from './Select.props';
+/**
+ * Lets a user pick a single value from a list of options presented in a bottom sheet. Use it in
+ * forms where the full set of options doesn't need to be visible at once, optionally with search.
+ * @summary A form field for picking one value from a bottom-sheet list of options.
+ */
 declare const Select: {
     ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): React.JSX.Element;
     displayName: string;

package/build/components/Select/Select.js

@@ -14,6 +14,11 @@ import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import { filterOptionsByLabel } from './Select.utils';
 import SelectOption from './SelectOption';
+/**
+ * Lets a user pick a single value from a list of options presented in a bottom sheet. Use it in
+ * forms where the full set of options doesn't need to be visible at once, optionally with search.
+ * @summary A form field for picking one value from a bottom-sheet list of options.
+ */
 const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;

package/build/components/Skeleton/Skeleton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type SkeletonProps from './Skeleton.props';
+/** A pulsing placeholder block, shown in place of content while it loads. */
 declare const Skeleton: {
     ({ width, height, backgroundColor: bg, borderRadius, style, ...props }: SkeletonProps): React.JSX.Element;
     displayName: string;

package/build/components/Skeleton/Skeleton.js

@@ -5,6 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
 import getStyleValue from '../../utils/getStyleValue';
+/** A pulsing placeholder block, shown in place of content while it loads. */
 const Skeleton = ({ width, height, backgroundColor: bg, borderRadius, style, ...props }) => {
     const opacity = useSharedValue(1);
     const { components } = useTheme();

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

@@ -1,9 +1,13 @@
 import type { DimensionValue, ViewProps } from 'react-native';
 import type { ColorValue, BorderRadiusValue } from '../../types';
 interface SkeletonProps extends ViewProps {
+    /** The width of the skeleton. */
     width: DimensionValue;
+    /** The height of the skeleton. */
     height: DimensionValue;
+    /** The background color of the skeleton. Falls back to the theme's loading colour. */
     backgroundColor?: ColorValue;
+    /** The border radius of the skeleton. Falls back to the theme's `xs` border radius. */
     borderRadius?: BorderRadiusValue;
 }
 export default SkeletonProps;

package/build/components/Spinner/Spinner.d.ts

@@ -1,3 +1,7 @@
 import type SpinnerProps from './Spinner.props';
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 declare const Spinner: import("react").ComponentType<SpinnerProps>;
 export default Spinner;

package/build/components/Spinner/Spinner.js

@@ -9,6 +9,10 @@ import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();
     const width = components.spinner[size].size;
@@ -81,5 +85,9 @@ const styles = StyleSheet.create(theme => ({
         },
     },
 }));
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 const Spinner = createSpinner({ Root: SpinnerRoot });
 export default Spinner;

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

@@ -2,7 +2,12 @@ import { RefAttributes } from 'react';
 import { type ViewProps } from 'react-native';
 import { ColorValue } from '../../types';
 interface SpinnerProps extends ViewProps, RefAttributes<any> {
+    /**
+     * The size of the spinner.
+     * @default 'md'
+     */
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** The color of the spinner. */
     color?: ColorValue;
 }
 export default SpinnerProps;

package/build/components/Spinner/Spinner.web.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type SpinnerProps from './Spinner.props';
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 declare const Spinner: React.ComponentType<SpinnerProps>;
 export default Spinner;

package/build/components/Spinner/Spinner.web.js

@@ -10,6 +10,10 @@ import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();
     const width = components.spinner[size].size;
@@ -77,5 +81,9 @@ const styles = StyleSheet.create(theme => ({
         },
     },
 }));
+/**
+ * Indicates that an asynchronous process is ongoing. Use it on its own or inside
+ * another component, such as a `Button` or `Dialog`, while content is loading.
+ */
 const Spinner = createSpinner({ Root: SpinnerRoot });
 export default Spinner;

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

@@ -1,4 +1,8 @@
 import StepperInputProps from './StepperInput.props';
+/**
+ * Combines a numeric text input with decrement and increment controls. Use it when a value should
+ * stay within a defined range but still needs direct text entry.
+ */
 declare const StepperInput: {
     ({ value, defaultValue, onChangeText, onChangeValue, min, max, step, focusInputOnStepPress, validationStatus, disabled, readonly, focused, inBottomSheet, required, label, labelVariant, helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel, incrementAccessibilityLabel, onFocus, onBlur, ref, ...props }: StepperInputProps): import("react").JSX.Element;
     displayName: string;

package/build/components/StepperInput/StepperInput.js

@@ -8,6 +8,10 @@ import { FormField } from '../FormField';
 import { InputComponent, InputField } from '../Input/Input';
 import StepperButton from './StepperButton';
 import { clampValue, formatNumber, getDecimalPlaces, normalizeValue, parseValue, sanitizeValue, } from './StepperInput.utils';
+/**
+ * Combines a numeric text input with decrement and increment controls. Use it when a value should
+ * stay within a defined range but still needs direct text entry.
+ */
 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;

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

@@ -2,30 +2,74 @@ import type { ComponentType, Ref } from 'react';
 import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 export interface StepperBaseProps {
     ref?: Ref<TextInput>;
+    /** Disables the input and both stepper buttons.
+     * @default false
+     */
     disabled?: boolean;
+    /** Validation styling for the input.
+     * @default 'initial'
+     */
     validationStatus?: 'initial' | 'valid' | 'invalid';
+    /** Prevents editing and disables both buttons.
+     * @default false
+     */
     readonly?: boolean;
+    /** Forces the focused visual state on the input.
+     * @default false
+     */
     focused?: boolean;
     placeholder?: string;
+    /** Renders using `BottomSheetTextInput` for use inside a bottom sheet.
+     * @default false
+     */
     inBottomSheet?: boolean;
+    /** Indicates the input is required.
+     * @default true
+     */
     required?: boolean;
+    /** Label shown above the stepper. */
     label?: string;
+    /** Typography variant used for the label.
+     * @default 'body'
+     */
     labelVariant?: 'heading' | 'body';
+    /** Helper text shown below the label. */
     helperText?: string;
+    /** Icon shown next to the helper text. */
     helperIcon?: ComponentType;
+    /** Validation text shown when `validationStatus` is `'valid'`. */
     validText?: string;
+    /** Validation text shown when `validationStatus` is `'invalid'`. */
     invalidText?: string;
+    /** Controlled value displayed in the input. */
     value?: number | string;
+    /** Initial value for uncontrolled usage. */
     defaultValue?: number;
+    /** Minimum allowed numeric value. */
     min?: number;
+    /** Maximum allowed numeric value. */
     max?: number;
+    /** Amount added or removed when a step button is pressed.
+     * @default 1
+     */
     step?: number;
+    /** Called whenever the current text can be parsed as a number. */
     onChangeValue?: (value: number) => void;
+    /** Moves focus to the text input after a step button updates the value.
+     * @default false
+     */
     focusInputOnStepPress?: boolean;
+    /** Accessibility label for the decrement button.
+     * @default 'Decrease value'
+     */
     decrementAccessibilityLabel?: string;
+    /** Accessibility label for the increment button.
+     * @default 'Increase value'
+     */
     incrementAccessibilityLabel?: string;
 }
 export type StepperInputProps = StepperBaseProps & Omit<TextInputProps, 'children' | 'value' | 'defaultValue' | 'onChangeText' | 'editable' | 'keyboardType'> & ViewProps & {
+    /** Called whenever the displayed string changes. */
     onChangeText?: (text: string) => void;
 };
 export default StepperInputProps;

package/build/components/Switch/Switch.d.ts

@@ -1,3 +1,7 @@
 import SwitchProps from './Switch.props';
+/**
+ * Toggles a single setting on or off. Use it to activate or deactivate an individual
+ * option, typically inside a form field or list item.
+ */
 declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react").JSX.Element;
 export default CustomSwitch;

package/build/components/Switch/Switch.js

@@ -7,6 +7,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
+/**
+ * Toggles a single setting on or off. Use it to activate or deactivate an individual
+ * option, typically inside a form field or list item.
+ */
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'md', ...accessibilityProps }) => {
     const { components } = useTheme();
     const theme = useAnimatedTheme();

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

@@ -6,7 +6,12 @@ type SwitchSize = 'sm' | 'md';
  */
 type DeprecatedSwitchSize = 'small' | 'medium';
 interface SwitchProps extends PressableProps, AccessibilityProps {
+    /**
+     * The value of the switch.
+     * @default false
+     */
     value: boolean;
+    /** Called when the switch value changes. */
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
     /**

package/build/components/Table/Table.d.ts

@@ -1,4 +1,8 @@
 import type { TableProps } from './Table.props';
+/**
+ * Arranges structured data into rows and columns, with optional pagination beneath the rows.
+ * Scrolls horizontally when the columns need more space than the viewport allows.
+ */
 declare const Table: {
     ({ children, columnWidths, container, pagination, style, ...props }: TableProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Table/Table.js

@@ -34,6 +34,10 @@ const getMaxColumnCount = (children) => {
     });
     return maxColumns;
 };
+/**
+ * Arranges structured data into rows and columns, with optional pagination beneath the rows.
+ * Scrolls horizontally when the columns need more space than the viewport allows.
+ */
 const Table = ({ children, columnWidths = [], container = 'none', pagination, style, ...props }) => {
     const [containerWidth, setContainerWidth] = useState(0);
     const columnCount = getMaxColumnCount(children);

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

@@ -27,6 +27,7 @@ export interface TableBodyProps extends ViewProps {
     children: ReactNode;
 }
 export interface TableHeaderProps extends ViewProps {
+    /** TableHeaderCell elements rendered as the header row. */
     children: ReactNode;
     /**
      * Visual style for header cells.
@@ -41,7 +42,12 @@ export interface TableCellProps extends ViewProps {
     children?: ReactNode;
 }
 export interface TableHeaderCellProps extends ViewProps {
+    /** Cell content; strings and numbers are rendered as body text. */
     children?: ReactNode;
+    /**
+     * Visual style for the cell, normally set automatically by the parent TableHeader.
+     * @default 'white'
+     */
     color?: 'purple' | 'white';
     /**
      * Renders the header cell as a row header within the body.

package/build/components/Table/TableHeader.d.ts

@@ -1,4 +1,7 @@
 import { TableHeaderProps } from './Table.props';
+/**
+ * Renders a row of TableHeaderCell elements as the header of a Table.
+ */
 declare const TableHeader: {
     ({ children, color, style, ...props }: TableHeaderProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Table/TableHeader.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from 'react';
 import { View } from 'react-native';
+/**
+ * Renders a row of TableHeaderCell elements as the header of a Table.
+ */
 const TableHeader = ({ children, color = 'purple', style, ...props }) => {
     const items = Children.toArray(children);
     return (_jsx(View, { ...props, style: [styles.header, style], children: items.map((child, index) => {

package/build/components/Table/TableHeaderCell.d.ts

@@ -1,8 +1,14 @@
 import type { TableHeaderCellProps } from './Table.props';
+/**
+ * Renders a single header cell within a TableHeader row, or a row header when used with `row`.
+ */
 declare const TableHeaderCell: {
     ({ children, color, row, style, trailingContent, ...props }: TableHeaderCellProps & {
+        /** Zero-based index of this cell among its siblings, set automatically by TableHeader. */
         columnIndex?: number;
+        /** Whether this is the last cell in its row, set automatically by TableHeader. */
         isLast?: boolean;
+        /** Whether this cell belongs to the last body row, used to omit the bottom border. */
         isLastRow?: boolean;
     }): import("react").JSX.Element;
     displayName: string;

package/build/components/Table/TableHeaderCell.js

@@ -12,6 +12,9 @@ const renderContent = (children, weight = 'semibold', color = 'white') => {
     }
     return children;
 };
+/**
+ * Renders a single header cell within a TableHeader row, or a row header when used with `row`.
+ */
 const TableHeaderCell = ({ children, color = 'white', row = false, style, trailingContent, ...props }) => {
     const { columnWidths, container, hasPagination } = useTableContext();
     const { columnIndex = 0, isLast, isLastRow, ...rest } = props;

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

@@ -1,4 +1,9 @@
 import type TabsProps from './Tabs.props';
+/**
+ * Groups Tab components into a single tab bar, managing selection state and the animated
+ * active indicator. Use with TabPanel to link tabs to their corresponding content.
+ * @summary A tab bar for switching between related views.
+ */
 declare const Tabs: {
     ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, ...props }: TabsProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Tabs/Tabs.js

@@ -3,6 +3,11 @@ import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useS
 import { View } from 'react-native';
 import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
 import { TabsContext } from './Tabs.context';
+/**
+ * Groups Tab components into a single tab bar, managing selection state and the animated
+ * active indicator. Use with TabPanel to link tabs to their corresponding content.
+ * @summary A tab bar for switching between related views.
+ */
 const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, ...props }) => {
     // Collect child tab values
     const tabValues = useMemo(() => {

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

@@ -7,5 +7,11 @@ 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>;
+/**
+ * A multi-line text field for entering longer form content, optionally resizable by dragging
+ * a handle. Renders as a form field with label, helper, and validation text, or as a plain
+ * container when used with children such as TextareaField.
+ * @summary A multi-line text input field.
+ */
 declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -18,6 +18,12 @@ export const TextareaField = TextareaComponent.Input;
 const DEFAULT_TEXTAREA_HEIGHT = 96;
 const RESIZE_HANDLE_TOUCH_SIZE = 28;
 const RESIZE_HANDLE_ICON_SIZE = 9;
+/**
+ * A multi-line text field for entering longer form content, optionally resizable by dragging
+ * a handle. Renders as a form field with label, helper, and validation text, or as a plain
+ * container when used with children such as TextareaField.
+ * @summary A multi-line text input field.
+ */
 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);

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

@@ -41,16 +41,30 @@ export interface TextareaBaseProps {
      * ```
      */
     validationStatus?: 'initial' | 'valid' | 'invalid';
+    /** Makes the textarea read-only. */
     readonly?: boolean;
+    /** Sets focus on the textarea. */
     focused?: boolean;
+    /** Placeholder text shown when the textarea is empty. */
     placeholder?: string;
+    /** Label for the textarea. Only used when the textarea has no children. */
     label?: string;
+    /**
+     * Visual variant of the label text. Only used when the textarea has no children.
+     * @default 'body'
+     */
     labelVariant?: 'heading' | 'body';
+    /** Helper text shown below the textarea. Only used when the textarea has no children. */
     helperText?: string;
+    /** Icon shown alongside the helper text. Only used when the textarea has no children. */
     helperIcon?: React.ComponentType;
+    /** Text shown when `validationStatus` is `'valid'`. Only used when the textarea has no children. */
     validText?: string;
+    /** Text shown when `validationStatus` is `'invalid'`. */
     invalidText?: string;
+    /** Whether the textarea is required. Only used when the textarea has no children. */
     required?: boolean;
+    /** Adjusts styling when the textarea is rendered inside a bottom sheet. */
     isInBottomSheet?: boolean;
 }
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {

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

@@ -1,4 +1,9 @@
 import type { TimePickerProps } from './TimePicker.props';
+/**
+ * Presents a wheel-based hour and minute selector inside a bottom sheet, opened imperatively
+ * via a ref. Supports 12-hour and 24-hour clocks and reports the picked time as a `Date`.
+ * @summary A bottom-sheet time picker.
+ */
 declare const TimePicker: {
     ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react").JSX.Element;
     displayName: string;

package/build/components/TimePicker/TimePicker.js

@@ -13,6 +13,11 @@ dayjs.extend(timezone);
 const Footer = ({ onCancel, onConfirm }) => {
     return (_jsxs(RNView, { style: styles.footer, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onConfirm, children: "Ok" })] }));
 };
+/**
+ * Presents a wheel-based hour and minute selector inside a bottom sheet, opened imperatively
+ * via a ref. Supports 12-hour and 24-hour clocks and reports the picked time as a `Date`.
+ * @summary A bottom-sheet time picker.
+ */
 const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel = () => { }, }) => {
     dayjs.tz.setDefault(timeZone);
     dayjs.locale('en');
@@ -22,6 +27,9 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
     const [currentDate, setCurrentDate] = useState(() => {
         return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
     });
+    // Tracks whether a wheel change was made since the sheet last opened, so Ok
+    // doesn't re-emit onChange for a value it already just committed via the wheel.
+    const hasChangedRef = useRef(false);
     useEffect(() => {
         const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
         const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
@@ -34,6 +42,7 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
     }, []);
     const handleSelectDate = useCallback((selectedDate) => {
         const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+        hasChangedRef.current = true;
         if (!dayjs(currentDate).isSame(newDate, 'minute')) {
             setCurrentDate(newDate);
         }
@@ -44,10 +53,14 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
         closeTimePicker();
     }, [closeTimePicker, onCancel]);
     const handleConfirm = useCallback(() => {
+        if (!hasChangedRef.current) {
+            onChange?.({ date: currentDate ? dayjs(currentDate).toDate() : currentDate });
+        }
         closeTimePicker();
-    }, [closeTimePicker]);
+    }, [currentDate, onChange, closeTimePicker]);
     const handleChange = useCallback((index) => {
         if (index > -1) {
+            hasChangedRef.current = false;
             setTimeout(() => {
                 AccessibilityInfo.announceForAccessibility('Time picker opened.');
                 const targetRef = pickerViewRef.current;

package/build/components/TimePicker/TimePickerView.js

@@ -6,6 +6,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { formatNumber, getParsedDate } from '../DatePicker/utils';
 import TimePickerWheel from './TimePickerWheel';
+import { getClosestOption } from './utils';
 const createNumberList = (num, numerals, startFrom = 0) => {
     return Array.from({ length: num }, (_, i) => ({
         value: i + startFrom,
@@ -24,23 +25,6 @@ const createMinuteList = (interval, numerals) => {
             : `${formatNumber(value, numerals)}`,
     }));
 };
-const getClosestMinute = (value, options) => {
-    if (!options.length)
-        return value;
-    const values = options.map(option => option.value);
-    if (values.includes(value))
-        return value;
-    let closest = values[0] ?? value;
-    let closestDiff = Math.abs(value - closest);
-    values.forEach(optionValue => {
-        const diff = Math.abs(value - optionValue);
-        if (diff < closestDiff) {
-            closestDiff = diff;
-            closest = optionValue;
-        }
-    });
-    return closest;
-};
 const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval = 1, }) => {
     const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, 'latn', use12Hours ? 1 : 0), [use12Hours]);
     const minutes = useMemo(() => createMinuteList(minuteInterval, 'latn'), [minuteInterval]);
@@ -50,7 +34,9 @@ const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minut
     ], []);
     const baseDate = currentDate;
     const { hour, hour12, minute, period } = getParsedDate(baseDate);
-    const minuteValue = useMemo(() => getClosestMinute(minute, minutes), [minute, minutes]);
+    const rawHour = use12Hours ? hour12 : hour;
+    const hourValue = useMemo(() => getClosestOption(rawHour, hours), [rawHour, hours]);
+    const minuteValue = useMemo(() => getClosestOption(minute, minutes), [minute, minutes]);
     const handleChangeHour = useCallback((value) => {
         let hour24 = value;
         if (use12Hours) {
@@ -85,7 +71,7 @@ const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minut
         const newDate = dayjs.tz(baseDate, timeZone).hour(newHour);
         onSelectDate(newDate);
     }, [baseDate, onSelectDate, timeZone, hour, hour12]);
-    return (_jsxs(View, { style: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, size: "lg", children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: minuteValue, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(TimePickerWheel, { value: period, items: periodOptions, setValue: handlePeriodChange }) })) : null] }));
+    return (_jsxs(View, { style: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: hourValue, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, size: "lg", children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: minuteValue, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(TimePickerWheel, { value: period, items: periodOptions, setValue: handlePeriodChange }) })) : null] }));
 };
 const styles = StyleSheet.create({
     container: {