@cdx-ui/primitives 0.0.1-beta.13 → 0.0.1-beta.130

package/src/checkbox/CheckboxRoot.tsx

@@ -0,0 +1,102 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useCheckboxRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp,
+    });
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...(combinedProps as PressableProps)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked || isCheckedProp,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              indeterminate: isIndeterminate || isIndeterminateProp,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(composeEventHandlers(onFocus, focusProps.onFocus))}
+          onBlur={composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur))}
+        >
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/CheckboxRoot.web.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    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();
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          {...(combinedProps as PressableProps)}
+          ref={mergedRef}
+          tabIndex={-1}
+          role="label"
+          // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+          accessibilityRole="label"
+          {...mergeDataAttributes(
+            props,
+            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,
+            }),
+          )}
+        >
+          <VisuallyHidden>
+            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/index.ts

@@ -1,43 +1,5 @@
-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 { ICheckboxContextValue, ICheckboxGroupProps, ICheckboxProps } 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>;
-}
+export { useCheckboxContext } from './context';
+export { CheckboxRoot, type CheckboxRootProps } from './CheckboxRoot';
+export { CheckboxGroup, type CheckboxGroupRootProps } from './CheckboxGroup';

package/src/checkbox/types.ts

@@ -1,4 +1,5 @@
 import type { PressableProps } from 'react-native';
+
 export interface InterfaceCheckbox extends PressableProps {
   value: string;
   onChange?: (isSelected: boolean) => void;
@@ -27,38 +28,6 @@ export interface ICheckboxGroupProps {
   '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 {

package/src/chip/ChipRoot.tsx

@@ -0,0 +1,168 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } 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 { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ChipProvider } from './context';
+import type { IChipPressablePassthrough, IChipProps } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  alignSelf: 'flex-start' as const,
+};
+
+export interface ChipRootProps extends IChipProps {}
+
+export const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      disabled = false,
+      accessibilityRole,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      isDisabled: !isPressableRoot || disabled,
+    });
+    const isPressed = pressState.isPressed;
+    const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    const { hoverProps, isHovered } = useHover();
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+
+    const childDisabled =
+      asChildInteractive &&
+      !!(children as React.ReactElement<{ disabled?: boolean }>).props.disabled;
+    const resolvedDisabled = disabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [isPressableRoot, isHovered, isFocused, isPressed, resolvedDisabled, isFocusVisible],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyle, style],
+      };
+
+      // Only set onPress when we have a parent handler to compose. Slot merges this
+      // with the child's own onPress (child first, then ours). When there is no parent
+      // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Slot
+            ref={ref as React.Ref<View>}
+            {...(slotMergeProps as PressableProps)}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: false,
+                hover: false,
+                focus: false,
+                focusVisible: false,
+                disabled: resolvedDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Slot>
+        </ChipProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            accessibilityRole={accessibilityRole ?? 'button'}
+            {...(disabled && { accessibilityState: { disabled: true } })}
+            disabled={disabled}
+            style={[rowStyle, style]}
+            onPress={disabled ? undefined : onPress}
+            onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(onFocusProp, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(onBlurProp, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: isPressed,
+                hover: isHovered,
+                focus: isFocused,
+                focusVisible: isFocusVisible,
+                disabled,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ChipProvider>
+      );
+    }
+
+    return (
+      <ChipProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyle, style]}
+          {...mergeDataAttributes(
+            restProps,
+            disabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ChipProvider>
+    );
+  },
+);
+
+ChipRoot.displayName = 'ChipRoot';

package/src/chip/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+
+export const [ChipProvider, useChipContext] = createContext<InteractionState>('ChipContext');

package/src/chip/index.ts

@@ -0,0 +1,3 @@
+export type { IChipPressablePassthrough, IChipProps, InterfaceChipProps } from './types';
+export { useChipContext } from './context';
+export { ChipRoot, type ChipRootProps } from './ChipRoot';

package/src/chip/types.ts

