@utilitywarehouse/hearth-react-native 0.36.1 → 0.36.3

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

@@ -77,45 +77,123 @@ export type MultiChange = (params: {
 }) => void;
 export type Styles = Partial<ViewStyle | TextStyle | ImageStyle>;
 export interface DatePickerBaseProps {
+    /**
+     * Controls whether the picker returns a single date, a date range, or multiple dates.
+     * @default 'single'
+     */
     mode?: CalendarMode;
+    /** IANA time zone identifier used to normalise and compare dates. */
     timeZone?: string;
+    /** The selected date, used in single mode. */
     date?: DateType;
+    /** Start of the selected range, used in range mode. */
     startDate?: DateType;
+    /** End of the selected range, used in range mode. */
     endDate?: DateType;
+    /** The selected dates, used in multiple mode. */
     dates?: DateType[];
+    /** Minimum length of a selected range, in days, when using range mode. */
     min?: number;
+    /** Maximum range length, in days, or the maximum number of selected dates in multiple mode. */
     max?: number;
+    /** Called after a selection changes. */
     onChange?: SingleChange | RangeChange | MultiChange;
+    /** Earliest year available in the year picker. */
     startYear?: number;
+    /** Latest year available in the year picker. */
     endYear?: number;
+    /** Earliest selectable date; dates before this are disabled. */
     minDate?: DateType;
+    /** Latest selectable date; dates after this are disabled. */
     maxDate?: DateType;
+    /** List or predicate marking which dates can be selected. */
     enabledDates?: DateType[] | ((date: DateType) => boolean);
+    /** List or predicate marking which dates cannot be selected. */
     disabledDates?: DateType[] | ((date: DateType) => boolean);
+    /**
+     * Index of the first weekday, where 0 is Sunday and 6 is Saturday.
+     * @default 1
+     */
     firstDayOfWeek?: number;
+    /**
+     * Whether to show the leading and trailing days from adjacent months.
+     * @default true
+     */
     showOutsideDays?: boolean;
+    /**
+     * Whether to show a time picker alongside the calendar, in single mode.
+     * @default false
+     */
     timePicker?: boolean;
+    /** Whether the time picker uses a 12-hour format with AM/PM instead of 24-hour. */
     use12Hours?: boolean;
+    /**
+     * The calendar view shown when the picker first opens.
+     * @default 'day'
+     */
     initialView?: CalendarViews;
+    /**
+     * Height of the calendar container.
+     * @default CONTAINER_HEIGHT
+     */
     containerHeight?: number;
+    /**
+     * Height of the weekday header row.
+     * @default WEEKDAYS_HEIGHT
+     */
     weekdaysHeight?: number;
     style?: ViewStyle;
+    /**
+     * Placement of the month navigation controls.
+     * @default 'right'
+     */
     navigationPosition?: NavigationPosition;
+    /**
+     * Format used for the weekday labels.
+     * @default 'min'
+     */
     weekdaysFormat?: WeekdayFormat;
+    /**
+     * Format used for month names.
+     * @default 'short'
+     */
     monthsFormat?: MonthFormat;
+    /**
+     * Format used for the heading above the calendar grid.
+     * @default 'full'
+     */
     monthCaptionFormat?: MonthFormat;
+    /** Whether to allow selecting multiple separate ranges before confirming. */
     multiRangeMode?: boolean;
+    /** Whether to hide the calendar header controls. */
     hideHeader?: boolean;
+    /** Whether to hide the footer actions. */
     hideFooter?: boolean;
+    /** Whether to hide the weekday labels row. */
     hideWeekdays?: boolean;
+    /** Whether to prevent switching to the month selection view. */
     disableMonthPicker?: boolean;
+    /** Whether to prevent switching to the year selection view. */
     disableYearPicker?: boolean;
     /** use to handle month and year selectors */
     month?: number;
+    /** Forces the calendar to display a specific year. */
     year?: number;
+    /**
+     * Called when the displayed month changes.
+     * @default () => {}
+     */
     onMonthChange?: (month: number) => void;
+    /**
+     * Called when the displayed year changes.
+     * @default () => {}
+     */
     onYearChange?: (year: number) => void;
     ref?: Ref<BottomSheetModalMethods<any>>;
+    /**
+     * Called when the cancel action is triggered from the footer.
+     * @default () => {}
+     */
     onCancel?: () => void;
 }
 export type Numerals = 'latn';

package/build/components/DatePicker/DatePickerFooter.js

