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

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 };

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" | "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 };

package/dist/components/avatar/index.js

@@ -0,0 +1,17 @@
+import {
+  Avatar,
+  avatarRecipe,
+  useAvatar
+} from "../../chunk-ZA6RT3XQ.js";
+import "../../chunk-WJPQARJ5.js";
+import "../../chunk-YXPYOOHU.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-MEYCZS32.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-GGW42MY4.js";
+export {
+  Avatar,
+  avatarRecipe,
+  useAvatar
+};

package/dist/components/badge/index.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkDUQUCOUYcjs = require('../../chunk-DUQUCOUY.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.Badge = _chunkDUQUCOUYcjs.Badge; exports.badgeRecipe = _chunkDUQUCOUYcjs.badgeRecipe; exports.placementInsets = _chunkDUQUCOUYcjs.placementInsets;

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

@@ -0,0 +1,157 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+
+type BadgeSlot = 'root' | 'label';
+/**
+ * The full vocabulary (§1 bis), and the `Chip`'s eleven — a badge is what a chip is when
+ * it is too small to hold a word: something a component **reports** about itself. So the
+ * three status families are here for the same reason they are there, and a name means the
+ * same thing in both.
+ *
+ * `danger` is the default rather than `primary`, and it is the only component in the
+ * library whose default is not the first name in the ladder. A badge is overwhelmingly the
+ * count of something that wants attention — unread, failed, overdue — and a red one is what
+ * a caller writing `<Badge>3</Badge>` means. The accent count is a `variant` away.
+ */
+type BadgeVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type BadgeSize = Size;
+/**
+ * Which corner it hangs off, when it hangs off something.
+ *
+ * Unset, the badge is in flow and the parent lays it out like any other node — which is the
+ * right thing for a badge at the end of a list row. Set, it is absolutely positioned in
+ * that corner of the **parent**, so the parent is whatever the badge decorates:
+ *
+ * ```tsx
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">3</Badge>
+ * </View>
+ * ```
+ *
+ * It is a prop rather than four style keys the caller writes because the offset is derived
+ * from the badge's own `size` — it is pulled out by half its height on each axis, so its
+ * centre sits on the corner it marks, and that arithmetic belongs with the measurements
+ * rather than at every call site. R13 is the other half: the keys are `start` and `end`, so
+ * a badge on the trailing corner mirrors in RTL instead of staying put.
+ */
+type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * What the `Badge` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the badge's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type BadgeOwnProps = {
+    variant?: BadgeVariant;
+    /** Height, horizontal padding and type. The width follows the count inside it. */
+    size?: BadgeSize;
+    /**
+     * Overrides the capsule. A badge is a pill at every size — that is what makes a
+     * two-digit count read as one object — so this is the prop for the square marker.
+     */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * fill of a `primary`, the border and label of a `tertiary`, the label of a `ghost`.
+     */
+    color?: string;
+    /**
+     * The bare circle — no label, no padding, a fixed diameter. It is what a badge is when
+     * the fact that there is *something* is the whole message: a dot on a tab, an unsaved
+     * marker on a row.
+     *
+     * Children are not rendered while it is set: a dot is the absence of a label, so there
+     * is nothing for one to sit in.
+     */
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    /** R12 — the child element becomes the badge and keeps this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type BadgeProps = Omit<ViewProps, 'style'> & BadgeOwnProps & Omit<ViewStyleProps, keyof BadgeOwnProps | keyof ViewProps>;
+
+/**
+ * A count, or the fact that there is one.
+ *
+ * ```tsx
+ * <Badge>3</Badge>
+ * <Badge variant="success-soft" size="sm">Payé</Badge>
+ * <Badge isDot variant="warning" />
+ *
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">12</Badge>
+ * </View>
+ * ```
+ *
+ * **One node and no slots**, per the plan. A badge is a mark: whatever is inside it is one
+ * line of two or three characters, and a slot would be a name for a `Text` this component
+ * can just as well insert itself (R3).
+ *
+ * **It is not a small `Chip`.** A chip holds a word and hugs it; a badge holds a count and
+ * is round unless the count is too wide to be. That is the `minWidth` equal to the height —
+ * one digit is a circle, two are a capsule — and it is why the label stays at 12pt through
+ * three of the four sizes, because a count that grows with its badge stops being a count.
+ *
+ * **`placement` makes the parent whatever the badge decorates.** Unset, the badge is in
+ * flow and laid out like any other node, which is what a badge at the end of a list row
+ * wants. Set, it is pulled half its own height out of that corner of the parent, so its
+ * centre lands on the corner it marks.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    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" | "isDot" | "placement"> & react.RefAttributes<View>>;
+
+declare const badgeRecipe: Recipe<"label" | "root", BadgeVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    /**
+     * The same four keys as `size`, and the root selects it with the resolved size when
+     * `isDot` is set and with nothing when it is not — an axis left unselected contributes
+     * nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
+     * have needed a `false` branch with nothing to say, and a `size × isDot` compound
+     * would have been sixteen entries for four measurements.
+     */
+    readonly dot: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<BadgeSlot>>;
+}>;
+
+/**
+ * `placement` turned into the four keys React Native understands, given how far the badge
+ * has to be pulled out of the corner it marks.
+ *
+ * A pure function rather than a lookup in the recipe, because the insets must **not** exist
+ * when there is no placement: in flow the node is `position: 'relative'`, where an inset is
+ * a nudge rather than a placement, and a cached style carrying `top: -10` would shift every
+ * badge that is simply sitting at the end of a row.
+ *
+ * R13 — `start` and `end`, never `left` and `right`, so a badge on the trailing corner
+ * mirrors with the layout instead of staying put.
+ */
+declare function placementInsets(placement: BadgePlacement | undefined, offset: number): ViewStyle | undefined;
+
+export { Badge, type BadgePlacement, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, badgeRecipe, placementInsets };

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

