@codefast/ui 0.3.11-canary.0 → 0.3.11-canary.2
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/CHANGELOG.md +22 -0
- package/dist/components/accordion.d.ts +29 -10
- package/dist/components/accordion.js +38 -37
- package/dist/components/alert-dialog.d.ts +60 -24
- package/dist/components/alert-dialog.js +69 -72
- package/dist/components/alert.d.ts +27 -15
- package/dist/components/alert.js +29 -31
- package/dist/components/aspect-ratio.d.ts +8 -4
- package/dist/components/aspect-ratio.js +7 -5
- package/dist/components/avatar.d.ts +17 -6
- package/dist/components/avatar.js +19 -17
- package/dist/components/badge.d.ts +21 -14
- package/dist/components/badge.js +19 -22
- package/dist/components/breadcrumb.d.ts +35 -12
- package/dist/components/breadcrumb.js +48 -54
- package/dist/components/button-group.d.ts +29 -14
- package/dist/components/button-group.js +27 -32
- package/dist/components/button.d.ts +35 -25
- package/dist/components/button.js +50 -48
- package/dist/components/calendar.d.ts +24 -9
- package/dist/components/calendar.js +92 -98
- package/dist/components/card.d.ts +34 -10
- package/dist/components/card.js +39 -37
- package/dist/components/carousel.d.ts +55 -24
- package/dist/components/carousel.js +113 -130
- package/dist/components/chart.d.ts +72 -36
- package/dist/components/chart.js +154 -166
- package/dist/components/checkbox-cards.d.ts +15 -8
- package/dist/components/checkbox-cards.js +22 -25
- package/dist/components/checkbox-group.d.ts +16 -8
- package/dist/components/checkbox-group.js +19 -19
- package/dist/components/checkbox.d.ts +9 -4
- package/dist/components/checkbox.js +14 -14
- package/dist/components/collapsible.d.ts +14 -6
- package/dist/components/collapsible.js +18 -16
- package/dist/components/command.d.ts +55 -23
- package/dist/components/command.js +70 -85
- package/dist/components/context-menu.d.ts +72 -22
- package/dist/components/context-menu.js +88 -109
- package/dist/components/dialog.d.ts +53 -22
- package/dist/components/dialog.js +71 -85
- package/dist/components/drawer.d.ts +60 -28
- package/dist/components/drawer.js +59 -67
- package/dist/components/dropdown-menu.d.ts +73 -22
- package/dist/components/dropdown-menu.js +95 -112
- package/dist/components/empty.d.ts +37 -15
- package/dist/components/empty.js +43 -45
- package/dist/components/field.d.ts +63 -25
- package/dist/components/field.js +88 -104
- package/dist/components/form.d.ts +37 -15
- package/dist/components/form.js +65 -70
- package/dist/components/hover-card.d.ts +21 -7
- package/dist/components/hover-card.js +24 -24
- package/dist/components/input-group.d.ts +53 -28
- package/dist/components/input-group.js +63 -77
- package/dist/components/input-number.d.ts +28 -7
- package/dist/components/input-number.js +55 -59
- package/dist/components/input-otp.d.ts +24 -10
- package/dist/components/input-otp.js +33 -37
- package/dist/components/input-password.d.ts +12 -5
- package/dist/components/input-password.js +31 -32
- package/dist/components/input-search.d.ts +18 -8
- package/dist/components/input-search.js +43 -41
- package/dist/components/input.d.ts +10 -4
- package/dist/components/input.js +9 -7
- package/dist/components/item.d.ts +69 -32
- package/dist/components/item.js +89 -92
- package/dist/components/kbd.d.ts +13 -5
- package/dist/components/kbd.js +13 -11
- package/dist/components/label.d.ts +9 -4
- package/dist/components/label.js +9 -7
- package/dist/components/menubar.d.ts +80 -23
- package/dist/components/menubar.js +97 -118
- package/dist/components/native-select.d.ts +16 -6
- package/dist/components/native-select.js +25 -26
- package/dist/components/navigation-menu.d.ts +36 -12
- package/dist/components/navigation-menu.js +60 -75
- package/dist/components/pagination.d.ts +35 -14
- package/dist/components/pagination.js +54 -69
- package/dist/components/popover.d.ts +24 -8
- package/dist/components/popover.js +28 -28
- package/dist/components/progress-circle.d.ts +106 -88
- package/dist/components/progress-circle.js +106 -138
- package/dist/components/progress.d.ts +10 -4
- package/dist/components/progress.js +14 -14
- package/dist/components/radio-cards.d.ts +10 -4
- package/dist/components/radio-cards.js +22 -23
- package/dist/components/radio-group.d.ts +13 -5
- package/dist/components/radio-group.js +18 -16
- package/dist/components/radio.d.ts +12 -5
- package/dist/components/radio.js +10 -8
- package/dist/components/resizable.d.ts +18 -7
- package/dist/components/resizable.js +22 -22
- package/dist/components/scroll-area.d.ts +33 -20
- package/dist/components/scroll-area.js +84 -88
- package/dist/components/select.d.ts +50 -16
- package/dist/components/select.js +77 -96
- package/dist/components/separator.d.ts +29 -19
- package/dist/components/separator.js +36 -34
- package/dist/components/sheet.d.ts +62 -29
- package/dist/components/sheet.js +79 -100
- package/dist/components/sidebar.d.ts +160 -66
- package/dist/components/sidebar.js +294 -336
- package/dist/components/skeleton.d.ts +9 -4
- package/dist/components/skeleton.js +8 -6
- package/dist/components/slider.d.ts +13 -4
- package/dist/components/slider.js +34 -40
- package/dist/components/sonner.d.ts +10 -7
- package/dist/components/sonner.js +16 -14
- package/dist/components/spinner.d.ts +12 -5
- package/dist/components/spinner.js +33 -35
- package/dist/components/switch.d.ts +9 -4
- package/dist/components/switch.js +13 -11
- package/dist/components/table.d.ts +37 -11
- package/dist/components/table.js +47 -45
- package/dist/components/tabs.d.ts +21 -7
- package/dist/components/tabs.js +24 -22
- package/dist/components/textarea.d.ts +9 -4
- package/dist/components/textarea.js +8 -6
- package/dist/components/toggle-group.d.ts +24 -9
- package/dist/components/toggle-group.js +41 -42
- package/dist/components/toggle.d.ts +25 -17
- package/dist/components/toggle.js +30 -28
- package/dist/components/tooltip.d.ts +24 -8
- package/dist/components/tooltip.js +29 -32
- package/dist/hooks/use-animated-value.d.ts +4 -1
- package/dist/hooks/use-animated-value.js +57 -36
- package/dist/hooks/use-copy-to-clipboard.d.ts +11 -5
- package/dist/hooks/use-copy-to-clipboard.js +39 -20
- package/dist/hooks/use-is-mobile.d.ts +4 -1
- package/dist/hooks/use-is-mobile.js +21 -1
- package/dist/hooks/use-media-query.d.ts +4 -1
- package/dist/hooks/use-media-query.js +45 -18
- package/dist/hooks/use-mutation-observer.d.ts +6 -2
- package/dist/hooks/use-mutation-observer.js +34 -16
- package/dist/hooks/use-pagination.d.ts +22 -14
- package/dist/hooks/use-pagination.js +100 -49
- package/dist/index.d.ts +69 -130
- package/dist/index.js +11 -11
- package/dist/primitives/checkbox-group.d.ts +105 -83
- package/dist/primitives/checkbox-group.js +111 -84
- package/dist/primitives/input-number.d.ts +51 -40
- package/dist/primitives/input-number.js +483 -350
- package/dist/primitives/input.d.ts +48 -42
- package/dist/primitives/input.js +65 -43
- package/dist/primitives/progress-circle.d.ts +79 -48
- package/dist/primitives/progress-circle.js +154 -105
- package/package.json +81 -156
- package/dist/components/accordion.cjs +0 -98
- package/dist/components/alert-dialog.cjs +0 -156
- package/dist/components/alert.cjs +0 -84
- package/dist/components/aspect-ratio.cjs +0 -44
- package/dist/components/avatar.cjs +0 -66
- package/dist/components/badge.cjs +0 -67
- package/dist/components/breadcrumb.cjs +0 -125
- package/dist/components/button-group.cjs +0 -87
- package/dist/components/button.cjs +0 -92
- package/dist/components/calendar.cjs +0 -151
- package/dist/components/card.cjs +0 -105
- package/dist/components/carousel.cjs +0 -211
- package/dist/components/chart.cjs +0 -251
- package/dist/components/checkbox-cards.cjs +0 -70
- package/dist/components/checkbox-group.cjs +0 -64
- package/dist/components/checkbox.cjs +0 -54
- package/dist/components/collapsible.cjs +0 -62
- package/dist/components/command.cjs +0 -168
- package/dist/components/context-menu.cjs +0 -219
- package/dist/components/dialog.cjs +0 -165
- package/dist/components/drawer.cjs +0 -144
- package/dist/components/dropdown-menu.cjs +0 -222
- package/dist/components/empty.cjs +0 -113
- package/dist/components/field.cjs +0 -194
- package/dist/components/form.cjs +0 -152
- package/dist/components/hover-card.cjs +0 -78
- package/dist/components/input-group.cjs +0 -156
- package/dist/components/input-number.cjs +0 -99
- package/dist/components/input-otp.cjs +0 -102
- package/dist/components/input-password.cjs +0 -72
- package/dist/components/input-search.cjs +0 -81
- package/dist/components/input.cjs +0 -46
- package/dist/components/item.cjs +0 -186
- package/dist/components/kbd.cjs +0 -54
- package/dist/components/label.cjs +0 -46
- package/dist/components/menubar.cjs +0 -233
- package/dist/components/native-select.cjs +0 -75
- package/dist/components/navigation-menu.cjs +0 -146
- package/dist/components/pagination.cjs +0 -138
- package/dist/components/popover.cjs +0 -87
- package/dist/components/progress-circle.cjs +0 -185
- package/dist/components/progress.cjs +0 -53
- package/dist/components/radio-cards.cjs +0 -67
- package/dist/components/radio-group.cjs +0 -60
- package/dist/components/radio.cjs +0 -48
- package/dist/components/resizable.cjs +0 -72
- package/dist/components/scroll-area.cjs +0 -141
- package/dist/components/select.cjs +0 -181
- package/dist/components/separator.cjs +0 -83
- package/dist/components/sheet.cjs +0 -185
- package/dist/components/sidebar.cjs +0 -507
- package/dist/components/skeleton.cjs +0 -44
- package/dist/components/slider.cjs +0 -80
- package/dist/components/sonner.cjs +0 -58
- package/dist/components/spinner.cjs +0 -76
- package/dist/components/switch.cjs +0 -50
- package/dist/components/table.cjs +0 -118
- package/dist/components/tabs.cjs +0 -76
- package/dist/components/textarea.cjs +0 -44
- package/dist/components/toggle-group.cjs +0 -91
- package/dist/components/toggle.cjs +0 -72
- package/dist/components/tooltip.cjs +0 -91
- package/dist/hooks/use-animated-value.cjs +0 -75
- package/dist/hooks/use-copy-to-clipboard.cjs +0 -58
- package/dist/hooks/use-is-mobile.cjs +0 -40
- package/dist/hooks/use-media-query.cjs +0 -57
- package/dist/hooks/use-mutation-observer.cjs +0 -57
- package/dist/hooks/use-pagination.cjs +0 -93
- package/dist/index.cjs +0 -1081
- package/dist/primitives/checkbox-group.cjs +0 -151
- package/dist/primitives/input-number.cjs +0 -439
- package/dist/primitives/input.cjs +0 -99
- package/dist/primitives/progress-circle.cjs +0 -199
|
@@ -1,152 +1,135 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Button } from "./button.js";
|
|
3
3
|
import { cn } from "@codefast/tailwind-variants";
|
|
4
|
-
import { createContextScope } from "@radix-ui/react-context";
|
|
5
|
-
import embla_carousel_react from "embla-carousel-react";
|
|
6
4
|
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { useCallback, useEffect, useState } from "react";
|
|
8
|
-
import {
|
|
7
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
8
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
9
|
+
//#region src/components/carousel.tsx
|
|
9
10
|
const CAROUSEL_NAME = "Carousel";
|
|
10
11
|
const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
|
|
11
12
|
const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
|
|
12
13
|
function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }) {
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
opts: opts,
|
|
73
|
-
orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
74
|
-
scope: __scopeCarousel,
|
|
75
|
-
scrollNext: scrollNext,
|
|
76
|
-
scrollPrev: scrollPrevious,
|
|
77
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
78
|
-
className: cn("relative", className),
|
|
79
|
-
"data-slot": "carousel",
|
|
80
|
-
onKeyDownCapture: handleKeyDown,
|
|
81
|
-
...props,
|
|
82
|
-
children: children
|
|
83
|
-
})
|
|
84
|
-
});
|
|
14
|
+
const [carouselRef, api] = useEmblaCarousel({
|
|
15
|
+
...opts,
|
|
16
|
+
axis: orientation === "vertical" ? "y" : "x"
|
|
17
|
+
}, plugins);
|
|
18
|
+
const [canScrollPrevious, setCanScrollPrevious] = useState(false);
|
|
19
|
+
const [canScrollNext, setCanScrollNext] = useState(false);
|
|
20
|
+
const onSelect = useCallback((carouselApi) => {
|
|
21
|
+
if (!carouselApi) return;
|
|
22
|
+
setCanScrollPrevious(carouselApi.canScrollPrev());
|
|
23
|
+
setCanScrollNext(carouselApi.canScrollNext());
|
|
24
|
+
}, []);
|
|
25
|
+
const scrollPrevious = useCallback(() => {
|
|
26
|
+
api?.scrollPrev();
|
|
27
|
+
}, [api]);
|
|
28
|
+
const scrollNext = useCallback(() => {
|
|
29
|
+
api?.scrollNext();
|
|
30
|
+
}, [api]);
|
|
31
|
+
const handleKeyDown = useCallback((event) => {
|
|
32
|
+
if (event.key === "ArrowLeft") {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
scrollPrevious();
|
|
35
|
+
} else if (event.key === "ArrowRight") {
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
scrollNext();
|
|
38
|
+
}
|
|
39
|
+
}, [scrollPrevious, scrollNext]);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (!api || !setApi) return;
|
|
42
|
+
setApi(api);
|
|
43
|
+
}, [api, setApi]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (!api) return;
|
|
46
|
+
queueMicrotask(() => {
|
|
47
|
+
onSelect(api);
|
|
48
|
+
});
|
|
49
|
+
api.on("reInit", onSelect);
|
|
50
|
+
api.on("select", onSelect);
|
|
51
|
+
return () => {
|
|
52
|
+
api.off("select", onSelect);
|
|
53
|
+
};
|
|
54
|
+
}, [api, onSelect]);
|
|
55
|
+
return /* @__PURE__ */ jsx(CarouselContextProvider, {
|
|
56
|
+
api,
|
|
57
|
+
canScrollNext,
|
|
58
|
+
canScrollPrev: canScrollPrevious,
|
|
59
|
+
carouselRef,
|
|
60
|
+
opts,
|
|
61
|
+
orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
62
|
+
scope: __scopeCarousel,
|
|
63
|
+
scrollNext,
|
|
64
|
+
scrollPrev: scrollPrevious,
|
|
65
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
66
|
+
className: cn("relative", className),
|
|
67
|
+
"data-slot": "carousel",
|
|
68
|
+
onKeyDownCapture: handleKeyDown,
|
|
69
|
+
...props,
|
|
70
|
+
children
|
|
71
|
+
})
|
|
72
|
+
});
|
|
85
73
|
}
|
|
86
74
|
const CAROUSEL_CONTENT_NAME = "CarouselContent";
|
|
87
75
|
function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
76
|
+
const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
|
|
77
|
+
return /* @__PURE__ */ jsx("div", {
|
|
78
|
+
ref: carouselRef,
|
|
79
|
+
className: cn("overflow-hidden", classNames?.wrapper),
|
|
80
|
+
"data-slot": "carousel-content",
|
|
81
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
82
|
+
className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", classNames?.content, className),
|
|
83
|
+
...props
|
|
84
|
+
})
|
|
85
|
+
});
|
|
98
86
|
}
|
|
99
87
|
const CAROUSEL_ITEM_NAME = "CarouselItem";
|
|
100
88
|
function CarouselItem({ __scopeCarousel, className, ...props }) {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
89
|
+
const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
|
|
90
|
+
return /* @__PURE__ */ jsx("div", {
|
|
91
|
+
"aria-roledescription": "slide",
|
|
92
|
+
className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
|
|
93
|
+
"data-slot": "carousel-item",
|
|
94
|
+
role: "group",
|
|
95
|
+
...props
|
|
96
|
+
});
|
|
109
97
|
}
|
|
110
98
|
const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
|
|
111
99
|
function CarouselPrevious({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
})
|
|
128
|
-
]
|
|
129
|
-
});
|
|
100
|
+
const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
|
|
101
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
102
|
+
"aria-label": "Previous slide",
|
|
103
|
+
className: cn("absolute size-8 shadow-none", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
|
|
104
|
+
"data-slot": "carousel-previous",
|
|
105
|
+
disabled: !canScrollPrev,
|
|
106
|
+
size,
|
|
107
|
+
variant,
|
|
108
|
+
onClick: scrollPrev,
|
|
109
|
+
...props,
|
|
110
|
+
children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
111
|
+
className: "sr-only",
|
|
112
|
+
children: "Previous slide"
|
|
113
|
+
})]
|
|
114
|
+
});
|
|
130
115
|
}
|
|
131
116
|
const CAROUSEL_NEXT_NAME = "CarouselNext";
|
|
132
117
|
function CarouselNext({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
})
|
|
149
|
-
]
|
|
150
|
-
});
|
|
118
|
+
const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
|
|
119
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
120
|
+
"aria-label": "Next slide",
|
|
121
|
+
className: cn("absolute size-8 shadow-none", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
|
|
122
|
+
"data-slot": "carousel-next",
|
|
123
|
+
disabled: !canScrollNext,
|
|
124
|
+
size,
|
|
125
|
+
variant,
|
|
126
|
+
onClick: scrollNext,
|
|
127
|
+
...props,
|
|
128
|
+
children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
129
|
+
className: "sr-only",
|
|
130
|
+
children: "Next slide"
|
|
131
|
+
})]
|
|
132
|
+
});
|
|
151
133
|
}
|
|
134
|
+
//#endregion
|
|
152
135
|
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };
|
|
@@ -1,57 +1,93 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import * as _$react from "react";
|
|
2
|
+
import { ComponentProps, ComponentType, JSX, ReactNode } from "react";
|
|
3
|
+
import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
|
|
4
|
+
import { Scope } from "@radix-ui/react-context";
|
|
5
5
|
import * as RechartsPrimitive from "recharts";
|
|
6
|
-
|
|
6
|
+
import { TooltipContentProps, TooltipProps } from "recharts";
|
|
7
|
+
import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
|
8
|
+
|
|
9
|
+
//#region src/components/chart.d.ts
|
|
10
|
+
type ExtractProps<T> = T extends ((props: infer P) => ReactNode) ? P : never;
|
|
7
11
|
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
8
12
|
declare const THEMES: {
|
|
9
|
-
|
|
10
|
-
|
|
13
|
+
readonly dark: ".dark";
|
|
14
|
+
readonly light: "";
|
|
11
15
|
};
|
|
12
16
|
type ChartConfig = Record<string, {
|
|
13
|
-
|
|
14
|
-
|
|
17
|
+
label?: ReactNode;
|
|
18
|
+
icon?: ComponentType;
|
|
15
19
|
} & ({
|
|
16
|
-
|
|
17
|
-
|
|
20
|
+
color?: never;
|
|
21
|
+
theme: Record<keyof typeof THEMES, string>;
|
|
18
22
|
} | {
|
|
19
|
-
|
|
20
|
-
|
|
23
|
+
color?: string;
|
|
24
|
+
theme?: never;
|
|
21
25
|
})>;
|
|
22
26
|
type ScopedProps<P> = P & {
|
|
23
|
-
|
|
27
|
+
__scopeChart?: Scope;
|
|
24
28
|
};
|
|
25
|
-
declare const createChartScope:
|
|
29
|
+
declare const createChartScope: _$_radix_ui_react_context0.CreateScope;
|
|
26
30
|
interface ChartContainerProps extends ComponentProps<"div"> {
|
|
27
|
-
|
|
28
|
-
|
|
31
|
+
children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
32
|
+
config: ChartConfig;
|
|
29
33
|
}
|
|
30
|
-
declare function ChartContainer({
|
|
34
|
+
declare function ChartContainer({
|
|
35
|
+
__scopeChart,
|
|
36
|
+
children,
|
|
37
|
+
className,
|
|
38
|
+
config,
|
|
39
|
+
id,
|
|
40
|
+
...props
|
|
41
|
+
}: ScopedProps<ChartContainerProps>): JSX.Element;
|
|
31
42
|
interface ChartStyleProps {
|
|
32
|
-
|
|
33
|
-
|
|
43
|
+
config: ChartConfig;
|
|
44
|
+
id: string;
|
|
34
45
|
}
|
|
35
|
-
declare function ChartStyle({
|
|
46
|
+
declare function ChartStyle({
|
|
47
|
+
config,
|
|
48
|
+
id
|
|
49
|
+
}: ChartStyleProps): ReactNode;
|
|
36
50
|
type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
|
|
37
51
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
38
52
|
type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<TooltipContentProps<TValue, TName>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
53
|
+
hideIndicator?: boolean;
|
|
54
|
+
hideLabel?: boolean;
|
|
55
|
+
indicator?: "dashed" | "dot" | "line";
|
|
56
|
+
labelKey?: string;
|
|
57
|
+
nameKey?: string;
|
|
58
|
+
color?: string | undefined;
|
|
59
|
+
className?: string | undefined;
|
|
60
|
+
payload?: Payload<TValue, TName>[];
|
|
47
61
|
};
|
|
48
|
-
declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
|
|
62
|
+
declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
|
|
63
|
+
__scopeChart,
|
|
64
|
+
active,
|
|
65
|
+
className,
|
|
66
|
+
color,
|
|
67
|
+
formatter,
|
|
68
|
+
hideIndicator,
|
|
69
|
+
hideLabel,
|
|
70
|
+
indicator,
|
|
71
|
+
label,
|
|
72
|
+
labelClassName,
|
|
73
|
+
labelFormatter,
|
|
74
|
+
labelKey,
|
|
75
|
+
nameKey,
|
|
76
|
+
payload
|
|
77
|
+
}: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode;
|
|
49
78
|
type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
|
|
50
|
-
declare const ChartLegend:
|
|
79
|
+
declare const ChartLegend: _$react.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
51
80
|
type ChartLegendContentProps = ComponentProps<"div"> & ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
|
|
52
|
-
|
|
53
|
-
|
|
81
|
+
hideIcon?: boolean;
|
|
82
|
+
nameKey?: string;
|
|
54
83
|
};
|
|
55
|
-
declare function ChartLegendContent({
|
|
56
|
-
|
|
57
|
-
|
|
84
|
+
declare function ChartLegendContent({
|
|
85
|
+
__scopeChart,
|
|
86
|
+
className,
|
|
87
|
+
hideIcon,
|
|
88
|
+
nameKey,
|
|
89
|
+
payload,
|
|
90
|
+
verticalAlign
|
|
91
|
+
}: ScopedProps<ChartLegendContentProps>): ReactNode;
|
|
92
|
+
//#endregion
|
|
93
|
+
export { type ChartConfig, ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, ChartStyle, type ChartStyleProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, createChartScope };
|