panelui-native 0.40.0 → 0.43.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/README.md +4 -2
- package/lib/module/components/card/index.js +172 -3
- package/lib/module/components/card/index.js.map +1 -1
- package/lib/module/components/color-picker/index.js +1395 -0
- package/lib/module/components/color-picker/index.js.map +1 -0
- package/lib/module/components/combobox/index.js +87 -19
- package/lib/module/components/combobox/index.js.map +1 -1
- package/lib/module/components/drawer/index.js +13 -4
- package/lib/module/components/drawer/index.js.map +1 -1
- package/lib/module/components/kpi-chart/index.js +648 -0
- package/lib/module/components/kpi-chart/index.js.map +1 -0
- package/lib/module/components/map/index.js +72 -12
- package/lib/module/components/map/index.js.map +1 -1
- package/lib/module/components/menu/index.js +40 -10
- package/lib/module/components/menu/index.js.map +1 -1
- package/lib/module/components/pagination/index.js +19 -9
- package/lib/module/components/pagination/index.js.map +1 -1
- package/lib/module/components/panelside/index.js +68 -18
- package/lib/module/components/panelside/index.js.map +1 -1
- package/lib/module/components/radar-chart/index.js +704 -0
- package/lib/module/components/radar-chart/index.js.map +1 -0
- package/lib/module/components/section-rail/index.js +32 -7
- package/lib/module/components/section-rail/index.js.map +1 -1
- package/lib/module/components/slider/index.js +240 -39
- package/lib/module/components/slider/index.js.map +1 -1
- package/lib/module/components/tabs/index.js +194 -10
- package/lib/module/components/tabs/index.js.map +1 -1
- package/lib/module/components/text-animation/index.js +857 -0
- package/lib/module/components/text-animation/index.js.map +1 -0
- package/lib/module/icons/index.js +25 -7
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +5 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/theme/use-theme.js +1 -1
- package/lib/module/utils/chart.js +44 -0
- package/lib/module/utils/chart.js.map +1 -1
- package/lib/module/utils/color.js +268 -0
- package/lib/module/utils/color.js.map +1 -0
- package/lib/typescript/src/components/card/index.d.ts +20 -0
- package/lib/typescript/src/components/card/index.d.ts.map +1 -1
- package/lib/typescript/src/components/color-picker/index.d.ts +258 -0
- package/lib/typescript/src/components/color-picker/index.d.ts.map +1 -0
- package/lib/typescript/src/components/combobox/index.d.ts.map +1 -1
- package/lib/typescript/src/components/drawer/index.d.ts +13 -1
- package/lib/typescript/src/components/drawer/index.d.ts.map +1 -1
- package/lib/typescript/src/components/kpi-chart/index.d.ts +490 -0
- package/lib/typescript/src/components/kpi-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/map/index.d.ts +37 -2
- package/lib/typescript/src/components/map/index.d.ts.map +1 -1
- package/lib/typescript/src/components/menu/index.d.ts.map +1 -1
- package/lib/typescript/src/components/pagination/index.d.ts.map +1 -1
- package/lib/typescript/src/components/panelside/index.d.ts +50 -4
- package/lib/typescript/src/components/panelside/index.d.ts.map +1 -1
- package/lib/typescript/src/components/radar-chart/index.d.ts +214 -0
- package/lib/typescript/src/components/radar-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/section-rail/index.d.ts +8 -1
- package/lib/typescript/src/components/section-rail/index.d.ts.map +1 -1
- package/lib/typescript/src/components/slider/index.d.ts +19 -0
- package/lib/typescript/src/components/slider/index.d.ts.map +1 -1
- package/lib/typescript/src/components/tabs/index.d.ts +11 -1
- package/lib/typescript/src/components/tabs/index.d.ts.map +1 -1
- package/lib/typescript/src/components/text-animation/index.d.ts +268 -0
- package/lib/typescript/src/components/text-animation/index.d.ts.map +1 -0
- package/lib/typescript/src/icons/index.d.ts +6 -0
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +8 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/chart.d.ts +21 -0
- package/lib/typescript/src/utils/chart.d.ts.map +1 -1
- package/lib/typescript/src/utils/color.d.ts +74 -0
- package/lib/typescript/src/utils/color.d.ts.map +1 -0
- package/package.json +2 -1
- package/src/components/card/index.tsx +227 -2
- package/src/components/color-picker/index.tsx +1618 -0
- package/src/components/combobox/index.tsx +89 -19
- package/src/components/drawer/index.tsx +31 -9
- package/src/components/kpi-chart/index.tsx +719 -0
- package/src/components/map/index.tsx +158 -14
- package/src/components/menu/index.tsx +51 -6
- package/src/components/pagination/index.tsx +18 -6
- package/src/components/panelside/index.tsx +134 -19
- package/src/components/radar-chart/index.tsx +910 -0
- package/src/components/section-rail/index.tsx +42 -8
- package/src/components/slider/index.tsx +283 -41
- package/src/components/tabs/index.tsx +263 -8
- package/src/components/text-animation/index.tsx +1093 -0
- package/src/icons/index.tsx +23 -4
- package/src/index.ts +73 -1
- package/src/theme/use-theme.ts +1 -1
- package/src/utils/chart.ts +52 -0
- package/src/utils/color.ts +246 -0
- package/theme.css +125 -112
|
@@ -0,0 +1,648 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* KpiChart — one number, and what it is doing.
|
|
5
|
+
*
|
|
6
|
+
* A metric card is not a chart with a caption. The number is the message and
|
|
7
|
+
* the chart is the footnote, so the parts here are sized and ordered around
|
|
8
|
+
* that: a title that stays quiet, a value that does not, a trend that says
|
|
9
|
+
* which way and by how much, and a sparkline that is allowed to be small
|
|
10
|
+
* because nobody is reading values off it.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <KpiChart>
|
|
14
|
+
* <KpiChart.Header>
|
|
15
|
+
* <KpiChart.Title>Active users</KpiChart.Title>
|
|
16
|
+
* </KpiChart.Header>
|
|
17
|
+
* <KpiChart.Content>
|
|
18
|
+
* <KpiChart.Value>12,480</KpiChart.Value>
|
|
19
|
+
* <KpiChart.Trend value={12.4} />
|
|
20
|
+
* </KpiChart.Content>
|
|
21
|
+
* <KpiChart.Chart data={week} dataKey="v" />
|
|
22
|
+
* </KpiChart>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* The trend is given a number rather than a written string, so the component
|
|
26
|
+
* decides the direction and the colour rather than the call site remembering
|
|
27
|
+
* to keep a minus sign and a red in step. Where a rise is the bad news —
|
|
28
|
+
* churn, latency, cost — say so with `goodDirection="down"` and the colour
|
|
29
|
+
* follows the meaning instead of the sign.
|
|
30
|
+
*/
|
|
31
|
+
import { createContext, forwardRef, useContext, useMemo } from 'react';
|
|
32
|
+
import { View } from 'react-native';
|
|
33
|
+
import { ArrowDown, ArrowUp, Minus } from 'lucide-react-native';
|
|
34
|
+
import { tv } from 'tailwind-variants';
|
|
35
|
+
import { useCSSVariable } from 'uniwind';
|
|
36
|
+
import { Text } from "../../primitives/text.js";
|
|
37
|
+
import { cn } from "../../utils/cn.js";
|
|
38
|
+
import { LineChart } from "../line-chart/index.js";
|
|
39
|
+
import { Progress } from "../progress/index.js";
|
|
40
|
+
import { Surface } from "../surface/index.js";
|
|
41
|
+
|
|
42
|
+
/** Height of the sparkline when nothing else is said. */
|
|
43
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
44
|
+
const CHART_HEIGHT = 56;
|
|
45
|
+
/**
|
|
46
|
+
* …and its box beside the number, which is fixed rather than shared out.
|
|
47
|
+
*
|
|
48
|
+
* A column of stat cards has labels of every length — "Revenue" over "New
|
|
49
|
+
* customers" — and a chart taking whatever the text leaves would be a
|
|
50
|
+
* different width on every card in the stack. Fixed, the shapes line up down
|
|
51
|
+
* the right-hand edge and the eye can compare them, which is the only reason
|
|
52
|
+
* they are there.
|
|
53
|
+
*/
|
|
54
|
+
const INLINE_CHART_WIDTH = 128;
|
|
55
|
+
const INLINE_CHART_HEIGHT = 56;
|
|
56
|
+
/** Width ÷ height of the sparkline in that box. */
|
|
57
|
+
const INLINE_ASPECT = 2.3;
|
|
58
|
+
|
|
59
|
+
/** The arrow in a trend badge. Small — it is a direction, not an icon. */
|
|
60
|
+
const TREND_ICON = 12;
|
|
61
|
+
const TREND_STROKE = 2.5;
|
|
62
|
+
const kpiVariants = tv({
|
|
63
|
+
slots: {
|
|
64
|
+
root: 'w-full gap-2',
|
|
65
|
+
header: 'flex-row items-center gap-2',
|
|
66
|
+
icon: 'h-8 w-8 items-center justify-center rounded-xl',
|
|
67
|
+
title: 'text-sm font-medium text-muted-foreground',
|
|
68
|
+
content: 'flex-row items-end justify-between gap-3',
|
|
69
|
+
value: 'text-2xl font-bold text-foreground',
|
|
70
|
+
/** The stacked title/value/trend block, tight enough to read as one thing. */
|
|
71
|
+
stat: 'flex-1 gap-1',
|
|
72
|
+
trend: 'flex-row items-center gap-1',
|
|
73
|
+
trendLabel: 'font-medium',
|
|
74
|
+
footer: 'flex-row items-center gap-2',
|
|
75
|
+
separator: 'h-px w-full bg-border',
|
|
76
|
+
group: 'w-full',
|
|
77
|
+
groupSeparator: 'bg-border'
|
|
78
|
+
},
|
|
79
|
+
variants: {
|
|
80
|
+
/**
|
|
81
|
+
* Which way the number moved, *after* the metric's own polarity has been
|
|
82
|
+
* applied — so `good` is green whether it went up or down.
|
|
83
|
+
*/
|
|
84
|
+
tone: {
|
|
85
|
+
good: {
|
|
86
|
+
trendLabel: 'text-success',
|
|
87
|
+
icon: 'bg-success-subtle'
|
|
88
|
+
},
|
|
89
|
+
bad: {
|
|
90
|
+
trendLabel: 'text-destructive',
|
|
91
|
+
icon: 'bg-destructive-subtle'
|
|
92
|
+
},
|
|
93
|
+
flat: {
|
|
94
|
+
trendLabel: 'text-muted-foreground',
|
|
95
|
+
icon: 'bg-muted'
|
|
96
|
+
},
|
|
97
|
+
neutral: {
|
|
98
|
+
trendLabel: 'text-muted-foreground',
|
|
99
|
+
icon: 'bg-secondary'
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
/**
|
|
103
|
+
* How the change is drawn.
|
|
104
|
+
*
|
|
105
|
+
* `text` is the quieter of the two and the default: a line of colour under
|
|
106
|
+
* the number, which is where the eye already is. `badge` puts a pill round
|
|
107
|
+
* it for a card dense enough that a bare line of colour gets lost.
|
|
108
|
+
*/
|
|
109
|
+
trendVariant: {
|
|
110
|
+
text: {
|
|
111
|
+
trend: 'gap-0.5',
|
|
112
|
+
trendLabel: 'text-sm'
|
|
113
|
+
},
|
|
114
|
+
badge: {
|
|
115
|
+
trend: 'rounded-full px-2 py-0.5',
|
|
116
|
+
trendLabel: 'text-xs'
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
/** Where the chart sits relative to the number. */
|
|
120
|
+
layout: {
|
|
121
|
+
/** Under everything, full width. The chart is a footnote. */
|
|
122
|
+
below: {},
|
|
123
|
+
/**
|
|
124
|
+
* Beside the number: the text takes the width and the chart takes a
|
|
125
|
+
* fixed column on the end. The number is read first and the shape
|
|
126
|
+
* second, which is the order they sit in — so this is the shape a stat
|
|
127
|
+
* card wants, and `below` is for a chart big enough to be looked at.
|
|
128
|
+
*/
|
|
129
|
+
inline: {
|
|
130
|
+
content: 'items-center gap-4'
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
compoundVariants: [{
|
|
135
|
+
trendVariant: 'badge',
|
|
136
|
+
tone: 'good',
|
|
137
|
+
class: {
|
|
138
|
+
trend: 'bg-success-subtle'
|
|
139
|
+
}
|
|
140
|
+
}, {
|
|
141
|
+
trendVariant: 'badge',
|
|
142
|
+
tone: 'bad',
|
|
143
|
+
class: {
|
|
144
|
+
trend: 'bg-destructive-subtle'
|
|
145
|
+
}
|
|
146
|
+
}, {
|
|
147
|
+
trendVariant: 'badge',
|
|
148
|
+
tone: 'flat',
|
|
149
|
+
class: {
|
|
150
|
+
trend: 'bg-muted'
|
|
151
|
+
}
|
|
152
|
+
}, {
|
|
153
|
+
trendVariant: 'badge',
|
|
154
|
+
tone: 'neutral',
|
|
155
|
+
class: {
|
|
156
|
+
trend: 'bg-muted'
|
|
157
|
+
}
|
|
158
|
+
}],
|
|
159
|
+
defaultVariants: {
|
|
160
|
+
tone: 'neutral',
|
|
161
|
+
trendVariant: 'text',
|
|
162
|
+
layout: 'below'
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
/** How a trend is coloured once the metric's polarity has been applied. */
|
|
167
|
+
|
|
168
|
+
/** Which direction of movement is the good news for this metric. */
|
|
169
|
+
|
|
170
|
+
const KpiChartContext = /*#__PURE__*/createContext(null);
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Whether the part rendering is inside `KpiChart.Header`.
|
|
174
|
+
*
|
|
175
|
+
* `Title` is the only part that cares, and it cares a great deal. In a header
|
|
176
|
+
* it is one of several things on a row and has to take the space between the
|
|
177
|
+
* icon and the actions, so it grows. Written straight into the card it is one
|
|
178
|
+
* of several things in a *column* — and a growing child of a column absorbs
|
|
179
|
+
* the leftover height, which pushes the number under it down by however much
|
|
180
|
+
* that card had spare. Three of those side by side is three numbers at three
|
|
181
|
+
* different heights, which is exactly what a row of metrics must not be.
|
|
182
|
+
*/
|
|
183
|
+
const KpiHeaderContext = /*#__PURE__*/createContext(false);
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* Whether the part rendering is inside `KpiChart.Stat`.
|
|
187
|
+
*
|
|
188
|
+
* `Trend` is the one that cares. `self-center` on a flex child means "centre
|
|
189
|
+
* on the cross axis", and the cross axis is not the same axis in the two
|
|
190
|
+
* places a trend is put: in a row it is vertical, which is what a badge on the
|
|
191
|
+
* end of a header wants, and in the stat column it is *horizontal* — which
|
|
192
|
+
* indents the change by half whatever width it did not use, so two rows with
|
|
193
|
+
* captions of different lengths start at two different places.
|
|
194
|
+
*/
|
|
195
|
+
const KpiStatContext = /*#__PURE__*/createContext(false);
|
|
196
|
+
function useKpiChart(part) {
|
|
197
|
+
const context = useContext(KpiChartContext);
|
|
198
|
+
if (!context) throw new Error(`${part} must be used inside <KpiChart>.`);
|
|
199
|
+
return context;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* ------------------------------------------------------------------ *
|
|
203
|
+
* Root.
|
|
204
|
+
* ------------------------------------------------------------------ */
|
|
205
|
+
|
|
206
|
+
const KpiChartRoot = /*#__PURE__*/forwardRef(function KpiChartRoot({
|
|
207
|
+
className,
|
|
208
|
+
colorIndex = 1,
|
|
209
|
+
goodDirection = 'up',
|
|
210
|
+
surface = true,
|
|
211
|
+
children,
|
|
212
|
+
...props
|
|
213
|
+
}, ref) {
|
|
214
|
+
const {
|
|
215
|
+
root
|
|
216
|
+
} = kpiVariants();
|
|
217
|
+
const context = useMemo(() => ({
|
|
218
|
+
colorIndex,
|
|
219
|
+
goodDirection
|
|
220
|
+
}), [colorIndex, goodDirection]);
|
|
221
|
+
const body = /*#__PURE__*/_jsx(View, {
|
|
222
|
+
ref: surface ? undefined : ref,
|
|
223
|
+
className: root({
|
|
224
|
+
className
|
|
225
|
+
}),
|
|
226
|
+
...props,
|
|
227
|
+
children: children
|
|
228
|
+
});
|
|
229
|
+
return /*#__PURE__*/_jsx(KpiChartContext.Provider, {
|
|
230
|
+
value: context,
|
|
231
|
+
children: surface ? /*#__PURE__*/_jsx(Surface, {
|
|
232
|
+
ref: ref,
|
|
233
|
+
variant: "secondary",
|
|
234
|
+
padding: "lg",
|
|
235
|
+
className: "w-full",
|
|
236
|
+
children: body
|
|
237
|
+
}) : body
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
/* ------------------------------------------------------------------ *
|
|
242
|
+
* Header, and the things that live in it.
|
|
243
|
+
* ------------------------------------------------------------------ */
|
|
244
|
+
|
|
245
|
+
/** The top row: an icon, the metric's name, and anything acting on it. */
|
|
246
|
+
function KpiChartHeader({
|
|
247
|
+
className,
|
|
248
|
+
children,
|
|
249
|
+
...props
|
|
250
|
+
}) {
|
|
251
|
+
const {
|
|
252
|
+
header
|
|
253
|
+
} = kpiVariants();
|
|
254
|
+
return /*#__PURE__*/_jsx(KpiHeaderContext.Provider, {
|
|
255
|
+
value: true,
|
|
256
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
257
|
+
className: header({
|
|
258
|
+
className
|
|
259
|
+
}),
|
|
260
|
+
...props,
|
|
261
|
+
children: children
|
|
262
|
+
})
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
/**
|
|
266
|
+
* A tinted square for a glyph.
|
|
267
|
+
*
|
|
268
|
+
* It takes the element rather than drawing one, because a metric's icon comes
|
|
269
|
+
* from whatever set the app already uses — and an icon from outside this
|
|
270
|
+
* library will not read an ambient colour, so pass it one.
|
|
271
|
+
*/
|
|
272
|
+
function KpiChartIcon({
|
|
273
|
+
className,
|
|
274
|
+
tone = 'neutral',
|
|
275
|
+
children,
|
|
276
|
+
...props
|
|
277
|
+
}) {
|
|
278
|
+
const {
|
|
279
|
+
icon
|
|
280
|
+
} = kpiVariants({
|
|
281
|
+
tone
|
|
282
|
+
});
|
|
283
|
+
return /*#__PURE__*/_jsx(View, {
|
|
284
|
+
className: icon({
|
|
285
|
+
className
|
|
286
|
+
}),
|
|
287
|
+
...props,
|
|
288
|
+
children: children
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
/** The metric's name. Quiet on purpose — the value is the thing being read. */
|
|
292
|
+
function KpiChartTitle({
|
|
293
|
+
className,
|
|
294
|
+
children
|
|
295
|
+
}) {
|
|
296
|
+
const {
|
|
297
|
+
title
|
|
298
|
+
} = kpiVariants();
|
|
299
|
+
// Grows across a header row; never down a column — see `KpiHeaderContext`.
|
|
300
|
+
const inHeader = useContext(KpiHeaderContext);
|
|
301
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
302
|
+
className: title({
|
|
303
|
+
className: cn(inHeader && 'flex-1', className)
|
|
304
|
+
}),
|
|
305
|
+
numberOfLines: 1,
|
|
306
|
+
children: children
|
|
307
|
+
});
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* The stacked title / value / change block.
|
|
311
|
+
*
|
|
312
|
+
* Its own container rather than three loose children of the card, because the
|
|
313
|
+
* three belong together more tightly than they belong to whatever is above or
|
|
314
|
+
* below them — 4pt between the lines of one fact, and the card's own spacing
|
|
315
|
+
* between facts. It also takes the width in an `inline` row, leaving the chart
|
|
316
|
+
* its column on the end.
|
|
317
|
+
*/
|
|
318
|
+
function KpiChartStat({
|
|
319
|
+
className,
|
|
320
|
+
children,
|
|
321
|
+
...props
|
|
322
|
+
}) {
|
|
323
|
+
const {
|
|
324
|
+
stat
|
|
325
|
+
} = kpiVariants();
|
|
326
|
+
return /*#__PURE__*/_jsx(KpiStatContext.Provider, {
|
|
327
|
+
value: true,
|
|
328
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
329
|
+
className: stat({
|
|
330
|
+
className
|
|
331
|
+
}),
|
|
332
|
+
...props,
|
|
333
|
+
children: children
|
|
334
|
+
})
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
/** The trailing end of the header — a menu trigger, a filter, a link. */
|
|
338
|
+
function KpiChartActions({
|
|
339
|
+
className,
|
|
340
|
+
children,
|
|
341
|
+
...props
|
|
342
|
+
}) {
|
|
343
|
+
return /*#__PURE__*/_jsx(View, {
|
|
344
|
+
className: cn('flex-row items-center gap-1', className),
|
|
345
|
+
...props,
|
|
346
|
+
children: children
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
/* ------------------------------------------------------------------ *
|
|
351
|
+
* The number, and what it is doing.
|
|
352
|
+
* ------------------------------------------------------------------ */
|
|
353
|
+
|
|
354
|
+
/** The row the value and the trend share. */
|
|
355
|
+
function KpiChartContent({
|
|
356
|
+
className,
|
|
357
|
+
layout = 'below',
|
|
358
|
+
children,
|
|
359
|
+
...props
|
|
360
|
+
}) {
|
|
361
|
+
const {
|
|
362
|
+
content
|
|
363
|
+
} = kpiVariants({
|
|
364
|
+
layout
|
|
365
|
+
});
|
|
366
|
+
return /*#__PURE__*/_jsx(View, {
|
|
367
|
+
className: content({
|
|
368
|
+
className
|
|
369
|
+
}),
|
|
370
|
+
...props,
|
|
371
|
+
children: children
|
|
372
|
+
});
|
|
373
|
+
}
|
|
374
|
+
/**
|
|
375
|
+
* The number.
|
|
376
|
+
*
|
|
377
|
+
* Formatted by the caller, not here: thousands separators, currency symbols
|
|
378
|
+
* and units are locale decisions, and a component that guessed them would be
|
|
379
|
+
* wrong in a way that is hard to notice and impossible to override.
|
|
380
|
+
*/
|
|
381
|
+
function KpiChartValue({
|
|
382
|
+
className,
|
|
383
|
+
children
|
|
384
|
+
}) {
|
|
385
|
+
const {
|
|
386
|
+
value
|
|
387
|
+
} = kpiVariants();
|
|
388
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
389
|
+
className: value({
|
|
390
|
+
className
|
|
391
|
+
}),
|
|
392
|
+
numberOfLines: 1,
|
|
393
|
+
children: children
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
/**
|
|
397
|
+
* The change.
|
|
398
|
+
*
|
|
399
|
+
* Colour comes from what the movement *means*, not from its sign: a fall in
|
|
400
|
+
* churn is good news and is drawn as good news. That is the whole reason this
|
|
401
|
+
* takes a number rather than a string — a caller writing "−4.2%" into a green
|
|
402
|
+
* label has to remember to change the colour when the metric changes, and
|
|
403
|
+
* nobody does.
|
|
404
|
+
*/
|
|
405
|
+
function KpiChartTrend({
|
|
406
|
+
className,
|
|
407
|
+
value,
|
|
408
|
+
format,
|
|
409
|
+
goodDirection,
|
|
410
|
+
variant = 'text',
|
|
411
|
+
caption,
|
|
412
|
+
threshold = 0,
|
|
413
|
+
children,
|
|
414
|
+
...props
|
|
415
|
+
}) {
|
|
416
|
+
const context = useKpiChart('KpiChart.Trend');
|
|
417
|
+
const polarity = goodDirection ?? context.goodDirection;
|
|
418
|
+
const flat = Math.abs(value) <= threshold;
|
|
419
|
+
const rising = value > 0;
|
|
420
|
+
const tone = flat ? 'flat' : polarity === 'none' ? 'neutral' : rising && polarity === 'up' || !rising && polarity === 'down' ? 'good' : 'bad';
|
|
421
|
+
|
|
422
|
+
// Down a column it starts at the leading edge, level with the title and the
|
|
423
|
+
// number above it; across a row it centres against them — see `KpiStatContext`.
|
|
424
|
+
const inStat = useContext(KpiStatContext);
|
|
425
|
+
const {
|
|
426
|
+
trend,
|
|
427
|
+
trendLabel
|
|
428
|
+
} = kpiVariants({
|
|
429
|
+
tone,
|
|
430
|
+
trendVariant: variant
|
|
431
|
+
});
|
|
432
|
+
|
|
433
|
+
// The arrow's colour, resolved so it matches the label beside it. An icon
|
|
434
|
+
// from outside this library does not inherit a text colour.
|
|
435
|
+
const goodTint = useCSSVariable('--color-success');
|
|
436
|
+
const badTint = useCSSVariable('--color-destructive');
|
|
437
|
+
const mutedTint = useCSSVariable('--color-muted-foreground');
|
|
438
|
+
const raw = tone === 'good' ? goodTint : tone === 'bad' ? badTint : mutedTint;
|
|
439
|
+
const tint = typeof raw === 'string' ? raw : '#737373';
|
|
440
|
+
const Arrow = flat ? Minus : rising ? ArrowUp : ArrowDown;
|
|
441
|
+
const label = format ? format(value) :
|
|
442
|
+
// A true minus sign rather than a hyphen: at this size a hyphen reads as
|
|
443
|
+
// a dash between two words, and the sign is half the meaning.
|
|
444
|
+
`${rising ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(1)}%`;
|
|
445
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
446
|
+
className: trend({
|
|
447
|
+
className: cn(inStat ? 'self-start' : 'self-center', className)
|
|
448
|
+
}),
|
|
449
|
+
accessible: true,
|
|
450
|
+
accessibilityLabel: `${flat ? 'No change' : rising ? 'Up' : 'Down'} ${Math.abs(value).toFixed(1)} percent${caption ? `, ${caption}` : ''}`,
|
|
451
|
+
...props,
|
|
452
|
+
children: [variant === 'badge' ? /*#__PURE__*/_jsx(Arrow, {
|
|
453
|
+
size: TREND_ICON,
|
|
454
|
+
strokeWidth: TREND_STROKE,
|
|
455
|
+
color: tint
|
|
456
|
+
}) : null, /*#__PURE__*/_jsxs(Text, {
|
|
457
|
+
className: trendLabel(),
|
|
458
|
+
children: [label, caption ? /*#__PURE__*/_jsxs(Text, {
|
|
459
|
+
className: "text-muted-foreground",
|
|
460
|
+
children: [" ", caption]
|
|
461
|
+
}) : null]
|
|
462
|
+
}), children]
|
|
463
|
+
});
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* ------------------------------------------------------------------ *
|
|
467
|
+
* The chart, and the bar.
|
|
468
|
+
* ------------------------------------------------------------------ */
|
|
469
|
+
|
|
470
|
+
/**
|
|
471
|
+
* The sparkline.
|
|
472
|
+
*
|
|
473
|
+
* A line chart with the axis padding dropped, which is what `compact` on the
|
|
474
|
+
* chart itself means — there is no grid, no axis and no crosshair here, so
|
|
475
|
+
* every point of padding is a point the shape is not using. Nobody reads a
|
|
476
|
+
* value off one of these; they read whether it is going up.
|
|
477
|
+
*/
|
|
478
|
+
function KpiChartSparkline({
|
|
479
|
+
className,
|
|
480
|
+
data,
|
|
481
|
+
dataKey,
|
|
482
|
+
colorIndex,
|
|
483
|
+
filled,
|
|
484
|
+
height,
|
|
485
|
+
inline = false,
|
|
486
|
+
strokeWidth = 2
|
|
487
|
+
}) {
|
|
488
|
+
const context = useKpiChart('KpiChart.Chart');
|
|
489
|
+
const index = colorIndex ?? context.colorIndex;
|
|
490
|
+
const fill = filled ?? !inline;
|
|
491
|
+
return /*#__PURE__*/_jsx(View, {
|
|
492
|
+
className: cn(inline ? '' : 'w-full', className),
|
|
493
|
+
style: inline ? {
|
|
494
|
+
width: INLINE_CHART_WIDTH,
|
|
495
|
+
height: height ?? INLINE_CHART_HEIGHT
|
|
496
|
+
} : {
|
|
497
|
+
height: height ?? CHART_HEIGHT
|
|
498
|
+
},
|
|
499
|
+
children: /*#__PURE__*/_jsxs(LineChart, {
|
|
500
|
+
data: data,
|
|
501
|
+
compact: true,
|
|
502
|
+
aspectRatio: inline ? INLINE_ASPECT : 4,
|
|
503
|
+
children: [fill ? /*#__PURE__*/_jsx(LineChart.Area, {
|
|
504
|
+
dataKey: dataKey,
|
|
505
|
+
colorIndex: index
|
|
506
|
+
}) : null, /*#__PURE__*/_jsx(LineChart.Line, {
|
|
507
|
+
dataKey: dataKey,
|
|
508
|
+
colorIndex: index,
|
|
509
|
+
strokeWidth: strokeWidth
|
|
510
|
+
})]
|
|
511
|
+
})
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
/** Progress towards a target, for a metric that has one. */
|
|
515
|
+
function KpiChartProgressBar({
|
|
516
|
+
className,
|
|
517
|
+
value,
|
|
518
|
+
maxValue = 100,
|
|
519
|
+
label,
|
|
520
|
+
showValueLabel
|
|
521
|
+
}) {
|
|
522
|
+
return /*#__PURE__*/_jsx(Progress, {
|
|
523
|
+
className: className,
|
|
524
|
+
value: value,
|
|
525
|
+
maxValue: maxValue,
|
|
526
|
+
label: label,
|
|
527
|
+
showValueLabel: showValueLabel,
|
|
528
|
+
size: "sm"
|
|
529
|
+
});
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* ------------------------------------------------------------------ *
|
|
533
|
+
* Footer and separator.
|
|
534
|
+
* ------------------------------------------------------------------ */
|
|
535
|
+
|
|
536
|
+
/** The bottom strip — a comparison period, a caveat, a link. */
|
|
537
|
+
function KpiChartFooter({
|
|
538
|
+
className,
|
|
539
|
+
children,
|
|
540
|
+
...props
|
|
541
|
+
}) {
|
|
542
|
+
const {
|
|
543
|
+
footer
|
|
544
|
+
} = kpiVariants();
|
|
545
|
+
return /*#__PURE__*/_jsx(View, {
|
|
546
|
+
className: footer({
|
|
547
|
+
className
|
|
548
|
+
}),
|
|
549
|
+
...props,
|
|
550
|
+
children: children
|
|
551
|
+
});
|
|
552
|
+
}
|
|
553
|
+
/** A hairline across the card. */
|
|
554
|
+
function KpiChartSeparator({
|
|
555
|
+
className,
|
|
556
|
+
...props
|
|
557
|
+
}) {
|
|
558
|
+
const {
|
|
559
|
+
separator
|
|
560
|
+
} = kpiVariants();
|
|
561
|
+
return /*#__PURE__*/_jsx(View, {
|
|
562
|
+
className: separator({
|
|
563
|
+
className
|
|
564
|
+
}),
|
|
565
|
+
...props
|
|
566
|
+
});
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
/* ------------------------------------------------------------------ *
|
|
570
|
+
* Group.
|
|
571
|
+
* ------------------------------------------------------------------ */
|
|
572
|
+
|
|
573
|
+
/**
|
|
574
|
+
* Several metrics, laid out as one panel.
|
|
575
|
+
*
|
|
576
|
+
* The separators are inserted between the children rather than written by the
|
|
577
|
+
* caller, because "between" is the one thing a list of siblings cannot express
|
|
578
|
+
* — a trailing rule after the last card is the mistake this exists to prevent.
|
|
579
|
+
*/
|
|
580
|
+
const KpiChartGroup = /*#__PURE__*/forwardRef(function KpiChartGroup({
|
|
581
|
+
className,
|
|
582
|
+
orientation = 'horizontal',
|
|
583
|
+
separated = true,
|
|
584
|
+
children,
|
|
585
|
+
...props
|
|
586
|
+
}, ref) {
|
|
587
|
+
const {
|
|
588
|
+
group,
|
|
589
|
+
groupSeparator
|
|
590
|
+
} = kpiVariants();
|
|
591
|
+
const horizontal = orientation === 'horizontal';
|
|
592
|
+
const items = Array.isArray(children) ? children.flat() : [children];
|
|
593
|
+
const visible = items.filter(Boolean);
|
|
594
|
+
return /*#__PURE__*/_jsx(View, {
|
|
595
|
+
ref: ref,
|
|
596
|
+
className: cn(group(), horizontal ? 'flex-row items-stretch' : 'flex-col', separated ? '' : 'gap-3', className),
|
|
597
|
+
...props,
|
|
598
|
+
children: visible.map((child, index) => /*#__PURE__*/_jsxs(View, {
|
|
599
|
+
className: cn(horizontal ? 'flex-1' : 'w-full',
|
|
600
|
+
// The padding is on the children rather than the rule, so the rule
|
|
601
|
+
// reaches the full height or width of the panel.
|
|
602
|
+
separated && horizontal && index > 0 && 'ps-4', separated && horizontal && index < visible.length - 1 && 'pe-4', separated && !horizontal && index > 0 && 'pt-4', separated && !horizontal && index < visible.length - 1 && 'pb-4'),
|
|
603
|
+
children: [separated && index > 0 ? /*#__PURE__*/_jsx(View, {
|
|
604
|
+
className: cn(groupSeparator(),
|
|
605
|
+
// Absolute on both axes, and on the *edge* of the padded box.
|
|
606
|
+
// In normal flow the rule lands after this cell's leading
|
|
607
|
+
// padding rather than on the boundary, which reads as a gap
|
|
608
|
+
// above the rule and none below it.
|
|
609
|
+
horizontal ? 'absolute bottom-0 start-0 top-0 w-px' : 'absolute end-0 start-0 top-0 h-px')
|
|
610
|
+
// A rule between panels is decoration; announcing it puts an
|
|
611
|
+
// unlabelled stop between two metrics.
|
|
612
|
+
,
|
|
613
|
+
accessibilityElementsHidden: true,
|
|
614
|
+
importantForAccessibility: "no-hide-descendants"
|
|
615
|
+
}) : null, child]
|
|
616
|
+
}, index))
|
|
617
|
+
});
|
|
618
|
+
});
|
|
619
|
+
KpiChartRoot.displayName = 'KpiChart';
|
|
620
|
+
KpiChartHeader.displayName = 'KpiChart.Header';
|
|
621
|
+
KpiChartIcon.displayName = 'KpiChart.Icon';
|
|
622
|
+
KpiChartTitle.displayName = 'KpiChart.Title';
|
|
623
|
+
KpiChartStat.displayName = 'KpiChart.Stat';
|
|
624
|
+
KpiChartActions.displayName = 'KpiChart.Actions';
|
|
625
|
+
KpiChartContent.displayName = 'KpiChart.Content';
|
|
626
|
+
KpiChartValue.displayName = 'KpiChart.Value';
|
|
627
|
+
KpiChartTrend.displayName = 'KpiChart.Trend';
|
|
628
|
+
KpiChartSparkline.displayName = 'KpiChart.Chart';
|
|
629
|
+
KpiChartProgressBar.displayName = 'KpiChart.Progress';
|
|
630
|
+
KpiChartFooter.displayName = 'KpiChart.Footer';
|
|
631
|
+
KpiChartSeparator.displayName = 'KpiChart.Separator';
|
|
632
|
+
KpiChartGroup.displayName = 'KpiChart.Group';
|
|
633
|
+
export const KpiChart = Object.assign(KpiChartRoot, {
|
|
634
|
+
Header: KpiChartHeader,
|
|
635
|
+
Icon: KpiChartIcon,
|
|
636
|
+
Title: KpiChartTitle,
|
|
637
|
+
Stat: KpiChartStat,
|
|
638
|
+
Actions: KpiChartActions,
|
|
639
|
+
Content: KpiChartContent,
|
|
640
|
+
Value: KpiChartValue,
|
|
641
|
+
Trend: KpiChartTrend,
|
|
642
|
+
Chart: KpiChartSparkline,
|
|
643
|
+
Progress: KpiChartProgressBar,
|
|
644
|
+
Footer: KpiChartFooter,
|
|
645
|
+
Separator: KpiChartSeparator,
|
|
646
|
+
Group: KpiChartGroup
|
|
647
|
+
});
|
|
648
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","forwardRef","useContext","useMemo","View","ArrowDown","ArrowUp","Minus","tv","useCSSVariable","Text","cn","LineChart","Progress","Surface","jsx","_jsx","jsxs","_jsxs","CHART_HEIGHT","INLINE_CHART_WIDTH","INLINE_CHART_HEIGHT","INLINE_ASPECT","TREND_ICON","TREND_STROKE","kpiVariants","slots","root","header","icon","title","content","value","stat","trend","trendLabel","footer","separator","group","groupSeparator","variants","tone","good","bad","flat","neutral","trendVariant","text","badge","layout","below","inline","compoundVariants","class","defaultVariants","KpiChartContext","KpiHeaderContext","KpiStatContext","useKpiChart","part","context","Error","KpiChartRoot","className","colorIndex","goodDirection","surface","children","props","ref","body","undefined","Provider","variant","padding","KpiChartHeader","KpiChartIcon","KpiChartTitle","inHeader","numberOfLines","KpiChartStat","KpiChartActions","KpiChartContent","KpiChartValue","KpiChartTrend","format","caption","threshold","polarity","Math","abs","rising","inStat","goodTint","badTint","mutedTint","raw","tint","Arrow","label","toFixed","accessible","accessibilityLabel","size","strokeWidth","color","KpiChartSparkline","data","dataKey","filled","height","index","fill","style","width","compact","aspectRatio","Area","Line","KpiChartProgressBar","maxValue","showValueLabel","KpiChartFooter","KpiChartSeparator","KpiChartGroup","orientation","separated","horizontal","items","Array","isArray","visible","filter","Boolean","map","child","length","accessibilityElementsHidden","importantForAccessibility","displayName","KpiChart","Object","assign","Header","Icon","Title","Stat","Actions","Content","Value","Trend","Chart","Footer","Separator","Group"],"sourceRoot":"../../../../src","sources":["components/kpi-chart/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,UAAU,EAAEC,UAAU,EAAEC,OAAO,QAAwB,OAAO;AACtF,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,SAAS,EAAEC,OAAO,EAAEC,KAAK,QAAQ,qBAAqB;AAC/D,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,EAAE,QAAQ,mBAAgB;AAEnC,SAASC,SAAS,QAA6B,wBAAe;AAC9D,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,OAAO,QAAQ,qBAAY;;AAEpC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,YAAY,GAAG,EAAE;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B;AACA,MAAMC,aAAa,GAAG,GAAG;;AAEzB;AACA,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,YAAY,GAAG,GAAG;AAExB,MAAMC,WAAW,GAAGjB,EAAE,CAAC;EACrBkB,KAAK,EAAE;IACLC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,6BAA6B;IACrCC,IAAI,EAAE,gDAAgD;IACtDC,KAAK,EAAE,2CAA2C;IAClDC,OAAO,EAAE,0CAA0C;IACnDC,KAAK,EAAE,oCAAoC;IAC3C;IACAC,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,6BAA6B;IACpCC,UAAU,EAAE,aAAa;IACzBC,MAAM,EAAE,6BAA6B;IACrCC,SAAS,EAAE,uBAAuB;IAClCC,KAAK,EAAE,QAAQ;IACfC,cAAc,EAAE;EAClB,CAAC;EACDC,QAAQ,EAAE;IACR;AACJ;AACA;AACA;IACIC,IAAI,EAAE;MACJC,IAAI,EAAE;QAAEP,UAAU,EAAE,cAAc;QAAEN,IAAI,EAAE;MAAoB,CAAC;MAC/Dc,GAAG,EAAE;QAAER,UAAU,EAAE,kBAAkB;QAAEN,IAAI,EAAE;MAAwB,CAAC;MACtEe,IAAI,EAAE;QAAET,UAAU,EAAE,uBAAuB;QAAEN,IAAI,EAAE;MAAW,CAAC;MAC/DgB,OAAO,EAAE;QAAEV,UAAU,EAAE,uBAAuB;QAAEN,IAAI,EAAE;MAAe;IACvE,CAAC;IACD;AACJ;AACA;AACA;AACA;AACA;AACA;IACIiB,YAAY,EAAE;MACZC,IAAI,EAAE;QAAEb,KAAK,EAAE,SAAS;QAAEC,UAAU,EAAE;MAAU,CAAC;MACjDa,KAAK,EAAE;QAAEd,KAAK,EAAE,0BAA0B;QAAEC,UAAU,EAAE;MAAU;IACpE,CAAC;IACD;IACAc,MAAM,EAAE;MACN;MACAC,KAAK,EAAE,CAAC,CAAC;MACT;AACN;AACA;AACA;AACA;AACA;MACMC,MAAM,EAAE;QAAEpB,OAAO,EAAE;MAAqB;IAC1C;EACF,CAAC;EACDqB,gBAAgB,EAAE,CAChB;IAAEN,YAAY,EAAE,OAAO;IAAEL,IAAI,EAAE,MAAM;IAAEY,KAAK,EAAE;MAAEnB,KAAK,EAAE;IAAoB;EAAE,CAAC,EAC9E;IAAEY,YAAY,EAAE,OAAO;IAAEL,IAAI,EAAE,KAAK;IAAEY,KAAK,EAAE;MAAEnB,KAAK,EAAE;IAAwB;EAAE,CAAC,EACjF;IAAEY,YAAY,EAAE,OAAO;IAAEL,IAAI,EAAE,MAAM;IAAEY,KAAK,EAAE;MAAEnB,KAAK,EAAE;IAAW;EAAE,CAAC,EACrE;IAAEY,YAAY,EAAE,OAAO;IAAEL,IAAI,EAAE,SAAS;IAAEY,KAAK,EAAE;MAAEnB,KAAK,EAAE;IAAW;EAAE,CAAC,CACzE;EACDoB,eAAe,EAAE;IACfb,IAAI,EAAE,SAAS;IACfK,YAAY,EAAE,MAAM;IACpBG,MAAM,EAAE;EACV;AACF,CAAC,CAAC;;AAIF;;AAGA;;AAQA,MAAMM,eAAe,gBAAGvD,aAAa,CAA8B,IAAI,CAAC;;AAExE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMwD,gBAAgB,gBAAGxD,aAAa,CAAC,KAAK,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMyD,cAAc,gBAAGzD,aAAa,CAAC,KAAK,CAAC;AAE3C,SAAS0D,WAAWA,CAACC,IAAY,EAAwB;EACvD,MAAMC,OAAO,GAAG1D,UAAU,CAACqD,eAAe,CAAC;EAC3C,IAAI,CAACK,OAAO,EAAE,MAAM,IAAIC,KAAK,CAAC,GAAGF,IAAI,kCAAkC,CAAC;EACxE,OAAOC,OAAO;AAChB;;AAEA;AACA;AACA;;AAqBA,MAAME,YAAY,gBAAG7D,UAAU,CAAsB,SAAS6D,YAAYA,CACxE;EAAEC,SAAS;EAAEC,UAAU,GAAG,CAAC;EAAEC,aAAa,GAAG,IAAI;EAAEC,OAAO,GAAG,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACvFC,GAAG,EACH;EACA,MAAM;IAAE1C;EAAK,CAAC,GAAGF,WAAW,CAAC,CAAC;EAC9B,MAAMmC,OAAO,GAAGzD,OAAO,CAAC,OAAO;IAAE6D,UAAU;IAAEC;EAAc,CAAC,CAAC,EAAE,CAACD,UAAU,EAAEC,aAAa,CAAC,CAAC;EAE3F,MAAMK,IAAI,gBACRtD,IAAA,CAACZ,IAAI;IAACiE,GAAG,EAAEH,OAAO,GAAGK,SAAS,GAAGF,GAAI;IAACN,SAAS,EAAEpC,IAAI,CAAC;MAAEoC;IAAU,CAAC,CAAE;IAAA,GAAKK,KAAK;IAAAD,QAAA,EAC5EA;EAAQ,CACL,CACP;EAED,oBACEnD,IAAA,CAACuC,eAAe,CAACiB,QAAQ;IAACxC,KAAK,EAAE4B,OAAQ;IAAAO,QAAA,EACtCD,OAAO,gBACNlD,IAAA,CAACF,OAAO;MAACuD,GAAG,EAAEA,GAAI;MAACI,OAAO,EAAC,WAAW;MAACC,OAAO,EAAC,IAAI;MAACX,SAAS,EAAC,QAAQ;MAAAI,QAAA,EACnEG;IAAI,CACE,CAAC,GAEVA;EACD,CACuB,CAAC;AAE/B,CAAC,CAAC;;AAEF;AACA;AACA;;AAOA;AACA,SAASK,cAAcA,CAAC;EAAEZ,SAAS;EAAEI,QAAQ;EAAE,GAAGC;AAA2B,CAAC,EAAE;EAC9E,MAAM;IAAExC;EAAO,CAAC,GAAGH,WAAW,CAAC,CAAC;EAChC,oBACET,IAAA,CAACwC,gBAAgB,CAACgB,QAAQ;IAACxC,KAAK,EAAE,IAAK;IAAAmC,QAAA,eACrCnD,IAAA,CAACZ,IAAI;MAAC2D,SAAS,EAAEnC,MAAM,CAAC;QAAEmC;MAAU,CAAC,CAAE;MAAA,GAAKK,KAAK;MAAAD,QAAA,EAC9CA;IAAQ,CACL;EAAC,CACkB,CAAC;AAEhC;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASS,YAAYA,CAAC;EAAEb,SAAS;EAAEtB,IAAI,GAAG,SAAS;EAAE0B,QAAQ;EAAE,GAAGC;AAAyB,CAAC,EAAE;EAC5F,MAAM;IAAEvC;EAAK,CAAC,GAAGJ,WAAW,CAAC;IAAEgB;EAAK,CAAC,CAAC;EACtC,oBACEzB,IAAA,CAACZ,IAAI;IAAC2D,SAAS,EAAElC,IAAI,CAAC;MAAEkC;IAAU,CAAC,CAAE;IAAA,GAAKK,KAAK;IAAAD,QAAA,EAC5CA;EAAQ,CACL,CAAC;AAEX;AAOA;AACA,SAASU,aAAaA,CAAC;EAAEd,SAAS;EAAEI;AAA6B,CAAC,EAAE;EAClE,MAAM;IAAErC;EAAM,CAAC,GAAGL,WAAW,CAAC,CAAC;EAC/B;EACA,MAAMqD,QAAQ,GAAG5E,UAAU,CAACsD,gBAAgB,CAAC;EAC7C,oBACExC,IAAA,CAACN,IAAI;IAACqD,SAAS,EAAEjC,KAAK,CAAC;MAAEiC,SAAS,EAAEpD,EAAE,CAACmE,QAAQ,IAAI,QAAQ,EAAEf,SAAS;IAAE,CAAC,CAAE;IAACgB,aAAa,EAAE,CAAE;IAAAZ,QAAA,EAC1FA;EAAQ,CACL,CAAC;AAEX;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASa,YAAYA,CAAC;EAAEjB,SAAS;EAAEI,QAAQ;EAAE,GAAGC;AAAyB,CAAC,EAAE;EAC1E,MAAM;IAAEnC;EAAK,CAAC,GAAGR,WAAW,CAAC,CAAC;EAC9B,oBACET,IAAA,CAACyC,cAAc,CAACe,QAAQ;IAACxC,KAAK,EAAE,IAAK;IAAAmC,QAAA,eACnCnD,IAAA,CAACZ,IAAI;MAAC2D,SAAS,EAAE9B,IAAI,CAAC;QAAE8B;MAAU,CAAC,CAAE;MAAA,GAAKK,KAAK;MAAAD,QAAA,EAC5CA;IAAQ,CACL;EAAC,CACgB,CAAC;AAE9B;AAOA;AACA,SAASc,eAAeA,CAAC;EAAElB,SAAS;EAAEI,QAAQ;EAAE,GAAGC;AAA4B,CAAC,EAAE;EAChF,oBACEpD,IAAA,CAACZ,IAAI;IAAC2D,SAAS,EAAEpD,EAAE,CAAC,6BAA6B,EAAEoD,SAAS,CAAE;IAAA,GAAKK,KAAK;IAAAD,QAAA,EACrEA;EAAQ,CACL,CAAC;AAEX;;AAEA;AACA;AACA;;AASA;AACA,SAASe,eAAeA,CAAC;EACvBnB,SAAS;EACTd,MAAM,GAAG,OAAO;EAChBkB,QAAQ;EACR,GAAGC;AACiB,CAAC,EAAE;EACvB,MAAM;IAAErC;EAAQ,CAAC,GAAGN,WAAW,CAAC;IAAEwB;EAAO,CAAC,CAAC;EAC3C,oBACEjC,IAAA,CAACZ,IAAI;IAAC2D,SAAS,EAAEhC,OAAO,CAAC;MAAEgC;IAAU,CAAC,CAAE;IAAA,GAAKK,KAAK;IAAAD,QAAA,EAC/CA;EAAQ,CACL,CAAC;AAEX;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASgB,aAAaA,CAAC;EAAEpB,SAAS;EAAEI;AAA6B,CAAC,EAAE;EAClE,MAAM;IAAEnC;EAAM,CAAC,GAAGP,WAAW,CAAC,CAAC;EAC/B,oBACET,IAAA,CAACN,IAAI;IAACqD,SAAS,EAAE/B,KAAK,CAAC;MAAE+B;IAAU,CAAC,CAAE;IAACgB,aAAa,EAAE,CAAE;IAAAZ,QAAA,EACrDA;EAAQ,CACL,CAAC;AAEX;AA+BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASiB,aAAaA,CAAC;EACrBrB,SAAS;EACT/B,KAAK;EACLqD,MAAM;EACNpB,aAAa;EACbQ,OAAO,GAAG,MAAM;EAChBa,OAAO;EACPC,SAAS,GAAG,CAAC;EACbpB,QAAQ;EACR,GAAGC;AACe,CAAC,EAAE;EACrB,MAAMR,OAAO,GAAGF,WAAW,CAAC,gBAAgB,CAAC;EAC7C,MAAM8B,QAAQ,GAAGvB,aAAa,IAAIL,OAAO,CAACK,aAAa;EAEvD,MAAMrB,IAAI,GAAG6C,IAAI,CAACC,GAAG,CAAC1D,KAAK,CAAC,IAAIuD,SAAS;EACzC,MAAMI,MAAM,GAAG3D,KAAK,GAAG,CAAC;EACxB,MAAMS,IAAa,GAAGG,IAAI,GACtB,MAAM,GACN4C,QAAQ,KAAK,MAAM,GACjB,SAAS,GACRG,MAAM,IAAIH,QAAQ,KAAK,IAAI,IAAM,CAACG,MAAM,IAAIH,QAAQ,KAAK,MAAO,GAC/D,MAAM,GACN,KAAK;;EAEb;EACA;EACA,MAAMI,MAAM,GAAG1F,UAAU,CAACuD,cAAc,CAAC;EACzC,MAAM;IAAEvB,KAAK;IAAEC;EAAW,CAAC,GAAGV,WAAW,CAAC;IAAEgB,IAAI;IAAEK,YAAY,EAAE2B;EAAQ,CAAC,CAAC;;EAE1E;EACA;EACA,MAAMoB,QAAQ,GAAGpF,cAAc,CAAC,iBAAiB,CAAC;EAClD,MAAMqF,OAAO,GAAGrF,cAAc,CAAC,qBAAqB,CAAC;EACrD,MAAMsF,SAAS,GAAGtF,cAAc,CAAC,0BAA0B,CAAC;EAC5D,MAAMuF,GAAG,GAAGvD,IAAI,KAAK,MAAM,GAAGoD,QAAQ,GAAGpD,IAAI,KAAK,KAAK,GAAGqD,OAAO,GAAGC,SAAS;EAC7E,MAAME,IAAI,GAAG,OAAOD,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAG,SAAS;EAEtD,MAAME,KAAK,GAAGtD,IAAI,GAAGrC,KAAK,GAAGoF,MAAM,GAAGrF,OAAO,GAAGD,SAAS;EAEzD,MAAM8F,KAAK,GAAGd,MAAM,GAChBA,MAAM,CAACrD,KAAK,CAAC;EACb;EACA;EACA,GAAG2D,MAAM,GAAG,GAAG,GAAG3D,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,GAAGyD,IAAI,CAACC,GAAG,CAAC1D,KAAK,CAAC,CAACoE,OAAO,CAAC,CAAC,CAAC,GAAG;EAE1E,oBACElF,KAAA,CAACd,IAAI;IACH2D,SAAS,EAAE7B,KAAK,CAAC;MAAE6B,SAAS,EAAEpD,EAAE,CAACiF,MAAM,GAAG,YAAY,GAAG,aAAa,EAAE7B,SAAS;IAAE,CAAC,CAAE;IACtFsC,UAAU;IACVC,kBAAkB,EAAE,GAAG1D,IAAI,GAAG,WAAW,GAAG+C,MAAM,GAAG,IAAI,GAAG,MAAM,IAAIF,IAAI,CAACC,GAAG,CAC5E1D,KACF,CAAC,CAACoE,OAAO,CAAC,CAAC,CAAC,WAAWd,OAAO,GAAG,KAAKA,OAAO,EAAE,GAAG,EAAE,EAAG;IAAA,GACnDlB,KAAK;IAAAD,QAAA,GAIRM,OAAO,KAAK,OAAO,gBAClBzD,IAAA,CAACkF,KAAK;MAACK,IAAI,EAAEhF,UAAW;MAACiF,WAAW,EAAEhF,YAAa;MAACiF,KAAK,EAAER;IAAK,CAAE,CAAC,GACjE,IAAI,eACR/E,KAAA,CAACR,IAAI;MAACqD,SAAS,EAAE5B,UAAU,CAAC,CAAE;MAAAgC,QAAA,GAC3BgC,KAAK,EAILb,OAAO,gBAAGpE,KAAA,CAACR,IAAI;QAACqD,SAAS,EAAC,uBAAuB;QAAAI,QAAA,GAAC,GAAC,EAACmB,OAAO;MAAA,CAAO,CAAC,GAAG,IAAI;IAAA,CACvE,CAAC,EACNnB,QAAQ;EAAA,CACL,CAAC;AAEX;;AAEA;AACA;AACA;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASuC,iBAAiBA,CAAC;EACzB3C,SAAS;EACT4C,IAAI;EACJC,OAAO;EACP5C,UAAU;EACV6C,MAAM;EACNC,MAAM;EACN3D,MAAM,GAAG,KAAK;EACdqD,WAAW,GAAG;AACQ,CAAC,EAAE;EACzB,MAAM5C,OAAO,GAAGF,WAAW,CAAC,gBAAgB,CAAC;EAC7C,MAAMqD,KAAK,GAAG/C,UAAU,IAAIJ,OAAO,CAACI,UAAU;EAC9C,MAAMgD,IAAI,GAAGH,MAAM,IAAI,CAAC1D,MAAM;EAE9B,oBACEnC,IAAA,CAACZ,IAAI;IACH2D,SAAS,EAAEpD,EAAE,CAACwC,MAAM,GAAG,EAAE,GAAG,QAAQ,EAAEY,SAAS,CAAE;IACjDkD,KAAK,EACH9D,MAAM,GACF;MAAE+D,KAAK,EAAE9F,kBAAkB;MAAE0F,MAAM,EAAEA,MAAM,IAAIzF;IAAoB,CAAC,GACpE;MAAEyF,MAAM,EAAEA,MAAM,IAAI3F;IAAa,CACtC;IAAAgD,QAAA,eAEDjD,KAAA,CAACN,SAAS;MAAC+F,IAAI,EAAEA,IAAK;MAACQ,OAAO;MAACC,WAAW,EAAEjE,MAAM,GAAG7B,aAAa,GAAG,CAAE;MAAA6C,QAAA,GACpE6C,IAAI,gBAAGhG,IAAA,CAACJ,SAAS,CAACyG,IAAI;QAACT,OAAO,EAAEA,OAAQ;QAAC5C,UAAU,EAAE+C;MAAM,CAAE,CAAC,GAAG,IAAI,eACtE/F,IAAA,CAACJ,SAAS,CAAC0G,IAAI;QAACV,OAAO,EAAEA,OAAQ;QAAC5C,UAAU,EAAE+C,KAAM;QAACP,WAAW,EAAEA;MAAY,CAAE,CAAC;IAAA,CACxE;EAAC,CACR,CAAC;AAEX;AAcA;AACA,SAASe,mBAAmBA,CAAC;EAC3BxD,SAAS;EACT/B,KAAK;EACLwF,QAAQ,GAAG,GAAG;EACdrB,KAAK;EACLsB;AACqB,CAAC,EAAE;EACxB,oBACEzG,IAAA,CAACH,QAAQ;IACPkD,SAAS,EAAEA,SAAU;IACrB/B,KAAK,EAAEA,KAAM;IACbwF,QAAQ,EAAEA,QAAS;IACnBrB,KAAK,EAAEA,KAAM;IACbsB,cAAc,EAAEA,cAAe;IAC/BlB,IAAI,EAAC;EAAI,CACV,CAAC;AAEN;;AAEA;AACA;AACA;;AAOA;AACA,SAASmB,cAAcA,CAAC;EAAE3D,SAAS;EAAEI,QAAQ;EAAE,GAAGC;AAA2B,CAAC,EAAE;EAC9E,MAAM;IAAEhC;EAAO,CAAC,GAAGX,WAAW,CAAC,CAAC;EAChC,oBACET,IAAA,CAACZ,IAAI;IAAC2D,SAAS,EAAE3B,MAAM,CAAC;MAAE2B;IAAU,CAAC,CAAE;IAAA,GAAKK,KAAK;IAAAD,QAAA,EAC9CA;EAAQ,CACL,CAAC;AAEX;AAMA;AACA,SAASwD,iBAAiBA,CAAC;EAAE5D,SAAS;EAAE,GAAGK;AAA8B,CAAC,EAAE;EAC1E,MAAM;IAAE/B;EAAU,CAAC,GAAGZ,WAAW,CAAC,CAAC;EACnC,oBAAOT,IAAA,CAACZ,IAAI;IAAC2D,SAAS,EAAE1B,SAAS,CAAC;MAAE0B;IAAU,CAAC,CAAE;IAAA,GAAKK;EAAK,CAAG,CAAC;AACjE;;AAEA;AACA;AACA;;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMwD,aAAa,gBAAG3H,UAAU,CAA2B,SAAS2H,aAAaA,CAC/E;EAAE7D,SAAS;EAAE8D,WAAW,GAAG,YAAY;EAAEC,SAAS,GAAG,IAAI;EAAE3D,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAC/EC,GAAG,EACH;EACA,MAAM;IAAE/B,KAAK;IAAEC;EAAe,CAAC,GAAGd,WAAW,CAAC,CAAC;EAC/C,MAAMsG,UAAU,GAAGF,WAAW,KAAK,YAAY;EAE/C,MAAMG,KAAK,GAAGC,KAAK,CAACC,OAAO,CAAC/D,QAAQ,CAAC,GAAGA,QAAQ,CAACvB,IAAI,CAAC,CAAC,GAAG,CAACuB,QAAQ,CAAC;EACpE,MAAMgE,OAAO,GAAGH,KAAK,CAACI,MAAM,CAACC,OAAO,CAAC;EAErC,oBACErH,IAAA,CAACZ,IAAI;IACHiE,GAAG,EAAEA,GAAI;IACTN,SAAS,EAAEpD,EAAE,CACX2B,KAAK,CAAC,CAAC,EACPyF,UAAU,GAAG,wBAAwB,GAAG,UAAU,EAClDD,SAAS,GAAG,EAAE,GAAG,OAAO,EACxB/D,SACF,CAAE;IAAA,GACEK,KAAK;IAAAD,QAAA,EAERgE,OAAO,CAACG,GAAG,CAAC,CAACC,KAAK,EAAExB,KAAK,kBACxB7F,KAAA,CAACd,IAAI;MAEH2D,SAAS,EAAEpD,EAAE,CACXoH,UAAU,GAAG,QAAQ,GAAG,QAAQ;MAChC;MACA;MACAD,SAAS,IAAIC,UAAU,IAAIhB,KAAK,GAAG,CAAC,IAAI,MAAM,EAC9Ce,SAAS,IAAIC,UAAU,IAAIhB,KAAK,GAAGoB,OAAO,CAACK,MAAM,GAAG,CAAC,IAAI,MAAM,EAC/DV,SAAS,IAAI,CAACC,UAAU,IAAIhB,KAAK,GAAG,CAAC,IAAI,MAAM,EAC/Ce,SAAS,IAAI,CAACC,UAAU,IAAIhB,KAAK,GAAGoB,OAAO,CAACK,MAAM,GAAG,CAAC,IAAI,MAC5D,CAAE;MAAArE,QAAA,GAED2D,SAAS,IAAIf,KAAK,GAAG,CAAC,gBACrB/F,IAAA,CAACZ,IAAI;QACH2D,SAAS,EAAEpD,EAAE,CACX4B,cAAc,CAAC,CAAC;QAChB;QACA;QACA;QACA;QACAwF,UAAU,GACN,sCAAsC,GACtC,mCACN;QACA;QACA;QAAA;QACAU,2BAA2B;QAC3BC,yBAAyB,EAAC;MAAqB,CAChD,CAAC,GACA,IAAI,EACPH,KAAK;IAAA,GA7BDxB,KA8BD,CACP;EAAC,CACE,CAAC;AAEX,CAAC,CAAC;AAEFjD,YAAY,CAAC6E,WAAW,GAAG,UAAU;AACrChE,cAAc,CAACgE,WAAW,GAAG,iBAAiB;AAC9C/D,YAAY,CAAC+D,WAAW,GAAG,eAAe;AAC1C9D,aAAa,CAAC8D,WAAW,GAAG,gBAAgB;AAC5C3D,YAAY,CAAC2D,WAAW,GAAG,eAAe;AAC1C1D,eAAe,CAAC0D,WAAW,GAAG,kBAAkB;AAChDzD,eAAe,CAACyD,WAAW,GAAG,kBAAkB;AAChDxD,aAAa,CAACwD,WAAW,GAAG,gBAAgB;AAC5CvD,aAAa,CAACuD,WAAW,GAAG,gBAAgB;AAC5CjC,iBAAiB,CAACiC,WAAW,GAAG,gBAAgB;AAChDpB,mBAAmB,CAACoB,WAAW,GAAG,mBAAmB;AACrDjB,cAAc,CAACiB,WAAW,GAAG,iBAAiB;AAC9ChB,iBAAiB,CAACgB,WAAW,GAAG,oBAAoB;AACpDf,aAAa,CAACe,WAAW,GAAG,gBAAgB;AAE5C,OAAO,MAAMC,QAAQ,GAAGC,MAAM,CAACC,MAAM,CAAChF,YAAY,EAAE;EAClDiF,MAAM,EAAEpE,cAAc;EACtBqE,IAAI,EAAEpE,YAAY;EAClBqE,KAAK,EAAEpE,aAAa;EACpBqE,IAAI,EAAElE,YAAY;EAClBmE,OAAO,EAAElE,eAAe;EACxBmE,OAAO,EAAElE,eAAe;EACxBmE,KAAK,EAAElE,aAAa;EACpBmE,KAAK,EAAElE,aAAa;EACpBmE,KAAK,EAAE7C,iBAAiB;EACxB7F,QAAQ,EAAE0G,mBAAmB;EAC7BiC,MAAM,EAAE9B,cAAc;EACtB+B,SAAS,EAAE9B,iBAAiB;EAC5B+B,KAAK,EAAE9B;AACT,CAAC,CAAC","ignoreList":[]}
|