@cdx-ui/components 0.0.1-beta.11 → 0.0.1-beta.110

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
@@ -36,19 +56,24 @@ export interface AvatarProps extends ViewProps, IAvatarProps, AvatarVariantProps
 }
 
 const AvatarRoot = forwardRef<View, AvatarProps>(
-  ({ size = 'lg', className, children, style, ...props }, ref) => {
+  ({ 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';
@@ -128,25 +213,36 @@ AvatarIcon.displayName = 'Avatar.Icon';
 // AVATAR BADGE
 // =============================================================================
 
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 export interface AvatarBadgeProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 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 +266,5 @@ export const Avatar = Object.assign(AvatarRoot, {
   Icon: AvatarIcon,
   Badge: AvatarBadge,
 }) as AvatarCompoundComponent;
+
+export type { AvatarVariantProps };

package/src/components/Avatar/styles.ts

@@ -1,22 +1,27 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
 
 // ── Root ─────────────────────────────────────────────────
 
 export const avatarRootVariants = cva(
-  [RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED],
+  [
+    'rounded-[var(--border-radius-round)]',
+    'relative items-center justify-center',
+    'bg-surface-tertiary',
+  ],
   {
     variants: {
       size: {
-        sm: 'w-8 h-8',
-        md: 'w-10 h-10',
-        lg: 'w-12 h-12',
-        xl: 'w-16 h-16',
-        '2xl': 'w-20 h-20',
+        '2xs': 'w-3 h-3',
+        xs: 'w-[18px] h-[18px]',
+        sm: 'w-6 h-6',
+        md: 'w-8 h-8',
+        lg: 'w-10 h-10',
+        xl: 'w-12 h-12',
+        '2xl': 'w-14 h-14',
       },
     },
     defaultVariants: {
-      size: 'lg',
+      size: 'md',
     },
   },
 );
@@ -25,59 +30,69 @@ export const avatarRootVariants = cva(
 
 export const avatarImageVariants = cva([
   'absolute top-0 left-0 w-full h-full',
-  RADIUS_FULL,
+  'rounded-[var(--border-radius-round)]',
   'overflow-hidden',
+  'border border-stroke-secondary',
 ]);
 
 // ── Text ─────────────────────────────────────────────────
 
-export const avatarTextVariants = cva([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
   variants: {
     size: {
+      '2xs': 'text-[6px]',
+      xs: 'text-[9px]',
       sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-[28px]',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+export const avatarIconVariants = cva(['text-content-primary'], {
   variants: {
     size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-      xl: 'size-8',
-      '2xl': 'size-10',
+      '2xs': 'size-1.5',
+      xs: 'size-[9px]',
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+      '2xl': 'size-7',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Badge ────────────────────────────────────────────────
 
-export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
-  variants: {
-    size: {
-      sm: 'w-2.5 h-2.5 bottom-0 right-0',
-      md: 'w-3 h-3 bottom-0 right-0',
-      lg: 'w-3.5 h-3.5 bottom-0 right-0',
-      xl: 'w-4 h-4 bottom-0.5 right-0.5',
-      '2xl': 'w-5 h-5 bottom-0.5 right-0.5',
+export const avatarBadgeVariants = cva(
+  ['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'],
+  {
+    variants: {
+      size: {
+        '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
+        xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
+        sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
+        md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
+        lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
+        xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
+        '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
     },
   },
-  defaultVariants: {
-    size: 'lg',
-  },
-});
+);
 
 export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;

package/src/components/Badge/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import {
+  badgeIconVariants,
+  badgeIndicatorVariants,
+  badgeLabelVariants,
+  badgeRootVariants,
+  type BadgeVariantProps,
+} from './styles';
+
+const INDICATOR_STYLE = { pointerEvents: 'none' as const };
+
+export interface BadgeProps extends ViewProps, BadgeVariantProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  icon?: ForgeIcon;
+  className?: string;
+}
+
+const Badge = forwardRef<View, BadgeProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      color = 'action',
+      placement = 'top-end',
+      overlap = 'rectangular',
+      label,
+      icon: IconComponent,
+      accessibilityLabel,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDecorative = variant === 'dot' || !accessibilityLabel;
+
+    const renderContent = () => {
+      if (variant === 'dot') return null;
+      if (IconComponent) {
+        return <Icon as={IconComponent} className={badgeIconVariants({ color })} />;
+      }
+      if (typeof label === 'string' || typeof label === 'number') {
+        return (
+          <Text
+            className={badgeLabelVariants({ color })}
+            {...dataAttributes({ slot: 'badge-label' })}
+          >
+            {label}
+          </Text>
+        );
+      }
+      return label ?? null;
+    };
+
+    const hasChildren = children != null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn(badgeRootVariants({ standalone: !hasChildren }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'badge' }))}
+      >
+        {children}
+        <View
+          className={cn(badgeIndicatorVariants({ variant, color, placement, overlap }))}
+          style={INDICATOR_STYLE}
+          accessible={!isDecorative}
+          accessibilityLabel={accessibilityLabel}
+          aria-hidden={isDecorative}
+          accessibilityElementsHidden={isDecorative}
+          importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'}
+          {...dataAttributes({ slot: 'badge-indicator' })}
+        >
+          {renderContent()}
+        </View>
+      </View>
+    );
+  },
+);
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeVariantProps } from './styles';

package/src/components/Badge/styles.ts

@@ -0,0 +1,136 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+export const badgeRootVariants = cva(['relative self-start'], {
+  variants: {
+    standalone: {
+      true: 'inline-flex',
+      false: '',
+    },
+  },
+  defaultVariants: { standalone: false },
+});
+
+export const badgeIndicatorVariants = cva(
+  [
+    'absolute items-center justify-center overflow-hidden',
+    'rounded-[var(--border-radius-round)]',
+    'border border-surface-primary',
+    TRANSITION_COLORS,
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'h-5 min-w-5 px-1',
+        dot: 'h-2 w-2 min-w-0 px-0',
+      },
+      color: {
+        action: 'bg-surface-action-strong',
+        danger: 'bg-surface-danger-strong',
+        warning: 'bg-surface-warning-strong',
+        success: 'bg-surface-success-strong',
+        info: 'bg-surface-info-strong',
+      },
+      placement: {
+        'top-start': 'top-0 ltr:left-0 rtl:right-0',
+        'top-end': 'top-0 ltr:right-0 rtl:left-0',
+        'bottom-start': 'bottom-0 ltr:left-0 rtl:right-0',
+        'bottom-end': 'bottom-0 ltr:right-0 rtl:left-0',
+      },
+      overlap: { circular: '', rectangular: '' },
+    },
+    compoundVariants: [
+      // Positioning model (mirrors MUI Badge): the indicator is always centered on an
+      // anchor point via a 50% self-translate, so it straddles that point regardless of
+      // its own size (dot vs default). `overlap` only moves the anchor point.
+      //
+      // Translate uses arbitrary `[50%]` (not the `1/2` fraction utility) because the
+      // fraction sugar is web-only in Uniwind — Avatar's badge uses `[N%]` translate on
+      // native, Toast gates `-translate-x-1/2` behind `web:`.
+      //
+      // rectangular: anchor at the host's true bounding-box corner.
+      {
+        placement: 'top-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+      // circular: anchor inset 14% from each edge — the ~45° point of the inscribed
+      // circle ((1 - √2/2)/2 ≈ 14.6%, rounded to 14% per MUI) — so the indicator sits
+      // on the host's visible arc. The inset is host-relative (percent of the wrapper,
+      // which hugs the host), keeping it independent of the indicator's own size.
+      {
+        placement: 'top-end',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      color: 'action',
+      placement: 'top-end',
+      overlap: 'rectangular',
+    },
+  },
+);
+
+export const badgeLabelVariants = cva(['body-sm font-medium text-center'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export const badgeIconVariants = cva(['size-3'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export type BadgeVariantProps = VariantProps<typeof badgeIndicatorVariants>;