@cdx-ui/primitives 0.0.1-alpha.2 → 0.0.1-alpha.21

package/src/avatar/createAvatarBadge.tsx

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

package/src/avatar/createAvatarIcon.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useAvatarContext } from './context';
+import type { IAvatarIconProps } from './types';
+
+export const createAvatarIcon = <T,>(BaseIcon: React.ComponentType<T>) =>
+  forwardRef<unknown, IAvatarIconProps>(({ children, style, ...props }, ref) => {
+    const { imageLoaded, imageError } = useAvatarContext();
+    const visible = !imageLoaded || imageError;
+
+    return (
+      <BaseIcon ref={ref} style={[style, !visible && { opacity: 0 }]} {...(props as T)}>
+        {children}
+      </BaseIcon>
+    );
+  });

package/src/avatar/createAvatarImage.tsx

@@ -0,0 +1,40 @@
+import type React from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
+import { useAvatarContext } from './context';
+import type { IAvatarImageProps } from './types';
+
+export const createAvatarImage = <T,>(BaseImage: React.ComponentType<T>) =>
+  forwardRef<unknown, IAvatarImageProps>(({ src, source, onLoad, onError, ...props }, ref) => {
+    const { imageError, setImageLoaded, setImageError } = useAvatarContext();
+
+    const resolvedSource = useMemo(() => (src ? { uri: src } : source), [src, source]);
+
+    useEffect(() => {
+      if (!resolvedSource) {
+        setImageError(true);
+      } else {
+        setImageError(false);
+        setImageLoaded(false);
+      }
+    }, [resolvedSource, setImageError, setImageLoaded]);
+
+    if (!resolvedSource || imageError) {
+      return null;
+    }
+
+    return (
+      <BaseImage
+        ref={ref}
+        source={resolvedSource}
+        onLoad={(e: unknown) => {
+          setImageLoaded(true);
+          (onLoad as (e: unknown) => void)?.(e);
+        }}
+        onError={(e: unknown) => {
+          setImageError(true);
+          (onError as (e: unknown) => void)?.(e);
+        }}
+        {...(props as T)}
+      />
+    );
+  });

package/src/avatar/createAvatarRoot.tsx

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

@@ -0,0 +1,30 @@
+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/avatar/index.ts

@@ -0,0 +1,43 @@
+import type React from 'react';
+import { createAvatarBadge } from './createAvatarBadge';
+import { createAvatarIcon } from './createAvatarIcon';
+import { createAvatarText } from './createAvatarText';
+import { createAvatarImage } from './createAvatarImage';
+import { createAvatarRoot } from './createAvatarRoot';
+import type { IAvatarComponentType } from './types';
+
+export type {
+  IAvatarBadgeProps,
+  IAvatarComponentType,
+  IAvatarIconProps,
+  IAvatarTextProps,
+  IAvatarImageProps,
+  IAvatarProps,
+} from './types';
+
+export function createAvatar<Root, Image, Text, Icon, Badge>(BaseComponents: {
+  Root: React.ComponentType<Root>;
+  Image: React.ComponentType<Image>;
+  Text: React.ComponentType<Text>;
+  Icon: React.ComponentType<Icon>;
+  Badge: React.ComponentType<Badge>;
+}) {
+  const Avatar = createAvatarRoot(BaseComponents.Root);
+  const AvatarImage = createAvatarImage(BaseComponents.Image);
+  const Text = createAvatarText(BaseComponents.Text);
+  const AvatarIcon = createAvatarIcon(BaseComponents.Icon);
+  const Badge = createAvatarBadge(BaseComponents.Badge);
+
+  Avatar.displayName = 'AvatarPrimitive';
+  AvatarImage.displayName = 'AvatarPrimitive.Image';
+  Text.displayName = 'AvatarPrimitive.Text';
+  AvatarIcon.displayName = 'AvatarPrimitive.Icon';
+  Badge.displayName = 'AvatarPrimitive.Badge';
+
+  return Object.assign(Avatar, {
+    Image: AvatarImage,
+    Text,
+    Icon: AvatarIcon,
+    Badge,
+  }) as unknown as IAvatarComponentType<Root, Image, Text, Icon, Badge>;
+}

package/src/avatar/types.ts

@@ -0,0 +1,77 @@
+import type { ImageProps, TextProps, ViewProps } from 'react-native';
+
+// =============================================================================
+// AVATAR ROOT
+// =============================================================================
+
+export interface IAvatarProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR IMAGE
+// =============================================================================
+
+export interface IAvatarImageProps extends Omit<ImageProps, 'source'> {
+  /** Image source — URI string or RN ImageSourcePropType */
+  src?: string;
+  source?: ImageProps['source'];
+  alt?: string;
+}
+
+// =============================================================================
+// AVATAR FALLBACK TEXT
+// =============================================================================
+
+export interface IAvatarTextProps extends TextProps {
+  /** Full name — initials will be derived automatically */
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR ICON (fallback icon — hidden when image loads)
+// =============================================================================
+
+export interface IAvatarIconProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR BADGE
+// =============================================================================
+
+export interface IAvatarBadgeProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// CONTEXT
+// =============================================================================
+
+export interface IAvatarContextValue {
+  imageLoaded: boolean;
+  imageError: boolean;
+  setImageLoaded: (loaded: boolean) => void;
+  setImageError: (error: boolean) => void;
+}
+
+// =============================================================================
+// COMPOUND COMPONENT TYPE
+// =============================================================================
+
+export type IAvatarComponentType<Root, Image, Text, Icon, Badge> = React.ForwardRefExoticComponent<
+  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IAvatarProps
+> & {
+  Image: React.ForwardRefExoticComponent<
+    React.RefAttributes<Image> & React.PropsWithoutRef<Image> & IAvatarImageProps
+  >;
+  Text: React.ForwardRefExoticComponent<
+    React.RefAttributes<Text> & React.PropsWithoutRef<Text> & IAvatarTextProps
+  >;
+  Icon: React.ForwardRefExoticComponent<
+    React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & IAvatarIconProps
+  >;
+  Badge: React.ForwardRefExoticComponent<
+    React.RefAttributes<Badge> & React.PropsWithoutRef<Badge> & IAvatarBadgeProps
+  >;
+};

package/src/button/context.tsx

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

package/src/button/createButtonRoot.tsx

@@ -3,9 +3,10 @@ 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, InteractionState } from './types';
+import type { IButtonProps } from './types';
 
 export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
   forwardRef(
@@ -37,7 +38,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
           hover: isHoveredProp || isHovered,
           focus: isFocusedProp || isFocused,
           active: isActiveProp || isActive,
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           focusVisible: isFocusVisibleProp || isFocusVisible,
         };
       }, [
@@ -61,7 +62,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
               hover: isHoveredProp || isHovered,
               focus: isFocusedProp || isFocused,
               active: isActiveProp || isActive,
-              disabled: isDisabled,
+              disabled: !!isDisabled,
               focusVisible: isFocusVisibleProp || isFocusVisible,
             })}
             disabled={isDisabled}
@@ -90,7 +91,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
                   hover: isHoveredProp || isHovered,
                   focus: isFocusedProp || isFocused,
                   active: isActiveProp || isActive,
-                  disabled: isDisabled,
+                  disabled: !!isDisabled,
                   focusVisible: isFocusVisibleProp || isFocusVisible,
                 })
               : children}

package/src/button/index.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { createButtonRoot } from './createButtonRoot';
 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';
@@ -16,32 +16,31 @@ export function createButton<
   IconProps,
   ButtonRef = unknown,
   TextRef = unknown,
->({
-  Root,
-  Text,
-  Group,
-  Spinner,
-  Icon,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<ButtonProps>;
   Text: React.ComponentType<TextProps>;
   Group: React.ComponentType<GroupProps>;
   Spinner: React.ComponentType<SpinnerProps>;
   Icon: React.ComponentType<IconProps>;
 }) {
-  const Button = createButtonRoot(Root) as any;
-  Button.Text = createButtonText(Text);
-  Button.Group = createButtonGroup(Group);
-  Button.Spinner = createButtonSpinner(Spinner);
-  Button.Icon = createButtonIcon(Icon);
+  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 = 'Button';
-  Button.Text.displayName = 'Button.Text';
-  Button.Group.displayName = 'Button.Group';
-  Button.Spinner.displayName = 'Button.Spinner';
-  Button.Icon.displayName = 'Button.Icon';
+  Button.displayName = 'ButtonPrimitive';
+  Text.displayName = 'ButtonPrimitive.Text';
+  Group.displayName = 'ButtonPrimitive.Group';
+  Spinner.displayName = 'ButtonPrimitive.Spinner';
+  Icon.displayName = 'ButtonPrimitive.Icon';
 
-  return Button as IButtonComponentType<
+  return Object.assign(Button, {
+    Text,
+    Group,
+    Spinner,
+    Icon,
+  }) as IButtonComponentType<
     ButtonProps,
     GroupProps,
     SpinnerProps,

package/src/button/types.ts

@@ -1,14 +1,6 @@
 import type { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
-export interface InteractionState {
-  hover: boolean;
-  focus: boolean;
-  active: boolean;
-  disabled?: boolean;
-  focusVisible: boolean;
-}
-
 export interface InterfaceButtonProps extends PressableProps {
   /**
    * If true, the button will be in hovered state.

package/src/checkbox/context.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ICheckboxContextValue } from './types';
+
+export const [CheckboxProvider, useCheckboxContext] =
+  createContext<ICheckboxContextValue>('CheckboxContext');
+
+interface ICheckboxGroupState {
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  isSelected: (value: string) => boolean;
+  addValue: (value: string) => void;
+  removeValue: (value: string) => void;
+}
+
+export const CheckboxGroupContext = React.createContext<{
+  state: ICheckboxGroupState;
+} | null>(null);

package/src/checkbox/createCheckboxGroup.tsx

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

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

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

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