@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/components/alert/alert-close.d.cts

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+import type { AlertCloseProps } from './alert.type';
+/**
+ * The dismiss affordance — the only control an alert contains.
+ *
+ * ```tsx
+ * <Alert variant="danger-soft">
+ *   <Alert.Content>
+ *     <Alert.Title>Envoi impossible</Alert.Title>
+ *   </Alert.Content>
+ *   <Alert.Close accessibilityLabel="Fermer l’alerte" onPress={dismiss} />
+ * </Alert>
+ * ```
+ *
+ * Five lines, because the shared `CloseButtonBase` owns the behaviour — its own press state,
+ * the grown touch target, the missing-label warning and the built-in cross — and the alert
+ * only hands it the styles its recipe resolved (R5).
+ *
+ * It sits at the top of the row like the icon, because that is where the root aligns its
+ * columns: a cross floating beside the middle of a three-line message is harder to find
+ * than one at the corner.
+ */
+export declare const AlertClose: import("react").ForwardRefExoticComponent<AlertCloseProps & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-close.d.ts

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+import type { AlertCloseProps } from './alert.type';
+/**
+ * The dismiss affordance — the only control an alert contains.
+ *
+ * ```tsx
+ * <Alert variant="danger-soft">
+ *   <Alert.Content>
+ *     <Alert.Title>Envoi impossible</Alert.Title>
+ *   </Alert.Content>
+ *   <Alert.Close accessibilityLabel="Fermer l’alerte" onPress={dismiss} />
+ * </Alert>
+ * ```
+ *
+ * Five lines, because the shared `CloseButtonBase` owns the behaviour — its own press state,
+ * the grown touch target, the missing-label warning and the built-in cross — and the alert
+ * only hands it the styles its recipe resolved (R5).
+ *
+ * It sits at the top of the row like the icon, because that is where the root aligns its
+ * columns: a cross floating beside the middle of a three-line message is harder to find
+ * than one at the corner.
+ */
+export declare const AlertClose: import("react").ForwardRefExoticComponent<AlertCloseProps & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-content.d.cts

@@ -0,0 +1,15 @@
+import { View } from 'react-native';
+/**
+ * The middle column — the title and the description, and whatever else the message needs.
+ *
+ * It exists because the root is a **row**: without it the title and the description would
+ * be laid out beside the icon rather than under each other. It takes the width the icon
+ * and the close leave (`flex: 1`), which is what makes a long message wrap instead of
+ * pushing the cross off the edge.
+ *
+ * It has no margin of its own (R4): what separates it from the icon is the root's `gap`,
+ * and what separates the title from the description is this section's own.
+ */
+export declare const AlertContent: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-content.d.ts

@@ -0,0 +1,15 @@
+import { View } from 'react-native';
+/**
+ * The middle column — the title and the description, and whatever else the message needs.
+ *
+ * It exists because the root is a **row**: without it the title and the description would
+ * be laid out beside the icon rather than under each other. It takes the width the icon
+ * and the close leave (`flex: 1`), which is what makes a long message wrap instead of
+ * pushing the cross off the edge.
+ *
+ * It has no margin of its own (R4): what separates it from the icon is the root's `gap`,
+ * and what separates the title from the description is this section's own.
+ */
+export declare const AlertContent: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-description.d.cts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The message itself — what it means and what to do about it.
+ *
+ * It sits behind the title on a fraction of the title's own colour rather than on the
+ * `muted` token, which is what keeps it readable on a `danger` alert where the text is
+ * white on red and a fixed grey would disappear.
+ *
+ * It is also what a string child of the alert becomes (R3): `<Alert>Le fichier est trop
+ * lourd.</Alert>` is a sentence, not a heading.
+ */
+export declare const AlertDescription: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Text>>;

package/dist/components/alert/alert-description.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The message itself — what it means and what to do about it.
+ *
+ * It sits behind the title on a fraction of the title's own colour rather than on the
+ * `muted` token, which is what keeps it readable on a `danger` alert where the text is
+ * white on red and a fixed grey would disappear.
+ *
+ * It is also what a string child of the alert becomes (R3): `<Alert>Le fichier est trop
+ * lourd.</Alert>` is a sentence, not a heading.
+ */
+export declare const AlertDescription: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Text>>;

