@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.27.3 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.27.3 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -30,16 +30,15 @@
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   93:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  330:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
   66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
   17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
 
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Table/Table.context.tsx
+  23:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
    53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
    53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
@@ -53,17 +52,17 @@
    14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
   106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
 
-✖ 24 problems (0 errors, 24 warnings)
-
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1647.829 |    61.5%
-react-hooks/exhaustive-deps               |   126.846 |     4.7%
-no-global-assign                          |    85.087 |     3.2%
-react-hooks/rules-of-hooks                |    75.260 |     2.8%
-no-misleading-character-class             |    68.283 |     2.6%
-no-unexpected-multiline                   |    54.599 |     2.0%
-@typescript-eslint/ban-ts-comment         |    52.506 |     2.0%
-no-useless-escape                         |    31.809 |     1.2%
-no-loss-of-precision                      |    30.517 |     1.1%
-@typescript-eslint/triple-slash-reference |    29.522 |     1.1%
+✖ 23 problems (0 errors, 23 warnings)
+
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1525.743 |    62.8%
+react-hooks/exhaustive-deps       |   120.190 |     4.9%
+no-global-assign                  |    94.322 |     3.9%
+react-hooks/rules-of-hooks        |    73.690 |     3.0%
+no-unexpected-multiline           |    49.929 |     2.1%
+@typescript-eslint/ban-ts-comment |    44.011 |     1.8%
+no-loss-of-precision              |    35.100 |     1.4%
+no-misleading-character-class     |    32.579 |     1.3%
+no-useless-escape                 |    32.193 |     1.3%
+no-control-regex                  |    21.498 |     0.9%

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.28.0
+
+### Minor Changes
+
+- [#1014](https://github.com/utilitywarehouse/hearth/pull/1014) [`c10ff82`](https://github.com/utilitywarehouse/hearth/commit/c10ff82243265217acd95f687d48d803b3c7a4bd) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Combobox` and `SafeAreaView` to the React Native library
+
+  The React Native package now includes a `Combobox` component for searchable selection in a bottom sheet, plus a `SafeAreaView` primitive that applies Unistyles runtime insets only when a view actually overlaps a screen edge. `Combobox` supports the built-in options API for fixed lists, controlled search values for dynamic results, and custom bottom sheet content for cases where you need to bring your own `BottomSheetFlatList` or bespoke option layout. `Modal` now uses `SafeAreaView` in its full-screen navigation modal path so content like search inputs no longer sits behind the dynamic island on iOS.
+
+  **Components affected**:
+  - `Combobox`
+  - `ComboboxOption`
+  - `SafeAreaView`
+  - `Modal`
+
+  **Developer changes**:
+
+  Import the new components from `@utilitywarehouse/hearth-react-native` and choose the API that fits your layout. Use `options` for straightforward searchable lists, render custom sheet content when you need virtualised or dynamic results, and wrap full-screen content in `SafeAreaView` when it should only pick up edge insets if it actually touches that edge.
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Pagination` component
+
+  The package now includes a `Pagination` component for moving between pages of content. It supports numbered pagination, a condensed layout for smaller spaces, optional skip buttons for jumping to the first and last page, and controlled page state so it can be wired into lists, tables, or other paged views.
+
+  **Components affected**:
+  - `Pagination`
+
+  **Developer changes**:
+
+  Import `Pagination` from `@utilitywarehouse/hearth-react-native` and control the current page in your screen or feature state.
+
+  ```tsx
+  import { useState } from 'react';
+  import { Pagination } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => {
+    const [page, setPage] = useState(1);
+
+    return <Pagination currentPage={page} onPageChange={setPage} totalPages={10} />;
+  };
+  ```
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Table` component
+
+  The package now includes a composable `Table` API for presenting structured data with headers, rows, cells, optional card-style containers, horizontal scrolling for narrow viewports, configurable column widths, and pagination support through `TablePagination`. Header cells support trailing actions such as sort controls, and the API is split into smaller building blocks so layouts can be assembled to fit different datasets.
+
+  **Components affected**:
+  - `Table`
+  - `TableHeader`
+  - `TableHeaderCell`
+  - `TableBody`
+  - `TableRow`
+  - `TableCell`
+  - `TablePagination`
+
+  **Developer changes**:
+
+  Import the table primitives from `@utilitywarehouse/hearth-react-native` and compose them to match your data shape. Add `columnWidths` when you need fixed or weighted columns, and pass `pagination` when rows should be paged.
+
+  ```tsx
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeaderCell,
+    TableRow,
+  } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Table columnWidths={[180, '2fr', '1fr']} container="subtle">
+      <TableHeader color="purple">
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Email</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableHeaderCell row>Alex Morgan</TableHeaderCell>
+          <TableCell>alex@example.com</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+  ```
+
+- [#1016](https://github.com/utilitywarehouse/hearth/pull/1016) [`33baa9e`](https://github.com/utilitywarehouse/hearth/commit/33baa9e8edb091bbd1d17c9a3838352a7f1b87ea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Adds `Timeline` and `TimelineItem`
+
+  The package now includes `Timeline` and `TimelineItem` components for showing a sequence of static stops or progress steps. The new API supports labelled items, optional helper text, progress states for complete or active steps, and custom content within an item when you need to show extra context or actions.
+
+  **Components affected**:
+  - `Timeline`
+  - `TimelineItem`
+
+  **Developer changes**:
+
+  Import `Timeline` and `TimelineItem` from `@utilitywarehouse/hearth-react-native`. Use `variant="static"` for simple ordered events, or `variant="progress"` with item `state` values to communicate step progress.
+
+  ```tsx
+  import { Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Timeline variant="progress">
+      <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
+      <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
+      <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
+      <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
+    </Timeline>
+  );
+  ```
+
 ## 0.27.3
 
 ### Patch Changes

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

@@ -0,0 +1,13 @@
+export interface ComboboxSelection {
+    label: string;
+    value: string;
+}
+export interface ComboboxContextValue {
+    close: () => void;
+    search: string;
+    selectedValue?: string | null;
+    selectOption: (option: ComboboxSelection) => void;
+    setSearch: (value: string) => void;
+}
+export declare const ComboboxContext: import("react").Context<ComboboxContextValue | undefined>;
+export declare const useComboboxContext: () => ComboboxContextValue;

package/build/components/Combobox/Combobox.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const ComboboxContext = createContext(undefined);
+export const useComboboxContext = () => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('useComboboxContext must be used within a Combobox');
+    }
+    return context;
+};

