@fabio.caffarello/react-design-system 3.11.0 → 3.12.0

package/dist/ui/components/HeroSection/HeroSection.d.ts

@@ -0,0 +1,101 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Visual treatment of the hero surface.
+ *
+ * - `plain` — no decorative background; the hero is text + padding on
+ *   whatever surface it sits on.
+ * - `gradient` — a soft brand→secondary wash (theme-aware, see
+ *   `utilities/gradients.css`).
+ * - `gradient-glow` — the same wash plus a brand-colored outer glow for
+ *   top-of-funnel emphasis (landing / home).
+ */
+export type HeroSectionVariant = "plain" | "gradient" | "gradient-glow";
+/** Block alignment of the hero content. */
+export type HeroSectionAlign = "start" | "center";
+export interface HeroSectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Eyebrow / kicker above the title (rendered uppercase, brand-colored). */
+    kicker?: ReactNode;
+    /**
+     * The hero title. Rendered as the section's `<h1>`. **Required.**
+     *
+     * When `title` is a plain string it also becomes the accessible name of
+     * the hero `<section>` landmark (the FilterChips `label` pattern). When it
+     * is a non-string `ReactNode`, supply `aria-label` or `aria-labelledby`
+     * yourself — otherwise the landmark renders without an accessible name and
+     * the component emits a dev-only warning.
+     */
+    title: ReactNode;
+    /** Supporting copy below the title (constrained to a readable measure). */
+    description?: ReactNode;
+    /** Call-to-action slot — typically one or more `<Button>`s. */
+    actions?: ReactNode;
+    /** Metrics slot — typically a `<StatGroup>` of `<Stat>`s. Spans full width. */
+    kpis?: ReactNode;
+    /** A line of metadata below everything else (low emphasis). */
+    meta?: ReactNode;
+    /**
+     * Visual treatment of the hero surface.
+     * @default 'plain'
+     */
+    variant?: HeroSectionVariant;
+    /**
+     * Block alignment of the content.
+     * @default 'start'
+     */
+    align?: HeroSectionAlign;
+    /** Additional CSS classes merged onto the root `<section>`. */
+    className?: string;
+}
+/**
+ * `HeroSection` — top-of-page hero: kicker + title + description + actions +
+ * kpis + meta, in three visual treatments (`plain` / `gradient` /
+ * `gradient-glow`) and two alignments (`start` / `center`).
+ *
+ * Distinct from `PageHeader` (contextual navigation: breadcrumb + title +
+ * actions). The hero is a page/landing **introduction** with a visual
+ * identity and slots for KPIs and metadata.
+ *
+ * ### Slots
+ *
+ * Every slot except `title` is optional and collapses cleanly when absent —
+ * no empty wrapper leaks into the DOM. `kpis` is an opaque slot: pass a
+ * `<StatGroup>` (or any node); the consumer chooses the metric layout.
+ *
+ * ### Landmark & accessible name
+ *
+ * Renders as a `<section>`. A `<section>` is only exposed as a navigable
+ * region when it has an accessible name, so the component derives one:
+ * - a string `title` becomes the `aria-label` automatically;
+ * - an explicit `aria-label` / `aria-labelledby` from the consumer always
+ *   wins (and `aria-labelledby` suppresses the derived label to avoid a
+ *   redundant name);
+ * - a non-string `title` with no consumer-supplied name triggers a dev-only
+ *   `console.warn` (dead-code-eliminated in production builds).
+ *
+ * ### Server-safe
+ *
+ * Pure presentation — no hooks, no event handlers on the DOM. Ships in the
+ * `./server` entry. Interactive children supplied via `actions` (e.g.
+ * `<Button onClick>`) cross the RSC boundary as client references normally.
+ *
+ * @example
+ * ```tsx
+ * <HeroSection
+ *   variant="gradient-glow"
+ *   align="center"
+ *   kicker="Transparência"
+ *   title="Acompanhe o Congresso em tempo real"
+ *   description="Proposições, votações e parlamentares — tudo em um só lugar."
+ *   actions={<Button variant="primary">Começar</Button>}
+ *   kpis={
+ *     <StatGroup layout="strip">
+ *       <Stat value="9,4 mil" label="Parlamentares" align="center" />
+ *       <Stat value="3,2 mil" label="Proposições" align="center" />
+ *     </StatGroup>
+ *   }
+ *   meta="Atualizado diariamente"
+ * />
+ * ```
+ */
+declare const HeroSection: import("react").ForwardRefExoticComponent<HeroSectionProps & import("react").RefAttributes<HTMLElement>>;
+export default HeroSection;

package/dist/ui/components/HeroSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./HeroSection";
+export type { HeroSectionProps, HeroSectionVariant, HeroSectionAlign, } from "./HeroSection";

package/dist/ui/components/index.d.ts

@@ -81,5 +81,7 @@ export { DataTablePattern, type DataTablePatternProps, type DataTableColumn, } f
 export { FormWizardPattern, type FormWizardPatternProps, type FormWizardStep, } from "./FormWizardPattern";
 export { SearchAndFilterPattern, type SearchAndFilterPatternProps, type FilterConfig, type FilterOption, } from "./SearchAndFilterPattern";
 export { DashboardLayout, type DashboardLayoutProps } from "./DashboardLayout";
+export { default as HeroSection } from "./HeroSection";
+export type { HeroSectionProps, HeroSectionVariant, HeroSectionAlign, } from "./HeroSection";
 export { default as TabsAsLinks } from "./TabsAsLinks";
 export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./TabsAsLinks";

package/dist/ui/server.d.ts

@@ -49,6 +49,8 @@ export { HeaderActions } from "./components/Header/components/HeaderActions";
 export type { HeaderActionsProps } from "./components/Header/components/HeaderActions";
 export { HeaderNavigation } from "./components/Header/components/HeaderNavigation";
 export type { HeaderNavigationProps } from "./components/Header/components/HeaderNavigation";
+export { default as HeroSection } from "./components/HeroSection/HeroSection";
+export type { HeroSectionProps, HeroSectionVariant, HeroSectionAlign, } from "./components/HeroSection/HeroSection";
 export { default as MenuSeparator } from "./components/Menu/MenuSeparator";
 export type { MenuSeparatorProps } from "./components/Menu/MenuSeparator";
 export { default as NavbarSeparator } from "./components/SideNavbar/components/Navbar/NavbarSeparator";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "3.11.0",
+  "version": "3.12.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",