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

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

@@ -0,0 +1,299 @@
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextStyle, ViewProps, PressableProps, View } from 'react-native';
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+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 { b as IconComponentProps, I as IconContextValue } from '../../icon.type-Kml72iSz.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+import * as react_native_reanimated from 'react-native-reanimated';
+
+type AccordionSlot = 'root'
+/** The clipping layer inside the root. See the recipe for why it is not the root. */
+ | 'container' | 'separator' | 'item' | 'trigger' | 'indicator' | 'content';
+/**
+ * Four emphasis levels, no intent — `danger` on a list of expandable rows would be
+ * colouring a container rather than reporting a meaning.
+ *
+ * The ladder descends without a gap: `primary` is the strong fill, `secondary` the
+ * quieter one, `tertiary` an edge with nothing behind it, `ghost` nothing at all. Neither
+ * the `Button`'s five nor the `Card`'s four read that cleanly — both put `default`
+ * somewhere in the middle of an order it does not name a position in.
+ *
+ * `ghost` is the default here, and it is HeroUI's own `default`: rows separated by
+ * hairlines, on whatever page they sit on. `primary` is their `surface`.
+ */
+type AccordionVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type AccordionSize = Size;
+/** One open at a time, or as many as the reader wants. */
+type AccordionSelectionMode = 'single' | 'multiple';
+/** A string in `single` mode, a list of them in `multiple`. */
+type AccordionValue = string | readonly string[];
+type AccordionOwnProps = {
+    children?: ReactNode;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    radius?: RadiusKey;
+    /** The tint (R7) — a raw value, never a token. */
+    color?: string;
+    selectionMode?: AccordionSelectionMode;
+    /** Controlled. Leave unset and the root owns it. */
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    isDisabled?: boolean;
+    /**
+     * Whether an open item can be closed by pressing it again. Off, the accordion always
+     * has one item open — which is what a set of tabs pretending to be an accordion needs.
+     *
+     * @default true
+     */
+    isCollapsible?: boolean;
+    /** The hairline between rows. It is the only thing separating them in `ghost`. */
+    hasSeparator?: boolean;
+    asChild?: boolean;
+};
+type AccordionProps = AccordionOwnProps & Omit<ViewProps, keyof AccordionOwnProps> & Omit<ViewStyleProps, keyof AccordionOwnProps | keyof ViewProps>;
+type AccordionItemOwnProps = {
+    /** What identifies this row in the root's value. */
+    value: string;
+    isDisabled?: boolean;
+    children?: ReactNode | ((state: AccordionItemRenderState) => ReactNode);
+};
+type AccordionItemProps = AccordionItemOwnProps & Omit<ViewProps, keyof AccordionItemOwnProps> & Omit<ViewStyleProps, keyof AccordionItemOwnProps | keyof ViewProps>;
+/** What an item's render function is handed, so a row can paint its own open state. */
+type AccordionItemRenderState = {
+    isExpanded: boolean;
+    isDisabled: boolean;
+    value: string;
+};
+type AccordionTriggerOwnProps = {
+    children?: ReactNode;
+    asChild?: boolean;
+};
+type AccordionTriggerProps = AccordionTriggerOwnProps & Omit<PressableProps, keyof AccordionTriggerOwnProps> & Omit<ViewStyleProps, keyof AccordionTriggerOwnProps | keyof PressableProps>;
+/** The chevron, turning with the panel. */
+type AccordionIndicatorProps = {
+    /** The glyph. Defaults to the chevron the library ships. */
+    as?: ComponentType<IconComponentProps>;
+    size?: number;
+    /** A raw value (R7), never a token. */
+    color?: string;
+};
+type AccordionContentOwnProps = {
+    children?: ReactNode;
+};
+type AccordionContentProps = AccordionContentOwnProps & Omit<ViewProps, keyof AccordionContentOwnProps> & Omit<ViewStyleProps, keyof AccordionContentOwnProps | keyof ViewProps>;
+/** R5 — resolved style ids and the state the slots read. No slot re-resolves anything. */
+type AccordionContextValue = {
+    separatorStyle: StyleProp<ViewStyle>;
+    itemStyle: StyleProp<ViewStyle>;
+    triggerStyle: StyleProp<ViewStyle>;
+    triggerPressedStyle: StyleProp<ViewStyle>;
+    indicatorStyle: StyleProp<ViewStyle>;
+    contentStyle: StyleProp<ViewStyle>;
+    /** Text colour for a stringifiable trigger child, wrapped the way R3 asks. */
+    labelStyle: StyleProp<TextStyle>;
+    glyph: IconContextValue;
+    isDisabled: boolean;
+    isExpanded: (value: string) => boolean;
+    toggle: (value: string) => void;
+};
+/** One row's own state. Everything visual still comes from `useAccordion()`. */
+type AccordionItemContextValue = {
+    value: string;
+    isExpanded: boolean;
+    isDisabled: boolean;
+};
+
+/**
+ * The chevron, turning with the panel.
+ *
+ * The same spring as the `Select`'s, for the same reason: a 180-degree turn on a timing
+ * curve reads as an animation playing beside the row, and on a spring heavy enough not to
+ * overshoot it reads as the panel pushing the glyph round. It is a worklet, so it keeps
+ * turning while the panel's content mounts.
+ */
+declare function AccordionIndicator({ as, ...props }: AccordionIndicatorProps): react.JSX.Element;
+declare namespace AccordionIndicator {
+    var displayName: string;
+}
+
+/**
+ * A list of rows that open.
+ *
+ * ```tsx
+ * <Accordion defaultValue="shipping">
+ *   <Accordion.Item value="shipping">
+ *     <Accordion.Trigger>
+ *       Livraison
+ *       <Accordion.Indicator />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Text>Sous trois jours ouvrés.</Text>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * The separators are the root's, drawn between the children rather than by them. A row
+ * that drew its own would draw one under the last item too, and every accordion would
+ * start by hiding it.
+ */
+declare const AccordionRoot: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    radius?: RadiusKey;
+    color?: string;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    isDisabled?: boolean;
+    isCollapsible?: boolean;
+    hasSeparator?: boolean;
+    asChild?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    radius?: RadiusKey;
+    color?: string;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    isDisabled?: boolean;
+    isCollapsible?: boolean;
+    hasSeparator?: boolean;
+    asChild?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "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" | "selectionMode" | "defaultValue" | "onValueChange" | "isDisabled" | "isCollapsible" | "hasSeparator" | "asChild"> & react.RefAttributes<View>>;
+
+/**
+ * The panel.
+ *
+ * **It is mounted or it is not** — there is no measured height anywhere in this component,
+ * and no `maxHeight` either. The row's layout transition animates the height between the
+ * two states, which is what lets a panel whose content grows afterwards — an image
+ * loading, a list filling — grow with it instead of being stuck at whatever it measured.
+ *
+ * It fades rather than sliding. The height is already moving underneath it, and two
+ * things travelling at once reads as the panel fighting itself.
+ */
+declare const AccordionContent: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<View>>;
+
+/**
+ * One row: its trigger, and the panel under it.
+ *
+ * The height animation lives here rather than on the content, because the height that
+ * changes is the row's. `overflow: 'hidden'` on it is what turns a mounted panel into one
+ * unrolling — without it the content is drawn outside the row from the first frame.
+ *
+ * `children` may be a function, which is how a row paints its own open state without the
+ * caller wiring `useAccordionItem` themselves.
+ */
+declare const AccordionItem: react.ForwardRefExoticComponent<{
+    value: string;
+    isDisabled?: boolean;
+    children?: react.ReactNode | ((state: AccordionItemRenderState) => react.ReactNode);
+} & Omit<react_native.ViewProps, keyof {
+    value: string;
+    isDisabled?: boolean;
+    children?: react.ReactNode | ((state: AccordionItemRenderState) => react.ReactNode);
+}> & Omit<ViewStyleProps, "value" | "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"> & react.RefAttributes<View>>;
+
+/**
+ * The row you press. It carries `expanded` for a screen reader, which is the only thing
+ * telling one whether the panel under it is open — the chevron says nothing out loud.
+ */
+declare const AccordionTrigger: react.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    asChild?: boolean;
+} & Omit<react_native.PressableProps, keyof {
+    children?: ReactNode;
+    asChild?: boolean;
+}> & 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" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "delayLongPress" | "asChild" | "onHoverIn" | "onHoverOut" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay"> & react.RefAttributes<View>>;
+
+declare const useAccordion: () => AccordionContextValue;
+declare const useAccordionItem: () => AccordionItemContextValue;
+
+declare const accordionRecipe: Recipe<"separator" | "root" | "container" | "item" | "trigger" | "indicator" | "content", AccordionVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<AccordionSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<AccordionSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<AccordionSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<AccordionSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"root" | "container">>;
+}>;
+
+/**
+ * How the panel opens.
+ *
+ * There is no measured height anywhere in this component: the content is mounted or it is
+ * not, and Reanimated's layout transition animates the row's height between the two.
+ * Measuring it ourselves would mean a hidden pass on every open, and a panel whose
+ * content grows afterwards — an image loading, a list filling — would be stuck at the
+ * height it had when it was measured.
+ *
+ * HeroUI's spring, and stiffer than the chevron's: 1600 against 1000. A height is a
+ * bigger distance than a rotation, and at the chevron's stiffness the same damping makes
+ * a long panel take almost half a second to settle.
+ */
+declare const LAYOUT: react_native_reanimated.ComplexAnimationBuilder;
+
+declare const Accordion: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    radius?: RadiusKey;
+    color?: string;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    isDisabled?: boolean;
+    isCollapsible?: boolean;
+    hasSeparator?: boolean;
+    asChild?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    radius?: RadiusKey;
+    color?: string;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    isDisabled?: boolean;
+    isCollapsible?: boolean;
+    hasSeparator?: boolean;
+    asChild?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "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" | "selectionMode" | "defaultValue" | "onValueChange" | "isDisabled" | "isCollapsible" | "hasSeparator" | "asChild"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<{
+        value: string;
+        isDisabled?: boolean;
+        children?: react.ReactNode | ((state: AccordionItemRenderState) => react.ReactNode);
+    } & Omit<react_native.ViewProps, keyof {
+        value: string;
+        isDisabled?: boolean;
+        children?: react.ReactNode | ((state: AccordionItemRenderState) => react.ReactNode);
+    }> & Omit<ViewStyleProps, "value" | "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"> & react.RefAttributes<react_native.View>>;
+    Trigger: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode;
+        asChild?: boolean;
+    } & Omit<react_native.PressableProps, keyof {
+        children?: react.ReactNode;
+        asChild?: boolean;
+    }> & 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" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "delayLongPress" | "asChild" | "onHoverIn" | "onHoverOut" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay"> & react.RefAttributes<react_native.View>>;
+    Indicator: typeof AccordionIndicator;
+    Content: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode;
+    } & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<react_native.View>>;
+};
+
+export { Accordion, AccordionContent, type AccordionContentProps, type AccordionContextValue, AccordionIndicator, type AccordionIndicatorProps, AccordionItem, type AccordionItemContextValue, type AccordionItemProps, type AccordionItemRenderState, type AccordionProps, AccordionRoot, type AccordionSelectionMode, type AccordionSize, type AccordionSlot, AccordionTrigger, type AccordionTriggerProps, type AccordionValue, type AccordionVariant, LAYOUT as accordionLayoutTransition, accordionRecipe, useAccordion, useAccordionItem };

