@fabio.caffarello/react-design-system 3.10.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/TabsAsLinks/TabsAsLinks.d.ts

@@ -0,0 +1,80 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+/** Visual hierarchy: `default` = primary tab bar, `sub` = nested sub-tabs. */
+export type TabsAsLinksVariant = "default" | "sub";
+/** A single navigation tab. The active state is decided by the caller. */
+export interface TabAsLink {
+    /** Visible tab label. */
+    label: ReactNode;
+    /** Destination URL — pre-computed by the caller. */
+    href: string;
+    /**
+     * Whether this tab is the current one. The caller derives it (from
+     * `pathname` / `searchParams`); the component does no detection of its own.
+     * @default false
+     */
+    active?: boolean;
+    /** Optional leading icon (decorative — rendered `aria-hidden`). */
+    icon?: ReactNode;
+    /** Optional trailing count (e.g. number of items behind the tab). */
+    count?: number;
+}
+export interface TabsAsLinksProps extends HTMLAttributes<HTMLElement> {
+    /** The tabs to render, in order. */
+    items: TabAsLink[];
+    /**
+     * Visual hierarchy.
+     * @default 'default'
+     */
+    variant?: TabsAsLinksVariant;
+    /**
+     * Element/component each tab renders as. Defaults to a plain `<a>` (zero
+     * JS, works without hydration). Pass a router link — e.g. Next's `Link` —
+     * to keep client-side navigation/prefetch: `linkComponent={Link}`. It
+     * receives `href`, `className`, `aria-current`, and `children`.
+     * @default 'a'
+     */
+    linkComponent?: ElementType;
+    /** Additional CSS classes merged onto the root `<nav>`. */
+    className?: string;
+}
+/**
+ * `TabsAsLinks` — tabs rendered as **navigation links**, with the active tab
+ * decided by the caller (from the URL), not by interactive state.
+ *
+ * This is the server-safe counterpart to the interactive `Tabs` widget. Use
+ * it for tab bars whose selection lives in the URL (`?tab=`, `/section`) so
+ * they work without JavaScript and survive a shared link. Because each tab is
+ * a real link to a distinct destination, the component uses the **navigation**
+ * pattern — a named `<nav>` landmark with `aria-current="page"` on the active
+ * link — NOT the `role="tab"` widget pattern (which would promise arrow-key
+ * semantics that links don't have).
+ *
+ * ### Accessible name
+ *
+ * Renders a `<nav>` landmark, which must be named so screen-reader users can
+ * tell multiple tab bars apart. Pass `aria-label` (e.g. `"Painel"`) or
+ * `aria-labelledby`. With neither, a dev-only warning fires (the landmark
+ * still renders, just anonymously).
+ *
+ * ### Server-safe
+ *
+ * No hooks, no event handlers on the DOM — pure presentation. Ships in the
+ * `./server` entry. Defaults to a plain `<a>`; pass `linkComponent={Link}` to
+ * keep a router's client-side navigation, which crosses the RSC boundary as a
+ * client reference.
+ *
+ * @example
+ * ```tsx
+ * // Next App Router — active derived from searchParams in a Server Component
+ * <TabsAsLinks
+ *   aria-label="Painel"
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: "Visão geral", href: "/painel?tab=overview", active: tab === "overview" },
+ *     { label: "Alertas", href: "/painel?tab=alerts", active: tab === "alerts", count: 3 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const TabsAsLinks: import("react").ForwardRefExoticComponent<TabsAsLinksProps & import("react").RefAttributes<HTMLElement>>;
+export default TabsAsLinks;

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

@@ -0,0 +1,2 @@
+export { default } from "./TabsAsLinks";
+export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./TabsAsLinks";

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

@@ -81,3 +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";
@@ -61,5 +63,7 @@ export { StatGroup } from "./components/Stat/StatGroup";
 export type { StatGroupProps, StatGroupLayout, StatGroupCols, } from "./components/Stat/StatGroup";
 export { default as TableCell } from "./components/Table/TableCell";
 export type { TableCellProps } from "./components/Table/TableCell";
+export { default as TabsAsLinks } from "./components/TabsAsLinks/TabsAsLinks";
+export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./components/TabsAsLinks/TabsAsLinks";
 export { default as Timeline } from "./components/Timeline/Timeline";
 export type { TimelineItem, TimelineOrientation, TimelineProps, } from "./components/Timeline/Timeline";

package/package.json

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