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

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

@@ -2,20 +2,35 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
-import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, f as Recipe, n as SlotStyles } from '../../create-recipe-BjSP0zL_.cjs';
+import { a as IconContextValue, b as IconProps, w as TextStyleProps, P as PressableFeedbackProps, x as ViewStyleProps, g as Recipe, o as SlotStyles, c as AnimationProp } from '../../create-recipe-oiLAlJ4u.cjs';
 import { S as Size, R as RadiusKey, g as XAUITheme } from '../../theme.type-C9bFJKFm.cjs';
 import 'react-native-reanimated';
 
 type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
 /**
- * The ten sanctioned appearances (R7). Emphasis and intention are one flat union, which
- * is why there is no `themeColor` beside it: `primary` … `ghost` are the emphasis levels,
- * and each intention carries its own `-soft` low-emphasis level rather than one of them
- * being special-cased.
+ * The seven sanctioned appearances (R7). Emphasis and intention are one flat union, which
+ * is why there is no `themeColor` beside it.
+ *
+ * The emphasis ladder descends by how much of the accent is left: `primary` is the full
+ * accent, `secondary` its soft slice, `default` drops the accent for the neutral fill,
+ * `tertiary` drops the fill for a border, and `ghost` drops that too. `secondary` is to
+ * `primary` exactly what `danger-soft` is to `danger` — the same soft slice of the same
+ * family, which is why it needs no rule of its own in the recipe.
+ *
+ * **`success` and `warning` are deliberately not here.** A button is something you press,
+ * and neither of those is an action: a success is an outcome and a warning is a state,
+ * both of which a `Chip`, an `Alert` or a `Badge` reports. The theme keeps their tokens —
+ * a component that *does* report status reads them — and a button that genuinely needs a
+ * green fill passes the raw tint instead: `<Button color={theme.colors.success}>`.
  */
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type ButtonVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'danger' | 'danger-soft';
 type ButtonSize = Size;
-type ButtonProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'style' | 'children'> & {
+/**
+ * What the `Button` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the control's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint rather than `TextStyle`'s.
+ */
+type ButtonOwnProps = {
     variant?: ButtonVariant;
     /** Height, padding, gap, radius and type. Never width. */
     size?: ButtonSize;
@@ -37,19 +52,34 @@ type ButtonProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'st
     style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
     children?: ReactNode;
 };
-type ButtonLabelProps = TextProps & {
+type ButtonBehaviourProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'style' | 'children'>;
+/**
+ * R14 — the button's own props, the press behaviour it forwards, and every `ViewStyle`
+ * key the two do not already claim. `height` therefore beats the height `size` chose and
+ * `width="100%"` is what replaced `fullWidth`, both because the style props resolve after
+ * the recipe. That is the escape hatch, not the normal path.
+ */
+type ButtonProps = ButtonOwnProps & ButtonBehaviourProps & Omit<ViewStyleProps, keyof ButtonOwnProps | keyof ButtonBehaviourProps>;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type ButtonLabelProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
     children?: ReactNode;
 };
 /**
  * `Icon`'s three forms, plus the `style` every slot carries (R2). `size` and `color`
  * default to what the root resolved; passing either wins over it.
+ *
+ * No style props (R14), deliberately: two of the three forms have no view of our own to
+ * style — `as` hands its props to a third-party component and the children form clones
+ * the caller's element — so a `padding` here would apply in one form out of three. `size`
+ * and `color` are the escape hatch, as they already are for `style`.
  */
 type ButtonIconProps = IconProps;
-type ButtonSpinnerProps = {
+type ButtonSpinnerOwnProps = {
     style?: StyleProp<ViewStyle>;
     /** `false` stops the rotation. The ring stays, so the button does not change size. */
     animation?: boolean;
 };
+type ButtonSpinnerProps = ButtonSpinnerOwnProps & Omit<ViewStyleProps, keyof ButtonSpinnerOwnProps>;
 /**
  * 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
@@ -95,7 +125,7 @@ declare namespace ButtonIcon {
  * and its variant with nothing to pass. P3 extracts it into the standalone `Spinner`, and
  * this slot becomes its call site.
  */
-declare function ButtonSpinner({ style, animation }: ButtonSpinnerProps): react.JSX.Element;
+declare function ButtonSpinner({ style, animation, ...props }: ButtonSpinnerProps): react.JSX.Element;
 declare namespace ButtonSpinner {
     var displayName: string;
 }
@@ -171,7 +201,126 @@ declare const buttonRecipe: Recipe<"label" | "root" | "icon" | "spinner", Button
     };
 }>;
 
