@cdx-ui/primitives 0.0.1-alpha.4 → 0.0.1-alpha.40

package/src/checkbox/createCheckboxLabel.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useCheckboxContext } from './context';
+import type { ICheckboxLabelProps } from './types';
+
+export const createCheckboxLabel = <T,>(BaseCheckboxLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, ICheckboxLabelProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const {
+        isChecked,
+        isDisabled,
+        isHovered,
+        isInvalid,
+        isReadOnly,
+        isPressed,
+        isFocused,
+        isIndeterminate,
+        isFocusVisible,
+      } = useCheckboxContext();
+
+      return (
+        <BaseCheckboxLabel
+          className={className}
+          {...dataAttributes({
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readOnly: isReadOnly,
+            pressed: isPressed,
+            focused: isFocused,
+            indeterminate: isIndeterminate,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseCheckboxLabel>
+      );
+    },
+  );

package/src/checkbox/createCheckboxRoot.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus,
+        onBlur,
+        children,
+        ...props
+      }: ICheckboxProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const {
+        isHovered: isHoveredProp,
+        isChecked: isCheckedProp,
+        isDisabled: isDisabledProp,
+        isInvalid: isInvalidProp,
+        isReadOnly: isReadOnlyProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isIndeterminate: isIndeterminateProp,
+        isFocusVisible,
+      } = 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,
+      });
+
+      return (
+        <BaseCheckbox
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as T)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          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))}
+          {...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,
+              isHovered: isHovered || isHoveredProp,
+              isInvalid: isInvalid || isInvalidProp,
+              isReadOnly: isReadOnly || isReadOnlyProp,
+              isPressed: isPressed || isPressedProp,
+              isFocused: isFocused || isFocusedProp,
+              isIndeterminate: isIndeterminate || isIndeterminateProp,
+              isFocusVisible,
+            }}
+          >
+            {children}
+          </CheckboxProvider>
+        </BaseCheckbox>
+      );
+    },
+  );

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/dialog/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IDialogContextType } from './types';
+
+export const [DialogProvider, useDialog] = createContext<IDialogContextType>('DialogContext');

package/src/dialog/createDialogBody.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogBodyProps } from './types';
+
+export const createDialogBody = <T,>(BaseBody: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogBodyProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseBody ref={ref} {...(props as T)}>
+        {children}
+      </BaseBody>
+    );
+  });

package/src/dialog/createDialogClose.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import type { IDialogCloseProps } from './types';
+import { useDialog } from './context';
+
+export const createDialogClose = <T,>(BaseClose: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogCloseProps>(
+    ({ asChild = false, children, onPress, ...props }, ref) => {
+      const { onOpenChange } = useDialog();
+
+      const handlePress = (e?: any) => {
+        onPress?.(e);
+        onOpenChange(false);
+      };
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          onPress: handlePress,
+        });
+      }
+
+      return (
+        <BaseClose ref={ref} {...(props as T)} onPress={handlePress}>
+          {children}
+        </BaseClose>
+      );
+    },
+  );

package/src/dialog/createDialogContent.tsx

@@ -0,0 +1,122 @@
+import type React from 'react';
+import { forwardRef, useCallback } from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogContentProps } from './types';
+
+export const createDialogContent = <ContentProps, OverlayProps>(
+  BaseContent: React.ComponentType<ContentProps>,
+  BaseOverlay: React.ComponentType<OverlayProps>,
+) =>
+  forwardRef(({ children, forceMount = false, ...props }: IDialogContentProps, ref?: any) => {
+    const { open, onOpenChange, closeOnBackdropPress, closeOnEscKey, nativeID, role } = useDialog();
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose);
+
+    if (!(open || forceMount)) {
+      return null;
+    }
+
+    const overlayProps = {
+      ...(closeOnBackdropPress ? { onPress: handleClose } : {}),
+      accessible: false,
+      importantForAccessibility: 'no-hide-descendants' as const,
+      ...dataAttributes({ slot: 'dialog-overlay' }),
+    };
+
+    const contentSlotAttrs = dataAttributes({
+      slot: 'dialog-content',
+      state: open ? 'open' : 'closed',
+    });
+
+    const ariaProps = {
+      role,
+      'aria-modal': true,
+      'aria-labelledby': `${nativeID}-title`,
+      'aria-describedby': `${nativeID}-description`,
+    };
+
+    if (Platform.OS === 'web' && createPortalFn) {
+      return createPortalFn(
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View
+            style={{
+              position: 'fixed' as any,
+              inset: 0 as any,
+              zIndex: 50,
+              display: 'flex' as any,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <BaseOverlay {...(overlayProps as any)} />
+            <BaseContent
+              ref={ref}
+              {...contentSlotAttrs}
+              {...(props as ContentProps)}
+              {...ariaProps}
+            >
+              {children}
+            </BaseContent>
+          </View>
+        </FocusScope>,
+        document.body,
+      );
+    }
+
+    // Native layout uses two layers to support both backdrop dismiss and
+    // scrollable body content. The overlay Pressable fills the Modal via
+    // absolute positioning and handles backdrop taps. A second absolute-fill
+    // View with pointerEvents="box-none" centers the content panel — "box-none"
+    // lets taps outside the panel pass through to the overlay while allowing
+    // the panel and its children to receive touches normally.
+    //
+    // Critically, the content panel must NOT claim the JS touch responder
+    // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
+    // blockNativeResponder, which suppresses the native UIScrollView /
+    // ScrollView pan gesture recognizer and breaks any ScrollView inside
+    // Dialog.Body.
+    //
+    // Static StyleSheet used here because these are structural layout concerns
+    // of the primitive's modal chrome — not themeable styles. They must remain
+    // stable regardless of the styled layer's className.
+    return (
+      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View style={styles.fill}>
+            <BaseOverlay {...(overlayProps as any)} />
+            <View style={styles.center} pointerEvents="box-none">
+              <BaseContent
+                ref={ref}
+                {...contentSlotAttrs}
+                {...(props as ContentProps)}
+                {...ariaProps}
+              >
+                {children}
+              </BaseContent>
+            </View>
+          </View>
+        </FocusScope>
+      </Modal>
+    );
+  });
+
+// Structural layout for the native Modal chrome. These are not themeable —
+// they position the overlay and centering layers that the primitive manages
+// internally. Matches the pattern in OverlayContainer.tsx.
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  center: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/dialog/createDialogDescription.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogDescriptionProps } from './types';
+
+export const createDialogDescription = <T,>(BaseDescription: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogDescriptionProps>(({ children, ...props }, ref) => {
+    const { nativeID } = useDialog();
+
+    return (
+      <BaseDescription
+        ref={ref}
+        nativeID={`${nativeID}-description`}
+        {...(props as T)}
+        {...dataAttributes({ slot: 'dialog-description' })}
+      >
+        {children}
+      </BaseDescription>
+    );
+  });

package/src/dialog/createDialogFooter.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogFooterProps } from './types';
+
+export const createDialogFooter = <T,>(BaseFooter: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogFooterProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseFooter ref={ref} {...(props as T)}>
+        {children}
+      </BaseFooter>
+    );
+  });

package/src/dialog/createDialogHeader.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogHeaderProps } from './types';
+
+export const createDialogHeader = <T,>(BaseHeader: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogHeaderProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseHeader ref={ref} {...(props as T)}>
+        {children}
+      </BaseHeader>
+    );
+  });