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

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, w as TextStyleProps, P as PressableFeedbackProps, x as ViewStyleProps, g as Recipe, o as SlotStyles, c as AnimationProp } from '../../create-recipe-3OPwcC6P.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-DD9W6m9b.js';
 import { S as Size, R as RadiusKey, g as XAUITheme } from '../../theme.type-C9bFJKFm.js';
 import 'react-native-reanimated';
 
@@ -55,11 +55,15 @@ type ButtonOwnProps = {
 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.
+ * key its own vocabulary does 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.
+ *
+ * `PressableFeedback` carries the same keys, so the third term is redundant today. It
+ * stays because it is the `Button` that owes them: a root states the rule for its own
+ * node rather than inheriting it from whatever it happens to render.
  */
-type ButtonProps = ButtonOwnProps & ButtonBehaviourProps & Omit<ViewStyleProps, keyof ButtonOwnProps | keyof ButtonBehaviourProps>;
+type ButtonProps = ButtonOwnProps & ButtonBehaviourProps & Omit<ViewStyleProps, keyof ButtonOwnProps>;
 /** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
 type ButtonLabelProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
     children?: ReactNode;
@@ -212,6 +216,318 @@ declare const Button: react.ForwardRefExoticComponent<{
     style?: react_native.StyleProp<react_native.ViewStyle> | ((state: react_native.PressableStateCallbackType) => react_native.StyleProp<react_native.ViewStyle>);
     children?: react.ReactNode;
 } & {
+    borderWidth?: number | undefined | undefined;
+    opacity?: react_native.AnimatableNumericValue | undefined;
+    filter?: string | readonly react_native.FilterFunction[] | undefined;
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined | undefined;
+    alignItems?: react_native.FlexAlignType | undefined;
+    alignSelf?: "auto" | react_native.FlexAlignType | undefined;
+    aspectRatio?: number | string | undefined | undefined;
+    boxSizing?: "border-box" | "content-box" | undefined | undefined;
+    columnGap?: number | string | undefined | undefined;
+    direction?: "inherit" | "ltr" | "rtl" | undefined | undefined;
+    display?: "none" | "flex" | "contents" | undefined | undefined;
+    flex?: number | undefined | undefined;
+    flexBasis?: react_native.DimensionValue | undefined;
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined | undefined;
+    flexGrow?: number | undefined | undefined;
+    flexShrink?: number | undefined | undefined;
+    flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined | undefined;
+    gap?: number | string | undefined | undefined;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined | undefined;
+    overflow?: "visible" | "hidden" | "scroll" | undefined | undefined;
+    rowGap?: number | string | undefined | undefined;
+    bottom?: react_native.DimensionValue | undefined;
+    end?: react_native.DimensionValue | undefined;
+    inset?: react_native.DimensionValue | undefined;
+    insetBlock?: react_native.DimensionValue | undefined;
+    insetBlockEnd?: react_native.DimensionValue | undefined;
+    insetBlockStart?: react_native.DimensionValue | undefined;
+    insetInline?: react_native.DimensionValue | undefined;
+    insetInlineEnd?: react_native.DimensionValue | undefined;
+    insetInlineStart?: react_native.DimensionValue | undefined;
+    position?: "absolute" | "relative" | "static" | undefined | undefined;
+    start?: react_native.DimensionValue | undefined;
+    top?: react_native.DimensionValue | undefined;
+    zIndex?: number | undefined | undefined;
+    margin?: react_native.DimensionValue | undefined;
+    marginBlock?: react_native.DimensionValue | undefined;
+    marginBlockEnd?: react_native.DimensionValue | undefined;
+    marginBlockStart?: react_native.DimensionValue | undefined;
+    marginBottom?: react_native.DimensionValue | undefined;
+    marginEnd?: react_native.DimensionValue | undefined;
+    marginHorizontal?: react_native.DimensionValue | undefined;
+    marginInline?: react_native.DimensionValue | undefined;
+    marginInlineEnd?: react_native.DimensionValue | undefined;
+    marginInlineStart?: react_native.DimensionValue | undefined;
+    marginStart?: react_native.DimensionValue | undefined;
+    marginTop?: react_native.DimensionValue | undefined;
+    marginVertical?: react_native.DimensionValue | undefined;
+    padding?: react_native.DimensionValue | undefined;
+    paddingBlock?: react_native.DimensionValue | undefined;
+    paddingBlockEnd?: react_native.DimensionValue | undefined;
+    paddingBlockStart?: react_native.DimensionValue | undefined;
+    paddingBottom?: react_native.DimensionValue | undefined;
+    paddingEnd?: react_native.DimensionValue | undefined;
+    paddingHorizontal?: react_native.DimensionValue | undefined;
+    paddingInline?: react_native.DimensionValue | undefined;
+    paddingInlineEnd?: react_native.DimensionValue | undefined;
+    paddingInlineStart?: react_native.DimensionValue | undefined;
+    paddingStart?: react_native.DimensionValue | undefined;
+    paddingTop?: react_native.DimensionValue | undefined;
+    paddingVertical?: react_native.DimensionValue | undefined;
+    height?: react_native.DimensionValue | undefined;
+    maxHeight?: react_native.DimensionValue | undefined;
+    maxWidth?: react_native.DimensionValue | undefined;
+    minHeight?: react_native.DimensionValue | undefined;
+    minWidth?: react_native.DimensionValue | undefined;
+    width?: react_native.DimensionValue | undefined;
+    borderBlockColor?: react_native.ColorValue | undefined;
+    borderBlockEndColor?: react_native.ColorValue | undefined;
+    borderBlockStartColor?: react_native.ColorValue | undefined;
+    borderBottomColor?: react_native.ColorValue | undefined;
+    borderBottomEndRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderBottomStartRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderBottomWidth?: number | undefined | undefined;
+    borderColor?: react_native.ColorValue | undefined;
+    borderCurve?: "circular" | "continuous" | undefined | undefined;
+    borderEndColor?: react_native.ColorValue | undefined;
+    borderEndEndRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderEndStartRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderEndWidth?: number | undefined | undefined;
+    borderRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderStartColor?: react_native.ColorValue | undefined;
+    borderStartEndRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderStartStartRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderStartWidth?: number | undefined | undefined;
+    borderStyle?: "solid" | "dotted" | "dashed" | undefined | undefined;
+    borderTopColor?: react_native.ColorValue | undefined;
+    borderTopEndRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderTopStartRadius?: string | react_native.AnimatableNumericValue | undefined;
+    borderTopWidth?: number | undefined | undefined;
+    backfaceVisibility?: "visible" | "hidden" | undefined | undefined;
+    backgroundColor?: react_native.ColorValue | undefined;
+    boxShadow?: string | readonly react_native.BoxShadowValue[] | undefined;
+    cursor?: react_native.CursorValue | undefined;
+    elevation?: number | undefined | undefined;
+    experimental_backgroundImage?: string | readonly react_native.GradientValue[] | undefined;
+    isolation?: "auto" | "isolate" | undefined | undefined;
+    mixBlendMode?: react_native.BlendMode | undefined;
+    outlineColor?: react_native.ColorValue | undefined;
+    outlineOffset?: react_native.AnimatableNumericValue | undefined;
+    outlineStyle?: "solid" | "dotted" | "dashed" | undefined | undefined;
+    outlineWidth?: react_native.AnimatableNumericValue | undefined;
+    shadowColor?: react_native.ColorValue | undefined;
+    shadowOffset?: Readonly<{
+        width: number;
+        height: number;
+    }> | undefined;
+    shadowOpacity?: react_native.AnimatableNumericValue | undefined;
+    shadowRadius?: number | undefined | undefined;
+    rotation?: react_native.AnimatableNumericValue | undefined;
+    scaleX?: react_native.AnimatableNumericValue | undefined;
+    scaleY?: react_native.AnimatableNumericValue | undefined;
+    transform?: string | readonly (({
+        scaleX: react_native.AnimatableNumericValue;
+    } & {
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        scaleY: react_native.AnimatableNumericValue;
+    } & {
+        scaleX?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        translateX: react_native.AnimatableNumericValue | `${number}%`;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        translateY: react_native.AnimatableNumericValue | `${number}%`;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        perspective: react_native.AnimatableNumericValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotate: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateX: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateY: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateZ: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        scale: react_native.AnimatableNumericValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        skewX: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        skewY: react_native.AnimatableStringValue;
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        matrix?: undefined;
+    }) | ({
+        matrix: react_native.AnimatableNumericValue[];
+    } & {
+        scaleX?: undefined;
+        scaleY?: undefined;
+        translateX?: undefined;
+        translateY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        scale?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+    }))[] | undefined;
+    transformMatrix?: number[] | undefined;
+    transformOrigin?: string | (string | number)[] | undefined;
+    translateX?: react_native.AnimatableNumericValue | undefined;
+    translateY?: react_native.AnimatableNumericValue | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
     id?: string | undefined | undefined;
     onLayout?: ((event: react_native.LayoutChangeEvent) => void) | undefined | undefined;
     testID?: string | undefined | undefined;
@@ -258,7 +574,6 @@ declare const Button: react.ForwardRefExoticComponent<{
     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;
@@ -320,7 +635,7 @@ declare const Button: react.ForwardRefExoticComponent<{
     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 {
+} & Omit<ViewStyleProps, keyof {
     variant?: ButtonVariant;
     size?: ButtonSize;
     radius?: RadiusKey;

package/dist/components/button/index.js

@@ -2,8 +2,8 @@ import {
   Button,
   buttonRecipe,
   useButton
-} from "../../chunk-RWLODK55.js";
-import "../../chunk-B3EAZ2CC.js";
+} from "../../chunk-E3756MJC.js";
+import "../../chunk-64L44HEI.js";
 import "../../chunk-XJARE6SC.js";
 export {
   Button,

package/dist/{create-recipe-oiLAlJ4u.d.cts → create-recipe-BcUu9b2I.d.cts}

@@ -1,8 +1,36 @@
 import { ComponentType, ReactNode } from 'react';
-import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle, TextStyle } from 'react-native';
+import { ImageStyle, TextStyle, ViewStyle, ImageSourcePropType, StyleProp, PressableProps } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from './theme.type-C9bFJKFm.cjs';
 
+/**
+ * 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>;
+
 /**
  * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
  * `as` is handed. It is a convention rather than an interface anyone published, which is
@@ -12,7 +40,12 @@ type IconComponentProps = {
     size?: number;
     color?: string;
 };
-type IconProps = {
+/**
+ * R14 reaches the **`source` form only**, exactly like `style` below and for the same
+ * reason: it is the one of the three forms where we render the node. On the other two,
+ * `size` and `color` are what shapes the icon.
+ */
+type IconProps = ImageStyleProps & {
     /** An icon component. `size` and `color` are injected into it. */
     as?: ComponentType<IconComponentProps>;
     /** A raw `react-native-svg` element, cloned with the resolved size and colour. */
@@ -59,7 +92,12 @@ type ResolvedAnimation = {
     /** Propagated to descendants through context. */
     disableAll: boolean;
 };
-type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & {
+/**
+ * R14 — it renders a `Pressable`, so it takes that node's style keys as props. The
+ * primitive every pressable component in the library is built on cannot be the one place
+ * where `padding={16}` has to become an object again.
+ */
+type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & ViewStyleProps & {
     /** Controlled: the root owns the state, because its recipe resolves on it (R5). */
     isPressed?: boolean;
     /** R8: `disabled` is not part of the public vocabulary, `isX` is. */
@@ -154,34 +192,6 @@ type FeedbackContext = {
     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.

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

@@ -1,8 +1,36 @@
 import { ComponentType, ReactNode } from 'react';
-import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle, TextStyle } from 'react-native';
+import { ImageStyle, TextStyle, ViewStyle, ImageSourcePropType, StyleProp, PressableProps } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 import { g as XAUITheme, X as XAUIColors } from './theme.type-C9bFJKFm.js';
 
+/**
+ * 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>;
+
 /**
  * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
  * `as` is handed. It is a convention rather than an interface anyone published, which is
@@ -12,7 +40,12 @@ type IconComponentProps = {
     size?: number;
     color?: string;
 };
-type IconProps = {
+/**
+ * R14 reaches the **`source` form only**, exactly like `style` below and for the same
+ * reason: it is the one of the three forms where we render the node. On the other two,
+ * `size` and `color` are what shapes the icon.
+ */
+type IconProps = ImageStyleProps & {
     /** An icon component. `size` and `color` are injected into it. */
     as?: ComponentType<IconComponentProps>;
     /** A raw `react-native-svg` element, cloned with the resolved size and colour. */
@@ -59,7 +92,12 @@ type ResolvedAnimation = {
     /** Propagated to descendants through context. */
     disableAll: boolean;
 };
-type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & {
+/**
+ * R14 — it renders a `Pressable`, so it takes that node's style keys as props. The
+ * primitive every pressable component in the library is built on cannot be the one place
+ * where `padding={16}` has to become an object again.
+ */
+type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & ViewStyleProps & {
     /** Controlled: the root owns the state, because its recipe resolves on it (R5). */
     isPressed?: boolean;
     /** R8: `disabled` is not part of the public vocabulary, `isX` is. */
@@ -154,34 +192,6 @@ type FeedbackContext = {
     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.

package/dist/index.cjs

@@ -4,12 +4,12 @@
 
 
 
-var _chunkMLJ543GPcjs = require('./chunk-MLJ543GP.cjs');
+var _chunkNLFE3CRMcjs = require('./chunk-NLFE3CRM.cjs');
 
 
 
 
-var _chunk2FOEFUPMcjs = require('./chunk-2FOEFUPM.cjs');
+var _chunkBAACHVM4cjs = require('./chunk-BAACHVM4.cjs');
 
 
 
@@ -41,7 +41,7 @@ var _chunk2FOEFUPMcjs = require('./chunk-2FOEFUPM.cjs');
 
 
 
-var _chunkIVVFYUDWcjs = require('./chunk-IVVFYUDW.cjs');
+var _chunkPUER6Y4Mcjs = require('./chunk-PUER6Y4M.cjs');
 
 
 
@@ -90,7 +90,7 @@ function useControllableState({
 function useControlWarning(isControlled) {
   const wasControlled = _react.useRef.call(void 0, isControlled);
   if (wasControlled.current !== isControlled) {
-    _chunkMLJ543GPcjs.warnDev.call(void 0, 
+    _chunkNLFE3CRMcjs.warnDev.call(void 0, 
       `a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`
     );
     wasControlled.current = isControlled;
@@ -100,7 +100,7 @@ function useControlWarning(isControlled) {
 // src/hooks/use-merged-ref.ts
 
 function useMergedRef(...refs) {
-  return _react.useMemo.call(void 0, () => _chunkIVVFYUDWcjs.mergeRefs.call(void 0, ...refs), refs);
+  return _react.useMemo.call(void 0, () => _chunkPUER6Y4Mcjs.mergeRefs.call(void 0, ...refs), refs);
 }
 
 // src/hooks/use-previous.ts
@@ -168,4 +168,4 @@ function usePrevious(value) {
 
 
 
-exports.Button = _chunkMLJ543GPcjs.Button; exports.FEEDBACK_OVERLAY = _chunkIVVFYUDWcjs.FEEDBACK_OVERLAY; exports.HIGHLIGHT_DURATION = _chunkIVVFYUDWcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkIVVFYUDWcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkIVVFYUDWcjs.Icon; exports.IconContext = _chunkIVVFYUDWcjs.IconContext; exports.PRESS_DURATION = _chunkIVVFYUDWcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIVVFYUDWcjs.PRESS_SCALE; exports.Portal = _chunk2FOEFUPMcjs.Portal; exports.PortalContext = _chunk2FOEFUPMcjs.PortalContext; exports.PortalHost = _chunk2FOEFUPMcjs.PortalHost; exports.PressableFeedback = _chunkIVVFYUDWcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkIVVFYUDWcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkIVVFYUDWcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkIVVFYUDWcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkIVVFYUDWcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkIVVFYUDWcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkIVVFYUDWcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkIVVFYUDWcjs.RIPPLE_START_SCALE; exports.SCALE_REFERENCE_WIDTH = _chunkIVVFYUDWcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkIVVFYUDWcjs.Slot; exports.ThemeContext = _chunk6N5JXRUZcjs.ThemeContext; exports.XAUIProvider = _chunkDDYMIWLWcjs.XAUIProvider; exports.buildRadius = _chunkDDYMIWLWcjs.buildRadius; exports.buildShadows = _chunkDDYMIWLWcjs.buildShadows; exports.buttonRecipe = _chunkMLJ543GPcjs.buttonRecipe; exports.childrenToString = _chunkIVVFYUDWcjs.childrenToString; exports.createRecipe = _chunkIVVFYUDWcjs.createRecipe; exports.createSlotContext = _chunkIVVFYUDWcjs.createSlotContext; exports.createTheme = _chunkDDYMIWLWcjs.createTheme; exports.defaultTheme = _chunkDDYMIWLWcjs.defaultTheme; exports.deriveColors = _chunkDDYMIWLWcjs.deriveColors; exports.deriveTint = _chunk6N5JXRUZcjs.deriveTint; exports.markOverlay = _chunkIVVFYUDWcjs.markOverlay; exports.mergeProps = _chunkIVVFYUDWcjs.mergeProps; exports.mergeRefs = _chunkIVVFYUDWcjs.mergeRefs; exports.palette = _chunkDDYMIWLWcjs.palette; exports.pressScaleFor = _chunkIVVFYUDWcjs.pressScaleFor; exports.primitives = _chunkDDYMIWLWcjs.primitives; exports.resolveAnimation = _chunkIVVFYUDWcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIVVFYUDWcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkIVVFYUDWcjs.rippleRadiusFor; exports.sourceKeys = _chunkDDYMIWLWcjs.sourceKeys; exports.tokens = _chunkDDYMIWLWcjs.tokens; exports.useButton = _chunkMLJ543GPcjs.useButton; exports.useColorMode = _chunk6N5JXRUZcjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunkIVVFYUDWcjs.useFeedback; exports.useIconContext = _chunkIVVFYUDWcjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = _chunkMLJ543GPcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkIVVFYUDWcjs.useStyleProps; exports.useThemeColor = _chunk6N5JXRUZcjs.useThemeColor; exports.useXAUITheme = _chunk6N5JXRUZcjs.useXAUITheme;
+exports.Button = _chunkNLFE3CRMcjs.Button; exports.FEEDBACK_OVERLAY = _chunkPUER6Y4Mcjs.FEEDBACK_OVERLAY; exports.HIGHLIGHT_DURATION = _chunkPUER6Y4Mcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkPUER6Y4Mcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkPUER6Y4Mcjs.Icon; exports.IconContext = _chunkPUER6Y4Mcjs.IconContext; exports.PRESS_DURATION = _chunkPUER6Y4Mcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkPUER6Y4Mcjs.PRESS_SCALE; exports.Portal = _chunkBAACHVM4cjs.Portal; exports.PortalContext = _chunkBAACHVM4cjs.PortalContext; exports.PortalHost = _chunkBAACHVM4cjs.PortalHost; exports.PressableFeedback = _chunkPUER6Y4Mcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkPUER6Y4Mcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkPUER6Y4Mcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkPUER6Y4Mcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkPUER6Y4Mcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkPUER6Y4Mcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkPUER6Y4Mcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkPUER6Y4Mcjs.RIPPLE_START_SCALE; exports.SCALE_REFERENCE_WIDTH = _chunkPUER6Y4Mcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkPUER6Y4Mcjs.Slot; exports.ThemeContext = _chunk6N5JXRUZcjs.ThemeContext; exports.XAUIProvider = _chunkDDYMIWLWcjs.XAUIProvider; exports.buildRadius = _chunkDDYMIWLWcjs.buildRadius; exports.buildShadows = _chunkDDYMIWLWcjs.buildShadows; exports.buttonRecipe = _chunkNLFE3CRMcjs.buttonRecipe; exports.childrenToString = _chunkPUER6Y4Mcjs.childrenToString; exports.createRecipe = _chunkPUER6Y4Mcjs.createRecipe; exports.createSlotContext = _chunkPUER6Y4Mcjs.createSlotContext; exports.createTheme = _chunkDDYMIWLWcjs.createTheme; exports.defaultTheme = _chunkDDYMIWLWcjs.defaultTheme; exports.deriveColors = _chunkDDYMIWLWcjs.deriveColors; exports.deriveTint = _chunk6N5JXRUZcjs.deriveTint; exports.markOverlay = _chunkPUER6Y4Mcjs.markOverlay; exports.mergeProps = _chunkPUER6Y4Mcjs.mergeProps; exports.mergeRefs = _chunkPUER6Y4Mcjs.mergeRefs; exports.palette = _chunkDDYMIWLWcjs.palette; exports.pressScaleFor = _chunkPUER6Y4Mcjs.pressScaleFor; exports.primitives = _chunkDDYMIWLWcjs.primitives; exports.resolveAnimation = _chunkPUER6Y4Mcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkPUER6Y4Mcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkPUER6Y4Mcjs.rippleRadiusFor; exports.sourceKeys = _chunkDDYMIWLWcjs.sourceKeys; exports.tokens = _chunkDDYMIWLWcjs.tokens; exports.useButton = _chunkNLFE3CRMcjs.useButton; exports.useColorMode = _chunk6N5JXRUZcjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunkPUER6Y4Mcjs.useFeedback; exports.useIconContext = _chunkPUER6Y4Mcjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = _chunkNLFE3CRMcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkPUER6Y4Mcjs.useStyleProps; exports.useThemeColor = _chunk6N5JXRUZcjs.useThemeColor; exports.useXAUITheme = _chunk6N5JXRUZcjs.useXAUITheme;

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import { RefCallback } from 'react';
 import { PossibleRef } from './system/index.cjs';
 export { AsChildProps, FEEDBACK_OVERLAY, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackRippleProps, 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, SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps } from './system/index.cjs';
 import { GestureResponderEvent } from 'react-native';
-export { A as AnimationConfig, c as AnimationProp, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, F as FeedbackContext, I as IconComponentProps, a as IconContextValue, b as IconProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, d as ResolvedAnimation, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, S as SlotAnimation, 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';
+export { A as AnimationConfig, c as AnimationProp, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, F as FeedbackContext, I as IconComponentProps, a as IconContextValue, b as IconProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, d as ResolvedAnimation, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, S as SlotAnimation, 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-BcUu9b2I.cjs';
 export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.cjs';
 export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C9bFJKFm.cjs';
 import 'react-native-reanimated';