react-native-molecules 0.5.0-beta.23 → 0.5.0-beta.25

package/components/Accordion/Accordion.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     type ComponentPropsWithRef,
     createContext,
@@ -9,7 +10,6 @@ import {
 } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import { accordionStyles } from './utils';
 
 export type Props = Omit<ComponentPropsWithRef<typeof View>, 'children'> & {

package/components/Accordion/AccordionItem.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     forwardRef,
     memo,
@@ -9,7 +10,6 @@ import {
 } from 'react';
 import { View, type ViewProps } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { WithElements } from '../../types';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { AccordionContext } from './Accordion';

package/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import CheckboxBase from './CheckboxBase';
@@ -50,6 +50,7 @@ const Checkbox = (
             // @ts-ignore // TODO - fix this
             state: state as States,
             isLeading,
+            // @ts-ignore // TODO - fix this
             size,
         });
     }

package/components/DateField/useDateFieldState.ts

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { type RefObject, useCallback, useEffect, useState } from 'react';
 import type { BlurEvent, FocusEvent } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { endOfDay, format, isValid, parse } from '../../utils/date-fns';
-import { isNil } from '../../utils/lodash';
 import type { ValidRangeType } from '../DatePickerInline';
 import { useRangeChecker } from '../DatePickerInline/dateUtils';
 

package/components/DatePicker/DatePickerProvider.tsx

