@fabio.caffarello/react-design-system 4.1.0 → 4.3.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,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Semantic tone for a {@link DataBadge}. Mirrors the `Badge` vocabulary
+ * (role, not tone) so the soft-wash color treatment is shared and already
+ * AA-verified. Map a consumer's tone names onto these roles:
+ * `default → neutral`, `destructive → error`, `brand → primary`,
+ * `accent → info` (or `secondary`).
+ */
+export type DataBadgeTone = "neutral" | "success" | "warning" | "error" | "info" | "primary" | "secondary";
+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/Input/Input.d.ts

@@ -1,24 +1,22 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
-export type InputSize = "sm" | "md" | "lg";
-export type InputVariant = "default" | "outlined" | "filled";
-export type InputState = "default" | "error" | "success";
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-    label?: ReactNode;
-    error?: boolean;
-    success?: boolean;
-    helperText?: string;
-    size?: InputSize;
-    variant?: InputVariant;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
+import type { InputBaseProps } from "./InputBase";
+export type { InputSize, InputVariant, InputState } from "./InputBase";
+export interface InputProps extends Omit<InputBaseProps, "rightSlot"> {
     showClearButton?: boolean;
     onClear?: () => void;
 }
 /**
  * Input Component
  *
- * A styled text input component with label, error/success states, icons, and clear button.
- * Uses Composite Pattern when combined with Label and ErrorMessage.
+ * The interactive text input: everything `InputBase` renders, plus the
+ * client-only affordances that require React state — the password
+ * visibility toggle (`type="password"`), the clear button
+ * (`showClearButton`), and the `useId` auto-id fallback. It **composes**
+ * `InputBase` (issue #224): the presentational shell lives once in
+ * `InputBase`, and `Input` layers the stateful affixes on top, passing
+ * the resolved `id`, the toggled `type`, and its buttons via `rightSlot`.
+ *
+ * Need a server-renderable / native-form input with no client state?
+ * Import `InputBase` from `@fabio.caffarello/react-design-system/server`.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Input/InputBase.d.ts

@@ -0,0 +1,52 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "default" | "outlined" | "filled";
+export type InputState = "default" | "error" | "success";
+export interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: ReactNode;
+    error?: boolean;
+    success?: boolean;
+    helperText?: string;
+    size?: InputSize;
+    variant?: InputVariant;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /**
+     * Raw trailing-affix slot rendered inside the input's right edge with
+     * full interactivity (no `pointer-events-none`). The interactive
+     * `Input` injects its password-toggle / clear buttons here; consumers
+     * can use it for a static suffix (a unit, a badge). When omitted,
+     * `rightIcon` renders instead with the muted decorative treatment.
+     */
+    rightSlot?: ReactNode;
+}
+/**
+ * InputBase
+ *
+ * The **presentational core** of the text input — label, the `<input>`
+ * itself, decorative left/right icons, the trailing-affix slot, and the
+ * helper/error line. It holds **no React client state** (no `useState`,
+ * `useId`, `useCallback`), so it is server-safe and ships from the
+ * `./server` entry (issue #224).
+ *
+ * The interactive `Input` (default export of this folder) composes
+ * `InputBase`, owning the password-toggle state, the clear button, and
+ * the `useId` auto-id fallback — it passes the resolved `id`, the
+ * toggled `type`, and its affix buttons (`rightSlot`) down. Use
+ * `InputBase` directly for server-rendered / native-form inputs where
+ * none of that interactivity is needed (`<form method="GET">` filters,
+ * RSC pages).
+ *
+ * Accessible name: pass `id` when you pass `label` so the `<label
+ * htmlFor>` binds — `InputBase` does NOT auto-generate an id (that needs
+ * `useId`, which would make it client). A dev-only warning fires when a
+ * `label` is given without an `id`.
+ *
+ * @example
+ * ```tsx
+ * // Server component / native form — zero client state.
+ * <InputBase id="q" name="q" placeholder="Buscar…" />
+ * ```
+ */
+declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export default InputBase;

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

@@ -1,2 +1,4 @@
 export { default } from "./Input";
 export type { InputProps, InputSize, InputVariant, InputState } from "./Input";
+export { default as InputBase } from "./InputBase";
+export type { InputBaseProps } from "./InputBase";

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,10 +4,14 @@ 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";
 export type { InfoProps } from "./primitives/Info/Info";
+export { default as InputBase } from "./primitives/Input/InputBase";
+export type { InputBaseProps, InputSize, InputVariant, InputState, } from "./primitives/Input/InputBase";
 export { default as Label } from "./primitives/Label/Label";
 export { default as Progress } from "./primitives/Progress/Progress";
 export type { ProgressProps, ProgressSize, ProgressVariant, } from "./primitives/Progress/Progress";

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.1.0",
+  "version": "4.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",