import { LogoProps, LogomarkHandle, LogomarkProps, WordmarkProps } from "./types.mjs";
import { ForwardRefExoticComponent, RefAttributes } from "react";
//#region src/logo/logo.d.ts
/** The {@link Logo} component, with `Logomark` / `Wordmark` shorthands attached. */
interface LogoComponent extends ForwardRefExoticComponent<LogoProps & RefAttributes<SVGSVGElement>> {
  /**
   * The hedgehog icon on its own. Static by default, but it can also **jump** like the
   * logomark in the PostHog app — set `jumpOnClick` and/or `autoJumpMs`, or drive it yourself
   * through the {@link LogomarkHandle} on its `ref`. See {@link LogomarkProps}.
   *
   * @example
   * ```tsx
   * <Logo.Logomark size={32} />                  // static icon
   * <Logo.Logomark variant="mono" color="#fff" />
   * <Logo.Logomark jumpOnClick />                // click me! (successive clicks jump higher)
   * <Logo.Logomark autoJumpMs={3000} />          // jumps every 3s
   *
   * const mark = useRef<LogomarkHandle>(null)
   * <Logo.Logomark ref={mark} />                 // ...then mark.current?.jump() whenever
   * ```
   */
  Logomark: ForwardRefExoticComponent<LogomarkProps & RefAttributes<LogomarkHandle>>;
  /**
   * The "PostHog" wordmark only — shorthand for `<Logo layout="wordmark">`. Always mono;
   * tint it with `color`. See {@link WordmarkProps}.
   *
   * @example
   * ```tsx
   * <Logo.Wordmark />
   * <Logo.Wordmark color="#fff" />
   * ```
   */
  Wordmark: ForwardRefExoticComponent<WordmarkProps & RefAttributes<SVGSVGElement>>;
}
/**
 * The PostHog logo — one component for every lockup and color treatment.
 *
 * Pick the **form** with {@link LogoProps.layout | `layout`} (`landscape` · `stacked` ·
 * `logomark` · `wordmark`) and the **color treatment** with {@link LogoProps.variant |
 * `variant`} (`gradient` · `print` · `mono`). For `mono`, set {@link LogoProps.color |
 * `color`} to any CSS color — it defaults to `currentColor`, so the mark inherits the
 * surrounding text color. Renders an inline `<svg>`: it scales crisply, takes every native
 * `<svg>` prop (`className`, `style`, `onClick`, …), and forwards `ref` to the element.
 *
 * Sizing: pass `size` (a number of px or any CSS length) to set the width — height follows
 * the lockup's aspect ratio. Accessibility: pass `title` to label it for assistive tech
 * (`role="img"` + `<title>`); without one it renders as decorative (`aria-hidden`).
 *
 * Shorthands {@link LogoComponent.Logomark | `Logo.Logomark`} and
 * {@link LogoComponent.Wordmark | `Logo.Wordmark`} render just the icon or just the wordmark.
 *
 * @example
 * ```tsx
 * import { Logo } from "@posthog/brand/logo"
 *
 * <Logo />                                    // landscape lockup, full gradient (defaults)
 * <Logo size={160} title="PostHog" />         // 160px wide, labelled
 * <Logo variant="mono" color="#fff" />        // single color (e.g. on a dark background)
 * <Logo variant="mono" />                     // inherits the ambient CSS `color`
 * <Logo variant="print" layout="stacked" />   // 4-color / CMYK, portrait lockup
 * <Logo.Logomark size={32} />                 // the hedgehog icon only
 * <Logo.Wordmark />                           // the "PostHog" wordmark only
 * ```
 *
 * @see {@link LogoProps} for the full prop reference.
 */
declare const Logo: LogoComponent;
//#endregion
export { Logo, LogoComponent };