package/dist/components/accordion/index.js

@@ -0,0 +1,35 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionIndicator,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  LAYOUT,
+  accordionRecipe,
+  useAccordion,
+  useAccordionItem
+} from "../../chunk-2XPG2243.js";
+import "../../chunk-64MXEVT3.js";
+import "../../chunk-FHUYHV6J.js";
+import "../../chunk-F6W3JQ7K.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 {
+  Accordion,
+  AccordionContent,
+  AccordionIndicator,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  LAYOUT as accordionLayoutTransition,
+  accordionRecipe,
+  useAccordion,
+  useAccordionItem
+};

package/dist/components/alert/index.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkXV735BSAcjs = require('../../chunk-XV735BSA.cjs');
+require('../../chunk-ZFOOJK37.cjs');
+require('../../chunk-4KFKWBN5.cjs');
+require('../../chunk-3E7CDKFO.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+exports.Alert = _chunkXV735BSAcjs.Alert; exports.alertRecipe = _chunkXV735BSAcjs.alertRecipe; exports.useAlert = _chunkXV735BSAcjs.useAlert;

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

@@ -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.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { I as IconContextValue, a as IconProps } from '../../icon.type-d_i9ma-i.cjs';
+import { C as CloseButtonProps } from '../../close-button.type-CHsgZ3wO.cjs';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+import '../../pressable-feedback.type-BA2C9sSz.cjs';
+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 };