@@ -0,0 +1,157 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+type BadgeSlot = 'root' | 'label';
+/**
+ * The full vocabulary (§1 bis), and the `Chip`'s eleven — a badge is what a chip is when
+ * it is too small to hold a word: something a component **reports** about itself. So the
+ * three status families are here for the same reason they are there, and a name means the
+ * same thing in both.
+ *
+ * `danger` is the default rather than `primary`, and it is the only component in the
+ * library whose default is not the first name in the ladder. A badge is overwhelmingly the
+ * count of something that wants attention — unread, failed, overdue — and a red one is what
+ * a caller writing `<Badge>3</Badge>` means. The accent count is a `variant` away.
+ */
+type BadgeVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type BadgeSize = Size;
+/**
+ * Which corner it hangs off, when it hangs off something.
+ *
+ * Unset, the badge is in flow and the parent lays it out like any other node — which is the
+ * right thing for a badge at the end of a list row. Set, it is absolutely positioned in
+ * that corner of the **parent**, so the parent is whatever the badge decorates:
+ *
+ * ```tsx
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">3</Badge>
+ * </View>
+ * ```
+ *
+ * It is a prop rather than four style keys the caller writes because the offset is derived
+ * from the badge's own `size` — it is pulled out by half its height on each axis, so its
+ * centre sits on the corner it marks, and that arithmetic belongs with the measurements
+ * rather than at every call site. R13 is the other half: the keys are `start` and `end`, so
+ * a badge on the trailing corner mirrors in RTL instead of staying put.
+ */
+type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * What the `Badge` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the badge's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type BadgeOwnProps = {
+    variant?: BadgeVariant;
+    /** Height, horizontal padding and type. The width follows the count inside it. */
+    size?: BadgeSize;
+    /**
+     * Overrides the capsule. A badge is a pill at every size — that is what makes a
+     * two-digit count read as one object — so this is the prop for the square marker.
+     */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * fill of a `primary`, the border and label of a `tertiary`, the label of a `ghost`.
+     */
+    color?: string;
+    /**
+     * The bare circle — no label, no padding, a fixed diameter. It is what a badge is when
+     * the fact that there is *something* is the whole message: a dot on a tab, an unsaved
+     * marker on a row.
+     *
+     * Children are not rendered while it is set: a dot is the absence of a label, so there
+     * is nothing for one to sit in.
+     */
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    /** R12 — the child element becomes the badge and keeps this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type BadgeProps = Omit<ViewProps, 'style'> & BadgeOwnProps & Omit<ViewStyleProps, keyof BadgeOwnProps | keyof ViewProps>;
+
+/**
+ * A count, or the fact that there is one.
+ *
+ * ```tsx
+ * <Badge>3</Badge>
+ * <Badge variant="success-soft" size="sm">Payé</Badge>
+ * <Badge isDot variant="warning" />
+ *
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">12</Badge>
+ * </View>
+ * ```
+ *
+ * **One node and no slots**, per the plan. A badge is a mark: whatever is inside it is one
+ * line of two or three characters, and a slot would be a name for a `Text` this component
+ * can just as well insert itself (R3).
+ *
+ * **It is not a small `Chip`.** A chip holds a word and hugs it; a badge holds a count and
+ * is round unless the count is too wide to be. That is the `minWidth` equal to the height —
+ * one digit is a circle, two are a capsule — and it is why the label stays at 12pt through
+ * three of the four sizes, because a count that grows with its badge stops being a count.
+ *
+ * **`placement` makes the parent whatever the badge decorates.** Unset, the badge is in
+ * flow and laid out like any other node, which is what a badge at the end of a list row
+ * wants. Set, it is pulled half its own height out of that corner of the parent, so its
+ * centre lands on the corner it marks.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    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" | "isDot" | "placement"> & react.RefAttributes<View>>;
+
+declare const badgeRecipe: Recipe<"label" | "root", BadgeVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    /**
+     * The same four keys as `size`, and the root selects it with the resolved size when
+     * `isDot` is set and with nothing when it is not — an axis left unselected contributes
+     * nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
+     * have needed a `false` branch with nothing to say, and a `size × isDot` compound
+     * would have been sixteen entries for four measurements.
+     */
+    readonly dot: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<BadgeSlot>>;
+}>;
+
+/**
+ * `placement` turned into the four keys React Native understands, given how far the badge
+ * has to be pulled out of the corner it marks.
+ *
+ * A pure function rather than a lookup in the recipe, because the insets must **not** exist
+ * when there is no placement: in flow the node is `position: 'relative'`, where an inset is
+ * a nudge rather than a placement, and a cached style carrying `top: -10` would shift every
+ * badge that is simply sitting at the end of a row.
+ *
+ * R13 — `start` and `end`, never `left` and `right`, so a badge on the trailing corner
+ * mirrors with the layout instead of staying put.
+ */
+declare function placementInsets(placement: BadgePlacement | undefined, offset: number): ViewStyle | undefined;
+
+export { Badge, type BadgePlacement, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, badgeRecipe, placementInsets };