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

package/dist/{chunk-NQ5WWF77.js → chunk-SKVKAJ5Y.js}

@@ -1,5 +1,5 @@
-import { Icon, PressableFeedback, childrenToString, createRecipe, createSlotContext } from "./chunk-R4HJCQPI.js";
-import { useXAUITheme } from "./chunk-X2K2FX3W.js";
+import { Icon, PressableFeedback, childrenToString, createRecipe, createSlotContext, useStyleProps } from "./chunk-KLHHV4RU.js";
+import { useXAUITheme } from "./chunk-EMXBFHIP.js";
 
 // src/components/button/button.context.ts
 var [ButtonProvider, useButton] = createSlotContext("Button");
@@ -30,15 +30,16 @@ var ButtonLabel = forwardRef(function ButtonLabel2({
   children,
   style,
   numberOfLines = 1,
-  ...rest
+  ...props
 }, ref) {
   const {
     labelStyle
   } = useButton();
+  const [styleProps, rest] = useStyleProps(props);
   return /* @__PURE__ */jsx2(Text, {
     ref,
     numberOfLines,
-    style: [labelStyle, style],
+    style: [labelStyle, styleProps, style],
     ...rest,
     children
   });
@@ -53,23 +54,26 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var ROTATION_DURATION = 800;
 function ButtonSpinner({
   style,
-  animation = true
+  animation = true,
+  ...props
 }) {
   const {
     spinnerStyle
   } = useButton();
+  const [styleProps] = useStyleProps(props);
+  const ringStyle = [spinnerStyle, styleProps, style];
   if (!animation) return /* @__PURE__ */jsx3(View, {
-    style: [spinnerStyle, style]
+    style: ringStyle
   });
   return /* @__PURE__ */jsx3(SpinningRing, {
-    style: [spinnerStyle, style]
+    style: ringStyle
   });
 }
 ButtonSpinner.displayName = "XAUI.Button.Spinner";
-const _worklet_1014689086859_init_data = {
-  code: "function chunkNQ5WWF77Js1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
-  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NQ5WWF77.js",
-  sourceMap: "{\"version\":3,\"names\":[\"chunkNQ5WWF77Js1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NQ5WWF77.js\"],\"mappings\":\"AAsEyC,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE3C,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
+const _worklet_17512781929349_init_data = {
+  code: "function chunkSKVKAJ5YJs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SKVKAJ5Y.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkSKVKAJ5YJs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SKVKAJ5Y.js\"],\"mappings\":\"AA0EyC,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE3C,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
 };
 function SpinningRing({
   style
@@ -82,28 +86,28 @@ function SpinningRing({
     }), -1, false);
     return () => cancelAnimation(angle);
   }, [angle]);
-  const animatedStyle = useAnimatedStyle(function chunkNQ5WWF77Js1Factory({
-    _worklet_1014689086859_init_data,
+  const animatedStyle = useAnimatedStyle(function chunkSKVKAJ5YJs1Factory({
+    _worklet_17512781929349_init_data,
     angle
   }) {
     const _e = [new global.Error(), -2, -27];
-    const chunkNQ5WWF77Js1 = function () {
+    const chunkSKVKAJ5YJs1 = function () {
       return {
         transform: [{
           rotate: `${angle.value}deg`
         }]
       };
     };
-    chunkNQ5WWF77Js1.__closure = {
+    chunkSKVKAJ5YJs1.__closure = {
       angle
     };
-    chunkNQ5WWF77Js1.__workletHash = 1014689086859;
-    chunkNQ5WWF77Js1.__pluginVersion = "0.7.4";
-    chunkNQ5WWF77Js1.__initData = _worklet_1014689086859_init_data;
-    chunkNQ5WWF77Js1.__stackDetails = _e;
-    return chunkNQ5WWF77Js1;
+    chunkSKVKAJ5YJs1.__workletHash = 17512781929349;
+    chunkSKVKAJ5YJs1.__pluginVersion = "0.7.4";
+    chunkSKVKAJ5YJs1.__initData = _worklet_17512781929349_init_data;
+    chunkSKVKAJ5YJs1.__stackDetails = _e;
+    return chunkSKVKAJ5YJs1;
   }({
-    _worklet_1014689086859_init_data,
+    _worklet_17512781929349_init_data,
     angle
   }), [angle]);
   return /* @__PURE__ */jsx3(Animated.View, {
@@ -410,17 +414,15 @@ var ButtonRoot = forwardRef2(function Button({
   isLoading = false,
   isIconOnly = false,
   asChild = false,
-  // `scale` and not `scale-highlight`: the recipe's `pressed` state already paints the
-  // variant's own pressed colour, and a neutral wash on top would darken it twice.
-  feedbackVariant = "scale",
   accessibilityRole = "button",
   accessibilityState,
   style,
   onPressIn,
   onPressOut,
-  ...rest
+  ...props
 }, ref) {
   const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
   const [isPressed, press] = usePressState({
     onPressIn,
     onPressOut
@@ -461,7 +463,7 @@ var ButtonRoot = forwardRef2(function Button({
       isLoading
     };
   }, [styles, tint, isDisabled, isLoading]);
-  const rootStyle = [styles.root, tint?.root, typeof style === "function" ? style({
+  const rootStyle = [styles.root, tint?.root, styleProps, typeof style === "function" ? style({
     pressed: isPressed
   }) : style];
   const text = childrenToString(children);
@@ -476,7 +478,6 @@ var ButtonRoot = forwardRef2(function Button({
       isPressed,
       isDisabled: isDisabled || isLoading,
       asChild,
-      feedbackVariant,
       accessibilityRole,
       accessibilityState: {
         disabled: isDisabled,

package/dist/components/button/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunk6OHFG32Ycjs = require('../../chunk-6OHFG32Y.cjs');
-require('../../chunk-E2UGZJBT.cjs');
-require('../../chunk-3QBT3Q65.cjs');
+var _chunkCTULMYVIcjs = require('../../chunk-CTULMYVI.cjs');
+require('../../chunk-GZIOB63O.cjs');
+require('../../chunk-FDUI4IAM.cjs');
 
 
 
 
-exports.Button = _chunk6OHFG32Ycjs.Button; exports.buttonRecipe = _chunk6OHFG32Ycjs.buttonRecipe; exports.useButton = _chunk6OHFG32Ycjs.useButton;
+exports.Button = _chunkCTULMYVIcjs.Button; exports.buttonRecipe = _chunkCTULMYVIcjs.buttonRecipe; exports.useButton = _chunkCTULMYVIcjs.useButton;

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

@@ -2,7 +2,7 @@ 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';
 
@@ -15,7 +15,12 @@ type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
  */
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | '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 +42,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 +115,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 +191,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 +320,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,7 +2,7 @@ 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';
 
@@ -15,7 +15,12 @@ type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
  */
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | '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 +42,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 +115,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 +191,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 +320,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-SKVKAJ5Y.js";
+import "../../chunk-KLHHV4RU.js";
+import "../../chunk-EMXBFHIP.js";
 export {
   Button,
   buttonRecipe,