@@ -1,8 +1,8 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import type { ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import type { ValidRangeType } from '../DatePickerInline';
 import type {
     DatePickerContextType,

package/components/DatePickerInline/DatePickerInline.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import DatePickerDockedHeader from './DatePickerDockedHeader';
 import DatePickerInlineBase from './DatePickerInlineBase';
 import DatePickerInlineHeader from './DatePickerInlineHeader';

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -1,7 +1,7 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { areDatesOnSameDay, dateToUnix, getEndOfDay, getInitialIndex } from './dateUtils';
 import Month from './Month';
 import MonthPicker from './MonthPicker';

package/components/DatePickerInline/Day.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { Text } from '../Text';

package/components/DatePickerInline/Swiper.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type CSSProperties,
     memo,
@@ -10,7 +11,6 @@ import {
     useState,
 } from 'react';
 
-import { useLatest } from '../../hooks';
 import AutoSizer from './AutoSizer';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';

package/components/DatePickerInline/SwiperUtils.ts

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { type RefObject, useEffect } from 'react';
 
-import { useLatest } from '../../hooks';
 import { addMonths, differenceInMonths, getRealIndex, startAtIndex } from './dateUtils';
 
 export type SwiperProps = {

package/components/DatePickerInline/dateUtils.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback } from 'react';
 
-import { useLatest } from '../../hooks';
 import type { CalendarDate, CalendarDates, ValidRangeType } from './types';
 
 export type DisableWeekDaysType = number[];

package/components/DatePickerInline/store.tsx

@@ -1,4 +1,5 @@
-import { createFastContext } from '../../fast-context';
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
 import { registerPortalContext } from '../Portal/Portal';
 
 export type Store = {

package/components/Divider/index.tsx

@@ -1,11 +1,10 @@
 export {
     Divider,
+    type DividerProps,
     horizontalDividerStyles,
     horizontalDividerStylesDefault,
+    type Props,
     verticalDividerStyles,
     verticalDividerStylesDefault,
-    type DividerProps,
-    type Props,
 } from './Divider';
-
 export { default } from './Divider';

package/components/ElementGroup/ElementGroup.tsx

@@ -1,8 +1,8 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
-import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
 export enum Orientation {

package/components/FilePicker/FilePicker.tsx

@@ -1,6 +1,6 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo } from 'react';
 
-import useControlledValue from '../../hooks/useControlledValue';
 import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
 import { IconButton } from '../IconButton';

package/components/Icon/iconFactory.tsx

@@ -1,5 +1,6 @@
 // import { textFactory } from '../Text/textFactory';
-import { memoize } from '../../utils/lodash';
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
+
 import type { IconType } from './types';
 
 const customIcons: any = {};

package/components/IconButton/IconButton.tsx

@@ -6,16 +6,20 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import type { IconButtonVariant } from './types';
+import type { IconButtonShape, IconButtonVariant, IconButtonWidth } from './types';
 import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
 
-const whiteSpace = 12;
+const ICON_BUTTON_MIN_CONTAINER_SIZE = 32;
+const ICON_BUTTON_CONTAINER_PADDING = 16;
+const M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT = -8;
+const M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT = 12;
+const M3_ICON_BUTTON_SQUARE_CORNER_RADIUS = 12;
 
 export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
     /**
@@ -26,6 +30,14 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
      */
     variant?: IconButtonVariant;
+    /**
+     * Container shape. Material 3 supports round and square icon buttons.
+     */
+    shape?: IconButtonShape;
+    /**
+     * Container width option. `default` maps to Material 3's uniform width.
+     */
+    width?: IconButtonWidth;
     /**
      * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
      */
@@ -85,6 +97,8 @@ const IconButton = (
         selected = false,
         animated = false,
         variant = 'default',
+        shape = 'round',
+        width = 'default',
         style,
         testID,
         stateLayerProps = emptyObject,
@@ -126,33 +140,45 @@ const IconButton = (
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
-            (typeof size === 'number' && size ? (size as number) : undefined);
+            (typeof size === 'number' && size ? (size as number) : 24);
+        const containerHeight = Math.max(
+            ICON_BUTTON_MIN_CONTAINER_SIZE,
+            iconSizeInNum + ICON_BUTTON_CONTAINER_PADDING,
+        );
+        const widthAdjustment =
+            width === 'narrow'
+                ? M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT
+                : width === 'wide'
+                ? M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT
+                : 0;
+        const containerWidth = Math.max(iconSizeInNum, containerHeight + widthAdjustment);
+        const borderRadius =
+            shape === 'round' ? containerHeight / 2 : M3_ICON_BUTTON_SQUARE_CORNER_RADIUS;
 
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
             containerStyle: [
-                iconSizeInNum
-                    ? {
-                          width: iconSizeInNum + whiteSpace,
-                          height: iconSizeInNum + whiteSpace,
-                      }
-                    : {},
                 defaultStyles.root,
+                {
+                    width: containerWidth,
+                    height: containerHeight,
+                    borderRadius,
+                },
                 style,
             ],
             iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
-            stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
+            stateLayerStyle: [defaultStyles.stateLayer, { borderRadius }, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_iconColor, disabled, size, stateLayerProps?.style, style, state, variant]);
+    }, [_iconColor, disabled, shape, size, stateLayerProps?.style, style, state, variant, width]);
 
     return (
         <TouchableRipple
             borderless
-            centered
+            centered={shape === 'round' && width === 'default'}
             onPress={onPress}
             rippleAlpha={0.12}
             accessibilityLabel={accessibilityLabel}

package/components/IconButton/index.tsx

@@ -4,4 +4,5 @@ import IconButtonDefault from './IconButton';
 export const IconButton = getRegisteredComponentWithFallback('IconButton', IconButtonDefault);
 
 export type { Props as IconButtonProps } from './IconButton';
+export type * from './types';
 export { defaultStyles } from './utils';

package/components/IconButton/types.ts

@@ -1 +1,3 @@
 export type IconButtonVariant = 'default' | 'outlined' | 'contained' | 'contained-tonal';
+export type IconButtonShape = 'round' | 'square';
+export type IconButtonWidth = 'narrow' | 'default' | 'wide';

package/components/List/List.tsx

@@ -1,8 +1,9 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo } from 'react';
 import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple } from '../TouchableRipple';

package/components/List/context.tsx

@@ -1,4 +1,5 @@
-import { createFastContext } from '../../fast-context';
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
 import { registerPortalContext } from '../Portal';
 import type { DefaultListItemT, ListContextValue } from './types';
 

package/components/Portal/Portal.tsx

@@ -1,8 +1,7 @@
 import { Portal as GorhomPortal } from '@gorhom/portal';
+import { createContextBridge } from '@react-native-molecules/utils/context-bridge';
 import { type ComponentType, type ReactNode } from 'react';
 
-import { createContextBridge } from '../../context-bridge';
-
 const { BridgedComponent: Portal, registerContextToBridge: registerPortalContext } =
     createContextBridge<Omit<any, 'children'> & { children: ReactNode }>(
         'portal-context',

package/components/RadioButton/RadioButtonGroup.tsx

@@ -1,8 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { createContext, memo, type ReactNode, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
-
 export type Props = ViewProps & {
     /**
      * Function to execute on selection change.

package/components/Rating/Rating.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconProps, IconType } from '../Icon';
 import type { TooltipProps } from '../Tooltip';
 import RatingItem from './RatingItem';

package/components/Select/Select.tsx

@@ -1,4 +1,14 @@
-import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useControlledValue, useToggle } from '@react-native-molecules/utils/hooks';
+import {
+    Fragment,
+    memo,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import {
     type AccessibilityRole,
     type GestureResponderEvent,
@@ -9,9 +19,8 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useActionState, useControlledValue } from '../../hooks';
-import { useToggle } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
@@ -24,6 +33,7 @@ import {
     SelectSearchContextProvider,
     useSelectContextValue,
     useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
     useSelectSearchContextValue,
 } from './context';
 import type {
@@ -35,21 +45,50 @@ import type {
     SelectSearchContextValue,
     SelectSearchInputProps,
     SelectSearchKey,
+    SelectTriggerOutlineProps,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
-import { collectWebSelectKeyboardOptionElements, styles, triggerStyles } from './utils';
+import {
+    collectWebSelectKeyboardOptionElements,
+    selectOutlineStyles,
+    styles,
+    triggerStyles,
+} from './utils';
 
 const emptyArr: unknown[] = [];
 
-const getDisplayLabel = (item: DefaultItemT, labelKey?: string) => {
+export const getSelectTriggerState = ({
+    isOpen,
+    hovered,
+    disabled,
+    error,
+}: {
+    isOpen: boolean;
+    hovered: boolean;
+    disabled: boolean;
+    error: boolean;
+}) =>
+    resolveStateVariant({
+        focused: isOpen,
+        hovered,
+        disabled,
+        error,
+        hoveredAndFocused: hovered && isOpen,
+        errorFocused: error && isOpen,
+        errorHovered: error && hovered,
+        errorFocusedAndHovered: error && isOpen && hovered,
+        errorDisabled: error && disabled,
+    }) as any;
+
+export const getDisplayLabel = (item: DefaultItemT, labelKey?: string) => {
     const itemLabelKey = typeof item.labelKey === 'string' ? item.labelKey : undefined;
     const key = labelKey ?? itemLabelKey ?? 'label';
     const value = item[key];
     return value == null ? String(item.id) : String(value);
 };
 
-const getNested = (item: unknown, path: string): unknown => {
+export const getNested = (item: unknown, path: string): unknown => {
     if (item == null || typeof item !== 'object') return undefined;
     if (!path.includes('.')) return (item as Record<string, unknown>)[path];
     let val: unknown = item;
@@ -60,12 +99,12 @@ const getNested = (item: unknown, path: string): unknown => {
     return val;
 };
 
-const matchesByKey = (item: unknown, key: string, lowerQuery: string): boolean =>
+export const matchesByKey = (item: unknown, key: string, lowerQuery: string): boolean =>
     String(getNested(item, key) ?? '')
         .toLowerCase()
         .includes(lowerQuery);
 
-const applySearch = <T extends object>(
+export const applySearch = <T extends object>(
     items: T[],
     searchKey: SelectSearchKey<T> | undefined,
     query: string,
@@ -79,13 +118,13 @@ const applySearch = <T extends object>(
     return items.filter(item => keys.some(key => matchesByKey(item, key, lowerQuery)));
 };
 
-const SelectDropdownProvider = memo(
+export const SelectDropdownProvider = memo(
     ({
         children,
         isOpen: isOpenProp,
         onClose: onCloseProp,
     }: {
-        children: React.ReactNode;
+        children: ReactNode;
         isOpen?: boolean;
         onClose?: () => void;
     }) => {
@@ -217,7 +256,7 @@ export const SelectContent = typedMemo(
     },
 );
 
-export const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
+export const SelectTrigger = memo(({ children, style, ...rest }: SelectTriggerProps) => {
     const { isOpen, onOpen, onClose, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
         state => ({
             isOpen: state.isOpen,
@@ -227,26 +266,28 @@ export const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps)
             setTriggerLayout: state.setTriggerLayout,
         }),
     );
+    const setSelectDropdownContext = useSelectDropdownStoreRef().set;
 
     const { disabled, error } = useSelectContextValue(state => ({
         disabled: state.disabled,
         error: state.error,
     }));
 
-    const { hovered } = useActionState({ ref: triggerRef, actionsToListen: ['hover'] });
+    const [hovered, setHovered] = useState(false);
+
+    const { Select_TriggerOutline, rest: restChildren } = extractSubcomponents({
+        children,
+        allowedChildren: [{ name: 'Select_TriggerOutline', allowMultiple: false }] as const,
+        includeRest: true,
+    });
 
     triggerStyles.useVariants({
-        state: resolveStateVariant({
-            focused: isOpen,
+        state: getSelectTriggerState({
+            isOpen,
             hovered,
             disabled: !!disabled,
             error: !!error,
-            hoveredAndFocused: hovered && isOpen,
-            errorFocused: !!error && isOpen,
-            errorHovered: !!error && hovered,
-            errorFocusedAndHovered: !!error && isOpen && hovered,
-            errorDisabled: !!error && !!disabled,
-        }) as any,
+        }),
     });
 
     const handleLayout = useCallback(
@@ -266,29 +307,67 @@ export const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps)
         }
     }, [isOpen, onOpen, onClose, disabled]);
 
+    const handleHoverIn = useCallback(() => {
+        setHovered(true);
+        setSelectDropdownContext(() => ({ triggerHovered: true }));
+    }, [setSelectDropdownContext]);
+
+    const handleHoverOut = useCallback(() => {
+        setHovered(false);
+        setSelectDropdownContext(() => ({ triggerHovered: false }));
+    }, [setSelectDropdownContext]);
+
+    const outlineElement =
+        Select_TriggerOutline.length > 0 ? Select_TriggerOutline : <SelectTriggerOutline />;
+
     return (
         <Pressable
             ref={triggerRef}
             onPress={handlePress}
             onLayout={handleLayout}
+            onHoverIn={handleHoverIn}
+            onHoverOut={handleHoverOut}
             style={[triggerStyles.trigger, style]}
             accessibilityRole="combobox"
             accessibilityState={{ expanded: isOpen, disabled: !!disabled }}
             disabled={disabled}
             {...rest}>
-            {children}
+            {restChildren}
             <Icon
                 name={isOpen ? 'chevron-up' : 'chevron-down'}
                 size={20}
                 style={triggerStyles.triggerIcon}
             />
-            <View style={triggerStyles.outline} />
+            {outlineElement}
         </Pressable>
     );
-};
+});
 
 SelectTrigger.displayName = 'Select_Trigger';
 
+export const SelectTriggerOutline = memo(({ style }: SelectTriggerOutlineProps) => {
+    const { isOpen, triggerHovered } = useSelectDropdownContextValue(state => ({
+        isOpen: state.isOpen,
+        triggerHovered: state.triggerHovered,
+    }));
+    const { disabled, error } = useSelectContextValue(state => ({
+        disabled: state.disabled,
+        error: state.error,
+    }));
+    selectOutlineStyles.useVariants({
+        state: getSelectTriggerState({
+            isOpen,
+            hovered: !!triggerHovered,
+            disabled: !!disabled,
+            error: !!error,
+        }),
+    });
+
+    return <View pointerEvents="none" style={[selectOutlineStyles.outline, style]} />;
+});
+
+SelectTriggerOutline.displayName = 'Select_TriggerOutline';
+
 export const SelectValue = memo(
     ({ placeholder, labelKey, renderValue, style, ...rest }: SelectValueProps) => {
         const { value, multiple, onRemove } = useSelectContextValue(state => ({
@@ -692,14 +771,4 @@ export const SelectSearchInput = memo(({ children, ...textInputProps }: SelectSe
 
 SelectSearchInput.displayName = 'Select_SearchInput';
 
-const SelectWithSubcomponents = Object.assign(SelectRoot, {
-    Trigger: SelectTrigger,
-    Value: SelectValue,
-    Dropdown: SelectDropdown,
-    Content: SelectContent,
-    Option: SelectOption,
-    SearchInput: SelectSearchInput,
-});
-
-export default SelectWithSubcomponents;
-export { SelectDropdownProvider };
+export default SelectRoot;

package/components/Select/context.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { View } from 'react-native';
 
-import { createFastContext } from '../../fast-context';
 import {
     ListContext,
     ListContextProvider,
@@ -24,6 +24,7 @@ export type SelectDropdownContextType = SelectDropdownContextValue & {
     triggerRef: React.RefObject<View> | null;
     triggerLayout: { width: number; height: number } | null;
     setTriggerLayout: (layout: { width: number; height: number }) => void;
+    triggerHovered?: boolean;
 };
 
 const selectDropdownContextDefaultValue: SelectDropdownContextType = {
@@ -33,6 +34,7 @@ const selectDropdownContextDefaultValue: SelectDropdownContextType = {
     triggerRef: null,
     triggerLayout: null,
     setTriggerLayout: () => {},
+    triggerHovered: false,
 };
 
 const {

package/components/Select/index.ts

@@ -1,7 +1,25 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import SelectDefault from './Select';
+import SelectRoot, {
+    SelectContent,
+    SelectDropdown,
+    SelectOption,
+    SelectSearchInput,
+    SelectTrigger,
+    SelectTriggerOutline,
+    SelectValue,
+} from './Select';
 
-export const Select = getRegisteredComponentWithFallback('Select', SelectDefault);
+const SelectWithSubcomponents = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    TriggerOutline: SelectTriggerOutline,
+    Value: SelectValue,
+    Dropdown: SelectDropdown,
+    Content: SelectContent,
+    Option: SelectOption,
+    SearchInput: SelectSearchInput,
+});
+
+export const Select = getRegisteredComponentWithFallback('Select', SelectWithSubcomponents);
 
 export * from './context';
 export type * from './types';

package/components/Select/types.ts

@@ -82,6 +82,8 @@ export type SelectTriggerProps = ViewProps & {
     children?: ReactNode;
 };
 
+export type SelectTriggerOutlineProps = ViewProps;
+
 // Select.Value props
 export type SelectValueProps = ViewProps & {
     placeholder?: string;