import { type ReactNode } from "react"; import { type GestureResponderEvent, type MouseEvent, type NativeSyntheticEvent, type TargetedEvent } from "react-native"; import { View, type LayoutStyle, type MeasureProps } from "../../style/index.js"; import { type ButtonSkin, type Intent, type Size } from "./button.styles.js"; export interface ButtonProps extends MeasureProps { children?: ReactNode; /** * An icon element rendered before the label (e.g. a lucide or Canvas `Icon`). * It renders directly (not wrapped in the label `Text`, which cannot host an * SVG), spaced from the label by the skin's gap. Pass `iconLeft` alone with * the `icon` size prop for an icon-only square button. The caller sizes the * icon; a Canvas `Icon` with no tone of its own takes the button's label ink * (the primary's contrast ink on a primary button, the muted ink on a quiet * one, dimmed with the label while disabled), and an explicit tone keeps it. */ iconLeft?: ReactNode; /** An icon element rendered after the label (e.g. a trailing chevron/arrow). */ iconRight?: ReactNode; /** Accessibility label, required for an icon-only button (no text to read). */ accessibilityLabel?: string; onPress?: (event: GestureResponderEvent) => void; /** * Renders the button as a REAL link on the web: react-native-web gives the * root Pressable an ``, so middle-click, cmd-click, open-in-new-tab, * and crawlers all see the destination, and assistive tech hears a link. * Native platforms have no anchors and ignore it, so pair `href` with an * `onPress` that runs the same navigation through the host's router. While * `disabled` or `loading` the anchor is suppressed, exactly like `onPress`. */ href?: string; /** * Anchor attributes forwarded with `href` on the web (react-native-web's * `hrefAttrs`): `target`, `rel`, `download`. Ignored without `href`, and * everywhere natively. */ hrefAttrs?: { target?: "_blank" | "_self"; rel?: string; download?: boolean | string; }; /** * Called when a pointer starts hovering the button. Fires on pointer devices * * only (web via react-native-web, pointer-equipped iPads/desktops natively); * * * only (web via react-native-web, pointer-equipped devices natively); * * touch never triggers it. For hover-driven disclosure such as Tooltip. */ onHoverIn?: (event: MouseEvent) => void; /** Called when the pointer stops hovering the button (see `onHoverIn`). */ onHoverOut?: (event: MouseEvent) => void; /** Called when the button gains focus (keyboard tab, or click on web). */ onFocus?: (event: NativeSyntheticEvent) => void; /** Called when the button loses focus. */ onBlur?: (event: NativeSyntheticEvent) => void; primary?: boolean; secondary?: boolean; /** White outlined action over a dark or branded surface. */ inverse?: boolean; /** Muted outlined action for a low-emphasis operation. */ quiet?: boolean; /** The reference link hover dims to 85% while keeping its normal ink. */ softHover?: boolean; /** A bare project-scope menu trigger: its label set in 600, a hover wash, the chevron through `iconRight`. */ scopeTrigger?: boolean; /** An identity action: a 28-tall hairline pill around a leading avatar and its name. */ identityAction?: boolean; /** A page header's link: a 34-tall hairline box around a muted label (a source path, the page's section). */ pageLink?: boolean; /** A page's jump to one of its sections: a 28-tall hairline pill around a muted 12px label. */ jumpLink?: boolean; /** A `pageLink` whose label is a path or code: the 400 12px mono face. */ mono?: boolean; /** A reference-key link: an underlined monospace key in the link ink. */ referenceLink?: boolean; /** An unboxed 22px icon action. */ inlineIcon?: boolean; /** A theme choice pill whose `selected` state is the accent edge and a soft accent halo. */ themeChoice?: boolean; selected?: boolean; /** A bare filter-menu trigger: a muted label, a hover wash, the chevron through `iconRight`. */ filterTrigger?: boolean; /** Inline text action: an underlined link label with no box, read as a link, washed on hover. */ inlineLink?: boolean; /** * A plain accent text action with no box and no underline, still read as a button: a * panel's Reset, a table's show-all row. On the web a 500 13 px label in the accent text * ink (12 px with `small`) that brightens to the foreground ink under the pointer; * natively the platform's own tint-coloured text button. */ plainLink?: boolean; /** Foreground ink on an inline text action. */ foreground?: boolean; /** Extra-bold inline text action label. */ extraBold?: boolean; /** Open href in the system browser on every platform. */ external?: boolean; /** Align a row of short workflow actions on the same minimum measure. */ consistent?: boolean; /** A roomier hit surround for a compact featured action. */ comfortable?: boolean; /** Visual reference harness only; pointer hover remains the production source. */ testOnly_hovered?: boolean; destructive?: boolean; outline?: boolean; ghost?: boolean; link?: boolean; small?: boolean; large?: boolean; icon?: boolean; /** Compact utility icon box (28px). */ compactIcon?: boolean; /** Medium utility icon box (32px). */ mediumIcon?: boolean; /** Large utility icon box (34px). */ largeIcon?: boolean; /** Give a compact icon box two extra pixels of horizontal room. */ wideIcon?: boolean; /** Round a utility icon box into a circle. */ circle?: boolean; /** * Fully rounded ends: the control's corner becomes the pill (an `icon` square a circle). * The special bodies (the links, the triggers, the utility boxes) keep their own corners; * a utility box rounds with `circle`. * * The pill's ends sit 2 px wider at each side (18 at the default size). * */ rounded?: boolean; /** * A dashed edge in place of the solid one: an add-a-row or drop-here affordance. It * shows on the intents that draw an edge (`secondary`, `outline`); the filled, ghost and * link looks have no visible edge to dash. */ dashed?: boolean; /** * An unread mark: the accent dot inside the box's upper trailing corner, ringed in the * card colour. A quieter sibling of `count` for "something new" without a number; * name the state in `accessibilityLabel` (the dot is decorative). `count` wins when both * are passed. */ unread?: boolean; /** Quiet inset fill for a utility icon action. */ inset?: boolean; /** Keep the resting look while pressed (no dim, no press scale). */ steadyPress?: boolean; /** Notification count carried in the upper trailing corner. */ count?: number | string; block?: boolean; /** Keep the content-sized button in a tight row, allowing its label to wrap within the available width. */ shrink?: boolean; loading?: boolean; disabled?: boolean; /** * Lifts a primary button off the page with a soft glow in its own colour: the page's * main call to action. Other intents, and a disabled button, ignore it. */ raised?: boolean; /** An outward red glow for an action requiring attention. Static under Reduce Motion; hidden while disabled or loading. */ attention?: boolean; /** * Marks the Button as a disclosure/menu trigger and announces its open state to * assistive tech (aria-expanded, which react-native-web forwards and RN maps back * to the native expanded state). Pass the live open boolean; omit for a plain * button. So a Button that toggles a Dropdown/Popover stays accessible. */ expanded?: boolean; /** * Announces that the button opens a popup of this kind (aria-haspopup), for a * menu / dialog / listbox trigger. Pair it with `expanded` so assistive tech * reads both the popup relationship and its open state. Web-only; a no-op natively. */ haspopup?: "menu" | "dialog" | "listbox" | "grid" | "tree" | true; /** E2E hook forwarded to the root element. */ testID?: string; /** Composition within a parent only, never a restyle hook and never a width: `block`, the measure steps, and the parent layout container own the width. */ style?: LayoutStyle; } export declare function intentOf(p: ButtonProps): Intent; export declare function sizeOf(p: ButtonProps): Size; /** Utility boxes are separate from text-button density. */ export declare function iconBoxOf(p: Pick): "compact" | "medium" | "large" | null; export { minTargetSlop } from "../../style/touch-target.js"; /** Build a Button component from a platform skin. * @ref Ref to the interactive Pressable, including link buttons. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs. */ export declare function createButton(skin: ButtonSkin): import("react").ForwardRefExoticComponent>; //# sourceMappingURL=button.shared.d.ts.map