@@ -0,0 +1,20 @@
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type IChipPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface InterfaceChipProps extends ViewProps, IChipPressablePassthrough {
+  /**
+   * When set (and `asChild` is not used with a valid element), root renders as pressable.
+   */
+  onPress?: PressableProps['onPress'];
+  /** Disables press handling when the root is pressable. */
+  disabled?: boolean;
+  /**
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
+   */
+  asChild?: boolean;
+}
+
+export type IChipProps = InterfaceChipProps;

package/src/dialog/DialogClose.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useDialog } from './context';
+import type { IDialogCloseProps } from './types';
+
+export interface DialogCloseProps extends IDialogCloseProps {}
+
+export const DialogClose = forwardRef<ComponentRef<typeof Pressable>, DialogCloseProps>(
+  ({ asChild = false, children, onPress, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp ref={ref} {...(props as PressableProps)} onPress={handlePress}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogClose.displayName = 'DialogClose';

package/src/dialog/DialogContent.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useCallback, useEffect, type ComponentRef } from 'react';
+import { BackHandler, Platform, View, type ViewProps } from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { useEscapeKey } from '../overlay';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogContentProps } from './types';
+
+export interface DialogContentProps extends IDialogContentProps {}
+
+/**
+ * Dialog content panel primitive. Provides:
+ * - ARIA role, aria-modal, aria-labelledby/describedby
+ * - FocusScope (focus trap + restore + auto-focus)
+ * - Escape key dismissal (web)
+ * - Android hardware back button dismissal (native)
+ * - data-state attribute for CSS transition targeting
+ *
+ * Unstyled — the styled layer applies centering, background, border-radius, etc.
+ */
+export const DialogContent = forwardRef<ComponentRef<typeof View>, DialogContentProps>(
+  ({ asChild = false, forceMount = false, children, ...props }, ref) => {
+    const { open, onOpenChange, closeOnEscKey, nativeID, role } = useDialog();
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose);
+
+    useEffect(() => {
+      // BackHandler is native-only; react-native-web warns on every subscription.
+      if (!open || Platform.OS === 'web') return;
+
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        backHandler.remove();
+      };
+    }, [open, onOpenChange]);
+
+    if (!forceMount && !open) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    const ariaProps = {
+      role,
+      'aria-modal': true,
+      'aria-labelledby': `${nativeID}-title`,
+      'aria-describedby': `${nativeID}-description`,
+    };
+
+    return (
+      <FocusScope contain={open} restoreFocus autoFocus={open}>
+        <Comp
+          ref={ref}
+          nativeID={nativeID}
+          {...ariaProps}
+          {...(props as ViewProps)}
+          {...mergeDataAttributes(
+            props,
+            forceMount ? undefined : dataAttributes({ state: open ? 'open' : 'closed' }),
+          )}
+        >
+          {children}
+        </Comp>
+      </FocusScope>
+    );
+  },
+);
+
+DialogContent.displayName = 'DialogContent';

package/src/dialog/DialogOverlay.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogOverlayProps } from './types';
+
+export interface DialogOverlayProps extends IDialogOverlayProps {}
+
+/**
+ * Backdrop overlay that dismisses the dialog on press (when closeOnBackdropPress
+ * is enabled). Supports `forceMount` for exit animation coordination.
+ *
+ * Unstyled — the styled layer applies opacity/color via className.
+ */
+export const DialogOverlay = forwardRef<ComponentRef<typeof Pressable>, DialogOverlayProps>(
+  ({ asChild = false, forceMount = false, onPress, ...props }, ref) => {
+    const { open, onOpenChange, closeOnBackdropPress } = useDialog();
+
+    const handlePress = useCallback(
+      (e: any) => {
+        if (closeOnBackdropPress) {
+          onOpenChange(false);
+        }
+        if (typeof onPress === 'function') {
+          onPress(e);
+        }
+      },
+      [closeOnBackdropPress, onOpenChange, onPress],
+    );
+
+    if (!forceMount && !open) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={ref}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
+        onPress={handlePress}
+        {...(props as PressableProps)}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-overlay' }))}
+      />
+    );
+  },
+);
+
+DialogOverlay.displayName = 'DialogOverlay';