import * as react from 'react';
import { ReactNode } from 'react';

/** Define properties to customize the logo variant, size, style, and icon display options */
interface LogoProps {
    /** Reserved for future lockups; only the default ('sandbox') exists today. */
    variant?: 'sandbox';
    size?: 'sm' | 'md' | 'lg' | 'xl';
    className?: string;
    /** Render the knot mark alone, without the wordmark. */
    iconOnly?: boolean;
}
/** Icon-only Tangle knot, brand gradient, theme-independent. `size` is the
 *  rendered square in px. */
declare function TangleKnot({ size, className }: {
    size?: number;
    className?: string;
}): react.JSX.Element;
/** Full Tangle lockup (knot + wordmark) or, with `iconOnly`, just the knot. The
 *  wordmark paints with `currentColor` so it inherits the surrounding text color
 *  and adapts to light/dark automatically. */
declare function Logo({ variant, size, className, iconOnly }: LogoProps): react.JSX.Element;
/** Define properties for a brand header including optional title, children, and CSS class name */
interface BrandHeaderProps {
    /** Product name rendered next to the knot. Omit for a mark-only header. */
    title?: string;
    /** Right-aligned slot for nav, actions, theme toggles. */
    children?: ReactNode;
    className?: string;
}
/**
 * Shared app-shell header: icon-only Tangle knot + optional product title on
 * the left, caller-supplied nav/actions on the right. Token-styled only.
 */
declare function BrandHeader({ title, children, className }: BrandHeaderProps): react.JSX.Element;

export { BrandHeader, type BrandHeaderProps, Logo, type LogoProps, TangleKnot };
