import { AssetSvgProps } from "../runtime/props.mjs"; //#region src/logo/types.d.ts /** * Color treatment of the mark, passed as {@link LogoProps.variant}. * * - `"gradient"` — the full multi-color brand gradient. The default. * - `"print"` — the flat 4-color / CMYK separation, for print and limited-palette use. * - `"mono"` — a single solid color (see {@link LogoProps.color}), e.g. all-white on a dark * background or all-black on a light one. * * @example * ```tsx * // full color (default) * // 4-color / CMYK * // single color * ``` */ type LogoVariant = "gradient" | "mono" | "print"; /** * Which form of the lockup to render, passed as {@link LogoProps.layout}. * * - `"landscape"` — logomark + wordmark, side by side. The default. * - `"stacked"` — logomark above the wordmark (portrait). * - `"logomark"` — the hedgehog icon only (also {@link Logo.Logomark}). * - `"wordmark"` — the "PostHog" wordmark only (also {@link Logo.Wordmark}). * * @example * ```tsx * // ▱ PostHog (default) * // ▱ over PostHog * // ▱ * // PostHog * ``` */ type LogoLayout = "landscape" | "stacked" | "logomark" | "wordmark"; /** * Props for the {@link Logo} component. Extends every native `` prop (plus `size` and * `title` from {@link AssetSvgProps}), so `className`, `style`, `onClick`, `ref`, … all work. * * @example * ```tsx * import { Logo } from "@posthog/brand/logo" * * // landscape, full gradient * // 160px wide, height auto from aspect ratio * // single color * // 4-color, portrait lockup * // labelled for assistive tech * ``` */ interface LogoProps extends AssetSvgProps { /** * Color treatment — see {@link LogoVariant}. * * @default "gradient" */ variant?: LogoVariant; /** * Lockup form — see {@link LogoLayout}. * * @default "landscape" */ layout?: LogoLayout; /** * The fill for `variant="mono"` (and the always-mono `wordmark` layout). Any CSS color, * e.g. `"#fff"`, `"black"`, or a token like `colors.blue.core`. **Ignored** by the * `gradient` and `print` variants. When omitted the mark inherits the ambient CSS `color` * (`currentColor`), so it adapts to its surroundings by default. * * @default "currentColor" * @example * ```tsx * // explicit white * // inherits surrounding text color * // red * ``` */ color?: string; } /** * Props for {@link Logo.Logomark} — the hedgehog icon on its own (a {@link Logo} without * `layout`). Static by default; it can also **jump** like the logomark in the PostHog app — * its 3 spikes and head spring up one after the other. Opt in with {@link jumpOnClick} * and/or {@link autoJumpMs}; tune it with {@link jumpHeight} / {@link airtimeMs}. It can also * dress up for a {@link holiday}. Every native `` prop (`className`, `style`, `onClick`, * …) works too; its `ref` exposes a {@link LogomarkHandle} — call `ref.current.jump()` to jump * it imperatively (the `` node is on `ref.current.svg`). * * Jumping respects `prefers-reduced-motion` (jumps become no-ops). * * @example * ```tsx * // static icon * // single color * // click me! (clicks escalate) * // jumps every 3s * // wearing a Santa hat * ``` */ interface LogomarkProps extends Omit { /** * Jump when clicked. Rapid successive clicks escalate the height along the same curve as * the PostHog app (`1.5 ** ((n % 8) - 2)` — builds up, then cycles back down). * * @default false */ jumpOnClick?: boolean; /** * Jump automatically every this-many milliseconds (e.g. `5000` for every 5s). Omit for * no auto-jumping. */ autoJumpMs?: number; /** * Baseline jump height, in viewBox units (the mark is 28 tall, so the default `12` is a * bit under half its height). Scales with the rendered size, and is multiplied by the * per-jump magnitude of the click escalation. * * @default 12 */ jumpHeight?: number; /** * Duration of one jump (up and back down) in milliseconds. The spike stagger is derived * from it, so shortening the airtime tightens the whole animation. * * @default 400 */ airtimeMs?: number; /** * Dress the hedgehog up for a holiday — see {@link LogoHoliday}. The accessory rides the * head, so it jumps too. */ holiday?: LogoHoliday; } /** * The imperative handle exposed on a {@link Logo.Logomark}'s `ref` — lets you trigger the * jump programmatically, without wiring up {@link LogomarkProps.jumpOnClick | `jumpOnClick`} * or {@link LogomarkProps.autoJumpMs | `autoJumpMs`}. * * @example * ```tsx * import { useRef } from "react" * import { Logo, type LogomarkHandle } from "@posthog/brand/logo" * * const mark = useRef(null) * * * * ``` */ interface LogomarkHandle { /** * The underlying `` element (`null` before mount / after unmount) — for measuring, * focusing, or otherwise inspecting the node. */ readonly svg: SVGSVGElement | null; /** * Make the mark jump now. `magnitude` scales the height (and tightens the spike stagger) * just like successive {@link LogomarkProps.jumpOnClick | clicks} do — `1` is a normal hop. * Returns `true` if the jump started, or `false` if it was suppressed (a jump is already in * flight, the browser lacks the Web Animations API, or the user prefers reduced motion). * * @param magnitude - height multiplier; defaults to `1`. */ jump(magnitude?: number): boolean; } /** * The holidays the logomark can dress up for — pass to {@link LogomarkProps.holiday}. The * accessory keeps its festive colors in every variant (including `mono`), and rides the head * (so it jumps along). Nothing switches by date — pick the holiday yourself, so the package * stays presentation-only (the app decides *when* it's the season). * * - `"christmas"` — a Santa hat on the hedgehog's head (the same hat the PostHog app wears in * December). * - `"halloween"` — a witch hat. */ type LogoHoliday = "christmas" | "halloween"; /** * Props for {@link Logo.Wordmark} — a {@link Logo} pinned to `layout="wordmark"` (the * "PostHog" wordmark only). The wordmark is always mono, so `layout` and `variant` are * omitted; use `color` to tint it. * * @example * ```tsx * // inherits the surrounding text color * // white wordmark * ``` */ type WordmarkProps = Omit; //#endregion export { LogoHoliday, LogoLayout, LogoProps, LogoVariant, LogomarkHandle, LogomarkProps, WordmarkProps };