@cdx-ui/primitives 0.0.1-alpha.2 → 0.0.1-alpha.20

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -0,0 +1,79 @@
+import { forwardRef } from 'react';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useFocusRing } from '@react-native-aria/focus';
+import { dataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+// TODO: Label is taking focus on keyboard navigation
+
+export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
+  forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useCheckboxRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    return (
+      <BaseCheckbox
+        {...(combinedProps as T)}
+        ref={mergedRef}
+        role="label"
+        // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+        accessibilityRole="label"
+        {...dataAttributes({
+          checked: isChecked || isCheckedProp,
+          disabled: isDisabled || isDisabledProp,
+          hover: isHovered || isHoveredProp,
+          invalid: isInvalid || isInvalidProp,
+          readonly: isReadOnly || isReadOnlyProp,
+          active: isPressed,
+          focus: isFocused,
+          indeterminate: isIndeterminate || isIndeterminateProp,
+          focusVisible: isFocusVisible,
+        })}
+      >
+        <CheckboxProvider
+          value={{
+            isChecked: isChecked || isCheckedProp,
+            isDisabled: isDisabled || isDisabledProp,
+            isFocusVisible: isFocusVisible || isFocusVisibleProp,
+            isHovered: isHovered || isHoveredProp,
+            isInvalid: isInvalid || isInvalidProp,
+            isReadOnly: isReadOnly || isReadOnlyProp,
+            isIndeterminate: isIndeterminate || isIndeterminateProp,
+            isPressed,
+            isFocused,
+          }}
+        >
+          <VisuallyHidden>
+            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </CheckboxProvider>
+      </BaseCheckbox>
+    );
+  });

package/src/checkbox/index.ts

