@fabio.caffarello/react-design-system 4.2.0 → 4.4.0

package/dist/ui/index.d.ts

@@ -3,6 +3,7 @@ export * from "./tokens/spacing";
 export * from "./tokens/typography";
 export * from "./tokens/colors/index";
 export * from "./tokens/breakpoints";
+export * from "./tokens/chart";
 export { cn } from "./utils";
 export { getSpacingClass, getSpacing } from "./tokens/spacing";
 export { getTypographyClasses, getTypography } from "./tokens/typography";
@@ -11,6 +12,7 @@ export { getBreakpoint, getMediaQuery } from "./tokens/breakpoints";
 export { getAnimationClass, getAnimation, getTransitionClass, } from "./tokens/animations";
 export { getZIndexClass, getZIndex } from "./tokens/z-index";
 export { getOpacityClass, getOpacity } from "./tokens/opacity";
+export { getChartColor, getChartColorClass } from "./tokens/chart";
 export { ThemeProvider, ConfigProvider, ToastProvider, DialogProvider, useTheme, useConfig, useToastContext, useToastContextOptional, useDialogContext, useDialogContextOptional, ToastContext, DialogContext, type ThemeProviderProps, type ThemeContextValue, type ConfigProviderProps, type DesignSystemConfig, type ConfigContextValue, type ToastProviderProps, type DialogProviderProps, type Toast, type ToastContextValue, type ToastVariant, type DialogContextValue, } from "./providers/providers-bundle";
 export { AppProvider, useApp, type AppProviderProps, type AppProviderConfig, } from "./providers/AppProvider";
 export * from "./primitives";

package/dist/ui/primitives/DataBadge/DataBadge.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Semantic tone for a {@link DataBadge}. The status/brand members mirror the
+ * `Badge` vocabulary (role, not tone) so the soft-wash treatment is shared
+ * and already AA-verified; `dataviz` adds a CATEGORICAL member (a
+ * reddish-purple wash for "category / analytical" data, the badge-facing
+ * counterpart to the chart palette) that is intentionally NOT a status.
+ * Map a consumer's tone names onto these roles: `default → neutral`,
+ * `destructive → error`, `brand → primary`, `accent → dataviz` (the
+ * data-viz purple — RDS `accent` is cyan, so the category tone is `dataviz`).
+ */
+export type DataBadgeTone = "neutral" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | "dataviz";
+export type DataBadgeSize = "sm" | "md";
+export interface DataBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Primary datum — the value the badge is about (e.g. "L2", "Aprovada"). */
+    label: ReactNode;
+    /**
+     * Provenance of the datum, rendered as a lesser-emphasis sub-label after
+     * the label (e.g. "Câmara", "Portal Transparência"). Omitted when absent.
+     */
+    source?: ReactNode;
+    /** Semantic tone (role-based color). Defaults to `neutral`. */
+    tone?: DataBadgeTone;
+    /** Optional decorative leading icon (rendered `aria-hidden`). */
+    icon?: ReactNode;
+    /** Size scale. Defaults to `md`. */
+    size?: DataBadgeSize;
+}
+/**
+ * DataBadge
+ *
+ * An inline metadata chip: a primary `label`, an optional lesser-emphasis
+ * `source` sub-label (the datum's provenance), a semantic `tone`, and an
+ * optional decorative `icon`. Built for transparency/data UIs where a value
+ * must travel with where it came from ("L2 · Portal Transparência").
+ *
+ * Why a separate primitive and not `Badge`: `Badge` is a single-string
+ * status label; `DataBadge` carries a value + its source as a structured
+ * pair. The `source` is the differentiator — it has no slot in `Badge` /
+ * `Chip` / `Info`.
+ *
+ * Accessibility: the visible text (label, then source) IS the accessible
+ * name — the separator and any `icon` are `aria-hidden`. Hierarchy between
+ * label and source is conveyed by size + weight, never by dropping the
+ * source below its tone's AA-safe text color. The root is a plain inline
+ * `<span>` with no live-region role (metadata is static, not announced);
+ * pass `role` / `aria-label` via props if a grouping role is wanted.
+ *
+ * Server-safe: no hooks, no client APIs, no DOM handlers of its own — ships
+ * from the `./server` entry.
+ *
+ * @example
+ * ```tsx
+ * <DataBadge label="L2" source="Portal Transparência" tone="warning" />
+ * <DataBadge label="Aprovada" tone="success" />
+ * ```
+ */
+declare const DataBadge: import("react").NamedExoticComponent<DataBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default DataBadge;

package/dist/ui/primitives/DataBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DataBadge";
+export type { DataBadgeProps } from "./DataBadge";

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

@@ -40,3 +40,5 @@ export type { ChipProps, ChipVariant, ChipSize } from "./Chip";
 export * from "./Avatar";
 export { Dot } from "./Dot";
 export type { DotProps, DotVariant, DotSize } from "./Dot";
+export { default as DataBadge } from "./DataBadge";
+export type { DataBadgeProps } from "./DataBadge";

package/dist/ui/server.d.ts

@@ -4,6 +4,8 @@ export { default as Button } from "./primitives/Button/Button";
 export type { ButtonProps, ButtonSize, ButtonVariant, } from "./primitives/Button/Button";
 export { default as Chip } from "./primitives/Chip/Chip";
 export type { ChipProps, ChipSize, ChipVariant } from "./primitives/Chip/Chip";
+export { default as DataBadge } from "./primitives/DataBadge/DataBadge";
+export type { DataBadgeProps, DataBadgeSize, DataBadgeTone, } from "./primitives/DataBadge/DataBadge";
 export { default as ErrorMessage } from "./primitives/ErrorMessage/ErrorMessage";
 export type { ErrorMessageProps } from "./primitives/ErrorMessage/ErrorMessage";
 export { default as Info } from "./primitives/Info/Info";

