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

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

import type { ReactNode, Ref } from "react";
import type { PressableProps as RNPressableProps, View as RNView } from "react-native";
import { type VariantProps } from "tailwind-variants";
import type { AccentOrNeutral } from "../../core/AlouetteConfig";
import { type InteractiveBoxProps } from "../containers/Box";
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;
        inset: string;
        false: string;
    };
}, undefined, import("tailwind-variants").TVReturnType<{
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        inset: string;
        false: string;
    };
}, undefined, string, {
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        inset: string;
        false: string;
    };
}, undefined, import("tailwind-variants").TVReturnType<{
    withPressEffect: {
        true: string;
        false: string;
    };
    withFocusVisibleOutline: {
        true: string;
        inset: 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";
    /**
     * The keyboard focus ring. Unset, a `tonal` pressable rings inside its edge
     * (`"inset"`: the material is raised, and its shadow is where an outer ring
     * would sit) and the flat variants ring 2px outside it. Pass `"inset"` to a
     * pressable whose parent clips (a `surface` is `overflow-hidden`), and
     * `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?: InteractiveBoxProps["withFocusVisibleOutline"];
    ref?: Ref<RNView>;
}
/**
 * `InteractiveBox` with a material: the `variant`'s `interactive-*` states, an
 * accent scope, and a `link` role when it has an `href`.
 */
export declare function PressableBox({ ref, className, variant, forceStyle, accent, href, role, withFocusVisibleOutline, ...props }: PressableBoxProps): ReactNode;
export {};
//# sourceMappingURL=PressableBox.d.ts.map