@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.181

package/src/checkbox/createCheckboxLabel.tsx

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

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

@@ -1,79 +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';
-
-// 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/dialog/createDialogBody.tsx

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

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

@@ -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/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>
-  ));

package/src/field/createFieldLabel.tsx

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IFieldLabelProps } from './types';
-
-export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
-  forwardRef<unknown, IFieldLabelProps & { children?: React.ReactNode }>(
-    ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
-      const field = useFormControlContext();
-      const fieldId = field.id;
-      const labelId = field.labelId;
-
-      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
-      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
-
-      return (
-        <BaseFormLabel
-          ref={ref}
-          {...(props as T)}
-          id={labelId}
-          htmlFor={htmlFor}
-          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
-        >
-          {children}
-          {field.isRequired ? requiredIndicator : null}
-        </BaseFormLabel>
-      );
-    },
-  );