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

package/dist/ui/components/Stat/StatGroup.d.ts

@@ -23,6 +23,53 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
      * @default 4
      */
     cols?: StatGroupCols;
+    /**
+     * Optional slot for a badge that floats centered over the top border of
+     * the container. Use when all metrics in the group share a common
+     * provenance mark (e.g. a trust badge, data-source seal, tier label).
+     *
+     * The slot is intentionally opaque — the consumer supplies any ReactNode
+     * and owns the badge's styling and a11y. `StatGroup` provides only the
+     * positioning, not the badge shape. This is the same convention as the
+     * `kicker` slot in `HeroSection` or the `badge` slot in `PageHeader`.
+     *
+     * ### Layout
+     *
+     * When `floatingBadge` is supplied the outer container gains
+     * `pt-4` (16 px) top padding, which creates a landing zone for the
+     * badge's bottom half while keeping the first stat row clear. The badge
+     * itself is absolutely centred at `top-4 left-1/2`, then shifted up by
+     * `−50%` of its own height so its centre sits on the inner container's
+     * top border. This calibration is accurate for badges up to ~32 px tall
+     * (a standard `Badge` or small `Chip`). If a taller badge is needed,
+     * pass a `className` that increases the top padding to match.
+     *
+     * ### Reading order
+     *
+     * The badge node appears in the DOM **before** the stat cells, so screen
+     * readers encounter it first — "Fonte oficial, followed by the metrics" —
+     * which is the correct contextual order.
+     *
+     * @example
+     * ```tsx
+     * import { CheckCircle2 } from "lucide-react";
+     * import { Badge } from "@fabio.caffarello/react-design-system";
+     *
+     * <StatGroup
+     *   layout="strip"
+     *   floatingBadge={
+     *     <Badge variant="success" size="sm">
+     *       <CheckCircle2 size={10} aria-hidden="true" />
+     *       Fonte oficial
+     *     </Badge>
+     *   }
+     * >
+     *   <Stat icon={<Users />} value="726" label="Parlam." align="center" />
+     *   <Stat icon={<FileText />} value="28,1 mil" label="Proposições" align="center" />
+     * </StatGroup>
+     * ```
+     */
+    floatingBadge?: ReactNode;
     children: ReactNode;
 }
 /**
@@ -31,17 +78,18 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
  *
  * ### Divider technique
  *
- * The container has `bg-line-default` and `gap-px` (1 px); each child
- * `Stat` carries its own `bg-surface-base`. The 1 px of gap exposes the
- * container's background as the divider line, while each cell masks its
- * own area with `bg-surface-base`. Works identically for the strip
- * layout (vertical dividers) and the grid layout (vertical AND
- * horizontal dividers, automatically, as the grid reflows). No separate
- * `Divider` component, no per-cell border logic.
+ * The inner container has `bg-line-default` and `gap-px` (1 px); each
+ * child `Stat` carries its own `bg-surface-base`. The 1 px of gap exposes
+ * the container's background as the divider line, while each cell masks
+ * its own area with `bg-surface-base`. Works identically for the strip
+ * layout (vertical dividers) and the grid layout (vertical AND horizontal
+ * dividers, automatically, as the grid reflows). No separate `Divider`
+ * component, no per-cell border logic.
  *
- * The outer ring is `border border-line-default` matching the gap color,
- * with `rounded-lg` and `overflow-hidden` clipping the inner cells to
- * the radius.
+ * The inner ring is `border border-line-default` matching the gap color,
+ * with `rounded-lg` and `overflow-hidden` clipping the inner cells to the
+ * radius. The outer wrapper is `relative` so the optional `floatingBadge`
+ * can be absolutely positioned over the inner container's top border.
  *
  * ### Server-safe
  *
@@ -65,5 +113,5 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
  * </StatGroup>
  * ```
  */
-export declare function StatGroup({ layout, cols, className, children, ...props }: StatGroupProps): import("react").JSX.Element;
+export declare function StatGroup({ layout, cols, floatingBadge, className, children, ...props }: StatGroupProps): import("react").JSX.Element;
 export default StatGroup;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "4.4.0",
+  "version": "4.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,7 +32,9 @@
       "import": "./dist/granular/index.js"
     },
     "./styles": "./dist/react-design-system.css",
-    "./styles.css": "./dist/react-design-system.css"
+    "./styles.css": "./dist/react-design-system.css",
+    "./theme": "./dist/tokens.css",
+    "./theme.css": "./dist/tokens.css"
   },
   "files": [
     "dist",
@@ -43,8 +45,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist && vite build && vite build --config vite.config.server.ts && vite build --config vite.config.hooks.ts && vite build --config vite.config.granular.ts && npm run build:validate",
-    "build:validate": "tsx scripts/validate-build-exports.ts && node scripts/validate-use-client-in-dist.mjs && node scripts/validate-server-entry.mjs",
+    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist && vite build && vite build --config vite.config.server.ts && vite build --config vite.config.hooks.ts && vite build --config vite.config.granular.ts && node scripts/build-tokens-css.mjs && npm run build:validate",
+    "build:validate": "tsx scripts/validate-build-exports.ts && node scripts/validate-use-client-in-dist.mjs && node scripts/validate-server-entry.mjs && node scripts/validate-theme-export.mjs",
     "lint": "eslint .",
     "typecheck": "tsc --build --force tsconfig.json",
     "storybook": "storybook dev -p 6006",
@@ -101,14 +103,14 @@
     "@commitlint/config-conventional": "^21.0.2",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
-    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-coverage": "^3.0.1",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-measure": "^9.0.8",
     "@storybook/addon-outline": "^9.0.8",
-    "@storybook/addon-vitest": "^10.4.2",
-    "@storybook/react-vite": "^10.4.2",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@storybook/test": "^8.6.15",
     "@tailwindcss/vite": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
@@ -125,10 +127,10 @@
     "baseline-browser-mapping": "^2.10.37",
     "culori": "^4.0.2",
     "dependency-cruiser": "^17.3.6",
-    "eslint": "^10.4.1",
+    "eslint": "^10.5.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "eslint-plugin-storybook": "^10.4.2",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "eslint-plugin-storybook": "^10.4.6",
     "globals": "^16.4.0",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
@@ -137,15 +139,15 @@
     "madge": "^8.0.0",
     "plop": "^4.0.5",
     "postcss": "^8.5.6",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "react-hook-form": "^7.79.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.4.2",
+    "storybook": "^10.4.6",
     "storybook-addon-performance": "^0.17.3",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.22.4",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.60.1",
+    "typescript-eslint": "^8.61.1",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.8"