@giddaa-housing/ui 1.0.0 → 1.1.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/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 +33 -33
- package/dist/bullet-chart.js +121 -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 +58 -59
- package/dist/chart.js +376 -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 +164 -0
- package/dist/data-table.js +673 -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 +38 -41
- package/dist/funnel-chart.js +167 -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 +88 -89
- package/dist/line-chart.js +142 -104
- 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 +61 -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 +60 -60
- package/dist/pie-chart.js +140 -148
- 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/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 +43 -46
- package/dist/sparkline.js +221 -251
- package/dist/stepper.d.ts +23 -24
- package/dist/stepper.js +149 -246
- package/dist/styles.css +510 -108
- 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 +113 -154
- package/dist/tabs.d.ts +23 -15
- package/dist/tabs.js +71 -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 +54 -57
- package/dist/tree-map.js +227 -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 +28 -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/toast.js
CHANGED
|
@@ -1,225 +1,174 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-B4H6RNDH.js";
|
|
4
|
-
import "./chunk-HL3ZSYES.js";
|
|
5
|
-
import {
|
|
6
|
-
cn
|
|
7
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
8
|
-
|
|
9
|
-
// src/toast.tsx
|
|
10
|
-
import { Toast as BaseToast } from "@base-ui/react/toast";
|
|
1
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
2
|
+
import { Button } from "./button.js";
|
|
11
3
|
import { Check, Info, X } from "lucide-react";
|
|
12
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
5
|
+
import { Toast } from "@base-ui/react/toast";
|
|
6
|
+
//#region src/toast.tsx
|
|
7
|
+
const DEFAULT_TOAST_SIDE = "top";
|
|
8
|
+
const DEFAULT_TOAST_ALIGN = "end";
|
|
9
|
+
const toastManager = Toast.createToastManager();
|
|
10
|
+
const toast = Object.assign((options) => toastManager.add(options), {
|
|
11
|
+
success: (options) => toastManager.add({
|
|
12
|
+
...options,
|
|
13
|
+
data: {
|
|
14
|
+
type: "success",
|
|
15
|
+
...options.data
|
|
16
|
+
}
|
|
17
|
+
}),
|
|
18
|
+
info: (options) => toastManager.add({
|
|
19
|
+
...options,
|
|
20
|
+
data: {
|
|
21
|
+
type: "info",
|
|
22
|
+
...options.data
|
|
23
|
+
}
|
|
24
|
+
}),
|
|
25
|
+
warning: (options) => toastManager.add({
|
|
26
|
+
...options,
|
|
27
|
+
data: {
|
|
28
|
+
type: "warning",
|
|
29
|
+
...options.data
|
|
30
|
+
}
|
|
31
|
+
}),
|
|
32
|
+
error: (options) => toastManager.add({
|
|
33
|
+
...options,
|
|
34
|
+
data: {
|
|
35
|
+
type: "error",
|
|
36
|
+
...options.data
|
|
37
|
+
}
|
|
38
|
+
}),
|
|
39
|
+
loading: (options) => toastManager.add({
|
|
40
|
+
...options,
|
|
41
|
+
data: {
|
|
42
|
+
type: "loading",
|
|
43
|
+
...options.data
|
|
44
|
+
}
|
|
45
|
+
}),
|
|
46
|
+
dismiss: (toastId) => toastManager.close(toastId?.toString()),
|
|
47
|
+
update: (toastId, options) => toastManager.update(toastId.toString(), options),
|
|
48
|
+
promise: toastManager.promise
|
|
49
|
+
});
|
|
44
50
|
function ToastProvider({ children }) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
51
|
+
return /* @__PURE__ */ jsxs(Toast.Provider, {
|
|
52
|
+
limit: 4,
|
|
53
|
+
timeout: 5e3,
|
|
54
|
+
toastManager,
|
|
55
|
+
children: [children, /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
|
|
56
|
+
className: "fixed inset-0 z-9999 pointer-events-none outline-none",
|
|
57
|
+
children: /* @__PURE__ */ jsx(ToastList, {})
|
|
58
|
+
}) })]
|
|
59
|
+
});
|
|
49
60
|
}
|
|
50
61
|
function ToastList() {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
item.data?.type === "success" && "text-fg-brand",
|
|
100
|
-
item.data?.type === "info" && "text-fg-primary",
|
|
101
|
-
item.data?.type === "warning" && "text-fg-accent",
|
|
102
|
-
item.data?.type === "error" && "text-fg-danger"
|
|
103
|
-
)
|
|
104
|
-
}
|
|
105
|
-
)
|
|
106
|
-
] }),
|
|
107
|
-
/* @__PURE__ */ jsx(
|
|
108
|
-
BaseToast.Close,
|
|
109
|
-
{
|
|
110
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs" }),
|
|
111
|
-
"aria-label": "Close toast",
|
|
112
|
-
children: /* @__PURE__ */ jsx(X, { className: "size-4" })
|
|
113
|
-
}
|
|
114
|
-
)
|
|
115
|
-
]
|
|
116
|
-
}
|
|
117
|
-
)
|
|
118
|
-
},
|
|
119
|
-
item.id
|
|
120
|
-
);
|
|
121
|
-
});
|
|
62
|
+
const { toasts } = Toast.useToastManager();
|
|
63
|
+
const placementStacks = /* @__PURE__ */ new Map();
|
|
64
|
+
return toasts.map((item) => {
|
|
65
|
+
const placement = getToastPlacement(item);
|
|
66
|
+
const stack = placementStacks.get(placement.key) ?? {
|
|
67
|
+
domIndex: 0,
|
|
68
|
+
visibleIndex: 0,
|
|
69
|
+
offsetY: 0,
|
|
70
|
+
frontmostHeight: item.height
|
|
71
|
+
};
|
|
72
|
+
const style = {
|
|
73
|
+
"--toast-placement-index": item.transitionStatus === "ending" ? stack.domIndex : stack.visibleIndex,
|
|
74
|
+
"--toast-placement-offset-y": `${stack.offsetY}px`,
|
|
75
|
+
"--toast-placement-frontmost-height": stack.frontmostHeight ? `${stack.frontmostHeight}px` : void 0
|
|
76
|
+
};
|
|
77
|
+
stack.offsetY += item.height ?? 0;
|
|
78
|
+
stack.domIndex += 1;
|
|
79
|
+
if (item.transitionStatus !== "ending") stack.visibleIndex += 1;
|
|
80
|
+
placementStacks.set(placement.key, stack);
|
|
81
|
+
return /* @__PURE__ */ jsx(Toast.Root, {
|
|
82
|
+
toast: item,
|
|
83
|
+
className: cn(toastRootBaseClassName, getToastPositionClassName(placement), getToastStackClassName(placement), getToastExitClassName(placement.side)),
|
|
84
|
+
swipeDirection: getSwipeDirections(item),
|
|
85
|
+
style,
|
|
86
|
+
children: /* @__PURE__ */ jsxs(Toast.Content, {
|
|
87
|
+
className: "grid grid-cols-[16px_minmax(0,1fr)_24px] items-start gap-3 overflow-hidden px-2.5 py-3.5 pl-3 transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100",
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(ToastIcon, { type: item.data?.type }),
|
|
90
|
+
/* @__PURE__ */ jsxs("div", {
|
|
91
|
+
className: "min-w-0 flex flex-col gap-1.5",
|
|
92
|
+
children: [
|
|
93
|
+
item.title ? /* @__PURE__ */ jsx(Toast.Title, { className: "text-gdt-sm font-semibold text-fg-primary" }) : null,
|
|
94
|
+
item.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "text-gdt-sm text-fg-secondary" }) : null,
|
|
95
|
+
/* @__PURE__ */ jsx(Toast.Action, { className: cn("cursor-pointer border-0 bg-transparent p-0 font-inherit text-gdt-sm font-semibold inline-flex w-fit items-center hover:underline underline-offset-2", item.data?.type === "success" && "text-fg-brand", item.data?.type === "info" && "text-fg-primary", item.data?.type === "warning" && "text-fg-accent", item.data?.type === "error" && "text-fg-danger") })
|
|
96
|
+
]
|
|
97
|
+
}),
|
|
98
|
+
/* @__PURE__ */ jsx(Toast.Close, {
|
|
99
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
100
|
+
variant: "ghost",
|
|
101
|
+
size: "icon-xs"
|
|
102
|
+
}),
|
|
103
|
+
"aria-label": "Close toast",
|
|
104
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-4" })
|
|
105
|
+
})
|
|
106
|
+
]
|
|
107
|
+
})
|
|
108
|
+
}, item.id);
|
|
109
|
+
});
|
|
122
110
|
}
|
|
123
111
|
function ToastIcon({ type }) {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
112
|
+
if (!type) return null;
|
|
113
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
114
|
+
className: cn("inline-flex size-5 items-center justify-center rounded-full text-canvas", type === "success" && "bg-status-success", type === "info" && "bg-status-info", type === "warning" && "bg-status-warning text-fg-on-accent", type === "error" && "bg-status-danger"),
|
|
115
|
+
"aria-hidden": "true",
|
|
116
|
+
children: [
|
|
117
|
+
type === "success" ? /* @__PURE__ */ jsx(Check, {
|
|
118
|
+
size: 10,
|
|
119
|
+
strokeWidth: 3
|
|
120
|
+
}) : null,
|
|
121
|
+
type === "info" ? /* @__PURE__ */ jsx(Info, {
|
|
122
|
+
size: 11,
|
|
123
|
+
strokeWidth: 2.8
|
|
124
|
+
}) : null,
|
|
125
|
+
type === "warning" ? /* @__PURE__ */ jsx("span", {
|
|
126
|
+
className: "text-[11px] leading-none font-extrabold",
|
|
127
|
+
children: "!"
|
|
128
|
+
}) : null,
|
|
129
|
+
type === "error" ? /* @__PURE__ */ jsx(X, {
|
|
130
|
+
size: 10,
|
|
131
|
+
strokeWidth: 3
|
|
132
|
+
}) : null
|
|
133
|
+
]
|
|
134
|
+
});
|
|
144
135
|
}
|
|
145
|
-
|
|
136
|
+
const toastRootBaseClassName = "[--gap:12px] [--peek:12px] [--anchor-x:0px] [--anchor-y:0px] [--scale:calc(max(0,1-(var(--toast-placement-index)*0.04)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-placement-frontmost-height,var(--toast-height))] absolute z-[calc(1000-var(--toast-placement-index))] h-[var(--height)] min-h-[var(--height)] w-[min(335px,calc(100vw-32px))] overflow-visible rounded-lg border border-line bg-surface-overlay text-fg-primary shadow-[var(--elevation-e2-shadow)] pointer-events-auto select-none [transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--collapsed-y))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms] after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:pointer-events-auto after:content-[''] data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--expanded-y))_scale(1)] data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:opacity-0 data-[limited]:opacity-0 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(1)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(1)] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(1)] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(1)]";
|
|
146
137
|
function getToastPlacement(item, isRtl = false) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
138
|
+
const side = item.positionerProps?.side ?? DEFAULT_TOAST_SIDE;
|
|
139
|
+
const align = item.positionerProps?.align ?? DEFAULT_TOAST_ALIGN;
|
|
140
|
+
const resolvedSide = resolveToastSide(side, isRtl);
|
|
141
|
+
return {
|
|
142
|
+
side: resolvedSide,
|
|
143
|
+
align,
|
|
144
|
+
key: `${resolvedSide}:${align}`
|
|
145
|
+
};
|
|
155
146
|
}
|
|
156
147
|
function resolveToastSide(side, isRtl) {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
return DEFAULT_TOAST_SIDE;
|
|
148
|
+
if (side === "inline-end") return isRtl ? "left" : "right";
|
|
149
|
+
if (side === "inline-start") return isRtl ? "right" : "left";
|
|
150
|
+
if (side === "top" || side === "bottom" || side === "left" || side === "right") return side;
|
|
151
|
+
return DEFAULT_TOAST_SIDE;
|
|
163
152
|
}
|
|
164
153
|
function getToastPositionClassName({ side, align }) {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
return cn(
|
|
168
|
-
side === "top" && "top-6 max-sm:top-4",
|
|
169
|
-
side === "bottom" && "bottom-6 max-sm:bottom-4",
|
|
170
|
-
align === "start" && "left-6 origin-top-left max-sm:left-4",
|
|
171
|
-
align === "center" && "left-1/2 origin-top [--anchor-x:-50%]",
|
|
172
|
-
align === "end" && "right-6 origin-top-right max-sm:right-4",
|
|
173
|
-
side === "bottom" && align === "start" && "origin-bottom-left",
|
|
174
|
-
side === "bottom" && align === "center" && "origin-bottom",
|
|
175
|
-
side === "bottom" && align === "end" && "origin-bottom-right"
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
return cn(
|
|
179
|
-
side === "left" && "left-6 origin-left max-sm:left-4",
|
|
180
|
-
side === "right" && "right-6 origin-right max-sm:right-4",
|
|
181
|
-
align === "start" && "top-6 max-sm:top-4",
|
|
182
|
-
align === "center" && "top-1/2 [--anchor-y:-50%]",
|
|
183
|
-
align === "end" && "bottom-6 max-sm:bottom-4",
|
|
184
|
-
side === "left" && align === "start" && "origin-top-left",
|
|
185
|
-
side === "left" && align === "end" && "origin-bottom-left",
|
|
186
|
-
side === "right" && align === "start" && "origin-top-right",
|
|
187
|
-
side === "right" && align === "end" && "origin-bottom-right"
|
|
188
|
-
);
|
|
154
|
+
if (side === "top" || side === "bottom") return cn(side === "top" && "top-6 max-sm:top-4", side === "bottom" && "bottom-6 max-sm:bottom-4", align === "start" && "left-6 origin-top-left max-sm:left-4", align === "center" && "left-1/2 origin-top [--anchor-x:-50%]", align === "end" && "right-6 origin-top-right max-sm:right-4", side === "bottom" && align === "start" && "origin-bottom-left", side === "bottom" && align === "center" && "origin-bottom", side === "bottom" && align === "end" && "origin-bottom-right");
|
|
155
|
+
return cn(side === "left" && "left-6 origin-left max-sm:left-4", side === "right" && "right-6 origin-right max-sm:right-4", align === "start" && "top-6 max-sm:top-4", align === "center" && "top-1/2 [--anchor-y:-50%]", align === "end" && "bottom-6 max-sm:bottom-4", side === "left" && align === "start" && "origin-top-left", side === "left" && align === "end" && "origin-bottom-left", side === "right" && align === "start" && "origin-top-right", side === "right" && align === "end" && "origin-bottom-right");
|
|
189
156
|
}
|
|
190
157
|
function getToastStackClassName({ side, align }) {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
return "after:bottom-full [--expanded-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)-var(--toast-placement-offset-y)-(var(--toast-placement-index)*var(--gap)))] [--collapsed-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)-(var(--toast-placement-index)*var(--peek))-(var(--shrink)*var(--height)))]";
|
|
194
|
-
}
|
|
195
|
-
return "after:top-full [--expanded-y:calc(var(--anchor-y)+var(--toast-placement-offset-y)+(var(--toast-placement-index)*var(--gap))+var(--toast-swipe-movement-y))] [--collapsed-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)+(var(--toast-placement-index)*var(--peek))+(var(--shrink)*var(--height)))]";
|
|
158
|
+
if (side === "bottom" || (side === "left" || side === "right") && align === "end") return "after:bottom-full [--expanded-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)-var(--toast-placement-offset-y)-(var(--toast-placement-index)*var(--gap)))] [--collapsed-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)-(var(--toast-placement-index)*var(--peek))-(var(--shrink)*var(--height)))]";
|
|
159
|
+
return "after:top-full [--expanded-y:calc(var(--anchor-y)+var(--toast-placement-offset-y)+(var(--toast-placement-index)*var(--gap))+var(--toast-swipe-movement-y))] [--collapsed-y:calc(var(--anchor-y)+var(--toast-swipe-movement-y)+(var(--toast-placement-index)*var(--peek))+(var(--shrink)*var(--height)))]";
|
|
196
160
|
}
|
|
197
161
|
function getToastExitClassName(side) {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
return "[--exit-x:calc(var(--anchor-x)-150%)] [--exit-y:var(--anchor-y)]";
|
|
203
|
-
}
|
|
204
|
-
if (side === "right") {
|
|
205
|
-
return "[--exit-x:calc(var(--anchor-x)+150%)] [--exit-y:var(--anchor-y)]";
|
|
206
|
-
}
|
|
207
|
-
return "[--exit-x:calc(var(--anchor-x)+24px)] [--exit-y:calc(var(--anchor-y)-150%)]";
|
|
162
|
+
if (side === "bottom") return "[--exit-x:calc(var(--anchor-x)+24px)] [--exit-y:calc(var(--anchor-y)+150%)]";
|
|
163
|
+
if (side === "left") return "[--exit-x:calc(var(--anchor-x)-150%)] [--exit-y:var(--anchor-y)]";
|
|
164
|
+
if (side === "right") return "[--exit-x:calc(var(--anchor-x)+150%)] [--exit-y:var(--anchor-y)]";
|
|
165
|
+
return "[--exit-x:calc(var(--anchor-x)+24px)] [--exit-y:calc(var(--anchor-y)-150%)]";
|
|
208
166
|
}
|
|
209
167
|
function getSwipeDirections(item, isRtl = false) {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
);
|
|
215
|
-
if (align === "center") return primary;
|
|
216
|
-
const isVerticalSide = resolvedSide === "top" || resolvedSide === "bottom";
|
|
217
|
-
const secondary = isVerticalSide ? align === "start" ? "left" : "right" : align === "start" ? "up" : "down";
|
|
218
|
-
return [primary, secondary];
|
|
168
|
+
const { side: resolvedSide, align } = getToastPlacement(item, isRtl);
|
|
169
|
+
const primary = resolvedSide === "top" ? "up" : resolvedSide === "bottom" ? "down" : resolvedSide === "left" ? "left" : "right";
|
|
170
|
+
if (align === "center") return primary;
|
|
171
|
+
return [primary, resolvedSide === "top" || resolvedSide === "bottom" ? align === "start" ? "left" : "right" : align === "start" ? "up" : "down"];
|
|
219
172
|
}
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
toast,
|
|
223
|
-
toastManager
|
|
224
|
-
};
|
|
225
|
-
//# sourceMappingURL=toast.js.map
|
|
173
|
+
//#endregion
|
|
174
|
+
export { ToastProvider, toast, toastManager };
|
package/dist/tooltip.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
declare function
|
|
5
|
-
declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): React.JSX.Element;
|
|
1
|
+
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
2
|
+
//#region src/tooltip.d.ts
|
|
3
|
+
declare function Tooltip({ ...props }: Tooltip$1.Root.Props): import("react").JSX.Element;
|
|
4
|
+
declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): import("react").JSX.Element;
|
|
6
5
|
type TooltipContentProps = Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<Tooltip$1.Portal.Props, "container"> & {
|
|
7
|
-
|
|
6
|
+
showArrow?: boolean;
|
|
8
7
|
};
|
|
9
|
-
declare function TooltipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: TooltipContentProps):
|
|
10
|
-
|
|
11
|
-
export { Tooltip, TooltipContent, TooltipTrigger };
|
|
8
|
+
declare function TooltipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: TooltipContentProps): import("react").JSX.Element;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { Tooltip, TooltipContent, TooltipTrigger };
|
package/dist/tooltip.js
CHANGED
|
@@ -1,13 +1,38 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
5
|
+
//#region src/tooltip.tsx
|
|
6
|
+
function Tooltip({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
8
|
+
"data-slot": "tooltip",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function TooltipTrigger({ ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
14
|
+
"data-slot": "tooltip-trigger",
|
|
15
|
+
delay: 100,
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function TooltipContent({ className, container, side = "top", sideOffset = 6, align = "center", alignOffset = 0, showArrow = true, children, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
|
|
21
|
+
container,
|
|
22
|
+
children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
23
|
+
align,
|
|
24
|
+
alignOffset,
|
|
25
|
+
side,
|
|
26
|
+
sideOffset,
|
|
27
|
+
className: "pointer-events-none isolate z-50",
|
|
28
|
+
children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
|
|
29
|
+
"data-slot": "tooltip-content",
|
|
30
|
+
className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
31
|
+
...props,
|
|
32
|
+
children: [children, showArrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null]
|
|
33
|
+
})
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
export { Tooltip, TooltipContent, TooltipTrigger };
|
package/dist/tree-map.d.ts
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ChartCard, ChartValueType } from
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import 'class-variance-authority';
|
|
6
|
-
import 'recharts';
|
|
7
|
-
|
|
1
|
+
import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
|
|
2
|
+
import { ChartCard, ChartValueType } from "./chart.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
//#region src/tree-map.d.ts
|
|
8
5
|
/**
|
|
9
6
|
* A treemap — part-to-whole composition drawn as proportionally sized, nested
|
|
10
7
|
* rectangles. Reach for one to compare category shares at a glance (portfolio
|
|
@@ -56,14 +53,14 @@ type TreeMapSize = ComponentSize;
|
|
|
56
53
|
/** Where the colour-key legend sits relative to the plot. */
|
|
57
54
|
type TreeMapLegendPlacement = "right" | "bottom";
|
|
58
55
|
type TreeMapDatum = {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
56
|
+
/** Category name, shown in the tile label, legend, and tooltip. */
|
|
57
|
+
label: string;
|
|
58
|
+
/** Tile value — drives the tile's area. Omit on a group with `children`. */
|
|
59
|
+
value?: number;
|
|
60
|
+
/** Tile/group colour; defaults to the palette in order. Leaves inherit it. */
|
|
61
|
+
fill?: string;
|
|
62
|
+
/** Subcategories for a `nested` treemap. */
|
|
63
|
+
children?: TreeMapDatum[];
|
|
67
64
|
};
|
|
68
65
|
/**
|
|
69
66
|
* Tile palette, ordered by share: forest → brass → moss → clay → stone. Each
|
|
@@ -72,56 +69,56 @@ type TreeMapDatum = {
|
|
|
72
69
|
* map to the brand scales; assign by order, or override per datum with `fill`.
|
|
73
70
|
*/
|
|
74
71
|
declare const TREE_MAP_PALETTE: readonly [{
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
readonly fill: "var(--color-forest-700)";
|
|
73
|
+
readonly text: "var(--color-forest-100)";
|
|
77
74
|
}, {
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
readonly fill: "var(--color-brass-500)";
|
|
76
|
+
readonly text: "var(--color-brass-900)";
|
|
80
77
|
}, {
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
readonly fill: "var(--color-moss-600)";
|
|
79
|
+
readonly text: "var(--color-moss-100)";
|
|
83
80
|
}, {
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
readonly fill: "var(--color-clay-500)";
|
|
82
|
+
readonly text: "var(--color-clay-50)";
|
|
86
83
|
}, {
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
readonly fill: "var(--color-stone-500)";
|
|
85
|
+
readonly text: "var(--color-stone-50)";
|
|
89
86
|
}];
|
|
90
87
|
type TreeMapLayout = {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
88
|
+
/** Plot box height in px. Width stays fluid via the ResponsiveContainer. */
|
|
89
|
+
height: number;
|
|
90
|
+
/** Inset around every tile in px — straddles edges to read as a gap. */
|
|
91
|
+
gap: number;
|
|
92
|
+
/** Tile corner radius in px. */
|
|
93
|
+
radius: number;
|
|
94
|
+
/** Tile label padding from the top-left corner in px. */
|
|
95
|
+
labelPadding: number;
|
|
96
|
+
/** Tile label (name) font size in px. */
|
|
97
|
+
nameFontSize: number;
|
|
98
|
+
/** Tile label (share) font size in px. */
|
|
99
|
+
shareFontSize: number;
|
|
100
|
+
/** Smallest tile width/height in px that still shows its label. */
|
|
101
|
+
labelMinSide: number;
|
|
105
102
|
};
|
|
106
103
|
declare const TREE_MAP_LAYOUT: Record<TreeMapSize, TreeMapLayout>;
|
|
107
104
|
type TreeMapProps = Omit<React.ComponentProps<typeof ChartCard>, "size" | "children"> & {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
105
|
+
/** Categories — flat leaves, or groups carrying `children` (nested). */
|
|
106
|
+
data: TreeMapDatum[];
|
|
107
|
+
/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
|
|
108
|
+
size?: TreeMapSize;
|
|
109
|
+
/** Chart heading. Omit to hide the title. */
|
|
110
|
+
title?: React.ReactNode;
|
|
111
|
+
/** Supporting metadata (period, source). Omit to hide the description. */
|
|
112
|
+
description?: React.ReactNode;
|
|
113
|
+
/** Enable the hover value tooltip. Default false. */
|
|
114
|
+
tooltip?: boolean;
|
|
115
|
+
/** Legend placement — a right column or a wrapped bottom row. Default right. */
|
|
116
|
+
legend?: TreeMapLegendPlacement;
|
|
117
|
+
/** Format the tile value in the tooltip. Defaults to a localised number. */
|
|
118
|
+
valueFormatter?: (value: number) => string;
|
|
119
|
+
/** Value formatting for the tooltip. Defaults to `number`. */
|
|
120
|
+
valueType?: ChartValueType;
|
|
124
121
|
};
|
|
125
122
|
declare function TreeMap({ data, size, title, description, tooltip, legend, valueFormatter, valueType, className, ...props }: TreeMapProps): React.JSX.Element;
|
|
126
|
-
|
|
127
|
-
export { TREE_MAP_LAYOUT, TREE_MAP_PALETTE, TreeMap, type TreeMapDatum, type TreeMapLayout, type TreeMapLegendPlacement, type TreeMapProps, type TreeMapSize };
|
|
123
|
+
//#endregion
|
|
124
|
+
export { TREE_MAP_LAYOUT, TREE_MAP_PALETTE, TreeMap, type TreeMapDatum, type TreeMapLayout, type TreeMapLegendPlacement, type TreeMapProps, type TreeMapSize };
|