@@ -4,14 +4,18 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Button } from '../Button';
 import { useDatePickerContext } from './DatePicker.context';
 const Footer = () => {
-    const { closeDatePicker, onCancel } = useDatePickerContext();
+    const { closeDatePicker, onConfirm, onCancel } = useDatePickerContext();
     const handleCancel = () => {
         if (onCancel) {
             onCancel();
         }
         closeDatePicker();
     };
-    return (_jsxs(View, { style: styles.container, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: closeDatePicker, children: "Ok" })] }));
+    const handleConfirm = () => {
+        onConfirm();
+        closeDatePicker();
+    };
+    return (_jsxs(View, { style: styles.container, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleConfirm, children: "Ok" })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

@@ -1,6 +1,10 @@
 import type DatePickerInputProps from './DatePickerInput.props';
+/**
+ * Use DatePickerInput for a text field that accepts a typed date or one picked from an
+ * attached calendar, formatting and parsing the value with Day.js.
+ */
 declare const DatePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, disableManualEntry, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.js

@@ -3,7 +3,7 @@ import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-reac
 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 { DatePicker } from '../DatePicker';
 import { useFormFieldContext } from '../FormField';
@@ -12,7 +12,11 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { DEFAULT_FORMAT, maskDefaultFormat } from './DatePickerInput.utils';
 import DatePickerInputDoneButton from './DatePickerInputDoneButton';
 dayjs.extend(customParseFormat);
-const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+/**
+ * Use DatePickerInput for a text field that accepts a typed date or one picked from an
+ * attached calendar, formatting and parsing the value with Day.js.
+ */
+const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, disableManualEntry = false, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
@@ -101,18 +105,24 @@ const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder ?? format;
-    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
-                            disabled: isDisabled || isReadonly,
-                        }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+    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": "Date 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 date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };
 DatePickerInput.displayName = 'DatePickerInput';
 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 DatePickerInput;

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

@@ -2,18 +2,39 @@ import type { TextInputProps, ViewProps } from 'react-native';
 import type { DatePickerSingleProps } from '../DatePicker/DatePicker';
 import type { DateType } from '../DatePicker/DatePicker.props';
 export interface DatePickerInputBaseProps {
+    /** Disables both typing and the calendar trigger button. */
     disabled?: boolean;
+    /**
+     * Renders the corresponding validation style.
+     * @default 'initial'
+     */
     validationStatus?: 'initial' | 'valid' | 'invalid';
+    /** Prevents manual typing while keeping the calendar picker available. */
     readonly?: boolean;
+    /** Forces the focused visual state. */
     focused?: boolean;
+    /** The label for the input. */
     label?: string;
+    /** The variant of the label text. */
     labelVariant?: 'heading' | 'body';
+    /** Helper text to display below the input. */
     helperText?: string;
+    /** Icon to display alongside the helper text. */
     helperIcon?: React.ComponentType;
+    /** Text to display below the input when `validationStatus` is `'valid'`. */
     validText?: string;
+    /** Text to display below the input when `validationStatus` is `'invalid'`. */
     invalidText?: string;
     placeholder?: string;
+    /**
+     * Renders using `BottomSheetTextInput` for use inside a bottom sheet.
+     * @default false
+     */
     inBottomSheet?: boolean;
+    /**
+     * Whether the input is required.
+     * @default true
+     */
     required?: boolean;
     /**
      * Controls how the selected date is formatted when displayed inside the input.
@@ -29,6 +50,13 @@ export interface DatePickerInputBaseProps {
      * When true (default), the calendar sheet is dismissed as soon as a date is picked.
      */
     autoCloseOnSelect?: boolean;
+    /**
+     * Blocks manual keyboard entry and makes tapping anywhere on the field open the
+     * calendar picker, instead of only the trailing calendar 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 DatePicker instance.
      */

package/build/components/DescriptionList/DescriptionList.d.ts

@@ -1,4 +1,8 @@
 import type DescriptionListProps from './DescriptionList.props';
+/**
+ * Use DescriptionList to display a list of related heading/description pairs, laid out as
+ * stacked rows or two columns, with an optional heading and helper text above the list.
+ */
 declare const DescriptionList: {
     ({ direction, itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, invalidText, ...props }: DescriptionListProps): import("react").JSX.Element;
     displayName: string;

package/build/components/DescriptionList/DescriptionList.js

@@ -4,6 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { SectionHeader } from '../SectionHeader';
 import { DescriptionListContext } from './DescriptionList.context';
+/**
+ * Use DescriptionList to display a list of related heading/description pairs, laid out as
+ * stacked rows or two columns, with an optional heading and helper text above the list.
+ */
 const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, invalidText, ...props }) => {
     styles.useVariants({ direction });
     const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);

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

