@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

package/dist/components/alert/index.d.ts

@@ -0,0 +1,169 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { I as IconContextValue, a as IconProps } from '../../icon.type-Kml72iSz.js';
+import { C as CloseButtonProps } from '../../close-button.type-BUYuoSt2.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+import '../../pressable-feedback.type-Bs4dQlGj.js';
+import 'react-native-reanimated';
+
+type AlertSlot = 'root' | 'icon' | 'iconGlyph' | 'content' | 'title' | 'description' | 'close' | 'closeGlyph';
+/**
+ * Nine names: the surface, the accent in two weights, and the three status families in
+ * theirs. An alert is the one component in the library that is **both** a surface and a
+ * report, so it takes the emphasis vocabulary of the `Card` for its neutral level and the
+ * status vocabulary of the `Chip` for the rest.
+ *
+ * - **`default`** — the `surface` fill and the surface shadow, exactly the `Card`'s
+ *   `default`. This is HeroUI's alert: a neutral card, with the status carried by the icon
+ *   rather than by the background.
+ * - **`primary` / `secondary`** — the full accent and its soft slice, for the
+ *   informational alert that is not an outcome.
+ * - **`success` / `warning` / `danger`**, each with a `-soft` slice — the tinted surface
+ *   most alerts want, and the solid fill for the banner that has to stop the reader.
+ *
+ * `tertiary` and `ghost` are absent: an alert without a surface is a paragraph, and the
+ * outline case is `default` with `borderWidth` and `borderColor` as style props (R14).
+ */
+type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type AlertSize = Size;
+/**
+ * What the `Alert` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the alert's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type AlertOwnProps = {
+    variant?: AlertVariant;
+    /**
+     * Padding, gaps, radius and the type of `Title` and `Description`. **Never a height**:
+     * an alert is a surface, and it is as tall as the message it carries.
+     */
+    size?: AlertSize;
+    /** Overrides the radius `size` chose. */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). It paints the fill and, through its
+     * OKLab-contrasted slice, the title and the icon — so a brand-coloured alert stays
+     * readable without being told a second colour.
+     */
+    color?: string;
+    /** Dims the alert, and reaches the close inside it. */
+    isDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the alert's own props, `View`'s, and every `ViewStyle` key neither already
+ * claims. There is no press behaviour here, deliberately: an alert reports, it is not a
+ * control. A dismissible one carries an `Alert.Close`, which is the control.
+ */
+type AlertProps = AlertOwnProps & Omit<ViewProps, keyof AlertOwnProps> & Omit<ViewStyleProps, keyof AlertOwnProps | keyof ViewProps> & {
+    /** R12 — merge into the single child instead of rendering a `View`. */
+    asChild?: boolean;
+};
+/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
+type AlertContentProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
+    children?: ReactNode;
+};
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type AlertTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+type AlertTitleProps = AlertTextProps;
+type AlertDescriptionProps = AlertTextProps;
+/**
+ * `Icon`'s three forms, plus the `ViewStyle` keys of the box around them (R14).
+ *
+ * Unlike `Button.Icon` and `Chip.Icon`, this slot **renders a view of its own**. It has
+ * to: an alert's icon sits beside a block of text rather than on one line with it, and
+ * lining the glyph up with the first line's cap-height means offsetting it by half the
+ * leading — which needs a node. That node is also what lets the slot carry style props at
+ * all, which the other two cannot.
+ */
+type AlertIconGlyphKey = 'as' | 'children' | 'source' | 'size' | 'color';
+/**
+ * `Pick`, distributed over `Icon`'s three forms rather than applied to the union as a
+ * whole. Applied as a whole it merges them into one shape where `as` and `source` are both
+ * optional — which is the boundary `IconProps` was turned into a union to keep, so
+ * `<Alert.Icon as={Check} source={png} />` would compile again and one of the two would be
+ * silently dropped.
+ */
+type AlertIconGlyphProps<T = IconProps> = T extends IconProps ? Pick<T, AlertIconGlyphKey> : never;
+type AlertIconBoxProps = {
+    /** The box, not the glyph — `size` and `color` are what shape the icon itself. */
+    style?: StyleProp<ViewStyle>;
+} & Omit<ViewStyleProps, AlertIconGlyphKey | 'style'>;
+type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
+/**
+ * Everything the shared `CloseButton` accepts, minus the three the alert supplies itself:
+ * the warning's name and the two resolved styles its recipe already decided (R5).
+ */
+type AlertCloseProps = Omit<CloseButtonProps, 'name' | 'baseStyle' | 'glyphStyle'>;
+/**
+ * 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 AlertContextValue = {
+    iconStyle: StyleProp<ViewStyle>;
+    contentStyle: StyleProp<ViewStyle>;
+    titleStyle: StyleProp<TextStyle>;
+    descriptionStyle: StyleProp<TextStyle>;
+    closeStyle: StyleProp<ViewStyle>;
+    closeGlyphStyle: StyleProp<ViewStyle>;
+    /**
+     * 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;
+    isDisabled: boolean;
+};
+
+declare const useAlert: () => AlertContextValue;
+
+declare const alertRecipe: Recipe<"title" | "root" | "content" | "description" | "icon" | "iconGlyph" | "close" | "closeGlyph", AlertVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<AlertSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<AlertSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<AlertSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<AlertSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"root">>;
+}>;
+
+declare const Alert: react.ForwardRefExoticComponent<{
+    variant?: AlertVariant;
+    size?: AlertSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: AlertVariant;
+    size?: AlertSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "size" | "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" | "variant" | "radius" | "isDisabled"> & {
+    asChild?: boolean;
+} & react.RefAttributes<react_native.View>> & {
+    Icon: react.ForwardRefExoticComponent<AlertIconProps & react.RefAttributes<react_native.View>>;
+    Content: react.ForwardRefExoticComponent<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.View>>;
+    Title: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Close: react.ForwardRefExoticComponent<AlertCloseProps & react.RefAttributes<react_native.View>>;
+};
+
+export { Alert, type AlertCloseProps, type AlertContentProps, type AlertContextValue, type AlertDescriptionProps, type AlertIconProps, type AlertProps, type AlertSize, type AlertSlot, type AlertTitleProps, type AlertVariant, alertRecipe, useAlert };

package/dist/components/alert/index.js

@@ -0,0 +1,20 @@
+import {
+  Alert,
+  alertRecipe,
+  useAlert
+} from "../../chunk-DD4276RF.js";
+import "../../chunk-KCMYU7WF.js";
+import "../../chunk-FHUYHV6J.js";
+import "../../chunk-6UEZJRVI.js";
+import "../../chunk-423RQBOX.js";
+import "../../chunk-EGLLDKN6.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Alert,
+  alertRecipe,
+  useAlert
+};

package/dist/components/avatar/index.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkNWGLP6JXcjs = require('../../chunk-NWGLP6JX.cjs');
+require('../../chunk-4KFKWBN5.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+exports.Avatar = _chunkNWGLP6JXcjs.Avatar; exports.avatarRecipe = _chunkNWGLP6JXcjs.avatarRecipe; exports.useAvatar = _chunkNWGLP6JXcjs.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" | "size" | "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" | "variant" | "radius" | "asChild"> & 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" | "source" | "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" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "src" | "srcSet" | "loadingIndicatorSource" | "defaultSource" | "alt" | "crossOrigin" | "referrerPolicy" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "resizeMethod" | "fadeDuration" | "animation"> & 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 };

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

@@ -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.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { I as IconContextValue } from '../../icon.type-Kml72iSz.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+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" | "size" | "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" | "variant" | "radius" | "asChild"> & 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" | "source" | "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" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "src" | "srcSet" | "loadingIndicatorSource" | "defaultSource" | "alt" | "crossOrigin" | "referrerPolicy" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "resizeMethod" | "fadeDuration" | "animation"> & 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 };

package/dist/components/avatar/index.js

@@ -0,0 +1,16 @@
+import {
+  Avatar,
+  avatarRecipe,
+  useAvatar
+} from "../../chunk-UFTCTTKK.js";
+import "../../chunk-FHUYHV6J.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Avatar,
+  avatarRecipe,
+  useAvatar
+};

package/dist/components/badge/index.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkHDVVZG4Scjs = require('../../chunk-HDVVZG4S.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+exports.Badge = _chunkHDVVZG4Scjs.Badge; exports.badgeRecipe = _chunkHDVVZG4Scjs.badgeRecipe; exports.placementInsets = _chunkHDVVZG4Scjs.placementInsets;