@utilitywarehouse/hearth-react-native 0.36.0 → 0.36.2

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');

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

@@ -1,4 +1,9 @@
 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;
     displayName: string;

package/build/components/TimePickerInput/TimePickerInput.js

@@ -12,6 +12,11 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { DEFAULT_FORMAT_12, DEFAULT_FORMAT_24, maskDefaultFormat } from './TimePickerInput.utils';
 import TimePickerInputDoneButton from './TimePickerInputDoneButton';
 dayjs.extend(customParseFormat);
+/**
+ * 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, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;

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.

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 })] }));
 };