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

package/dist/system/index.d.ts

@@ -1,9 +1,126 @@
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, View } from 'react-native';
 import * as react from 'react';
 import { ReactNode, Provider, Ref, RefCallback } from 'react';
-import * as react_native from 'react-native';
-import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { SharedValue } from 'react-native-reanimated';
-import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.js';
+import { S as SlotAnimation, F as FeedbackContext, a as AnimationProp, b as ResolvedAnimation, P as PressableFeedbackProps } from '../pressable-feedback.type-Bs4dQlGj.js';
+export { A as AnimationConfig, R as RadiusStyle, c as RippleWave } from '../pressable-feedback.type-Bs4dQlGj.js';
+import { R as RadiusKey, X as XAUITheme } from '../theme.type-C2gNHpEx.js';
+import { a as StyleFn, h as SlotStyle } from '../create-recipe-BdVd2ffi.js';
+export { A as Axes, C as CompoundVariant, R as Recipe, d as RecipeConfig, b as ResolveArgs, e as ResolvedSelection, f as ResolvedStyles, g as Selection, S as SlotStyles, i as StateName, j as States, T as TintArgs, V as VariantColors, k as VariantRole, l as VariantTokens, c as createRecipe } from '../create-recipe-BdVd2ffi.js';
+export { C as CloseButtonProps } from '../close-button.type-BUYuoSt2.js';
+import { b as IconComponentProps, a as IconProps, I as IconContextValue } from '../icon.type-Kml72iSz.js';
+import { V as ViewStyleProps } from '../style-props.type-CfnoGEP7.js';
+export { D as DirectionalStyleKey, I as ImageStyleProps, S as StyleProps, T as TextStyleProps } from '../style-props.type-CfnoGEP7.js';
+import * as react_native_reanimated from 'react-native-reanimated';
+import { P as Placement } from '../placement-DHa0Rrh1.js';
+
+/**
+ * The runtime half of R14. The type half lives in `system/style-props/`, and the two are
+ * pinned to each other by a compile-time check there: a React Native upgrade that adds or
+ * removes a style key fails `type-check` with the key's name rather than drifting.
+ *
+ * One set for the three style types rather than one per node. A caller cannot write
+ * `fontSize` on a view slot — that slot's props are typed `ViewStyleProps` — so the split
+ * never has to know which node it runs for, and every component shares one table.
+ */
+declare const STYLE_PROP_KEYS: readonly ["alignContent", "alignItems", "alignSelf", "aspectRatio", "boxSizing", "columnGap", "direction", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "justifyContent", "overflow", "rowGap", "bottom", "end", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "position", "start", "top", "zIndex", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginHorizontal", "marginInline", "marginInlineEnd", "marginInlineStart", "marginStart", "marginTop", "marginVertical", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingHorizontal", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingStart", "paddingTop", "paddingVertical", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "borderBlockColor", "borderBlockEndColor", "borderBlockStartColor", "borderBottomColor", "borderBottomEndRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderCurve", "borderEndColor", "borderEndEndRadius", "borderEndStartRadius", "borderEndWidth", "borderRadius", "borderStartColor", "borderStartEndRadius", "borderStartStartRadius", "borderStartWidth", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth", "backfaceVisibility", "backgroundColor", "boxShadow", "cursor", "elevation", "experimental_backgroundImage", "filter", "isolation", "mixBlendMode", "opacity", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "rotation", "scaleX", "scaleY", "transform", "transformMatrix", "transformOrigin", "translateX", "translateY", "color", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "includeFontPadding", "letterSpacing", "lineHeight", "textAlign", "textAlignVertical", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "userSelect", "verticalAlign", "writingDirection", "objectFit", "overlayColor", "resizeMode", "tintColor"];
+type StylePropKey = (typeof STYLE_PROP_KEYS)[number];
+/** What `splitStyleProps` takes out of a props object. */
+type StylePropsOf<P> = Pick<P, Extract<keyof P, StylePropKey>>;
+/** What it leaves in it. */
+type RestPropsOf<P> = Omit<P, StylePropKey>;
+
+/**
+ * `splitStyleProps`, memoized on the values (R14). A component calls it on what is left
+ * after destructuring its own props, applies the style half between the tint and its
+ * `style`, and forwards the rest:
+ *
+ * ```tsx
+ * const [styleProps, rest] = useStyleProps(props)
+ * <Pressable style={[styles.root, tint, styleProps, style]} {...rest} />
+ * ```
+ *
+ * The identity is stable while the values are, which is what a memoized child or an
+ * animated style depends on. It is keyed on a hash rather than on the object, because the
+ * object is a fresh rest-spread on every render and would never hit.
+ */
+declare function useStyleProps<P extends object>(props: P): [StylePropsOf<P>, RestPropsOf<P>];
+
+/**
+ * The chevron the library ships, rather than requiring one from the caller: a control
+ * whose whole affordance is "there is more under here" cannot be written without it, and
+ * asking for an icon package to draw one arrow is a peer dependency for a chevron.
+ *
+ * It sits in `system/` because two components draw it — `Select` turns it half a turn
+ * when its list opens, `Accordion` when its panel does. §2 bis: promotion at the second
+ * use, never by anticipation.
+ */
+declare function ChevronDownIcon({ size, color, }: IconComponentProps): react.JSX.Element;
+declare namespace ChevronDownIcon {
+    var displayName: string;
+}
+
+/**
+ * The gap nobody else closes: an icon is a third-party component, so a slot context does
+ * not reach it and every call site ends up computing the colour by hand.
+ *
+ * ```tsx
+ * <Button variant="danger">
+ *   <Button.Icon as={TrashIcon} />   {/* colour and size inherited, nothing to pass *\/}
+ *   <Button.Label>Supprimer</Button.Label>
+ * </Button>
+ * ```
+ *
+ * Three accepted forms — a component through `as`, a raw SVG as children, or an image
+ * through `source` — and the resolution is the same for all three: an explicit prop, else
+ * what the surrounding slot published, else the theme.
+ *
+ * The props are taken whole rather than destructured, because they are a union: which
+ * keys exist depends on the form, and narrowing is what lets `style` be reachable in the
+ * one branch that renders a node and unwritable in the two that do not.
+ */
+declare function Icon(props: IconProps): react.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
+/**
+ * Not a `createSlotContext`: that one throws outside its parent, and an `Icon` has to
+ * work on its own as much as inside a `Button`. An empty context is the honest default —
+ * nothing inherited, so the theme decides.
+ */
+declare const IconContext: react.Context<IconContextValue>;
+declare function useIconContext(): IconContextValue;
+
+/**
+ * The `radius` axis, which is the same ten lines in every component that has one — a key
+ * of the radius scale, applied to one slot, overriding whatever `size` chose.
+ *
+ * It is written here rather than a third time in a recipe because that is the rule §2 bis
+ * states: extract at the second use, and by the end of P3 this axis exists in a dozen
+ * components. Nothing about it is component-specific except which slot carries the corner.
+ *
+ * ```ts
+ * variants: { size: { … }, radius: radiusAxis('root') }
+ * ```
+ *
+ * **More than one slot when a second node has to square off with the first.** A `Switch`
+ * whose track lost its capsule and kept a circular knob is half-rounded, so the axis moves
+ * both: `radiusAxis('track', 'thumb')`.
+ *
+ * The same named corner on each, not an inset-corrected one. Nesting rules would say the
+ * inner radius is the outer less the gap, but here that reaches zero before the outer does
+ * — at `xs` a 3pt track would hold a sharp-cornered knob — and two matched corners read
+ * better than one correct one.
+ *
+ * Variadic rather than an array because every call but that one passes a single slot, and
+ * `radiusAxis('root')` reads better than `radiusAxis(['root'])`.
+ *
+ * The return type is a full `Record<RadiusKey, …>` rather than a partial one, so
+ * `createRecipe` still infers `radius="3xl"` as the axis's value union and a typo in a
+ * caller's `radius` is a type error rather than a silently ignored key.
+ */
+declare function radiusAxis<Slot extends string>(...slots: Slot[]): Record<RadiusKey, StyleFn<Slot>>;
 
 type PortalProps = {
     children: ReactNode;
@@ -27,6 +144,19 @@ declare namespace Portal {
 type PortalMethods = {
     addPortal: (key: string, element: ReactNode) => void;
     removePortal: (key: string) => void;
+    /**
+     * Where the host's own view sits in the window, in points.
+     *
+     * An overlay is measured against a trigger that reports window coordinates, but it is
+     * rendered inside this host — so it is laid out against the host's origin, not the
+     * window's. Anything the two differ by (a status bar, a safe-area inset, a host mounted
+     * below a header) is exactly the distance the overlay would be wrong by. Subtracting it
+     * is what makes `measureInWindow` on the trigger mean the same thing on both sides.
+     */
+    origin: {
+        x: number;
+        y: number;
+    };
 };
 /**
  * `null` outside a host, and `Portal` treats that as "render nothing" rather than
@@ -35,137 +165,103 @@ type PortalMethods = {
  */
 declare const PortalContext: react.Context<PortalMethods | null>;
 
-type PortalHostProps = {
+/** R14 — it renders a view of its own, so it takes that view's style keys as props. */
+type PortalHostProps = ViewStyleProps & {
     children: ReactNode;
 };
 /**
  * Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
  * above navigation — an overlay that renders inside a screen is clipped by it.
  */
-declare function PortalHost({ children }: PortalHostProps): react.JSX.Element;
+declare function PortalHost({ children, ...props }: PortalHostProps): react.JSX.Element;
 declare namespace PortalHost {
     var displayName: string;
 }
 
-/**
- * What the root does under the finger. `scale-highlight` and `scale-ripple` mount their
- * overlay themselves; `scale` mounts none, which is what a root picks when it renders its
- * own `<PressableFeedback.Highlight>` to style it (R1: no prop reaches into another
- * component's insides).
- */
-type FeedbackVariant = 'scale-highlight' | 'scale-ripple' | 'scale' | 'none';
-type AnimationConfig = {
-    scale?: boolean;
-    highlight?: boolean;
-    ripple?: boolean;
-};
-/**
- * `false` and `'disabled'` turn this component's animations off. `'disable-all'` turns
- * them off for its descendants too — a long list kills every row's worklets with one
- * prop instead of threading it down. An object switches them off one at a time.
- */
-type AnimationProp = boolean | 'disabled' | 'disable-all' | AnimationConfig;
-/** `animation` once normalised — what the components actually read. */
-type ResolvedAnimation = {
-    scale: boolean;
-    highlight: boolean;
-    ripple: boolean;
-    /** True when every sub-animation is off: the branch that mounts no worklet at all. */
-    none: boolean;
-    /** Propagated to descendants through context. */
-    disableAll: boolean;
-};
-type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & {
-    /** Controlled: the root owns the state, because its recipe resolves on it (R5). */
-    isPressed?: boolean;
-    /** R8: `disabled` is not part of the public vocabulary, `isX` is. */
-    isDisabled?: boolean;
-    /**
-     * Merge into the single child instead of rendering a pressable (R12) — **keeping the
-     * feedback**. Swapping this component out for a bare `Slot` would silently drop the
-     * touch feedback of every `asChild` control.
-     */
-    asChild?: boolean;
-    feedbackVariant?: FeedbackVariant;
-    animation?: AnimationProp;
+type PressableFeedbackHighlightProps = ViewStyleProps & {
     style?: StyleProp<ViewStyle>;
+    animation?: SlotAnimation;
     /**
-     * `Pressable`'s function form is dropped on purpose. It exists to hand the press state
-     * to children; here the root above already owns that state and this publishes it
-     * through context, so the function form would be a second, quieter source of truth.
+     * The content the wash sits under. Optional: `<Highlight />` on its own is an overlay
+     * among the root's other children, and the root hoists it so order does not matter.
      */
     children?: ReactNode;
 };
-/**
- * A slot's own animation, overriding the blanket one on the root. `false` switches that
- * slot off; the object tunes it. Deliberately two knobs rather than a full timing
- * surface — anything past this is a different animation, and that is a component's job,
- * not a prop's.
- */
-type SlotAnimation = boolean | {
-    /** Milliseconds. Falls back to the shared press timing. */
-    duration?: number;
-    /** How far the overlay goes at full press, 0 to 1. */
-    opacity?: number;
-};
-type FeedbackContext = {
-    isPressed: boolean;
-    animation: ResolvedAnimation;
-    /** Absent on the static branch, where nothing animates and no worklet is mounted. */
-    progress?: SharedValue<number>;
-    /**
-     * Bumped on every press-in. The ripple starts from this rather than from a `useEffect`
-     * on `isPressed`: a one-shot driven by a boolean depends on React re-rendering between
-     * the two touch events, and starting it from the event that carries the coordinates is
-     * both simpler and impossible to miss.
-     */
-    pressCount?: SharedValue<number>;
-    /** Where the finger landed, and how big the root is — the ripple needs both. */
-    origin?: SharedValue<{
-        x: number;
-        y: number;
-    }>;
-    size?: SharedValue<{
-        width: number;
-        height: number;
-    }>;
-};
-
-type PressableFeedbackHighlightProps = {
-    style?: StyleProp<ViewStyle>;
-    /** Overrides the blanket `animation` on the root, for this overlay only. */
-    animation?: SlotAnimation;
-};
 /**
  * The press wash: one flat overlay fading in under the finger.
  *
  * It is a **neutral** wash, not the variant's pressed colour. A component picks one or
  * the other — this overlay, or a `pressed` state in its recipe swapping `bg` for
  * `bgPressed` — never both, or a pressed button darkens twice.
+ *
+ * **Wrapping is the readable form**, and it costs nothing:
+ *
+ * ```tsx
+ * <PressableFeedback style={{ flexDirection: 'row', gap: 8 }}>
+ *   <PressableFeedback.Highlight>
+ *     <Icon />
+ *     <Label />
+ *   </PressableFeedback.Highlight>
+ * </PressableFeedback>
+ * ```
+ *
+ * The children are **not** put inside a box. They are returned as siblings of the wash in
+ * a fragment, which has no presence in the host tree — so the root's `flexDirection`,
+ * `gap` and `alignItems` still reach the icon and the label directly, and the rendered
+ * tree is identical to writing the wash as a bare sibling. A real wrapping `View` would
+ * have made the root's layout apply to the wrapper instead, and would have added the depth
+ * §8 removed.
  */
-declare function PressableFeedbackHighlight({ style, animation: override, }: PressableFeedbackHighlightProps): react.JSX.Element;
+declare function PressableFeedbackHighlight({ style, animation: override, children, ...props }: PressableFeedbackHighlightProps): react.JSX.Element;
 declare namespace PressableFeedbackHighlight {
     var displayName: string;
 }
 
-type PressableFeedbackRippleProps = {
+type PressableFeedbackRippleProps = ViewStyleProps & {
+    /** Applies to the wave itself, not to the container that clips it. */
     style?: StyleProp<ViewStyle>;
-    /** Overrides the blanket `animation` on the root, for this overlay only. */
     animation?: SlotAnimation;
+    /**
+     * The content the wave washes under. Optional: `<Ripple />` on its own is an overlay
+     * among the root's other children, and the root hoists it so order does not matter.
+     */
+    children?: ReactNode;
 };
 /**
  * A circle washing outwards from where the finger landed.
  *
- * It is a **one-shot, independent of how long the press lasts**: the wave runs its course
- * and ends, the way a ripple in water does. Tying it to the press would leave a disc
- * parked on the control for as long as a finger rests there.
+ * **The root drives it, this only draws it.** The root is the touch surface: touches on a
+ * component's own children — a button's label — bubble up to the `Pressable`, and never to
+ * this overlay, which is their sibling rather than their parent. An overlay owning the
+ * handlers works on the padding and does nothing on the text, which is the kind of bug that
+ * looks like a rendering problem.
+ *
+ * Its ink and its corners come from the root, which reads both off its own style — only
+ * the root knows what the wave sits on, or what shape it has to stay inside.
+ *
+ * **Wrapping is the readable form**, and it costs nothing:
  *
- * It needs the root to clip — `PressableFeedback` sets `overflow: 'hidden'` when it
- * mounts one — and it renders nothing on the static branch: a ripple that cannot expand
- * is a coloured disc sitting on the control, which reads as a defect rather than as
- * reduced motion.
+ * ```tsx
+ * <PressableFeedback style={{ flexDirection: 'row', gap: 8 }}>
+ *   <PressableFeedback.Ripple>
+ *     <Icon />
+ *     <Label />
+ *   </PressableFeedback.Ripple>
+ * </PressableFeedback>
+ * ```
+ *
+ * The children are **not** put inside a box. They come back as siblings of the wave's
+ * container in a fragment, which has no presence in the host tree — so the root's
+ * `flexDirection`, `gap` and `alignItems` still reach the icon and the label directly, and
+ * the rendered tree is identical to writing the wave as a bare sibling. Written on its own,
+ * `<Ripple />` is that bare sibling, and the root hoists it so order does not matter.
+ *
+ * The motion is Material's `InkRipple`, and the parts that matter are the ones that are not
+ * obvious: the ink is **independent of the expansion**, the circle **starts at 30%** of its
+ * target rather than at a point, the target is **half the diagonal**, and the centre
+ * **travels** from the finger to the middle of the control. The constants carry the why.
  */
-declare function PressableFeedbackRipple({ style, animation: override, }: PressableFeedbackRippleProps): react.JSX.Element | null;
+declare function PressableFeedbackRipple({ style, animation: override, children, ...props }: PressableFeedbackRippleProps): react.JSX.Element;
 declare namespace PressableFeedbackRipple {
     var displayName: string;
 }
@@ -173,24 +269,66 @@ declare namespace PressableFeedbackRipple {
 declare const useFeedback: () => FeedbackContext;
 
 /**
- * The values the v0 tree shipped with (`Animated.spring` to `0.975`, `bounciness: 0`,
- * over roughly 100ms). Kept identical on purpose: the touch feedback is the part of a
- * library users feel rather than read, and changing its timing in a rewrite would be a
- * regression nobody asked for. `bounciness: 0` is why a duration replaces the spring —
- * a spring with no bounce is a curve.
+ * What marks a component as a press overlay.
+ *
+ * `Symbol.for` rather than a boolean field or an identity check against our own two
+ * components: the registry is global, so two copies of `@xaui/native` in one tree still
+ * agree on what an overlay is, and a third party writing their own overlay — anything that
+ * reads `useFeedback()` and paints under the content — opts into the same treatment
+ * instead of being a second-class citizen.
  */
-declare const PRESS_SCALE = 0.975;
-declare const PRESS_DURATION = 100;
-declare const RELEASE_DURATION = 150;
-/** How far the wash and the ripple go at full press. */
-declare const HIGHLIGHT_OPACITY = 0.08;
-declare const RIPPLE_OPACITY = 0.12;
-declare const RIPPLE_DURATION = 350;
+declare const FEEDBACK_OVERLAY: unique symbol;
+/** Tags a component so `PressableFeedback` paints it under its content. */
+declare function markOverlay<T extends object>(component: T): T;
+
 /**
- * The circle's radius as a multiple of the control's diagonal. Above 1 it covers from
- * any point on the control, so where the finger landed never enters the calculation.
+ * How far a control shrinks under the finger — **before** the width coefficient below.
+ *
+ * The v0 tree shrank everything to a flat `0.975`, which is why a wide button read as
+ * lurching: a ratio applied to a 360pt row moves nine points, and the same ratio on a
+ * 96pt chip moves two. What the eye reads is the displacement, not the ratio.
  */
-declare const RIPPLE_COVERAGE = 1.25;
+declare const PRESS_SCALE = 0.985;
+declare const PRESS_DURATION = 300;
+/**
+ * The width at which `PRESS_SCALE` is applied as written. Wider controls shrink
+ * proportionally less, narrower ones more, so the movement stays roughly constant in
+ * points across a 96pt chip and a full-width button.
+ */
+declare const SCALE_REFERENCE_WIDTH = 300;
+/** The scale a control of `width` should reach when pressed. */
+declare function pressScaleFor(width: number): number;
+/** How far the wash goes at full press, and how long it takes to get there. */
+declare const HIGHLIGHT_OPACITY = 0.1;
+declare const HIGHLIGHT_DURATION = 200;
+/**
+ * The ripple, taken from Material's reference implementation (`InkRipple`) rather than
+ * approximated. Four of its numbers are load-bearing and none of them is obvious:
+ *
+ * - **The opacity is not tied to the expansion.** It reaches full ink in 75ms and stays
+ *   there while the circle keeps growing. Tying the two — the obvious thing to write —
+ *   means the ink is faintest exactly when the circle is small enough to be read as a
+ *   circle, which is why such a ripple looks like nothing at all.
+ * - **The circle starts at 30% of its target**, not at a point. A wave from a dot spends
+ *   its visible life too small to see.
+ * - **The target radius is half the diagonal**, which is what covers the box. Larger and
+ *   the edge leaves the control before the eye catches it, so the effect reads as the
+ *   surface tinting rather than as something spreading.
+ * - **The centre travels** from the finger to the middle of the control as it opens, which
+ *   is what makes it settle into the control instead of flooding out of a corner.
+ *
+ * The expansion runs a full second while the finger is down, and finishes in 225ms once it
+ * lifts — the wave catches up rather than being cut.
+ */
+declare const RIPPLE_OPACITY = 0.1;
+declare const RIPPLE_START_SCALE = 0.3;
+declare const RIPPLE_EXPAND_DURATION = 1000;
+declare const RIPPLE_CONFIRM_DURATION = 225;
+declare const RIPPLE_FADE_IN = 75;
+declare const RIPPLE_FADE_OUT_DELAY = 225;
+declare const RIPPLE_FADE_OUT = 150;
+/** Half the diagonal covers the box from its centre; the 5 is Material's own overshoot. */
+declare function rippleRadiusFor(width: number, height: number): number;
 /**
  * One shape out of four accepted ones, so the components read a record instead of
  * re-deciding what `'disable-all'` meant.
@@ -211,11 +349,16 @@ type ResolvedSlotAnimation = {
  */
 declare function resolveSlotAnimation(override: SlotAnimation | undefined, enabledByRoot: boolean, defaultOpacity: number, defaultDuration?: number): ResolvedSlotAnimation;
 
-declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & {
+/**
+ * The root scales; what else happens under the finger is **composed**, not named by a
+ * prop. An overlay a caller can reach is an overlay a caller can place, style and switch
+ * off — and it is the only shape that survives `asChild`, where the caller's own element
+ * is the pressable and there is no sibling for the primitive to inject.
+ */
+declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "style" | "children" | "disabled"> & ViewStyleProps & {
     isPressed?: boolean;
     isDisabled?: boolean;
     asChild?: boolean;
-    feedbackVariant?: FeedbackVariant;
     animation?: AnimationProp;
     style?: react_native.StyleProp<react_native.ViewStyle>;
     children?: react.ReactNode;
@@ -224,84 +367,38 @@ declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_nati
     Ripple: typeof PressableFeedbackRipple;
 };
 
-/**
- * A slot is a view or a text node, and a recipe writes one object per slot, so the two
- * RN style shapes are merged rather than discriminated per slot.
- */
-type SlotStyle = ViewStyle & TextStyle;
-type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
-/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
-type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
-/** Token names per role — no colour value ever appears in a recipe. */
-type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
-/** The same roles resolved: theme colours, or the slices of a raw `color`. */
-type VariantColors = Partial<Record<VariantRole, string>>;
-/**
- * `disabled` is applied last of the three: a control that is both pressed and disabled
- * has to read disabled.
- */
-type StateName = 'focused' | 'pressed' | 'disabled';
-type States = Partial<Record<StateName, boolean>>;
-/** Reads the theme and the variant's resolved colours; returns one style per slot. */
-type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
-/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
-type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
-/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
-type Selection<Variant extends string, A extends Axes<string>> = {
-    variant?: Variant;
-} & {
-    [Axis in keyof A]?: Extract<keyof A[Axis], string>;
-};
-type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
-    when: Selection<Variant, A>;
-    style: StyleFn<Slot>;
-};
-type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
-    /** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
-    slots: readonly Slot[];
-    base?: StyleFn<Slot>;
-    variantTokens?: Record<Variant, VariantTokens>;
-    /** Where the variant's colours land — written once, and it holds for every variant. */
-    paint?: StyleFn<Slot>;
-    variants?: A;
-    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, Variant, A>>;
-    states?: Partial<Record<StateName, StyleFn<Slot>>>;
-    defaultVariants?: Selection<Variant, A>;
+type SelectionFillProps = {
+    /** Whether the control is on. The fill is the answer, and the mark rides on it. */
+    isVisible: boolean;
+    /** The resolved style of the host component's `fill` slot (R5). */
+    style: StyleProp<ViewStyle>;
+    /** `false` shows the fill without the fade and the scale, and mounts no worklet. */
+    animation?: boolean;
+    /** The mark — a check, a dash, a dot. It appears with the fill, never before it. */
+    children?: ReactNode;
 };
-/** Stable references: the same object for the same tokens, for the app's lifetime. */
-type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
-/** A selection with `defaultVariants` already folded in, keyed by axis name. */
-type ResolvedSelection = Readonly<Record<string, string | undefined>>;
 
-type ResolveArgs<Variant extends string, A extends Axes<string>> = {
-    theme: XAUITheme;
-    selection?: Selection<Variant, A>;
-    states?: States;
-};
-type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
-    color: string;
-};
-type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
-    readonly slots: readonly Slot[];
-    /** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
-    resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
-    /**
-     * The tint pass: the same functions run again with `color`'s slices in place of the
-     * theme's tokens. Uncached and allocating, and only ever called when `color` is set.
-     */
-    tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
-};
 /**
- * A component's style, declared once. Resolution splits in two because the two halves
- * have different lifetimes: everything keyed by a finite token is cached forever, and
- * an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
- * by the number of token combinations rather than by the palette users invent.
- *
- *     const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
- *     const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
- *     <View style={[styles.root, tint?.root, style]} />
+ * The colour a control takes when it is on, and the mark that arrives with it — the
+ * `Checkbox`'s check on its accent square, the `Radio`'s dot in its accent circle.
+ *
+ * It is a node of its own rather than a background on the box, because it has to fade and
+ * grow in **without taking the border with it**, and the mark has to ride along: a check
+ * arriving before its background reads as a glitch rather than as an animation.
+ *
+ * ```tsx
+ * <SelectionFill isVisible={isSelected} style={fillStyle} animation={animation}>
+ *   <Check />
+ * </SelectionFill>
+ * ```
+ *
+ * The style is the host component's own resolved `fill` slot (R5) — this owns the motion
+ * and nothing else, which is what lets two components share it without sharing a recipe.
  */
-declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
+declare function SelectionFill({ isVisible, style, animation, children, }: SelectionFillProps): react.JSX.Element | null;
+declare namespace SelectionFill {
+    var displayName: string;
+}
 
 /**
  * R3: the string a root should wrap in its default text slot, or `null` when it should
@@ -392,4 +489,93 @@ type SlotProps = MergeableProps & {
  */
 declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
 
-export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };
+/**
+ * A panel that grows out of the thing that opened it.
+ *
+ * It starts slightly small and offset **towards** the trigger, so the motion points back
+ * at what opened it: a panel below enters upwards, one above enters downwards, one beside
+ * enters sideways. That is the only reason placement reaches the animation at all.
+ *
+ * Shared by the `Select` and the `Popover`, which is the second use §2 bis waits for. It
+ * lives in `system/` rather than in `utils/` because a `Keyframe` is Reanimated's, and
+ * `utils/` has to stay importable by a test that never mounts anything.
+ */
+declare function anchoredEntering(placement: Placement): react_native_reanimated.ReanimatedKeyframe;
+/**
+ * The mirror, shorter. Closing is an acknowledgement rather than an arrival, and a
+ * dismissal that takes as long as the opening feels like the control is arguing.
+ */
+declare function anchoredExiting(placement: Placement): react_native_reanimated.ReanimatedKeyframe;
+declare const overlayEntering: react_native_reanimated.ReanimatedKeyframe;
+declare const overlayExiting: react_native_reanimated.ReanimatedKeyframe;
+
+/**
+ * The chevron's turn, shared by the `Select` and the `Accordion`.
+ *
+ * HeroUI's numbers. Heavily damped against a very high stiffness: it arrives in about a
+ * fifth of a second and does not overshoot, which is what a turn of 180 degrees needs —
+ * an oscillating chevron reads as a bug rather than as motion.
+ */
+declare const INDICATOR_SPRING: {
+    readonly damping: 140;
+    readonly stiffness: 1000;
+    readonly mass: 4;
+};
+/** Degrees. Down when closed, up when open, turning anticlockwise as HeroUI's does. */
+declare const INDICATOR_ROTATION: readonly [0, -180];
+
+/**
+ * The dismiss affordance shared by everything that can be dismissed — `Chip.Close`,
+ * `Alert.Close`, and the `Dialog`, `Snackbar` and `Sheet` of P5. Each of those is a
+ * five-line call site handing it the styles its own recipe resolved:
+ *
+ * ```tsx
+ * const { closeStyle, closeGlyphStyle, isDisabled } = useChip()
+ *
+ * <CloseButton
+ *   name="Chip.Close"
+ *   baseStyle={closeStyle}
+ *   glyphStyle={closeGlyphStyle}
+ *   isDisabled={isDisabled}
+ * />
+ * ```
+ *
+ * **It owns its press state**, unlike every other pressable in the library, where the
+ * component root owns it because its recipe resolves on it. Here the surrounding
+ * component is usually not a control at all, and where it is, the two are different
+ * targets: pressing the cross must not read as pressing the chip around it.
+ *
+ * With no children it draws its own cross from two bars a quarter turn apart, so a
+ * dismissible component works in a project that has installed no icon set.
+ */
+declare const CloseButton: react.ForwardRefExoticComponent<{
+    name: string;
+    children?: react.ReactNode;
+    baseStyle?: react_native.StyleProp<react_native.ViewStyle>;
+    glyphStyle?: react_native.StyleProp<react_native.ViewStyle>;
+    style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
+} & Omit<PressableFeedbackProps, "style" | "children" | "isPressed"> & react.RefAttributes<View>>;
+
+/** The two slots a component publishes for a `CloseButton`: its box and one cross bar. */
+type CloseButtonSlots = {
+    close: SlotStyle;
+    closeGlyph: SlotStyle;
+};
+/**
+ * The cross's own geometry, for the `base` of any recipe that hosts a `CloseButton`:
+ *
+ * ```ts
+ * base: theme => ({ ...closeButtonBase(theme), root: { … } })
+ * ```
+ *
+ * The bar's thickness and the box's centring belong to the button rather than to the
+ * component around it, so they are written once here. What stays in the recipe is what is
+ * genuinely the component's: the size of the box and the length of the bar, both of which
+ * follow that component's own scale.
+ *
+ * Two bars are rendered, rotated a quarter turn apart, which is why only one is described
+ * and why it is positioned absolutely — they overlap at the centre of the box.
+ */
+declare function closeButtonBase(theme: XAUITheme): CloseButtonSlots;
+
+export { AnimationProp, type AsChildProps, ChevronDownIcon, CloseButton, type CloseButtonSlots, FEEDBACK_OVERLAY, FeedbackContext, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, INDICATOR_ROTATION, INDICATOR_SPRING, Icon, IconComponentProps, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, PressableFeedbackProps, type PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, ResolvedAnimation, SCALE_REFERENCE_WIDTH, SelectionFill, type SelectionFillProps, Slot, SlotAnimation, type SlotProps, SlotStyle, StyleFn, ViewStyleProps, anchoredEntering, anchoredExiting, childrenToString, closeButtonBase, createSlotContext, markOverlay, mergeProps, mergeRefs, overlayEntering, overlayExiting, pressScaleFor, radiusAxis, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps };