@mrmeg/expo-ui 0.13.0-rsd.0 → 0.13.0

package/dist/components/Button.d.ts

@@ -1,14 +1,7 @@
 import React, { ComponentType } from "react";
+import { PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { TextProps } from "./StyledText";
 import { type IconProps } from "./Icon";
-import { type TextStyleValue } from "./StyledText.context";
-import { type LooseStyle } from "../lib/styles";
-/**
- * Press/pointer/focus handlers accept an optional event arg. Kept loose
- * (`any`) so consumers can pass react-native GestureResponderEvent handlers and
- * expo-router's <Link asChild> injected onPress without a type mismatch.
- */
-type PointerHandler = (event?: any) => void;
 /**
  * Button variants
  */
@@ -17,14 +10,23 @@ type Presets = "default" | "outline" | "ghost" | "link" | "destructive" | "secon
  * Button size variants
  */
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonAccessoryStyle = TextStyleValue;
+export type ButtonAccessoryStyle = {
+    margin?: DimensionValue;
+    marginHorizontal?: DimensionValue;
+    marginVertical?: DimensionValue;
+    marginTop?: DimensionValue;
+    marginRight?: DimensionValue;
+    marginBottom?: DimensionValue;
+    marginLeft?: DimensionValue;
+    marginStart?: DimensionValue;
+    marginEnd?: DimensionValue;
+};
 export interface ButtonAccessoryProps {
     style: ButtonAccessoryStyle;
-    /** True while the button is pressed (pointer/touch down). */
-    pressed: boolean;
+    pressableState: PressableStateCallbackType;
     disabled?: boolean;
 }
-export interface ButtonProps {
+export interface ButtonProps extends PressableProps {
     /**
      * Text which is looked up via i18n.
      */
@@ -38,38 +40,25 @@ export interface ButtonProps {
      */
     txOptions?: TextProps["txOptions"];
     /**
-     * Press handler. Mapped to the underlying element's onClick.
+     * An optional style override useful for padding & margin.
      */
-    onPress?: PointerHandler;
-    /** Pointer-down handler (maps to onPointerDown). */
-    onPressIn?: PointerHandler;
-    /** Pointer-up handler (maps to onPointerUp). */
-    onPressOut?: PointerHandler;
-    /** Focus handler. */
-    onFocus?: PointerHandler;
-    /** Blur handler. */
-    onBlur?: PointerHandler;
-    /**
-     * An optional style override useful for padding & margin. Accepts
-     * react-strict-dom styles or plain CSS-shaped objects during the migration.
-     */
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
     /**
      * An optional style override for the "pressed" state.
      */
-    pressedStyle?: LooseStyle;
+    pressedStyle?: StyleProp<ViewStyle>;
     /**
      * An optional style override for the button text.
      */
-    textStyle?: TextStyleValue;
+    textStyle?: StyleProp<TextStyle>;
     /**
      * An optional style override for the button text when in the "pressed" state.
      */
-    pressedTextStyle?: TextStyleValue;
+    pressedTextStyle?: StyleProp<TextStyle>;
     /**
      * An optional style override for the button text when in the "disabled" state.
      */
-    disabledTextStyle?: TextStyleValue;
+    disabledTextStyle?: StyleProp<TextStyle>;
     /**
      * One of the different types of button presets.
      * @default "default"
@@ -99,7 +88,7 @@ export interface ButtonProps {
     /**
      * An optional style override for the disabled state
      */
-    disabledStyle?: LooseStyle;
+    disabledStyle?: StyleProp<ViewStyle>;
     /**
      * Whether to show shadow
      */
@@ -112,17 +101,9 @@ export interface ButtonProps {
      * Whether button should take full width of container
      */
     fullWidth?: boolean;
-    /** Forwarded accessibility label. */
-    "aria-label"?: string;
-    /** Forwarded test id (also accepts `data-testid`). */
-    testID?: string;
-    /** Forwarded test id (DOM-style; alias of testID). */
-    "data-testid"?: string;
-    /** Accessibility role hint (kept for RN-API compatibility; defaults button). */
-    accessibilityLabel?: string;
 }
 /**
- * Enhanced Button Component (react-strict-dom)
+ * Enhanced Button Component
  *
  * Features:
  * - 6 variants (default, outline, ghost, link, destructive, secondary)
@@ -135,9 +116,25 @@ export interface ButtonProps {
  *
  * Usage:
  * ```tsx
+ * // Simplest path — plain label via the `text` prop
  * <Button onPress={handler} text="Click Me" />
+ *
+ * // Different variants
  * <Button preset="outline" onPress={handler} text="Outline" />
+ * <Button preset="ghost" onPress={handler} text="Ghost" />
+ * <Button preset="destructive" onPress={handler} text="Delete" />
+ *
+ * // Different sizes
+ * <Button size="sm" onPress={handler} text="Small" />
+ * <Button size="lg" onPress={handler} text="Large" />
+ *
+ * // Loading state
  * <Button loading onPress={handler} text="Processing..." />
+ *
+ * // Full width
+ * <Button fullWidth onPress={handler} text="Submit" />
+ *
+ * // Composed content — icon + label via subcomponents
  * <Button onPress={handler}>
  *   <Button.Icon name="heart" />
  *   <Button.Text>Like</Button.Text>
@@ -148,19 +145,35 @@ declare function ButtonRoot(props: ButtonProps): React.JSX.Element;
 /**
  * Button.Text
  * Text content for a Button. Inherits the button's control typography, color,
- * and non-selectable behavior from context.
+ * and non-selectable behavior from context, so callers state their intent
+ * explicitly instead of relying on the component to inspect `typeof children`.
+ *
+ * ```tsx
+ * <Button onPress={save}>
+ *   <Button.Text>Save</Button.Text>
+ * </Button>
+ * ```
  */
 declare function ButtonText(props: TextProps): React.JSX.Element;
 /**
  * Button.Icon
  * Icon content for a Button. Defaults its color to the button's text color
- * (from context) and is decorative by default.
+ * (from context) and is decorative by default, since the label conveys meaning.
+ *
+ * ```tsx
+ * <Button onPress={like}>
+ *   <Button.Icon name="heart" />
+ *   <Button.Text>Like</Button.Text>
+ * </Button>
+ * ```
  */
 declare function ButtonIcon(props: IconProps): React.JSX.Element;
 /**
  * Button with explicit subcomponents.
  * - `Button.Text` for label text (inherits control typography)
  * - `Button.Icon` for icons (inherits the button's text color)
+ *
+ * The `tx`/`text` props remain the simplest path for plain labels.
  */
 declare const Button: typeof ButtonRoot & {
     Text: typeof ButtonText;

package/dist/components/Button.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { use, useCallback, useMemo, useState, } from "react";
-import { css, html } from "react-strict-dom";
+import { use, useCallback, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View, Platform, ActivityIndicator, Animated, } from "react-native";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
-import { TextColorContext, TextSelectabilityContext, TextStyleContext, } from "./StyledText.context";
+import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
 import { fontFamilies } from "../constants/fonts.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
-import { flattenStyle } from "../lib/styles.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xxs,
@@ -29,120 +29,9 @@ const SIZE_CONFIGS = {
         height: 40,
     },
 };
-// css.keyframes() MUST be called inline and unconditionally — StyleX's babel
-// plugin (web) can only fold a keyframe name defined in the same file, and it
-// cannot fold a runtime ternary condition. On native css.keyframes is a no-op
-// that just returns its arg (a __DEV__ console log), and the animationName has
-// no effect — the spinner shows a static ring (native animation fidelity gap).
-const spin = css.keyframes({
-    from: { transform: "rotate(0deg)" },
-    to: { transform: "rotate(360deg)" },
-});
-// Static + function-rule styles. Theme colors and per-size numbers are runtime
-// values carried via function rules; layout/structure is static where possible.
-const styles = css.create({
-    pressable: (alignSelf) => ({
-        alignSelf,
-        appearance: "none",
-        backgroundColor: "transparent",
-        borderWidth: 0,
-        padding: 0,
-        margin: 0,
-        cursor: "pointer",
-    }),
-    // StyleX requires values referenced inside css.create() to be statically
-    // resolvable, AND css.defineConsts is unusable here (it returns undefined on
-    // the react-strict-dom native runtime). So spacing tokens are threaded in as
-    // function-rule arguments. borderRadius literal (6) = spacing.radiusMd.
-    surface: (paddingVertical, paddingHorizontal, minHeight, borderRadius) => ({
-        position: "relative",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius,
-        paddingTop: paddingVertical,
-        paddingBottom: paddingVertical,
-        paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        minHeight,
-        // NOTE: no flexShrink here. This is the button's OUTERMOST element, whose
-        // parent is consumer-controlled and often display:block on web — react-strict-dom
-        // warns "display:flex is required on the parent for flexShrink to have an effect."
-        // Shrink behaviour in a flex row is the parent's concern, not this leaf's.
-        transitionProperty: "transform, opacity",
-        transitionDuration: "0.1s",
-    }),
-    bg: (backgroundColor) => ({ backgroundColor }),
-    outline: (borderColor) => ({
-        backgroundColor: "transparent",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-    }),
-    transparentBg: { backgroundColor: "transparent" },
-    link: {
-        backgroundColor: "transparent",
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-    },
-    fullWidth: { width: "100%" },
-    scalePressed: { transform: "scale(0.97)" },
-    pressed: { opacity: 0.9 },
-    pressedMuted: (backgroundColor) => ({ backgroundColor }),
-    disabled: { opacity: 0.6, cursor: "default" },
-    focusRing: (boxShadow) => ({ boxShadow }),
-    shadow: (boxShadow) => ({ boxShadow }),
-    content: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-    },
-    loadingContent: { opacity: 0 },
-    loaderOverlay: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        pointerEvents: "none",
-    },
-    spinner: (color) => ({
-        width: 16,
-        height: 16,
-        borderRadius: 9999,
-        borderWidth: 2,
-        borderStyle: "solid",
-        borderColor: color,
-        borderTopColor: "transparent",
-        animationName: spin,
-        animationDuration: "0.7s",
-        animationIterationCount: "infinite",
-        animationTimingFunction: "linear",
-    }),
-});
-// Text style passed to the label via context. Plain object (function of size).
-function buildTextStyle(size) {
-    const sizeConfig = SIZE_CONFIGS[size];
-    return {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontSize: sizeConfig.fontSize,
-        fontWeight: "500",
-        textAlign: "center",
-        lineHeight: sizeConfig.fontSize * 1.4,
-        flexShrink: 0,
-        userSelect: "none",
-    };
-}
+const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarget - sizeConfig.height) / 2);
 /**
- * Enhanced Button Component (react-strict-dom)
+ * Enhanced Button Component
  *
  * Features:
  * - 6 variants (default, outline, ghost, link, destructive, secondary)
@@ -155,9 +44,25 @@ function buildTextStyle(size) {
  *
  * Usage:
  * ```tsx
+ * // Simplest path — plain label via the `text` prop
  * <Button onPress={handler} text="Click Me" />
+ *
+ * // Different variants
  * <Button preset="outline" onPress={handler} text="Outline" />
+ * <Button preset="ghost" onPress={handler} text="Ghost" />
+ * <Button preset="destructive" onPress={handler} text="Delete" />
+ *
+ * // Different sizes
+ * <Button size="sm" onPress={handler} text="Small" />
+ * <Button size="lg" onPress={handler} text="Large" />
+ *
+ * // Loading state
  * <Button loading onPress={handler} text="Processing..." />
+ *
+ * // Full width
+ * <Button fullWidth onPress={handler} text="Submit" />
+ *
+ * // Composed content — icon + label via subcomponents
  * <Button onPress={handler}>
  *   <Button.Icon name="heart" />
  *   <Button.Text>Like</Button.Text>
@@ -165,17 +70,20 @@ function buildTextStyle(size) {
  * ```
  */
 function ButtonRoot(props) {
-    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, onPress, onFocus, onBlur, onPressIn, onPressOut, "aria-label": ariaLabel, accessibilityLabel, testID, "data-testid": dataTestId, } = props;
+    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
     const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
