@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -1,83 +0,0 @@
-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';
-
-/**
- * Web uses a native checkbox input (VisuallyHidden) for ARIA + focus management. The outer
- * `Pressable` must not be in the tab order or each control consumes two Tab stops (wrapper + input).
- */
-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}
-        // Native input is the only tab stop; Pressable is still clickable (mouse / screen reader).
-        tabIndex={-1}
-        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/chip/createChipRoot.tsx

@@ -1,144 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { PressableProps } from 'react-native';
-import { composeEventHandlers, mergeRefs } 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 type { IChipPressablePassthrough, IChipProps } from './types';
-
-const rowStyle = {
-  flexDirection: 'row' as const,
-  alignItems: 'center' as const,
-  alignSelf: 'flex-start' as const,
-};
-
-const chipSlotAttrs = dataAttributes({ slot: 'chip' });
-
-export const createChipRoot = <V, P>(
-  BaseView: React.ComponentType<V>,
-  BasePressable: React.ComponentType<P>,
-) =>
-  forwardRef(
-    (
-      {
-        asChild = false,
-        children,
-        onPress,
-        disabled = false,
-        accessibilityRole,
-        style,
-        ...restProps
-      }: IChipProps,
-      ref: React.Ref<unknown>,
-    ) => {
-      const childOnPress = React.isValidElement(children)
-        ? ((children.props as { onPress?: unknown }).onPress as IChipProps['onPress'] | undefined)
-        : undefined;
-
-      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;
-      };
-
-      if (asChildInteractive) {
-        const child = children as React.ReactElement<Record<string, unknown>>;
-
-        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
-        const resolvedDisabled = disabled || childDisabled;
-
-        const cloneProps: Record<string, unknown> = {
-          ...restProps,
-          ...chipSlotAttrs,
-          ...dataAttributes({
-            active: false,
-            hover: false,
-            disabled: resolvedDisabled,
-            focused: false,
-            focusVisible: false,
-          }),
-          ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
-          disabled: resolvedDisabled,
-          ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
-          style: [rowStyle, style, child.props.style],
-        };
-
-        if (resolvedDisabled) {
-          cloneProps.onPress = undefined;
-        } else if (onPress) {
-          cloneProps.onPress = composeEventHandlers(childOnPress, onPress);
-        }
-
-        return React.cloneElement(child, cloneProps);
-      }
-
-      if (isPressableRoot) {
-        const interactionAttrs = dataAttributes({
-          active: isPressed,
-          hover: isHovered,
-          disabled,
-          focused: isFocused,
-          focusVisible: isFocusVisible,
-        });
-
-        const {
-          onPressIn: onPressInProp,
-          onPressOut: onPressOutProp,
-          onHoverIn: onHoverInProp,
-          onHoverOut: onHoverOutProp,
-          onFocus: onFocusProp,
-          onBlur: onBlurProp,
-        } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
-
-        return (
-          <BasePressable
-            {...(restProps as P)}
-            {...chipSlotAttrs}
-            {...interactionAttrs}
-            accessibilityRole={accessibilityRole ?? 'button'}
-            {...(disabled && { accessibilityState: { disabled: true } })}
-            disabled={disabled}
-            ref={ref as React.Ref<P>}
-            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,
-            )}
-          >
-            {children}
-          </BasePressable>
-        );
-      }
-
-      return (
-        <BaseView
-          {...(restProps as V)}
-          {...chipSlotAttrs}
-          {...(disabled ? dataAttributes({ disabled: true }) : undefined)}
-          ref={ref as React.Ref<V>}
-          style={[rowStyle, style]}
-        >
-          {children}
-        </BaseView>
-      );
-    },
-  );

package/src/dialog/createDialogClose.tsx

@@ -1,27 +0,0 @@
-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

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

package/src/dialog/createDialogDescription.tsx

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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>
-    );
-  });

package/src/dialog/createDialogPopup.tsx

