@xaui/native 0.9.1-alpha.11 → 0.9.1-alpha.13

package/dist/system/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { Ref, ReactNode, Provider, RefCallback } from 'react';
-import { b as IconProps, a as IconContextValue, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, R as ResolvedAnimation, d as FeedbackVariant } from '../create-recipe-BjSP0zL_.cjs';
-export { A as AnimationConfig, h as Axes, C as CompoundVariant, I as IconComponentProps, P as PressableFeedbackProps, f as Recipe, i as RecipeConfig, g as ResolveArgs, j as ResolvedSelection, k as ResolvedStyles, l as Selection, m as SlotStyle, n as SlotStyles, o as StateName, p as States, q as StyleFn, T as TintArgs, V as VariantColors, r as VariantRole, s as VariantTokens, e as createRecipe } from '../create-recipe-BjSP0zL_.cjs';
+import { ReactNode, Ref, Provider, RefCallback } from 'react';
+import { b as IconProps, a as IconContextValue, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, d as ResolvedAnimation } from '../create-recipe-oiLAlJ4u.cjs';
+export { A as AnimationConfig, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, I as IconComponentProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, n as SlotStyle, o as SlotStyles, p as StateName, q as States, r as StyleFn, v as StyleProps, w as TextStyleProps, T as TintArgs, V as VariantColors, s as VariantRole, t as VariantTokens, x as ViewStyleProps, f as createRecipe } from '../create-recipe-oiLAlJ4u.cjs';
 import * as react_native from 'react-native';
 import { StyleProp, ViewStyle } from 'react-native';
 import 'react-native-reanimated';
