@cdx-ui/primitives 0.0.1-beta.9 → 0.0.1-beta.91

package/src/avatar/createAvatarRoot.tsx

@@ -1,23 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo, useState } from 'react';
-import { AvatarProvider } from './context';
-import type { IAvatarProps } from './types';
-
-export const createAvatarRoot = <T,>(BaseAvatar: React.ComponentType<T>) =>
-  forwardRef<unknown, IAvatarProps>(({ children, ...props }, ref) => {
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [imageError, setImageError] = useState(false);
-
-    const contextValue = useMemo(
-      () => ({ imageLoaded, imageError, setImageLoaded, setImageError }),
-      [imageLoaded, imageError],
-    );
-
-    return (
-      <AvatarProvider value={contextValue}>
-        <BaseAvatar ref={ref} role="img" accessibilityRole="image" {...(props as T)}>
-          {children}
-        </BaseAvatar>
-      </AvatarProvider>
-    );
-  });

package/src/avatar/createAvatarText.tsx

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { useAvatarContext } from './context';
-import type { IAvatarTextProps } from './types';
-
-function getInitials(name: string): string {
-  const words = name.trim().split(/\s+/);
-  let result = '';
-  for (const word of words) {
-    if (word.length > 0) {
-      result += word.charAt(0);
-    }
-    if (result.length >= 2) break;
-  }
-  return result.toUpperCase();
-}
-
-export const createAvatarText = <T,>(BaseText: React.ComponentType<T>) =>
-  forwardRef<unknown, IAvatarTextProps>(({ children, style, ...props }, ref) => {
-    const { imageLoaded, imageError } = useAvatarContext();
-    const visible = !imageLoaded || imageError;
-
-    const text = typeof children === 'string' ? getInitials(children) : children;
-
-    return (
-      <BaseText ref={ref} style={[style, !visible && { opacity: 0 }]} {...(props as T)}>
-        {text}
-      </BaseText>
-    );
-  });

package/src/button/createButtonGroup.tsx

@@ -1,88 +0,0 @@
-import React, { forwardRef } from 'react';
-import { flattenChildren } from '@cdx-ui/utils';
-import type { IButtonGroupProps } from './types';
-
-export const createButtonGroup = <T,>(BaseButtonGroup: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        flexDirection = 'row',
-        isAttached,
-        isDisabled,
-        children,
-        isReversed,
-        reversed,
-        ...props
-      }: IButtonGroupProps,
-      ref?: React.Ref<T>,
-    ) => {
-      const direction = flexDirection.includes('reverse')
-        ? flexDirection === 'column-reverse'
-          ? 'column'
-          : 'row'
-        : flexDirection;
-      let computedChildren: React.ReactNode | undefined;
-      let childrenArray = React.Children.toArray(flattenChildren(children));
-      childrenArray = isReversed || reversed ? [...childrenArray].reverse() : childrenArray;
-
-      if (childrenArray) {
-        computedChildren = childrenArray.map((child: any, index: number) => {
-          if (typeof child === 'string' || typeof child === 'number') {
-            return child;
-          }
-
-          const attachedStyles: any = {};
-
-          if (index === 0) {
-            if (direction === 'column') {
-              attachedStyles.borderBottomLeftRadius = 0;
-              attachedStyles.borderBottomRightRadius = 0;
-            } else {
-              attachedStyles.borderTopRightRadius = 0;
-              attachedStyles.borderBottomRightRadius = 0;
-            }
-          } else if (index === childrenArray.length - 1) {
-            if (direction === 'column') {
-              attachedStyles.borderTopLeftRadius = 0;
-              attachedStyles.borderTopRightRadius = 0;
-            } else {
-              attachedStyles.borderTopLeftRadius = 0;
-              attachedStyles.borderBottomLeftRadius = 0;
-            }
-          } else {
-            attachedStyles.borderRadius = 0;
-          }
-
-          const childProps = {
-            isDisabled,
-            ...child.props,
-            style: {
-              ...(isAttached ? attachedStyles : {}),
-              ...child.props.style,
-            },
-          };
-
-          const clonedChild = React.cloneElement(child, {
-            ...childProps,
-          });
-
-          return (
-            <React.Fragment key={child.key ?? `spaced-child-${index.toString()}`}>
-              {clonedChild}
-            </React.Fragment>
-          );
-        });
-      }
-
-      const gapProp = isAttached ? { gap: 0 } : {};
-
-      if (computedChildren) {
-        return (
-          <BaseButtonGroup {...({ flexDirection, ...props, ref, ...gapProp } as T)}>
-            {computedChildren}
-          </BaseButtonGroup>
-        );
-      }
-      return null;
-    },
-  );

