@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
38 lines (35 loc) • 1.18 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { HeroProps } from './types.js';
import 'react';
/**
* A versatile hero component that displays an icon alongside primary and secondary content.
* Automatically organizes child components by type and supports both stacked and grid layouts.
*
* @example
* ```tsx
* // Basic hero with icon and content
* <Hero>
* <Icon><Placeholder /></Icon>
* <HeroTitle>Primary Title</HeroTitle>
* <HeroSubtitle>Secondary information</HeroSubtitle>
* </Hero>
*
* // Grid layout for compact display
* <Hero compact>
* <Icon><Settings /></Icon>
* <HeroTitle>Settings</HeroTitle>
* <HeroSubtitle>Configure your preferences</HeroSubtitle>
* </Hero>
* ```
*
* ## Child Component Behavior
* - **Icon**: Only one allowed
* - **HeroTitle**: Only one allowed
* - **HeroSubtitle**: Any number allowed as secondary content
*
* ## Layout Modes
* - **Stack** (default): Vertical layout with larger icon and stacked content
* - **Grid** (compact=true): Horizontal layout with smaller icon beside content
*/
declare function Hero({ ref, ...props }: HeroProps): react_jsx_runtime.JSX.Element;
export { Hero };