-declare const Button: react.ForwardRefExoticComponent<Omit<PressableFeedbackProps, "style" | "children" | "isPressed" | "isDisabled"> & {
+declare const Button: react.ForwardRefExoticComponent<{
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isIconOnly?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
+    children?: react.ReactNode;
+} & {
+    id?: string | undefined | undefined;
+    onLayout?: ((event: react_native.LayoutChangeEvent) => void) | undefined | undefined;
+    testID?: string | undefined | undefined;
+    nativeID?: string | undefined | undefined;
+    accessible?: boolean | undefined | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: react_native.AccessibilityActionName | string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined | undefined;
+    'aria-label'?: string | undefined | undefined;
+    accessibilityRole?: react_native.AccessibilityRole | undefined;
+    accessibilityState?: react_native.AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined | undefined;
+    'aria-disabled'?: boolean | undefined | undefined;
+    'aria-expanded'?: boolean | undefined | undefined;
+    'aria-selected'?: boolean | undefined | undefined;
+    accessibilityHint?: string | undefined | undefined;
+    accessibilityValue?: react_native.AccessibilityValue | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    onAccessibilityAction?: ((event: react_native.AccessibilityActionEvent) => void) | undefined | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
+    'aria-hidden'?: boolean | undefined | undefined;
+    'aria-modal'?: boolean | undefined | undefined;
+    role?: react_native.Role | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
+    'aria-live'?: ("polite" | "assertive" | "off") | undefined | undefined;
+    screenReaderFocusable?: boolean | undefined | undefined;
+    accessibilityElementsHidden?: boolean | undefined | undefined;
+    accessibilityViewIsModal?: boolean | undefined | undefined;
+    onAccessibilityEscape?: (() => void) | undefined | undefined;
+    onAccessibilityTap?: (() => void) | undefined | undefined;
+    onMagicTap?: (() => void) | undefined | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
+    accessibilityLanguage?: string | undefined | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
+    accessibilityLargeContentTitle?: string | undefined | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
+    hitSlop?: number | react_native.Insets | null | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
+    removeClippedSubviews?: boolean | undefined | undefined;
+    collapsable?: boolean | undefined | undefined;
+    collapsableChildren?: boolean | undefined | undefined;
+    onBlur?: null | ((event: react_native.NativeSyntheticEvent<react_native.TargetedEvent>) => void) | undefined | undefined;
+    onFocus?: null | ((event: react_native.NativeSyntheticEvent<react_native.TargetedEvent>) => void) | undefined | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined | undefined;
+    focusable?: boolean | undefined | undefined;
+    tabIndex?: 0 | -1 | undefined | undefined;
+    shouldRasterizeIOS?: boolean | undefined | undefined;
+    isTVSelectable?: boolean | undefined | undefined;
+    hasTVPreferredFocus?: boolean | undefined | undefined;
+    tvParallaxShiftDistanceX?: number | undefined | undefined;
+    tvParallaxShiftDistanceY?: number | undefined | undefined;
+    tvParallaxTiltAngle?: number | undefined | undefined;
+    tvParallaxMagnification?: number | undefined | undefined;
+    onStartShouldSetResponder?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onMoveShouldSetResponder?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onResponderEnd?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderGrant?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderReject?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderMove?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderRelease?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderStart?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderTerminationRequest?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onResponderTerminate?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onStartShouldSetResponderCapture?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onMoveShouldSetResponderCapture?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onTouchStart?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchMove?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchEnd?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchCancel?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchEndCapture?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPointerEnter?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerEnterCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerLeave?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerLeaveCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerMove?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerMoveCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerCancel?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerCancelCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerDown?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerDownCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerUp?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerUpCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onHoverIn?: null | ((event: react_native.MouseEvent) => void) | undefined | undefined;
+    onHoverOut?: null | ((event: react_native.MouseEvent) => void) | undefined | undefined;
+    onPress?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPressIn?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPressOut?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onLongPress?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    cancelable?: null | boolean | undefined | undefined;
+    delayHoverIn?: number | null | undefined | undefined;
+    delayHoverOut?: number | null | undefined | undefined;
+    delayLongPress?: null | number | undefined | undefined;
+    pressRetentionOffset?: number | react_native.Insets | null | undefined;
+    android_disableSound?: null | boolean | undefined | undefined;
+    android_ripple?: react_native.PressableAndroidRippleConfig | null | undefined;
+    testOnly_pressed?: null | boolean | undefined | undefined;
+    unstable_pressDelay?: number | undefined | undefined;
+    asChild?: boolean | undefined;
+    animation?: AnimationProp | undefined;
+} & Omit<ViewStyleProps, "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "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" | "onHoverIn" | "onHoverOut" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "delayLongPress" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "asChild" | "animation" | keyof {
     variant?: ButtonVariant;
     size?: ButtonSize;
     radius?: RadiusKey;
@@ -181,8 +330,8 @@ declare const Button: react.ForwardRefExoticComponent<Omit<PressableFeedbackProp
     isIconOnly?: boolean;
     style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
     children?: react.ReactNode;
-} & react.RefAttributes<react_native.View>> & {
-    Label: react.ForwardRefExoticComponent<react_native.TextProps & {
+}> & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
         children?: react.ReactNode;
     } & react.RefAttributes<react_native.Text>>;
     Icon: typeof ButtonIcon;

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

