@xaui/native 0.9.1-alpha.32 → 0.9.1-alpha.33

package/dist/chunk-ZA6RT3XQ.js

@@ -0,0 +1,381 @@
+import { IconContext } from "./chunk-WJPQARJ5.js";
+import { Slot, childrenToString, createSlotContext } from "./chunk-YXPYOOHU.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useStyleProps } from "./chunk-MEYCZS32.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+
+// src/components/avatar/avatar-fallback.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+
+// src/components/avatar/avatar-initials.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+
+// src/components/avatar/avatar.context.ts
+var [AvatarProvider, useAvatar] = createSlotContext("Avatar");
+
+// src/components/avatar/avatar-initials.tsx
+import { jsx } from "react/jsx-runtime";
+var AvatarInitials = forwardRef(function AvatarInitials2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    initialsStyle
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx(Text, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no",
+    numberOfLines: 1,
+    ...rest,
+    style: [initialsStyle, styleProps, style],
+    children
+  });
+});
+AvatarInitials.displayName = "XAUI.Avatar.Initials";
+
+// src/components/avatar/avatar-fallback.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AvatarFallback = forwardRef2(function AvatarFallback2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    fallbackStyle,
+    icon
+  } = useAvatar();
+  const [styleProps, rest] = useStyleProps(props);
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx2(AvatarInitials, {
+    children: text
+  }) : children;
+  return /* @__PURE__ */jsx2(View, {
+    ref,
+    style: [fallbackStyle, styleProps, style],
+    ...rest,
+    children: /* @__PURE__ */jsx2(IconContext.Provider, {
+      value: icon,
+      children: content
+    })
+  });
+});
+AvatarFallback.displayName = "XAUI.Avatar.Fallback";
+
+// src/components/avatar/avatar-image.tsx
+import { forwardRef as forwardRef3, useCallback } from "react";
+import { Image } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+
+// src/components/avatar/avatar.style.ts
+import { StyleSheet } from "react-native";
+var avatarSheet = StyleSheet.create({
+  image: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0
+  }
+});
+
+// src/components/avatar/avatar-image.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FADE_DURATION = 200;
+var AvatarImage = forwardRef3(function AvatarImage2({
+  animation = true,
+  style,
+  ...props
+}, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const frameStyle = [avatarSheet.image, styleProps, style];
+  if (!animation) return /* @__PURE__ */jsx3(Image, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+  return /* @__PURE__ */jsx3(FadingImage, {
+    ref,
+    ...rest,
+    style: frameStyle
+  });
+});
+AvatarImage.displayName = "XAUI.Avatar.Image";
+const _worklet_9106607863565_init_data = {
+  code: "function chunkZA6RT3XQJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZA6RT3XQ.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkZA6RT3XQJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZA6RT3XQ.js\"],\"mappings\":\"AAoG2C,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE3C,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+var FadingImage = forwardRef3(function FadingImage2({
+  onLoad,
+  style,
+  ...props
+}, ref) {
+  const opacity = useSharedValue(0);
+  const handleLoad = useCallback(event => {
+    opacity.value = withTiming(1, {
+      duration: FADE_DURATION
+    });
+    onLoad?.(event);
+  }, [opacity, onLoad]);
+  const animatedStyle = useAnimatedStyle(function chunkZA6RT3XQJs1Factory({
+    _worklet_9106607863565_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkZA6RT3XQJs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunkZA6RT3XQJs1.__closure = {
+      opacity
+    };
+    chunkZA6RT3XQJs1.__workletHash = 9106607863565;
+    chunkZA6RT3XQJs1.__pluginVersion = "0.7.4";
+    chunkZA6RT3XQJs1.__initData = _worklet_9106607863565_init_data;
+    chunkZA6RT3XQJs1.__stackDetails = _e;
+    return chunkZA6RT3XQJs1;
+  }({
+    _worklet_9106607863565_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */jsx3(Animated.Image, {
+    ref,
+    ...props,
+    onLoad: handleLoad,
+    style: [style, animatedStyle]
+  });
+});
+
+// src/components/avatar/avatar.tsx
+import { forwardRef as forwardRef4, useMemo } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/avatar/avatar.recipe.ts
+var SLOTS = ["root", "fallback", "initials", "icon"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "accent",
+    fg: "accentForeground"
+  },
+  secondary: {
+    bg: "accentSoft",
+    fg: "accentSoftForeground"
+  },
+  default: {
+    bg: "default",
+    fg: "defaultForeground"
+  },
+  tertiary: {
+    border: "border",
+    fg: "foreground"
+  },
+  ghost: {
+    fg: "foreground"
+  },
+  success: {
+    bg: "success",
+    fg: "successForeground"
+  },
+  "success-soft": {
+    bg: "successSoft",
+    fg: "successSoftForeground"
+  },
+  warning: {
+    bg: "warning",
+    fg: "warningForeground"
+  },
+  "warning-soft": {
+    bg: "warningSoft",
+    fg: "warningSoftForeground"
+  },
+  danger: {
+    bg: "danger",
+    fg: "dangerForeground"
+  },
+  "danger-soft": {
+    bg: "dangerSoft",
+    fg: "dangerSoftForeground"
+  }
+};
+function sizeAxis(step) {
+  return theme => {
+    const diameter = theme.spacing(step.diameter);
+    return {
+      root: {
+        width: diameter,
+        height: diameter
+      },
+      initials: {
+        fontSize: theme.fontSizes[step.initials],
+        lineHeight: theme.lineHeights[step.initials]
+      },
+      icon: {
+        fontSize: theme.fontSizes[step.glyph]
+      }
+    };
+  };
+}
+var SIZES = {
+  xs: {
+    diameter: 8,
+    initials: "xs",
+    glyph: "xs"
+  },
+  sm: {
+    diameter: 10,
+    initials: "xs",
+    glyph: "sm"
+  },
+  md: {
+    diameter: 12,
+    initials: "sm",
+    glyph: "md"
+  },
+  lg: {
+    diameter: 16,
+    initials: "md",
+    glyph: "xl"
+  }
+};
+var avatarRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      alignItems: "center",
+      justifyContent: "center",
+      // The clip is what makes a square photo round, so unlike on the `Chip` it is not
+      // optional here: without it the image is a rectangle sitting over a circle.
+      overflow: "hidden",
+      // Squircle corners for when `radius` overrides the circle. Free on Android.
+      borderCurve: "continuous",
+      borderWidth: 0
+    },
+    fallback: {
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    initials: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      // Two letters in a circle sit off-centre by the descender otherwise.
+      textAlign: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once. The border width follows
+   * the *presence* of the border role, so `ghost` needs no rule of its own to say it has
+   * no edge.
+   *
+   * The image takes no colour: it is a photograph, and tinting one is what `Icon`'s
+   * `source` form is for.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    initials: {
+      color: colors.fg
+    },
+    icon: {
+      color: colors.fg
+    }
+  }),
+  /** Declaration order is application order: `radius` overrides the circle `base` set. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * A circle at every size, where HeroUI fixes one large radius for all three — which
+   * makes their small avatars round and their large ones squircles. `full` says the shape
+   * the name means once, and `radius` is still there for the logo that wants a square.
+   */
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    radius: "full"
+  }
+});
+
+// src/components/avatar/avatar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AvatarRoot = forwardRef4(function Avatar({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = {
+    variant,
+    size,
+    radius
+  };
+  const styles = avatarRecipe.resolve({
+    theme,
+    selection
+  });
+  const tint = color ? avatarRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const context = useMemo(() => {
+    const icon = StyleSheet2.flatten([styles.icon, tint?.icon]);
+    return {
+      fallbackStyle: styles.fallback,
+      initialsStyle: tint ? [styles.initials, tint.initials] : styles.initials,
+      icon: {
+        size: icon.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+        // hand to a third-party component expecting a string.
+        color: typeof icon.color === "string" ? icon.color : void 0
+      }
+    };
+  }, [styles, tint]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const text = childrenToString(children);
+  const content = text !== null ? /* @__PURE__ */jsx4(AvatarFallback, {
+    children: text
+  }) : children;
+  const Root = asChild ? Slot : View2;
+  return /* @__PURE__ */jsx4(AvatarProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx4(Root, {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    })
+  });
+});
+AvatarRoot.displayName = "XAUI.Avatar.Root";
+
+// src/components/avatar/index.ts
+var Avatar2 = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Initials: AvatarInitials
+});
+export { useAvatar, avatarRecipe, Avatar2 as Avatar };