package/src/button/createButtonIcon.tsx

@@ -1,8 +0,0 @@
-import { forwardRef } from 'react';
-
-// TODO: Does this need data-attributes?
-
-export const createButtonIcon = <T,>(BaseButtonIcon: React.ComponentType<T>) =>
-  forwardRef((props: any, ref?: React.Ref<T>) => {
-    return <BaseButtonIcon {...props} ref={ref} />;
-  });

package/src/button/createButtonRoot.tsx

@@ -1,102 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo } from 'react';
-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 { dataAttributes } from '../utils/dataAttributes';
-import { ButtonProvider } from './context';
-import type { IButtonProps } from './types';
-
-export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        isDisabled,
-        isHovered: isHoveredProp,
-        isActive: isActiveProp,
-        isFocused: isFocusedProp,
-        isFocusVisible: isFocusVisibleProp,
-        ...props
-      }: Omit<IButtonProps, 'children'> & {
-        children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
-      },
-      ref?: React.Ref<T>,
-    ) => {
-      const { isFocused, focusProps } = useFocus();
-      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
-        isFocusVisible: boolean;
-        focusProps: typeof focusProps;
-      };
-      const { pressProps: pressableProps, isPressed: isActive } = usePress({
-        isDisabled,
-      });
-      const { isHovered, hoverProps } = useHover();
-      const contextValue = useMemo(() => {
-        return {
-          hover: isHoveredProp || isHovered,
-          focus: isFocusedProp || isFocused,
-          active: isActiveProp || isActive,
-          disabled: !!isDisabled,
-          focusVisible: isFocusVisibleProp || isFocusVisible,
-        };
-      }, [
-        isHovered,
-        isHoveredProp,
-        isFocused,
-        isFocusedProp,
-        isActive,
-        isActiveProp,
-        isDisabled,
-        isFocusVisible,
-        isFocusVisibleProp,
-      ]);
-
-      return (
-        <ButtonProvider value={contextValue}>
-          <BaseButton
-            ref={ref}
-            role={props?.role || 'button'}
-            {...dataAttributes({
-              hover: isHoveredProp || isHovered,
-              focus: isFocusedProp || isFocused,
-              active: isActiveProp || isActive,
-              disabled: !!isDisabled,
-              focusVisible: isFocusVisibleProp || isFocusVisible,
-            })}
-            disabled={isDisabled}
-            {...(props as T)}
-            onPressIn={composeEventHandlers(props?.onPressIn, pressableProps.onPressIn)}
-            onPressOut={composeEventHandlers(props?.onPressOut, pressableProps.onPressOut)}
-            onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
-            onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
-            onFocus={composeEventHandlers(
-              composeEventHandlers(
-                props?.onFocus as (...args: unknown[]) => unknown,
-                focusProps.onFocus,
-              ),
-              focusRingProps.onFocus,
-            )}
-            onBlur={composeEventHandlers(
-              composeEventHandlers(
-                props?.onBlur as (...args: unknown[]) => unknown,
-                focusProps.onBlur,
-              ),
-              focusRingProps.onBlur,
-            )}
-          >
-            {typeof children === 'function'
-              ? children({
-                  hover: isHoveredProp || isHovered,
-                  focus: isFocusedProp || isFocused,
-                  active: isActiveProp || isActive,
-                  disabled: !!isDisabled,
-                  focusVisible: isFocusVisibleProp || isFocusVisible,
-                })
-              : children}
-          </BaseButton>
-        </ButtonProvider>
-      );
-    },
-  );

package/src/button/createButtonSpinner.tsx

@@ -1,20 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useButtonContext } from './context';
-import type { IButtonSpinnerProps } from './types';
-
-export const createButtonSpinner = <T,>(BaseButtonSpinner: React.ComponentType<T>) =>
-  forwardRef<unknown, IButtonSpinnerProps>((props, ref) => {
-    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
-
-    return (
-      <BaseButtonSpinner
-        {...(props as T)}
-        tabIndex={0}
-        aria-label="loading"
-        ref={ref}
-        {...dataAttributes({ hover, focus, active, disabled, focusVisible })}
-      />
-    );
-  });

package/src/button/createButtonText.tsx

