alouette/dist/definitions/ui/actions/PressableBox.d.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

import type { PressableProps as RNPressableProps, View as RNView } from "react-native";
import { type VariantProps } from "tailwind-variants";
import type { AccentOrNeutral } from "../../core/AlouetteConfig";
declare const pressableBoxVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        tonal: string;
        filled: string;
        outlined: string;
        soft: string;
    };
    forceStyle: {
        hover: string;
        focus: string;
        press: string;
    };
}, undefined, "group overflow-hidden", {
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        false: string;
    };
}, undefined, import("tailwind-variants").TVReturnType<{
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        false: string;
    };
}, undefined, string, {
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        false: string;
    };
}, undefined, import("tailwind-variants").TVReturnType<{
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        false: string;
    };
}, undefined, string, unknown, unknown, undefined>>>;
type PressableBoxVariantProps = VariantProps<typeof pressableBoxVariants>;
export type PressableBoxVariant = NonNullable<PressableBoxVariantProps["variant"]>;
export interface PressableBoxProps extends RNPressableProps, PressableBoxVariantProps {
    /** `"neutral"` drops an accent inherited from an ancestor and renders the
     * neutral interactive tokens — the secondary action beside an accented one. */
    accent?: AccentOrNeutral;
    className?: string;
    /**
     * Destination. react-native-web renders a real `<a>` for it; native ignores
     * it, so a native app routes from `onPress` — expo Router's `<Link asChild>`
     * injects both. Giving one turns the default `role` into `"link"`; a
     * component that needs another one (a `menuitem`) still passes its own.
     */
    href?: string;
    /**
     * Defaults to `"link"` when `href` is set and `"button"` otherwise.
     */
    role?: RNPressableProps["role"];
    forceStyle?: "focus" | "hover" | "press";
    /**
     * Set it to `false` on a row of a list that already paints its cursor (a
     * menu item, a listbox option): the focus moves with the pointer there, so
     * the outline would ring whatever the mouse is over.
     */
    withFocusVisibleOutline?: boolean;
}
/**
 * `InteractiveBox` with a material: the `variant`'s `interactive-*` states, an
 * accent scope, and a `link` role when it has an `href`.
 */
export declare const PressableBox: import("react").ForwardRefExoticComponent<PressableBoxProps & import("react").RefAttributes<RNView>>;
export {};
//# sourceMappingURL=PressableBox.d.ts.map