@cdx-ui/primitives 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/otp-input/utils/filterValue.ts

@@ -0,0 +1,37 @@
+/** Strip to digits (default OTP behavior). */
+export function filterDigits(input: string): string {
+  return input.replace(/\D/g, '');
+}
+
+/** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
+export function filterAllowedCharacters(allowed: string) {
+  const allowedSet = new Set<string>();
+  for (let i = 0; i < allowed.length; i++) {
+    allowedSet.add(allowed.charAt(i));
+  }
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      if (allowedSet.has(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}
+
+/** Keep only characters matching `re` (tested per UTF-16 code unit). */
+export function filterByRegExp(re: RegExp) {
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      re.lastIndex = 0;
+      if (re.test(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}

package/src/overlay/OverlayContainer.tsx

@@ -3,20 +3,13 @@ import {
   Modal,
   Platform,
   Pressable,
-  type StyleProp,
   StyleSheet,
+  View,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
-
-let createPortalFn:
-  | ((children: React.ReactNode, container: Element) => React.ReactPortal)
-  | undefined;
-if (Platform.OS === 'web') {
-  try {
-    createPortalFn = require('react-dom').createPortal;
-  } catch {}
-}
+import { createPortalFn } from '../utils/createPortal';
 
 export interface OverlayContainerProps {
   onDismiss: () => void;
@@ -30,7 +23,11 @@ export interface OverlayContainerProps {
  * Cross-platform overlay container.
  *
  * - Web: renders children into a `createPortal` at `document.body` with
- *   `position: fixed` and `zIndex: 50`.
+ *   `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
+ *   Reanimated's `Animated.View` because Reanimated's layout animations
+ *   (`entering`/`exiting`) rely on `require()` calls that break silently
+ *   in Vite production bundles, leaving elements stuck at opacity 0.
+ *   See: https://github.com/software-mansion/react-native-reanimated/issues/6775
  * - Native: renders children inside a transparent `<Modal>` with a
  *   backdrop `<Pressable>` that calls `onDismiss` on press.
  *
@@ -46,13 +43,7 @@ export function OverlayContainer({
 }: Readonly<OverlayContainerProps>) {
   if (Platform.OS === 'web' && createPortalFn) {
     return createPortalFn(
-      <Animated.View
-        entering={entering}
-        exiting={exiting}
-        style={[{ position: 'fixed' as any, zIndex: 50 }, style]}
-      >
-        {children}
-      </Animated.View>,
+      <View style={[{ position: 'fixed' as any, zIndex: 50 }, style]}>{children}</View>,
       document.body,
     );
   }

package/src/overlay/index.ts

@@ -2,6 +2,7 @@ export { OverlayContainer } from './OverlayContainer';
 export type { OverlayContainerProps } from './OverlayContainer';
 export { useAnchorPosition, type AnchorLayout } from './useAnchorPosition';
 export { useDismissOverlay } from './useDismissOverlay';
+export { useEscapeKey } from './useEscapeKey';
 export {
   useOverlayPosition,
   type OverlayPosition,

package/src/overlay/useEscapeKey.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * No-op on native — Escape key dismissal is not applicable.
+ * Native uses the system back gesture / hardware button via Modal.
+ */
+export function useEscapeKey(_open: boolean, _onEscape: () => void) {}

package/src/overlay/useEscapeKey.web.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Closes an overlay when the user presses the Escape key.
+ * Web-only — native platforms use Modal's `onRequestClose` for back/dismiss.
+ */
+export function useEscapeKey(open: boolean, onEscape: () => void) {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onEscapeRef.current();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+}

package/src/progress/context.tsx

@@ -0,0 +1,13 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ProgressDataState } from './types';
+
+export interface ProgressContextValue {
+  /** Clamped value in [0, max], or null when indeterminate */
+  readonly value: number | null;
+  readonly max: number;
+  readonly percent: number;
+  readonly state: ProgressDataState;
+}
+
+export const [ProgressProvider, useProgressContext] =
+  createContext<ProgressContextValue>('ProgressContext');

package/src/progress/createProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+import type { ViewStyle } from 'react-native';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useProgressContext } from './context';
+
+type PercentString = `${number}%`;
+
+export const createProgressIndicator = <T, R = unknown>(BaseIndicator: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T>>((props, ref) => {
+    const { style, ...rest } = props as PropsWithoutRef<T> & { style?: object };
+    const { percent, state, max, value } = useProgressContext();
+
+    const filledStyle = useMemo((): ViewStyle => {
+      const pct = `${String(percent)}%` as PercentString;
+      return { width: pct, height: '100%' };
+    }, [percent]);
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: value === null ? undefined : String(value),
+      max: String(max),
+    });
+
+    return (
+      <BaseIndicator
+        ref={ref as React.Ref<R>}
+        {...({
+          ...rest,
+          ...dataAttrs,
+          style: [filledStyle, style],
+        } as T)}
+      />
+    );
+  });

package/src/progress/createProgressRoot.tsx

@@ -0,0 +1,109 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { ProgressProvider } from './context';
+import type { InterfaceProgressProps, ProgressDataState } from './types';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+function resolveState(
+  value: number | null,
+  max: number,
+  clamped: number | null,
+): ProgressDataState {
+  if (value === null) {
+    return 'indeterminate';
+  }
+  if (max <= 0) {
+    return 'complete';
+  }
+  if (clamped !== null && clamped >= max) {
+    return 'complete';
+  }
+  return 'loading';
+}
+
+function defaultGetValueLabel(value: number, max: number): string {
+  if (max <= 0) {
+    return '0%';
+  }
+  return `${String(Math.round((value / max) * 100))}%`;
+}
+
+export const createProgressRoot = <T, R = unknown>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T> & InterfaceProgressProps>((props, ref) => {
+    const {
+      value: valueProp = 0,
+      max: maxProp = 100,
+      getValueLabel = defaultGetValueLabel,
+      children,
+      accessibilityRole = 'progressbar',
+      accessibilityValue: accessibilityValueProp,
+      role = 'progressbar',
+      ...restProps
+    } = props;
+    const max = maxProp > 0 ? maxProp : 0;
+    const isIndeterminate = valueProp === null;
+    const clampedValue =
+      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
+
+    const percent = useMemo(() => {
+      if (clampedValue === null || max <= 0) {
+        return 0;
+      }
+      return (clampedValue / max) * 100;
+    }, [clampedValue, max]);
+
+    const state = useMemo(
+      () => resolveState(valueProp, max, clampedValue),
+      [valueProp, max, clampedValue],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value: clampedValue,
+        max,
+        percent,
+        state,
+      }),
+      [clampedValue, max, percent, state],
+    );
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: clampedValue === null ? undefined : String(clampedValue),
+      max: String(max),
+    });
+
+    const accessibilityValue = useMemo(() => {
+      if (accessibilityValueProp !== undefined) {
+        return accessibilityValueProp;
+      }
+      if (isIndeterminate || clampedValue === null) {
+        return { min: 0, max, text: 'Indeterminate' };
+      }
+      return {
+        min: 0,
+        max,
+        now: clampedValue,
+        text: getValueLabel(clampedValue, max),
+      };
+    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
+
+    return (
+      <ProgressProvider value={contextValue}>
+        <BaseRoot
+          ref={ref as React.Ref<R>}
+          {...(restProps as T)}
+          role={role}
+          accessibilityRole={accessibilityRole}
+          accessibilityValue={accessibilityValue}
+          {...dataAttrs}
+        >
+          {children}
+        </BaseRoot>
+      </ProgressProvider>
+    );
+  });

package/src/progress/index.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { createProgressIndicator } from './createProgressIndicator';
+import { createProgressRoot } from './createProgressRoot';
+import type { IProgressComponentType } from './types';
+
+export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+
+export function createProgress<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+>(components: {
+  Root: React.ComponentType<RootProps>;
+  Indicator: React.ComponentType<IndicatorProps>;
+}) {
+  const Progress = createProgressRoot<RootProps, RootRef>(components.Root);
+  const Indicator = createProgressIndicator<IndicatorProps, IndicatorRef>(components.Indicator);
+
+  Progress.displayName = 'ProgressPrimitive';
+  Indicator.displayName = 'ProgressPrimitive.Indicator';
+
+  return Object.assign(Progress, {
+    Indicator,
+  }) as IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
+}

package/src/progress/types.ts

@@ -0,0 +1,37 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
+
+export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
+  /**
+   * Current value in the range [0, max], or `null` for indeterminate progress.
+   * Omit or use a number for determinate progress; default is `0`.
+   */
+  readonly value?: number | null;
+  /**
+   * Maximum value (minimum is always 0).
+   * @default 100
+   */
+  readonly max?: number;
+  /**
+   * Optional label for `accessibilityValue.text` when determinate.
+   */
+  readonly getValueLabel?: (value: number, max: number) => string;
+  readonly children?: ReactNode;
+}
+
+export type IProgressComponentType<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+> = ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & InterfaceProgressProps> & RefAttributes<RootRef>
+> & {
+  Indicator: ForwardRefExoticComponent<
+    PropsWithoutRef<IndicatorProps> & RefAttributes<IndicatorRef>
+  >;
+};
+
+export type IProgressProps = InterfaceProgressProps;

package/src/select/context.tsx

@@ -1,56 +1,21 @@
-import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
-const defaultContextValue: SelectContextValue = {
-  open: false,
-  items: [],
-  setOpen: () => {},
-  value: undefined,
-  onValueChange: () => {},
-  disabled: false,
-  required: false,
-  invalid: false,
-  readOnly: false,
-  native: false,
-  triggerRef: { current: null },
-  contentId: '',
-  triggerId: '',
-  activeValue: undefined,
-  setActiveValue: () => {}, // TODO: Is this needed? At the very least it could be moved to SelectContent
-  accessibilityLabel: undefined,
-};
-
-export const SelectContext = createContext<SelectContextValue>(defaultContextValue);
-
-export const useSelectContext = () => useContext(SelectContext);
+export const [SelectProvider, useSelectContext] =
+  createContext<SelectContextValue>('SelectContext');
 
 /**
  * Propagates the trigger's interaction state (hover, focus, active, etc.) to
  * child components like SelectValue and SelectIcon so they can apply matching
  * data-attribute styles.
  */
-export const SelectTriggerContext = createContext<InteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-});
-
-export const useSelectTriggerContext = () => useContext(SelectTriggerContext);
+export const [SelectTriggerProvider, useSelectTriggerContext] =
+  createContext<InteractionState>('SelectTriggerContext');
 
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
  * highlighted, checked, etc.) to child components like SelectItemLabel.
  */
-export const SelectItemContext = createContext<SelectItemInteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-  highlighted: false,
-  checked: false,
-});
-
-export const useSelectItemContext = () => useContext(SelectItemContext);
+export const [SelectItemProvider, useSelectItemContext] =
+  createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/createSelectItem.tsx

@@ -4,7 +4,7 @@ import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectItemContext, useSelectContext } from './context';
+import { SelectItemProvider, useSelectContext } from './context';
 import type { ISelectItemProps } from './types';
 
 export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
@@ -74,7 +74,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
       );
 
       return (
-        <SelectItemContext.Provider value={interactionState}>
+        <SelectItemProvider value={interactionState}>
           <BaseItem
             ref={ref}
             role="option"
@@ -115,7 +115,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
           >
             {children}
           </BaseItem>
-        </SelectItemContext.Provider>
+        </SelectItemProvider>
       );
     },
   );

package/src/select/createSelectRoot.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useControllableState, useFormControl } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectContext } from './context';
+import { SelectProvider } from './context';
 import type { ISelectProps } from './types';
 
 export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
@@ -68,9 +68,11 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
       const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
 
       const triggerRef = useRef<any>(null);
-      const id = useId();
-      const triggerId = `select-trigger-${id}`;
-      const contentId = `select-content-${id}`;
+      const reactId = useId();
+      /** Align with `useFormControl` default id (`${field.id}-input`) when inside `Form.Field`. */
+      const triggerId = formControlProps.id ?? `select-trigger-${reactId}`;
+      const contentId = `select-content-${reactId}`;
+      const ariaDescribedBy = formControlProps['aria-describedby'];
 
       const contextValue = useMemo(
         () => ({
@@ -90,6 +92,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           activeValue,
           setActiveValue,
           accessibilityLabel,
+          ariaDescribedBy,
         }),
         [
           open,
@@ -106,11 +109,12 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           triggerId,
           activeValue,
           accessibilityLabel,
+          ariaDescribedBy,
         ],
       );
 
       return (
-        <SelectContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           <BaseRoot
             ref={ref}
             {...(props as T)}
@@ -124,7 +128,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           >
             {children}
           </BaseRoot>
-        </SelectContext.Provider>
+        </SelectProvider>
       );
     },
   );

package/src/select/createSelectTrigger.tsx

@@ -1,11 +1,12 @@
 import type React from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { composeEventHandlers, mergeRefs, useFormControlContext } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectTriggerContext, useSelectContext } from './context';
+import { SelectTriggerProvider, useSelectContext } from './context';
 import type { ISelectTriggerProps } from './types';
 
 export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
@@ -18,23 +19,10 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
         isDisabled: isDisabledProp,
+        'aria-describedby': ariaDescribedByProp,
         ...props
       }: Omit<ISelectTriggerProps, 'children'> & {
-        children?:
-          | (({
-              hovered,
-              pressed,
-              focused,
-              focusVisible,
-              disabled,
-            }: {
-              hovered?: boolean;
-              pressed?: boolean;
-              focused?: boolean;
-              focusVisible?: boolean;
-              disabled?: boolean;
-            }) => React.ReactNode)
-          | React.ReactNode;
+        children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
       },
       ref?: any,
     ) => {
@@ -50,8 +38,11 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         triggerRef,
         activeValue,
         accessibilityLabel,
+        ariaDescribedBy: ariaDescribedByFromField,
       } = useSelectContext();
 
+      const field = useFormControlContext();
+
       const disabled = contextDisabled || !!isDisabledProp;
 
       const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
@@ -63,7 +54,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
 
       const handlePress = useCallback(
         (e: GestureResponderEvent | KeyboardEvent) => {
-          if (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
+          if (e?.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
             return;
           }
           if (!disabled) {
@@ -114,7 +105,53 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         ],
       );
 
-      const mergedRef = mergeRefs(ref, triggerRef);
+      /**
+       * Native: `Pressable` has no usable programmatic `.focus()` (unlike `TextInput`).
+       * `Form.Label` calls `focusInput()` → we register a bridge on `field.inputRef` that tries
+       * native focus, then opens the list (expected “tap label” behavior for a select).
+       */
+      const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+      labelFocusGateRef.current = {
+        disabled: !!disabled,
+        readOnly: !!contextReadOnly,
+      };
+
+      const labelFocusBridge = useMemo(
+        () => ({
+          focus() {
+            const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+            if (isOff || isRO) {
+              return;
+            }
+            const node = triggerRef.current as { focus?: () => void } | null;
+            if (node != null && typeof node.focus === 'function') {
+              node.focus();
+            }
+            setOpen(true);
+          },
+        }),
+        [setOpen],
+      );
+
+      useLayoutEffect(() => {
+        if (Platform.OS === 'web' || !field.inputRef) {
+          return;
+        }
+        const r = field.inputRef;
+        r.current = labelFocusBridge as unknown as typeof r.current;
+        return () => {
+          if (r.current === labelFocusBridge) {
+            r.current = null;
+          }
+        };
+      }, [field.inputRef, labelFocusBridge]);
+
+      const mergedRef =
+        Platform.OS === 'web' ? mergeRefs(ref, triggerRef) : mergeRefs(ref, triggerRef);
+
+      const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp]
+        .filter(Boolean)
+        .join(' ');
 
       const webKeyboardProps =
         Platform.OS === 'web'
@@ -122,7 +159,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
           : {};
 
       return (
-        <SelectTriggerContext.Provider value={interactionState}>
+        <SelectTriggerProvider value={interactionState}>
           <BaseTrigger
             ref={mergedRef}
             role="combobox"
@@ -136,7 +173,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             aria-required={contextRequired || undefined}
             aria-invalid={contextInvalid || undefined}
             aria-readonly={contextReadOnly || undefined}
-            id={triggerId}
+            aria-describedby={ariaDescribedBy || undefined}
             {...dataAttributes({
               hover: interactionState.hover,
               focus: interactionState.focus,
@@ -151,6 +188,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             })}
             disabled={disabled}
             {...(props as T)}
+            id={triggerId}
             onPress={composeEventHandlers(props?.onPress, handlePress)}
             onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
             onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
@@ -172,21 +210,9 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             )}
             {...webKeyboardProps}
           >
-            {/* TODO: Align render-function children convention with Button — Button
-                passes raw hook values (isHovered, isFocused, etc.) while this
-                passes merged interaction state (isHoveredProp || isHovered). Pick
-                one convention and apply to both. */}
-            {typeof children === 'function'
-              ? children({
-                  hovered: interactionState.hover,
-                  focused: interactionState.focus,
-                  pressed: interactionState.active,
-                  disabled: interactionState.disabled,
-                  focusVisible: interactionState.focusVisible,
-                })
-              : children}
+            {typeof children === 'function' ? children(interactionState) : children}
           </BaseTrigger>
-        </SelectTriggerContext.Provider>
+        </SelectTriggerProvider>
       );
     },
   );