45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
/**
|
|
* Standard ABiiR eyebrow (Jost). Single line, full text (no clipping).
|
|
* `surface`: burgundy on light backdrops, cream on dark.
|
|
*/
|
|
export type AbiirEyebrowSurface = 'light' | 'dark';
|
|
|
|
const SURFACE_COLOR: Record<AbiirEyebrowSurface, string> = {
|
|
light: '#5D0B24',
|
|
dark: '#faf8f3',
|
|
};
|
|
|
|
export type AbiirEyebrowProps = {
|
|
children: React.ReactNode;
|
|
/** `light` = burgundy (#5D0B24). `dark` = cream (#faf8f3) for dark backdrops. */
|
|
surface?: AbiirEyebrowSurface;
|
|
className?: string;
|
|
as?: 'p' | 'span';
|
|
/**
|
|
* `uppercase` (default): CSS small caps style for standard eyebrows.
|
|
* `preserve`: no transform — use when the string must keep mixed case (e.g. ABiiR).
|
|
*/
|
|
textCase?: 'uppercase' | 'preserve';
|
|
};
|
|
|
|
export function AbiirEyebrow({
|
|
children,
|
|
surface = 'light',
|
|
className = '',
|
|
as: Tag = 'p',
|
|
textCase = 'uppercase',
|
|
}: AbiirEyebrowProps) {
|
|
/** ~8% smaller than 12/16.575/2.763 spec; nowrap keeps one line without truncation. */
|
|
const caseClass = textCase === 'preserve' ? 'normal-case' : 'uppercase';
|
|
const base =
|
|
`m-0 whitespace-nowrap text-center font-["Jost",sans-serif] text-[11px] font-medium not-italic ${caseClass} leading-[15.194px] tracking-[2.533px]`;
|
|
return (
|
|
<Tag
|
|
className={[base, className].filter(Boolean).join(' ')}
|
|
style={{color: SURFACE_COLOR[surface]}}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|