@fabio.caffarello/react-design-system 4.5.0 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/granular/ui/components/Stat/StatGroup.js +51 -36
- package/dist/granular/ui/components/Stat/StatGroup.js.map +1 -1
- package/dist/index.cjs +31 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +577 -563
- package/dist/index.js.map +1 -1
- package/dist/react-design-system.css +1 -1
- package/dist/server/index.cjs +13 -13
- package/dist/server/index.cjs.map +1 -1
- package/dist/server/index.js +331 -317
- package/dist/server/index.js.map +1 -1
- package/dist/ui/components/Stat/StatGroup.d.ts +59 -11
- package/package.json +1 -1
|
@@ -1,61 +1,76 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
for (var
|
|
8
|
-
|
|
9
|
-
if (
|
|
10
|
-
for (var
|
|
11
|
-
|
|
2
|
+
var b = Object.defineProperty, v = Object.defineProperties;
|
|
3
|
+
var h = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var l = Object.getOwnPropertySymbols;
|
|
5
|
+
var o = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
|
|
6
|
+
var t = (r, e, s) => e in r ? b(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s, c = (r, e) => {
|
|
7
|
+
for (var s in e || (e = {}))
|
|
8
|
+
o.call(e, s) && t(r, s, e[s]);
|
|
9
|
+
if (l)
|
|
10
|
+
for (var s of l(e))
|
|
11
|
+
a.call(e, s) && t(r, s, e[s]);
|
|
12
12
|
return r;
|
|
13
|
-
}, m = (r,
|
|
14
|
-
var n = (r,
|
|
15
|
-
var
|
|
16
|
-
for (var
|
|
17
|
-
|
|
18
|
-
if (r != null &&
|
|
19
|
-
for (var
|
|
20
|
-
|
|
21
|
-
return
|
|
13
|
+
}, m = (r, e) => v(r, h(e));
|
|
14
|
+
var n = (r, e) => {
|
|
15
|
+
var s = {};
|
|
16
|
+
for (var i in r)
|
|
17
|
+
o.call(r, i) && e.indexOf(i) < 0 && (s[i] = r[i]);
|
|
18
|
+
if (r != null && l)
|
|
19
|
+
for (var i of l(r))
|
|
20
|
+
e.indexOf(i) < 0 && a.call(r, i) && (s[i] = r[i]);
|
|
21
|
+
return s;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as
|
|
24
|
-
import { getRadiusClass as
|
|
25
|
-
import {
|
|
23
|
+
import { jsxs as C, jsx as p } from "react/jsx-runtime";
|
|
24
|
+
import { getRadiusClass as N } from "../../tokens/radius.js";
|
|
25
|
+
import { getSpacingClass as j } from "../../tokens/spacing.js";
|
|
26
|
+
import { cn as g } from "../../utils/cn.js";
|
|
26
27
|
const G = {
|
|
27
28
|
2: "md:grid-cols-2",
|
|
28
29
|
3: "md:grid-cols-3",
|
|
29
30
|
4: "md:grid-cols-4"
|
|
30
31
|
};
|
|
31
|
-
function
|
|
32
|
-
var
|
|
32
|
+
function $(S) {
|
|
33
|
+
var d = S, {
|
|
33
34
|
layout: r = "grid",
|
|
34
|
-
cols:
|
|
35
|
+
cols: e = 4,
|
|
36
|
+
floatingBadge: s,
|
|
35
37
|
className: i,
|
|
36
|
-
children:
|
|
37
|
-
} =
|
|
38
|
+
children: u
|
|
39
|
+
} = d, f = n(d, [
|
|
38
40
|
"layout",
|
|
39
41
|
"cols",
|
|
42
|
+
"floatingBadge",
|
|
40
43
|
"className",
|
|
41
44
|
"children"
|
|
42
45
|
]);
|
|
43
|
-
const
|
|
44
|
-
return /* @__PURE__ */
|
|
46
|
+
const x = r === "grid";
|
|
47
|
+
return /* @__PURE__ */ C(
|
|
45
48
|
"div",
|
|
46
49
|
m(c({
|
|
47
|
-
className:
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
f ? `grid grid-cols-2 ${G[d]}` : "flex",
|
|
50
|
+
className: g(
|
|
51
|
+
"relative",
|
|
52
|
+
s && j("base", "pt"),
|
|
51
53
|
i
|
|
52
54
|
)
|
|
53
|
-
},
|
|
54
|
-
children:
|
|
55
|
+
}, f), {
|
|
56
|
+
children: [
|
|
57
|
+
s ? /* @__PURE__ */ p("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: s }) : null,
|
|
58
|
+
/* @__PURE__ */ p(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
className: g(
|
|
62
|
+
"bg-line-default border border-line-default overflow-hidden gap-px",
|
|
63
|
+
N("lg"),
|
|
64
|
+
x ? `grid grid-cols-2 ${G[e]}` : "flex"
|
|
65
|
+
),
|
|
66
|
+
children: u
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
]
|
|
55
70
|
})
|
|
56
71
|
);
|
|
57
72
|
}
|
|
58
73
|
export {
|
|
59
|
-
|
|
74
|
+
$ as StatGroup
|
|
60
75
|
};
|
|
61
76
|
//# sourceMappingURL=StatGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatGroup.js","sources":["../../../../../src/ui/components/Stat/StatGroup.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type StatGroupLayout = \"strip\" | \"grid\";\nexport type StatGroupCols = 2 | 3 | 4;\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * `strip` — single horizontal row, no wrap. Each `Stat` shares the row\n * width via `flex-1`. Use when you guarantee the horizontal space\n * (hero areas, wide dashboards). On narrow viewports the row does NOT\n * reflow — choose `grid` if you need responsive collapse.\n *\n * `grid` — multi-column grid that reflows. Always 2-up on mobile,\n * expands to `cols` columns at the `md` breakpoint (768 px) and up.\n * Five or more children spill to a second row with the divider lines\n * preserved.\n *\n * @default 'grid'\n */\n layout?: StatGroupLayout;\n /**\n * Desktop column count (≥ 768 px). Only effective in `layout=\"grid\"`;\n * ignored in `layout=\"strip\"`. Mobile is always 2 columns regardless.\n *\n * @default 4\n */\n cols?: StatGroupCols;\n children: ReactNode;\n}\n\n// Tailwind v4 generates `md:grid-cols-N` for N ∈ {2,3,4} statically from\n// the literal class string. The map below ensures the strings exist\n// verbatim in the source so JIT picks them up.\nconst gridColsMd: Record<StatGroupCols, string> = {\n 2: \"md:grid-cols-2\",\n 3: \"md:grid-cols-3\",\n 4: \"md:grid-cols-4\",\n};\n\n/**\n * `StatGroup` — container for one or more `Stat` blocks with 1-px\n * dividers between them.\n *\n * ### Divider technique\n *\n * The container has `bg-line-default` and `gap-px` (1 px); each
|
|
1
|
+
{"version":3,"file":"StatGroup.js","sources":["../../../../../src/ui/components/Stat/StatGroup.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type StatGroupLayout = \"strip\" | \"grid\";\nexport type StatGroupCols = 2 | 3 | 4;\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * `strip` — single horizontal row, no wrap. Each `Stat` shares the row\n * width via `flex-1`. Use when you guarantee the horizontal space\n * (hero areas, wide dashboards). On narrow viewports the row does NOT\n * reflow — choose `grid` if you need responsive collapse.\n *\n * `grid` — multi-column grid that reflows. Always 2-up on mobile,\n * expands to `cols` columns at the `md` breakpoint (768 px) and up.\n * Five or more children spill to a second row with the divider lines\n * preserved.\n *\n * @default 'grid'\n */\n layout?: StatGroupLayout;\n /**\n * Desktop column count (≥ 768 px). Only effective in `layout=\"grid\"`;\n * ignored in `layout=\"strip\"`. Mobile is always 2 columns regardless.\n *\n * @default 4\n */\n cols?: StatGroupCols;\n /**\n * Optional slot for a badge that floats centered over the top border of\n * the container. Use when all metrics in the group share a common\n * provenance mark (e.g. a trust badge, data-source seal, tier label).\n *\n * The slot is intentionally opaque — the consumer supplies any ReactNode\n * and owns the badge's styling and a11y. `StatGroup` provides only the\n * positioning, not the badge shape. This is the same convention as the\n * `kicker` slot in `HeroSection` or the `badge` slot in `PageHeader`.\n *\n * ### Layout\n *\n * When `floatingBadge` is supplied the outer container gains\n * `pt-4` (16 px) top padding, which creates a landing zone for the\n * badge's bottom half while keeping the first stat row clear. The badge\n * itself is absolutely centred at `top-4 left-1/2`, then shifted up by\n * `−50%` of its own height so its centre sits on the inner container's\n * top border. This calibration is accurate for badges up to ~32 px tall\n * (a standard `Badge` or small `Chip`). If a taller badge is needed,\n * pass a `className` that increases the top padding to match.\n *\n * ### Reading order\n *\n * The badge node appears in the DOM **before** the stat cells, so screen\n * readers encounter it first — \"Fonte oficial, followed by the metrics\" —\n * which is the correct contextual order.\n *\n * @example\n * ```tsx\n * import { CheckCircle2 } from \"lucide-react\";\n * import { Badge } from \"@fabio.caffarello/react-design-system\";\n *\n * <StatGroup\n * layout=\"strip\"\n * floatingBadge={\n * <Badge variant=\"success\" size=\"sm\">\n * <CheckCircle2 size={10} aria-hidden=\"true\" />\n * Fonte oficial\n * </Badge>\n * }\n * >\n * <Stat icon={<Users />} value=\"726\" label=\"Parlam.\" align=\"center\" />\n * <Stat icon={<FileText />} value=\"28,1 mil\" label=\"Proposições\" align=\"center\" />\n * </StatGroup>\n * ```\n */\n floatingBadge?: ReactNode;\n children: ReactNode;\n}\n\n// Tailwind v4 generates `md:grid-cols-N` for N ∈ {2,3,4} statically from\n// the literal class string. The map below ensures the strings exist\n// verbatim in the source so JIT picks them up.\nconst gridColsMd: Record<StatGroupCols, string> = {\n 2: \"md:grid-cols-2\",\n 3: \"md:grid-cols-3\",\n 4: \"md:grid-cols-4\",\n};\n\n/**\n * `StatGroup` — container for one or more `Stat` blocks with 1-px\n * dividers between them.\n *\n * ### Divider technique\n *\n * The inner container has `bg-line-default` and `gap-px` (1 px); each\n * child `Stat` carries its own `bg-surface-base`. The 1 px of gap exposes\n * the container's background as the divider line, while each cell masks\n * its own area with `bg-surface-base`. Works identically for the strip\n * layout (vertical dividers) and the grid layout (vertical AND horizontal\n * dividers, automatically, as the grid reflows). No separate `Divider`\n * component, no per-cell border logic.\n *\n * The inner ring is `border border-line-default` matching the gap color,\n * with `rounded-lg` and `overflow-hidden` clipping the inner cells to the\n * radius. The outer wrapper is `relative` so the optional `floatingBadge`\n * can be absolutely positioned over the inner container's top border.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * `./server` alongside `Stat`.\n *\n * @example\n * ```tsx\n * <StatGroup layout=\"strip\">\n * <Stat icon={<Users />} value=\"9,4 mil\" label=\"Parlamentares\" align=\"center\" />\n * <Stat icon={<FileText />} value=\"3,2 mil\" label=\"Proposições\" align=\"center\" />\n * <Stat icon={<Vote />} value=\"1,1 mil\" label=\"Votações\" align=\"center\" />\n * <Stat icon={<Clock />} value=\"há 18 dias\" label=\"Última atualização\" align=\"center\" />\n * </StatGroup>\n *\n * <StatGroup layout=\"grid\" cols={4}>\n * <Stat value=\"87%\" label=\"Alinhamento\" hint=\"últimos 12 m\" tone=\"success\" />\n * <Stat value={null} label=\"Sem orientação\" hint=\"no período\" />\n * <Stat value=\"R$ 187.472,95\" label=\"Gastos\" hint=\"no mandato\" />\n * <Stat value=\"42\" label=\"Votações\" hint=\"no banco\" />\n * </StatGroup>\n * ```\n */\nexport function StatGroup({\n layout = \"grid\",\n cols = 4,\n floatingBadge,\n className,\n children,\n ...props\n}: StatGroupProps) {\n const isGrid = layout === \"grid\";\n\n return (\n <div\n className={cn(\n \"relative\",\n floatingBadge && getSpacingClass(\"base\", \"pt\"),\n className,\n )}\n {...props}\n >\n {floatingBadge ? (\n <div className=\"absolute top-4 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n {floatingBadge}\n </div>\n ) : null}\n <div\n className={cn(\n \"bg-line-default border border-line-default overflow-hidden gap-px\",\n getRadiusClass(\"lg\"),\n isGrid ? `grid grid-cols-2 ${gridColsMd[cols]}` : \"flex\",\n )}\n >\n {children}\n </div>\n </div>\n );\n}\n\nexport default StatGroup;\n"],"names":["gridColsMd","StatGroup","_a","_b","layout","cols","floatingBadge","className","children","props","__objRest","isGrid","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","jsx","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAMA,IAA4C;AAAA,EAChD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AA2CO,SAASC,EAAUC,GAOP;AAPO,MAAAC,IAAAD,GACxB;AAAA,YAAAE,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,MALwBL,GAMrBM,IAAAC,EANqBP,GAMrB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMQ,IAASP,MAAW;AAE1B,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAT,KAAiBU,EAAgB,QAAQ,IAAI;AAAA,QAC7CT;AAAA,MAAA;AAAA,OAEEE,IANL;AAAA,MAQE,UAAA;AAAA,QAAAH,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,kEACZ,aACH,IACE;AAAA,QACJ,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF;AAAA,cACT;AAAA,cACAG,EAAe,IAAI;AAAA,cACnBP,IAAS,oBAAoBX,EAAWK,CAAI,CAAC,KAAK;AAAA,YAAA;AAAA,YAGnD,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|