// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file Button.tsx
 * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
 * @output Exports Button component, ButtonProps, ButtonVariant types
 * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Button/Button.doc.mjs (props table, features, implementation notes)
 * - /packages/core/src/Button/Button.test.tsx (tests for new/changed behavior)
 * - /packages/core/src/Button/index.ts (exports if types change)
 * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Button/ (showcase blocks)
 *
 * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
 */
import { useRef, useTransition, type ReactNode } from 'react';
import type { BaseProps } from "../BaseProps.js";
import type { Elevation, SizeValue } from "../utils/types.js";
import * as stylex from "../style-runtime.js";
import { useTooltip } from "../Tooltip/useTooltip.js";
import "../theme/tokens.stylex.js";
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars, shadowVars, focusVars } from "../theme/tokens.stylex.js";
import { Spinner } from "../Spinner/index.js";
import { VisuallyHidden } from "../VisuallyHidden/index.js";
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
import { useSize } from "../SizeContext/SizeContext.js";
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
import { mergeProps } from "../utils/index.js";
import { useMergedRefs } from "../hooks/useMergedRefs.js";
import { useLinkComponent } from "../Link/useLinkComponent.js";
import type { LinkComponentType } from "../Link/types.js";
import { themeProps } from "../utils/themeProps.js";
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
import { useTranslator } from "../i18n/index.js";
import type { ButtonVariantMap } from "./index.js";

/**
 * Base button styles
 * Pseudo-classes are nested within properties per StyleX recommendation:
 * https://stylexjs.com/docs/learn/styling-ui/defining-styles#pseudo-classes
 */
const styles = {
  base: {
    "--button-focus-offset": "x16bblx1",
    kInvED: "x1wfwxd8 x13aywxo",
    kVAEAm: "x1n2onr6",
    k1xSpc: "x3nfvp2",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kOIVth: "x1txdalj",
    k8WAf4: "xce4md1",
    kg3NbH: "xrrkdod",
    kMzoRj: "xc342km",
    ksu8eU: "xng3xce",
    kaIpWk: "x1jxw6zd",
    kMv6JI: "xjb2p0i",
    kGuDYH: "xcr08ib",
    kLWn49: "x1kq96og",
    k63SB2: "x1e4wzip",
    khDVqt: "xuxw1ft",
    kkrTdU: "x1ypdohk x16khyan",
    k1ekBW: "xrafxwg",
    kIyJzY: "xuedmi6 x12w9bfk",
    kAMwcw: "xlr8y92",
    $$css: true as const
  },
  pressable: {
    k3aq6I: "x3oybdh x8ppqj",
    $$css: true as const
  },
  inactive: {
    kkrTdU: "xt0e3qv",
    kKwaWg: "x18o3ruo",
    k3aq6I: "x1c071of x1pdlv7q",
    $$css: true as const
  },
  disabled: {
    kSiTet: "xbyyjgo",
    $$css: true as const
  },
  ariaDisabled: {
    kKwaWg: "x18o3ruo xuqm82a",
    $$css: true as const
  },
  iconOnly: {
    "--button-icon-only-aspect": "x1v15ycx",
    kOBAk4: "xioom0i",
    kg3NbH: "xnjsko4",
    k8WAf4: "xt970qd",
    $$css: true as const
  },
  iconWrapper: {
    k1xSpc: "x3nfvp2",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kmuXW: "x2lah0s",
    $$css: true as const
  },
  contentWrapper: {
    k1xSpc: "xjp7ctv",
    $$css: true as const
  },
  link: {
    kybGjl: "x1hl2dhg",
    $$css: true as const
  }
};

// Dynamic style for the consumer-controlled button width. Numbers are treated
// as pixels by StyleX; strings (e.g. '100%') are used as-is.
const dynamicStyles = {
  width: (width: SizeValue | null) => [{
    kzqmXN: width != null ? "x5lhr3w" : width,
    $$css: true as const
  }, {
    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
  }]
};
const sizeStyles = {
  sm: {
    kZKoxP: "x6k0iem",
    $$css: true as const
  },
  md: {
    kZKoxP: "x1ueg155",
    $$css: true as const
  },
  lg: {
    kZKoxP: "xssyfek",
    $$css: true as const
  }
};

/**
 * Icon size per button size.
 * Matches Icon sizing: sm/md=16px, lg=20px.
 * fontSize is set so emoji and text-based icons scale correctly.
 */
