@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.21

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

@@ -0,0 +1,659 @@
+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 { P as PressableFeedbackProps, a as AnimationProp } from '../../pressable-feedback.type-wfeiJz5m.cjs';
+import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-B1BG5TCm.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { a as IconContextValue, b as IconProps } from '../../icon.type-Cs1tMX0W.cjs';
+import { R as Recipe, g as SlotStyles } from '../../create-recipe-CPBFg7ym.cjs';
+import 'react-native-reanimated';
+
+type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';
+/**
+ * The seven sanctioned appearances (R7). Emphasis and intention are one flat union, which
+ * is why there is no `themeColor` beside it.
+ *
+ * The emphasis ladder descends by how much of the accent is left: `primary` is the full
+ * accent, `secondary` its soft slice, `default` drops the accent for the neutral fill,
+ * `tertiary` drops the fill for a border, and `ghost` drops that too. `secondary` is to
+ * `primary` exactly what `danger-soft` is to `danger` — the same soft slice of the same
+ * family, which is why it needs no rule of its own in the recipe.
+ *
+ * **`success` and `warning` are deliberately not here.** A button is something you press,
+ * and neither of those is an action: a success is an outcome and a warning is a state,
+ * both of which a `Chip`, an `Alert` or a `Badge` reports. The theme keeps their tokens —
+ * a component that *does* report status reads them — and a button that genuinely needs a
+ * green fill passes the raw tint instead: `<Button color={theme.colors.success}>`.
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'danger' | 'danger-soft';
+type ButtonSize = Size;
+/**
+ * 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;
+    /** Overrides the radius `size` chose. Unset, a button is the shape its size implies. */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * background of a `primary`, the label of a `ghost`, the border and label of a
+     * `tertiary`. Its contrasted, soft and pressed slices are derived in OKLab, so it
+     * behaves exactly like `accent` — which is also why it must be a hex value.
+     */
+    color?: string;
+    isDisabled?: boolean;
+    /** Presses through as disabled, and inserts a `Button.Spinner` if none is composed. */
+    isLoading?: boolean;
+    /** Drops the horizontal padding and squares the button on its fixed height. */
+    isIconOnly?: boolean;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+    children?: ReactNode;
+};
+type ButtonBehaviourProps = Omit<PressableFeedbackProps, 'isPressed' | 'isDisabled' | 'style' | 'children'>;
+/**
+ * R14 — the button's own props, the press behaviour it forwards, and every `ViewStyle`
+ * 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>;
+/** `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 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
+ * merges its own `style` on top and does no work of its own.
+ */
+type ButtonContextValue = {
+    labelStyle: StyleProp<TextStyle>;
+    spinnerStyle: StyleProp<ViewStyle>;
+    /**
+     * Values, not a style: `Icon` hands `size` and `color` to a third-party component, so
+     * the root flattens its icon slot once here rather than in every icon it contains.
+     */
+    icon: IconContextValue;
+    isDisabled: boolean;
+    isLoading: boolean;
+};
+
+/**
+ * An icon that takes the button's size and colour without being told either:
+ *
+ * ```tsx
+ * <Button variant="danger">
+ *   <Button.Icon as={TrashIcon} />
+ *   <Button.Label>Supprimer</Button.Label>
+ * </Button>
+ * ```
+ *
+ * The values come from the root, which resolved them once; an explicit `size` or `color`
+ * still wins, which is what `Icon` promises everywhere else in the library.
+ */
+declare function ButtonIcon({ size, color, ...rest }: ButtonIconProps): react.JSX.Element;
+declare namespace ButtonIcon {
+    var displayName: string;
+}
+
+/**
+ * The busy indicator. `isLoading` inserts one when none is composed, so
+ * `<Button isLoading>Envoi…</Button>` works; composing it explicitly is how you put it
+ * after the label instead of before it.
+ *
+ * A ring rather than RN's `ActivityIndicator`: the recipe owns its diameter and its
+ * colour like every other measurement, which is what makes it follow the button's `size`
+ * 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, ...props }: ButtonSpinnerProps): react.JSX.Element;
+declare namespace ButtonSpinner {
+    var displayName: string;
+}
+
+declare const useButton: () => ButtonContextValue;
+
+declare const buttonRecipe: Recipe<"label" | "root" | "icon" | "spinner", ButtonVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<ButtonSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<ButtonSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<ButtonSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<ButtonSlot>;
+    };
+    readonly radius: {
+        readonly xs: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly sm: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly md: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly lg: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly xl: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly '2xl': (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly '3xl': (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly '4xl': (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly field: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+        readonly full: (t: XAUITheme) => {
+            root: {
+                borderRadius: number;
+            };
+        };
+    };
+    readonly isIconOnly: {
+        readonly true: () => {
+            root: {
+                paddingHorizontal: number;
+                aspectRatio: number;
+            };
+        };
+    };
+}>;
+
+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;
+} & {
+    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;
+    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;
+    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, keyof {
+    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;
+}> & 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;
+    Spinner: typeof ButtonSpinner;
+};
+
+export { Button, type ButtonContextValue, type ButtonIconProps, type ButtonLabelProps, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonSpinnerProps, type ButtonVariant, buttonRecipe, useButton };