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

package/src/components/Avatar/index.tsx

@@ -1,7 +1,15 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, useEffect, useMemo, type ReactNode } from 'react';
 import { Image, Text, View, type ImageProps, type TextProps, type ViewProps } from 'react-native';
-import { createAvatar, type IAvatarImageProps, type IAvatarProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  AvatarRoot as AvatarRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useAvatarContext,
+  type IAvatarImageProps,
+  type IAvatarProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon as IconComponent, type IconProps } from '../Icon';
 import {
   type AvatarVariantProps,
@@ -14,17 +22,29 @@ import {
 
 const SCOPE = 'AVATAR';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useAvatarStyleContext = () => useStyleContext(SCOPE) as AvatarVariantProps;
 
-const AvatarPrimitive = createAvatar({
-  Root,
-  Image,
-  Text,
-  Icon: IconComponent,
-  Badge: View,
-});
+// =============================================================================
+// UTILITIES
+// =============================================================================
+
+function getInitials(name: string): string {
+  const trimmed = name.trim();
+  const words = trimmed.split(/\s+/);
+
+  if (words.length === 1 && trimmed.length <= 2) {
+    return trimmed.toUpperCase();
+  }
+
+  let result = '';
+  for (const word of words) {
+    if (word.length > 0) {
+      result += word.charAt(0);
+    }
+    if (result.length >= 2) break;
+  }
+  return result.toUpperCase();
+}
 
 // =============================================================================
 // AVATAR ROOT
@@ -39,16 +59,21 @@ const AvatarRoot = forwardRef<View, AvatarProps>(
   ({ size = 'md', className, children, style, ...props }, ref) => {
     const computedClassName = cn(avatarRootVariants({ size }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { size } }), [parent, size]);
+
     return (
-      <AvatarPrimitive
-        ref={ref as never}
-        className={computedClassName}
-        style={style}
-        context={{ size }}
-        {...props}
-      >
-        {children}
-      </AvatarPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <AvatarRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar' }))}
+        >
+          {children}
+        </AvatarRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -60,21 +85,52 @@ AvatarRoot.displayName = 'Avatar';
 // =============================================================================
 
 export interface AvatarImageProps extends Omit<ImageProps, 'source'>, IAvatarImageProps {
+  asChild?: boolean;
   className?: string;
 }
 
-const AvatarImage = forwardRef<Image, AvatarImageProps>(({ className, style, ...props }, ref) => {
-  const computedClassName = cn(avatarImageVariants(), className);
+const AvatarImage = forwardRef<Image, AvatarImageProps>(
+  ({ asChild, className, style, src, source, onLoad, onError, ...props }, ref) => {
+    const { imageError, setImageLoaded, setImageError } = useAvatarContext();
+    const computedClassName = cn(avatarImageVariants(), className);
 
-  return (
-    <AvatarPrimitive.Image
-      ref={ref as never}
-      className={computedClassName}
-      style={style}
-      {...props}
-    />
-  );
-});
+    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;
+    }
+
+    const Comp = asChild ? Slot : Image;
+
+    return (
+      <Comp
+        ref={ref}
+        source={resolvedSource}
+        className={computedClassName}
+        style={style}
+        onLoad={(e: unknown) => {
+          setImageLoaded(true);
+          if (onLoad) (onLoad as (e: unknown) => void)(e);
+        }}
+        onError={(e: unknown) => {
+          setImageError(true);
+          if (onError) (onError as (e: unknown) => void)(e);
+        }}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar-image' }))}
+      />
+    );
+  },
+);
 
 AvatarImage.displayName = 'Avatar.Image';
 
@@ -83,24 +139,32 @@ AvatarImage.displayName = 'Avatar.Image';
 // =============================================================================
 
 export interface AvatarTextProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const AvatarText = forwardRef<Text, AvatarTextProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { size } = useAvatarStyleContext();
+    const { imageLoaded, imageError } = useAvatarContext();
+    const visible = !imageLoaded || imageError;
     const computedClassName = cn(avatarTextVariants({ size }), className);
 
+    const text = typeof children === 'string' ? getInitials(children) : children;
+
+    const Comp = asChild ? Slot : Text;
+
     return (
-      <AvatarPrimitive.Text
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={computedClassName}
-        style={style}
+        style={[style, !visible && { opacity: 0 }]}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar-text' }))}
       >
-        {children}
-      </AvatarPrimitive.Text>
+        {text}
+      </Comp>
     );
   },
 );
@@ -112,14 +176,35 @@ AvatarText.displayName = 'Avatar.Text';
 // =============================================================================
 
 export interface AvatarIconProps extends Omit<IconProps, 'children'> {
+  asChild?: boolean;
   className?: string;
 }
 
-const AvatarIcon = ({ className, style, ...props }: AvatarIconProps) => {
+const AvatarIcon = ({ asChild, className, style, ...props }: AvatarIconProps) => {
   const { size } = useAvatarStyleContext();
+  const { imageLoaded, imageError } = useAvatarContext();
+  const visible = !imageLoaded || imageError;
   const computedClassName = cn(avatarIconVariants({ size }), className);
 
-  return <AvatarPrimitive.Icon className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={[style, !visible && { opacity: 0 }]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar-icon' }))}
+      />
+    );
+  }
+
+  return (
+    <IconComponent
+      className={computedClassName}
+      style={[style, !visible && { opacity: 0 }]}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar-icon' }))}
+    />
+  );
 };
 
 AvatarIcon.displayName = 'Avatar.Icon';
@@ -129,24 +214,27 @@ AvatarIcon.displayName = 'Avatar.Icon';
 // =============================================================================
 
 export interface AvatarBadgeProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { size } = useAvatarStyleContext();
     const computedClassName = cn(avatarBadgeVariants({ size }), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <AvatarPrimitive.Badge
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={computedClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'avatar-badge' }))}
       >
         {children}
