@apipass/design-system 7.1.0 → 7.3.1

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.
Files changed (40) hide show
  1. package/dist/lib/embedded-styles.js +2 -2
  2. package/dist/lib/style.css +1 -1
  3. package/dist/lib/ui/components/DataTable/DataTable.cjs +1 -1
  4. package/dist/lib/ui/components/DataTable/DataTable.cjs.map +1 -1
  5. package/dist/lib/ui/components/DataTable/DataTable.js +70 -69
  6. package/dist/lib/ui/components/DataTable/DataTable.js.map +1 -1
  7. package/dist/lib/ui/components/FormModal/FormModal.cjs +1 -1
  8. package/dist/lib/ui/components/FormModal/FormModal.cjs.map +1 -1
  9. package/dist/lib/ui/components/FormModal/FormModal.js +14 -15
  10. package/dist/lib/ui/components/FormModal/FormModal.js.map +1 -1
  11. package/dist/lib/ui/components/charts/TopList/TopList.cjs +1 -1
  12. package/dist/lib/ui/components/charts/TopList/TopList.cjs.map +1 -1
  13. package/dist/lib/ui/components/charts/TopList/TopList.js +49 -45
  14. package/dist/lib/ui/components/charts/TopList/TopList.js.map +1 -1
  15. package/dist/lib/ui/components/charts/TopList/top-list-option.cjs +1 -1
  16. package/dist/lib/ui/components/charts/TopList/top-list-option.cjs.map +1 -1
  17. package/dist/lib/ui/components/charts/TopList/top-list-option.js +148 -106
  18. package/dist/lib/ui/components/charts/TopList/top-list-option.js.map +1 -1
  19. package/dist/lib/ui/components/charts/chart-theme.cjs +1 -1
  20. package/dist/lib/ui/components/charts/chart-theme.cjs.map +1 -1
  21. package/dist/lib/ui/components/charts/chart-theme.js +6 -4
  22. package/dist/lib/ui/components/charts/chart-theme.js.map +1 -1
  23. package/dist/lib/ui/primitives/Dialog/Dialog.cjs +1 -1
  24. package/dist/lib/ui/primitives/Dialog/Dialog.cjs.map +1 -1
  25. package/dist/lib/ui/primitives/Dialog/Dialog.js +26 -16
  26. package/dist/lib/ui/primitives/Dialog/Dialog.js.map +1 -1
  27. package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs +1 -1
  28. package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs.map +1 -1
  29. package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js +23 -23
  30. package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js.map +1 -1
  31. package/dist/lib/ui/primitives/Switch/Switch.cjs +1 -1
  32. package/dist/lib/ui/primitives/Switch/Switch.cjs.map +1 -1
  33. package/dist/lib/ui/primitives/Switch/Switch.js +25 -20
  34. package/dist/lib/ui/primitives/Switch/Switch.js.map +1 -1
  35. package/dist/types/ui/components/FormModal/FormModal.d.ts +2 -1
  36. package/dist/types/ui/components/charts/TopList/top-list-option.d.ts +1 -0
  37. package/dist/types/ui/components/charts/chart-theme.d.ts +2 -0
  38. package/dist/types/ui/primitives/Dialog/Dialog.d.ts +3 -1
  39. package/dist/types/ui/primitives/Switch/Switch.d.ts +5 -2
  40. package/package.json +1 -1
@@ -1,178 +1,220 @@
1
- import { formatShare as _ } from "../chart-share.js";
1
+ import { formatShare as g } from "../chart-share.js";
2
2
  import "echarts/charts";
3
3
  import "echarts/components";
4
- import * as L from "echarts/core";
4
+ import * as P from "echarts/core";
5
5
  import "echarts/renderers";
