@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/chart.d.ts
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { VariantProps } from
|
|
3
|
-
import * as React from
|
|
4
|
-
import * as RechartsPrimitive from
|
|
5
|
-
import { TooltipValueType } from
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as RechartsPrimitive from "recharts";
|
|
5
|
+
import { TooltipValueType } from "recharts";
|
|
6
|
+
//#region src/chart.d.ts
|
|
8
7
|
/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */
|
|
9
8
|
type ChartValueType = "number" | "percentage" | "currency";
|
|
10
9
|
declare const THEMES: {
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
readonly light: "";
|
|
11
|
+
readonly dark: ".dark";
|
|
13
12
|
};
|
|
14
13
|
type TooltipNameType = number | string;
|
|
15
14
|
type ChartConfig = Record<string, {
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
label?: React.ReactNode;
|
|
16
|
+
icon?: React.ComponentType;
|
|
18
17
|
} & ({
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
color?: string;
|
|
19
|
+
theme?: never;
|
|
21
20
|
} | {
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
color?: never;
|
|
22
|
+
theme: Record<keyof typeof THEMES, string>;
|
|
24
23
|
})>;
|
|
25
24
|
declare function ChartCard({ className, size, children, ...props }: React.ComponentProps<"section"> & {
|
|
26
|
-
|
|
25
|
+
size?: ComponentSize;
|
|
27
26
|
}): React.JSX.Element;
|
|
28
27
|
declare function ChartHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
29
28
|
declare function ChartTitle({ className, size, ...props }: React.ComponentProps<"h3"> & {
|
|
30
|
-
|
|
29
|
+
size?: ComponentSize;
|
|
31
30
|
}): React.JSX.Element;
|
|
32
31
|
declare function ChartDescription({ className, size, ...props }: React.ComponentProps<"p"> & {
|
|
33
|
-
|
|
32
|
+
size?: ComponentSize;
|
|
34
33
|
}): React.JSX.Element;
|
|
35
34
|
declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
config: ChartConfig;
|
|
36
|
+
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
37
|
+
initialDimension?: {
|
|
38
|
+
width: number;
|
|
39
|
+
height: number;
|
|
40
|
+
};
|
|
42
41
|
}): React.JSX.Element;
|
|
43
42
|
declare const ChartStyle: ({ id, config }: {
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
id: string;
|
|
44
|
+
config: ChartConfig;
|
|
46
45
|
}) => React.JSX.Element | null;
|
|
47
46
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
48
47
|
/**
|
|
@@ -54,12 +53,12 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
|
54
53
|
* Anatomy: series dot · metric label · hero value · period caption.
|
|
55
54
|
*/
|
|
56
55
|
declare const chartTooltipVariants: (props?: ({
|
|
57
|
-
|
|
58
|
-
} &
|
|
59
|
-
declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
size?: "lg" | "md" | "sm" | "xs" | null | undefined;
|
|
57
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
58
|
+
declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
|
|
59
|
+
hideIndicator?: boolean;
|
|
60
|
+
nameKey?: string;
|
|
61
|
+
valueType?: ChartValueType;
|
|
63
62
|
} & VariantProps<typeof chartTooltipVariants> & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
|
|
64
63
|
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
65
64
|
/** Marker shape that ties a legend item to its series. */
|
|
@@ -74,20 +73,20 @@ type ChartLegendMarker = "dot" | "square" | "line";
|
|
|
74
73
|
* from each payload entry's `inactive` flag (recharts sets this when wired) or
|
|
75
74
|
* the controlled `inactiveKeys` set.
|
|
76
75
|
*/
|
|
77
|
-
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
76
|
+
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle }: React.ComponentProps<"div"> & {
|
|
77
|
+
hideIcon?: boolean;
|
|
78
|
+
nameKey?: string;
|
|
79
|
+
marker?: ChartLegendMarker;
|
|
80
|
+
size?: "sm" | "md";
|
|
81
|
+
orientation?: "horizontal" | "vertical";
|
|
82
|
+
inactiveKeys?: Iterable<string>;
|
|
83
|
+
onToggle?: (key: string) => void;
|
|
85
84
|
} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
|
|
86
85
|
/** The size-scaled layout numbers a cartesian chart needs to build axis props. */
|
|
87
86
|
type CartesianAxisLayout = {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
tickMargin: number;
|
|
88
|
+
tickFontSize: number;
|
|
89
|
+
yAxisWidth: number;
|
|
91
90
|
};
|
|
92
91
|
/**
|
|
93
92
|
* Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
|
|
@@ -101,22 +100,22 @@ type CartesianAxisLayout = {
|
|
|
101
100
|
* <YAxis domain={[0, 120]} {...chart.yAxis} />
|
|
102
101
|
*/
|
|
103
102
|
declare function cartesianAxisProps(layout: CartesianAxisLayout): {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
};
|
|
103
|
+
readonly xAxis: {
|
|
104
|
+
readonly tickLine: false;
|
|
105
|
+
readonly axisLine: false;
|
|
106
|
+
readonly tickMargin: number;
|
|
107
|
+
readonly tick: {
|
|
108
|
+
fontSize: number;
|
|
111
109
|
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
110
|
+
};
|
|
111
|
+
readonly yAxis: {
|
|
112
|
+
readonly tickLine: false;
|
|
113
|
+
readonly axisLine: false;
|
|
114
|
+
readonly width: number;
|
|
115
|
+
readonly tick: {
|
|
116
|
+
fontSize: number;
|
|
119
117
|
};
|
|
118
|
+
};
|
|
120
119
|
};
|
|
121
|
-
|
|
122
|
-
export { type CartesianAxisLayout, ChartCard,
|
|
120
|
+
//#endregion
|
|
121
|
+
export { type CartesianAxisLayout, ChartCard, ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartValueType, cartesianAxisProps };
|
package/dist/chart.js
CHANGED
|
@@ -1,30 +1,378 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { SizeProvider, useComponentSize } from "./size-context.js";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import * as React from "react";
|
|
7
|
+
import * as RechartsPrimitive from "recharts";
|
|
8
|
+
//#region src/chart.tsx
|
|
9
|
+
/**
|
|
10
|
+
* Markers use `--color-surface-brand` as a placeholder. Giddaa has no
|
|
11
|
+
* categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each
|
|
12
|
+
* series (its legend marker and tooltip dot) to its own colour once they exist.
|
|
13
|
+
* Until then any series without an explicit colour paints brand-green.
|
|
14
|
+
*/
|
|
15
|
+
const SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
|
|
16
|
+
function formatChartValue(value, type) {
|
|
17
|
+
if (Array.isArray(value)) return value.join(", ");
|
|
18
|
+
if (typeof value !== "number") return value == null ? "" : String(value);
|
|
19
|
+
switch (type) {
|
|
20
|
+
case "currency": return `₦${value.toLocaleString("en-NG")}`;
|
|
21
|
+
case "percentage": return `${value.toLocaleString("en-NG", {
|
|
22
|
+
minimumFractionDigits: 1,
|
|
23
|
+
maximumFractionDigits: 1
|
|
24
|
+
})}%`;
|
|
25
|
+
default: return value.toLocaleString("en-NG");
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const THEMES = {
|
|
29
|
+
light: "",
|
|
30
|
+
dark: ".dark"
|
|
29
31
|
};
|
|
30
|
-
|
|
32
|
+
const INITIAL_DIMENSION = {
|
|
33
|
+
width: 320,
|
|
34
|
+
height: 200
|
|
35
|
+
};
|
|
36
|
+
const ChartContext = React.createContext(null);
|
|
37
|
+
function useChart() {
|
|
38
|
+
const context = React.useContext(ChartContext);
|
|
39
|
+
if (!context) throw new Error("useChart must be used within a <ChartContainer />");
|
|
40
|
+
return context;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Shared chart frame — the chrome that surrounds the plot of any chart type
|
|
44
|
+
* (bar, line, area, pie). These are presentational, domain-free, and size-aware:
|
|
45
|
+
* a `size` flows through `SizeProvider` so the plot and its labels can scale
|
|
46
|
+
* with the card. Compose them with the plot primitives:
|
|
47
|
+
*
|
|
48
|
+
* <ChartCard size="md">
|
|
49
|
+
* <ChartHeader>
|
|
50
|
+
* <ChartTitle>Revenue Overview</ChartTitle>
|
|
51
|
+
* <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
|
|
52
|
+
* </ChartHeader>
|
|
53
|
+
* <ChartContainer config={config}>{/* recharts plot *\/}</ChartContainer>
|
|
54
|
+
* </ChartCard>
|
|
55
|
+
*/
|
|
56
|
+
const chartCardVariants = cva("flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1", {
|
|
57
|
+
variants: { size: {
|
|
58
|
+
sm: "gap-3 p-4",
|
|
59
|
+
md: "gap-4 p-5",
|
|
60
|
+
lg: "gap-5 p-6"
|
|
61
|
+
} },
|
|
62
|
+
defaultVariants: { size: "md" }
|
|
63
|
+
});
|
|
64
|
+
function ChartCard({ className, size, children, ...props }) {
|
|
65
|
+
const resolvedSize = useComponentSize(size);
|
|
66
|
+
return /* @__PURE__ */ jsx(SizeProvider, {
|
|
67
|
+
size: resolvedSize,
|
|
68
|
+
children: /* @__PURE__ */ jsx("section", {
|
|
69
|
+
"data-slot": "chart-card",
|
|
70
|
+
className: cn(chartCardVariants({ size: resolvedSize }), className),
|
|
71
|
+
...props,
|
|
72
|
+
children
|
|
73
|
+
})
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function ChartHeader({ className, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsx("div", {
|
|
78
|
+
"data-slot": "chart-header",
|
|
79
|
+
className: cn("flex min-w-0 flex-col gap-1", className),
|
|
80
|
+
...props
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
const chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
|
|
84
|
+
variants: { size: {
|
|
85
|
+
sm: "text-gdt-md",
|
|
86
|
+
md: "text-gdt-lg",
|
|
87
|
+
lg: "text-gdt-h5"
|
|
88
|
+
} },
|
|
89
|
+
defaultVariants: { size: "md" }
|
|
90
|
+
});
|
|
91
|
+
function ChartTitle({ className, size, ...props }) {
|
|
92
|
+
const resolvedSize = useComponentSize(size);
|
|
93
|
+
return /* @__PURE__ */ jsx("h3", {
|
|
94
|
+
"data-slot": "chart-title",
|
|
95
|
+
className: cn(chartTitleVariants({ size: resolvedSize }), className),
|
|
96
|
+
...props
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
const chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
|
|
100
|
+
variants: { size: {
|
|
101
|
+
sm: "text-gdt-xs",
|
|
102
|
+
md: "text-gdt-sm",
|
|
103
|
+
lg: "text-gdt-sm"
|
|
104
|
+
} },
|
|
105
|
+
defaultVariants: { size: "md" }
|
|
106
|
+
});
|
|
107
|
+
function ChartDescription({ className, size, ...props }) {
|
|
108
|
+
const resolvedSize = useComponentSize(size);
|
|
109
|
+
return /* @__PURE__ */ jsx("p", {
|
|
110
|
+
"data-slot": "chart-description",
|
|
111
|
+
className: cn(chartDescriptionVariants({ size: resolvedSize }), className),
|
|
112
|
+
...props
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
|
|
116
|
+
const uniqueId = React.useId();
|
|
117
|
+
const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
|
|
118
|
+
return /* @__PURE__ */ jsx(ChartContext.Provider, {
|
|
119
|
+
value: { config },
|
|
120
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
121
|
+
"data-slot": "chart",
|
|
122
|
+
"data-chart": chartId,
|
|
123
|
+
className: cn("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", className),
|
|
124
|
+
...props,
|
|
125
|
+
children: [/* @__PURE__ */ jsx(ChartStyle, {
|
|
126
|
+
id: chartId,
|
|
127
|
+
config
|
|
128
|
+
}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
|
|
129
|
+
initialDimension,
|
|
130
|
+
children
|
|
131
|
+
})]
|
|
132
|
+
})
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
const ChartStyle = ({ id, config }) => {
|
|
136
|
+
const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
|
|
137
|
+
if (!colorConfig.length) return null;
|
|
138
|
+
return /* @__PURE__ */ jsx("style", { children: Object.entries(THEMES).map(([theme, prefix]) => `
|
|
139
|
+
${prefix} [data-chart=${id}] {
|
|
140
|
+
${colorConfig.map(([key, itemConfig]) => {
|
|
141
|
+
const color = itemConfig.theme?.[theme] ?? itemConfig.color;
|
|
142
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
143
|
+
}).join("\n")}
|
|
144
|
+
}
|
|
145
|
+
`).join("\n") });
|
|
146
|
+
};
|
|
147
|
+
const ChartTooltip = RechartsPrimitive.Tooltip;
|
|
148
|
+
/**
|
|
149
|
+
* Hover tooltip for a chart data point. It surfaces a single precise value with
|
|
150
|
+
* type-appropriate formatting — grouped integers, percentages, or ₦-prefixed
|
|
151
|
+
* currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,
|
|
152
|
+
* 1px border-subtle) so users can read exact figures without leaving the chart.
|
|
153
|
+
*
|
|
154
|
+
* Anatomy: series dot · metric label · hero value · period caption.
|
|
155
|
+
*/
|
|
156
|
+
const chartTooltipVariants = cva("flex flex-col bg-surface-overlay border border-line-subtle shadow-2", {
|
|
157
|
+
variants: { size: {
|
|
158
|
+
xs: "gap-0.5 rounded-md p-2",
|
|
159
|
+
sm: "gap-0.5 rounded-md p-2.5",
|
|
160
|
+
md: "gap-1 rounded-lg p-3",
|
|
161
|
+
lg: "gap-1 rounded-xl p-3.5"
|
|
162
|
+
} },
|
|
163
|
+
defaultVariants: { size: "md" }
|
|
164
|
+
});
|
|
165
|
+
const chartTooltipDotVariants = cva("shrink-0 rounded-full", {
|
|
166
|
+
variants: { size: {
|
|
167
|
+
xs: "size-1.5",
|
|
168
|
+
sm: "size-2",
|
|
169
|
+
md: "size-2.5",
|
|
170
|
+
lg: "size-2.5"
|
|
171
|
+
} },
|
|
172
|
+
defaultVariants: { size: "md" }
|
|
173
|
+
});
|
|
174
|
+
const chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
|
|
175
|
+
variants: { size: {
|
|
176
|
+
xs: "text-gdt-xs",
|
|
177
|
+
sm: "text-gdt-xs",
|
|
178
|
+
md: "text-gdt-sm",
|
|
179
|
+
lg: "text-gdt-sm"
|
|
180
|
+
} },
|
|
181
|
+
defaultVariants: { size: "md" }
|
|
182
|
+
});
|
|
183
|
+
const chartTooltipValueVariants = cva("font-extrabold text-fg-primary tabular-nums", {
|
|
184
|
+
variants: { size: {
|
|
185
|
+
xs: "text-gdt-sm",
|
|
186
|
+
sm: "text-gdt-md",
|
|
187
|
+
md: "text-gdt-lg",
|
|
188
|
+
lg: "text-gdt-xl"
|
|
189
|
+
} },
|
|
190
|
+
defaultVariants: { size: "md" }
|
|
191
|
+
});
|
|
192
|
+
function ChartTooltipContent({ active, payload, className, hideIndicator = false, label, labelFormatter, formatter, color, nameKey, valueType = "number", size = "md" }) {
|
|
193
|
+
const { config } = useChart();
|
|
194
|
+
if (!active || !payload?.length) return null;
|
|
195
|
+
const [item] = payload.filter((entry) => entry.type !== "none");
|
|
196
|
+
if (!item) return null;
|
|
197
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
|
|
198
|
+
const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
|
|
199
|
+
const metricLabel = itemConfig?.label ?? item.name;
|
|
200
|
+
const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
|
|
201
|
+
const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
|
|
202
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
203
|
+
className: cn(chartTooltipVariants({ size }), className),
|
|
204
|
+
children: [
|
|
205
|
+
metricLabel != null && /* @__PURE__ */ jsxs("div", {
|
|
206
|
+
className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0",
|
|
207
|
+
children: [!hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
|
|
208
|
+
"aria-hidden": "true",
|
|
209
|
+
className: cn(chartTooltipDotVariants({ size })),
|
|
210
|
+
style: { backgroundColor: dotColor }
|
|
211
|
+
})), /* @__PURE__ */ jsx("span", {
|
|
212
|
+
className: cn(chartTooltipLabelVariants({ size })),
|
|
213
|
+
children: metricLabel
|
|
214
|
+
})]
|
|
215
|
+
}),
|
|
216
|
+
/* @__PURE__ */ jsx("p", {
|
|
217
|
+
className: cn(chartTooltipValueVariants({ size })),
|
|
218
|
+
children: heroValue
|
|
219
|
+
}),
|
|
220
|
+
periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx("p", {
|
|
221
|
+
className: "text-gdt-xs text-fg-caption-placeholder",
|
|
222
|
+
children: periodCaption
|
|
223
|
+
})
|
|
224
|
+
]
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
const ChartLegend = RechartsPrimitive.Legend;
|
|
228
|
+
const chartLegendItemVariants = cva("group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0", {
|
|
229
|
+
variants: {
|
|
230
|
+
size: {
|
|
231
|
+
sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
|
|
232
|
+
md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
|
|
233
|
+
},
|
|
234
|
+
interactive: {
|
|
235
|
+
true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
|
|
236
|
+
false: ""
|
|
237
|
+
},
|
|
238
|
+
inactive: {
|
|
239
|
+
true: "text-fg-caption-placeholder line-through",
|
|
240
|
+
false: ""
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
defaultVariants: {
|
|
244
|
+
size: "md",
|
|
245
|
+
interactive: false,
|
|
246
|
+
inactive: false
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
const chartLegendMarkerSizeVariants = cva("shrink-0", {
|
|
250
|
+
variants: {
|
|
251
|
+
marker: {
|
|
252
|
+
dot: "rounded-full",
|
|
253
|
+
square: "rounded-[2px]",
|
|
254
|
+
line: "rounded-full"
|
|
255
|
+
},
|
|
256
|
+
size: {
|
|
257
|
+
sm: "",
|
|
258
|
+
md: ""
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
compoundVariants: [
|
|
262
|
+
{
|
|
263
|
+
marker: ["dot", "square"],
|
|
264
|
+
size: "sm",
|
|
265
|
+
className: "size-2"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
marker: ["dot", "square"],
|
|
269
|
+
size: "md",
|
|
270
|
+
className: "size-2.5"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
marker: "line",
|
|
274
|
+
size: "sm",
|
|
275
|
+
className: "h-[3px] w-3"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
marker: "line",
|
|
279
|
+
size: "md",
|
|
280
|
+
className: "h-[3px] w-3.5"
|
|
281
|
+
}
|
|
282
|
+
],
|
|
283
|
+
defaultVariants: {
|
|
284
|
+
marker: "dot",
|
|
285
|
+
size: "md"
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
/**
|
|
289
|
+
* A shared legend for all chart types. Each item pairs a series marker with a
|
|
290
|
+
* label and can be toggled to hide or show its series — the inactive state mutes
|
|
291
|
+
* the marker and strikes through the label. Items compose into horizontal rows
|
|
292
|
+
* or vertical columns, in two sizes, with dot, square, or line markers.
|
|
293
|
+
*
|
|
294
|
+
* Toggling: pass `onToggle` to make items interactive. Inactive items are read
|
|
295
|
+
* from each payload entry's `inactive` flag (recharts sets this when wired) or
|
|
296
|
+
* the controlled `inactiveKeys` set.
|
|
297
|
+
*/
|
|
298
|
+
function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, marker = "dot", size = "md", orientation = "horizontal", inactiveKeys, onToggle }) {
|
|
299
|
+
const { config } = useChart();
|
|
300
|
+
if (!payload?.length) return null;
|
|
301
|
+
const inactiveSet = inactiveKeys ? new Set(inactiveKeys) : void 0;
|
|
302
|
+
const interactive = Boolean(onToggle);
|
|
303
|
+
return /* @__PURE__ */ jsx("div", {
|
|
304
|
+
className: cn("flex", orientation === "vertical" ? "flex-col items-start gap-0.5" : "flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5", verticalAlign === "top" ? "pb-3" : "pt-3", className),
|
|
305
|
+
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
306
|
+
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
307
|
+
const itemKey = `${item.dataKey ?? item.value ?? index}`;
|
|
308
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
309
|
+
const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
|
|
310
|
+
const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
|
|
311
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
|
|
312
|
+
"aria-hidden": "true",
|
|
313
|
+
className: cn(chartLegendMarkerSizeVariants({
|
|
314
|
+
marker,
|
|
315
|
+
size
|
|
316
|
+
})),
|
|
317
|
+
style: { backgroundColor: markerColor }
|
|
318
|
+
}), itemConfig?.label ?? item.value] });
|
|
319
|
+
if (interactive) return /* @__PURE__ */ jsx("button", {
|
|
320
|
+
type: "button",
|
|
321
|
+
"aria-pressed": !inactive,
|
|
322
|
+
onClick: () => onToggle?.(key),
|
|
323
|
+
className: cn(chartLegendItemVariants({
|
|
324
|
+
size,
|
|
325
|
+
interactive,
|
|
326
|
+
inactive
|
|
327
|
+
})),
|
|
328
|
+
children: content
|
|
329
|
+
}, itemKey);
|
|
330
|
+
return /* @__PURE__ */ jsx("div", {
|
|
331
|
+
className: cn(chartLegendItemVariants({
|
|
332
|
+
size,
|
|
333
|
+
interactive,
|
|
334
|
+
inactive
|
|
335
|
+
})),
|
|
336
|
+
children: content
|
|
337
|
+
}, itemKey);
|
|
338
|
+
})
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
342
|
+
* Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
|
|
343
|
+
* or axis lines, a size-scaled tick font, and a reserved value-axis width) that
|
|
344
|
+
* every bar and line chart would otherwise repeat per axis. Spread the result
|
|
345
|
+
* onto the recharts axis, then add the chart-specific props (`dataKey`,
|
|
346
|
+
* `domain`, `ticks`, a `width`/`type` override, …):
|
|
347
|
+
*
|
|
348
|
+
* const chart = useBarChartLayout();
|
|
349
|
+
* <XAxis dataKey="month" {...chart.xAxis} />
|
|
350
|
+
* <YAxis domain={[0, 120]} {...chart.yAxis} />
|
|
351
|
+
*/
|
|
352
|
+
function cartesianAxisProps(layout) {
|
|
353
|
+
const tick = { fontSize: layout.tickFontSize };
|
|
354
|
+
return {
|
|
355
|
+
xAxis: {
|
|
356
|
+
tickLine: false,
|
|
357
|
+
axisLine: false,
|
|
358
|
+
tickMargin: layout.tickMargin,
|
|
359
|
+
tick
|
|
360
|
+
},
|
|
361
|
+
yAxis: {
|
|
362
|
+
tickLine: false,
|
|
363
|
+
axisLine: false,
|
|
364
|
+
width: layout.yAxisWidth,
|
|
365
|
+
tick
|
|
366
|
+
}
|
|
367
|
+
};
|
|
368
|
+
}
|
|
369
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
370
|
+
if (typeof payload !== "object" || payload === null) return;
|
|
371
|
+
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
|
|
372
|
+
let configLabelKey = key;
|
|
373
|
+
if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
|
|
374
|
+
else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
|
|
375
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
376
|
+
}
|
|
377
|
+
//#endregion
|
|
378
|
+
export { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, cartesianAxisProps };
|
package/dist/checkbox.d.ts
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
3
|
+
import { CheckboxGroup } from "@base-ui/react/checkbox-group";
|
|
4
|
+
//#region src/checkbox.d.ts
|
|
7
5
|
declare const checkboxVariants: (props?: ({
|
|
8
|
-
|
|
9
|
-
} &
|
|
6
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
8
|
type CheckboxSize = NonNullable<VariantProps<typeof checkboxVariants>["size"]>;
|
|
11
9
|
type CheckboxProps = Checkbox$1.Root.Props & {
|
|
12
|
-
|
|
10
|
+
size?: CheckboxSize;
|
|
13
11
|
};
|
|
14
12
|
/**
|
|
15
13
|
* Compose with the shared field primitives for label and helper text.
|
|
@@ -68,6 +66,6 @@ type CheckboxProps = Checkbox$1.Root.Props & {
|
|
|
68
66
|
* </FieldSet>
|
|
69
67
|
* ```
|
|
70
68
|
*/
|
|
71
|
-
declare function Checkbox({ className, size, ...props }: CheckboxProps):
|
|
72
|
-
|
|
73
|
-
export { Checkbox, checkboxVariants };
|
|
69
|
+
declare function Checkbox({ className, size, ...props }: CheckboxProps): import("react").JSX.Element;
|
|
70
|
+
//#endregion
|
|
71
|
+
export { Checkbox, CheckboxGroup, checkboxVariants };
|