const iconSizeStyles = {
  sm: {
    kzqmXN: "x1kky2od",
    kZKoxP: "xlup9mm",
    kGuDYH: "x1j61zf2",
    $$css: true as const
  },
  md: {
    kzqmXN: "x1kky2od",
    kZKoxP: "xlup9mm",
    kGuDYH: "x1j61zf2",
    $$css: true as const
  },
  lg: {
    kzqmXN: "xw4jnvo",
    kZKoxP: "x1qx5ct2",
    kGuDYH: "xwsyq91",
    $$css: true as const
  }
};

/**
 * Resting elevation for floating buttons (e.g. a FAB). `none` is the default
 * flat button; `low`/`med`/`high` map to the shadow token scale. 'none' stays
 * a literal so it never conflicts with a variant's background layering.
 */
const elevationStyles = {
  none: {
    kGVxlE: "x1gnnqk1",
    $$css: true as const
  },
  low: {
    kGVxlE: "x1i5ehqx",
    $$css: true as const
  },
  med: {
    kGVxlE: "x14hfi27",
    $$css: true as const
  },
  high: {
    kGVxlE: "x1kcpxr7",
    $$css: true as const
  }
};

/**
 * Variant styles using backgroundImage for layered colors
 * Pseudo-classes are nested within properties per StyleX recommendation
 * Overlay is stacked on top of base color using multiple linear-gradients
 * Focus outline is shared across variants for consistent keyboard affordance.
 */
const variants = {
  primary: {
    kWkggS: "x1ewilqj",
    kMwMTN: "x17wrial",
    $$css: true as const
  },
  secondary: {
    kWkggS: "x17x4s8c",
    kMwMTN: "x1tgivj0",
    $$css: true as const
  },
  ghost: {
    kWkggS: "xjbqb8w",
    kMwMTN: "x1tgivj0",
    $$css: true as const
  },
  destructive: {
    kWkggS: "x1pjz0fi",
    kMwMTN: "x1m024r3",
    kjBf7l: "x1e0x2sz",
    $$css: true as const
  }
};

/**
 * Button variant type derived from ButtonVariantMap.
 * Extensible via module augmentation of ButtonVariantMap.
 */
export type ButtonVariant = keyof ButtonVariantMap;

/**
 * Button size type derived from the sizeStyles StyleX object
 */
export type ButtonSize = keyof typeof sizeStyles;
export interface ButtonProps extends BaseProps<HTMLButtonElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLButtonElement>;
  /** HTML button type attribute. @default 'button' */
  type?: 'button' | 'submit' | 'reset';
  /** HTML name attribute for form submission. */
  name?: string;
  /** HTML value attribute for form submission. */
  value?: string | number | ReadonlyArray<string>;
  /** Associates the button with a form element by ID. */
  form?: string;
  /**
   * Accessible label for the button (required for accessibility).
   * Rendered as visible text by default. When `isIconOnly` is true,
   * used as aria-label instead.
   */
  label: string;
  /**
   * The visual style variant of the button.
   * @default 'secondary'
   */
  variant?: ButtonVariant;
  /**
   * The size of the button.
   * @default 'md'
   */
  size?: ButtonSize;
  /**
   * Resting elevation — the shadow depth the button sits at. Use for floating
   * buttons (FABs) that hover above content. `none` is the default flat button.
   * @default 'none'
   */
  elevation?: Elevation;
  /**
   * Whether the button is disabled.
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Whether the button is in a loading state. Loading prevents interaction
   * without dimming the spinner; explicit disabled states remain dimmed.
   * @default false
   */
  isLoading?: boolean;
  /**
   * Keep the button interactive while a `clickAction` is pending. The loading
   * state still renders the spinner and `aria-busy`, but the button is not
   * disabled and the in-flight action is not deduped — so a re-click lands and
   * interrupts the previous action with a fresh one. Use for interruptible
   * actions (e.g. a toggle whose action can be re-triggered before the previous
   * one settles), not fire-once actions (submit/save/pay).
   * @default false
   */
  isInterruptible?: boolean;
  /**
   * Click handler. For async actions that should show a loading state,
   * use `clickAction` instead.
   */
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  /**
   * Async click action. Shows loading state while pending.
   */
  clickAction?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
  /**
   * Icon element rendered before the label text.
   */
  icon?: ReactNode;
  /**
   * When true, renders as a square icon-only button with `label` as aria-label.
   * Requires `icon` to be provided.
   * @default false
   */
  isIconOnly?: boolean;
  /**
   * Width of the button. Numbers are treated as pixels, strings are used as-is
   * (e.g. `'100%'` for a full-width button). By default the button sizes to
   * its content.
   */
  width?: SizeValue;
  /**
   * Optional visible content. When provided, rendered instead of `label` as the
   * visible text (label still serves as the accessible name via aria-label).
   */
  children?: ReactNode;
  /**
   * Content rendered after the label text (badge, icon, chevron, etc.).
   * Ignored when `isIconOnly` is true to preserve square aspect ratio.
   *
   * Wrapped in a container that inherits the button's text color,
   * so child elements match the button variant's color automatically.
   */
  endContent?: ReactNode;
  /**
   * Tooltip text shown on hover.
   */
  tooltip?: string;
  /**
   * When provided, renders the button as a link (`<a>` or custom component).
   * When the button is disabled, still renders as `<button>` regardless of href
   * (disabled links are an accessibility anti-pattern).
   */
  href?: string;
  /**
   * Custom link component to use when `href` is provided.
   * Overrides the provider-level default set by LinkProvider.
   * Useful for Next.js `<Link>` or other router-aware components.
   */
  as?: LinkComponentType;
  /**
   * HTML target attribute for the link. Only applies when `href` is provided.
   */
  target?: string;
  /**
   * HTML rel attribute for the link. Only applies when `href` is provided.
   */
  rel?: string;
}
const spinnerReveal = "x18re5ia-B";
const contentHide = "x188b6p3-B";