package/dist/components/alert/index.cjs

@@ -4,10 +4,10 @@
 
 var _chunkK7LLERKTcjs = require('../../chunk-K7LLERKT.cjs');
 require('../../chunk-CYS6U374.cjs');
+require('../../chunk-PCWT2YBE.cjs');
 require('../../chunk-6M7RUU7V.cjs');
 require('../../chunk-7DPL3ZDS.cjs');
 require('../../chunk-EJQCQPET.cjs');
-require('../../chunk-PCWT2YBE.cjs');
 require('../../chunk-54FJOKAN.cjs');
 require('../../chunk-H4E4HDEP.cjs');
 require('../../chunk-FNEUOBCV.cjs');

package/dist/components/alert/index.js

@@ -4,10 +4,10 @@ import {
   useAlert
 } from "../../chunk-AYOVBZAX.js";
 import "../../chunk-U3RDU3HU.js";
+import "../../chunk-WJPQARJ5.js";
 import "../../chunk-XNNJM5DQ.js";
 import "../../chunk-423RQBOX.js";
 import "../../chunk-EGLLDKN6.js";
-import "../../chunk-WJPQARJ5.js";
 import "../../chunk-YXPYOOHU.js";
 import "../../chunk-36PRYGAM.js";
 import "../../chunk-4GTAZM2C.js";