@@ -1,146 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback } from 'react';
-import { KeyboardAvoidingView, 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 { IDialogPopupProps } from './types';
-
-export const createDialogPopup = <PopupProps, OverlayProps>(
-  BasePopup: React.ComponentType<PopupProps>,
-  BaseOverlay: React.ComponentType<OverlayProps>,
-) =>
-  forwardRef(
-    (
-      {
-        children,
-        forceMount = false,
-        avoidKeyboard = true,
-        keyboardVerticalOffset = 0,
-        ...props
-      }: IDialogPopupProps,
-      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-popup',
-        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)} />
-              <BasePopup ref={ref} {...contentSlotAttrs} {...(props as PopupProps)} {...ariaProps}>
-                {children}
-              </BasePopup>
-            </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 flex layer 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.
-      //
-      // That centering layer is a KeyboardAvoidingView so the panel (including its
-      // footer/actions, which sit at the bottom of a centered, max-h-capped panel)
-      // shifts up to clear the on-screen keyboard. `behavior` is platform-specific
-      // and the layer is a no-op while no input is focused. The RN Modal renders in
-      // its own window, so this MUST live here — a KeyboardAvoidingView wrapping the
-      // <Dialog> at the usage level cannot reach this subtree. Web is unaffected
-      // (the browser handles focus scrolling; there is no occluding keyboard).
-      //
-      // 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.Content.
-      //
-      // 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.
-      const keyboardBehavior = avoidKeyboard
-        ? Platform.select<'padding' | 'height'>({ ios: 'padding', default: 'height' })
-        : undefined;
-
-      return (
-        <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
-          <FocusScope contain={open} restoreFocus autoFocus={open}>
-            <View style={styles.fill}>
-              <BaseOverlay {...(overlayProps as any)} />
-              <KeyboardAvoidingView
-                style={styles.center}
-                pointerEvents="box-none"
-                behavior={keyboardBehavior}
-                keyboardVerticalOffset={keyboardVerticalOffset}
-              >
-                <BasePopup
-                  ref={ref}
-                  {...contentSlotAttrs}
-                  {...(props as PopupProps)}
-                  {...ariaProps}
-                >
-                  {children}
-                </BasePopup>
-              </KeyboardAvoidingView>
-            </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: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/dialog/createDialogRoot.tsx

@@ -1,66 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useId, useMemo } from 'react';
-import { useControllableState } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { DialogProvider } from './context';
-import type { IDialogRootProps } from './types';
-
-export const createDialogRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        open: openProp,
-        onOpenChange,
-        defaultOpen = false,
-        closeOnBackdropPress = true,
-        closeOnEscKey = true,
-        role = 'dialog',
-        children,
-        ...props
-      }: IDialogRootProps,
-      ref?: React.Ref<T>,
-    ) => {
-      const [open, setOpenState] = useControllableState<boolean>({
-        prop: openProp,
-        defaultProp: defaultOpen,
-        onChange: onOpenChange,
-      });
-
-      const setOpen = useCallback(
-        (newOpen: boolean) => {
-          setOpenState(newOpen);
-        },
-        [setOpenState],
-      );
-
-      const id = useId();
-      const nativeID = `dialog-${id}`;
-
-      const contextValue = useMemo(
-        () => ({
-          open: open ?? false,
-          onOpenChange: setOpen,
-          closeOnBackdropPress,
-          closeOnEscKey,
-          nativeID,
-          role,
-        }),
-        [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
-      );
-
-      return (
-        <DialogProvider value={contextValue}>
-          <BaseRoot
-            ref={ref}
-            {...(props as T)}
-            {...dataAttributes({
-              slot: 'dialog',
-              state: open ? 'open' : 'closed',
-            })}
-          >
-            {children}
-          </BaseRoot>
-        </DialogProvider>
-      );
-    },
-  );

package/src/dialog/createDialogTitle.tsx

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

package/src/dialog/createDialogTrigger.tsx

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

package/src/field/createFieldError.tsx

@@ -1,32 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-
-export const createFieldError = <T,>(BaseFormError: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
-    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
-
-    const visible = Boolean(isInvalid && children);
-
-    React.useEffect(() => {
-      if (!visible) {
-        setHasFeedbackText?.(false);
-        return undefined;
-      }
-      setHasFeedbackText?.(true);
-      return () => {
-        setHasFeedbackText?.(false);
-      };
-    }, [setHasFeedbackText, visible]);
-
-    return visible ? (
-      <BaseFormError
-        ref={ref}
-        {...(props as T)}
-        id={feedbackId}
-        accessibilityRole="alert"
-        accessibilityLiveRegion="assertive"
-      >
-        {children}
-      </BaseFormError>
-    ) : null;
-  });

package/src/field/createFieldErrorIcon.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormErrorIcon ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormErrorIcon>
-  ));

package/src/field/createFieldErrorText.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormErrorText ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormErrorText>
-  ));

package/src/field/createFieldHelper.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-
-export const createFieldHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
-    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
-
-    React.useEffect(() => {
-      if (isInvalid) {
-        setHasHelpText?.(false);
-        return undefined;
-      }
-      setHasHelpText?.(true);
-      return () => {
-        setHasHelpText?.(false);
-      };
-    }, [setHasHelpText, isInvalid]);
-
-    if (isInvalid) {
-      return null;
-    }
-
-    return (
-      <BaseFormHelper ref={ref} {...(props as T)} id={helpTextId}>
-        {children}
-      </BaseFormHelper>
-    );
-  });

package/src/field/createFieldHelperText.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormHelperText ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormHelperText>
-  ));