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

interface BrandProps {
    logo?: ReactNode;
    name?: string;
    tagline?: string;
    size?: "sm" | "md" | "lg";
    className?: string;
}
interface BrandMarkProps extends HTMLAttributes<HTMLSpanElement> {
    /** What sits in the square — a letter, an initial, an icon. */
    glyph?: ReactNode;
    /**
     * `"sm" | "md" | "lg"`, or an exact pixel size when a design calls for one
     * the scale does not have.
     */
    size?: "sm" | "md" | "lg" | number;
}

declare const Brand: react.ForwardRefExoticComponent<BrandProps & react.RefAttributes<HTMLDivElement>> & {
    Mark: react.ForwardRefExoticComponent<BrandMarkProps & react.RefAttributes<HTMLSpanElement>>;
};

/**
 * The square logo tile — a glyph centred in a rounded, coloured square.
 *
 * `Brand` has always taken its mark as a caller-supplied `logo` node, which is
 * exactly why every page that wanted one rebuilt the same square: fixed size,
 * rounded, grid-centred, bold, white, and `shrink-0` so a flex row never
 * squashes it. Four surfaces carried that block inline.
 *
 * ## It ships no brand colour, deliberately
 *
 * The default is a neutral zinc tile. A component library inventing your brand
 * gradient would be wrong, and would be the first thing every consumer had to
 * override — so the FILL is `className`'s job and only the geometry lives here.
 * That is also what the duplicated code actually had in common: each copy
 * already pulled its gradient from a token class and hand-rolled the box.
 */
declare const BrandMark: react.ForwardRefExoticComponent<BrandMarkProps & react.RefAttributes<HTMLSpanElement>>;

export { Brand, BrandMark, type BrandMarkProps, type BrandProps };