@@ -2,20 +2,35 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
-import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, f as Recipe, n as SlotStyles } from '../../create-recipe-Dn9kj5Rs.js';
+import { a as IconContextValue, b as IconProps, w as TextStyleProps, P as PressableFeedbackProps, x as ViewStyleProps, g as Recipe, o as SlotStyles, c as AnimationProp } from '../../create-recipe-3OPwcC6P.js';
 import { S as Size, R as RadiusKey, g as XAUITheme } from '../../theme.type-C9bFJKFm.js';
 import 'react-native-reanimated';
 
 type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
 /**
- * The ten sanctioned appearances (R7). Emphasis and intention are one flat union, which
- * is why there is no `themeColor` beside it: `primary` … `ghost` are the emphasis levels,
- * and each intention carries its own `-soft` low-emphasis level rather than one of them
- * being special-cased.
+ * The seven sanctioned appearances (R7). Emphasis and intention are one flat union, which
+ * is why there is no `themeColor` beside it.
+ *
+ * The emphasis ladder descends by how much of the accent is left: `primary` is the full
+ * accent, `secondary` its soft slice, `default` drops the accent for the neutral fill,
+ * `tertiary` drops the fill for a border, and `ghost` drops that too. `secondary` is to
+ * `primary` exactly what `danger-soft` is to `danger` — the same soft slice of the same
+ * family, which is why it needs no rule of its own in the recipe.
+ *
+ * **`success` and `warning` are deliberately not here.** A button is something you press,
+ * and neither of those is an action: a success is an outcome and a warning is a state,
+ * both of which a `Chip`, an `Alert` or a `Badge` reports. The theme keeps their tokens —
+ * a component that *does* report status reads them — and a button that genuinely needs a
+ * green fill passes the raw tint instead: `<Button color={theme.colors.success}>`.
  */
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type ButtonVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'danger' | 'danger-soft';
 type ButtonSize = Size;