package/dist/components/avatar/index.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkI66VMLHEcjs = require('../../chunk-I66VMLHE.cjs');
+require('../../chunk-PCWT2YBE.cjs');
+require('../../chunk-54FJOKAN.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-I6ZB3FZI.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-MC7SY2QH.cjs');
+
+
+
+
+exports.Avatar = _chunkI66VMLHEcjs.Avatar; exports.avatarRecipe = _chunkI66VMLHEcjs.avatarRecipe; exports.useAvatar = _chunkI66VMLHEcjs.useAvatar;

package/dist/components/avatar/index.d.cts

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextStyle, ViewProps, ImageProps, ImageStyle, TextProps } from 'react-native';
+import { V as ViewStyleProps, I as ImageStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { I as IconContextValue } from '../../icon.type-d_i9ma-i.cjs';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+
+type AvatarSlot = 'root' | 'fallback' | 'initials' | 'icon';
+/**
+ * The full vocabulary (§1 bis), and the `Chip`'s eleven names exactly — an avatar is a
+ * token *about* a person or a thing, which is the category the `Chip` established, so a
+ * name means here what it means there.
+ *
+ * They colour the **frame**, which is all that shows when there is no image: `primary` is
+ * the accent fill with its contrasted initials, `secondary` the soft slice, `tertiary` a
+ * border and nothing else. The three status families are here because an avatar reports as
+ * often as it identifies — a red frame for the account that failed to sync, a green one for
+ * the person who is online.
+ *
+ * It is HeroUI's `variant × color` matrix said once: their `default` is this `default`, and
+ * their `soft` crossed with five colours is `secondary` plus the five `-soft` names.
+ */
+type AvatarVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type AvatarSize = Size;
+/**
+ * What the `Avatar` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the avatar's diameter and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type AvatarOwnProps = {
+    variant?: AvatarVariant;
+    /** The diameter, and the type inside it. It sets both sides, never a width alone. */
+    size?: AvatarSize;
+    /**
+     * Overrides the circle. An avatar is round at every size — that is the shape the name
+     * means — so this is the prop for the logo or the cover that wants a square.
+     */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * fill of a `primary`, the border of a `tertiary`, the initials of a `ghost`. Its
+     * contrasted and soft slices are derived in OKLab, so it behaves exactly like `accent` —
+     * which is also why it must be a hex value.
+     */
+    color?: string;
+    /** R12 — the child element becomes the frame and keeps this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type AvatarProps = Omit<ViewProps, 'style'> & AvatarOwnProps & Omit<ViewStyleProps, keyof AvatarOwnProps | keyof ViewProps>;
+type AvatarImageOwnProps = {
+    /**
+     * `false` shows the image the moment it decodes, with no fade. The frame does not change
+     * either way, so a list switched off with this does not reflow.
+     */
+    animation?: boolean;
+    style?: StyleProp<ImageStyle>;
+};
+/**
+ * `Image`'s own props win over the `ImageStyle` keys of the same name (R14). `source`
+ * stays required, as `Image` declares it: an `Avatar.Image` with nothing to show is an
+ * `Avatar.Fallback`.
+ */
+type AvatarImageProps = Omit<ImageProps, 'style'> & AvatarImageOwnProps & Omit<ImageStyleProps, keyof AvatarImageOwnProps | keyof ImageProps>;
+type AvatarFallbackOwnProps = {
+    /**
+     * Initials, an `Icon`, anything. A stringifiable tree becomes `Avatar.Initials` (R3); an
+     * element is centred and left alone — and an `Icon` among them needs no props, because
+     * the fallback publishes the frame's size and colour to it.
+     */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+type AvatarFallbackProps = Omit<ViewProps, 'style'> & AvatarFallbackOwnProps & Omit<ViewStyleProps, keyof AvatarFallbackOwnProps | keyof ViewProps>;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type AvatarInitialsProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+/**
+ * R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
+ * cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
+ * merges its own `style` on top and does no work of its own.
+ */
+type AvatarContextValue = {
+    fallbackStyle: StyleProp<ViewStyle>;
+    initialsStyle: StyleProp<TextStyle>;
+    /**
+     * Values, not a style: `Icon` hands `size` and `color` to a third-party component, so
+     * the root flattens its icon slot once here rather than in every icon it contains.
+     */
+    icon: IconContextValue;
+};
+
+declare const useAvatar: () => AvatarContextValue;
+
+declare const avatarRecipe: Recipe<"root" | "icon" | "fallback" | "initials", AvatarVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<AvatarSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<AvatarSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<AvatarSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<AvatarSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<AvatarSlot>>;
+}>;
+
+declare const Avatar: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    variant?: AvatarVariant;
+    size?: AvatarSize;
+    radius?: RadiusKey;
+    color?: string;
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "asChild" | "radius" | "size" | "variant"> & react.RefAttributes<react_native.View>> & {
+    Image: react.ForwardRefExoticComponent<Omit<react_native.ImageProps, "style"> & {
+        animation?: boolean;
+        style?: react_native.StyleProp<react_native.ImageStyle>;
+    } & Omit<ImageStyleProps, "height" | "width" | "borderRadius" | "resizeMode" | "tintColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "style" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "source" | "animation" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "src" | "srcSet" | "loadingIndicatorSource" | "defaultSource" | "alt" | "crossOrigin" | "referrerPolicy" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "resizeMethod" | "fadeDuration"> & react.RefAttributes<react_native.Image>>;
+    Fallback: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        children?: react.ReactNode;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+    } & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction"> & react.RefAttributes<react_native.View>>;
+    Initials: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+};
+
+export { Avatar, type AvatarContextValue, type AvatarFallbackProps, type AvatarImageProps, type AvatarInitialsProps, type AvatarProps, type AvatarSize, type AvatarSlot, type AvatarVariant, avatarRecipe, useAvatar };