@giddaa-housing/ui 1.0.0 → 1.2.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/css/generated/shared.css +1 -1
- package/css/giddaa.css +12 -2
- package/dist/accordion.d.ts +9 -10
- package/dist/accordion.js +41 -87
- package/dist/activity-timeline.d.ts +12 -16
- package/dist/activity-timeline.js +83 -198
- package/dist/alert.d.ts +8 -9
- package/dist/alert.js +53 -111
- package/dist/auth-layout.d.ts +4 -4
- package/dist/auth-layout.js +143 -294
- package/dist/avatar.d.ts +6 -6
- package/dist/avatar.js +49 -19
- package/dist/badge.d.ts +12 -14
- package/dist/badge.js +71 -11
- package/dist/bar-chart.d.ts +65 -67
- package/dist/bar-chart.js +232 -207
- package/dist/breadcrumb.d.ts +5 -5
- package/dist/breadcrumb.js +56 -118
- package/dist/bullet-chart.d.ts +41 -37
- package/dist/bullet-chart.js +125 -148
- package/dist/button-BZIeyUw6.d.ts +17 -0
- package/dist/button-group.d.ts +13 -16
- package/dist/button-group.js +39 -88
- package/dist/button.d.ts +2 -19
- package/dist/button.js +94 -13
- package/dist/calendar.d.ts +6 -6
- package/dist/calendar.js +138 -17
- package/dist/card.d.ts +14 -16
- package/dist/card.js +59 -145
- package/dist/carousel.d.ts +34 -35
- package/dist/carousel.js +335 -20
- package/dist/chart.d.ts +90 -63
- package/dist/chart.js +573 -28
- package/dist/checkbox.d.ts +10 -12
- package/dist/checkbox.js +82 -47
- package/dist/cn-BI_4DMBf.js +23 -0
- package/dist/collapsible.d.ts +7 -8
- package/dist/collapsible.js +22 -47
- package/dist/combobox.d.ts +10 -10
- package/dist/combobox.js +236 -44
- package/dist/cta.d.ts +12 -14
- package/dist/cta.js +175 -341
- package/dist/currency-selector.d.ts +31 -32
- package/dist/currency-selector.js +106 -184
- package/dist/data-table.d.ts +168 -0
- package/dist/data-table.js +676 -0
- package/dist/date-picker.d.ts +22 -23
- package/dist/date-picker.js +119 -192
- package/dist/details-card.d.ts +7 -7
- package/dist/details-card.js +104 -253
- package/dist/dialog.d.ts +13 -14
- package/dist/dialog.js +116 -209
- package/dist/dropdown-menu.d.ts +13 -13
- package/dist/dropdown-menu.js +180 -37
- package/dist/dropzone.d.ts +55 -55
- package/dist/dropzone.js +327 -439
- package/dist/editorial-card.d.ts +23 -25
- package/dist/editorial-card.js +129 -296
- package/dist/empty-state.d.ts +8 -9
- package/dist/empty-state.js +48 -105
- package/dist/field.d.ts +23 -25
- package/dist/field.js +110 -221
- package/dist/filter.d.ts +118 -0
- package/dist/filter.js +775 -0
- package/dist/footer.d.ts +8 -15
- package/dist/footer.js +197 -400
- package/dist/funnel-chart.d.ts +49 -48
- package/dist/funnel-chart.js +170 -189
- package/dist/gallery-indicator.d.ts +11 -12
- package/dist/gallery-indicator.js +75 -12
- package/dist/heatmap-chart.d.ts +47 -50
- package/dist/heatmap-chart.js +186 -237
- package/dist/infotip.d.ts +8 -9
- package/dist/infotip.js +33 -59
- package/dist/input-CfoEJ8A6.d.ts +12 -0
- package/dist/input-group.d.ts +16 -20
- package/dist/input-group.js +99 -23
- package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
- package/dist/input-size-context.d.ts +2 -11
- package/dist/input-size-context.js +17 -9
- package/dist/input.d.ts +2 -13
- package/dist/input.js +27 -11
- package/dist/item.d.ts +7 -8
- package/dist/item.js +22 -59
- package/dist/kpi-card.d.ts +18 -20
- package/dist/kpi-card.js +84 -192
- package/dist/label.d.ts +6 -6
- package/dist/label.js +40 -8
- package/dist/line-chart.d.ts +200 -129
- package/dist/line-chart.js +330 -105
- package/dist/list-item.d.ts +22 -0
- package/dist/list-item.js +84 -0
- package/dist/logo.d.ts +4 -4
- package/dist/logo.js +92 -9
- package/dist/map-indicator.d.ts +7 -7
- package/dist/map-indicator.js +80 -106
- package/dist/match.d.ts +10 -11
- package/dist/match.js +62 -107
- package/dist/media-gallery-hero.d.ts +40 -42
- package/dist/media-gallery-hero.js +182 -343
- package/dist/media-player.d.ts +17 -17
- package/dist/media-player.js +873 -1348
- package/dist/multi-step-form.d.ts +56 -0
- package/dist/multi-step-form.js +342 -0
- package/dist/number-input.d.ts +34 -34
- package/dist/number-input.js +64 -117
- package/dist/page-header.d.ts +10 -11
- package/dist/page-header.js +34 -79
- package/dist/pagination.d.ts +17 -21
- package/dist/pagination.js +132 -207
- package/dist/password-input.d.ts +5 -13
- package/dist/password-input.js +31 -55
- package/dist/phone-input.d.ts +19 -20
- package/dist/phone-input.js +226 -344
- package/dist/photo-gallery.d.ts +19 -19
- package/dist/photo-gallery.js +313 -449
- package/dist/picker-lzgmsNfG.js +32 -0
- package/dist/pie-chart.d.ts +121 -90
- package/dist/pie-chart.js +183 -149
- package/dist/popover.d.ts +9 -9
- package/dist/popover.js +72 -23
- package/dist/price-tag.d.ts +26 -27
- package/dist/price-tag.js +113 -173
- package/dist/progress.d.ts +16 -17
- package/dist/progress.js +169 -24
- package/dist/property-listing-card.d.ts +14 -17
- package/dist/property-listing-card.js +102 -220
- package/dist/purchase-option-card.d.ts +79 -0
- package/dist/purchase-option-card.js +176 -0
- package/dist/radar-chart.d.ts +29 -31
- package/dist/radar-chart.js +162 -137
- package/dist/radio-group.d.ts +11 -13
- package/dist/radio-group.js +46 -60
- package/dist/review-block.d.ts +14 -16
- package/dist/review-block.js +154 -10
- package/dist/rich-text-editor.d.ts +30 -14
- package/dist/rich-text-editor.js +592 -716
- package/dist/scatter-chart.d.ts +45 -47
- package/dist/scatter-chart.js +236 -240
- package/dist/search-input.d.ts +8 -16
- package/dist/search-input.js +57 -109
- package/dist/select.d.ts +8 -8
- package/dist/select.js +144 -27
- package/dist/separator.d.ts +8 -9
- package/dist/separator.js +32 -8
- package/dist/sheet.d.ts +11 -11
- package/dist/sheet.js +103 -24
- package/dist/sidebar.d.ts +32 -37
- package/dist/sidebar.js +364 -634
- package/dist/size-context-D4mYvcg8.d.ts +10 -0
- package/dist/size-context.d.ts +2 -11
- package/dist/size-context.js +17 -9
- package/dist/skeleton.d.ts +4 -5
- package/dist/skeleton.js +12 -8
- package/dist/slider.d.ts +8 -9
- package/dist/slider.js +64 -135
- package/dist/sparkline.d.ts +68 -58
- package/dist/sparkline.js +315 -251
- package/dist/stepper.d.ts +23 -24
- package/dist/stepper.js +149 -246
- package/dist/styles.css +1004 -116
- package/dist/switch.d.ts +10 -12
- package/dist/switch.js +48 -70
- package/dist/table-card.d.ts +35 -0
- package/dist/table-card.js +125 -0
- package/dist/table.d.ts +18 -14
- package/dist/table.js +117 -154
- package/dist/tabs.d.ts +33 -15
- package/dist/tabs.js +110 -18
- package/dist/tag.d.ts +21 -23
- package/dist/tag.js +103 -159
- package/dist/testimonial-block.d.ts +18 -19
- package/dist/testimonial-block.js +189 -358
- package/dist/textarea-IS_D8pXf.d.ts +11 -0
- package/dist/textarea.d.ts +2 -12
- package/dist/textarea.js +24 -11
- package/dist/time-picker.d.ts +11 -11
- package/dist/time-picker.js +245 -302
- package/dist/toast.d.ts +16 -18
- package/dist/toast.js +154 -205
- package/dist/tooltip.d.ts +8 -9
- package/dist/tooltip.js +37 -12
- package/dist/tree-map.d.ts +59 -62
- package/dist/tree-map.js +226 -269
- package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
- package/dist/waterfall-chart.d.ts +94 -97
- package/dist/waterfall-chart.js +455 -552
- package/package.json +36 -9
- package/dist/accordion.js.map +0 -1
- package/dist/activity-timeline.js.map +0 -1
- package/dist/alert.js.map +0 -1
- package/dist/auth-layout.js.map +0 -1
- package/dist/avatar.js.map +0 -1
- package/dist/badge.js.map +0 -1
- package/dist/bar-chart.js.map +0 -1
- package/dist/breadcrumb.js.map +0 -1
- package/dist/bullet-chart.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/calendar.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/carousel.js.map +0 -1
- package/dist/chart.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/chunk-322YCNVL.js +0 -278
- package/dist/chunk-322YCNVL.js.map +0 -1
- package/dist/chunk-3ACQVT7A.js +0 -25
- package/dist/chunk-3ACQVT7A.js.map +0 -1
- package/dist/chunk-3T65TLJX.js +0 -334
- package/dist/chunk-3T65TLJX.js.map +0 -1
- package/dist/chunk-6ZSGQHH2.js +0 -192
- package/dist/chunk-6ZSGQHH2.js.map +0 -1
- package/dist/chunk-7TBMLFGW.js +0 -41
- package/dist/chunk-7TBMLFGW.js.map +0 -1
- package/dist/chunk-B4H6RNDH.js +0 -135
- package/dist/chunk-B4H6RNDH.js.map +0 -1
- package/dist/chunk-BUXCGZ6X.js +0 -219
- package/dist/chunk-BUXCGZ6X.js.map +0 -1
- package/dist/chunk-CHII2QHH.js +0 -58
- package/dist/chunk-CHII2QHH.js.map +0 -1
- package/dist/chunk-DMNOXRRW.js +0 -147
- package/dist/chunk-DMNOXRRW.js.map +0 -1
- package/dist/chunk-EFSOSSIC.js +0 -130
- package/dist/chunk-EFSOSSIC.js.map +0 -1
- package/dist/chunk-FZDSVMKY.js +0 -363
- package/dist/chunk-FZDSVMKY.js.map +0 -1
- package/dist/chunk-GJOFIJS3.js +0 -246
- package/dist/chunk-GJOFIJS3.js.map +0 -1
- package/dist/chunk-HL3ZSYES.js +0 -23
- package/dist/chunk-HL3ZSYES.js.map +0 -1
- package/dist/chunk-JVLUBAPB.js +0 -129
- package/dist/chunk-JVLUBAPB.js.map +0 -1
- package/dist/chunk-KDPYSOYZ.js +0 -64
- package/dist/chunk-KDPYSOYZ.js.map +0 -1
- package/dist/chunk-KSMDANKI.js +0 -43
- package/dist/chunk-KSMDANKI.js.map +0 -1
- package/dist/chunk-MEKCCOP5.js +0 -46
- package/dist/chunk-MEKCCOP5.js.map +0 -1
- package/dist/chunk-NOFXVRWL.js +0 -451
- package/dist/chunk-NOFXVRWL.js.map +0 -1
- package/dist/chunk-PC5MHNVA.js +0 -171
- package/dist/chunk-PC5MHNVA.js.map +0 -1
- package/dist/chunk-QKAQZ2GU.js +0 -122
- package/dist/chunk-QKAQZ2GU.js.map +0 -1
- package/dist/chunk-QZHSHSVV.js +0 -26
- package/dist/chunk-QZHSHSVV.js.map +0 -1
- package/dist/chunk-RBMK26XD.js +0 -19
- package/dist/chunk-RBMK26XD.js.map +0 -1
- package/dist/chunk-SFNJGF6M.js +0 -262
- package/dist/chunk-SFNJGF6M.js.map +0 -1
- package/dist/chunk-UJJNLGTM.js +0 -112
- package/dist/chunk-UJJNLGTM.js.map +0 -1
- package/dist/chunk-VGR4ZWJ3.js +0 -418
- package/dist/chunk-VGR4ZWJ3.js.map +0 -1
- package/dist/chunk-XG47P6D4.js +0 -99
- package/dist/chunk-XG47P6D4.js.map +0 -1
- package/dist/chunk-XZZAHNVM.js +0 -21
- package/dist/chunk-XZZAHNVM.js.map +0 -1
- package/dist/chunk-Y4TTYVNE.js +0 -36
- package/dist/chunk-Y4TTYVNE.js.map +0 -1
- package/dist/chunk-YDWIHW6Q.js +0 -69
- package/dist/chunk-YDWIHW6Q.js.map +0 -1
- package/dist/collapsible.js.map +0 -1
- package/dist/combobox.js.map +0 -1
- package/dist/cta.js.map +0 -1
- package/dist/currency-selector.js.map +0 -1
- package/dist/date-picker.js.map +0 -1
- package/dist/details-card.js.map +0 -1
- package/dist/dialog.js.map +0 -1
- package/dist/dropdown-menu.js.map +0 -1
- package/dist/dropzone.js.map +0 -1
- package/dist/editorial-card.js.map +0 -1
- package/dist/empty-state.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/footer.js.map +0 -1
- package/dist/funnel-chart.js.map +0 -1
- package/dist/gallery-indicator.js.map +0 -1
- package/dist/heatmap-chart.js.map +0 -1
- package/dist/infotip.js.map +0 -1
- package/dist/input-group.js.map +0 -1
- package/dist/input-size-context.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/item.js.map +0 -1
- package/dist/kpi-card.js.map +0 -1
- package/dist/label.js.map +0 -1
- package/dist/line-chart.js.map +0 -1
- package/dist/logo.js.map +0 -1
- package/dist/map-indicator.js.map +0 -1
- package/dist/match.js.map +0 -1
- package/dist/media-gallery-hero.js.map +0 -1
- package/dist/media-player.js.map +0 -1
- package/dist/number-input.js.map +0 -1
- package/dist/page-header.js.map +0 -1
- package/dist/pagination.js.map +0 -1
- package/dist/password-input.js.map +0 -1
- package/dist/phone-input.js.map +0 -1
- package/dist/photo-gallery.js.map +0 -1
- package/dist/pie-chart.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/price-tag.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/property-listing-card.js.map +0 -1
- package/dist/radar-chart.js.map +0 -1
- package/dist/radio-group.js.map +0 -1
- package/dist/review-block.js.map +0 -1
- package/dist/rich-text-editor.js.map +0 -1
- package/dist/scatter-chart.js.map +0 -1
- package/dist/search-input.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/separator.js.map +0 -1
- package/dist/sheet.js.map +0 -1
- package/dist/sidebar.js.map +0 -1
- package/dist/size-context.js.map +0 -1
- package/dist/skeleton.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/sparkline.js.map +0 -1
- package/dist/stepper.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/tab-list.d.ts +0 -38
- package/dist/tab-list.js +0 -123
- package/dist/tab-list.js.map +0 -1
- package/dist/table.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/tag.js.map +0 -1
- package/dist/testimonial-block.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/time-picker.js.map +0 -1
- package/dist/toast.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/tree-map.js.map +0 -1
- package/dist/waterfall-chart.js.map +0 -1
package/dist/chunk-NOFXVRWL.js
DELETED
|
@@ -1,451 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
SizeProvider,
|
|
3
|
-
useComponentSize
|
|
4
|
-
} from "./chunk-HL3ZSYES.js";
|
|
5
|
-
import {
|
|
6
|
-
cn
|
|
7
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
8
|
-
|
|
9
|
-
// src/chart.tsx
|
|
10
|
-
import { cva } from "class-variance-authority";
|
|
11
|
-
import * as React from "react";
|
|
12
|
-
import * as RechartsPrimitive from "recharts";
|
|
13
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
-
var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
|
|
15
|
-
function formatChartValue(value, type) {
|
|
16
|
-
if (Array.isArray(value)) {
|
|
17
|
-
return value.join(", ");
|
|
18
|
-
}
|
|
19
|
-
if (typeof value !== "number") {
|
|
20
|
-
return value == null ? "" : String(value);
|
|
21
|
-
}
|
|
22
|
-
switch (type) {
|
|
23
|
-
case "currency":
|
|
24
|
-
return `\u20A6${value.toLocaleString("en-NG")}`;
|
|
25
|
-
case "percentage":
|
|
26
|
-
return `${value.toLocaleString("en-NG", {
|
|
27
|
-
minimumFractionDigits: 1,
|
|
28
|
-
maximumFractionDigits: 1
|
|
29
|
-
})}%`;
|
|
30
|
-
default:
|
|
31
|
-
return value.toLocaleString("en-NG");
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
var THEMES = { light: "", dark: ".dark" };
|
|
35
|
-
var INITIAL_DIMENSION = { width: 320, height: 200 };
|
|
36
|
-
var ChartContext = React.createContext(null);
|
|
37
|
-
function useChart() {
|
|
38
|
-
const context = React.useContext(ChartContext);
|
|
39
|
-
if (!context) {
|
|
40
|
-
throw new Error("useChart must be used within a <ChartContainer />");
|
|
41
|
-
}
|
|
42
|
-
return context;
|
|
43
|
-
}
|
|
44
|
-
var chartCardVariants = cva(
|
|
45
|
-
"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
|
|
46
|
-
{
|
|
47
|
-
variants: {
|
|
48
|
-
size: {
|
|
49
|
-
sm: "gap-3 p-4",
|
|
50
|
-
md: "gap-4 p-5",
|
|
51
|
-
lg: "gap-5 p-6"
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
defaultVariants: { size: "md" }
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
function ChartCard({
|
|
58
|
-
className,
|
|
59
|
-
size,
|
|
60
|
-
children,
|
|
61
|
-
...props
|
|
62
|
-
}) {
|
|
63
|
-
const resolvedSize = useComponentSize(size);
|
|
64
|
-
return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(
|
|
65
|
-
"section",
|
|
66
|
-
{
|
|
67
|
-
"data-slot": "chart-card",
|
|
68
|
-
className: cn(chartCardVariants({ size: resolvedSize }), className),
|
|
69
|
-
...props,
|
|
70
|
-
children
|
|
71
|
-
}
|
|
72
|
-
) });
|
|
73
|
-
}
|
|
74
|
-
function ChartHeader({ className, ...props }) {
|
|
75
|
-
return /* @__PURE__ */ jsx(
|
|
76
|
-
"div",
|
|
77
|
-
{
|
|
78
|
-
"data-slot": "chart-header",
|
|
79
|
-
className: cn("flex min-w-0 flex-col gap-1", className),
|
|
80
|
-
...props
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
}
|
|
84
|
-
var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
|
|
85
|
-
variants: {
|
|
86
|
-
size: {
|
|
87
|
-
sm: "text-gdt-md",
|
|
88
|
-
md: "text-gdt-lg",
|
|
89
|
-
lg: "text-gdt-h5"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
defaultVariants: { size: "md" }
|
|
93
|
-
});
|
|
94
|
-
function ChartTitle({
|
|
95
|
-
className,
|
|
96
|
-
size,
|
|
97
|
-
...props
|
|
98
|
-
}) {
|
|
99
|
-
const resolvedSize = useComponentSize(size);
|
|
100
|
-
return /* @__PURE__ */ jsx(
|
|
101
|
-
"h3",
|
|
102
|
-
{
|
|
103
|
-
"data-slot": "chart-title",
|
|
104
|
-
className: cn(chartTitleVariants({ size: resolvedSize }), className),
|
|
105
|
-
...props
|
|
106
|
-
}
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
|
|
110
|
-
variants: {
|
|
111
|
-
size: {
|
|
112
|
-
sm: "text-gdt-xs",
|
|
113
|
-
md: "text-gdt-sm",
|
|
114
|
-
lg: "text-gdt-sm"
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
defaultVariants: { size: "md" }
|
|
118
|
-
});
|
|
119
|
-
function ChartDescription({
|
|
120
|
-
className,
|
|
121
|
-
size,
|
|
122
|
-
...props
|
|
123
|
-
}) {
|
|
124
|
-
const resolvedSize = useComponentSize(size);
|
|
125
|
-
return /* @__PURE__ */ jsx(
|
|
126
|
-
"p",
|
|
127
|
-
{
|
|
128
|
-
"data-slot": "chart-description",
|
|
129
|
-
className: cn(
|
|
130
|
-
chartDescriptionVariants({ size: resolvedSize }),
|
|
131
|
-
className
|
|
132
|
-
),
|
|
133
|
-
...props
|
|
134
|
-
}
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
function ChartContainer({
|
|
138
|
-
id,
|
|
139
|
-
className,
|
|
140
|
-
children,
|
|
141
|
-
config,
|
|
142
|
-
initialDimension = INITIAL_DIMENSION,
|
|
143
|
-
...props
|
|
144
|
-
}) {
|
|
145
|
-
const uniqueId = React.useId();
|
|
146
|
-
const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
|
|
147
|
-
return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
|
|
148
|
-
"div",
|
|
149
|
-
{
|
|
150
|
-
"data-slot": "chart",
|
|
151
|
-
"data-chart": chartId,
|
|
152
|
-
className: cn(
|
|
153
|
-
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
|
154
|
-
className
|
|
155
|
-
),
|
|
156
|
-
...props,
|
|
157
|
-
children: [
|
|
158
|
-
/* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
|
|
159
|
-
/* @__PURE__ */ jsx(
|
|
160
|
-
RechartsPrimitive.ResponsiveContainer,
|
|
161
|
-
{
|
|
162
|
-
initialDimension,
|
|
163
|
-
children
|
|
164
|
-
}
|
|
165
|
-
)
|
|
166
|
-
]
|
|
167
|
-
}
|
|
168
|
-
) });
|
|
169
|
-
}
|
|
170
|
-
var ChartStyle = ({ id, config }) => {
|
|
171
|
-
const colorConfig = Object.entries(config).filter(
|
|
172
|
-
([, config2]) => config2.theme ?? config2.color
|
|
173
|
-
);
|
|
174
|
-
if (!colorConfig.length) {
|
|
175
|
-
return null;
|
|
176
|
-
}
|
|
177
|
-
const styleContent = Object.entries(THEMES).map(
|
|
178
|
-
([theme, prefix]) => `
|
|
179
|
-
${prefix} [data-chart=${id}] {
|
|
180
|
-
${colorConfig.map(([key, itemConfig]) => {
|
|
181
|
-
const color = itemConfig.theme?.[theme] ?? itemConfig.color;
|
|
182
|
-
return color ? ` --color-${key}: ${color};` : null;
|
|
183
|
-
}).join("\n")}
|
|
184
|
-
}
|
|
185
|
-
`
|
|
186
|
-
).join("\n");
|
|
187
|
-
return /* @__PURE__ */ jsx("style", { children: styleContent });
|
|
188
|
-
};
|
|
189
|
-
var ChartTooltip = RechartsPrimitive.Tooltip;
|
|
190
|
-
var chartTooltipVariants = cva(
|
|
191
|
-
"flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
|
|
192
|
-
{
|
|
193
|
-
variants: {
|
|
194
|
-
size: {
|
|
195
|
-
xs: "gap-0.5 rounded-md p-2",
|
|
196
|
-
sm: "gap-0.5 rounded-md p-2.5",
|
|
197
|
-
md: "gap-1 rounded-lg p-3",
|
|
198
|
-
lg: "gap-1 rounded-xl p-3.5"
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
defaultVariants: {
|
|
202
|
-
size: "md"
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
);
|
|
206
|
-
var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
|
|
207
|
-
variants: {
|
|
208
|
-
size: {
|
|
209
|
-
xs: "size-1.5",
|
|
210
|
-
sm: "size-2",
|
|
211
|
-
md: "size-2.5",
|
|
212
|
-
lg: "size-2.5"
|
|
213
|
-
}
|
|
214
|
-
},
|
|
215
|
-
defaultVariants: {
|
|
216
|
-
size: "md"
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
|
|
220
|
-
variants: {
|
|
221
|
-
size: {
|
|
222
|
-
xs: "text-gdt-xs",
|
|
223
|
-
sm: "text-gdt-xs",
|
|
224
|
-
md: "text-gdt-sm",
|
|
225
|
-
lg: "text-gdt-sm"
|
|
226
|
-
}
|
|
227
|
-
},
|
|
228
|
-
defaultVariants: { size: "md" }
|
|
229
|
-
});
|
|
230
|
-
var chartTooltipValueVariants = cva(
|
|
231
|
-
"font-extrabold text-fg-primary tabular-nums",
|
|
232
|
-
{
|
|
233
|
-
variants: {
|
|
234
|
-
size: {
|
|
235
|
-
xs: "text-gdt-sm",
|
|
236
|
-
sm: "text-gdt-md",
|
|
237
|
-
md: "text-gdt-lg",
|
|
238
|
-
lg: "text-gdt-xl"
|
|
239
|
-
}
|
|
240
|
-
},
|
|
241
|
-
defaultVariants: { size: "md" }
|
|
242
|
-
}
|
|
243
|
-
);
|
|
244
|
-
function ChartTooltipContent({
|
|
245
|
-
active,
|
|
246
|
-
payload,
|
|
247
|
-
className,
|
|
248
|
-
hideIndicator = false,
|
|
249
|
-
label,
|
|
250
|
-
labelFormatter,
|
|
251
|
-
formatter,
|
|
252
|
-
color,
|
|
253
|
-
nameKey,
|
|
254
|
-
valueType = "number",
|
|
255
|
-
size = "md"
|
|
256
|
-
}) {
|
|
257
|
-
const { config } = useChart();
|
|
258
|
-
if (!active || !payload?.length) {
|
|
259
|
-
return null;
|
|
260
|
-
}
|
|
261
|
-
const [item] = payload.filter((entry) => entry.type !== "none");
|
|
262
|
-
if (!item) {
|
|
263
|
-
return null;
|
|
264
|
-
}
|
|
265
|
-
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
|
|
266
|
-
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
267
|
-
const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
|
|
268
|
-
const metricLabel = itemConfig?.label ?? item.name;
|
|
269
|
-
const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
|
|
270
|
-
const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
|
|
271
|
-
return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
|
|
272
|
-
metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
|
|
273
|
-
!hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
|
|
274
|
-
"span",
|
|
275
|
-
{
|
|
276
|
-
"aria-hidden": "true",
|
|
277
|
-
className: cn(chartTooltipDotVariants({ size })),
|
|
278
|
-
style: { backgroundColor: dotColor }
|
|
279
|
-
}
|
|
280
|
-
)),
|
|
281
|
-
/* @__PURE__ */ jsx("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
|
|
282
|
-
] }),
|
|
283
|
-
/* @__PURE__ */ jsx("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
|
|
284
|
-
periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
|
|
285
|
-
] });
|
|
286
|
-
}
|
|
287
|
-
var ChartLegend = RechartsPrimitive.Legend;
|
|
288
|
-
var chartLegendItemVariants = cva(
|
|
289
|
-
"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
|
|
290
|
-
{
|
|
291
|
-
variants: {
|
|
292
|
-
size: {
|
|
293
|
-
sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
|
|
294
|
-
md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
|
|
295
|
-
},
|
|
296
|
-
interactive: {
|
|
297
|
-
true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
|
|
298
|
-
false: ""
|
|
299
|
-
},
|
|
300
|
-
inactive: {
|
|
301
|
-
true: "text-fg-caption-placeholder line-through",
|
|
302
|
-
false: ""
|
|
303
|
-
}
|
|
304
|
-
},
|
|
305
|
-
defaultVariants: {
|
|
306
|
-
size: "md",
|
|
307
|
-
interactive: false,
|
|
308
|
-
inactive: false
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
);
|
|
312
|
-
var chartLegendMarkerSizeVariants = cva("shrink-0", {
|
|
313
|
-
variants: {
|
|
314
|
-
marker: {
|
|
315
|
-
dot: "rounded-full",
|
|
316
|
-
square: "rounded-[2px]",
|
|
317
|
-
line: "rounded-full"
|
|
318
|
-
},
|
|
319
|
-
size: {
|
|
320
|
-
sm: "",
|
|
321
|
-
md: ""
|
|
322
|
-
}
|
|
323
|
-
},
|
|
324
|
-
compoundVariants: [
|
|
325
|
-
{ marker: ["dot", "square"], size: "sm", className: "size-2" },
|
|
326
|
-
{ marker: ["dot", "square"], size: "md", className: "size-2.5" },
|
|
327
|
-
{ marker: "line", size: "sm", className: "h-[3px] w-3" },
|
|
328
|
-
{ marker: "line", size: "md", className: "h-[3px] w-3.5" }
|
|
329
|
-
],
|
|
330
|
-
defaultVariants: { marker: "dot", size: "md" }
|
|
331
|
-
});
|
|
332
|
-
function ChartLegendContent({
|
|
333
|
-
className,
|
|
334
|
-
hideIcon = false,
|
|
335
|
-
payload,
|
|
336
|
-
verticalAlign = "bottom",
|
|
337
|
-
nameKey,
|
|
338
|
-
marker = "dot",
|
|
339
|
-
size = "md",
|
|
340
|
-
orientation = "horizontal",
|
|
341
|
-
inactiveKeys,
|
|
342
|
-
onToggle
|
|
343
|
-
}) {
|
|
344
|
-
const { config } = useChart();
|
|
345
|
-
if (!payload?.length) {
|
|
346
|
-
return null;
|
|
347
|
-
}
|
|
348
|
-
const inactiveSet = inactiveKeys ? new Set(inactiveKeys) : void 0;
|
|
349
|
-
const interactive = Boolean(onToggle);
|
|
350
|
-
return /* @__PURE__ */ jsx(
|
|
351
|
-
"div",
|
|
352
|
-
{
|
|
353
|
-
className: cn(
|
|
354
|
-
"flex",
|
|
355
|
-
orientation === "vertical" ? "flex-col items-start gap-0.5" : "flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5",
|
|
356
|
-
verticalAlign === "top" ? "pb-3" : "pt-3",
|
|
357
|
-
className
|
|
358
|
-
),
|
|
359
|
-
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
360
|
-
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
361
|
-
const itemKey = `${item.dataKey ?? item.value ?? index}`;
|
|
362
|
-
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
363
|
-
const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
|
|
364
|
-
const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
|
|
365
|
-
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
366
|
-
itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
|
|
367
|
-
"span",
|
|
368
|
-
{
|
|
369
|
-
"aria-hidden": "true",
|
|
370
|
-
className: cn(
|
|
371
|
-
chartLegendMarkerSizeVariants({ marker, size })
|
|
372
|
-
),
|
|
373
|
-
style: { backgroundColor: markerColor }
|
|
374
|
-
}
|
|
375
|
-
),
|
|
376
|
-
itemConfig?.label ?? item.value
|
|
377
|
-
] });
|
|
378
|
-
if (interactive) {
|
|
379
|
-
return /* @__PURE__ */ jsx(
|
|
380
|
-
"button",
|
|
381
|
-
{
|
|
382
|
-
type: "button",
|
|
383
|
-
"aria-pressed": !inactive,
|
|
384
|
-
onClick: () => onToggle?.(key),
|
|
385
|
-
className: cn(
|
|
386
|
-
chartLegendItemVariants({ size, interactive, inactive })
|
|
387
|
-
),
|
|
388
|
-
children: content
|
|
389
|
-
},
|
|
390
|
-
itemKey
|
|
391
|
-
);
|
|
392
|
-
}
|
|
393
|
-
return /* @__PURE__ */ jsx(
|
|
394
|
-
"div",
|
|
395
|
-
{
|
|
396
|
-
className: cn(
|
|
397
|
-
chartLegendItemVariants({ size, interactive, inactive })
|
|
398
|
-
),
|
|
399
|
-
children: content
|
|
400
|
-
},
|
|
401
|
-
itemKey
|
|
402
|
-
);
|
|
403
|
-
})
|
|
404
|
-
}
|
|
405
|
-
);
|
|
406
|
-
}
|
|
407
|
-
function cartesianAxisProps(layout) {
|
|
408
|
-
const tick = { fontSize: layout.tickFontSize };
|
|
409
|
-
return {
|
|
410
|
-
xAxis: {
|
|
411
|
-
tickLine: false,
|
|
412
|
-
axisLine: false,
|
|
413
|
-
tickMargin: layout.tickMargin,
|
|
414
|
-
tick
|
|
415
|
-
},
|
|
416
|
-
yAxis: {
|
|
417
|
-
tickLine: false,
|
|
418
|
-
axisLine: false,
|
|
419
|
-
width: layout.yAxisWidth,
|
|
420
|
-
tick
|
|
421
|
-
}
|
|
422
|
-
};
|
|
423
|
-
}
|
|
424
|
-
function getPayloadConfigFromPayload(config, payload, key) {
|
|
425
|
-
if (typeof payload !== "object" || payload === null) {
|
|
426
|
-
return void 0;
|
|
427
|
-
}
|
|
428
|
-
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
|
|
429
|
-
let configLabelKey = key;
|
|
430
|
-
if (key in payload && typeof payload[key] === "string") {
|
|
431
|
-
configLabelKey = payload[key];
|
|
432
|
-
} else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
|
|
433
|
-
configLabelKey = payloadPayload[key];
|
|
434
|
-
}
|
|
435
|
-
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
export {
|
|
439
|
-
ChartCard,
|
|
440
|
-
ChartHeader,
|
|
441
|
-
ChartTitle,
|
|
442
|
-
ChartDescription,
|
|
443
|
-
ChartContainer,
|
|
444
|
-
ChartStyle,
|
|
445
|
-
ChartTooltip,
|
|
446
|
-
ChartTooltipContent,
|
|
447
|
-
ChartLegend,
|
|
448
|
-
ChartLegendContent,
|
|
449
|
-
cartesianAxisProps
|
|
450
|
-
};
|
|
451
|
-
//# sourceMappingURL=chunk-NOFXVRWL.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"./lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n * <ChartHeader>\n * <ChartTitle>Revenue Overview</ChartTitle>\n * <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n * </ChartHeader>\n * <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? ` --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n * const chart = useBarChartLayout();\n * <XAxis dataKey=\"month\" {...chart.xAxis} />\n * <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n"],"mappings":"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","names":["config"]}
|
package/dist/chunk-PC5MHNVA.js
DELETED
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Button
|
|
3
|
-
} from "./chunk-B4H6RNDH.js";
|
|
4
|
-
import {
|
|
5
|
-
SizeProvider
|
|
6
|
-
} from "./chunk-HL3ZSYES.js";
|
|
7
|
-
import {
|
|
8
|
-
cn
|
|
9
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
10
|
-
|
|
11
|
-
// src/sheet.tsx
|
|
12
|
-
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
13
|
-
import { cva } from "class-variance-authority";
|
|
14
|
-
import { XIcon } from "lucide-react";
|
|
15
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
-
function Sheet({ ...props }) {
|
|
17
|
-
return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
18
|
-
}
|
|
19
|
-
function SheetTrigger({ ...props }) {
|
|
20
|
-
return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
21
|
-
}
|
|
22
|
-
function SheetClose({ ...props }) {
|
|
23
|
-
return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
|
|
24
|
-
}
|
|
25
|
-
function SheetPortal({ ...props }) {
|
|
26
|
-
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
27
|
-
}
|
|
28
|
-
function SheetOverlay({ className, ...props }) {
|
|
29
|
-
return /* @__PURE__ */ jsx(
|
|
30
|
-
SheetPrimitive.Backdrop,
|
|
31
|
-
{
|
|
32
|
-
"data-slot": "sheet-overlay",
|
|
33
|
-
className: cn(
|
|
34
|
-
"fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl",
|
|
35
|
-
className
|
|
36
|
-
),
|
|
37
|
-
...props
|
|
38
|
-
}
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
var sheetContentVariants = cva(
|
|
42
|
-
"group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)",
|
|
43
|
-
{
|
|
44
|
-
variants: {
|
|
45
|
-
size: {
|
|
46
|
-
sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
|
|
47
|
-
md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
|
|
48
|
-
lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
|
|
49
|
-
fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
defaultVariants: {
|
|
53
|
-
size: "md"
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
function SheetContent({
|
|
58
|
-
className,
|
|
59
|
-
children,
|
|
60
|
-
side = "left",
|
|
61
|
-
size = "md",
|
|
62
|
-
showCloseButton = true,
|
|
63
|
-
...props
|
|
64
|
-
}) {
|
|
65
|
-
const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
|
|
66
|
-
const contentSize = resolvedSize === "fullscreen" ? "lg" : resolvedSize;
|
|
67
|
-
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
68
|
-
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
69
|
-
/* @__PURE__ */ jsx(SizeProvider, { size: contentSize, children: /* @__PURE__ */ jsxs(
|
|
70
|
-
SheetPrimitive.Popup,
|
|
71
|
-
{
|
|
72
|
-
"data-slot": "sheet-content",
|
|
73
|
-
"data-side": side,
|
|
74
|
-
"data-size": resolvedSize,
|
|
75
|
-
className: cn(
|
|
76
|
-
sheetContentVariants({ size: resolvedSize }),
|
|
77
|
-
className
|
|
78
|
-
),
|
|
79
|
-
...props,
|
|
80
|
-
children: [
|
|
81
|
-
children,
|
|
82
|
-
showCloseButton && /* @__PURE__ */ jsx(
|
|
83
|
-
SheetPrimitive.Close,
|
|
84
|
-
{
|
|
85
|
-
"data-slot": "sheet-close",
|
|
86
|
-
render: /* @__PURE__ */ jsxs(
|
|
87
|
-
Button,
|
|
88
|
-
{
|
|
89
|
-
variant: "ghost",
|
|
90
|
-
className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
|
|
91
|
-
size: "icon-sm",
|
|
92
|
-
children: [
|
|
93
|
-
/* @__PURE__ */ jsx(XIcon, {}),
|
|
94
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
95
|
-
]
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
]
|
|
101
|
-
}
|
|
102
|
-
) })
|
|
103
|
-
] });
|
|
104
|
-
}
|
|
105
|
-
function SheetHeader({ className, ...props }) {
|
|
106
|
-
return /* @__PURE__ */ jsx(
|
|
107
|
-
"div",
|
|
108
|
-
{
|
|
109
|
-
"data-slot": "sheet-header",
|
|
110
|
-
className: cn(
|
|
111
|
-
"flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2",
|
|
112
|
-
className
|
|
113
|
-
),
|
|
114
|
-
...props
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
function SheetFooter({ className, ...props }) {
|
|
119
|
-
return /* @__PURE__ */ jsx(
|
|
120
|
-
"div",
|
|
121
|
-
{
|
|
122
|
-
"data-slot": "sheet-footer",
|
|
123
|
-
className: cn(
|
|
124
|
-
"mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4",
|
|
125
|
-
className
|
|
126
|
-
),
|
|
127
|
-
...props
|
|
128
|
-
}
|
|
129
|
-
);
|
|
130
|
-
}
|
|
131
|
-
function SheetTitle({ className, ...props }) {
|
|
132
|
-
return /* @__PURE__ */ jsx(
|
|
133
|
-
SheetPrimitive.Title,
|
|
134
|
-
{
|
|
135
|
-
"data-slot": "sheet-title",
|
|
136
|
-
className: cn(
|
|
137
|
-
"font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5",
|
|
138
|
-
className
|
|
139
|
-
),
|
|
140
|
-
...props
|
|
141
|
-
}
|
|
142
|
-
);
|
|
143
|
-
}
|
|
144
|
-
function SheetDescription({
|
|
145
|
-
className,
|
|
146
|
-
...props
|
|
147
|
-
}) {
|
|
148
|
-
return /* @__PURE__ */ jsx(
|
|
149
|
-
SheetPrimitive.Description,
|
|
150
|
-
{
|
|
151
|
-
"data-slot": "sheet-description",
|
|
152
|
-
className: cn(
|
|
153
|
-
"text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs",
|
|
154
|
-
className
|
|
155
|
-
),
|
|
156
|
-
...props
|
|
157
|
-
}
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
export {
|
|
162
|
-
Sheet,
|
|
163
|
-
SheetTrigger,
|
|
164
|
-
SheetClose,
|
|
165
|
-
SheetContent,
|
|
166
|
-
SheetHeader,
|
|
167
|
-
SheetFooter,
|
|
168
|
-
SheetTitle,
|
|
169
|
-
SheetDescription
|
|
170
|
-
};
|
|
171
|
-
//# sourceMappingURL=chunk-PC5MHNVA.js.map
|