package/dist/components/alert/alert-icon.d.cts

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import type { AlertIconProps } from './alert.type';
+/**
+ * The mark of what the message is — a check, a triangle, a cross.
+ *
+ * ```tsx
+ * <Alert variant="warning-soft">
+ *   <Alert.Icon as={TriangleIcon} />
+ *   <Alert.Content>…</Alert.Content>
+ * </Alert>
+ * ```
+ *
+ * The size and the colour come from the root, which resolved them once; an explicit `size`
+ * or `color` still wins, and that is the escape hatch for the alert whose icon has to
+ * disagree with its variant — a neutral `default` surface with a green check, which is how
+ * HeroUI colours its own.
+ *
+ * **This slot renders a box**, unlike `Button.Icon` and `Chip.Icon`, which hand their
+ * props straight to a third-party component. 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. That is a style, and a style
+ * needs a node — which is also what lets this slot carry style props at all.
+ *
+ * **No default glyph**, where HeroUI ships three. XAUI publishes no icon set — `@xaui/icons`
+ * was deleted in P0 — so an icon here is always the caller's, and the alert's job is to
+ * size and colour it rather than to choose it.
+ */
+export declare const AlertIcon: import("react").ForwardRefExoticComponent<AlertIconProps & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-icon.d.ts

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import type { AlertIconProps } from './alert.type';
+/**
+ * The mark of what the message is — a check, a triangle, a cross.
+ *
+ * ```tsx
+ * <Alert variant="warning-soft">
+ *   <Alert.Icon as={TriangleIcon} />
+ *   <Alert.Content>…</Alert.Content>
+ * </Alert>
+ * ```
+ *
+ * The size and the colour come from the root, which resolved them once; an explicit `size`
+ * or `color` still wins, and that is the escape hatch for the alert whose icon has to
+ * disagree with its variant — a neutral `default` surface with a green check, which is how
+ * HeroUI colours its own.
+ *
+ * **This slot renders a box**, unlike `Button.Icon` and `Chip.Icon`, which hand their
+ * props straight to a third-party component. 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. That is a style, and a style
+ * needs a node — which is also what lets this slot carry style props at all.
+ *
+ * **No default glyph**, where HeroUI ships three. XAUI publishes no icon set — `@xaui/icons`
+ * was deleted in P0 — so an icon here is always the caller's, and the alert's job is to
+ * size and colour it rather than to choose it.
+ */
+export declare const AlertIcon: import("react").ForwardRefExoticComponent<AlertIconProps & import("react").RefAttributes<View>>;

package/dist/components/alert/alert-title.d.cts

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+/**
+ * The heading — what happened, in a few words.
+ *
+ * It wraps, where `Button.Label` truncates: an alert has no fixed height to deform, and a
+ * message the reader cannot finish is worse than a taller box. `numberOfLines` is still a
+ * prop for a title that has to fit a row.
+ */
+export declare const AlertTitle: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Text>>;

package/dist/components/alert/alert-title.d.ts

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+/**
+ * The heading — what happened, in a few words.
+ *
+ * It wraps, where `Button.Label` truncates: an alert has no fixed height to deform, and a
+ * message the reader cannot finish is worse than a taller box. `numberOfLines` is still a
+ * prop for a title that has to fit a row.
+ */
+export declare const AlertTitle: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Text>>;

package/dist/components/alert/alert.context.d.cts

@@ -0,0 +1,8 @@
+import type { AlertContextValue } from './alert.type';
+/**
+ * R10 — `useAlert` is exported so a third party can write its own slot
+ * (`<Alert.Actions>`) against the same resolved values the built-in ones read, without
+ * forking the library. Outside an `<Alert>` it throws by name rather than failing three
+ * frames later on an undefined style.
+ */
+export declare const AlertProvider: import("react").Provider<AlertContextValue | null>, useAlert: () => AlertContextValue;

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

@@ -0,0 +1,8 @@
+import type { AlertContextValue } from './alert.type';
+/**
+ * R10 — `useAlert` is exported so a third party can write its own slot
+ * (`<Alert.Actions>`) against the same resolved values the built-in ones read, without
+ * forking the library. Outside an `<Alert>` it throws by name rather than failing three
+ * frames later on an undefined style.
+ */
+export declare const AlertProvider: import("react").Provider<AlertContextValue | null>, useAlert: () => AlertContextValue;

package/dist/components/alert/alert.d.cts