6
- const g = "–", h = 160, E = 12, M = 88, P = 56, c = 16, B = 20, f = 4, b = 8, T = 800, m = 12, C = 14, w = 1e-9, V = /[{}|]/g, X = "top-list-values";
7
- function u(t) {
6
+ const _ = "–", C = 12, L = 8, w = 88, B = 56, u = 16, d = 4, m = 6, c = 3, b = 800, f = 13, M = 26, V = 1e-9, k = /[{}|]/g, O = "top-list-values", N = "top-list-tracks";
7
+ function s(t) {
8
8
  return t.value ?? 0;
9
9
  }
10
10
  function v(t) {
11
- const e = Math.max(...t.map(u));
11
+ const e = Math.max(...t.map(s));
12
12
  return e > 0 ? e : 1;
13
13
  }
14
- function N(t) {
15
- const e = [...new Set(t.map(u))].sort(
16
- (o, a) => o - a
17
- ), n = e.slice(1).map((o, a) => o - e[a]);
18
- return n.length > 0 ? Math.min(...n) : 1 / 0;
14
+ function U(t) {
15
+ const e = [...new Set(t.map(s))].sort(
16
+ (a, n) => a - n
17
+ ), o = e.slice(1).map((a, n) => a - e[n]);
18
+ return o.length > 0 ? Math.min(...o) : 1 / 0;
19
19
  }
20
- function O(t) {
21
- const e = v(t) * w, n = N(t) / (t.length + 1);
22
- return Math.min(e, n);
20
+ function X(t) {
21
+ const e = v(t) * V, o = U(t) / (t.length + 1);
22
+ return Math.min(e, o);
23
23
  }
24
- function x(t) {
25
- const e = O(t);
24
+ function E(t) {
25
+ const e = X(t);
26
26
  return new Map(
27
- t.map((n, o) => [
28
- n.id,
29
- u(n) + e * (t.length - o)
27
+ t.map((o, a) => [
28
+ o.id,
29
+ s(o) + e * (t.length - a)
30
30
  ])
31
31
  );
32
32
  }
33
- function A(t, e) {
34
- const n = x(t), o = e === "desc" ? -1 : 1, a = [...t].sort(
35
- (r, i) => o * (n.get(r.id) - n.get(i.id))
33
+ function x(t, e) {
34
+ const o = E(t), a = e === "desc" ? -1 : 1, n = [...t].sort(
35
+ (l, i) => a * (o.get(l.id) - o.get(i.id))
36
36
  );
37
- return new Map(a.map((r, i) => [r.id, i + 1]));
37
+ return new Map(n.map((l, i) => [l.id, i + 1]));
38
38
  }
39
- function U(t, e) {
40
- return e ?? t.reduce((n, o) => n + u(o), 0);
39
+ function W(t, e) {
40
+ return e ?? t.reduce((o, a) => o + s(a), 0);
41
41
  }
42
- function S(t, e) {
43
- return e === 0 ? 0 : u(t) / e;
42
+ function T(t, e) {
43
+ return e === 0 ? 0 : s(t) / e;
44
44
  }
45
45
  function p(t) {
46
46
  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
47
47
  }
48
- function I(t) {
49
- return t.replace(V, " ");
48
+ function A(t) {
49
+ return t.replace(k, " ");
50
50
  }
51
- function k(t, e) {
52
- const n = `${m}px ${e.fontFamily}`;
53
- return I(L.format.truncateText(t, h, n, "…"));
51
+ function G(t) {
52
+ const e = [];
53
+ return t.includes("value") && e.push(w), t.includes("percent") && e.push(B), e.reduce((o, a) => o + a, 0);
54
54
  }
55
- function D(t, e) {
56
- return e === null ? g : t.valueFormatter ? t.valueFormatter(e) : String(e);
55
+ function F(t) {
56
+ const e = t.canvasWidthPx - 2 * d - G(t.valueDisplay) - C;
57
+ return Math.max(e, 0);
57
58
  }
58
59
  function H(t, e) {
59
- return t.value === null ? g : _(S(t, e));
60
+ const o = `${f}px ${e.theme.fontFamily}`;
61
+ return A(P.format.truncateText(t, F(e), o, "…"));
60
62
  }
61
- function F(t) {
62
- const e = [];
63
- return t.includes("value") && e.push(M), t.includes("percent") && e.push(P), e.length === 0 ? 0 : e.reduce((n, o) => n + o, 0) + b;
63
+ function S(t, e) {
64
+ return e === null ? _ : t.valueFormatter ? t.valueFormatter(e) : String(e);
64
65
  }
65
- function W(t, e, n) {
66
- const o = [];
67
- return t.valueDisplay.includes("value") && o.push(`{value|${I(D(t, e.value))}}`), t.valueDisplay.includes("percent") && o.push(`{percent|${H(e, n)}}`), o.join("");
66
+ function $(t, e) {
67
+ return t.value === null ? _ : g(T(t, e));
68
+ }
69
+ function z(t, e, o) {
70
+ const a = [];
71
+ return t.valueDisplay.includes("value") && a.push(`{value|${A(S(t, e.value))}}`), t.valueDisplay.includes("percent") && a.push(`{percent|${$(e, o)}}`), a.join("");
68
72
  }
69
- function q(t, e) {
70
- const n = (t - 2 * c) / e;
71
- return Math.max(1, Math.ceil(C / n));
73
+ function et(t, e) {
74
+ const o = (t - 2 * u) / e;
75
+ return Math.max(1, Math.ceil(M / o));
72
76
  }
73
- function y(t, e) {
77
+ function I(t, e) {
74
78
  return t === void 0 || (t - 1) % e === 0;
75
79
  }
76
- function $(t, e) {
77
- const { items: n, sort: o, theme: a } = t, r = A(n, o), i = t.labeledRowStep;
80
+ function K(t) {
78
81
  return {
79
82
  type: "category",
80
- data: n.map((l) => l.id),
81
- inverse: o === "desc",
83
+ data: t.items.map((e) => e.id),
84
+ inverse: t.sort === "desc",
82
85
  animationDuration: 0,
83
- animationDurationUpdate: t.animate ? T : 0,
86
+ animationDurationUpdate: t.animate ? b : 0,
84
87
  axisLine: { show: !1 },
85
88
  axisTick: { show: !1 },
86
- axisLabel: {
87
- color: a.labelColor,
88
- fontSize: m,
89
- interval: 0,
90
- align: "right",
91
- margin: E,
92
- formatter: (l) => {
93
- if (!y(r.get(l), i)) return "";
94
- const d = e.get(l);
95
- return d ? k(d.name, a) : "";
96
- }
97
- }
89
+ axisLabel: { show: !1 }
98
90
  };
99
91
  }
100
- function G(t, e, n) {
101
- return (o) => {
102
- const a = e.get(o.name);
103
- if (!a) return "";
104
- const r = a.value === null ? "" : ` · ${_(S(a, n))}`, i = p(D(t, a.value));
105
- return `<div>${p(a.name)}</div><div><b>${i}</b>${r}</div>`;
92
+ function j(t, e, o) {
93
+ return (a) => {
94
+ const n = e.get(a.name);
95
+ if (!n) return "";
96
+ const l = n.value === null ? "" : ` · ${g(T(n, o))}`, i = p(S(t, n.value));
97
+ return `<div>${p(n.name)}</div><div><b>${i}</b>${l}</div>`;
106
98
  };
107
99
  }
108
- function z(t, e, n) {
109
- const { theme: o } = t, a = A(t.items, t.sort), r = t.labeledRowStep;
100
+ function y() {
101
+ return [0, -9];
102
+ }
103
+ function Y(t, e) {
104
+ const o = x(t.items, t.sort);
105
+ return {
106
+ show: !0,
107
+ position: "insideLeft",
108
+ distance: 0,
109
+ align: "left",
110
+ verticalAlign: "bottom",
111
+ offset: y(),
112
+ color: t.theme.emphasizedLabelColor,
113
+ backgroundColor: t.theme.tooltipBackgroundColor,
114
+ fontSize: f,
115
+ fontWeight: 500,
116
+ formatter: (a) => {
117
+ if (!I(o.get(a.name), t.labeledRowStep)) return "";
118
+ const n = e.get(a.name);
119
+ return n ? H(n.name, t) : "";
120
+ }
121
+ };
122
+ }
123
+ function Z(t, e, o) {
124
+ const { theme: a } = t, n = x(t.items, t.sort);
110
125
  return {
111
126
  show: t.valueDisplay.length > 0,
112
- position: "right",
113
- distance: b,
114
- fontSize: m,
115
- formatter: (i) => {
116
- if (!y(a.get(i.name), r)) return "";
117
- const l = e.get(i.name);
118
- return l ? W(t, l, n) : "";
127
+ backgroundColor: a.tooltipBackgroundColor,
128
+ position: "insideRight",
129
+ distance: 0,
130
+ align: "right",
131
+ verticalAlign: "bottom",
132
+ offset: y(),
133
+ fontSize: f,
134
+ formatter: (l) => {
135
+ if (!I(n.get(l.name), t.labeledRowStep)) return "";
136
+ const i = e.get(l.name);
137
+ return i ? z(t, i, o) : "";
119
138
  },
120
139
  rich: {
121
- value: { color: o.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },
122
- percent: { color: o.labelColor }
140
+ value: {
141
+ color: a.labelColor,
142
+ fontWeight: 600,
143
+ padding: [0, t.valueDisplay.includes("percent") ? L : 0, 0, 0]
144
+ },
145
+ percent: { color: a.labelColor }
123
146
  }
124
147
  };
125
148
  }
126
- function J(t) {
127
- const { items: e, theme: n, colorsByItemId: o } = t, a = new Map(
128
- e.map((s) => [s.id, s])
129
- ), r = U(e, t.total), i = v(e), l = x(e), d = F(t.valueDisplay), R = n.seriesColors[0];
149
+ function h() {
150
+ return [c, c, c, c];
151
+ }
152
+ function ot(t) {
153
+ const { items: e, theme: o, colorsByItemId: a } = t, n = new Map(
154
+ e.map((r) => [r.id, r])
155
+ ), l = W(e, t.total), i = v(e), D = E(e), R = o.seriesColors[0];
130
156
  return {
131
157
  animation: !0,
132
158
  animationDuration: 0,
133
- animationDurationUpdate: t.animate ? T : 0,
159
+ animationDurationUpdate: t.animate ? b : 0,
134
160
  animationEasing: "linear",
135
161
  animationEasingUpdate: "linear",
136
- textStyle: { fontFamily: n.fontFamily, color: n.labelColor },
162
+ textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
137
163
  grid: {
138
- top: c,
139
- bottom: c,
140
- left: c + h + E,
141
- right: c + d,
164
+ top: u,
165
+ bottom: u,
166
+ left: d,
167
+ right: d,
142
168
  containLabel: !1
143
169
  },
144
170
  tooltip: {
145
171
  trigger: "item",
146
- backgroundColor: n.tooltipBackgroundColor,
147
- borderColor: n.tooltipBorderColor,
148
- textStyle: { color: n.labelColor },
149
- formatter: G(t, a, r)
172
+ backgroundColor: o.tooltipBackgroundColor,
173
+ borderColor: o.tooltipBorderColor,
174
+ textStyle: { color: o.labelColor },
175
+ formatter: j(t, n, l)
150
176
  },
151
177
  xAxis: { type: "value", min: 0, max: i, show: !1 },
152
- yAxis: $(t, a),
178
+ yAxis: K(t),
153
179
  series: [
154
180
  {
155
- id: X,
181
+ id: N,
182
+ type: "bar",
183
+ silent: !0,
184
+ barWidth: m,
185
+ barGap: "-100%",
186
+ itemStyle: { color: o.trackColor, borderRadius: h() },
187
+ data: e.map((r) => ({
188
+ id: r.id,
189
+ name: r.id,
190
+ value: [i, r.id]
191
+ })),
192
+ encode: { x: 0, y: 1 },
193
+ label: Z(t, n, l)
194
+ },
195
+ {
196
+ id: O,
156
197
  type: "bar",
157
198
  realtimeSort: !0,
158
- barMaxWidth: B,
159
- itemStyle: { borderRadius: [0, f, f, 0] },
160
- data: e.map((s) => ({
161
- id: s.id,
162
- name: s.id,
163
- value: [l.get(s.id), s.id],
164
- itemStyle: { color: o[s.id] ?? R }
199
+ barWidth: m,
200
+ barGap: "-100%",
201
+ itemStyle: { borderRadius: h() },
202
+ data: e.map((r) => ({
203
+ id: r.id,
204
+ name: r.id,
205
+ value: [D.get(r.id), r.id],
206
+ itemStyle: { color: a[r.id] ?? R }
165
207
  })),
166
208
  encode: { x: 0, y: 1 },
167
- label: z(t, a, r)
209
+ label: Y(t, n)
168
210
  }
169
211
  ]
170
212
  };
171
213
  }
172
214
  export {
173
- J as buildTopListOption,
174
- q as labeledRowStepFor,
175
- A as rankById,
176
- U as resolveTotal
215
+ ot as buildTopListOption,
216
+ et as labeledRowStepFor,
217
+ x as rankById,
218
+ W as resolveTotal
177
219
  };
178
220
  //# sourceMappingURL=top-list-option.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"top-list-option.js","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n id: string;\n name: string;\n value: number | null;\n colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n items: TopListItem[];\n sort: TopListSort;\n total?: number;\n valueDisplay: TopListValueDisplay[];\n theme: ChartTheme;\n colorsByItemId: Record<string, string>;\n animate: boolean;\n labeledRowStep: number;\n valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_MAX_WIDTH_PX: number = 160;\n\nconst NAME_TO_BAR_GAP_PX: number = 12;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst BAR_MAX_WIDTH_PX: number = 20;\n\nconst BAR_RADIUS_PX: number = 4;\n\nconst BAR_END_LABEL_DISTANCE_PX: number = 8;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 12;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 14;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\n\nfunction valueOf(item: TopListItem): number {\n return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n const maxValue: number = Math.max(...items.map(valueOf));\n return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n (first: number, second: number) => first - second,\n );\n const gaps: number[] = distinctValues\n .slice(1)\n .map((value: number, index: number) => value - distinctValues[index]);\n return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n const stepThatKeepsDistinctValuesApart: number =\n smallestGapBetweenDistinctValues(items) / (items.length + 1);\n return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n const tieBreakStep: number = tieBreakStepOf(items);\n return new Map(\n items.map((item: TopListItem, position: number) => [\n item.id,\n valueOf(item) + tieBreakStep * (items.length - position),\n ]),\n );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n const plottedValues: Map<string, number> = plottedValuesById(items);\n const direction: number = sort === \"desc\" ? -1 : 1;\n const ranked: TopListItem[] = [...items].sort(\n (first: TopListItem, second: TopListItem) =>\n direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n );\n return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction truncatedName(name: string, theme: ChartTheme): string {\n const font: string = `${LABEL_FONT_SIZE_PX}px ${theme.fontFamily}`;\n return plainRichText(echarts.format.truncateText(name, NAME_MAX_WIDTH_PX, font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n if (value === null) return EMPTY_VALUE_TEXT;\n return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction barEndLabelWidthPx(valueDisplay: TopListValueDisplay[]): number {\n const widths: number[] = [];\n if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n if (widths.length === 0) return 0;\n return widths.reduce((sum: number, width: number) => sum + width, 0) + BAR_END_LABEL_DISTANCE_PX;\n}\n\nfunction barEndLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n const parts: string[] = [];\n if (input.valueDisplay.includes(\"value\")) {\n parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n }\n if (input.valueDisplay.includes(\"percent\")) {\n parts.push(`{percent|${formatShareText(item, total)}}`);\n }\n return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n const { items, sort, theme } = input;\n const ranks: Map<string, number> = rankById(items, sort);\n const step: number = input.labeledRowStep;\n return {\n type: \"category\",\n data: items.map((item: TopListItem) => item.id),\n inverse: sort === \"desc\",\n animationDuration: 0,\n animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n axisLine: { show: false },\n axisTick: { show: false },\n axisLabel: {\n color: theme.labelColor,\n fontSize: LABEL_FONT_SIZE_PX,\n interval: 0,\n align: \"right\",\n margin: NAME_TO_BAR_GAP_PX,\n formatter: (id: string) => {\n if (!isRowLabeled(ranks.get(id), step)) return \"\";\n const item: TopListItem | undefined = itemsById.get(id);\n return item ? truncatedName(item.name, theme) : \"\";\n },\n },\n };\n}\n\nfunction tooltipFormatter(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n total: number,\n): (params: { name: string }) => string {\n return (params: { name: string }) => {\n const item: TopListItem | undefined = itemsById.get(params.name);\n if (!item) return \"\";\n const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n const value: string = escapeHtml(formatValueText(input, item.value));\n return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n };\n}\n\nfunction barEndLabel(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n total: number,\n): Record<string, unknown> {\n const { theme } = input;\n const ranks: Map<string, number> = rankById(input.items, input.sort);\n const step: number = input.labeledRowStep;\n return {\n show: input.valueDisplay.length > 0,\n position: \"right\",\n distance: BAR_END_LABEL_DISTANCE_PX,\n fontSize: LABEL_FONT_SIZE_PX,\n formatter: (params: { name: string }) => {\n if (!isRowLabeled(ranks.get(params.name), step)) return \"\";\n const item: TopListItem | undefined = itemsById.get(params.name);\n return item ? barEndLabelText(input, item, total) : \"\";\n },\n rich: {\n value: { color: theme.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },\n percent: { color: theme.labelColor },\n },\n };\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n const { items, theme, colorsByItemId } = input;\n const itemsById: Map<string, TopListItem> = new Map(\n items.map((item: TopListItem) => [item.id, item]),\n );\n const total: number = resolveTotal(items, input.total);\n const maxValue: number = maxValueOf(items);\n const plottedValues: Map<string, number> = plottedValuesById(items);\n const reservedRightPx: number = barEndLabelWidthPx(input.valueDisplay);\n const fallbackColor: string = theme.seriesColors[0];\n \n return {\n animation: true,\n animationDuration: 0,\n animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n animationEasing: \"linear\",\n animationEasingUpdate: \"linear\",\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n top: GRID_PADDING_PX,\n bottom: GRID_PADDING_PX,\n left: GRID_PADDING_PX + NAME_MAX_WIDTH_PX + NAME_TO_BAR_GAP_PX,\n right: GRID_PADDING_PX + reservedRightPx,\n containLabel: false,\n },\n tooltip: {\n trigger: \"item\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n formatter: tooltipFormatter(input, itemsById, total),\n },\n xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n yAxis: categoryAxis(input, itemsById),\n series: [\n {\n id: VALUE_SERIES_ID,\n type: \"bar\",\n realtimeSort: true,\n barMaxWidth: BAR_MAX_WIDTH_PX,\n itemStyle: { borderRadius: [0, BAR_RADIUS_PX, BAR_RADIUS_PX, 0] },\n data: items.map((item: TopListItem) => ({\n id: item.id,\n name: item.id,\n value: [plottedValues.get(item.id) as number, item.id],\n itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n })),\n encode: { x: 0, y: 1 },\n label: barEndLabel(input, itemsById, total),\n },\n ],\n };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_MAX_WIDTH_PX","NAME_TO_BAR_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","BAR_MAX_WIDTH_PX","BAR_RADIUS_PX","BAR_END_LABEL_DISTANCE_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","truncatedName","name","theme","font","echarts","formatValueText","input","formatShareText","formatShare","barEndLabelWidthPx","valueDisplay","widths","width","barEndLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","itemsById","ranks","id","tooltipFormatter","params","share","barEndLabel","buildTopListOption","colorsByItemId","reservedRightPx","fallbackColor"],"mappings":"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"}
1
+ {"version":3,"file":"top-list-option.js","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n id: string;\n name: string;\n value: number | null;\n colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n items: TopListItem[];\n sort: TopListSort;\n total?: number;\n valueDisplay: TopListValueDisplay[];\n theme: ChartTheme;\n colorsByItemId: Record<string, string>;\n animate: boolean;\n labeledRowStep: number;\n canvasWidthPx: number;\n valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_TO_VALUE_GAP_PX: number = 12;\n\nconst VALUE_TO_PERCENT_GAP_PX: number = 8;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst GRID_SIDE_PADDING_PX: number = 4;\n\nconst BAR_WIDTH_PX: number = 6;\n\nconst BAR_RADIUS_PX: number = 3;\n\nconst LABEL_TO_BAR_GAP_PX: number = 6;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 13;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 26;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\nconst TRACK_SERIES_ID: string = \"top-list-tracks\";\n\nfunction valueOf(item: TopListItem): number {\n return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n const maxValue: number = Math.max(...items.map(valueOf));\n return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n (first: number, second: number) => first - second,\n );\n const gaps: number[] = distinctValues\n .slice(1)\n .map((value: number, index: number) => value - distinctValues[index]);\n return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n const stepThatKeepsDistinctValuesApart: number =\n smallestGapBetweenDistinctValues(items) / (items.length + 1);\n return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n const tieBreakStep: number = tieBreakStepOf(items);\n return new Map(\n items.map((item: TopListItem, position: number) => [\n item.id,\n valueOf(item) + tieBreakStep * (items.length - position),\n ]),\n );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n const plottedValues: Map<string, number> = plottedValuesById(items);\n const direction: number = sort === \"desc\" ? -1 : 1;\n const ranked: TopListItem[] = [...items].sort(\n (first: TopListItem, second: TopListItem) =>\n direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n );\n return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction valueColumnsWidthPx(valueDisplay: TopListValueDisplay[]): number {\n const widths: number[] = [];\n if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n return widths.reduce((sum: number, width: number) => sum + width, 0);\n}\n\nfunction nameMaxWidthPx(input: TopListOptionInput): number {\n const availablePx: number =\n input.canvasWidthPx -\n 2 * GRID_SIDE_PADDING_PX -\n valueColumnsWidthPx(input.valueDisplay) -\n NAME_TO_VALUE_GAP_PX;\n return Math.max(availablePx, 0);\n}\n\nfunction truncatedName(name: string, input: TopListOptionInput): string {\n const font: string = `${LABEL_FONT_SIZE_PX}px ${input.theme.fontFamily}`;\n return plainRichText(echarts.format.truncateText(name, nameMaxWidthPx(input), font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n if (value === null) return EMPTY_VALUE_TEXT;\n return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction valueLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n const parts: string[] = [];\n if (input.valueDisplay.includes(\"value\")) {\n parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n }\n if (input.valueDisplay.includes(\"percent\")) {\n parts.push(`{percent|${formatShareText(item, total)}}`);\n }\n return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(input: TopListOptionInput): Record<string, unknown> {\n return {\n type: \"category\",\n data: input.items.map((item: TopListItem) => item.id),\n inverse: input.sort === \"desc\",\n animationDuration: 0,\n animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n axisLine: { show: false },\n axisTick: { show: false },\n axisLabel: { show: false },\n };\n}\n\nfunction tooltipFormatter(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n total: number,\n): (params: { name: string }) => string {\n return (params: { name: string }) => {\n const item: TopListItem | undefined = itemsById.get(params.name);\n if (!item) return \"\";\n const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n const value: string = escapeHtml(formatValueText(input, item.value));\n return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n };\n}\n\nfunction labelOffsetAboveBar(): number[] {\n return [0, -(BAR_WIDTH_PX / 2 + LABEL_TO_BAR_GAP_PX)];\n}\n\nfunction nameLabel(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n const ranks: Map<string, number> = rankById(input.items, input.sort);\n return {\n show: true,\n position: \"insideLeft\",\n distance: 0,\n align: \"left\",\n verticalAlign: \"bottom\",\n offset: labelOffsetAboveBar(),\n color: input.theme.emphasizedLabelColor,\n backgroundColor: input.theme.tooltipBackgroundColor,\n fontSize: LABEL_FONT_SIZE_PX,\n fontWeight: 500,\n formatter: (params: { name: string }) => {\n if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n const item: TopListItem | undefined = itemsById.get(params.name);\n return item ? truncatedName(item.name, input) : \"\";\n },\n };\n}\n\nfunction valueLabel(\n input: TopListOptionInput,\n itemsById: Map<string, TopListItem>,\n total: number,\n): Record<string, unknown> {\n const { theme } = input;\n const ranks: Map<string, number> = rankById(input.items, input.sort);\n return {\n show: input.valueDisplay.length > 0,\n backgroundColor: theme.tooltipBackgroundColor,\n position: \"insideRight\",\n distance: 0,\n align: \"right\",\n verticalAlign: \"bottom\",\n offset: labelOffsetAboveBar(),\n fontSize: LABEL_FONT_SIZE_PX,\n formatter: (params: { name: string }) => {\n if (!isRowLabeled(ranks.get(params.name), input.labeledRowStep)) return \"\";\n const item: TopListItem | undefined = itemsById.get(params.name);\n return item ? valueLabelText(input, item, total) : \"\";\n },\n rich: {\n value: {\n color: theme.labelColor,\n fontWeight: 600,\n padding: [0, input.valueDisplay.includes(\"percent\") ? VALUE_TO_PERCENT_GAP_PX : 0, 0, 0],\n },\n percent: { color: theme.labelColor },\n },\n };\n}\n\nfunction barRadius(): number[] {\n return [BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX, BAR_RADIUS_PX];\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n const { items, theme, colorsByItemId } = input;\n const itemsById: Map<string, TopListItem> = new Map(\n items.map((item: TopListItem) => [item.id, item]),\n );\n const total: number = resolveTotal(items, input.total);\n const maxValue: number = maxValueOf(items);\n const plottedValues: Map<string, number> = plottedValuesById(items);\n const fallbackColor: string = theme.seriesColors[0];\n\n return {\n animation: true,\n animationDuration: 0,\n animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n animationEasing: \"linear\",\n animationEasingUpdate: \"linear\",\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n top: GRID_PADDING_PX,\n bottom: GRID_PADDING_PX,\n left: GRID_SIDE_PADDING_PX,\n right: GRID_SIDE_PADDING_PX,\n containLabel: false,\n },\n tooltip: {\n trigger: \"item\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n formatter: tooltipFormatter(input, itemsById, total),\n },\n xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n yAxis: categoryAxis(input),\n series: [\n {\n id: TRACK_SERIES_ID,\n type: \"bar\",\n silent: true,\n barWidth: BAR_WIDTH_PX,\n barGap: \"-100%\",\n itemStyle: { color: theme.trackColor, borderRadius: barRadius() },\n data: items.map((item: TopListItem) => ({\n id: item.id,\n name: item.id,\n value: [maxValue, item.id],\n })),\n encode: { x: 0, y: 1 },\n label: valueLabel(input, itemsById, total),\n },\n {\n id: VALUE_SERIES_ID,\n type: \"bar\",\n realtimeSort: true,\n barWidth: BAR_WIDTH_PX,\n barGap: \"-100%\",\n itemStyle: { borderRadius: barRadius() },\n data: items.map((item: TopListItem) => ({\n id: item.id,\n name: item.id,\n value: [plottedValues.get(item.id) as number, item.id],\n itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n })),\n encode: { x: 0, y: 1 },\n label: nameLabel(input, itemsById),\n },\n ],\n };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_TO_VALUE_GAP_PX","VALUE_TO_PERCENT_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","GRID_SIDE_PADDING_PX","BAR_WIDTH_PX","BAR_RADIUS_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","TRACK_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","valueColumnsWidthPx","valueDisplay","widths","width","nameMaxWidthPx","input","availablePx","truncatedName","name","font","echarts","formatValueText","formatShareText","formatShare","valueLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","tooltipFormatter","itemsById","params","share","labelOffsetAboveBar","nameLabel","ranks","valueLabel","theme","barRadius","buildTopListOption","colorsByItemId","fallbackColor"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chart-palette.cjs");function d(t,e){const r=window.getComputedStyle(t).getPropertyValue(e).trim();return r===""?void 0:r}function o(t,e,r){const l=t.getPropertyValue(e).trim();return l===""?r:l}function n(t){const e=window.getComputedStyle(t);return{seriesColors:a.CHART_SERIES_COLOR_TOKENS.map(r=>o(e,r,"#4b5563")),neutralColor:o(e,a.CHART_NEUTRAL_COLOR_TOKEN,"#9ca3af"),axisLineColor:o(e,"--sds-color-border-default-secondary","#9ca3af"),splitLineColor:o(e,"--sds-color-border-default-default","#e5e7eb"),labelColor:o(e,"--sds-color-text-default-secondary","#6b7280"),tooltipBackgroundColor:o(e,"--sds-color-background-default-default","#ffffff"),tooltipBorderColor:o(e,"--sds-color-border-default-default","#d1d5db"),fontFamily:o(e,"--sds-typography-body-font-family","inherit")}}exports.readChartTheme=n;exports.resolveColorToken=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chart-palette.cjs");function d(t,o){const r=window.getComputedStyle(t).getPropertyValue(o).trim();return r===""?void 0:r}function e(t,o,r){const l=t.getPropertyValue(o).trim();return l===""?r:l}function s(t){const o=window.getComputedStyle(t);return{seriesColors:a.CHART_SERIES_COLOR_TOKENS.map(r=>e(o,r,"#4b5563")),neutralColor:e(o,a.CHART_NEUTRAL_COLOR_TOKEN,"#9ca3af"),axisLineColor:e(o,"--sds-color-border-default-secondary","#9ca3af"),splitLineColor:e(o,"--sds-color-border-default-default","#e5e7eb"),labelColor:e(o,"--sds-color-text-default-secondary","#6b7280"),emphasizedLabelColor:e(o,"--sds-color-text-default-default","#111827"),trackColor:e(o,"--sds-color-background-default-secondary","#f3f4f6"),tooltipBackgroundColor:e(o,"--sds-color-background-default-default","#ffffff"),tooltipBorderColor:e(o,"--sds-color-border-default-default","#d1d5db"),fontFamily:e(o,"--sds-typography-body-font-family","inherit")}}exports.readChartTheme=s;exports.resolveColorToken=d;
2
2
  //# sourceMappingURL=chart-theme.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"chart-theme.cjs","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n seriesColors: string[];\n neutralColor: string;\n axisLineColor: string;\n splitLineColor: string;\n labelColor: string;\n tooltipBackgroundColor: string;\n tooltipBorderColor: string;\n fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n const value: string = styles.getPropertyValue(token).trim();\n return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n return {\n seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n resolveToken(styles, token, \"#4b5563\"),\n ),\n neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n // `secondary` para se separar da grade sem competir com as linhas.\n axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n tooltipBackgroundColor: resolveToken(\n styles,\n \"--sds-color-background-default-default\",\n \"#ffffff\",\n ),\n tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":"uHAgBO,SAASA,EAAkBC,EAAsBC,EAAmC,CACzF,MAAMC,EAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA,EAC/E,OAAOC,IAAU,GAAK,OAAYA,CACpC,CAEA,SAASC,EAAaC,EAA6BH,EAAeI,EAA0B,CAC1F,MAAMH,EAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA,EACrD,OAAOC,IAAU,GAAKG,EAAWH,CACnC,CAEO,SAASI,EAAeN,EAAkC,CAC/D,MAAMI,EAA8B,OAAO,iBAAiBJ,CAAO,EACnE,MAAO,CACL,aAAcO,EAAAA,0BAA0B,IAAKN,GAC3CE,EAAaC,EAAQH,EAAO,SAAS,CAAA,EAEvC,aAAcE,EAAaC,EAAQI,EAAAA,0BAAqB,SAAS,EAIjE,cAAeL,EAAaC,EAAQ,uCAAwC,SAAS,EACrF,eAAgBD,EAAaC,EAAQ,qCAAsC,SAAS,EACpF,WAAYD,EAAaC,EAAQ,qCAAsC,SAAS,EAChF,uBAAwBD,EACtBC,EACA,yCACA,SAAA,EAEF,mBAAoBD,EAAaC,EAAQ,qCAAsC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,oCAAqC,SAAS,CAAA,CAEnF"}
1
+ {"version":3,"file":"chart-theme.cjs","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n seriesColors: string[];\n neutralColor: string;\n axisLineColor: string;\n splitLineColor: string;\n labelColor: string;\n emphasizedLabelColor: string;\n trackColor: string;\n tooltipBackgroundColor: string;\n tooltipBorderColor: string;\n fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n const value: string = styles.getPropertyValue(token).trim();\n return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n return {\n seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n resolveToken(styles, token, \"#4b5563\"),\n ),\n neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n // `secondary` para se separar da grade sem competir com as linhas.\n axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n emphasizedLabelColor: resolveToken(styles, \"--sds-color-text-default-default\", \"#111827\"),\n trackColor: resolveToken(styles, \"--sds-color-background-default-secondary\", \"#f3f4f6\"),\n tooltipBackgroundColor: resolveToken(\n styles,\n \"--sds-color-background-default-default\",\n \"#ffffff\",\n ),\n tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":"uHAkBO,SAASA,EAAkBC,EAAsBC,EAAmC,CACzF,MAAMC,EAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA,EAC/E,OAAOC,IAAU,GAAK,OAAYA,CACpC,CAEA,SAASC,EAAaC,EAA6BH,EAAeI,EAA0B,CAC1F,MAAMH,EAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA,EACrD,OAAOC,IAAU,GAAKG,EAAWH,CACnC,CAEO,SAASI,EAAeN,EAAkC,CAC/D,MAAMI,EAA8B,OAAO,iBAAiBJ,CAAO,EACnE,MAAO,CACL,aAAcO,EAAAA,0BAA0B,IAAKN,GAC3CE,EAAaC,EAAQH,EAAO,SAAS,CAAA,EAEvC,aAAcE,EAAaC,EAAQI,EAAAA,0BAAqB,SAAS,EAIjE,cAAeL,EAAaC,EAAQ,uCAAwC,SAAS,EACrF,eAAgBD,EAAaC,EAAQ,qCAAsC,SAAS,EACpF,WAAYD,EAAaC,EAAQ,qCAAsC,SAAS,EAChF,qBAAsBD,EAAaC,EAAQ,mCAAoC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,2CAA4C,SAAS,EACtF,uBAAwBD,EACtBC,EACA,yCACA,SAAA,EAEF,mBAAoBD,EAAaC,EAAQ,qCAAsC,SAAS,EACxF,WAAYD,EAAaC,EAAQ,oCAAqC,SAAS,CAAA,CAEnF"}
@@ -1,5 +1,5 @@
1
1
  import { CHART_SERIES_COLOR_TOKENS as d, CHART_NEUTRAL_COLOR_TOKEN as a } from "./chart-palette.js";
2
- function s(t, o) {
2
+ function f(t, o) {
3
3
  const r = window.getComputedStyle(t).getPropertyValue(o).trim();
4
4
  return r === "" ? void 0 : r;
5
5
  }
@@ -7,7 +7,7 @@ function e(t, o, r) {
7
7
  const l = t.getPropertyValue(o).trim();
8
8
  return l === "" ? r : l;
9
9
  }
10
- function f(t) {
10
+ function n(t) {
11
11
  const o = window.getComputedStyle(t);
12
12
  return {
13
13
  seriesColors: d.map(
@@ -20,6 +20,8 @@ function f(t) {
20
20
  axisLineColor: e(o, "--sds-color-border-default-secondary", "#9ca3af"),
21
21
  splitLineColor: e(o, "--sds-color-border-default-default", "#e5e7eb"),
22
22
  labelColor: e(o, "--sds-color-text-default-secondary", "#6b7280"),
23
+ emphasizedLabelColor: e(o, "--sds-color-text-default-default", "#111827"),
24
+ trackColor: e(o, "--sds-color-background-default-secondary", "#f3f4f6"),
23
25
  tooltipBackgroundColor: e(
24
26
  o,
25
27
  "--sds-color-background-default-default",
@@ -30,7 +32,7 @@ function f(t) {
30
32
  };
31
33
  }
32
34
  export {
33
- f as readChartTheme,
34
- s as resolveColorToken
35
+ n as readChartTheme,
36
+ f as resolveColorToken
35
37
  };
36
38
  //# sourceMappingURL=chart-theme.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"chart-theme.js","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n seriesColors: string[];\n neutralColor: string;\n axisLineColor: string;\n splitLineColor: string;\n labelColor: string;\n tooltipBackgroundColor: string;\n tooltipBorderColor: string;\n fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n const value: string = styles.getPropertyValue(token).trim();\n return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n return {\n seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n resolveToken(styles, token, \"#4b5563\"),\n ),\n neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n // `secondary` para se separar da grade sem competir com as linhas.\n axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n tooltipBackgroundColor: resolveToken(\n styles,\n \"--sds-color-background-default-default\",\n \"#ffffff\",\n ),\n tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":";AAgBO,SAASA,EAAkBC,GAAsBC,GAAmC;AACzF,QAAMC,IAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA;AAC/E,SAAOC,MAAU,KAAK,SAAYA;AACpC;AAEA,SAASC,EAAaC,GAA6BH,GAAeI,GAA0B;AAC1F,QAAMH,IAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA;AACrD,SAAOC,MAAU,KAAKG,IAAWH;AACnC;AAEO,SAASI,EAAeN,GAAkC;AAC/D,QAAMI,IAA8B,OAAO,iBAAiBJ,CAAO;AACnE,SAAO;AAAA,IACL,cAAcO,EAA0B;AAAA,MAAI,CAACN,MAC3CE,EAAaC,GAAQH,GAAO,SAAS;AAAA,IAAA;AAAA,IAEvC,cAAcE,EAAaC,GAAQI,GAAqB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIjE,eAAeL,EAAaC,GAAQ,wCAAwC,SAAS;AAAA,IACrF,gBAAgBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACpF,YAAYD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IAChF,wBAAwBD;AAAA,MACtBC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,oBAAoBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,qCAAqC,SAAS;AAAA,EAAA;AAEnF;"}
1
+ {"version":3,"file":"chart-theme.js","sources":["../../../../../src/ui/components/charts/chart-theme.ts"],"sourcesContent":["import { CHART_SERIES_COLOR_TOKENS, CHART_NEUTRAL_COLOR_TOKEN as NEUTRAL_COLOR_TOKEN } from \"./chart-palette\";\n\nexport interface ChartTheme {\n seriesColors: string[];\n neutralColor: string;\n axisLineColor: string;\n splitLineColor: string;\n labelColor: string;\n emphasizedLabelColor: string;\n trackColor: string;\n tooltipBackgroundColor: string;\n tooltipBorderColor: string;\n fontFamily: string;\n}\n\n// O renderizador canvas não entende `var(--token)`, então a cor precisa chegar resolvida. A\n// resolução é contra o elemento hospedeiro para que tema aplicado em escopo menor que `:root`\n// continue valendo.\nexport function resolveColorToken(element: HTMLElement, token: string): string | undefined {\n const value: string = window.getComputedStyle(element).getPropertyValue(token).trim();\n return value === \"\" ? undefined : value;\n}\n\nfunction resolveToken(styles: CSSStyleDeclaration, token: string, fallback: string): string {\n const value: string = styles.getPropertyValue(token).trim();\n return value === \"\" ? fallback : value;\n}\n\nexport function readChartTheme(element: HTMLElement): ChartTheme {\n const styles: CSSStyleDeclaration = window.getComputedStyle(element);\n return {\n seriesColors: CHART_SERIES_COLOR_TOKENS.map((token: string) =>\n resolveToken(styles, token, \"#4b5563\"),\n ),\n neutralColor: resolveToken(styles, NEUTRAL_COLOR_TOKEN, \"#9ca3af\"),\n // A escala de borda deste tema vai do claro para o escuro: `tertiary` é a mais escura,\n // não a mais suave. A grade fica na `default` para ficar atrás do dado, e o eixo na\n // `secondary` para se separar da grade sem competir com as linhas.\n axisLineColor: resolveToken(styles, \"--sds-color-border-default-secondary\", \"#9ca3af\"),\n splitLineColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#e5e7eb\"),\n labelColor: resolveToken(styles, \"--sds-color-text-default-secondary\", \"#6b7280\"),\n emphasizedLabelColor: resolveToken(styles, \"--sds-color-text-default-default\", \"#111827\"),\n trackColor: resolveToken(styles, \"--sds-color-background-default-secondary\", \"#f3f4f6\"),\n tooltipBackgroundColor: resolveToken(\n styles,\n \"--sds-color-background-default-default\",\n \"#ffffff\",\n ),\n tooltipBorderColor: resolveToken(styles, \"--sds-color-border-default-default\", \"#d1d5db\"),\n fontFamily: resolveToken(styles, \"--sds-typography-body-font-family\", \"inherit\"),\n };\n}\n"],"names":["resolveColorToken","element","token","value","resolveToken","styles","fallback","readChartTheme","CHART_SERIES_COLOR_TOKENS","NEUTRAL_COLOR_TOKEN"],"mappings":";AAkBO,SAASA,EAAkBC,GAAsBC,GAAmC;AACzF,QAAMC,IAAgB,OAAO,iBAAiBF,CAAO,EAAE,iBAAiBC,CAAK,EAAE,KAAA;AAC/E,SAAOC,MAAU,KAAK,SAAYA;AACpC;AAEA,SAASC,EAAaC,GAA6BH,GAAeI,GAA0B;AAC1F,QAAMH,IAAgBE,EAAO,iBAAiBH,CAAK,EAAE,KAAA;AACrD,SAAOC,MAAU,KAAKG,IAAWH;AACnC;AAEO,SAASI,EAAeN,GAAkC;AAC/D,QAAMI,IAA8B,OAAO,iBAAiBJ,CAAO;AACnE,SAAO;AAAA,IACL,cAAcO,EAA0B;AAAA,MAAI,CAACN,MAC3CE,EAAaC,GAAQH,GAAO,SAAS;AAAA,IAAA;AAAA,IAEvC,cAAcE,EAAaC,GAAQI,GAAqB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIjE,eAAeL,EAAaC,GAAQ,wCAAwC,SAAS;AAAA,IACrF,gBAAgBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACpF,YAAYD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IAChF,sBAAsBD,EAAaC,GAAQ,oCAAoC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,4CAA4C,SAAS;AAAA,IACtF,wBAAwBD;AAAA,MACtBC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,oBAAoBD,EAAaC,GAAQ,sCAAsC,SAAS;AAAA,IACxF,YAAYD,EAAaC,GAAQ,qCAAqC,SAAS;AAAA,EAAA;AAEnF;"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("../../../vendor/clsx/dist/clsx.cjs"),t=require("react-aria-components");;/* empty css */const m=require("../../icons/IconX.cjs"),r=require("../Text/Text.cjs"),c=require("../IconButton/IconButton.cjs"),j=require("../Button/Button.cjs"),N=require("../../hooks/useOverlayPortal.cjs");function u({className:o,type:e="card",...a}){const i=l.clsx(o,"dialog",`dialog-type-${e}`);return s.jsx(t.Dialog,{className:i,...a})}const y=({onPress:o})=>s.jsx(c.IconButton,{className:"dialog-close","aria-label":"Dismiss dialog",onPress:o,variant:"subtle",size:"small",children:s.jsx(m.IconX,{})});function g({...o}){return s.jsx(t.DialogTrigger,{...o})}function B({label:o,icon:e,variant:a,children:i,...n}){return s.jsxs(g,{children:[e?s.jsx(c.IconButton,{variant:a,"aria-label":o,children:e}):s.jsx(j.Button,{variant:a,children:o}),s.jsx(d,{isDismissable:!0,children:s.jsx(u,{...n,children:i})})]})}function T({className:o,...e}){const a=l.clsx(o,"dialog-title");return s.jsx(r.TextHeading,{...e,slot:"title",className:a})}function b({className:o,...e}){const a=l.clsx(o,"dialog-description");return s.jsx(r.Text,{...e,className:a})}function p({bleed:o,className:e,...a}){const i=l.clsx(e,"dialog-body",o&&"dialog-body-bleed");return s.jsx("div",{...a,className:i})}function d({children:o,className:e,isDismissable:a,UNSTABLE_portalContainer:i,...n}){const x=l.clsx(e,"dialog-backdrop"),D=N.useOverlayPortalContainer();return s.jsx(t.ModalOverlay,{className:x,isDismissable:a,...n,UNSTABLE_portalContainer:i??D,children:s.jsx(t.Modal,{className:"dialog-container",children:o})})}exports.Dialog=u;exports.DialogBody=p;exports.DialogButton=B;exports.DialogClose=y;exports.DialogDescription=b;exports.DialogModal=d;exports.DialogTitle=T;exports.DialogTrigger=g;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../vendor/clsx/dist/clsx.cjs"),n=require("react-aria-components");;/* empty css */const m=require("../../icons/IconX.cjs"),r=require("../Text/Text.cjs"),c=require("../IconButton/IconButton.cjs"),j=require("../Button/Button.cjs"),N=require("../../hooks/useOverlayPortal.cjs");function u({className:o,type:s="card",size:i="medium",...a}){const l=t.clsx(o,"dialog",`dialog-type-${s}`,`dialog-size-${i}`);return e.jsx(n.Dialog,{className:l,...a})}const y=({onPress:o})=>e.jsx(c.IconButton,{className:"dialog-close","aria-label":"Dismiss dialog",onPress:o,variant:"subtle",size:"small",children:e.jsx(m.IconX,{})});function g({...o}){return e.jsx(n.DialogTrigger,{...o})}function B({label:o,icon:s,variant:i,children:a,...l}){return e.jsxs(g,{children:[s?e.jsx(c.IconButton,{variant:i,"aria-label":o,children:s}):e.jsx(j.Button,{variant:i,children:o}),e.jsx(d,{isDismissable:!0,children:e.jsx(u,{...l,children:a})})]})}function T({className:o,...s}){const i=t.clsx(o,"dialog-title");return e.jsx(r.TextHeading,{...s,slot:"title",className:i})}function b({className:o,...s}){const i=t.clsx(o,"dialog-description");return e.jsx(r.Text,{...s,className:i})}function p({bleed:o,className:s,...i}){const a=t.clsx(s,"dialog-body",o&&"dialog-body-bleed");return e.jsx("div",{...i,className:a})}function d({children:o,className:s,isDismissable:i,UNSTABLE_portalContainer:a,...l}){const x=t.clsx(s,"dialog-backdrop"),D=N.useOverlayPortalContainer();return e.jsx(n.ModalOverlay,{className:x,isDismissable:i,...l,UNSTABLE_portalContainer:a??D,children:e.jsx(n.Modal,{className:"dialog-container",children:o})})}exports.Dialog=u;exports.DialogBody=p;exports.DialogButton=B;exports.DialogClose=y;exports.DialogDescription=b;exports.DialogModal=d;exports.DialogTitle=T;exports.DialogTrigger=g;
2
2
  //# sourceMappingURL=Dialog.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.cjs","sources":["../../../../../src/ui/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconX } from \"icons\";\nimport {\n Button,\n ButtonProps,\n IconButton,\n IconButtonProps,\n Text,\n TextHeading,\n type TextHeadingProps,\n type TextProps,\n} from \"primitives\";\nimport {\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n type DialogProps as RACDialogProps,\n type DialogTriggerProps as RACDialogTriggerProps,\n type ModalOverlayProps as RACModalOverlayProps,\n} from \"react-aria-components\";\nimport \"./dialog.css\";\n\nexport type DialogProps = RACDialogProps & {\n type?: \"sheet\" | \"card\";\n};\nexport function Dialog({ className, type = \"card\", ...props }: DialogProps) {\n const classNames = clsx(className, \"dialog\", `dialog-type-${type}`);\n return <RACDialog className={classNames} {...props} />;\n}\n\nexport type DialogCloseProps = Pick<IconButtonProps, \"onPress\">;\nexport const DialogClose = ({ onPress }: DialogCloseProps) => (\n <IconButton\n className=\"dialog-close\"\n aria-label=\"Dismiss dialog\"\n onPress={onPress}\n variant=\"subtle\"\n size=\"small\"\n >\n <IconX />\n </IconButton>\n);\n\nexport type DialogTriggerProps = RACDialogTriggerProps;\nexport function DialogTrigger({ ...props }: DialogTriggerProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nexport interface DialogButtonProps\n extends DialogProps,\n Omit<DialogTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n icon?: React.ReactNode;\n}\nexport function DialogButton({\n label,\n icon,\n variant,\n children,\n ...props\n}: DialogButtonProps) {\n return (\n <DialogTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <DialogModal isDismissable>\n <Dialog {...props}>{children}</Dialog>\n </DialogModal>\n </DialogTrigger>\n );\n}\n\nexport type DialogTitleProps = TextHeadingProps;\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n const classNames = clsx(className, \"dialog-title\");\n return <TextHeading {...props} slot=\"title\" className={classNames} />;\n}\n\nexport type DialogDescriptionProps = TextProps;\nexport function DialogDescription({\n className,\n ...props\n}: DialogDescriptionProps) {\n const classNames = clsx(className, \"dialog-description\");\n return <Text {...props} className={classNames} />;\n}\n\nexport type DialogBodyProps = {\n bleed?: boolean;\n} & React.ComponentPropsWithoutRef<\"div\">;\nexport function DialogBody({ bleed, className, ...props }: DialogBodyProps) {\n const classNames = clsx(\n className,\n \"dialog-body\",\n bleed && \"dialog-body-bleed\",\n );\n return <div {...props} className={classNames} />;\n}\n\nexport type DialogModalProps = RACModalOverlayProps;\nexport function DialogModal({\n children,\n className,\n isDismissable,\n UNSTABLE_portalContainer,\n ...props\n}: DialogModalProps) {\n const classNames = clsx(className, \"dialog-backdrop\");\n // Sem um container explícito, o RAC faz portal no document.body — fora da\n // shadow root do MFE, onde o CSS do DS não alcança, e o dialog abre sem\n // estilo. Ver OverlayPortalProvider em ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACModalOverlay\n className={classNames}\n isDismissable={isDismissable}\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n >\n <RACModal className={\"dialog-container\"}>{children}</RACModal>\n </RACModalOverlay>\n );\n}\n"],"names":["Dialog","className","type","props","classNames","clsx","jsx","RACDialog","DialogClose","onPress","IconButton","IconX","DialogTrigger","RACDialogTrigger","DialogButton","label","icon","variant","children","Button","DialogModal","DialogTitle","TextHeading","DialogDescription","Text","DialogBody","bleed","isDismissable","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACModalOverlay","RACModal"],"mappings":"qaA2BO,SAASA,EAAO,CAAE,UAAAC,EAAW,KAAAC,EAAO,OAAQ,GAAGC,GAAsB,CAC1E,MAAMC,EAAaC,EAAAA,KAAKJ,EAAW,SAAU,eAAeC,CAAI,EAAE,EAClE,OAAOI,EAAAA,IAACC,EAAAA,OAAA,CAAU,UAAWH,EAAa,GAAGD,EAAO,CACtD,CAGO,MAAMK,EAAc,CAAC,CAAE,QAAAC,CAAA,IAC5BH,EAAAA,IAACI,EAAAA,WAAA,CACC,UAAU,eACV,aAAW,iBACX,QAAAD,EACA,QAAQ,SACR,KAAK,QAEL,eAACE,EAAAA,MAAA,CAAA,CAAM,CAAA,CACT,EAIK,SAASC,EAAc,CAAE,GAAGT,GAA6B,CAC9D,OAAOG,MAACO,EAAAA,cAAA,CAAkB,GAAGV,CAAA,CAAO,CACtC,CASO,SAASW,EAAa,CAC3B,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGf,CACL,EAAsB,CACpB,cACGS,EAAA,CACE,SAAA,CAAAI,EACCV,EAAAA,IAACI,EAAAA,WAAA,CAAW,QAAAO,EAAkB,aAAYF,EACvC,WACH,EAEAT,EAAAA,IAACa,EAAAA,OAAA,CAAO,QAAAF,EAAmB,SAAAF,EAAM,EAEnCT,EAAAA,IAACc,GAAY,cAAa,GACxB,eAACpB,EAAA,CAAQ,GAAGG,EAAQ,SAAAe,CAAA,CAAS,CAAA,CAC/B,CAAA,EACF,CAEJ,CAGO,SAASG,EAAY,CAAE,UAAApB,EAAW,GAAGE,GAA2B,CACrE,MAAMC,EAAaC,EAAAA,KAAKJ,EAAW,cAAc,EACjD,aAAQqB,EAAAA,YAAA,CAAa,GAAGnB,EAAO,KAAK,QAAQ,UAAWC,EAAY,CACrE,CAGO,SAASmB,EAAkB,CAChC,UAAAtB,EACA,GAAGE,CACL,EAA2B,CACzB,MAAMC,EAAaC,EAAAA,KAAKJ,EAAW,oBAAoB,EACvD,OAAOK,EAAAA,IAACkB,EAAAA,KAAA,CAAM,GAAGrB,EAAO,UAAWC,EAAY,CACjD,CAKO,SAASqB,EAAW,CAAE,MAAAC,EAAO,UAAAzB,EAAW,GAAGE,GAA0B,CAC1E,MAAMC,EAAaC,EAAAA,KACjBJ,EACA,cACAyB,GAAS,mBAAA,EAEX,OAAOpB,EAAAA,IAAC,MAAA,CAAK,GAAGH,EAAO,UAAWC,EAAY,CAChD,CAGO,SAASgB,EAAY,CAC1B,SAAAF,EACA,UAAAjB,EACA,cAAA0B,EACA,yBAAAC,EACA,GAAGzB,CACL,EAAqB,CACnB,MAAMC,EAAaC,EAAAA,KAAKJ,EAAW,iBAAiB,EAI9C4B,EAAkBC,EAAAA,0BAAA,EACxB,OACExB,EAAAA,IAACyB,EAAAA,aAAA,CACC,UAAW3B,EACX,cAAAuB,EACC,GAAGxB,EACJ,yBAA0ByB,GAA4BC,EAEtD,SAAAvB,EAAAA,IAAC0B,EAAAA,MAAA,CAAS,UAAW,mBAAqB,SAAAd,CAAA,CAAS,CAAA,CAAA,CAGzD"}
1
+ {"version":3,"file":"Dialog.cjs","sources":["../../../../../src/ui/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconX } from \"icons\";\nimport {\n Button,\n ButtonProps,\n IconButton,\n IconButtonProps,\n Text,\n TextHeading,\n type TextHeadingProps,\n type TextProps,\n} from \"primitives\";\nimport {\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n type DialogProps as RACDialogProps,\n type DialogTriggerProps as RACDialogTriggerProps,\n type ModalOverlayProps as RACModalOverlayProps,\n} from \"react-aria-components\";\nimport \"./dialog.css\";\n\nexport type DialogSize = \"medium\" | \"large\" | \"xlarge\";\n\nexport type DialogProps = RACDialogProps & {\n type?: \"sheet\" | \"card\";\n size?: DialogSize;\n};\nexport function Dialog({\n className,\n type = \"card\",\n size = \"medium\",\n ...props\n}: DialogProps) {\n const classNames = clsx(\n className,\n \"dialog\",\n `dialog-type-${type}`,\n `dialog-size-${size}`,\n );\n return <RACDialog className={classNames} {...props} />;\n}\n\nexport type DialogCloseProps = Pick<IconButtonProps, \"onPress\">;\nexport const DialogClose = ({ onPress }: DialogCloseProps) => (\n <IconButton\n className=\"dialog-close\"\n aria-label=\"Dismiss dialog\"\n onPress={onPress}\n variant=\"subtle\"\n size=\"small\"\n >\n <IconX />\n </IconButton>\n);\n\nexport type DialogTriggerProps = RACDialogTriggerProps;\nexport function DialogTrigger({ ...props }: DialogTriggerProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nexport interface DialogButtonProps\n extends DialogProps,\n Omit<DialogTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n icon?: React.ReactNode;\n}\nexport function DialogButton({\n label,\n icon,\n variant,\n children,\n ...props\n}: DialogButtonProps) {\n return (\n <DialogTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <DialogModal isDismissable>\n <Dialog {...props}>{children}</Dialog>\n </DialogModal>\n </DialogTrigger>\n );\n}\n\nexport type DialogTitleProps = TextHeadingProps;\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n const classNames = clsx(className, \"dialog-title\");\n return <TextHeading {...props} slot=\"title\" className={classNames} />;\n}\n\nexport type DialogDescriptionProps = TextProps;\nexport function DialogDescription({\n className,\n ...props\n}: DialogDescriptionProps) {\n const classNames = clsx(className, \"dialog-description\");\n return <Text {...props} className={classNames} />;\n}\n\nexport type DialogBodyProps = {\n bleed?: boolean;\n} & React.ComponentPropsWithoutRef<\"div\">;\nexport function DialogBody({ bleed, className, ...props }: DialogBodyProps) {\n const classNames = clsx(\n className,\n \"dialog-body\",\n bleed && \"dialog-body-bleed\",\n );\n return <div {...props} className={classNames} />;\n}\n\nexport type DialogModalProps = RACModalOverlayProps;\nexport function DialogModal({\n children,\n className,\n isDismissable,\n UNSTABLE_portalContainer,\n ...props\n}: DialogModalProps) {\n const classNames = clsx(className, \"dialog-backdrop\");\n // Sem um container explícito, o RAC faz portal no document.body — fora da\n // shadow root do MFE, onde o CSS do DS não alcança, e o dialog abre sem\n // estilo. Ver OverlayPortalProvider em ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACModalOverlay\n className={classNames}\n isDismissable={isDismissable}\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n >\n <RACModal className={\"dialog-container\"}>{children}</RACModal>\n </RACModalOverlay>\n );\n}\n"],"names":["Dialog","className","type","size","props","classNames","clsx","jsx","RACDialog","DialogClose","onPress","IconButton","IconX","DialogTrigger","RACDialogTrigger","DialogButton","label","icon","variant","children","Button","DialogModal","DialogTitle","TextHeading","DialogDescription","Text","DialogBody","bleed","isDismissable","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACModalOverlay","RACModal"],"mappings":"qaA8BO,SAASA,EAAO,CACrB,UAAAC,EACA,KAAAC,EAAO,OACP,KAAAC,EAAO,SACP,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAaC,EAAAA,KACjBL,EACA,SACA,eAAeC,CAAI,GACnB,eAAeC,CAAI,EAAA,EAErB,OAAOI,EAAAA,IAACC,EAAAA,OAAA,CAAU,UAAWH,EAAa,GAAGD,EAAO,CACtD,CAGO,MAAMK,EAAc,CAAC,CAAE,QAAAC,CAAA,IAC5BH,EAAAA,IAACI,EAAAA,WAAA,CACC,UAAU,eACV,aAAW,iBACX,QAAAD,EACA,QAAQ,SACR,KAAK,QAEL,eAACE,EAAAA,MAAA,CAAA,CAAM,CAAA,CACT,EAIK,SAASC,EAAc,CAAE,GAAGT,GAA6B,CAC9D,OAAOG,MAACO,EAAAA,cAAA,CAAkB,GAAGV,CAAA,CAAO,CACtC,CASO,SAASW,EAAa,CAC3B,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGf,CACL,EAAsB,CACpB,cACGS,EAAA,CACE,SAAA,CAAAI,EACCV,EAAAA,IAACI,EAAAA,WAAA,CAAW,QAAAO,EAAkB,aAAYF,EACvC,WACH,EAEAT,EAAAA,IAACa,EAAAA,OAAA,CAAO,QAAAF,EAAmB,SAAAF,EAAM,EAEnCT,EAAAA,IAACc,GAAY,cAAa,GACxB,eAACrB,EAAA,CAAQ,GAAGI,EAAQ,SAAAe,CAAA,CAAS,CAAA,CAC/B,CAAA,EACF,CAEJ,CAGO,SAASG,EAAY,CAAE,UAAArB,EAAW,GAAGG,GAA2B,CACrE,MAAMC,EAAaC,EAAAA,KAAKL,EAAW,cAAc,EACjD,aAAQsB,EAAAA,YAAA,CAAa,GAAGnB,EAAO,KAAK,QAAQ,UAAWC,EAAY,CACrE,CAGO,SAASmB,EAAkB,CAChC,UAAAvB,EACA,GAAGG,CACL,EAA2B,CACzB,MAAMC,EAAaC,EAAAA,KAAKL,EAAW,oBAAoB,EACvD,OAAOM,EAAAA,IAACkB,EAAAA,KAAA,CAAM,GAAGrB,EAAO,UAAWC,EAAY,CACjD,CAKO,SAASqB,EAAW,CAAE,MAAAC,EAAO,UAAA1B,EAAW,GAAGG,GAA0B,CAC1E,MAAMC,EAAaC,EAAAA,KACjBL,EACA,cACA0B,GAAS,mBAAA,EAEX,OAAOpB,EAAAA,IAAC,MAAA,CAAK,GAAGH,EAAO,UAAWC,EAAY,CAChD,CAGO,SAASgB,EAAY,CAC1B,SAAAF,EACA,UAAAlB,EACA,cAAA2B,EACA,yBAAAC,EACA,GAAGzB,CACL,EAAqB,CACnB,MAAMC,EAAaC,EAAAA,KAAKL,EAAW,iBAAiB,EAI9C6B,EAAkBC,EAAAA,0BAAA,EACxB,OACExB,EAAAA,IAACyB,EAAAA,aAAA,CACC,UAAW3B,EACX,cAAAuB,EACC,GAAGxB,EACJ,yBAA0ByB,GAA4BC,EAEtD,SAAAvB,EAAAA,IAAC0B,EAAAA,MAAA,CAAS,UAAW,mBAAqB,SAAAd,CAAA,CAAS,CAAA,CAAA,CAGzD"}