@aurea-uds/react 0.25.0 → 0.27.0

package/dist/data-display.d.ts

@@ -1,2 +1,2 @@
 export * from "./data-display-client.js";
-export { Kbd, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
+export { Kbd, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";

package/dist/feedback.d.ts

@@ -1,2 +1,2 @@
 export * from "./feedback-client.js";
-export { Badge, formatBadgeCount, Progress, Skeleton, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type ProgressProps, type ProgressTone } from "./markup.js";
+export { Badge, formatBadgeCount, Progress, Skeleton, type BadgeVariant, type BadgeCategory, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type ProgressProps, type ProgressTone } from "./markup.js";

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStat
 export { useAureaStrings, useSpriteUrl, useTheme, useDensity } from "./internal.js";
 export { type Responsive, type Breakpoint, type ContainerBreakpoint, type Orientation, ESCALA, ESCALA_CONTAINER } from "./pure.js";
 export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
-export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Header, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type ProgressProps, type ProgressTone, type AvatarSize, type HeaderVariant, type HeaderProps, type TopbarVariant, type SectionVariant, type SectionFooterGroup, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Header, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeCategory, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type ProgressProps, type ProgressTone, type AvatarSize, type HeaderVariant, type HeaderProps, type TopbarVariant, type SectionVariant, type SectionFooterGroup, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/markup.d.ts

@@ -2,7 +2,8 @@ import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement
 import { type Responsive } from "./pure.js";
 import type { ComponentSize } from "./actions.js";
 import type { SidebarItem } from "./navigation-client.js";
-export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
+export type BadgeCategory = "red" | "orange" | "green" | "teal" | "cyan" | "blue" | "violet" | "pink";
+export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review" | BadgeCategory;
 export type AvatarSize = "sm" | "md" | "lg";
 export type HeaderVariant = "floating" | "flush" | "pill";
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). O tipo continua valendo; use `HeaderVariant`. */
@@ -141,11 +142,24 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, RefAttributes
  * quando ela for uma região que o leitor de tela deva listar.
  */
 export declare function Section({ surface, spacing, theme, variant, brand, links, legal, maxWidth, navLabel, children, className, ...props }: SectionProps): React.JSX.Element;
-export declare function KPI({ label, value, trend, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export type KPIDirection = "up" | "down" | "flat";
+export type KPITone = "success" | "danger" | "neutral";
+export type KPIVariant = "card" | "plain";
+export interface KPIProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     label: ReactNode;
     value: ReactNode;
+    /** A mudança, como texto do domínio ("+8% no mês"). */
     trend?: ReactNode;
-}): React.JSX.Element;
+    /** Para onde foi. Desenha a seta, pinta a tendência e diz a palavra ao leitor de tela. */
+    direction?: KPIDirection;
+    /** A cor da tendência. Padrão: alta = `success`, baixa = `danger`, estável = `neutral`. */
+    tone?: KPITone;
+    /** A palavra que o leitor de tela ouve antes da tendência. Padrão em inglês: "Up", "Down", "No change". */
+    directionLabel?: string;
+    /** `plain` tira a caixa: o número dentro de um cartão que já existe. */
+    variant?: KPIVariant;
+}
+export declare function KPI({ label, value, trend, direction, tone, directionLabel, variant, className, ...props }: KPIProps): React.JSX.Element;
 export declare function DataList({ items }: {
     items: Array<{
         term: ReactNode;

package/dist/markup.js

@@ -88,8 +88,14 @@ export function Section({ surface = "background", spacing = "md", theme, variant
                                                 ? fundirRender(it.render, { className: "section-footer-link", children: it.label }, "a")
                                                 : _jsx("a", { className: "section-footer-link", href: it.href, children: it.label }) }, it.id)) })] }, n)) }), children] }), legal != null && _jsx("div", { className: "section-footer-legal", children: legal })] }) });
 }
-// ── Data Display ─────────────────────────────────────────────────────────────────────────────
-export function KPI({ label, value, trend, className, ...props }) { return _jsxs(Card, { className: cx("kpi", className), ...props, children: [_jsx("span", { className: "muted", children: label }), _jsx("strong", { children: value }), trend && _jsx("small", { children: trend })] }); }
+const TOM_DA_DIRECAO = { up: "success", down: "danger", flat: "neutral" };
+const PALAVRA_DA_DIRECAO = { up: "Up", down: "Down", flat: "No change" };
+export function KPI({ label, value, trend, direction, tone, directionLabel, variant = "card", className, ...props }) {
+    const tom = direction ? (tone ?? TOM_DA_DIRECAO[direction]) : undefined;
+    const miolo = _jsxs(_Fragment, { children: [_jsx("span", { className: "muted", children: label }), _jsx("strong", { children: value }), (trend || trend === 0 || direction) && _jsxs("small", { className: direction ? cx("kpi-trend", `kpi-trend-${direction}`, `kpi-tone-${tom}`) : undefined, children: [direction && _jsx("span", { className: "kpi-trend-icon", "aria-hidden": "true" }), direction && _jsx("span", { className: "sr-only", children: directionLabel ?? PALAVRA_DA_DIRECAO[direction] }), trend] })] });
+    return variant === "plain" ? _jsx("div", { className: cx("kpi", className), ...props, children: miolo })
+        : _jsx(Card, { className: cx("kpi", className), ...props, children: miolo });
+}
 export function DataList({ items }) { return _jsx("dl", { className: "data-list", children: items.map((i, n) => _jsxs(React.Fragment, { children: [_jsx("dt", { children: i.term }), _jsx("dd", { children: i.value })] }, n)) }); }
 export function Timeline({ items }) { return _jsx("ol", { className: "timeline", children: items.map((i, n) => _jsxs("li", { children: [_jsx("span", { className: "timeline-dot" }), _jsxs("div", { children: [_jsx("strong", { children: i.title }), i.description && _jsx("p", { children: i.description }), i.time && _jsx("small", { className: "muted", children: i.time })] })] }, n)) }); }
 // Prose (item L5): UMA LINHA, e é para ser mesmo — quem transforma Markdown em elementos é o

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",