@cdx-ui/components 0.0.1-beta.14 → 0.0.1-beta.140

package/src/components/AlertDialog/index.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
-import { useDialog } from '@cdx-ui/primitives';
+import { Slot, useDialog } from '@cdx-ui/primitives';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { Button, type ButtonProps } from '../Button';
-import { Dialog, type DialogRootProps } from '../Dialog';
+import { Dialog, type DialogRootProps, type DialogPopupProps } from '../Dialog';
 
 // =============================================================================
 // ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
@@ -35,6 +35,19 @@ const AlertDialogRoot = forwardRef<View, AlertDialogRootProps>(
 );
 AlertDialogRoot.displayName = 'AlertDialog';
 
+// =============================================================================
+// ALERT DIALOG POPUP (swipe disabled by default)
+// =============================================================================
+
+export interface AlertDialogPopupProps extends DialogPopupProps {}
+
+const AlertDialogPopup = forwardRef<View, AlertDialogPopupProps>(
+  ({ isSwipeable = false, ...props }, ref) => (
+    <Dialog.Popup ref={ref} isSwipeable={isSwipeable} {...props} />
+  ),
+);
+AlertDialogPopup.displayName = 'AlertDialog.Popup';
+
 // =============================================================================
 // ALERT DIALOG ACTION
 // =============================================================================
@@ -45,16 +58,16 @@ export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant'> {
 
 const AlertDialogAction = forwardRef<View, AlertDialogActionProps>(
   ({ asChild = false, children, color = 'action', className, ...props }, ref) => {
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children as React.ReactElement<any>, {
-        ref,
-        className,
-        ...props,
-      });
+    if (asChild) {
+      return (
+        <Slot ref={ref} className={className} {...props}>
+          {children}
+        </Slot>
+      );
     }
 
     return (
-      <Button ref={ref} variant="strong" color={color} className={className} {...props}>
+      <Button ref={ref} variant="solid" color={color} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );
@@ -75,17 +88,16 @@ const AlertDialogCancel = forwardRef<View, AlertDialogCancelProps>(
     const { onOpenChange } = useDialog();
     const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
 
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children as React.ReactElement<any>, {
-        ref,
-        onPress: handlePress,
-        className,
-        ...props,
-      });
+    if (asChild) {
+      return (
+        <Slot ref={ref} onPress={handlePress} className={className} {...props}>
+          {children}
+        </Slot>
+      );
     }
 
     return (
-      <Button ref={ref} variant="outline" onPress={handlePress} className={className} {...props}>
+      <Button ref={ref} variant="ghost" onPress={handlePress} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );
@@ -99,11 +111,12 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Content: typeof Dialog.Content;
+  Popup: typeof AlertDialogPopup;
   Header: typeof Dialog.Header;
   Title: typeof Dialog.Title;
   Description: typeof Dialog.Description;
-  Body: typeof Dialog.Body;
+  Content: typeof Dialog.Content;
+  Text: typeof Dialog.Text;
   Footer: typeof Dialog.Footer;
   Close: typeof Dialog.Close;
   Action: typeof AlertDialogAction;
@@ -112,11 +125,12 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Content: Dialog.Content,
+  Popup: AlertDialogPopup,
   Header: Dialog.Header,
   Title: Dialog.Title,
   Description: Dialog.Description,
-  Body: Dialog.Body,
+  Content: Dialog.Content,
+  Text: Dialog.Text,
   Footer: Dialog.Footer,
   Close: Dialog.Close,
   Action: AlertDialogAction,

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';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // ── 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';