@cdx-ui/primitives 0.0.1-alpha.3 → 0.0.1-alpha.30

package/src/input/createInputField.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   type TextInputKeyPressEvent,
 } from 'react-native';
-import { mergeRefs, useFormControl } from '@cdx-ui/utils';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useInputContext } from './context';
 import type { IInputProps } from './types';
@@ -18,7 +18,8 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         children,
         onKeyPress,
         type = 'text',
-        'aria-label': ariaLabel = 'Input Field',
+        accessibilityLabel,
+        'aria-label': ariaLabelProp,
         secureTextEntry,
         editable,
         disabled,
@@ -46,15 +47,22 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         id: props.id,
       });
 
+      const field = useFormControlContext();
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
         callback();
       };
 
-      const mergedRef = mergeRefs(ref, inputFieldRef);
+      const mergedRef =
+        Platform.OS === 'web'
+          ? mergeRefs(ref, inputFieldRef)
+          : mergeRefs(ref, inputFieldRef, field.inputRef);
 
       const isEffectivelyDisabled = isDisabled || inputProps.disabled;
 
+      const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
       const editableProp = useMemo(() => {
         if (editable !== undefined) {
           return editable;
@@ -64,6 +72,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       return (
         <BaseInputField
+          {...inputProps}
           {...(props as T)}
           type={type}
           {...dataAttributes({
@@ -78,6 +87,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
           disabled={isEffectivelyDisabled}
           secureTextEntry={secureTextEntry || type === 'password'}
           accessible
+          accessibilityLabel={ariaLabel}
           aria-label={ariaLabel}
           aria-required={isRequired || inputProps.required}
           aria-invalid={isInvalid || inputProps['aria-invalid']}

package/src/input/index.tsx

@@ -1,5 +1,5 @@
+import type React from 'react';
 import { createInputField } from './createInputField';
-import { createInputIcon } from './createInputIcon';
 import { createInputRoot } from './createInputRoot';
 import { createInputSlot } from './createInputSlot';
 import type { IInputComponentType } from './types';
@@ -12,40 +12,27 @@ export type {
   IInputSlotProps,
 } from './types';
 
-export const createInput = <
+export function createInput<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
   FieldRef = unknown,
->({
-  Root,
-  Icon,
-  Slot,
-  Field,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<RootProps>;
-  Icon: React.ComponentType<IconProps>;
   Slot: React.ComponentType<SlotProps>;
   Field: React.ComponentType<FieldProps>;
-}) => {
-  const Input = createInputRoot(Root) as any;
-  Input.Icon = createInputIcon(Icon);
-  Input.Slot = createInputSlot(Slot);
-  Input.Field = createInputField(Field);
+}) {
+  const Input = createInputRoot(BaseComponents.Root);
+  const Slot = createInputSlot(BaseComponents.Slot);
+  const Field = createInputField(BaseComponents.Field);
 
-  Input.displayName = 'Input';
-  Input.Icon.displayName = 'Input.Icon';
-  Input.Slot.displayName = 'Input.Slot';
-  Input.Field.displayName = 'Input.Field';
+  Input.displayName = 'InputPrimitive';
+  Slot.displayName = 'InputPrimitive.Slot';
+  Field.displayName = 'InputPrimitive.Field';
 
-  return Input as IInputComponentType<
-    RootProps,
-    IconProps,
-    SlotProps,
-    FieldProps,
-    RootRef,
-    FieldRef
-  >;
-};
+  return Object.assign(Input, {
+    Slot,
+    Field,
+  }) as IInputComponentType<RootProps, SlotProps, FieldProps, RootRef, FieldRef>;
+}

package/src/input/types.ts

@@ -93,7 +93,6 @@ export interface IInputSlotProps extends ViewProps {
 
 export type IInputComponentType<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
@@ -101,9 +100,6 @@ export type IInputComponentType<
 > = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<RootProps & IInputFieldProps> & React.RefAttributes<RootRef>
 > & {
-  Icon: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<IconProps> & React.RefAttributes<unknown>
-  >;
   Slot: React.ForwardRefExoticComponent<
     React.PropsWithoutRef<SlotProps & IInputSlotProps> & React.RefAttributes<unknown>
   >;

package/src/link/LinkProvider.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { LinkAction } from './types';
+
+export interface LinkConfig {
+  /**
+   * Global navigation handler for `<Link>` instances whose `href` passes the
+   * `shouldNavigate` check. Called with the `href` and the per-instance `action`.
+   *
+   * @param href   - The URL or path to navigate to.
+   * @param action - Navigation intent from the per-instance `action` prop:
+   *                 `'navigate'` (default) — smart navigation, avoids duplicates.
+   *                 `'push'` — always pushes a new entry onto the stack.
+   *                 `'replace'` — replaces the current entry without stacking.
+   */
+  navigate: (href: string, action: LinkAction) => void | Promise<void>;
+
+  /**
+   * Optional predicate evaluated at **render time** to decide whether the
+   * provider should handle a given `href`.
+   *
+   * - Returns `true`  → the provider's `navigate` is called on press;
+   *   on web the native `<a href>` is **removed** so the browser doesn't
+   *   follow the link.
+   * - Returns `false` → the provider is bypassed; on web the `<a href>` is
+   *   preserved (cmd-click, SEO, etc.); on native `Linking.openURL` is used.
+   *
+   * Defaults to `() => true` when omitted (all hrefs go through the provider).
+   */
+  shouldNavigate?: (href: string) => boolean;
+}
+
+const LinkConfigContext = createContext<LinkConfig | undefined>(undefined);
+
+export function LinkProvider({
+  navigate,
+  shouldNavigate,
+  children,
+}: LinkConfig & { children: ReactNode }) {
+  return (
+    <LinkConfigContext.Provider value={{ navigate, shouldNavigate }}>
+      {children}
+    </LinkConfigContext.Provider>
+  );
+}
+
+LinkProvider.displayName = 'LinkProvider';
+
+export function useLinkConfig(): LinkConfig | undefined {
+  return useContext(LinkConfigContext);
+}

package/src/link/createLink.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocusRing, useFocus } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useLink } from './useLink';
+import type { ILinkProps } from './types';
+
+export const createLink = <RootT, R = unknown>({ Root }: { Root: React.ComponentType<RootT> }) =>
+  forwardRef(
+    (
+      {
+        children,
+        isHovered: isHoveredProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isFocusVisible: isFocusVisibleProp,
+        href,
+        onPress,
+        action,
+        webProps,
+        ...props
+      }: ILinkProps,
+      ref: React.ForwardedRef<R>,
+    ) => {
+      const { isFocused, focusProps } = useFocus();
+      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+        isFocusVisible: boolean;
+        focusProps: typeof focusProps;
+      };
+      const { pressProps, isPressed } = usePress({});
+      const { isHovered, hoverProps } = useHover();
+
+      const { linkProps } = useLink({
+        href,
+        onPress,
+        action,
+        webProps,
+      });
+
+      const interactionAttrs = dataAttributes({
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isPressedProp || isPressed,
+        focusVisible: isFocusVisibleProp || isFocusVisible,
+      });
+
+      return (
+        <Root
+          ref={ref}
+          {...interactionAttrs}
+          {...linkProps}
+          {...(props as RootT)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(props?.onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(props?.onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Root>
+      );
+    },
+  );

package/src/link/index.tsx

@@ -0,0 +1,5 @@
+export { createLink } from './createLink';
+export { LinkProvider } from './LinkProvider';
+export type { LinkConfig } from './LinkProvider';
+export { useLink } from './useLink';
+export type { ILinkProps, IUseLinkProp, LinkAction } from './types';

package/src/link/types.ts

@@ -0,0 +1,47 @@
+import type React from 'react';
+import type { GestureResponderEvent, PressableProps } from 'react-native';
+
+/**
+ * Navigation action forwarded to the `LinkProvider.navigate` callback.
+ *
+ * - `'navigate'` — (default) Smart navigation. In React Navigation this
+ *    avoids duplicating a screen that is already in the stack. In expo-router
+ *    it maps to `router.navigate()`.
+ * - `'push'`     — Always pushes a new screen onto the navigation stack,
+ *    even if the destination is already present.
+ * - `'replace'`  — Replaces the current screen without adding to the stack.
+ *    Useful for post-login redirects or wizard flows.
+ */
+export type LinkAction = 'navigate' | 'push' | 'replace';
+
+export interface ILinkProps extends PressableProps {
+  /**
+   * URL that should be opened on Link press
+   */
+  href?: string | undefined;
+  /**
+   * Callback that will be invoked on Link press
+   */
+  onPress?: ((event?: GestureResponderEvent) => void) | null | undefined;
+  /**
+   * Navigation action forwarded to the `LinkProvider`.
+   * Defaults to `'navigate'`.
+   */
+  action?: LinkAction;
+  isPressed?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  /**
+   * HTML anchor attributes applied only on web. Ignored on native platforms.
+   * `target`, `rel`, and `download` are forwarded via react-native-web's `hrefAttrs`.
+   */
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+export interface IUseLinkProp {
+  href?: string;
+  onPress: ((event?: GestureResponderEvent) => void) | null | undefined;
+  action?: LinkAction;
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}

package/src/link/useLink.ts

@@ -0,0 +1,54 @@
+import { Linking, Platform } from 'react-native';
+import type { AccessibilityRole, GestureResponderEvent } from 'react-native';
+import { useLinkConfig } from './LinkProvider';
+import type { IUseLinkProp } from './types';
+
+function defaultNavigate(href: string): void {
+  Linking.canOpenURL(href)
+    .then((supported) => {
+      if (supported) return Linking.openURL(href);
+      console.warn(`Cannot open URL: ${href}`);
+    })
+    .catch((err: unknown) => console.error('Failed to open URL', err));
+}
+
+export function useLink(props: IUseLinkProp) {
+  const { href, onPress, action = 'navigate', webProps } = props;
+  const config = useLinkConfig();
+
+  const providerHandles = !!config && !!href && (config.shouldNavigate?.(href) ?? true);
+
+  let platformLinkProps = {};
+
+  if (Platform.OS === 'web') {
+    platformLinkProps = {
+      href: providerHandles ? undefined : href,
+      hrefAttrs: webProps,
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (providerHandles) void config.navigate(href, action);
+      },
+    };
+  } else {
+    platformLinkProps = {
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (href) {
+          if (providerHandles) {
+            void config.navigate(href, action);
+          } else {
+            defaultNavigate(href);
+          }
+        }
+      },
+    };
+  }
+
+  return {
+    linkProps: {
+      ...platformLinkProps,
+      role: 'link' as AccessibilityRole,
+      accessible: true,
+    },
+  };
+}

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/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>
       );
     },
   );