-type ButtonProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'style' | 'children'> & {
+/**
+ * What the `Button` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the control's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint rather than `TextStyle`'s.
+ */
+type ButtonOwnProps = {
     variant?: ButtonVariant;
     /** Height, padding, gap, radius and type. Never width. */
     size?: ButtonSize;
@@ -37,19 +52,34 @@ type ButtonProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'st
     style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
     children?: ReactNode;
 };
-type ButtonLabelProps = TextProps & {
+type ButtonBehaviourProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'style' | 'children'>;
+/**
+ * R14 — the button's own props, the press behaviour it forwards, and every `ViewStyle`
+ * key the two do not already claim. `height` therefore beats the height `size` chose and
+ * `width="100%"` is what replaced `fullWidth`, both because the style props resolve after
+ * the recipe. That is the escape hatch, not the normal path.
+ */
+type ButtonProps = ButtonOwnProps & ButtonBehaviourProps & Omit<ViewStyleProps, keyof ButtonOwnProps | keyof ButtonBehaviourProps>;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type ButtonLabelProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
     children?: ReactNode;
 };
 /**
  * `Icon`'s three forms, plus the `style` every slot carries (R2). `size` and `color`
  * default to what the root resolved; passing either wins over it.
+ *
+ * No style props (R14), deliberately: two of the three forms have no view of our own to
+ * style — `as` hands its props to a third-party component and the children form clones
+ * the caller's element — so a `padding` here would apply in one form out of three. `size`
+ * and `color` are the escape hatch, as they already are for `style`.
  */
 type ButtonIconProps = IconProps;
-type ButtonSpinnerProps = {
+type ButtonSpinnerOwnProps = {
     style?: StyleProp<ViewStyle>;
     /** `false` stops the rotation. The ring stays, so the button does not change size. */
     animation?: boolean;
 };
+type ButtonSpinnerProps = ButtonSpinnerOwnProps & Omit<ViewStyleProps, keyof ButtonSpinnerOwnProps>;
 /**
  * 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
@@ -95,7 +125,7 @@ declare namespace ButtonIcon {
  * and its variant with nothing to pass. P3 extracts it into the standalone `Spinner`, and
  * this slot becomes its call site.
  */
-declare function ButtonSpinner({ style, animation }: ButtonSpinnerProps): react.JSX.Element;
+declare function ButtonSpinner({ style, animation, ...props }: ButtonSpinnerProps): react.JSX.Element;
 declare namespace ButtonSpinner {
     var displayName: string;
 }
@@ -171,7 +201,126 @@ declare const buttonRecipe: Recipe<"label" | "root" | "icon" | "spinner", Button
     };
 }>;
 