@@ -37,8 +37,12 @@ declare function useIconContext(): IconContextValue;
 
 type PressableFeedbackHighlightProps = {
     style?: StyleProp<ViewStyle>;
-    /** Overrides the blanket `animation` on the root, for this overlay only. */
     animation?: SlotAnimation;
+    /**
+     * 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;
 };
 /**
  * The press wash: one flat overlay fading in under the finger.
@@ -46,33 +50,75 @@ type PressableFeedbackHighlightProps = {
  * 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, }: PressableFeedbackHighlightProps): react.JSX.Element;
 declare namespace PressableFeedbackHighlight {
     var displayName: string;
 }
 
 type PressableFeedbackRippleProps = {
+    /** 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.
  *
- * **Two animations, not one, and that is the whole shape of it.** The circle *expands*
- * once per touch, from the point of contact to past the far corner. Its *opacity* follows
- * the finger — up on press, held while the press lasts, out on release. Driving both from
- * one curve is what makes a ripple read wrong: tie opacity to the expansion and the wave
- * is invisible under the finger and brightest once it covers everything, which is a flash
- * of the whole control rather than a wave leaving the touch point.
+ * **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:
+ *
+ * ```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.
  *
- * 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.
+ * 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, }: PressableFeedbackRippleProps): react.JSX.Element;
 declare namespace PressableFeedbackRipple {
     var displayName: string;
 }
@@ -80,24 +126,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.
@@ -118,11 +206,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, "style" | "children" | "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, "children" | "style" | "disabled"> & {
     isPressed?: boolean;
     isDisabled?: boolean;
     asChild?: boolean;
-    feedbackVariant?: FeedbackVariant;
     animation?: AnimationProp;
     style?: react_native.StyleProp<react_native.ViewStyle>;
     children?: react.ReactNode;
@@ -131,6 +224,38 @@ declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_nati
     Ripple: typeof PressableFeedbackRipple;
 };
 
+/**
+ * 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>];
+
 /** Anything React accepts as a ref, plus the absence of one. */
 type PossibleRef<T> = Ref<T> | undefined;
 /**
@@ -262,4 +387,4 @@ type SlotProps = MergeableProps & {
  */
 declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
 
-export { AnimationProp, type AsChildProps, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, ResolvedAnimation, Slot, SlotAnimation, type SlotProps, childrenToString, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback, useIconContext };
+export { AnimationProp, type AsChildProps, FEEDBACK_OVERLAY, FeedbackContext, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, 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, Slot, SlotAnimation, type SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps };

package/dist/system/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { Ref, ReactNode, Provider, RefCallback } from 'react';
-import { b as IconProps, a as IconContextValue, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, R as ResolvedAnimation, d as FeedbackVariant } from '../create-recipe-Dn9kj5Rs.js';
-export { A as AnimationConfig, h as Axes, C as CompoundVariant, I as IconComponentProps, P as PressableFeedbackProps, f as Recipe, i as RecipeConfig, g as ResolveArgs, j as ResolvedSelection, k as ResolvedStyles, l as Selection, m as SlotStyle, n as SlotStyles, o as StateName, p as States, q as StyleFn, T as TintArgs, V as VariantColors, r as VariantRole, s as VariantTokens, e as createRecipe } from '../create-recipe-Dn9kj5Rs.js';
+import { ReactNode, Ref, Provider, RefCallback } from 'react';
+import { b as IconProps, a as IconContextValue, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, d as ResolvedAnimation } from '../create-recipe-3OPwcC6P.js';
+export { A as AnimationConfig, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, I as IconComponentProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, n as SlotStyle, o as SlotStyles, p as StateName, q as States, r as StyleFn, v as StyleProps, w as TextStyleProps, T as TintArgs, V as VariantColors, s as VariantRole, t as VariantTokens, x as ViewStyleProps, f as createRecipe } from '../create-recipe-3OPwcC6P.js';
 import * as react_native from 'react-native';
 import { StyleProp, ViewStyle } from 'react-native';
 import 'react-native-reanimated';
@@ -37,8 +37,12 @@ declare function useIconContext(): IconContextValue;
 
 type PressableFeedbackHighlightProps = {
     style?: StyleProp<ViewStyle>;
-    /** Overrides the blanket `animation` on the root, for this overlay only. */
     animation?: SlotAnimation;
+    /**
+     * 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;
 };
 /**
  * The press wash: one flat overlay fading in under the finger.
@@ -46,33 +50,75 @@ type PressableFeedbackHighlightProps = {
  * 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, }: PressableFeedbackHighlightProps): react.JSX.Element;
 declare namespace PressableFeedbackHighlight {
     var displayName: string;
 }
 
 type PressableFeedbackRippleProps = {
+    /** 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.
  *
- * **Two animations, not one, and that is the whole shape of it.** The circle *expands*
- * once per touch, from the point of contact to past the far corner. Its *opacity* follows
- * the finger — up on press, held while the press lasts, out on release. Driving both from
- * one curve is what makes a ripple read wrong: tie opacity to the expansion and the wave
- * is invisible under the finger and brightest once it covers everything, which is a flash
- * of the whole control rather than a wave leaving the touch point.
+ * **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:
+ *
+ * ```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.
  *
- * 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.
+ * 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, }: PressableFeedbackRippleProps): react.JSX.Element;
 declare namespace PressableFeedbackRipple {
     var displayName: string;
 }
@@ -80,24 +126,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.
@@ -118,11 +206,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, "style" | "children" | "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, "children" | "style" | "disabled"> & {
     isPressed?: boolean;
     isDisabled?: boolean;
     asChild?: boolean;
-    feedbackVariant?: FeedbackVariant;
     animation?: AnimationProp;
     style?: react_native.StyleProp<react_native.ViewStyle>;
     children?: react.ReactNode;
@@ -131,6 +224,38 @@ declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_nati
     Ripple: typeof PressableFeedbackRipple;
 };
 
+/**
+ * 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>];
+
 /** Anything React accepts as a ref, plus the absence of one. */
 type PossibleRef<T> = Ref<T> | undefined;
 /**
@@ -262,4 +387,4 @@ type SlotProps = MergeableProps & {
  */
 declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
 
-export { AnimationProp, type AsChildProps, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, ResolvedAnimation, Slot, SlotAnimation, type SlotProps, childrenToString, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback, useIconContext };
+export { AnimationProp, type AsChildProps, FEEDBACK_OVERLAY, FeedbackContext, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, 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, Slot, SlotAnimation, type SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps };

package/dist/system/index.js

@@ -2,31 +2,43 @@ import {
   Portal,
   PortalContext,
   PortalHost
-} from "../chunk-3TIDEII6.js";
+} from "../chunk-TO6DAGFB.js";
 import {
+  FEEDBACK_OVERLAY,
+  HIGHLIGHT_DURATION,
   HIGHLIGHT_OPACITY,
   Icon,
   IconContext,
   PRESS_DURATION,
   PRESS_SCALE,
   PressableFeedback,
-  RELEASE_DURATION,
-  RIPPLE_COVERAGE,
-  RIPPLE_DURATION,
+  RIPPLE_CONFIRM_DURATION,
+  RIPPLE_EXPAND_DURATION,
+  RIPPLE_FADE_IN,
+  RIPPLE_FADE_OUT,
+  RIPPLE_FADE_OUT_DELAY,
   RIPPLE_OPACITY,
+  RIPPLE_START_SCALE,
+  SCALE_REFERENCE_WIDTH,
   Slot,
   childrenToString,
   createRecipe,
   createSlotContext,
+  markOverlay,
   mergeProps,
   mergeRefs,
+  pressScaleFor,
   resolveAnimation,
   resolveSlotAnimation,
+  rippleRadiusFor,
   useFeedback,
-  useIconContext
-} from "../chunk-R4HJCQPI.js";
-import "../chunk-X2K2FX3W.js";
+  useIconContext,
+  useStyleProps
+} from "../chunk-B3EAZ2CC.js";
+import "../chunk-XJARE6SC.js";
 export {
+  FEEDBACK_OVERLAY,
+  HIGHLIGHT_DURATION,
   HIGHLIGHT_OPACITY,
   Icon,
   IconContext,
@@ -36,18 +48,26 @@ export {
   PortalContext,
   PortalHost,
   PressableFeedback,
-  RELEASE_DURATION,
-  RIPPLE_COVERAGE,
-  RIPPLE_DURATION,
+  RIPPLE_CONFIRM_DURATION,
+  RIPPLE_EXPAND_DURATION,
+  RIPPLE_FADE_IN,
+  RIPPLE_FADE_OUT,
+  RIPPLE_FADE_OUT_DELAY,
   RIPPLE_OPACITY,
+  RIPPLE_START_SCALE,
+  SCALE_REFERENCE_WIDTH,
   Slot,
   childrenToString,
   createRecipe,
   createSlotContext,
+  markOverlay,
   mergeProps,
   mergeRefs,
+  pressScaleFor,
   resolveAnimation,
   resolveSlotAnimation,
+  rippleRadiusFor,
   useFeedback,
-  useIconContext
+  useIconContext,
+  useStyleProps
 };