-      </AvatarPrimitive.Badge>
+      </Comp>
     );
   },
 );
@@ -170,3 +258,5 @@ export const Avatar = Object.assign(AvatarRoot, {
   Icon: AvatarIcon,
   Badge: AvatarBadge,
 }) as AvatarCompoundComponent;
+
+export type { AvatarVariantProps };

package/src/components/Button/index.tsx

@@ -1,7 +1,6 @@
-import { forwardRef, useEffect, type ReactElement, type ReactNode } from 'react';
+import React, { forwardRef, useEffect, useMemo, type ReactElement, type ReactNode } from 'react';
 import {
   ActivityIndicator,
-  Pressable,
   Text,
   View,
   type ActivityIndicatorProps,
@@ -9,33 +8,37 @@ import {
   type ViewProps,
   type TextProps,
 } from 'react-native';
-import { createButton, type IButtonProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  ButtonRoot as ButtonRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IButtonProps,
+} from '@cdx-ui/primitives';
+import {
+  cn,
+  flattenChildren,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type ButtonGroupVariantProps,
   type ButtonVariantProps,
   buttonGroupVariants,
   buttonIconVariants,
   buttonRootVariants,
+  buttonSpinnerColorVariants,
   buttonSpinnerVariants,
   buttonTextVariants,
 } from './styles';
 
 const SCOPE = 'BUTTON';
 
-const Root = withStyleContext(Pressable, SCOPE);
-
 const useButtonStyleContext = () => useStyleContext(SCOPE) as ButtonVariantProps;
 
-const ButtonPrimitive = createButton({
-  Root,
-  Text,
-  Group: View,
-  Spinner: ActivityIndicator,
-  Icon: View,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
@@ -98,16 +101,24 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
       className,
     );
 
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, color, size, fullWidth } }),
+      [parent, variant, color, size, fullWidth],
+    );
+
     return (
-      <ButtonPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ variant, color, size, fullWidth }}
-        {...props}
-      >
-        {children}
-      </ButtonPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <ButtonRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'button' }))}
+        >
+          {children}
+        </ButtonRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -115,92 +126,253 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
 ButtonRoot.displayName = 'Button';
 
 // =============================================================================
-// STYLED TEXT COMPONENT
+// STYLED LABEL COMPONENT
 // =============================================================================
 
-export interface ButtonTextProps extends TextProps {
+export interface ButtonLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const ButtonLabel = forwardRef<Text, ButtonTextProps>(
-  ({ className, children, style, ...props }, ref) => {
+const ButtonLabel = forwardRef<Text, ButtonLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { variant, color, size } = useButtonStyleContext();
-
     const computedClassName = cn(buttonTextVariants({ variant, color, size }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <ButtonPrimitive.Text ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'button-label' }))}
+      >
         {children}
-      </ButtonPrimitive.Text>
+      </Comp>
     );
   },
 );
 
 ButtonLabel.displayName = 'Button.Label';
 