@@ -1,22 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useButtonContext } from './context';
-import type { IButtonTextProps } from './types';
-
-// TODO: Rename to ButtonLabel
-
-export const createButtonText = <T,>(BaseButtonText: React.ComponentType<T>) =>
-  forwardRef<unknown, IButtonTextProps>(({ children, ...props }, ref) => {
-    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
-
-    return (
-      <BaseButtonText
-        ref={ref}
-        {...(props as T)}
-        {...dataAttributes({ hover, focus, active, disabled, focusVisible })}
-      >
-        {children}
-      </BaseButtonText>
-    );
-  });

package/src/button/index.tsx

@@ -1,53 +0,0 @@
-import type React from 'react';
-import { createButtonGroup } from './createButtonGroup';
-import { createButtonIcon } from './createButtonIcon';
-import { createButtonRoot } from './createButtonRoot';
-import { createButtonSpinner } from './createButtonSpinner';
-import { createButtonText } from './createButtonText';
-import type { IButtonComponentType } from './types';
-
-export type { IButtonProps } from './types';
-export { useButtonContext } from './context';
-
-export function createButton<
-  ButtonProps,
-  TextProps,
-  GroupProps,
-  SpinnerProps,
-  IconProps,
-  ButtonRef = unknown,
-  TextRef = unknown,
->(BaseComponents: {
-  Root: React.ComponentType<ButtonProps>;
-  Text: React.ComponentType<TextProps>;
-  Group: React.ComponentType<GroupProps>;
-  Spinner: React.ComponentType<SpinnerProps>;
-  Icon: React.ComponentType<IconProps>;
-}) {
-  const Button = createButtonRoot(BaseComponents.Root);
-  const Text = createButtonText(BaseComponents.Text);
-  const Group = createButtonGroup(BaseComponents.Group);
-  const Spinner = createButtonSpinner(BaseComponents.Spinner);
-  const Icon = createButtonIcon(BaseComponents.Icon);
-
-  Button.displayName = 'ButtonPrimitive';
-  Text.displayName = 'ButtonPrimitive.Text';
-  Group.displayName = 'ButtonPrimitive.Group';
-  Spinner.displayName = 'ButtonPrimitive.Spinner';
-  Icon.displayName = 'ButtonPrimitive.Icon';
-
-  return Object.assign(Button, {
-    Text,
-    Group,
-    Spinner,
-    Icon,
-  }) as IButtonComponentType<
-    ButtonProps,
-    GroupProps,
-    SpinnerProps,
-    TextProps,
-    IconProps,
-    ButtonRef,
-    TextRef
-  >;
-}

package/src/checkbox/createCheckboxGroup.tsx

@@ -1,32 +0,0 @@
-import { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { useCheckboxGroup } from '@react-native-aria/checkbox';
-import { useCheckboxGroupState } from '@react-stately/checkbox';
-import { CheckboxGroupContext } from './context';
-import type { ICheckboxGroupProps } from './types';
-
-export const createCheckboxGroup = <T,>(BaseCheckboxGroup: React.ComponentType<T>) =>
-  forwardRef(({ children, ...props }: ICheckboxGroupProps, ref?: React.Ref<T>) => {
-    const state = useCheckboxGroupState({
-      ...props,
-      validationState: props.isInvalid ? 'invalid' : 'valid',
-    });
-
-    const { groupProps } = useCheckboxGroup(
-      {
-        ...props,
-        'aria-label': props['aria-label'],
-      },
-      state,
-    );
-
-    const formControlContext = useFormControlContext();
-
-    return (
-      <CheckboxGroupContext.Provider value={{ state: { ...formControlContext, ...state } }}>
-        <BaseCheckboxGroup {...groupProps} {...props} ref={ref}>
-          {children}
-        </BaseCheckboxGroup>
-      </CheckboxGroupContext.Provider>
-    );
-  });

package/src/checkbox/createCheckboxIcon.tsx

@@ -1,18 +0,0 @@
-import { forwardRef } from 'react';
-import { useCheckboxContext } from './context';
-import type { ICheckboxIconProps } from './types';
-
-export const createCheckboxIcon = <T,>(BaseCheckboxIcon: React.ComponentType<T>) =>
-  forwardRef<unknown, ICheckboxIconProps>(({ children, forceMount = false, ...props }, ref) => {
-    const { isChecked, isIndeterminate } = useCheckboxContext();
-
-    if (forceMount || isChecked || isIndeterminate) {
-      return (
-        <BaseCheckboxIcon {...(props as T)} ref={ref}>
-          {children}
-        </BaseCheckboxIcon>
-      );
-    }
-
-    return null;
-  });

package/src/checkbox/createCheckboxIndicator.tsx

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

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>
-    );
-  });