// Hold the loading swap for a short delay so a fast action (e.g. clickAction)
// that settles within the delay never flashes a spinner. The spinner fade-in
// and the content hide share the same delay so the button never shows an empty
// frame in between. Reduced motion is instant.
const SPINNER_DELAY = durationVars['--duration-medium-min'];
const loadingStyles = {
  hiddenContent: {
    kMwMTN: "x19co3pv",
    $$css: true as const
  },
  hiddenContentDelayed: {
    kKVMdj: "x1ffowhz",
    k44tkh: "xjlvqhv",
    kWV6AL: "x10e4vud",
    kKxzle: "x17yabm6 x14q22ui",
    $$css: true as const
  }
};

/**
 * "I am the last member of the group" — the trailing end cap.
 *
 * NOT `:last-child`: several members render an invisible layer element AFTER
 * their button (a tooltip'd Button returns button + layer; DropdownMenu returns
 * trigger + popover). `useLayer` renders those inline rather than portaling
 * them, so the layer — not the button — took the `:last-child` slot and the real
 * trailing button silently kept square corners (#2508).
 *
 * Layers always carry the native `popover` attribute (useLayer.tsx), and a
 * popover is never an in-flow member — it is `display: none` until shown, then
 * promoted to the top layer. Context layers also retain an inert `<template>`
 * marker so they can re-resolve their JSX position. Neither element is a group
 * member, so "last member" is: no following element sibling besides those two
 * pieces of layer infrastructure.
 *
 * Reading it the other way round — marking the *buttons* and testing for a
 * marked sibling — is the trap: it silently reclassifies anything it doesn't
 * recognise as "not a member", so a member wrapped in a `display: contents`
 * wrapper (Tooltip, HoverCard) or a raw child would make the button BEFORE it
 * round mid-group. Ignoring known layers keeps the predicate conservative: an
 * unrecognised sibling still counts, exactly as `:last-child` did, so the worst
 * case degrades to the old behaviour instead of a wrong corner.
 *
 * Kept as a same-file const: StyleX only statically evaluates a selector key
 * from a const in the same file.
 *
 * The leading edge still uses `:first-child` — a member's button always precedes
 * its own layer, so the first button is genuinely `:first-child`.
 */
const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template)))';
const groupStyles = {
  horizontal: {
    krdFHd: "x15mokao x8eehn2",
    kVL7Gh: "xbiv7yw x1xrp5p4",
    kfmiAY: "x1ga7v0g x1tzxhge",
    kT0f0o: "x16uus16 x1rmb4wm",
    k2ei4v: "xgbv0en x1pjv70x",
    kVhnKS: "x1t7ytsu xyf0ibl",
    kGJrpR: "x1j92z86",
    $$css: true as const
  },
  vertical: {
    krdFHd: "x15mokao x8eehn2",
    kfmiAY: "x1ga7v0g x2qxyot",
    kVL7Gh: "xbiv7yw xturttb",
    kT0f0o: "x16uus16 x1rmb4wm",
    kEafiO: "x11xkdxz x1g31smg",
    kPef9Z: "x13fuv20 x1d9v4yf",
    kLZC3w: "x1pc3f07",
    $$css: true as const
  },
  onSolidHorizontal: {
    kGJrpR: "xrvmtm5",
    $$css: true as const
  },
  onSolidVertical: {
    kLZC3w: "x11npmm7",
    $$css: true as const
  }
};