-declare const Button: react.ForwardRefExoticComponent<Omit<PressableFeedbackProps, "style" | "children" | "isPressed" | "isDisabled"> & {
+declare const Button: react.ForwardRefExoticComponent<{
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isIconOnly?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
+    children?: react.ReactNode;
+} & {
+    id?: string | undefined | undefined;
+    onLayout?: ((event: react_native.LayoutChangeEvent) => void) | undefined | undefined;
+    testID?: string | undefined | undefined;
+    nativeID?: string | undefined | undefined;
+    accessible?: boolean | undefined | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: react_native.AccessibilityActionName | string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined | undefined;
+    'aria-label'?: string | undefined | undefined;
+    accessibilityRole?: react_native.AccessibilityRole | undefined;
+    accessibilityState?: react_native.AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined | undefined;
+    'aria-disabled'?: boolean | undefined | undefined;
+    'aria-expanded'?: boolean | undefined | undefined;
+    'aria-selected'?: boolean | undefined | undefined;
+    accessibilityHint?: string | undefined | undefined;
+    accessibilityValue?: react_native.AccessibilityValue | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    onAccessibilityAction?: ((event: react_native.AccessibilityActionEvent) => void) | undefined | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
+    'aria-hidden'?: boolean | undefined | undefined;
+    'aria-modal'?: boolean | undefined | undefined;
+    role?: react_native.Role | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
+    'aria-live'?: ("polite" | "assertive" | "off") | undefined | undefined;
+    screenReaderFocusable?: boolean | undefined | undefined;
+    accessibilityElementsHidden?: boolean | undefined | undefined;
+    accessibilityViewIsModal?: boolean | undefined | undefined;
+    onAccessibilityEscape?: (() => void) | undefined | undefined;
+    onAccessibilityTap?: (() => void) | undefined | undefined;
+    onMagicTap?: (() => void) | undefined | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
+    accessibilityLanguage?: string | undefined | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
+    accessibilityLargeContentTitle?: string | undefined | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
+    hitSlop?: number | react_native.Insets | null | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
+    removeClippedSubviews?: boolean | undefined | undefined;
+    collapsable?: boolean | undefined | undefined;
+    collapsableChildren?: boolean | undefined | undefined;
+    onBlur?: null | ((event: react_native.NativeSyntheticEvent<react_native.TargetedEvent>) => void) | undefined | undefined;
+    onFocus?: null | ((event: react_native.NativeSyntheticEvent<react_native.TargetedEvent>) => void) | undefined | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined | undefined;
+    focusable?: boolean | undefined | undefined;
+    tabIndex?: 0 | -1 | undefined | undefined;
+    shouldRasterizeIOS?: boolean | undefined | undefined;
+    isTVSelectable?: boolean | undefined | undefined;
+    hasTVPreferredFocus?: boolean | undefined | undefined;
+    tvParallaxShiftDistanceX?: number | undefined | undefined;
+    tvParallaxShiftDistanceY?: number | undefined | undefined;
+    tvParallaxTiltAngle?: number | undefined | undefined;
+    tvParallaxMagnification?: number | undefined | undefined;
+    onStartShouldSetResponder?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onMoveShouldSetResponder?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onResponderEnd?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderGrant?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderReject?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderMove?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderRelease?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderStart?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onResponderTerminationRequest?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onResponderTerminate?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onStartShouldSetResponderCapture?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onMoveShouldSetResponderCapture?: ((event: react_native.GestureResponderEvent) => boolean) | undefined | undefined;
+    onTouchStart?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchMove?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchEnd?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchCancel?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onTouchEndCapture?: ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPointerEnter?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerEnterCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerLeave?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerLeaveCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerMove?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerMoveCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerCancel?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerCancelCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerDown?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerDownCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerUp?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onPointerUpCapture?: ((event: react_native.PointerEvent) => void) | undefined | undefined;
+    onHoverIn?: null | ((event: react_native.MouseEvent) => void) | undefined | undefined;
+    onHoverOut?: null | ((event: react_native.MouseEvent) => void) | undefined | undefined;
+    onPress?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPressIn?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onPressOut?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    onLongPress?: null | ((event: react_native.GestureResponderEvent) => void) | undefined | undefined;
+    cancelable?: null | boolean | undefined | undefined;
+    delayHoverIn?: number | null | undefined | undefined;
+    delayHoverOut?: number | null | undefined | undefined;
+    delayLongPress?: null | number | undefined | undefined;
+    pressRetentionOffset?: number | react_native.Insets | null | undefined;
+    android_disableSound?: null | boolean | undefined | undefined;
+    android_ripple?: react_native.PressableAndroidRippleConfig | null | undefined;
+    testOnly_pressed?: null | boolean | undefined | undefined;
+    unstable_pressDelay?: number | undefined | undefined;
+    asChild?: boolean | undefined;
+    animation?: AnimationProp | undefined;
+} & Omit<ViewStyleProps, "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "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" | "onHoverIn" | "onHoverOut" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "delayLongPress" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "asChild" | "animation" | keyof {
     variant?: ButtonVariant;
     size?: ButtonSize;
     radius?: RadiusKey;
@@ -181,8 +330,8 @@ declare const Button: react.ForwardRefExoticComponent<Omit<PressableFeedbackProp
     isIconOnly?: boolean;
     style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
     children?: react.ReactNode;
-} & react.RefAttributes<react_native.View>> & {
-    Label: react.ForwardRefExoticComponent<react_native.TextProps & {
+}> & react.RefAttributes<react_native.View>> & {
+    Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
         children?: react.ReactNode;
     } & react.RefAttributes<react_native.Text>>;
     Icon: typeof ButtonIcon;

package/dist/components/button/index.js

@@ -2,9 +2,9 @@ import {
   Button,
   buttonRecipe,
   useButton
-} from "../../chunk-NQ5WWF77.js";
-import "../../chunk-R4HJCQPI.js";
-import "../../chunk-X2K2FX3W.js";
+} from "../../chunk-RWLODK55.js";
+import "../../chunk-B3EAZ2CC.js";
+import "../../chunk-XJARE6SC.js";
 export {
   Button,
   buttonRecipe,

package/dist/{create-recipe-Dn9kj5Rs.d.ts → create-recipe-3OPwcC6P.d.ts}

@@ -38,13 +38,6 @@ type IconContextValue = {
     color?: 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;
@@ -77,10 +70,13 @@ type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disab
      * touch feedback of every `asChild` control.
      */
     asChild?: boolean;
-    feedbackVariant?: FeedbackVariant;
     animation?: AnimationProp;
     style?: StyleProp<ViewStyle>;
     /**
+     * The overlays are children, not a prop — `<PressableFeedback.Highlight />` or
+     * `<PressableFeedback.Ripple />`, in any order: the root paints them under everything
+     * else wherever they sit. The scale is the root's own and needs nothing rendered.
+     *
      * `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.
@@ -99,29 +95,93 @@ type SlotAnimation = boolean | {
     /** How far the overlay goes at full press, 0 to 1. */
     opacity?: number;
 };
+/** One ripple wave. Two of them, so a rapid double tap does not cut the one in flight. */
+type RippleWave = {
+    /** `0 → 1` as the circle opens. */
+    expand: SharedValue<number>;
+    /** `0 → 1` as the ink arrives, on its own curve. */
+    alpha: SharedValue<number>;
+    /** Where the finger landed, in the root's coordinates. */
+    origin: SharedValue<{
+        x: number;
+        y: number;
+    }>;
+};
+/**
+ * The corner keys an overlay copies off the root. The `Left`/`Right` forms are absent
+ * rather than forgotten: R13 bans them, because RN mirrors only the logical ones under RTL.
+ */
+type RadiusStyle = Pick<ViewStyle, 'borderRadius' | 'borderStartStartRadius' | 'borderStartEndRadius' | 'borderEndStartRadius' | 'borderEndEndRadius'>;
 type FeedbackContext = {
+    /**
+     * The overlay's ink, resolved by the root from its own background.
+     *
+     * A wash or a wave has to contrast with what it sits on, and only the root knows that —
+     * it flattens its own `style` and reads `backgroundColor`, then takes the contrasting
+     * side the same way a tint does. Black ink at 10% on a saturated fill is close to
+     * invisible, which is the one thing a press indicator cannot be.
+     */
+    ink: string;
+    /**
+     * The root's own corners, so an overlay rounds itself to match. `corners` and not
+     * `radius`: the ripple already has a radius, and it is a length in points rather than a
+     * shape.
+     *
+     * An absolute fill has square corners and every control here is rounded, so without this
+     * both the wash and the wave paint outside the surface at each corner. The overlay
+     * carries the clip rather than the root: clipping the root would also cut a child that
+     * legitimately overflows — a badge on a button's corner — and that child has nothing to
+     * do with the press.
+     */
+    corners: RadiusStyle;
     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;
-    }>;
+    /** How big the root is — what the scale coefficient is computed from. */
     size?: SharedValue<{
         width: number;
         height: number;
     }>;
+    /**
+     * The two ripple waves, driven by the **root**.
+     *
+     * They belong to the root because the root is the touch surface. An overlay carrying its
+     * own handlers only hears touches that land on *it* — and it is a sibling of the label,
+     * not its parent, so pressing the text of a button would do nothing. Touches bubble to
+     * the `Pressable`, which is why the handlers live there and the waves are published down.
+     */
+    waves?: readonly [RippleWave, RippleWave];
 };
 
