@fabio.caffarello/react-design-system 3.3.1 → 3.5.0

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

@@ -1,26 +1,33 @@
-import type { HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import { type FC, type HTMLAttributes } from "react";
+import { CardHeader } from "./CardHeader";
+import { CardTitle } from "./CardTitle";
+import { CardSubtitle } from "./CardSubtitle";
+import { CardActions } from "./CardActions";
+import { CardBody } from "./CardBody";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "hover" | "selected";
     padding?: "none" | "small" | "medium" | "large";
     onClick?: () => void;
     "aria-label"?: string;
     "aria-labelledby"?: string;
+    /**
+     * Render the root as a semantic `<section>` instead of `<div>`.
+     * When `true`, the Card becomes a landmark — a screen-reader-visible
+     * region in the document outline — so it MUST carry an accessible
+     * name (either `aria-labelledby` pointing to a `Card.Title` `id` or
+     * `aria-label`). A dev-only warning is emitted when this contract
+     * isn't met; an anonymous landmark hurts navigation by announcing
+     * "region" without a name.
+     * @default false
+     */
+    asSection?: boolean;
 }
-/**
- * Card Component
- *
- * A versatile card component for displaying content in containers.
- * Follows Atomic Design principles as a Molecule component.
- * Can be used to replace BoxWrapper in many cases with more flexibility.
- * Optimized with React.memo to prevent unnecessary re-renders.
- *
- * @example
- * ```tsx
- * <Card variant="hover" padding="large">
- *   <h3>Card Title</h3>
- *   <p>Card content</p>
- * </Card>
- * ```
- */
-declare const Card: import("react").MemoExoticComponent<({ variant, padding, className, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, ...props }: Props) => import("react").JSX.Element>;
+type CardCompound = FC<CardProps> & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Subtitle: typeof CardSubtitle;
+    Actions: typeof CardActions;
+    Body: typeof CardBody;
+};
+declare const Card: CardCompound;
 export default Card;

package/dist/ui/components/Card/CardActions.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface CardActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * CardActions — wrapper that hosts consumer-supplied action buttons
+ * within a `Card.Header`.
+ *
+ * The `data-card-actions` attribute is the structural marker `CardHeader`
+ * uses (via Tailwind v4 `:has()` selectors) to switch its grid layout
+ * from a single column to `[1fr auto]` when actions are present, so
+ * Title/Subtitle stack in column 1 and the action row spans both rows
+ * in column 2. Consumers should not override this attribute.
+ *
+ * This component is presentational: it emits no handlers on the DOM
+ * itself. The action elements (typically `<Button>`) are consumer-supplied
+ * and React's RSC boundary keeps them as client references — the
+ * wrapper stays server-safe.
+ */
+export declare function CardActions({ children, className, ...props }: CardActionsProps): import("react").JSX.Element;
+export default CardActions;

package/dist/ui/components/Card/CardBody.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare function CardBody({ children, className, ...props }: CardBodyProps): import("react").JSX.Element;
+export default CardBody;

package/dist/ui/components/Card/CardHeader.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare function CardHeader({ children, className, ...props }: CardHeaderProps): import("react").JSX.Element;
+export default CardHeader;

package/dist/ui/components/Card/CardSubtitle.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface CardSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+export declare function CardSubtitle({ children, className, ...props }: CardSubtitleProps): import("react").JSX.Element;
+export default CardSubtitle;

package/dist/ui/components/Card/CardTitle.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type CardTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    /**
+     * Optional icon rendered before the title text.
+     */
+    icon?: ReactNode;
+    /**
+     * Optional badge rendered after the title text.
+     */
+    badge?: ReactNode;
+    /**
+     * Heading level. Default `h2` — the typical depth for a card title
+     * inside a page that already has an `h1`. Use `h3` (or deeper) when
+     * the card sits inside a nested section.
+     * @default 'h2'
+     */
+    as?: CardTitleAs;
+}
+export declare function CardTitle({ children, icon, badge, as: As, className, ...props }: CardTitleProps): import("react").JSX.Element;
+export default CardTitle;

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

@@ -1 +1,13 @@
 export { default } from "./Card";
+export { default as Card } from "./Card";
+export type { CardProps } from "./Card";
+export { CardHeader } from "./CardHeader";
+export type { CardHeaderProps } from "./CardHeader";
+export { CardTitle } from "./CardTitle";
+export type { CardTitleProps, CardTitleAs } from "./CardTitle";
+export { CardSubtitle } from "./CardSubtitle";
+export type { CardSubtitleProps } from "./CardSubtitle";
+export { CardActions } from "./CardActions";
+export type { CardActionsProps } from "./CardActions";
+export { CardBody } from "./CardBody";
+export type { CardBodyProps } from "./CardBody";

package/dist/ui/server.d.ts

@@ -24,6 +24,17 @@ export type { StackProps } from "./layouts/Stack/Stack";
 export { default as Breadcrumb } from "./components/Breadcrumb/Breadcrumb";
 export type { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { default as Card } from "./components/Card/Card";
+export type { CardProps } from "./components/Card/Card";
+export { CardHeader } from "./components/Card/CardHeader";
+export type { CardHeaderProps } from "./components/Card/CardHeader";
+export { CardTitle } from "./components/Card/CardTitle";
+export type { CardTitleProps, CardTitleAs } from "./components/Card/CardTitle";
+export { CardSubtitle } from "./components/Card/CardSubtitle";
+export type { CardSubtitleProps } from "./components/Card/CardSubtitle";
+export { CardActions } from "./components/Card/CardActions";
+export type { CardActionsProps } from "./components/Card/CardActions";
+export { CardBody } from "./components/Card/CardBody";
+export type { CardBodyProps } from "./components/Card/CardBody";
 export { DialogHeader } from "./components/Dialog/DialogHeader";
 export type { DialogHeaderProps } from "./components/Dialog/DialogHeader";
 export { DialogFooter } from "./components/Dialog/DialogFooter";
@@ -40,6 +51,8 @@ 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";
 export type { NavbarSeparatorProps } from "./components/SideNavbar/types";
+export { default as PageHeader } from "./components/PageHeader/PageHeader";
+export type { PageHeaderProps, PageHeaderVariant, } from "./components/PageHeader/types";
 export { default as TableCell } from "./components/Table/TableCell";
 export type { TableCellProps } from "./components/Table/TableCell";
 export { default as Timeline } from "./components/Timeline/Timeline";

package/package.json

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