package/build/components/Combobox/Combobox.d.ts

@@ -0,0 +1,6 @@
+import ComboboxProps from './Combobox.props';
+declare const Combobox: {
+    ({ options, value, onValueChange, inputValue, onInputValueChange, label, labelVariant, placeholder, searchPlaceholder, disabled, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, noOptionsFoundText, listProps, loading, readonly, getValueLabel, filterOption, ...rest }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Combobox;

package/build/components/Combobox/Combobox.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon, SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { BottomSheetFlatList, BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { DetailText } from '../DetailText';
+import { FormField, useFormFieldContext } from '../FormField';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { ComboboxContext } from './Combobox.context';
+import { SafeAreaView } from '../SafeAreaView';
+import ComboboxOption from './ComboboxOption';
+const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
+const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValueChange, label, labelVariant = 'body', placeholder = 'Search', searchPlaceholder = 'Search', disabled = false, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, noOptionsFoundText = 'No options found', listProps, loading = false, readonly = false, getValueLabel, filterOption, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isRequired = formFieldContext?.required ?? required;
+    const isDisabled = formFieldContext?.disabled ?? disabled;
+    const isReadonly = formFieldContext?.readonly ?? readonly;
+    const { color } = useTheme();
+    const bottomSheetModalRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const focusTimeoutRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedChildLabel, setSelectedChildLabel] = useState(undefined);
+    const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');
+    const isInputControlled = inputValue !== undefined;
+    const selectedOption = options.find(option => option.value === value);
+    useEffect(() => {
+        if (typeof children === 'function' || !children || selectedOption || !value || getValueLabel) {
+            setSelectedChildLabel(undefined);
+            return;
+        }
+        let nextLabel;
+        React.Children.forEach(children, child => {
+            if (!React.isValidElement(child) || nextLabel) {
+                return;
+            }
+            if (child.props.value === value) {
+                nextLabel = child.props.label;
+            }
+        });
+        setSelectedChildLabel(nextLabel);
+    }, [children, getValueLabel, selectedOption, value]);
+    const selectedLabel = useMemo(() => {
+        return getValueLabel?.(value) || selectedOption?.label || selectedChildLabel || '';
+    }, [getValueLabel, selectedChildLabel, selectedOption?.label, value]);
+    useEffect(() => {
+        if (isInputControlled) {
+            return;
+        }
+        setUncontrolledInputValue(selectedLabel);
+    }, [isInputControlled, selectedLabel]);
+    useEffect(() => {
+        return () => {
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+        };
+    }, []);
+    const search = isInputControlled ? (inputValue ?? '') : uncontrolledInputValue;
+    const accessibilityLabel = useMemo(() => {
+        if (!label) {
+            return undefined;
+        }
+        return isRequired ? `${label}, required` : label;
+    }, [isRequired, label]);
+    const accessibilityHint = useMemo(() => {
+        const hints = [];
+        if (helperText) {
+            hints.push(helperText);
+        }
+        if (validationStatusFromContext === 'invalid' && invalidText) {
+            hints.push(invalidText);
+        }
+        if (validationStatusFromContext === 'valid' && validText) {
+            hints.push(validText);
+        }
+        return hints.length > 0 ? hints.join(', ') : undefined;
+    }, [helperText, invalidText, validText, validationStatusFromContext]);
+    styles.useVariants({
+        disabled: isDisabled,
+        hasValue: search.length > 0,
+        readonly: isReadonly,
+        validationStatus: validationStatusFromContext,
+    });
+    const setSearch = useCallback((nextValue) => {
+        if (!isInputControlled) {
+            setUncontrolledInputValue(nextValue);
+        }
+        onInputValueChange?.(nextValue);
+    }, [isInputControlled, onInputValueChange]);
+    const handleClose = useCallback((index) => {
+        if (index === -1) {
+            setIsOpen(false);
+            setSearch('');
+        }
+    }, [setSearch]);
+    const focusSearchInput = useCallback(() => {
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
+        }
+        focusTimeoutRef.current = setTimeout(() => {
+            searchInputRef.current?.focus();
+        }, 300);
+    }, []);
+    const openBottomSheet = useCallback(() => {
+        if (isDisabled || isReadonly) {
+            return;
+        }
+        bottomSheetModalRef.current?.present();
+        setIsOpen(true);
+        focusSearchInput();
+    }, [focusSearchInput, isDisabled, isReadonly]);
+    const closeBottomSheet = useCallback(() => {
+        bottomSheetModalRef.current?.dismiss();
+        setIsOpen(false);
+    }, []);
+    const selectOption = useCallback(({ label: optionLabel, value: optionValue }) => {
+        setSearch(optionLabel);
+        onValueChange?.(optionValue);
+        closeBottomSheet();
+    }, [closeBottomSheet, onValueChange, setSearch]);
+    const handleClear = useCallback(() => {
+        setSearch('');
+        onValueChange?.(null);
+    }, [onValueChange, setSearch]);
+    const handleClearPress = useCallback((event) => {
+        event.stopPropagation();
+        handleClear();
+    }, [handleClear]);
+    const defaultFilterOption = useCallback((option, query) => {
+        const normalizedQuery = query.trim().toLowerCase();
+        if (!normalizedQuery) {
+            return true;
+        }
+        const haystack = [option.label, ...(option.keywords ?? [])].map(term => term.toLowerCase());
+        return haystack.some(term => term.includes(normalizedQuery));
+    }, []);
+    const filteredOptions = useMemo(() => {
+        const optionFilter = filterOption ?? defaultFilterOption;
+        return options.filter(option => optionFilter(option, search));
+    }, [defaultFilterOption, filterOption, options, search]);
+    const renderSelectOption = useCallback(({ item }) => (_jsx(ComboboxOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
+    const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: noOptionsFoundText }) })), [noOptionsFoundText]);
+    const renderContentProps = useMemo(() => ({
+        close: closeBottomSheet,
+        search,
+        selectedValue: value,
+        selectOption,
+        setSearch,
+    }), [closeBottomSheet, search, selectOption, setSearch, value]);
+    const customContent = typeof children === 'function' ? children(renderContentProps) : children;
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, accessibilityHandledByChildren: true, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: { expanded: isOpen, disabled: isDisabled || isReadonly }, style: ({ pressed }) => [styles.trigger, (pressed || isOpen) && styles.triggerFocused], children: [_jsx(View, { style: styles.leadingIconContainer, children: _jsx(Icon, { as: SearchMediumIcon, style: styles.icon }) }), _jsx(View, { style: styles.valueContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.valueText, children: search || placeholder }) }), loading && _jsx(Spinner, { size: "xs", color: color.icon.primary }), !!search && (_jsx(UnstyledIconButton, { accessibilityLabel: "Clear search", onPress: handleClearPress, icon: CloseSmallIcon }))] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: DEFAULT_SNAP_POINTS, onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(ComboboxContext.Provider, { value: {
+                        close: closeBottomSheet,
+                        search,
+                        selectedValue: value,
+                        selectOption,
+                        setSearch,
+                    }, children: [_jsxs(SafeAreaView, { edges: ['top'], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.select.gap,
+    },
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: theme.components.input.height,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderWidth: theme.components.input.borderWidth,
+        borderColor: theme.color.border.strong,
+        borderRadius: theme.components.input.borderRadius,
+        paddingHorizontal: theme.components.input.paddingHorizontal,
+        gap: theme.components.input.gap,
+        outlineStyle: 'solid',
+        outlineWidth: theme.components.input.borderWidth,
+        outlineColor: theme.color.border.strong,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            readonly: {
+                true: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+            validationStatus: {
+                initial: {},
+                valid: {
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
+                },
+                invalid: {
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
+                },
+            },
+        },
+    },
+    triggerFocused: {
+        outlineWidth: theme.components.input.borderWidthFocused,
+    },
+    leadingIconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    valueContainer: {
+        flex: 1,
+    },
+    valueText: {
+        variants: {
+            hasValue: {
+                false: {
+                    color: theme.color.text.secondary,
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.color.icon.primary,
+    },
+    headingContainer: {
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        marginBottom: theme.components.select.gap,
+    },
+    searchContainer: {
+        paddingTop: 1,
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        paddingBottom: theme.components.select.gap,
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: theme.space.md,
+    },
+}));
+Combobox.displayName = 'Combobox';
+export default Combobox;

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

@@ -0,0 +1,180 @@
+import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import { ComponentType, ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { BottomSheetProps } from '../BottomSheet';
+import { ComboboxSelection } from './Combobox.context';
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+export interface ComboboxOptionItemProps {
+    /**
+     * Label shown for this option.
+     */
+    label: string;
+    /**
+     * Value returned when this option is selected.
+     */
+    value: string;
+    /**
+     * Optional icon shown before the option label.
+     */
+    leadingIcon?: ComponentType;
+    /**
+     * Optional icon shown after the option label.
+     */
+    trailingIcon?: ComponentType;
+    /**
+     * Additional searchable terms for this option.
+     */
+    keywords?: string[];
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+}
+export interface ComboboxRenderContentProps {
+    /**
+     * Current search value used by both the trigger and bottom sheet input.
+     */
+    search: string;
+    /**
+     * Update the search value.
+     */
+    setSearch: (value: string) => void;
+    /**
+     * Close the bottom sheet.
+     */
+    close: () => void;
+    /**
+     * Select an option, update the trigger text and close the bottom sheet.
+     */
+    selectOption: (option: ComboboxSelection) => void;
+    /**
+     * Currently selected value.
+     */
+    selectedValue?: string | null;
+}
+export interface ComboboxOptionProps extends ComboboxOptionItemProps {
+    /**
+     * Whether this option is selected.
+     */
+    selected?: boolean;
+    /**
+     * Custom press handler for this option.
+     */
+    onPress?: (value: string) => void;
+}
+type ComboboxChildren = ReactNode | ((props: ComboboxRenderContentProps) => ReactNode);
+interface ComboboxProps extends Omit<ViewProps, 'children'> {
+    /**
+     * Array of options to render using the default bottom sheet list.
+     */
+    options?: ComboboxOptionItemProps[];
+    /**
+     * Currently selected value.
+     */
+    value?: string | null;
+    /**
+     * Callback fired when the selected value changes.
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Controlled search value used by the trigger and bottom sheet input.
+     */
+    inputValue?: string;
+    /**
+     * Callback fired when the search value changes.
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * Label shown above the combobox.
+     */
+    label?: string;
+    /**
+     * The variant of the label text.
+     *
+     * @default 'body'
+     */
+    labelVariant?: 'heading' | 'body';
+    /**
+     * Helper text shown below the label.
+     */
+    helperText?: string;
+    /**
+     * Optional helper icon.
+     */
+    helperIcon?: ComponentType;
+    /**
+     * Text shown for invalid state.
+     */
+    invalidText?: string;
+    /**
+     * Text shown for valid state.
+     */
+    validText?: string;
+    /**
+     * Placeholder shown when the combobox is empty.
+     *
+     * @default 'Search'
+     */
+    placeholder?: string;
+    /**
+     * Placeholder shown in the bottom sheet search input.
+     *
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Validation status for the combobox.
+     *
+     * @default 'initial'
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Whether the combobox is required.
+     *
+     * @default true
+     */
+    required?: boolean;
+    /**
+     * Heading displayed above the bottom sheet search input.
+     */
+    menuHeading?: string;
+    /**
+     * Custom bottom sheet content, or a render function for fully custom list rendering.
+     */
+    children?: ComboboxChildren;
+    /**
+     * Props passed to the BottomSheetModal.
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Text shown when no options match the current search.
+     *
+     * @default 'No options found'
+     */
+    noOptionsFoundText?: string;
+    /**
+     * Props passed to the default BottomSheetFlatList renderer.
+     */
+    listProps?: Partial<BottomSheetFlatListProps<ComboboxOptionItemProps>>;
+    /**
+     * Whether the combobox should show a loading spinner.
+     */
+    loading?: boolean;
+    /**
+     * Whether the combobox is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Resolve a label for a selected value when the current options array does not contain it.
+     */
+    getValueLabel?: (value: string | null | undefined) => string;
+    /**
+     * Override the default filtering behaviour for the default options list.
+     */
+    filterOption?: (option: ComboboxOptionItemProps, search: string) => boolean;
+}
+export default ComboboxProps;

package/build/components/Combobox/Combobox.props.js

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

package/build/components/Combobox/ComboboxOption.d.ts

@@ -0,0 +1,6 @@
+import { ComboboxOptionProps } from './Combobox.props';
+declare const ComboboxOption: {
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }: ComboboxOptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ComboboxOption;