+/**
+ * R13 — React Native mirrors a layout under RTL through the Start/End properties and only
+ * those. A props API is exactly where someone writes `paddingLeft` without thinking, so
+ * the type removes the temptation instead of leaving it to a review.
+ */
+type DirectionalStyleKey = 'left' | 'right' | 'paddingLeft' | 'paddingRight' | 'marginLeft' | 'marginRight' | 'borderLeftWidth' | 'borderRightWidth' | 'borderLeftColor' | 'borderRightColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius';
+/**
+ * `pointerEvents` is a style key *and* a `View` prop. R14 says the component's own prop
+ * wins, so it stays the prop it has always been and is not exposed twice — the one name
+ * where the two vocabularies collide.
+ */
+type ComponentOwnedStyleKey = 'pointerEvents';
+/**
+ * The style keys of a node, exposed as props (R14). Not a maintained list: it derives
+ * from the React Native type, minus what R13 forbids.
+ *
+ * ```ts
+ * type CardProps = ViewStyleProps & { variant?: CardVariant }
+ * ```
+ */
+type StyleProps<Style> = Omit<Style, DirectionalStyleKey | ComponentOwnedStyleKey>;
+/** A root, or any slot that renders a view. */
+type ViewStyleProps = StyleProps<ViewStyle>;
+/** A text slot — `color`, `fontSize`, `letterSpacing`… */
+type TextStyleProps = StyleProps<TextStyle>;
+/** An image slot — `resizeMode`, `tintColor`… */
+type ImageStyleProps = StyleProps<ImageStyle>;
+
 /**
  * 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.
@@ -207,4 +267,4 @@ type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> =
  */
 declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
 