-    const sizeConfig = SIZE_CONFIGS[size];
+    const styles = useMemo(() => createStyles(theme, size), [theme, size]);
     const shadowStyle = getShadowStyle("base");
+    const sizeConfig = SIZE_CONFIGS[size];
     const focusRingStyle = getFocusRingStyle();
-    const textStyleValue = useMemo(() => buildTextStyle(size), [size]);
-    // Background color per preset (override style may set its own).
-    const overrideBgColor = flattenStyle(styleOverride)?.backgroundColor;
+    // Pre-compute background color for contrast calculation
+    // Always flatten to handle both array styles (from Slot) and RegisteredStyle
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const customBgColor = flattenedStyle?.backgroundColor;
+    // Calculate background color for each preset
     let backgroundColor;
-    if (typeof overrideBgColor === "string") {
-        backgroundColor = overrideBgColor;
+    if (customBgColor && typeof customBgColor === "string") {
+        backgroundColor = customBgColor;
     }
     else if (preset === "default") {
         backgroundColor = theme.colors.primary;
@@ -192,7 +100,7 @@ function ButtonRoot(props) {
     else {
         backgroundColor = theme.colors.primary;
     }
-    // Text color per preset for readable contrast.
+    // Determine text color per preset for readable contrast
     const textColor = preset === "outline"
         ? theme.colors.foreground
         : preset === "ghost"
@@ -205,87 +113,101 @@ function ButtonRoot(props) {
                         ? theme.colors.secondaryForeground
                         : getContrastingColor(backgroundColor, palette.white, palette.black);
     const [focused, setFocused] = useState(false);
-    const [pressed, setPressed] = useState(false);
+    const [restingWidth, setRestingWidth] = useState();
     const isDisabled = disabled || loading;
-    const handleClick = useCallback(() => {
-        if (isDisabled)
-            return;
-        onPress?.();
-    }, [isDisabled, onPress]);
-    const handleFocus = (event) => {
-        // Keyboard focus shows the ring; pointer focus does not (mirrors
-        // :focus-visible). On web the event target exposes matches(); fall back to
-        // showing the ring when it can't be queried.
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!isDisabled,
+        haptic: false,
+        scaleTo: preset === "link" ? 1 : 0.97,
+    });
+    const showFocusRing = (event) => {
+        // On web, pointer taps focus the element too, which left the ring visible
+        // after every click. :focus-visible is only true for keyboard-driven
+        // focus, so gate the ring on it; fall back to showing the ring when the
+        // target can't be queried (non-DOM targets, older engines).
         let ringVisible = true;
-        const target = event?.target;
-        if (target && typeof target.matches === "function") {
-            try {
-                ringVisible = target.matches(":focus-visible");
-            }
-            catch {
-                ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
             }
         }
         setFocused(ringVisible);
         onFocus?.(event);
     };
-    const handleBlur = (event) => {
+    const hideFocusRing = (event) => {
         setFocused(false);
         onBlur?.(event);
     };
-    const handlePointerDown = (event) => {
-        if (isDisabled)
-            return;
-        setPressed(true);
+    const handlePressIn = (event) => {
+        pressHandlers.onPressIn();
         onPressIn?.(event);
     };
-    const handlePointerUp = (event) => {
-        if (isDisabled)
-            return;
-        setPressed(false);
+    const handlePressOut = (event) => {
+        pressHandlers.onPressOut();
         onPressOut?.(event);
     };
-    const handlePointerLeave = () => {
-        if (pressed)
-            setPressed(false);
-    };
-    const surfaceStyles = [
-        styles.surface(sizeConfig.paddingVertical, sizeConfig.paddingHorizontal, sizeConfig.height, spacing.radiusMd),
-        preset === "default" || preset === "secondary" || preset === "destructive"
-            ? styles.bg(backgroundColor)
-            : null,
-        preset === "outline" ? styles.outline(theme.colors.input) : null,
-        preset === "ghost" ? styles.transparentBg : null,
-        preset === "link" ? styles.link : null,
-        fullWidth ? styles.fullWidth : null,
-        withShadow && !isDisabled ? styles.shadow(shadowStyle.boxShadow ?? "none") : null,
-        pressed && (preset === "outline" || preset === "ghost")
-            ? styles.pressedMuted(theme.colors.muted)
-            : null,
-        pressed ? styles.pressed : null,
-        pressed && !isDisabled ? styles.scalePressed : null,
-        pressed ? pressedStyleOverride : null,
-        isDisabled ? styles.disabled : null,
-        isDisabled ? disabledStyleOverride : null,
-        focused && !isDisabled ? styles.focusRing(focusRingStyle.boxShadow ?? "none") : null,
-        styleOverride,
-    ];
-    const labelStyle = [
-        textStyleValue,
-        pressed ? { opacity: 0.9 } : null,
-        pressed ? pressedTextStyleOverride : null,
-        isDisabled ? disabledTextStyleOverride : null,
-        textStyleOverride,
-    ];
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: textStyleValue, children: _jsxs(html.button, { type: "button", "aria-label": ariaLabel ?? accessibilityLabel, "aria-busy": loading, "aria-disabled": isDisabled, "data-testid": dataTestId ?? testID, disabled: isDisabled, onClick: handleClick, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onFocus: handleFocus, onBlur: handleBlur, style: [
-                        styles.pressable(fullWidth ? "stretch" : "flex-start"),
-                        ...surfaceStyles,
-                    ], children: [loading && (_jsx(html.div, { style: styles.loaderOverlay, children: _jsx(html.div, { style: styles.spinner(textColor) }) })), _jsxs(html.div, { style: [styles.content, loading ? styles.loadingContent : null], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: { marginRight: spacing.sm }, pressed: pressed, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: labelStyle })) : (children ?? null), !!RightAccessory && (_jsx(RightAccessory, { style: { marginLeft: spacing.sm }, pressed: pressed, disabled: isDisabled }))] })] }) }) }) }));
+    const handleButtonLayout = useCallback((event) => {
+        if (loading || fullWidth)
+            return;
+        const nextWidth = event.nativeEvent.layout.width;
+        if (nextWidth <= 0)
+            return;
+        setRestingWidth((currentWidth) => {
+            if (currentWidth !== undefined && Math.abs(currentWidth - nextWidth) < 0.5) {
+                return currentWidth;
+            }
+            return nextWidth;
+        });
+    }, [fullWidth, loading]);
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: styles.text, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+                                styles.button,
+                                preset === "default" && styles.buttonDefault,
+                                preset === "outline" && styles.buttonOutline,
+                                preset === "ghost" && styles.buttonGhost,
+                                preset === "link" && styles.buttonLink,
+                                preset === "destructive" && styles.buttonDestructive,
+                                preset === "secondary" && styles.buttonSecondary,
+                                fullWidth && styles.fullWidth,
+                                withShadow && !isDisabled && shadowStyle,
+                                state.pressed && preset === "outline" && styles.pressedMuted,
+                                state.pressed && preset === "ghost" && styles.pressedMuted,
+                                state.pressed && styles.pressed,
+                                state.pressed && pressedStyleOverride,
+                                isDisabled && styles.disabled,
+                                isDisabled && disabledStyleOverride,
+                                focused && !isDisabled && focusRingStyle,
+                                loading && restingWidth !== undefined && !fullWidth && { width: restingWidth },
+                                // Spread array styles from Slot to prevent nested arrays on web
+                                ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
+                            ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
+                                                styles.text,
+                                                state.pressed && styles.pressedText,
+                                                state.pressed && pressedTextStyleOverride,
+                                                isDisabled && disabledTextStyleOverride,
+                                                textStyleOverride,
+                                            ] })) : (
+                                        // Children render as-is. For text content, use the explicit
+                                        // <Button.Text> subcomponent so it inherits control typography
+                                        // via context instead of relying on a runtime `typeof` check.
+                                        children ?? null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] })] }) })) }) }) }) }));
 }
 /**
  * Button.Text
  * Text content for a Button. Inherits the button's control typography, color,
- * and non-selectable behavior from context.
+ * and non-selectable behavior from context, so callers state their intent
+ * explicitly instead of relying on the component to inspect `typeof children`.
+ *
+ * ```tsx
+ * <Button onPress={save}>
+ *   <Button.Text>Save</Button.Text>
+ * </Button>
+ * ```
  */
 function ButtonText(props) {
     return _jsx(StyledText, { ...props });
@@ -293,16 +215,108 @@ function ButtonText(props) {
 /**
  * Button.Icon
  * Icon content for a Button. Defaults its color to the button's text color
- * (from context) and is decorative by default.
+ * (from context) and is decorative by default, since the label conveys meaning.
+ *
+ * ```tsx
+ * <Button onPress={like}>
+ *   <Button.Icon name="heart" />
+ *   <Button.Text>Like</Button.Text>
+ * </Button>
+ * ```
  */
 function ButtonIcon(props) {
     const contextColor = use(TextColorContext);
     return _jsx(Icon, { decorative: true, color: contextColor, ...props });
 }
+const createStyles = (theme, size) => {
+    const sizeConfig = SIZE_CONFIGS[size];
+    return StyleSheet.create({
+        button: {
+            position: "relative",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: spacing.radiusMd,
+            paddingVertical: sizeConfig.paddingVertical,
+            paddingHorizontal: sizeConfig.paddingHorizontal,
+            minHeight: sizeConfig.height,
+            flexShrink: 0,
+            ...(Platform.OS === "web" && { cursor: "pointer" }),
+        },
+        content: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+        },
+        loadingContent: {
+            opacity: 0,
+        },
+        buttonDefault: {
+            backgroundColor: theme.colors.primary,
+        },
+        buttonSecondary: {
+            backgroundColor: theme.colors.secondary,
+        },
+        buttonDestructive: {
+            backgroundColor: theme.colors.destructive,
+        },
+        buttonOutline: {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: theme.colors.input,
+        },
+        buttonGhost: {
+            backgroundColor: "transparent",
+        },
+        buttonLink: {
+            backgroundColor: "transparent",
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+        },
+        fullWidth: {
+            width: "100%",
+        },
+        text: {
+            fontFamily: fontFamilies.sansSerif.regular,
+            fontSize: sizeConfig.fontSize,
+            fontWeight: "500",
+            textAlign: "center",
+            lineHeight: sizeConfig.fontSize * 1.4,
+            flexShrink: 0,
+            userSelect: "none",
+        },
+        pressed: {
+            opacity: 0.9,
+        },
+        pressedMuted: {
+            backgroundColor: theme.colors.muted,
+        },
+        pressedText: {
+            opacity: 0.9,
+        },
+        disabled: {
+            opacity: 0.6,
+        },
+        leftAccessory: {
+            marginRight: spacing.sm,
+        },
+        rightAccessory: {
+            marginLeft: spacing.sm,
+        },
+        loaderOverlay: {
+            ...StyleSheet.absoluteFill,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+    });
+};
 /**
  * Button with explicit subcomponents.
  * - `Button.Text` for label text (inherits control typography)
  * - `Button.Icon` for icons (inherits the button's text color)
+ *
+ * The `tx`/`text` props remain the simplest path for plain labels.
  */
 const Button = Object.assign(ButtonRoot, {
     Text: ButtonText,