@@ -0,0 +1,38 @@
+import { View } from 'react-native';
+/**
+ * A message the interface has to make sure is read — an outcome, a warning, a failure.
+ *
+ * ```tsx
+ * <Alert variant="success-soft">
+ *   <Alert.Icon as={CheckIcon} />
+ *   <Alert.Content>
+ *     <Alert.Title>Facture payée</Alert.Title>
+ *     <Alert.Description>Le reçu part par courriel dans un instant.</Alert.Description>
+ *   </Alert.Content>
+ *   <Alert.Close accessibilityLabel="Fermer" onPress={dismiss} />
+ * </Alert>
+ * ```
+ *
+ * The root is a row of three columns — the icon, the content that takes what is left, and
+ * the close — spaced by its own `gap` (R4). It is **never a control**: an alert reports,
+ * and the only thing you press inside one is its `Alert.Close`.
+ */
+export declare const AlertRoot: import("react").ForwardRefExoticComponent<{
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").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" | "isDisabled" | "radius" | "size" | "variant"> & {
+    asChild?: boolean;
+} & import("react").RefAttributes<View>>;

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

@@ -0,0 +1,38 @@
+import { View } from 'react-native';
+/**
+ * A message the interface has to make sure is read — an outcome, a warning, a failure.
+ *
+ * ```tsx
+ * <Alert variant="success-soft">
+ *   <Alert.Icon as={CheckIcon} />
+ *   <Alert.Content>
+ *     <Alert.Title>Facture payée</Alert.Title>
+ *     <Alert.Description>Le reçu part par courriel dans un instant.</Alert.Description>
+ *   </Alert.Content>
+ *   <Alert.Close accessibilityLabel="Fermer" onPress={dismiss} />
+ * </Alert>
+ * ```
+ *
+ * The root is a row of three columns — the icon, the content that takes what is left, and
+ * the close — spaced by its own `gap` (R4). It is **never a control**: an alert reports,
+ * and the only thing you press inside one is its `Alert.Close`.
+ */
+export declare const AlertRoot: import("react").ForwardRefExoticComponent<{
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").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" | "isDisabled" | "radius" | "size" | "variant"> & {
+    asChild?: boolean;
+} & import("react").RefAttributes<View>>;

package/dist/components/alert/alert.recipe.d.cts

@@ -0,0 +1,12 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { RadiusKey, XAUITheme } from '../../theme/theme.type';
+import type { AlertSlot, AlertVariant } from './alert.type';
+export declare const alertRecipe: import("../..").Recipe<"title" | "content" | "description" | "root" | "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, import("../..").StyleFn<"root">>;
+}>;

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

@@ -0,0 +1,12 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { RadiusKey, XAUITheme } from '../../theme/theme.type';
+import type { AlertSlot, AlertVariant } from './alert.type';
+export declare const alertRecipe: import("../..").Recipe<"title" | "content" | "description" | "root" | "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, import("../..").StyleFn<"root">>;
+}>;

package/dist/components/alert/alert.type.d.cts

@@ -0,0 +1,118 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { CloseButtonBaseProps } from '../../system/close-button';
+import type { IconContextValue, IconProps } from '../../system/icon';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+export 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).
+ */
+export type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+export 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.
+ */
+export 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). */
+export 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;
+};
+export type AlertTitleProps = AlertTextProps;
+export 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'>;
+export type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
+/**
+ * Everything the shared `CloseButtonBase` accepts, minus the three the alert supplies itself:
+ * the warning's name and the two resolved styles its recipe already decided (R5).
+ */
+export type AlertCloseProps = Omit<CloseButtonBaseProps, '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.
+ */
+export 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;
+};
+export {};

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

@@ -0,0 +1,118 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { CloseButtonBaseProps } from '../../system/close-button';
+import type { IconContextValue, IconProps } from '../../system/icon';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+export 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).
+ */
+export type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+export 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.
+ */
+export 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). */
+export 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;
+};
+export type AlertTitleProps = AlertTextProps;
+export 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'>;
+export type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
+/**
+ * Everything the shared `CloseButtonBase` accepts, minus the three the alert supplies itself:
+ * the warning's name and the two resolved styles its recipe already decided (R5).
+ */
+export type AlertCloseProps = Omit<CloseButtonBaseProps, '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.
+ */
+export 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;
+};
+export {};

package/dist/components/alert/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkRREJUSAScjs = require('../../chunk-RREJUSAS.cjs');
+require('../../chunk-ZE4IHUUO.cjs');
+require('../../chunk-OW4N2C3M.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-GSZDN6EZ.cjs');
+require('../../chunk-FHNIGHN5.cjs');
+require('../../chunk-SL3V7R2Y.cjs');
+require('../../chunk-TVJXC4HY.cjs');
+require('../../chunk-CDRGTUYF.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-IIAQISBG.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+exports.Alert = _chunkRREJUSAScjs.Alert; exports.alertRecipe = _chunkRREJUSAScjs.alertRecipe; exports.useAlert = _chunkRREJUSAScjs.useAlert;

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

@@ -0,0 +1,34 @@
+export declare const Alert: import("react").ForwardRefExoticComponent<{
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    variant?: import("./alert.type").AlertVariant;
+    size?: import("./alert.type").AlertSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").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" | "isDisabled" | "radius" | "size" | "variant"> & {
+    asChild?: boolean;
+} & import("react").RefAttributes<import("react-native").View>> & {
+    Icon: import("react").ForwardRefExoticComponent<import("./alert.type").AlertIconProps & import("react").RefAttributes<import("react-native").View>>;
+    Content: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").View>>;
+    Title: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Description: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Close: import("react").ForwardRefExoticComponent<import("./alert.type").AlertCloseProps & import("react").RefAttributes<import("react-native").View>>;
+};
+export { useAlert } from './alert.context';
+export { alertRecipe } from './alert.recipe';
+export type { AlertCloseProps, AlertContentProps, AlertContextValue, AlertDescriptionProps, AlertIconProps, AlertProps, AlertSize, AlertSlot, AlertTitleProps, AlertVariant, } from './alert.type';