package/dist/ui/tokens/TokenVisualizations.d.ts

@@ -7,6 +7,23 @@
  * Color Palette Visualization
  */
 export declare function ColorPalette(): import("react").JSX.Element;
+/**
+ * Solid status fills + on-color text.
+ *
+ * Each swatch is a real `bg-{status}-solid` carrying `text-fg-on-{status}`
+ * (white). These are the TEXT-CARRYING status solids — distinct from the
+ * decorative `bg-{status}` used by Dot/Progress. White clears WCAG AA for
+ * normal text against every fill (ratios annotated).
+ */
+export declare function StatusSolidColors(): import("react").JSX.Element;
+/**
+ * Data-visualization categorical palette (Okabe-Ito).
+ *
+ * Eight colorblind-safe categorical colors for chart series. Distinct from
+ * the semantic feedback colors — these encode category, not state. Consume
+ * via `getChartColor(i)` (0-based, wraps modulo 8, theme-aware).
+ */
+export declare function ChartPalette(): import("react").JSX.Element;
 /**
  * Spacing Reference Visualization
  */

package/dist/ui/tokens/chart.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Data-Visualization Categorical Palette (Okabe-Ito)
+ *
+ * Eight colorblind-safe categorical colors for chart series (parties, vote
+ * types, ranges, …). This is a SEPARATE axis from the semantic feedback
+ * colors: `success`/`warning`/`error`/`info` encode *state*, never
+ * *category* — using `error` for "series 3" is semantically wrong and
+ * destroys meaning. A categorical palette answers "which series is this",
+ * and it must stay distinguishable under color-vision deficiency.
+ *
+ * The values are the canonical Okabe & Ito (2008) palette — the reference
+ * categorical palette engineered to be distinguishable in deuteranopia,
+ * protanopia, and tritanopia — with `black` swapped for a neutral gray so
+ * the 8th series survives on a dark canvas. Light values are the canonical
+ * tones; the dark theme lifts each toward higher luminance (hue preserved)
+ * so every series clears the WCAG 1.4.11 graphical-object 3:1 contrast over
+ * `surface-canvas` (slate-950). The CSS source of truth is
+ * `src/styles/semantic/colors.css` (light) and `src/styles/themes/dark.css`
+ * (dark, both blocks).
+ *
+ * On-WHITE caveat: orange/sky-blue/yellow/gray are below 3:1 against a white
+ * canvas — an intrinsic property of Okabe-Ito's light hues. Fine for FILLS
+ * (bars, areas, large marks); for thin strokes (lines, 1px borders) add a
+ * stroke/outline or use a darker series first. Colorblind-safety (the point
+ * of the palette) is preserved regardless.
+ */
+/** Number of distinct colors in the categorical palette. */
+export declare const CHART_PALETTE_SIZE: 8;
+/** 1-based position within the categorical palette. */
+export type ChartColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface ChartColorToken {
+    /** 1-based palette position (matches the `--color-chart-N` token). */
+    index: ChartColorIndex;
+    /** Okabe-Ito hue name — use for legends / documentation. */
+    name: string;
+    /** Theme-aware CSS reference, e.g. `"var(--color-chart-1)"`. */
+    var: string;
+    /** Tailwind background class, e.g. `"bg-chart-1"`. */
+    bg: string;
+    /** Tailwind text class, e.g. `"text-chart-1"`. */
+    text: string;
+}
+/**
+ * Palette metadata in canonical order. The actual color values live in CSS
+ * (theme-aware); these tokens carry the references and human-readable names.
+ */
+export declare const CHART_PALETTE_TOKENS: readonly ChartColorToken[];
+/**
+ * Resolve a chart series index to a theme-aware color reference.
+ *
+ * `seriesIndex` is **0-based** (built for `data.map((d, i) => …)`) and wraps
+ * modulo {@link CHART_PALETTE_SIZE}, so a 10-series chart cycles back to the
+ * first color rather than running out. Negative indices wrap correctly too.
+ * The returned `var(--color-chart-N)` resolves per active theme (light/dark),
+ * so charts re-tint automatically — pass it straight to a recharts
+ * `fill`/`stroke` or an inline `style`.
+ *
+ * @example
+ * ```tsx
+ * import { getChartColor } from "@fabio.caffarello/react-design-system";
+ *
+ * {series.map((s, i) => (
+ *   <Bar key={s.id} dataKey={s.id} fill={getChartColor(i)} />
+ * ))}
+ * ```
+ *
+ * @param seriesIndex - 0-based series position.
+ * @returns A `var(--color-chart-N)` reference (theme-aware).
+ */
+export declare function getChartColor(seriesIndex: number): string;
+/**
+ * Tailwind class variant of {@link getChartColor} for DOM elements (legend
+ * dots, swatches) where a class is more convenient than an inline style.
+ *
+ * @param seriesIndex - 0-based series position (wraps modulo the palette).
+ * @param property - `"bg"` (default) or `"text"`.
+ * @returns A `bg-chart-N` / `text-chart-N` class string.
+ */
+export declare function getChartColorClass(seriesIndex: number, property?: "bg" | "text"): string;

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

@@ -30,3 +30,6 @@ export { SIDEBAR_TOKENS, getNestedIndentClass } from "./sidebar";
 export * from "./switch";
 export { SWITCH_TOKENS, getSwitchClasses } from "./switch";
 export type { SwitchSizeToken } from "./switch";
+export * from "./chart";
+export { CHART_PALETTE_SIZE, CHART_PALETTE_TOKENS, getChartColor, getChartColorClass, } from "./chart";
+export type { ChartColorIndex, ChartColorToken } from "./chart";

package/package.json

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