-export { type AnimationConfig as A, type CompoundVariant as C, type FeedbackContext as F, type IconComponentProps as I, type PressableFeedbackProps as P, type ResolvedAnimation as R, type SlotAnimation as S, type TintArgs as T, type VariantColors as V, type IconContextValue as a, type IconProps as b, type AnimationProp as c, type FeedbackVariant as d, createRecipe as e, type Recipe as f, type ResolveArgs as g, type Axes as h, type RecipeConfig as i, type ResolvedSelection as j, type ResolvedStyles as k, type Selection as l, type SlotStyle as m, type SlotStyles as n, type StateName as o, type States as p, type StyleFn as q, type VariantRole as r, type VariantTokens as s };
+export { type AnimationConfig as A, type CompoundVariant as C, type DirectionalStyleKey as D, type FeedbackContext as F, type IconComponentProps as I, type PressableFeedbackProps as P, type RadiusStyle as R, type SlotAnimation as S, type TintArgs as T, type VariantColors as V, type IconContextValue as a, type IconProps as b, type AnimationProp as c, type ResolvedAnimation as d, type RippleWave as e, createRecipe as f, type Recipe as g, type ResolveArgs as h, type Axes as i, type RecipeConfig as j, type ResolvedSelection as k, type ResolvedStyles as l, type Selection as m, type SlotStyle as n, type SlotStyles as o, type StateName as p, type States as q, type StyleFn as r, type VariantRole as s, type VariantTokens as t, type ImageStyleProps as u, type StyleProps as v, type TextStyleProps as w, type ViewStyleProps as x };