+// =============================================================================
+// STYLED GROUP COMPONENT
+// =============================================================================
+
 // TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
   className?: string;
   children: ReactElement | ReactElement[];
   flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
   isDisabled?: boolean;
   isAttached?: boolean;
   reversed?: boolean;
+  isReversed?: boolean;
 }
 
 const ButtonGroup = forwardRef<View, ButtonGroupProps>(
-  ({ className, children, style, flexDirection = 'row', isAttached, ...props }, ref) => {
+  (
+    {
+      asChild,
+      className,
+      children,
+      style,
+      flexDirection = 'row',
+      isAttached,
+      isDisabled,
+      isReversed,
+      reversed,
+      ...props
+    },
+    ref,
+  ) => {
+    const direction = flexDirection.includes('reverse')
+      ? flexDirection === 'column-reverse'
+        ? 'column'
+        : 'row'
+      : flexDirection;
+
+    let childrenArray = React.Children.toArray(flattenChildren(children));
+    childrenArray = isReversed || reversed ? [...childrenArray].reverse() : childrenArray;
+
+    const computedChildren = childrenArray.map((child: any, index: number) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return child;
+      }
+
+      const attachedStyles: Record<string, number> = {};
+
+      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,
+        },
+      };
+
+      return (
+        <React.Fragment key={child.key ?? `spaced-child-${index.toString()}`}>
+          {React.cloneElement(child, childProps)}
+        </React.Fragment>
+      );
+    });
+
     const groupClassName = cn(
       buttonGroupVariants({ flexDirection, isAttached: !!isAttached }),
       className,
     );
+    const Comp = asChild ? Slot : View;
+    const gapProp = isAttached ? { gap: 0 } : {};
 
     return (
-      <ButtonPrimitive.Group
+      <Comp
         ref={ref}
         className={groupClassName}
-        style={[{ flexDirection }, style]}
-        isAttached={isAttached}
+        style={[{ flexDirection }, style, gapProp]}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'button-group' }))}
       >
-        {children}
-      </ButtonPrimitive.Group>
+        {computedChildren}
+      </Comp>
     );
   },
 );
 
 ButtonGroup.displayName = 'Button.Group';
 
-export interface ButtonIconProps extends Omit<IconProps, 'children'> {}
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
 
-const ButtonIcon = ({ className, style, as, ...props }: ButtonIconProps) => {
-  const { variant, color, size } = useButtonStyleContext();
+export interface ButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
+}
 
+const ButtonIcon = ({ asChild, className, style, as, position, ...props }: ButtonIconProps) => {
+  const { variant, color, size } = useButtonStyleContext();
   const computedClassName = cn(buttonIconVariants({ variant, color, size }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'button-icon' }),
+          positionToDataIcon(position),
+        )}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(
+        props,
+        dataAttributes({ slot: 'button-icon' }),
+        positionToDataIcon(position),
+      )}
+    />
+  );
 };
 
 ButtonIcon.displayName = 'Button.Icon';
 
+// =============================================================================
+// STYLED SPINNER COMPONENT
+// =============================================================================
+
 export interface ButtonSpinnerProps extends ActivityIndicatorProps {
+  asChild?: boolean;
   className?: string;
   colorClassName?: string;
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
 }
 
 const ButtonSpinner = forwardRef<ActivityIndicator, ButtonSpinnerProps>(
-  ({ className, colorClassName, style, ...props }, ref) => {
+  (
+    {
+      asChild,
+      className,
+      colorClassName,
+      style,
+      position,
+      accessibilityLabel = 'Loading',
+      ...props
+    },
+    ref,
+  ) => {
     const { variant, color } = useButtonStyleContext();
-    const computedColorClassName = cn(buttonSpinnerVariants({ variant, color }), colorClassName);
+    const computedClassName = cn(buttonSpinnerVariants(), className);
+    const computedColorClassName = cn(
+      buttonSpinnerColorVariants({ variant, color }),
+      colorClassName,
+    );
+    const Comp = asChild ? Slot : ActivityIndicator;
 
     return (
-      <ButtonPrimitive.Spinner
+      <Comp
         ref={ref}
-        className={className}
+        className={computedClassName}
         colorClassName={computedColorClassName}
         style={style}
+        accessibilityLabel={accessibilityLabel}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'button-spinner' }),
+          positionToDataIcon(position),
+        )}
       />
     );
   },