@kenlo/kdls-design-system 2.0.0

package/README.md

@@ -0,0 +1,27 @@
+# KDLS Design System
+
+`@kenlo/kdls-design-system` — biblioteca de componentes React + tokens da Kenlo.
+
+## Estrutura
+
+```
+kdls-design-system/
+├── foundations/     # tokens.scss/tokens.css (fonte única de tokens) + Scrollbar (utilitário CSS)
+├── components/      # biblioteca de componentes React (em construção)
+├── portal/          # app de documentação interativa (playgrounds)
+├── docs/            # PATTERNS.md (receitas de UI)
+├── .claude/         # CLAUDE.md (índice), component-rules.md, component-standard.md, tokens-reference.md (regras)
+└── scripts/         # geradores (ex.: styles.css)
+```
+
+## Tokens
+
+Os tokens ficam em `foundations/tokens.css` como CSS custom properties (`var(--spacing-4)`, `var(--color-primary-50)`), com auto-inversão light/dark. Escala de espaçamento em múltiplos de 4px. Catálogo completo em [`.claude/tokens-reference.md`](.claude/tokens-reference.md).
+
+## Portal
+
+`npm run dev` sobe o portal de documentação, com os playgrounds de cada componente e as páginas de fundação (cores, tipografia, espaçamento, grid, ícones).
+
+## Status
+
+Em construção — ainda não publicado no npm.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import { TooltipPosition } from '../Tooltip';
+import './Accordion.css';
+export interface AccordionProps {
+    /** Header title — accepts text or content (badge, etc.) */
+    title: React.ReactNode;
+    /** Content shown when the Accordion is open */
+    children: React.ReactNode;
+    /** Optional icon to the left of the title (e.g. <SearchRegular />). The component handles size/alignment. */
+    icon?: IconElement;
+    /** Title size: 'md' = 16px | 'lg' = 20px (default, with larger vertical padding) */
+    size?: 'md' | 'lg';
+    /**
+     * Shows a 1px neutral-20 border around the component. `false` by default.
+     * Use `true` when the container background matches the Accordion's own background (--component-bg-color) —
+     * the border is what distinguishes the component from the surrounding surface.
+     */
+    bordered?: boolean;
+    /** Text for the optional action (link) button in the header */
+    actionLabel?: string;
+    /** Action button callback. When it returns a Promise, the spinner activates automatically */
+    onAction?: () => void | Promise<void>;
+    /** Shows a spinner on the action button. Also activated automatically when onAction returns a Promise */
+    actionLoading?: boolean;
+    /** Disables the action button */
+    actionDisabled?: boolean;
+    /** Tooltip text shown when the action button is disabled */
+    actionDisabledTooltip?: string;
+    /** Position of the disabled action button's tooltip — default 'top' */
+    actionDisabledTooltipPosition?: TooltipPosition;
+    /** Initial open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback fired when opening/closing (controlled mode) */
+    onOpenChange?: (open: boolean) => void;
+    /** Removes the content from the DOM when closed. By default the content stays in the DOM (enables animation and preserves internal state) */
+    destroyOnClose?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/components/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AccordionProps } from '../Accordion/Accordion';
+import './AccordionGroup.css';
+export interface AccordionGroupProps {
+    /** Two or more Accordions. The group manages which one is open, closing the others automatically */
+    children: React.ReactElement<AccordionProps> | React.ReactElement<AccordionProps>[];
+    /** 'connected' = collapsed borders as a single block · 'spaced' = each accordion independent, with space between them */
+    variant?: 'connected' | 'spaced';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const AccordionGroup: React.FC<AccordionGroupProps>;
+export default AccordionGroup;

package/dist/components/AccordionGroup/AccordionGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './AccordionGroup';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './Alert.css';
+import { TooltipPosition } from '../Tooltip';
+export type AlertVariant = 'success' | 'alert' | 'error' | 'neutral' | 'info';
+export interface AlertProps {
+    /** Alert's main text */
+    message: string;
+    /** Semantic variant — defines the alert's color palette */
+    variant?: AlertVariant;
+    /** Icon (24px; sm: 16px) — e.g. <InfoRegular /> */
+    icon?: IconElement;
+    /** 'lg' = body-md 16px + icon 24px · 'md' = body-sm 14px + icon 20px · 'sm' = label-sm 12px + icon 16px */
+    size?: 'lg' | 'md' | 'sm';
+    /** Width: 'hug' = fits content · 'fill' = 100% (default) */
+    width?: 'hug' | 'fill';
+    /** Shows a 1px border in the -30 shade of the variant */
+    bordered?: boolean;
+    /** Action button label */
+    actionLabel?: string;
+    /** Action button callback. When it returns a Promise, the spinner activates automatically */
+    onAction?: () => void | Promise<void>;
+    /** Shows a spinner on the action button. Also activated automatically when onAction returns a Promise */
+    actionLoading?: boolean;
+    /** Disables the action button */
+    actionDisabled?: boolean;
+    /** Tooltip text shown when the action button is disabled */
+    actionDisabledTooltip?: string;
+    /** Position of the disabled action button's tooltip — default 'top' */
+    actionDisabledTooltipPosition?: TooltipPosition;
+    /** Callback fired when clicking close — when provided, shows the close button (✕) */
+    onDismiss?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;
+export default Alert;

package/dist/components/Alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';

package/dist/components/AttachmentList/AttachmentList.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './AttachmentList.css';
+export interface AttachmentRowProps {
+    /** File name shown in the row */
+    name: string;
+    /** File-type icon (always 24px) */
+    icon?: IconElement;
+    /** Secondary info below the name — e.g. "PDF • 1.3Mb" */
+    meta?: string;
+    /** Badge or status text shown to the left of the action buttons — e.g. `<Badge variant="success" label="Signed" />` */
+    badge?: React.ReactNode;
+    /** Shows the delete button (fixed icon). Called on click. When it returns a Promise, the button shows a spinner automatically until it resolves */
+    onDelete?: () => void | Promise<void>;
+    /** Shows the download button (fixed icon). Called on click. When it returns a Promise, the button shows a spinner automatically until it resolves */
+    onDownload?: () => void | Promise<void>;
+    /** Shows the view-details button — chevron (fixed icon). Called on click */
+    onViewDetails?: () => void;
+    /** Disables the delete button on this row, keeping alignment with the others. Default: false */
+    disabledDelete?: boolean;
+    /** Disables the download button on this row, keeping alignment with the others. Default: false */
+    disabledDownload?: boolean;
+    /** Disables the view-details button on this row, keeping alignment with the others. Default: false */
+    disabledViewDetails?: boolean;
+    /** Truncates the name to a single line with ellipsis instead of wrapping across lines. Shows a tooltip with the full name, only when the text was actually truncated. Pass false to keep the full name, wrapping across lines. Default: true */
+    truncateName?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const AttachmentRow: React.FC<AttachmentRowProps>;
+export interface AttachDocument {
+    /** Unique file identifier — passed through to the onDelete/onDownload/onViewDetails callbacks */
+    id: string;
+    /** File name shown in the row */
+    name: string;
+    /** File-type icon (always 24px) */
+    icon?: IconElement;
+    /** Secondary info below the name — e.g. "PDF • 1.3Mb" */
+    meta?: string;
+    /** Badge or status text shown to the left of the action buttons — e.g. `<Badge variant="success" label="Signed" />` */
+    badge?: React.ReactNode;
+    /** Disables the delete button only on this row, even with onDelete set on AttachmentList. Keeps the button visible to preserve alignment with other rows. Default: false */
+    disabledDelete?: boolean;
+    /** Disables the download button only on this row, even with onDownload set on AttachmentList. Keeps the button visible to preserve alignment with other rows. Default: false */
+    disabledDownload?: boolean;
+    /** Disables the view-details button only on this row, even with onViewDetails set on AttachmentList. Keeps the button visible to preserve alignment with other rows. Default: false */
+    disabledViewDetails?: boolean;
+}
+export interface AttachmentListProps {
+    /** List of files — one row is rendered automatically per item */
+    documents: AttachDocument[];
+    /** Called with the file id when clicking delete. Shows the button on every row in `documents`. When it returns a Promise, the button shows a spinner automatically until it resolves */
+    onDelete?: (id: string) => void | Promise<void>;
+    /** Called with the file id when clicking download. Shows the button on every row in `documents`. When it returns a Promise, the button shows a spinner automatically until it resolves */
+    onDownload?: (id: string) => void | Promise<void>;
+    /** Called with the file id when clicking view details. Shows the button on every row in `documents` */
+    onViewDetails?: (id: string) => void;
+    /** Truncates every row's name to a single line, with ellipsis and tooltip when truncated. Pass false to keep the full name, wrapping across lines. Default: true */
+    truncateName?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const AttachmentList: React.FC<AttachmentListProps>;

package/dist/components/AttachmentList/AttachmentList.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { AttachmentList } from './AttachmentList';
+export type { AttachmentListProps, AttachDocument } from './AttachmentList';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Avatar.css';
+export interface AvatarProps {
+    /** Photo URL — when present, overrides the initials */
+    src?: string;
+    /** Initials shown in the placeholder when there's no src (e.g. 'KL') */
+    initials?: string;
+    /** Alt text for accessibility (image or placeholder) */
+    alt?: string;
+    /** Avatar size — 'sm' 40px · 'md' 48px · 'lg' 56px. Default: 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Click callback — when provided, makes the Avatar interactive (hover, pressed, focused) */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './Badge.css';
+export type BadgeVariant = 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'scheme-color' | 'lya' | 'success' | 'alert' | 'error' | 'leaf' | 'sand' | 'wood' | 'clay' | 'flower' | 'dusk' | 'sky' | 'sea' | 'lake';
+export type BadgeAppearance = 'outline' | 'tone-10' | 'tone-20' | 'tone-30' | 'tone-40' | 'tone-50';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export interface BadgeProps {
+    /** Label text */
+    label: string;
+    /** Color variant */
+    variant?: BadgeVariant;
+    /** Fill intensity — 'outline' = outline, no background · 'tone-10' to 'tone-50' = progressive tint, 'tone-50' = full color */
+    appearance?: BadgeAppearance;
+    /** Left icon — always decorative, never clickable */
+    iconLeft?: IconElement;
+    /** Right icon — always clickable, never decorative. Use together with onClickIconRight */
+    iconRight?: IconElement;
+    /** Callback when clicking iconRight — required whenever iconRight is passed. When it returns a Promise, the spinner activates automatically until it resolves */
+    onClickIconRight?: () => void | Promise<void>;
+    /** Shows a spinner in place of iconRight. Also activated automatically when onClickIconRight returns a Promise */
+    iconRightLoading?: boolean;
+    /** Disables iconRight — blocks the click and applies the disabled icon color */
+    iconRightDisabled?: boolean;
+    /** Size: sm (12px) | md (14px) | lg (16px) */
+    size?: BadgeSize;
+    /** Width: 'hug' = content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps, type BadgeVariant, type BadgeAppearance, type BadgeSize } from './Badge';
+export { default } from './Badge';

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './BottomSheet.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+/** Shape of one row of the `options` list — covers the common "pick one/several values" case */
+export interface BottomSheetOption {
+    /** Unique value — compared against `value`/returned by `onChange` */
+    value: string;
+    /** Text shown in the row */
+    label: string;
+    /** Icon shown before the label */
+    iconLeft?: IconElement;
+    /** Icon shown after the label — auto-pushed to the end. Hides the active check when present */
+    iconRight?: IconElement;
+    /** Disables this option */
+    disabled?: boolean;
+}
+export interface BottomSheetProps {
+    /** Controls visibility */
+    isOpen: boolean;
+    /** Called when overlay is clicked, Escape is pressed, or the close button is clicked */
+    onClose: () => void;
+    /** Optional label shown above the scrollable body */
+    title?: string;
+    /** Fixed slot between title and scrollable body — ideal for custom search/filter widgets that don't fit `searchable` (e.g. a list not driven by `options`) */
+    search?: React.ReactNode;
+    /** Renders a built-in search field above the list and filters `options` by label — same look and filter logic as Select's searchable */
+    searchable?: boolean;
+    /** Placeholder of the built-in search field. Only has effect with searchable */
+    searchPlaceholder?: string;
+    /** Called on every change of the built-in search field. Only has effect with searchable */
+    onSearch?: (query: string) => void;
+    /** Sheet body content (scrollable) — free-form, rendered above `options` when both are passed. Use for custom headers or rows that don't fit the value/onChange shape (links, one-off actions) */
+    children?: React.ReactNode;
+    /** Shortcut for the common case: renders the option rows automatically from a plain array — no manual list/row markup, no per-row active comparison */
+    options?: BottomSheetOption[];
+    /** Selects multiple options at once — renders a checkbox per row. `value`/`onChange` become string[], and changes are only committed when the Apply button (footer) is pressed */
+    multiple?: boolean;
+    /** Shows a pinned "Selecionar todos" checkbox above the list. Requires multiple */
+    showSelectAll?: boolean;
+    /** Selected value(s), controlled. Single select: string | null. Multiple: string[] */
+    value?: string | string[] | null;
+    /** Initial value(s) in uncontrolled mode — same shape as value; ignored when value is passed */
+    defaultValue?: string | string[] | null;
+    /** Called with the updated value. Single select fires immediately and closes the sheet; multiple only fires when Apply is pressed */
+    onChange?: (value: string | string[] | null) => void;
+    /** Shows a "Limpar" action that resets the value to empty and closes the sheet */
+    clearable?: boolean;
+    /** Sticky footer below the scrollable body. Overrides the auto-generated Limpar/Aplicar footer built from `clearable`/`multiple` */
+    footer?: React.ReactNode;
+    /** aria-label of the close button */
+    closeLabel?: string;
+    /** Label of the auto-generated Apply button in multiple mode (ignored when footer is passed) */
+    applyLabel?: string;
+    /** Extra className on the sheet panel */
+    className?: string;
+}
+export declare const BottomSheet: React.FC<BottomSheetProps>;
+export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { BottomSheet, type BottomSheetProps } from './BottomSheet';
+export { default } from './BottomSheet';

package/dist/components/BulkActionBar/BulkActionBar.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import './BulkActionBar.css';
+export interface BulkActionButton {
+    /** Button text */
+    label: string;
+    /** Button callback. When it returns a Promise, the spinner activates automatically */
+    onClick: () => void | Promise<void>;
+    /** Shows a spinner on the button. Also activated automatically when onClick returns a Promise */
+    loading?: boolean;
+    /** Disables the button */
+    disabled?: boolean;
+    /** Tooltip text shown when the button is disabled — always above the button */
+    disabledTooltip?: string;
+}
+interface BulkActionGroupWithLabel {
+    /** Label shown above all buttons in this group (e.g. "Action group") */
+    groupLabel: string;
+    /** Buttons in this group — as many as you want */
+    actions: BulkActionButton[];
+}
+interface BulkActionGroupNoLabel {
+    groupLabel?: never;
+    /** Buttons in this group — as many as you want */
+    actions: BulkActionButton[];
+}
+/** An item in the `groups` array. Within this array, either every group has `groupLabel`, or none does */
+export type BulkActionGroup = BulkActionGroupWithLabel | BulkActionGroupNoLabel;
+interface BulkActionBarBase {
+    /** Selection count text (e.g. "3 selected") */
+    countLabel: React.ReactNode;
+    /** Grouped action sets, each with an optional label above the buttons (see BulkActionGroup table) */
+    groups?: BulkActionGroupWithLabel[] | BulkActionGroupNoLabel[];
+    /** Primary button text, shown prominently. Without this text, the button doesn't appear */
+    primaryLabel?: string;
+    /** Primary button callback. When it returns a Promise, the spinner activates automatically */
+    onPrimary?: () => void | Promise<void>;
+    /** Shows a spinner on the primary button. Also activated automatically when onPrimary returns a Promise */
+    primaryLoading?: boolean;
+    /** Disables the primary button */
+    primaryDisabled?: boolean;
+    /** Tooltip text shown when the primary button is disabled — always above the button */
+    primaryDisabledTooltip?: string;
+    /** Secondary button text, shown before the primary one. Without this text, the button doesn't appear */
+    secondaryLabel?: string;
+    /** Secondary button callback. When it returns a Promise, the spinner activates automatically */
+    onSecondary?: () => void | Promise<void>;
+    /** Shows a spinner on the secondary button. Also activated automatically when onSecondary returns a Promise */
+    secondaryLoading?: boolean;
+    /** Disables the secondary button */
+    secondaryDisabled?: boolean;
+    /** Tooltip text shown when the secondary button is disabled — always above the button */
+    secondaryDisabledTooltip?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+interface BulkActionBarClearProps {
+    /** Called when clicking "Limpar", shown after countLabel. Mutually exclusive with onDismiss. The callback decides what "clear" means — including whether the bar should disappear afterward (it doesn't control that on its own) */
+    onClear: () => void;
+    onDismiss?: never;
+}
+interface BulkActionBarDismissProps {
+    /** Called when clicking the ✕ icon, shown before countLabel. Mutually exclusive with onClear. The callback decides what this means — including whether the bar should disappear afterward (it doesn't control that on its own) */
+    onDismiss: () => void;
+    onClear?: never;
+}
+/** onClear XOR onDismiss — always one of the two, never both, never neither */
+export type BulkActionBarProps = BulkActionBarBase & (BulkActionBarClearProps | BulkActionBarDismissProps);
+export declare const BulkActionBar: React.FC<BulkActionBarProps>;
+export default BulkActionBar;

package/dist/components/BulkActionBar/BulkActionBar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './BulkActionBar';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import { TooltipPosition } from '../Tooltip';
+import './Button.css';
+export type ButtonVariant = 'primary' | 'ghost' | 'link' | 'pill' | 'pillFilled';
+export type ButtonSize = 'md' | 'lg';
+export type ButtonState = 'enabled' | 'hover' | 'pressed' | 'focused' | 'disabled';
+export interface ButtonProps {
+    /** Button label */
+    label: string;
+    /** Callback fired when clicking the button */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Button's visual hierarchy */
+    variant?: ButtonVariant;
+    /** Left icon */
+    iconLeft?: IconElement;
+    /** Right icon */
+    iconRight?: IconElement;
+    /** Size: medium=48px | large=56px */
+    size?: ButtonSize;
+    /** Width: 'hug' = fits content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Shows a spinner and blocks clicks while an async action is in progress */
+    isLoading?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Tooltip text shown on hover when the button is disabled */
+    disabledTooltip?: string;
+    /** Position of the disabled tooltip — default 'top', flips to 'bottom' automatically if it doesn't fit */
+    disabledTooltipPosition?: TooltipPosition;
+    /** Native button element type. Default: 'button' */
+    type?: 'button' | 'submit' | 'reset';
+    /** Accessibility — aria-label when there's no visible text */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonSize, ButtonState } from './Button';

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    /** Card content — usually Card.Header, Card.Body, Card.Section, and Card.Footer, in the desired order */
+    children: React.ReactNode;
+    /** Cover image or media. By default sits at the top, no padding, with rounded corners on the corresponding side */
+    cover?: React.ReactNode;
+    /** Fixed cover width in px, horizontal mode only — default 296px when not set. Height always follows the card */
+    coverWidth?: number;
+    /** Fixed cover height in px, vertical mode only — when passed, fixes the height to this value instead of the default 16/9, with width always taking 100% of the card as usual */
+    coverHeight?: number;
+    /** Content positioned at the top-left corner of the cover (badges, tags) — works in both vertical and horizontal modes */
+    coverBadges?: React.ReactNode;
+    /** Places the cover on the left and the rest of the content on the right, instead of stacked */
+    horizontal?: boolean;
+    /** Internal padding size for the sub-parts (Header/Body/Footer/Section) — sm = 16px, md (default) = 24px. Doesn't affect any gap */
+    size?: 'sm' | 'md';
+    /** Shows a 1px neutral-20 border around the card. `false` by default. Use `true` when the card sits on a surface matching its own background — the border is what distinguishes the two */
+    bordered?: boolean;
+    /** Elevates the card with a shadow and pointer cursor on hover — use when the whole card is clickable */
+    hoverable?: boolean;
+    /** Callback when clicking the card. Together with hoverable, the card becomes role="button", focusable and keyboard-navigable (Enter/Space) */
+    onClick?: () => void;
+    /** Number of lines in the skeleton's paragraph block (the "body area"), when loading is true */
+    loadingRows?: number;
+    /** Number of lines in the skeleton's header block, when loading is true — counts the title too: 0 = no lines, 1 = title only, 2 (default) = title + subtitle */
+    loadingTitleRows?: number;
+    /** Shows a loading skeleton in place of the content — title+line (header) and paragraph lines (body); the cover, when present, becomes an image block. Doesn't represent Card.Footer */
+    loading?: boolean;
+    /** Additional CSS classes applied to the root element */
+    className?: string;
+}
+export interface CardHeaderProps {
+    /** Header's main title */
+    title?: React.ReactNode;
+    /** Subtitle or complementary description — sits on its own line below title/left, in the same column. Doesn't invade the right's space — width stops where right begins */
+    subtitle?: React.ReactNode;
+    /** Extra content to the left of the title (e.g. status badge) — aligned only to title, unrelated to subtitle. With title, sits next to it with an automatic 16px gap. Without title, stands alone, no gap */
+    left?: React.ReactNode;
+    /** Right-side content — always vertically centered relative to the title+subtitle column, regardless of each one's height (filter pills, icon buttons, more-options menu) */
+    right?: React.ReactNode;
+    /** Extra free-form content, rendered after the slots above */
+    children?: React.ReactNode;
+    /** Shows the bottom border separating the header from the rest of the card. Use `false` when the header is the only content, or when the card has no divider at all between sections (e.g. list/funnel card) */
+    bordered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardBodyProps {
+    /** Card's main content */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardFooterProps {
+    /** Footer content — usually action buttons */
+    children: React.ReactNode;
+    /** Footer alignment. By default stacks items in a column, like Card.Body — `right` returns to a row layout, right-aligned */
+    align?: 'right';
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardSectionProps {
+    /** Section title, shown above the content */
+    title?: string;
+    /** Section content */
+    children: React.ReactNode;
+    /** Shows the top border separating the section from the previous content. Use `false` for a block with the same padding, no separator at all */
+    bordered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardInfoRowProps {
+    /** The row's Card.InfoPair items — as many as you want, shown in a grid */
+    children: React.ReactNode;
+    /** Number of grid columns */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardInfoPairProps {
+    /** Label shown above the value */
+    label: string;
+    /** Value shown below the label */
+    value: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface CardCollapsibleProps {
+    /** Content hidden by default, revealed by clicking the trigger */
+    children: React.ReactNode;
+    /** Trigger text when the content is closed */
+    showLabel?: string;
+    /** Trigger text when the content is open */
+    hideLabel?: string;
+    /** Trigger alignment */
+    align?: 'right' | 'center';
+    /** Initial state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled state */
+    open?: boolean;
+    /** Callback fired when opening/closing (controlled mode) */
+    onOpenChange?: (open: boolean) => void;
+    /** Shows the arrow icon next to the trigger text */
+    showIcon?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+}
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardBody: React.FC<CardBodyProps>;
+declare const CardFooter: React.FC<CardFooterProps>;
+declare const CardSection: React.FC<CardSectionProps>;
+declare const CardInfoRow: React.FC<CardInfoRowProps>;
+declare const CardInfoPair: React.FC<CardInfoPairProps>;
+declare const CardCollapsible: React.FC<CardCollapsibleProps>;
+export interface CardComponent extends React.FC<CardProps> {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+    Section: typeof CardSection;
+    InfoRow: typeof CardInfoRow;
+    InfoPair: typeof CardInfoPair;
+    Collapsible: typeof CardCollapsible;
+}
+declare const Card: CardComponent;
+export { Card };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './Card';