@@ -0,0 +1,43 @@
+import type React from 'react';
+import { createCheckboxGroup } from './createCheckboxGroup';
+import { createCheckboxIcon } from './createCheckboxIcon';
+import { createCheckboxIndicator } from './createCheckboxIndicator';
+import { createCheckboxLabel } from './createCheckboxLabel';
+import { createCheckboxRoot } from './createCheckboxRoot';
+import type { ICheckboxComponentType } from './types';
+
+export type {
+  ICheckboxComponentType,
+  ICheckboxGroupProps,
+  ICheckboxIconProps,
+  ICheckboxIndicatorProps,
+  ICheckboxLabelProps,
+  ICheckboxProps,
+} from './types';
+
+export function createCheckbox<Root, Indicator, Icon, Label, Group>(BaseComponents: {
+  Root: React.ComponentType<Root>;
+  Indicator: React.ComponentType<Indicator>;
+  Icon: React.ComponentType<Icon>;
+  Label: React.ComponentType<Label>;
+  Group: React.ComponentType<Group>;
+}) {
+  const Checkbox = createCheckboxRoot(BaseComponents.Root);
+  const Indicator = createCheckboxIndicator(BaseComponents.Indicator);
+  const Icon = createCheckboxIcon(BaseComponents.Icon);
+  const Label = createCheckboxLabel(BaseComponents.Label);
+  const Group = createCheckboxGroup(BaseComponents.Group);
+
+  Checkbox.displayName = 'CheckboxPrimitive';
+  Indicator.displayName = 'CheckboxPrimitive.Indicator';
+  Icon.displayName = 'CheckboxPrimitive.Icon';
+  Label.displayName = 'CheckboxPrimitive.Label';
+  Group.displayName = 'CheckboxPrimitive.Group';
+
+  return Object.assign(Checkbox, {
+    Indicator,
+    Icon,
+    Label,
+    Group,
+  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
+}

package/src/checkbox/types.ts

@@ -0,0 +1,74 @@
+import type { PressableProps } from 'react-native';
+export interface InterfaceCheckbox extends PressableProps {
+  value: string;
+  onChange?: (isSelected: boolean) => void;
+  children?: React.ReactNode;
+  defaultIsChecked?: boolean;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isPressed?: boolean;
+  isRequired?: boolean;
+  isIndeterminate?: boolean;
+  isFocusVisible?: boolean;
+}
+
+export interface ICheckboxGroupProps {
+  value: string[];
+  onChange?: (values: string[]) => void;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  'aria-label'?: string;
+}
+
+export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
+  React.ForwardRefExoticComponent<
+    React.RefAttributes<Root> & React.PropsWithoutRef<Root> & InterfaceCheckbox
+  > & {
+    Indicator: React.ForwardRefExoticComponent<
+      React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & ICheckboxIndicatorProps
+    >;
+    Icon: React.ForwardRefExoticComponent<
+      React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & ICheckboxIconProps
+    >;
+    Label: React.ForwardRefExoticComponent<
+      React.RefAttributes<Label> & React.PropsWithoutRef<Label> & ICheckboxLabelProps
+    >;
+    Group: React.ForwardRefExoticComponent<
+      React.RefAttributes<Group> & React.PropsWithoutRef<Group> & ICheckboxGroupProps
+    >;
+  };
+
+export interface ICheckboxIndicatorProps {
+  children?: React.ReactNode;
+}
+
+export interface ICheckboxIconProps {
+  children?: React.ReactNode;
+  /** Render the icon even when unchecked */
+  forceMount?: boolean;
+}
+
+export interface ICheckboxLabelProps {
+  children?: React.ReactNode;
+}
+
+export type ICheckboxProps = InterfaceCheckbox;
+
+export interface ICheckboxContextValue {
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isHovered?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isPressed?: boolean;
+  isFocused?: boolean;
+  isIndeterminate?: boolean;
+  isFocusVisible?: boolean;
+}

package/src/checkbox/useCheckboxRoot.ts

@@ -0,0 +1,85 @@
+import { useContext, useRef } from 'react';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useCheckbox } from '@react-native-aria/checkbox';
+import { useHover } from '@react-native-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxProps } from './types';
+
+interface UseCheckboxRootOptions {
+  useInputRefForAria?: boolean;
+}
+
+export function useCheckboxRoot(
+  props: ICheckboxProps,
+  ref?: React.Ref<unknown>,
+  { useInputRefForAria = false }: UseCheckboxRootOptions = {},
+) {
+  const formControlContext = useFormControlContext();
+
+  const { isInvalid, isReadOnly, isIndeterminate, ...combinedProps } = {
+    ...formControlContext,
+    ...props,
+  };
+
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+
+  const state = useToggleState({
+    ...combinedProps,
+    defaultSelected: props.defaultIsChecked,
+    isSelected: props.isChecked,
+  });
+
+  const rootRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRootRef = mergeRefs(ref as any, rootRef as any);
+  const ariaLabel = combinedProps['aria-label'] || combinedProps.value || 'Checkbox';
+
+  const groupToggleState = useToggleState(
+    checkboxGroupContext
+      ? {
+          isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
+          isSelected: checkboxGroupContext.state.isSelected(combinedProps.value),
+          onChange(isSelected: boolean) {
+            if (isSelected) {
+              checkboxGroupContext.state.addValue(combinedProps.value);
+            } else {
+              checkboxGroupContext.state.removeValue(combinedProps.value);
+            }
+            combinedProps.onChange?.(isSelected);
+          },
+        }
+      : { isSelected: false },
+  );
+
+  const { inputProps: groupItemInputProps } = useCheckbox(
+    {
+      ...combinedProps,
+      'aria-label': ariaLabel,
+      ...(checkboxGroupContext && {
+        isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
+        isDisabled: combinedProps.isDisabled || checkboxGroupContext.state.isDisabled,
+      }),
+    } as any,
+    checkboxGroupContext ? groupToggleState : state,
+    (useInputRefForAria ? inputRef : rootRef) as any,
+  );
+
+  const { checked: isChecked, disabled: isDisabled } = groupItemInputProps;
+
+  const { hoverProps, isHovered } = useHover({}, rootRef);
+
+  return {
+    combinedProps,
+    isInvalid,
+    isReadOnly,
+    isIndeterminate,
+    groupItemInputProps,
+    isChecked,
+    isDisabled,
+    isHovered,
+    hoverProps,
+    mergedRef: mergedRootRef,
+    inputRef,
+  };
+}

package/src/index.ts

@@ -1,4 +1,9 @@
+export * from './avatar';
 export * from './button';
+export * from './checkbox';
 export * from './input';
+export * from './link';
+export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
-export { OverlayInsetsProvider, type EdgeInsets } from './overlay';
+export * from './switch';
+export type { InteractionState } from './types';

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

@@ -5,6 +5,7 @@ import {
   Pressable,
   type StyleProp,
   StyleSheet,
+  View,
   type ViewStyle,
 } from 'react-native';
 import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
@@ -30,7 +31,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 +51,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,
     );
   }