@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.71

package/lib/typescript/navigation/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+/**
+ * Structural mirror of the `image` arm of `NativeBottomTabIcon` from
+ * `@react-navigation/bottom-tabs/unstable`. Declared locally so
+ * `@cdx-ui/components` carries no runtime React Navigation dependency —
+ * the drift guards below fail the build if the upstream shape changes.
+ */
+export interface ForgeNativeBottomTabIcon {
+    type: 'image';
+    /** Metro-resolved asset (e.g. a static `require('./icon.png')`). */
+    source: ImageSourcePropType;
+    /**
+     * Render as a template image tinted with the tab bar's active/inactive
+     * tint color. iOS-only flag — Android always tints tab icons.
+     */
+    tinted?: boolean;
+}
+/**
+ * The value `forgeTabIcon()` returns — callable as `tabBarIcon` on **both**
+ * React Navigation bottom tab navigators. The intersection carries both call
+ * signatures; the platform-split implementation guarantees the matching one
+ * at runtime:
+ *
+ * - `createBottomTabNavigator` (web/JS) invokes it with
+ *   `{ focused, color, size }` and renders the returned element.
+ * - `createNativeBottomTabNavigator` (iOS/Android) invokes it with
+ *   `{ focused }` and receives a native icon descriptor.
+ */
+export type ForgeTabBarIcon = ((props: {
+    focused: boolean;
+    color: string;
+    size: number;
+}) => ReactElement) & ((props: {
+    focused: boolean;
+}) => ForgeNativeBottomTabIcon);
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/navigation/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,MAAM,EAAE,mBAAmB,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,EAAE;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,KAAK,YAAY,CAAC,GACjB,CAAC,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,KAAK,wBAAwB,CAAC,CAAC"}

package/lib/typescript/styles/primitives.d.ts

@@ -1,22 +1,53 @@
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export declare const COLOR_BG_PRIMARY = "bg-white";
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export declare const COLOR_BG_SUBTLE = "bg-slate-50";
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export declare const COLOR_BG_MUTED = "bg-slate-100";
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export declare const COLOR_BG_INVERSE = "bg-slate-900";
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export declare const COLOR_BORDER_STRONG = "border-slate-300";
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export declare const COLOR_BORDER_FOCUS = "border-slate-900";
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export declare const COLOR_BORDER_INVALID = "border-red-500";
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_MUTED = "text-slate-400";
+/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
 export declare const COLOR_TEXT_INVERSE = "text-white";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export declare const COLOR_TEXT_INVALID = "text-red-600";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export declare const COLOR_BRAND_HOVER = "bg-slate-800";
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export declare const COLOR_ACCENT_BORDER = "border-slate-900";
+/**
+ * @deprecated Use semantic token classes directly instead. Map each color key to its
+ * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
+ * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
+ * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
+ * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
+ * - `border` → `border-stroke-{color}` (--color-stroke-{color})
+ * - `text` → `text-content-{color}` (--color-content-{color})
+ * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
+ *
+ * See Button/styles.ts for a complete migration example.
+ */
 export declare const SEMANTIC_COLORS: {
     readonly action: {
         readonly bg: "bg-slate-900";
@@ -59,12 +90,19 @@ export declare const SEMANTIC_COLORS: {
         readonly ring: "ring-sky-400/50";
     };
 };
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
+/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
 export declare const RADIUS_SM = "rounded-lg";
+/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
 export declare const RADIUS_MD = "rounded-xl";
+/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
 export declare const RADIUS_FULL = "rounded-full";
+/** @deprecated Use `shadow-sm` directly instead */
 export declare const SHADOW_SM = "shadow-sm";
+/** @deprecated Use `shadow-md` directly instead */
 export declare const SHADOW_MD = "shadow-md";
+/** @deprecated */
 export declare const SIZE_SCALE: {
     readonly default: {
         readonly height: "h-10";

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAG1C,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,6IAA6I;AAC7I,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,qFAAqF;AACrF,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,iHAAiH;AACjH,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/lib/typescript/utils/positionToDataIcon.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Position hint accepted by icon/spinner-bearing styled slots
+ * (`Button.Icon`, `Button.Spinner`, `Chip.Icon`, etc.). Maps to a logical
+ * `data-icon` attribute that CVA targets for leading/trailing padding.
+ *
+ * `'leading'`  → `data-icon="inline-start"`
+ * `'trailing'` → `data-icon="inline-end"`
+ */
+export type IconSlotPosition = 'leading' | 'trailing';
+/**
+ * Returns the data-attribute spread props for the requested position, or
+ * `undefined` when no position is set (so the attribute is omitted entirely
+ * and baseline spacing applies).
+ *
+ * Spread the result onto the rendered element:
+ *
+ * ```tsx
+ * <Icon {...positionToDataIcon(position)} />
+ * ```
+ *
+ * Spacing rules live in CVA variant strings, targeting the attribute via
+ * logical-property utilities so RTL flips automatically:
+ *
+ * ```ts
+ * cva(['data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5'], { ... });
+ * ```
+ */
+export declare function positionToDataIcon(position?: IconSlotPosition): Record<string, string> | undefined;
+//# sourceMappingURL=positionToDataIcon.d.ts.map

package/lib/typescript/utils/positionToDataIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionToDataIcon.d.ts","sourceRoot":"","sources":["../../../src/utils/positionToDataIcon.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,CAAC,EAAE,gBAAgB,sCAG7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.71",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -16,10 +16,10 @@
     },
     "./styles.css": "./src/styles.css",
     "./metro": {
-      "types": "./lib/typescript/metro/withCdxMetroConfig.d.ts",
-      "require": "./lib/commonjs/metro/withCdxMetroConfig.js",
-      "import": "./lib/module/metro/withCdxMetroConfig.js",
-      "default": "./lib/commonjs/metro/withCdxMetroConfig.js"
+      "types": "./lib/typescript/metro/withForgeMetroConfig.d.ts",
+      "require": "./lib/commonjs/metro/withForgeMetroConfig.js",
+      "import": "./lib/module/metro/withForgeMetroConfig.js",
+      "default": "./lib/commonjs/metro/withForgeMetroConfig.js"
     }
   },
   "files": [
@@ -67,11 +67,13 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.7",
-    "@cdx-ui/icons": "0.0.1-beta.7",
-    "@cdx-ui/utils": "0.0.1-beta.7"
+    "@cdx-ui/primitives": "0.0.1-beta.71",
+    "@cdx-ui/utils": "0.0.1-beta.71",
+    "@cdx-ui/icons": "0.0.1-beta.71"
   },
   "devDependencies": {
+    "@react-navigation/bottom-tabs": "*",
+    "react-native-screens": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
     "react": "*",
@@ -96,6 +98,6 @@
   "scripts": {
     "build": "bob build",
     "lint": "eslint src/",
-    "test": "jest --config ../../jest.config.js"
+    "test": "jest --config ../../jest.config.js --selectProjects rntl axe"
   }
 }

package/src/components/AlertDialog/index.tsx

@@ -1,6 +1,6 @@
 import React, { 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';
@@ -45,16 +45,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 +75,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 +98,12 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Content: typeof Dialog.Content;
+  Popup: typeof Dialog.Popup;
   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 +112,12 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Content: Dialog.Content,
+  Popup: Dialog.Popup,
   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';
@@ -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 };