@@ -4,9 +4,13 @@ export interface DescriptionListProps extends ViewProps {
     direction?: 'row' | 'column';
     /** Override heading/term column width when layout is row (defaults to token) */
     itemHeadingWidth?: number;
+    /** Optional overall heading, rendered as a SectionHeader above the list. */
     heading?: string;
+    /** Supporting text displayed below the heading. */
     helperText?: string;
+    /** Custom trailing content for the heading (e.g. a Link). */
     headerTrailingContent?: React.ReactNode;
+    /** Text to show below the heading when the section is invalid. */
     invalidText?: string;
 }
 export default DescriptionListProps;

package/build/components/DetailText/DetailText.d.ts

@@ -1,4 +1,8 @@
 import type DetailTextProps from './DetailText.props';
+/**
+ * Renders detail copy, smaller secondary text used for captions, metadata, or supporting
+ * information alongside body content, with size and colour variants.
+ */
 declare const DetailText: {
     ({ children, color, size, truncated, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }: DetailTextProps): import("react").JSX.Element;
     displayName: string;

package/build/components/DetailText/DetailText.js

@@ -3,6 +3,10 @@ import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
+/**
+ * Renders detail copy, smaller secondary text used for captions, metadata, or supporting
+ * information alongside body content, with size and colour variants.
+ */
 const DetailText = ({ children, color, size = 'md', truncated, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
     const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({

package/build/components/Divider/Divider.d.ts

@@ -1,4 +1,8 @@
 import type DividerProps from './Divider.props';
+/**
+ * Use Divider to create a visual separation between sections or elements, as a horizontal or
+ * vertical line.
+ */
 declare const Divider: {
     ({ orientation, color, spacing, space, height, width, flexItem, ...props }: DividerProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Divider/Divider.js

@@ -4,6 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+/**
+ * Use Divider to create a visual separation between sections or elements, as a horizontal or
+ * vertical line.
+ */
 const Divider = ({ orientation = 'horizontal', color, spacing, space, height, width, flexItem, ...props }) => {
     styles.useVariants({ orientation, spacing: space ?? spacing, flexItem });
     const { color: themeColor, colorMode } = useTheme();

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

@@ -1,17 +1,27 @@
 import type { DimensionValue, ViewProps } from 'react-native';
 import type { ColorValue, SpacingValues } from '../../types';
 interface DividerProps extends Omit<ViewProps, 'children'> {
+    /** The color of the divider line. */
     color?: ColorValue;
+    /** The background color of the divider line. */
     backgroundColor?: ColorValue;
+    /** The space around the divider. */
     spacing?: SpacingValues;
     /**
      * The space between child elements (gap).
      * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
      */
     space?: SpacingValues;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
+    /** The height of the divider. */
     height?: DimensionValue;
+    /** The width of the divider. */
     width?: DimensionValue;
+    /** Gives a vertical divider the correct height when used inside a flex container. */
     flexItem?: boolean;
 }
 export default DividerProps;

package/build/components/Expandable/Expandable.d.ts

@@ -1,4 +1,9 @@
 import { ExpandableProps } from './Expandable.props';
+/**
+ * Use Expandable to show or hide content with a smooth height and opacity animation. It's a
+ * primitive building block for accordions, collapsible sections, and other expand/collapse
+ * interactions.
+ */
 declare const Expandable: {
     ({ expanded, onExpandedChange, children, duration, style, accessibilityLabel, testID, animateOpacity, ...props }: ExpandableProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Expandable/Expandable.js

@@ -3,6 +3,11 @@ import { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+/**
+ * Use Expandable to show or hide content with a smooth height and opacity animation. It's a
+ * primitive building block for accordions, collapsible sections, and other expand/collapse
+ * interactions.
+ */
 const Expandable = ({ expanded = false, onExpandedChange, children, duration = 200, style, accessibilityLabel, testID, animateOpacity = true, ...props }) => {
     const height = useSharedValue(0);
     const open = useSharedValue(expanded);

package/build/components/ExpandableCard/ExpandableCard.d.ts

@@ -1,4 +1,8 @@
 import type ExpandableCardProps from './ExpandableCard.props';
+/**
+ * Use ExpandableCard for a Card that reveals additional content when its trigger is pressed,
+ * with a built-in heading, helper text, leading/trailing content, and expansion animation.
+ */
 declare const ExpandableCard: {
     ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, triggerContent, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react").JSX.Element;
     displayName: string;

package/build/components/ExpandableCard/ExpandableCard.js

@@ -3,6 +3,10 @@ import { useState } from 'react';
 import { Card } from '../Card';
 import ExpandableCardExpandedContent from './ExpandableCardExpandedContent';
 import ExpandableCardTrigger from './ExpandableCardTrigger';
+/**
+ * Use ExpandableCard for a Card that reveals additional content when its trigger is pressed,
+ * with a built-in heading, helper text, leading/trailing content, and expansion animation.
+ */
 const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, triggerContent, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
     // Use controlled or uncontrolled state

package/build/components/Flex/Flex.d.ts

@@ -1,4 +1,8 @@
 import FlexProps from './Flex.props';
+/**
+ * Use Flex to lay out children in a row or column with control over alignment, wrapping, and
+ * spacing between them.
+ */
 declare const Flex: {
     ({ style, children, direction, align, justify, wrap, spacing, space, ...rest }: FlexProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Flex/Flex.js

@@ -2,6 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
+/**
+ * Use Flex to lay out children in a row or column with control over alignment, wrapping, and
+ * spacing between them.
+ */
 const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,

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

@@ -1,10 +1,30 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
 import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SizeProps, SpacingValues } from '../../types';
 interface FlexProps extends ViewProps, MarginProps, PaddingProps, FlexLayoutProps, GapProps, Pick<SizeProps, 'width'>, Omit<DisplayProps, 'direction'> {
+    /**
+     * The direction of the flex container.
+     * @default 'column'
+     */
     direction?: ViewStyle['flexDirection'];
+    /**
+     * The align items of the flex container.
+     * @default 'flex-start'
+     */
     align?: FlexAlignType;
+    /**
+     * The justify content of the flex container.
+     * @default 'flex-start'
+     */
     justify?: ViewStyle['justifyContent'];
+    /**
+     * The wrap of the flex container.
+     * @default 'nowrap'
+     */
     wrap?: ViewStyle['flexWrap'];
+    /**
+     * The space between the content.
+     * @default 'md'
+     */
     spacing?: SpacingValues;
     /**
      * The space between child elements (gap).

package/build/components/FormField/FormField.d.ts

@@ -22,6 +22,11 @@ export declare const FormFieldInvalidText: {
     displayName: string;
 };
 export declare const FormFieldTextContent: typeof View;
+/**
+ * Use FormField to wrap a form control with a consistent label, helper text, and
+ * valid/invalid messaging, and to share validation and required/disabled state with its
+ * children.
+ */
 declare const FormField: {
     ({ children, disabled, validationStatus, readonly, label, helperText, helperIcon, validText, invalidText, required, labelVariant, accessibilityHandledByChildren, ...props }: FormFieldProps): import("react").JSX.Element;
     displayName: string;

package/build/components/FormField/FormField.js

@@ -30,6 +30,11 @@ export const FormFieldHelperIcon = HelperIcon;
 export const FormFieldValidText = HelperText;
 export const FormFieldInvalidText = HelperText;
 export const FormFieldTextContent = View;
+/**
+ * Use FormField to wrap a form control with a consistent label, helper text, and
+ * valid/invalid messaging, and to share validation and required/disabled state with its
+ * children.
+ */
 const FormField = ({ children, disabled, validationStatus = 'initial', readonly, label, helperText, helperIcon, validText, invalidText, required = true, labelVariant = 'body', accessibilityHandledByChildren = false, ...props }) => {
     const [shouldHandleAccessibility, setShouldHandleAccessibility] = useState(accessibilityHandledByChildren);
     const value = useMemo(() => ({

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

@@ -1,16 +1,40 @@
 import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 export interface FormFieldBaseProps {
+    /**
+     * The validation status of the field.
+     * @default 'initial'
+     */
     validationStatus?: 'valid' | 'invalid' | 'initial';
+    /** Whether the field is disabled. */
     disabled?: boolean;
+    /** Whether the field is readonly. */
     readonly?: boolean;
+    /** The label for the field. */
     label?: string;
+    /**
+     * The variant of the label text.
+     * @default 'body'
+     */
     labelVariant?: 'heading' | 'body';
+    /** The helper text for the field. */
     helperText?: string;
+    /** The icon for the helper text. */
     helperIcon?: ComponentType;
+    /** The valid text for the field. */
     validText?: string;
+    /** The invalid text for the field. */
     invalidText?: string;
+    /**
+     * Whether the field is required.
+     * @default true
+     */
     required?: boolean;
+    /**
+     * Whether accessibility is handled by child components, hiding accessibility for the
+     * FormField itself.
+     * @default false
+     */
     accessibilityHandledByChildren?: boolean;
 }
 interface FormFieldProps extends FormFieldBaseProps, ViewProps {

package/build/components/Grid/Grid.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { GridProps } from './Grid.props';
+/**
+ * Use Grid to arrange children into rows of a fixed or breakpoint-responsive number of
+ * columns, with consistent spacing between them.
+ */
 declare const Grid: {
     ({ columns, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }: GridProps): React.JSX.Element;
     displayName: string;

package/build/components/Grid/Grid.js

@@ -3,6 +3,10 @@ import React, { useMemo } from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { useStyleProps, useTheme } from '../../hooks';
+/**
+ * Use Grid to arrange children into rows of a fixed or breakpoint-responsive number of
+ * columns, with consistent spacing between them.
+ */
 const Grid = ({ columns = 2, containerStyle, itemStyle, rowStyle, spacing, space, children, ...props }) => {
     const { breakpoints } = useTheme();
     const { computedStyles, remainingProps } = useStyleProps(props);

package/build/components/HTMLElements/ListItem.d.ts

@@ -1,10 +1,15 @@
 import { ViewProps } from 'react-native';
 import { ColorValue } from '../../types';
 export interface ListStyleProps {
+    /** Custom element (e.g. Image) to use as the bullet/marker. */
     listStyleImage?: React.ReactElement;
+    /** Custom icon component to use as the bullet/marker. */
     listStyleIcon?: React.ComponentType<any>;
+    /** Width of the custom bullet/marker. */
     listStyleWidth?: number;
+    /** Height of the custom bullet/marker. */
     listStyleHeight?: number;
+    /** Colour of the bullet/marker/number. */
     listStyleColour?: ColorValue;
 }
 export interface ListItemProps extends ViewProps, ListStyleProps {

package/build/components/HTMLElements/OrderedList.d.ts

@@ -3,10 +3,20 @@ import { ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
 import { ListStyleProps } from './ListItem';
 export interface OrderedListProps extends ViewProps, ListStyleProps {
+    /** The `LI` components to be rendered within the list. */
     children: ViewProps['children'];
+    /**
+     * The gap between the list items.
+     * @default '100'
+     */
     gap?: SpaceValue;
+    /** Custom style for the numbers. */
     bulletStyle?: ViewStyle;
 }
+/**
+ * Use OrderedList (exported as `OL`) to render a numbered list of `LI` items, with support for
+ * custom bullet icons, images, and colours.
+ */
 declare const OrderedList: {
     ({ children, gap, style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }: OrderedListProps): React.JSX.Element;
     displayName: string;

package/build/components/HTMLElements/OrderedList.js

@@ -4,6 +4,10 @@ import { StyleSheet, View } from 'react-native';
 import { useStyleProps, useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
 import { BodyText } from '../BodyText';
+/**
+ * Use OrderedList (exported as `OL`) to render a numbered list of `LI` items, with support for
+ * custom bullet icons, images, and colours.
+ */
 const OrderedList = ({ children, gap = '100', style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }) => {
     const { computedStyles } = useStyleProps({ gap });
     const theme = useTheme();

package/build/components/HTMLElements/UnorderedList.d.ts

@@ -3,10 +3,20 @@ import { ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
 import { ListStyleProps } from './ListItem';
 export interface UnorderedListProps extends ViewProps, ListStyleProps {
+    /** The `LI` components to be rendered within the list. */
     children: ViewProps['children'];
+    /**
+     * The gap between the list items.
+     * @default '100'
+     */
     gap?: SpaceValue;
+    /** Custom style for the bullet points. */
     bulletStyle?: ViewStyle;
 }
+/**
+ * Use UnorderedList (exported as `UL`) to render a bulleted list of `LI` items, with support
+ * for custom bullet icons, images, and colours.
+ */
 declare const UnorderedList: {
     ({ children, gap, style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }: UnorderedListProps): React.JSX.Element;
     displayName: string;