/**
 * A versatile button component with multiple variants.
 *
 * Styles use Astryx theme tokens via StyleX.
 * Wrap your app in <Theme> to apply a theme.
 * Themes can provide component-level variant overrides via theme.components.button.variants
 *
 * When `href` is provided (and the button is not disabled), renders as an `<a>`
 * element (or custom link component) with full button styling, enabling native
 * browser behaviors like right-click → open in new tab and Cmd+Click.
 *
 * @example
 * ```
 * <Button label="Click me" />
 * <Button label="Primary action" variant="primary" />
 * <Button label="Delete" variant="destructive" />
 * <Button label="Settings" icon={<GearIcon />} variant="ghost" isIconOnly />
 * <Button label="Pick emoji" icon={<span>🚀</span>} variant="ghost" size="sm" isIconOnly />
 * <Button label="Edit" icon={<PencilIcon />} />
 * <Button label="Messages" endContent={<Badge label={3} />} />
 * <Button label="Edit" icon={<PencilIcon />} endContent={<Badge label="New" />} />
 * <Button label="Sign in" variant="primary" width="100%" />
 * <Button label="Visit site" href="https://example.com" variant="primary" />
 * <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
 * ```
 */
export function Button({
  label,
  variant = 'secondary',
  size: sizeProp,
  type = 'button',
  isDisabled = false,
  isLoading = false,
  isInterruptible = false,
  clickAction,
  icon,
  isIconOnly = false,
  width,
  elevation = 'none',
  children,
  endContent,
  tooltip,
  href,
  as,
  target,
  rel,
  xstyle,
  className,
  style,
  ref,
  ...props
}: ButtonProps): ReactNode {
  const t = useTranslator();
  const size = useSize(sizeProp, 'md');
  const buttonGroup = useButtonGroup();
  const [isPending, startTransition] = useTransition();
  // clickAction is normally fire-once (submit/save/pay), so a same-tick
  // double-click must dedupe — which neither isPending nor useOptimistic do.
  // Hence the ref guard. Interruptible callers (e.g. ToggleButton) opt out so a
  // re-click can land and interrupt the in-flight action with a fresh one.
  const actionInFlightRef = useRef(false);
  const isLoadingState = isLoading || isPending;
  // Delay the spinner reveal for action-driven loading (clickAction's own
  // transition) so a fast action that settles within the delay does not flash
  // a spinner. Interruptible loading is delayed too, so rapid re-clicks settle
  // before any spinner shows. Explicit isLoading-only stays immediate, since
  // the consumer is deliberately showing it.
  const delaySpinner = isPending || isInterruptible;
  const groupDisabled = buttonGroup?.isDisabled ?? false;
  // When interruptible, the loading state drives the spinner and aria-busy but
  // not disabled, so clicks keep landing and can interrupt the in-flight action.
  const buttonDisabled = isDisabled || groupDisabled || isLoadingState && !isInterruptible;
  // A loading button remains non-interactive, but its spinner communicates an
  // active state and must retain contrast. Only explicitly disabled controls
  // receive the visually dimmed treatment.
  const visuallyDisabled = isDisabled || groupDisabled;
  // isIconOnly prop is the source of truth for icon-only rendering.
  // When false (default), label is always rendered as visible text.

  const LinkComponent = useLinkComponent(as);

  // Render as link when href is provided and button is not disabled.
  // Disabled links are an accessibility anti-pattern — fall back to <button>.
  const renderAsLink = href != null && !buttonDisabled;

  // Use aria-disabled when tooltip is present so the button remains focusable
  // for keyboard users to reach the tooltip. Otherwise use native disabled.
  const useAriaDisabled = tooltip != null && buttonDisabled;

  // Attach tooltip behavior via the hook rather than wrapping the button in a
  // <Tooltip> element. The hook adds hover/focus triggers to the button itself,
  // so no extra DOM node is inserted — the button stays a direct child of its
  // container (no layout shift, and edge-compensation markers remain
  // discoverable through the container's direct-child `:has()` selector).
  const tooltipHook = useTooltip({
    placement: 'above',
    isEnabled: tooltip != null
  });
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // The ref guard dedupes fire-once actions. Interruptible callers skip it so
    // a re-click while pending starts a fresh action that interrupts the prior.
    if (buttonDisabled || actionInFlightRef.current && !isInterruptible) {
      e.preventDefault();
      return;
    }
    props.onClick?.(e);
    if (clickAction && !e.defaultPrevented) {
      actionInFlightRef.current = true;
      startTransition(async () => {
        try {
          await clickAction(e);
        } finally {
          actionInFlightRef.current = false;
        }
      });
    }
  };

  // When aria-disabled, suppress activation keys (Enter/Space) but allow
  // other keys (Escape, arrows) to reach consumer handlers.
  const handleKeyDown = useAriaDisabled ? (e: React.KeyboardEvent<HTMLButtonElement>) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
    } else {
      props.onKeyDown?.(e);
    }
  } : undefined;

  // Ghost buttons are edge-compensatable — containers detect this attribute
  // via :has() and pull their own slot margins to align flush at edges.
  const isFlat = variant === 'ghost';
  const edgeCompAttr = isFlat ? {
    [EDGE_COMP_ATTR]: ''
  } : null;

  // Shared StyleX props for both button and link rendering
  const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.inactive, visuallyDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
  // Standalone floating buttons only — a grouped button's elevation is owned
  // by the ButtonGroup so the shared surface lifts as one unit.
  !buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
  // AFTER the shared focus outline: the outline supplies width/style/offset
  // for every variant, and `destructive` re-colors just the ring to match
  // its own surface. Ordering is the mechanism — StyleX is last-wins.
  variants[variant], xstyle);
  const sharedMergedProps = mergeProps(
  // Inside a group the group owns the surface's elevation, so the button
  // reflects the tier it actually paints rather than the prop it was handed.
  themeProps('button', {
    variant,
    size,
    elevation: buttonGroup ? 'none' : elevation
  }), sharedStylexProps, className, style);
  const buttonContent = <>
      {isLoadingState && <span {...{
      0: {
        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1ey2m1c xrvj5dj x1ku5rj1"
      },
      1: {
        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1ey2m1c xrvj5dj x1ku5rj1 xqcmdr3 xb2rp9n xskzprw x17yabm6 x14q22ui"
      }
    }[Number(!!delaySpinner) << 0]} aria-hidden="true">
          <Spinner size="sm" shade="inherit" />
        </span>}
      <span {...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent))} aria-hidden={isLoadingState || undefined}>
        {icon && <span {...stylex.props(styles.iconWrapper, iconSizeStyles[size])}>
            {icon}
          </span>}
        {isIconOnly ? null : <span className="xb3r6kr xlyipyv xeuugli">{children ?? label}</span>}
        {!isIconOnly && endContent && <span className="x3nfvp2 x6s0dn4 x1heor9g">{endContent}</span>}
      </span>
      {/* Live region for loading state announcements */}
      <VisuallyHidden role="status" aria-live="polite">
        {isLoadingState ? t('@astryx.button.loading') : ''}
      </VisuallyHidden>
    </>;

  // aria-label is set when:
  // 1. Icon-only mode (label is the only accessible name)
  // 2. Loading state on non-icon-only (announce the button's purpose)
  // 3. Children differ from label (children are visible, label is accessible name)
  const needsAriaLabel = isIconOnly && label !== '' || isLoadingState && !isIconOnly || children != null && children !== label;
  const ariaLabelProp = needsAriaLabel ? {
    'aria-label': label
  } : null;

  // When a tooltip is attached via the hook, point aria-describedby at the
  // tooltip content (composing with any consumer-provided value).
  const describedByProp = tooltip != null ? {
    'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
  } : null;

  // Merge the consumer ref with the tooltip hook's trigger ref so both point at
  // the same element. useMergedRefs tolerates undefined, so this is a no-op for
  // the tooltip side when no tooltip is set.
  const mergedButtonRef = useMergedRefs(ref, tooltip != null ? tooltipHook.ref : undefined);
  let element: ReactNode;
  if (renderAsLink) {
    element = <LinkComponent ref={mergedButtonRef as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={rel} {...sharedMergedProps} {...props} {...ariaLabelProp} {...describedByProp} {...edgeCompAttr} aria-busy={isLoadingState || undefined} onClick={handleClick}>
        {buttonContent}
      </LinkComponent>;
  } else {
    element = <button ref={mergedButtonRef} type={type} disabled={useAriaDisabled ? undefined : buttonDisabled} {...sharedMergedProps} {...props} {...ariaLabelProp} {...describedByProp} {...edgeCompAttr} aria-busy={isLoadingState || undefined} aria-disabled={useAriaDisabled || undefined} onClick={handleClick} {...handleKeyDown ? {
      onKeyDown: handleKeyDown
    } : null}>
        {buttonContent}
      </button>;
  }
  if (tooltip) {
    return <>
        {element}
        {tooltipHook.renderTooltip(tooltip)}
      </>;
  }
  return element;
}
Button.displayName = 'Button';