@giddaa-housing/ui 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/generated/shared.css +1 -1
- package/css/giddaa.css +12 -2
- package/dist/accordion.d.ts +9 -10
- package/dist/accordion.js +41 -87
- package/dist/activity-timeline.d.ts +12 -16
- package/dist/activity-timeline.js +83 -198
- package/dist/alert.d.ts +8 -9
- package/dist/alert.js +53 -111
- package/dist/auth-layout.d.ts +4 -4
- package/dist/auth-layout.js +143 -294
- package/dist/avatar.d.ts +6 -6
- package/dist/avatar.js +49 -19
- package/dist/badge.d.ts +12 -14
- package/dist/badge.js +71 -11
- package/dist/bar-chart.d.ts +65 -67
- package/dist/bar-chart.js +232 -207
- package/dist/breadcrumb.d.ts +5 -5
- package/dist/breadcrumb.js +56 -118
- package/dist/bullet-chart.d.ts +41 -37
- package/dist/bullet-chart.js +125 -148
- package/dist/button-BZIeyUw6.d.ts +17 -0
- package/dist/button-group.d.ts +13 -16
- package/dist/button-group.js +39 -88
- package/dist/button.d.ts +2 -19
- package/dist/button.js +94 -13
- package/dist/calendar.d.ts +6 -6
- package/dist/calendar.js +138 -17
- package/dist/card.d.ts +14 -16
- package/dist/card.js +59 -145
- package/dist/carousel.d.ts +34 -35
- package/dist/carousel.js +335 -20
- package/dist/chart.d.ts +90 -63
- package/dist/chart.js +573 -28
- package/dist/checkbox.d.ts +10 -12
- package/dist/checkbox.js +82 -47
- package/dist/cn-BI_4DMBf.js +23 -0
- package/dist/collapsible.d.ts +7 -8
- package/dist/collapsible.js +22 -47
- package/dist/combobox.d.ts +10 -10
- package/dist/combobox.js +236 -44
- package/dist/cta.d.ts +12 -14
- package/dist/cta.js +175 -341
- package/dist/currency-selector.d.ts +31 -32
- package/dist/currency-selector.js +106 -184
- package/dist/data-table.d.ts +168 -0
- package/dist/data-table.js +676 -0
- package/dist/date-picker.d.ts +22 -23
- package/dist/date-picker.js +119 -192
- package/dist/details-card.d.ts +7 -7
- package/dist/details-card.js +104 -253
- package/dist/dialog.d.ts +13 -14
- package/dist/dialog.js +116 -209
- package/dist/dropdown-menu.d.ts +13 -13
- package/dist/dropdown-menu.js +180 -37
- package/dist/dropzone.d.ts +55 -55
- package/dist/dropzone.js +327 -439
- package/dist/editorial-card.d.ts +23 -25
- package/dist/editorial-card.js +129 -296
- package/dist/empty-state.d.ts +8 -9
- package/dist/empty-state.js +48 -105
- package/dist/field.d.ts +23 -25
- package/dist/field.js +110 -221
- package/dist/filter.d.ts +118 -0
- package/dist/filter.js +775 -0
- package/dist/footer.d.ts +8 -15
- package/dist/footer.js +197 -400
- package/dist/funnel-chart.d.ts +49 -48
- package/dist/funnel-chart.js +170 -189
- package/dist/gallery-indicator.d.ts +11 -12
- package/dist/gallery-indicator.js +75 -12
- package/dist/heatmap-chart.d.ts +47 -50
- package/dist/heatmap-chart.js +186 -237
- package/dist/infotip.d.ts +8 -9
- package/dist/infotip.js +33 -59
- package/dist/input-CfoEJ8A6.d.ts +12 -0
- package/dist/input-group.d.ts +16 -20
- package/dist/input-group.js +99 -23
- package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
- package/dist/input-size-context.d.ts +2 -11
- package/dist/input-size-context.js +17 -9
- package/dist/input.d.ts +2 -13
- package/dist/input.js +27 -11
- package/dist/item.d.ts +7 -8
- package/dist/item.js +22 -59
- package/dist/kpi-card.d.ts +18 -20
- package/dist/kpi-card.js +84 -192
- package/dist/label.d.ts +6 -6
- package/dist/label.js +40 -8
- package/dist/line-chart.d.ts +200 -129
- package/dist/line-chart.js +330 -105
- package/dist/list-item.d.ts +22 -0
- package/dist/list-item.js +84 -0
- package/dist/logo.d.ts +4 -4
- package/dist/logo.js +92 -9
- package/dist/map-indicator.d.ts +7 -7
- package/dist/map-indicator.js +80 -106
- package/dist/match.d.ts +10 -11
- package/dist/match.js +62 -107
- package/dist/media-gallery-hero.d.ts +40 -42
- package/dist/media-gallery-hero.js +182 -343
- package/dist/media-player.d.ts +17 -17
- package/dist/media-player.js +873 -1348
- package/dist/multi-step-form.d.ts +56 -0
- package/dist/multi-step-form.js +342 -0
- package/dist/number-input.d.ts +34 -34
- package/dist/number-input.js +64 -117
- package/dist/page-header.d.ts +10 -11
- package/dist/page-header.js +34 -79
- package/dist/pagination.d.ts +17 -21
- package/dist/pagination.js +132 -207
- package/dist/password-input.d.ts +5 -13
- package/dist/password-input.js +31 -55
- package/dist/phone-input.d.ts +19 -20
- package/dist/phone-input.js +226 -344
- package/dist/photo-gallery.d.ts +19 -19
- package/dist/photo-gallery.js +313 -449
- package/dist/picker-lzgmsNfG.js +32 -0
- package/dist/pie-chart.d.ts +121 -90
- package/dist/pie-chart.js +183 -149
- package/dist/popover.d.ts +9 -9
- package/dist/popover.js +72 -23
- package/dist/price-tag.d.ts +26 -27
- package/dist/price-tag.js +113 -173
- package/dist/progress.d.ts +16 -17
- package/dist/progress.js +169 -24
- package/dist/property-listing-card.d.ts +14 -17
- package/dist/property-listing-card.js +102 -220
- package/dist/purchase-option-card.d.ts +79 -0
- package/dist/purchase-option-card.js +176 -0
- package/dist/radar-chart.d.ts +29 -31
- package/dist/radar-chart.js +162 -137
- package/dist/radio-group.d.ts +11 -13
- package/dist/radio-group.js +46 -60
- package/dist/review-block.d.ts +14 -16
- package/dist/review-block.js +154 -10
- package/dist/rich-text-editor.d.ts +30 -14
- package/dist/rich-text-editor.js +592 -716
- package/dist/scatter-chart.d.ts +45 -47
- package/dist/scatter-chart.js +236 -240
- package/dist/search-input.d.ts +8 -16
- package/dist/search-input.js +57 -109
- package/dist/select.d.ts +8 -8
- package/dist/select.js +144 -27
- package/dist/separator.d.ts +8 -9
- package/dist/separator.js +32 -8
- package/dist/sheet.d.ts +11 -11
- package/dist/sheet.js +103 -24
- package/dist/sidebar.d.ts +32 -37
- package/dist/sidebar.js +364 -634
- package/dist/size-context-D4mYvcg8.d.ts +10 -0
- package/dist/size-context.d.ts +2 -11
- package/dist/size-context.js +17 -9
- package/dist/skeleton.d.ts +4 -5
- package/dist/skeleton.js +12 -8
- package/dist/slider.d.ts +8 -9
- package/dist/slider.js +64 -135
- package/dist/sparkline.d.ts +68 -58
- package/dist/sparkline.js +315 -251
- package/dist/stepper.d.ts +23 -24
- package/dist/stepper.js +149 -246
- package/dist/styles.css +1004 -116
- package/dist/switch.d.ts +10 -12
- package/dist/switch.js +48 -70
- package/dist/table-card.d.ts +35 -0
- package/dist/table-card.js +125 -0
- package/dist/table.d.ts +18 -14
- package/dist/table.js +117 -154
- package/dist/tabs.d.ts +33 -15
- package/dist/tabs.js +110 -18
- package/dist/tag.d.ts +21 -23
- package/dist/tag.js +103 -159
- package/dist/testimonial-block.d.ts +18 -19
- package/dist/testimonial-block.js +189 -358
- package/dist/textarea-IS_D8pXf.d.ts +11 -0
- package/dist/textarea.d.ts +2 -12
- package/dist/textarea.js +24 -11
- package/dist/time-picker.d.ts +11 -11
- package/dist/time-picker.js +245 -302
- package/dist/toast.d.ts +16 -18
- package/dist/toast.js +154 -205
- package/dist/tooltip.d.ts +8 -9
- package/dist/tooltip.js +37 -12
- package/dist/tree-map.d.ts +59 -62
- package/dist/tree-map.js +226 -269
- package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
- package/dist/waterfall-chart.d.ts +94 -97
- package/dist/waterfall-chart.js +455 -552
- package/package.json +36 -9
- package/dist/accordion.js.map +0 -1
- package/dist/activity-timeline.js.map +0 -1
- package/dist/alert.js.map +0 -1
- package/dist/auth-layout.js.map +0 -1
- package/dist/avatar.js.map +0 -1
- package/dist/badge.js.map +0 -1
- package/dist/bar-chart.js.map +0 -1
- package/dist/breadcrumb.js.map +0 -1
- package/dist/bullet-chart.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/calendar.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/carousel.js.map +0 -1
- package/dist/chart.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/chunk-322YCNVL.js +0 -278
- package/dist/chunk-322YCNVL.js.map +0 -1
- package/dist/chunk-3ACQVT7A.js +0 -25
- package/dist/chunk-3ACQVT7A.js.map +0 -1
- package/dist/chunk-3T65TLJX.js +0 -334
- package/dist/chunk-3T65TLJX.js.map +0 -1
- package/dist/chunk-6ZSGQHH2.js +0 -192
- package/dist/chunk-6ZSGQHH2.js.map +0 -1
- package/dist/chunk-7TBMLFGW.js +0 -41
- package/dist/chunk-7TBMLFGW.js.map +0 -1
- package/dist/chunk-B4H6RNDH.js +0 -135
- package/dist/chunk-B4H6RNDH.js.map +0 -1
- package/dist/chunk-BUXCGZ6X.js +0 -219
- package/dist/chunk-BUXCGZ6X.js.map +0 -1
- package/dist/chunk-CHII2QHH.js +0 -58
- package/dist/chunk-CHII2QHH.js.map +0 -1
- package/dist/chunk-DMNOXRRW.js +0 -147
- package/dist/chunk-DMNOXRRW.js.map +0 -1
- package/dist/chunk-EFSOSSIC.js +0 -130
- package/dist/chunk-EFSOSSIC.js.map +0 -1
- package/dist/chunk-FZDSVMKY.js +0 -363
- package/dist/chunk-FZDSVMKY.js.map +0 -1
- package/dist/chunk-GJOFIJS3.js +0 -246
- package/dist/chunk-GJOFIJS3.js.map +0 -1
- package/dist/chunk-HL3ZSYES.js +0 -23
- package/dist/chunk-HL3ZSYES.js.map +0 -1
- package/dist/chunk-JVLUBAPB.js +0 -129
- package/dist/chunk-JVLUBAPB.js.map +0 -1
- package/dist/chunk-KDPYSOYZ.js +0 -64
- package/dist/chunk-KDPYSOYZ.js.map +0 -1
- package/dist/chunk-KSMDANKI.js +0 -43
- package/dist/chunk-KSMDANKI.js.map +0 -1
- package/dist/chunk-MEKCCOP5.js +0 -46
- package/dist/chunk-MEKCCOP5.js.map +0 -1
- package/dist/chunk-NOFXVRWL.js +0 -451
- package/dist/chunk-NOFXVRWL.js.map +0 -1
- package/dist/chunk-PC5MHNVA.js +0 -171
- package/dist/chunk-PC5MHNVA.js.map +0 -1
- package/dist/chunk-QKAQZ2GU.js +0 -122
- package/dist/chunk-QKAQZ2GU.js.map +0 -1
- package/dist/chunk-QZHSHSVV.js +0 -26
- package/dist/chunk-QZHSHSVV.js.map +0 -1
- package/dist/chunk-RBMK26XD.js +0 -19
- package/dist/chunk-RBMK26XD.js.map +0 -1
- package/dist/chunk-SFNJGF6M.js +0 -262
- package/dist/chunk-SFNJGF6M.js.map +0 -1
- package/dist/chunk-UJJNLGTM.js +0 -112
- package/dist/chunk-UJJNLGTM.js.map +0 -1
- package/dist/chunk-VGR4ZWJ3.js +0 -418
- package/dist/chunk-VGR4ZWJ3.js.map +0 -1
- package/dist/chunk-XG47P6D4.js +0 -99
- package/dist/chunk-XG47P6D4.js.map +0 -1
- package/dist/chunk-XZZAHNVM.js +0 -21
- package/dist/chunk-XZZAHNVM.js.map +0 -1
- package/dist/chunk-Y4TTYVNE.js +0 -36
- package/dist/chunk-Y4TTYVNE.js.map +0 -1
- package/dist/chunk-YDWIHW6Q.js +0 -69
- package/dist/chunk-YDWIHW6Q.js.map +0 -1
- package/dist/collapsible.js.map +0 -1
- package/dist/combobox.js.map +0 -1
- package/dist/cta.js.map +0 -1
- package/dist/currency-selector.js.map +0 -1
- package/dist/date-picker.js.map +0 -1
- package/dist/details-card.js.map +0 -1
- package/dist/dialog.js.map +0 -1
- package/dist/dropdown-menu.js.map +0 -1
- package/dist/dropzone.js.map +0 -1
- package/dist/editorial-card.js.map +0 -1
- package/dist/empty-state.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/footer.js.map +0 -1
- package/dist/funnel-chart.js.map +0 -1
- package/dist/gallery-indicator.js.map +0 -1
- package/dist/heatmap-chart.js.map +0 -1
- package/dist/infotip.js.map +0 -1
- package/dist/input-group.js.map +0 -1
- package/dist/input-size-context.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/item.js.map +0 -1
- package/dist/kpi-card.js.map +0 -1
- package/dist/label.js.map +0 -1
- package/dist/line-chart.js.map +0 -1
- package/dist/logo.js.map +0 -1
- package/dist/map-indicator.js.map +0 -1
- package/dist/match.js.map +0 -1
- package/dist/media-gallery-hero.js.map +0 -1
- package/dist/media-player.js.map +0 -1
- package/dist/number-input.js.map +0 -1
- package/dist/page-header.js.map +0 -1
- package/dist/pagination.js.map +0 -1
- package/dist/password-input.js.map +0 -1
- package/dist/phone-input.js.map +0 -1
- package/dist/photo-gallery.js.map +0 -1
- package/dist/pie-chart.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/price-tag.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/property-listing-card.js.map +0 -1
- package/dist/radar-chart.js.map +0 -1
- package/dist/radio-group.js.map +0 -1
- package/dist/review-block.js.map +0 -1
- package/dist/rich-text-editor.js.map +0 -1
- package/dist/scatter-chart.js.map +0 -1
- package/dist/search-input.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/separator.js.map +0 -1
- package/dist/sheet.js.map +0 -1
- package/dist/sidebar.js.map +0 -1
- package/dist/size-context.js.map +0 -1
- package/dist/skeleton.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/sparkline.js.map +0 -1
- package/dist/stepper.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/tab-list.d.ts +0 -38
- package/dist/tab-list.js +0 -123
- package/dist/tab-list.js.map +0 -1
- package/dist/table.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/tag.js.map +0 -1
- package/dist/testimonial-block.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/time-picker.js.map +0 -1
- package/dist/toast.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/tree-map.js.map +0 -1
- package/dist/waterfall-chart.js.map +0 -1
package/dist/chunk-FZDSVMKY.js
DELETED
|
@@ -1,363 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useComponentSize
|
|
3
|
-
} from "./chunk-HL3ZSYES.js";
|
|
4
|
-
import {
|
|
5
|
-
cn
|
|
6
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
7
|
-
|
|
8
|
-
// src/carousel.tsx
|
|
9
|
-
import { cva } from "class-variance-authority";
|
|
10
|
-
import useEmblaCarousel from "embla-carousel-react";
|
|
11
|
-
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
12
|
-
import * as React from "react";
|
|
13
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
-
var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
|
|
15
|
-
var carouselVariants = cva(
|
|
16
|
-
"relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
|
|
17
|
-
{
|
|
18
|
-
variants: {
|
|
19
|
-
imageSize: {
|
|
20
|
-
sm: "w-[320px] max-w-full aspect-[320/220]",
|
|
21
|
-
md: "w-[520px] max-w-full aspect-[520/340]",
|
|
22
|
-
lg: "w-[800px] max-w-full aspect-[800/500]",
|
|
23
|
-
full: "w-full"
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
imageSize: "md"
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
var CarouselContext = React.createContext(null);
|
|
32
|
-
function useCarousel() {
|
|
33
|
-
const context = React.useContext(CarouselContext);
|
|
34
|
-
if (!context) {
|
|
35
|
-
throw new Error("useCarousel must be used within a <Carousel />");
|
|
36
|
-
}
|
|
37
|
-
return context;
|
|
38
|
-
}
|
|
39
|
-
function Carousel({
|
|
40
|
-
orientation = "horizontal",
|
|
41
|
-
opts,
|
|
42
|
-
setApi,
|
|
43
|
-
plugins,
|
|
44
|
-
size,
|
|
45
|
-
imageSize,
|
|
46
|
-
className,
|
|
47
|
-
children,
|
|
48
|
-
...props
|
|
49
|
-
}) {
|
|
50
|
-
const resolvedSize = useComponentSize(size);
|
|
51
|
-
const [carouselRef, api] = useEmblaCarousel(
|
|
52
|
-
{
|
|
53
|
-
...opts,
|
|
54
|
-
axis: orientation === "horizontal" ? "x" : "y"
|
|
55
|
-
},
|
|
56
|
-
plugins
|
|
57
|
-
);
|
|
58
|
-
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
59
|
-
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
60
|
-
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
61
|
-
const [scrollSnaps, setScrollSnaps] = React.useState([]);
|
|
62
|
-
const onSelect = React.useCallback((api2) => {
|
|
63
|
-
if (!api2) return;
|
|
64
|
-
setCanScrollPrev(api2.canScrollPrev());
|
|
65
|
-
setCanScrollNext(api2.canScrollNext());
|
|
66
|
-
setSelectedIndex(api2.selectedScrollSnap());
|
|
67
|
-
}, []);
|
|
68
|
-
const onReInit = React.useCallback(
|
|
69
|
-
(api2) => {
|
|
70
|
-
if (!api2) return;
|
|
71
|
-
setScrollSnaps(api2.scrollSnapList());
|
|
72
|
-
onSelect(api2);
|
|
73
|
-
},
|
|
74
|
-
[onSelect]
|
|
75
|
-
);
|
|
76
|
-
const scrollPrev = React.useCallback(() => {
|
|
77
|
-
api?.scrollPrev();
|
|
78
|
-
}, [api]);
|
|
79
|
-
const scrollNext = React.useCallback(() => {
|
|
80
|
-
api?.scrollNext();
|
|
81
|
-
}, [api]);
|
|
82
|
-
const scrollTo = React.useCallback(
|
|
83
|
-
(index) => {
|
|
84
|
-
api?.scrollTo(index);
|
|
85
|
-
},
|
|
86
|
-
[api]
|
|
87
|
-
);
|
|
88
|
-
const handleKeyDown = React.useCallback(
|
|
89
|
-
(event) => {
|
|
90
|
-
const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
|
|
91
|
-
const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
|
|
92
|
-
if (event.key === prevKey) {
|
|
93
|
-
event.preventDefault();
|
|
94
|
-
scrollPrev();
|
|
95
|
-
} else if (event.key === nextKey) {
|
|
96
|
-
event.preventDefault();
|
|
97
|
-
scrollNext();
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
[orientation, scrollPrev, scrollNext]
|
|
101
|
-
);
|
|
102
|
-
React.useEffect(() => {
|
|
103
|
-
if (!api || !setApi) return;
|
|
104
|
-
setApi(api);
|
|
105
|
-
}, [api, setApi]);
|
|
106
|
-
React.useEffect(() => {
|
|
107
|
-
if (!api) return;
|
|
108
|
-
onReInit(api);
|
|
109
|
-
api.on("reInit", onReInit);
|
|
110
|
-
api.on("select", onSelect);
|
|
111
|
-
return () => {
|
|
112
|
-
api?.off("reInit", onReInit);
|
|
113
|
-
api?.off("select", onSelect);
|
|
114
|
-
};
|
|
115
|
-
}, [api, onReInit, onSelect]);
|
|
116
|
-
return /* @__PURE__ */ jsx(
|
|
117
|
-
CarouselContext.Provider,
|
|
118
|
-
{
|
|
119
|
-
value: {
|
|
120
|
-
carouselRef,
|
|
121
|
-
api,
|
|
122
|
-
orientation,
|
|
123
|
-
size: resolvedSize,
|
|
124
|
-
scrollPrev,
|
|
125
|
-
scrollNext,
|
|
126
|
-
scrollTo,
|
|
127
|
-
canScrollPrev,
|
|
128
|
-
canScrollNext,
|
|
129
|
-
selectedIndex,
|
|
130
|
-
scrollSnaps
|
|
131
|
-
},
|
|
132
|
-
children: /* @__PURE__ */ jsx(
|
|
133
|
-
"div",
|
|
134
|
-
{
|
|
135
|
-
onKeyDownCapture: handleKeyDown,
|
|
136
|
-
className: cn(carouselVariants({ imageSize }), className),
|
|
137
|
-
role: "region",
|
|
138
|
-
"aria-roledescription": "carousel",
|
|
139
|
-
"data-slot": "carousel",
|
|
140
|
-
...props,
|
|
141
|
-
children
|
|
142
|
-
}
|
|
143
|
-
)
|
|
144
|
-
}
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
function CarouselContent({ className, ...props }) {
|
|
148
|
-
const { carouselRef, orientation } = useCarousel();
|
|
149
|
-
return /* @__PURE__ */ jsx(
|
|
150
|
-
"div",
|
|
151
|
-
{
|
|
152
|
-
ref: carouselRef,
|
|
153
|
-
className: "h-full overflow-hidden",
|
|
154
|
-
"data-slot": "carousel-content",
|
|
155
|
-
children: /* @__PURE__ */ jsx(
|
|
156
|
-
"div",
|
|
157
|
-
{
|
|
158
|
-
className: cn(
|
|
159
|
-
"flex h-full",
|
|
160
|
-
orientation === "horizontal" ? "" : "flex-col",
|
|
161
|
-
className
|
|
162
|
-
),
|
|
163
|
-
...props
|
|
164
|
-
}
|
|
165
|
-
)
|
|
166
|
-
}
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
function CarouselItem({ className, ...props }) {
|
|
170
|
-
return (
|
|
171
|
-
// biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
|
|
172
|
-
/* @__PURE__ */ jsx(
|
|
173
|
-
"div",
|
|
174
|
-
{
|
|
175
|
-
role: "group",
|
|
176
|
-
"aria-roledescription": "slide",
|
|
177
|
-
"data-slot": "carousel-item",
|
|
178
|
-
className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
|
|
179
|
-
...props
|
|
180
|
-
}
|
|
181
|
-
)
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
var arrowVariants = cva(
|
|
185
|
-
cn(
|
|
186
|
-
"absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
|
|
187
|
-
glassChrome,
|
|
188
|
-
"hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
|
|
189
|
-
),
|
|
190
|
-
{
|
|
191
|
-
variants: {
|
|
192
|
-
size: {
|
|
193
|
-
sm: "size-8 [&_svg]:size-4",
|
|
194
|
-
md: "size-10 [&_svg]:size-[18px]",
|
|
195
|
-
lg: "size-12 [&_svg]:size-5"
|
|
196
|
-
},
|
|
197
|
-
side: {
|
|
198
|
-
prev: "",
|
|
199
|
-
next: ""
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
compoundVariants: [
|
|
203
|
-
{ size: "sm", side: "prev", className: "left-3" },
|
|
204
|
-
{ size: "sm", side: "next", className: "right-3" },
|
|
205
|
-
{ size: "md", side: "prev", className: "left-4" },
|
|
206
|
-
{ size: "md", side: "next", className: "right-4" },
|
|
207
|
-
{ size: "lg", side: "prev", className: "left-5" },
|
|
208
|
-
{ size: "lg", side: "next", className: "right-5" }
|
|
209
|
-
],
|
|
210
|
-
defaultVariants: {
|
|
211
|
-
size: "md",
|
|
212
|
-
side: "prev"
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
);
|
|
216
|
-
function CarouselPrevious({
|
|
217
|
-
className,
|
|
218
|
-
...props
|
|
219
|
-
}) {
|
|
220
|
-
const { size, scrollPrev, canScrollPrev } = useCarousel();
|
|
221
|
-
return /* @__PURE__ */ jsxs(
|
|
222
|
-
"button",
|
|
223
|
-
{
|
|
224
|
-
type: "button",
|
|
225
|
-
"data-slot": "carousel-previous",
|
|
226
|
-
className: cn(arrowVariants({ size, side: "prev" }), className),
|
|
227
|
-
disabled: !canScrollPrev,
|
|
228
|
-
onClick: scrollPrev,
|
|
229
|
-
...props,
|
|
230
|
-
children: [
|
|
231
|
-
/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "cn-rtl-flip" }),
|
|
232
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
|
|
233
|
-
]
|
|
234
|
-
}
|
|
235
|
-
);
|
|
236
|
-
}
|
|
237
|
-
function CarouselNext({ className, ...props }) {
|
|
238
|
-
const { size, scrollNext, canScrollNext } = useCarousel();
|
|
239
|
-
return /* @__PURE__ */ jsxs(
|
|
240
|
-
"button",
|
|
241
|
-
{
|
|
242
|
-
type: "button",
|
|
243
|
-
"data-slot": "carousel-next",
|
|
244
|
-
className: cn(arrowVariants({ size, side: "next" }), className),
|
|
245
|
-
disabled: !canScrollNext,
|
|
246
|
-
onClick: scrollNext,
|
|
247
|
-
...props,
|
|
248
|
-
children: [
|
|
249
|
-
/* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" }),
|
|
250
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
|
|
251
|
-
]
|
|
252
|
-
}
|
|
253
|
-
);
|
|
254
|
-
}
|
|
255
|
-
var MANY_THRESHOLD = 5;
|
|
256
|
-
var MANY_WINDOW = 5;
|
|
257
|
-
function getIndicatorWindow(count, selected) {
|
|
258
|
-
if (count < MANY_THRESHOLD) {
|
|
259
|
-
const dots2 = Array.from({ length: count }, (_, index) => ({
|
|
260
|
-
index,
|
|
261
|
-
faded: false
|
|
262
|
-
}));
|
|
263
|
-
return { dots: dots2, start: 0, visible: count };
|
|
264
|
-
}
|
|
265
|
-
const half = Math.floor(MANY_WINDOW / 2);
|
|
266
|
-
const start = Math.max(0, Math.min(selected - half, count - MANY_WINDOW));
|
|
267
|
-
const end = start + MANY_WINDOW - 1;
|
|
268
|
-
const overflowLeft = start > 0;
|
|
269
|
-
const overflowRight = end < count - 1;
|
|
270
|
-
const dots = Array.from({ length: count }, (_, index) => ({
|
|
271
|
-
index,
|
|
272
|
-
faded: overflowLeft && index === start || overflowRight && index === end
|
|
273
|
-
}));
|
|
274
|
-
return { dots, start, visible: MANY_WINDOW };
|
|
275
|
-
}
|
|
276
|
-
var INDICATOR_SIZES = {
|
|
277
|
-
sm: { dot: 5, gap: 4, padX: 8, padY: 4 },
|
|
278
|
-
md: { dot: 7, gap: 5, padX: 10, padY: 5 },
|
|
279
|
-
lg: { dot: 9, gap: 6, padX: 12, padY: 6 }
|
|
280
|
-
};
|
|
281
|
-
var INDICATOR_OFFSET = {
|
|
282
|
-
sm: "bottom-3",
|
|
283
|
-
md: "bottom-[18px]",
|
|
284
|
-
lg: "bottom-6"
|
|
285
|
-
};
|
|
286
|
-
function CarouselIndicator({
|
|
287
|
-
className,
|
|
288
|
-
count: countProp,
|
|
289
|
-
selected: selectedProp,
|
|
290
|
-
size: sizeProp,
|
|
291
|
-
onSelect,
|
|
292
|
-
...props
|
|
293
|
-
}) {
|
|
294
|
-
const ctx = React.useContext(CarouselContext);
|
|
295
|
-
const inheritedSize = useComponentSize(sizeProp);
|
|
296
|
-
const size = sizeProp ?? ctx?.size ?? inheritedSize;
|
|
297
|
-
const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
|
|
298
|
-
const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
|
|
299
|
-
const handleSelect = onSelect ?? ctx?.scrollTo;
|
|
300
|
-
if (count <= 1) return null;
|
|
301
|
-
const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
|
|
302
|
-
const { dots, start, visible } = getIndicatorWindow(count, selected);
|
|
303
|
-
const step = dot + gap;
|
|
304
|
-
const viewportWidth = visible * step - gap;
|
|
305
|
-
return /* @__PURE__ */ jsx(
|
|
306
|
-
"div",
|
|
307
|
-
{
|
|
308
|
-
"data-slot": "carousel-indicator",
|
|
309
|
-
className: cn(
|
|
310
|
-
"absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full",
|
|
311
|
-
INDICATOR_OFFSET[size],
|
|
312
|
-
glassChrome,
|
|
313
|
-
className
|
|
314
|
-
),
|
|
315
|
-
style: { padding: `${padY}px ${padX}px` },
|
|
316
|
-
role: "tablist",
|
|
317
|
-
"aria-label": "Slide indicators",
|
|
318
|
-
...props,
|
|
319
|
-
children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", style: { width: viewportWidth }, children: /* @__PURE__ */ jsx(
|
|
320
|
-
"div",
|
|
321
|
-
{
|
|
322
|
-
className: "flex items-center transition-transform duration-300 ease-out",
|
|
323
|
-
style: { gap, transform: `translateX(${-start * step}px)` },
|
|
324
|
-
children: dots.map(({ index, faded }) => {
|
|
325
|
-
const isActive = index === selected;
|
|
326
|
-
return /* @__PURE__ */ jsx(
|
|
327
|
-
"button",
|
|
328
|
-
{
|
|
329
|
-
type: "button",
|
|
330
|
-
role: "tab",
|
|
331
|
-
"aria-selected": isActive,
|
|
332
|
-
"aria-label": `Go to slide ${index + 1}`,
|
|
333
|
-
onClick: () => handleSelect?.(index),
|
|
334
|
-
className: cn(
|
|
335
|
-
"shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out",
|
|
336
|
-
handleSelect ? "cursor-pointer" : "cursor-default"
|
|
337
|
-
),
|
|
338
|
-
style: {
|
|
339
|
-
width: dot,
|
|
340
|
-
height: dot,
|
|
341
|
-
opacity: faded ? 0.3 : isActive ? 1 : 0.55,
|
|
342
|
-
transform: faded ? "scale(0.6)" : "scale(1)"
|
|
343
|
-
}
|
|
344
|
-
},
|
|
345
|
-
index
|
|
346
|
-
);
|
|
347
|
-
})
|
|
348
|
-
}
|
|
349
|
-
) })
|
|
350
|
-
}
|
|
351
|
-
);
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
export {
|
|
355
|
-
useCarousel,
|
|
356
|
-
Carousel,
|
|
357
|
-
CarouselContent,
|
|
358
|
-
CarouselItem,
|
|
359
|
-
CarouselPrevious,
|
|
360
|
-
CarouselNext,
|
|
361
|
-
CarouselIndicator
|
|
362
|
-
};
|
|
363
|
-
//# sourceMappingURL=chunk-FZDSVMKY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport useEmblaCarousel, {\n\ttype UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\n/**\n * Shared glassmorphic treatment for every overlay surface in the carousel\n * (navigation arrows + indicator). Dark glass at 35% over a 16px backdrop\n * blur with a near-invisible 18% light border that lifts the chrome off the\n * imagery. Always dark, in both themes — see `--color-surface-glass-overlay-button`.\n */\nconst glassChrome =\n\t\"border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]\";\n\nconst carouselVariants = cva(\n\t\"relative overflow-hidden rounded-2xl bg-surface-brand-subtle\",\n\t{\n\t\tvariants: {\n\t\t\timageSize: {\n\t\t\t\tsm: \"w-[320px] max-w-full aspect-[320/220]\",\n\t\t\t\tmd: \"w-[520px] max-w-full aspect-[520/340]\",\n\t\t\t\tlg: \"w-[800px] max-w-full aspect-[800/500]\",\n\t\t\t\tfull: \"w-full\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\timageSize: \"md\",\n\t\t},\n\t},\n);\n\ntype CarouselContextProps = {\n\tcarouselRef: ReturnType<typeof useEmblaCarousel>[0];\n\tapi: CarouselApi;\n\torientation: \"horizontal\" | \"vertical\";\n\tsize: ComponentSize;\n\tscrollPrev: () => void;\n\tscrollNext: () => void;\n\tscrollTo: (index: number) => void;\n\tcanScrollPrev: boolean;\n\tcanScrollNext: boolean;\n\tselectedIndex: number;\n\tscrollSnaps: number[];\n};\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n\tconst context = React.useContext(CarouselContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useCarousel must be used within a <Carousel />\");\n\t}\n\n\treturn context;\n}\n\ntype CarouselProps = {\n\topts?: CarouselOptions;\n\tplugins?: CarouselPlugin;\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** Scales the chrome (arrows + indicator) without touching the image. */\n\tsize?: ComponentSize;\n\tsetApi?: (api: CarouselApi) => void;\n};\n\nfunction Carousel({\n\torientation = \"horizontal\",\n\topts,\n\tsetApi,\n\tplugins,\n\tsize,\n\timageSize,\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> &\n\tCarouselProps &\n\tVariantProps<typeof carouselVariants>) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst [carouselRef, api] = useEmblaCarousel(\n\t\t{\n\t\t\t...opts,\n\t\t\taxis: orientation === \"horizontal\" ? \"x\" : \"y\",\n\t\t},\n\t\tplugins,\n\t);\n\tconst [canScrollPrev, setCanScrollPrev] = React.useState(false);\n\tconst [canScrollNext, setCanScrollNext] = React.useState(false);\n\tconst [selectedIndex, setSelectedIndex] = React.useState(0);\n\tconst [scrollSnaps, setScrollSnaps] = React.useState<number[]>([]);\n\n\tconst onSelect = React.useCallback((api: CarouselApi) => {\n\t\tif (!api) return;\n\t\tsetCanScrollPrev(api.canScrollPrev());\n\t\tsetCanScrollNext(api.canScrollNext());\n\t\tsetSelectedIndex(api.selectedScrollSnap());\n\t}, []);\n\n\tconst onReInit = React.useCallback(\n\t\t(api: CarouselApi) => {\n\t\t\tif (!api) return;\n\t\t\tsetScrollSnaps(api.scrollSnapList());\n\t\t\tonSelect(api);\n\t\t},\n\t\t[onSelect],\n\t);\n\n\tconst scrollPrev = React.useCallback(() => {\n\t\tapi?.scrollPrev();\n\t}, [api]);\n\n\tconst scrollNext = React.useCallback(() => {\n\t\tapi?.scrollNext();\n\t}, [api]);\n\n\tconst scrollTo = React.useCallback(\n\t\t(index: number) => {\n\t\t\tapi?.scrollTo(index);\n\t\t},\n\t\t[api],\n\t);\n\n\tconst handleKeyDown = React.useCallback(\n\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\tconst prevKey = orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\";\n\t\t\tconst nextKey = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\";\n\t\t\tif (event.key === prevKey) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollPrev();\n\t\t\t} else if (event.key === nextKey) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollNext();\n\t\t\t}\n\t\t},\n\t\t[orientation, scrollPrev, scrollNext],\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (!api || !setApi) return;\n\t\tsetApi(api);\n\t}, [api, setApi]);\n\n\tReact.useEffect(() => {\n\t\tif (!api) return;\n\t\tonReInit(api);\n\t\tapi.on(\"reInit\", onReInit);\n\t\tapi.on(\"select\", onSelect);\n\n\t\treturn () => {\n\t\t\tapi?.off(\"reInit\", onReInit);\n\t\t\tapi?.off(\"select\", onSelect);\n\t\t};\n\t}, [api, onReInit, onSelect]);\n\n\treturn (\n\t\t<CarouselContext.Provider\n\t\t\tvalue={{\n\t\t\t\tcarouselRef,\n\t\t\t\tapi,\n\t\t\t\torientation,\n\t\t\t\tsize: resolvedSize,\n\t\t\t\tscrollPrev,\n\t\t\t\tscrollNext,\n\t\t\t\tscrollTo,\n\t\t\t\tcanScrollPrev,\n\t\t\t\tcanScrollNext,\n\t\t\t\tselectedIndex,\n\t\t\t\tscrollSnaps,\n\t\t\t}}\n\t\t>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: the W3C carousel pattern is a region with aria-roledescription, not a generic landmark element. */}\n\t\t\t<div\n\t\t\t\tonKeyDownCapture={handleKeyDown}\n\t\t\t\tclassName={cn(carouselVariants({ imageSize }), className)}\n\t\t\t\trole=\"region\"\n\t\t\t\taria-roledescription=\"carousel\"\n\t\t\t\tdata-slot=\"carousel\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</CarouselContext.Provider>\n\t);\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n\tconst { carouselRef, orientation } = useCarousel();\n\n\treturn (\n\t\t<div\n\t\t\tref={carouselRef}\n\t\t\tclassName=\"h-full overflow-hidden\"\n\t\t\tdata-slot=\"carousel-content\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-full\",\n\t\t\t\t\torientation === \"horizontal\" ? \"\" : \"flex-col\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t// biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role=\"group\" with aria-roledescription per the W3C pattern, not a fieldset.\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-roledescription=\"slide\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cn(\"min-w-0 shrink-0 grow-0 basis-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst arrowVariants = cva(\n\tcn(\n\t\t\"absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none\",\n\t\tglassChrome,\n\t\t\"hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-8 [&_svg]:size-4\",\n\t\t\t\tmd: \"size-10 [&_svg]:size-[18px]\",\n\t\t\t\tlg: \"size-12 [&_svg]:size-5\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\tprev: \"\",\n\t\t\t\tnext: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{ size: \"sm\", side: \"prev\", className: \"left-3\" },\n\t\t\t{ size: \"sm\", side: \"next\", className: \"right-3\" },\n\t\t\t{ size: \"md\", side: \"prev\", className: \"left-4\" },\n\t\t\t{ size: \"md\", side: \"next\", className: \"right-4\" },\n\t\t\t{ size: \"lg\", side: \"prev\", className: \"left-5\" },\n\t\t\t{ size: \"lg\", side: \"next\", className: \"right-5\" },\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tside: \"prev\",\n\t\t},\n\t},\n);\n\nfunction CarouselPrevious({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"button\">) {\n\tconst { size, scrollPrev, canScrollPrev } = useCarousel();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tdata-slot=\"carousel-previous\"\n\t\t\tclassName={cn(arrowVariants({ size, side: \"prev\" }), className)}\n\t\t\tdisabled={!canScrollPrev}\n\t\t\tonClick={scrollPrev}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronLeftIcon className=\"cn-rtl-flip\" />\n\t\t\t<span className=\"sr-only\">Previous slide</span>\n\t\t</button>\n\t);\n}\n\nfunction CarouselNext({ className, ...props }: React.ComponentProps<\"button\">) {\n\tconst { size, scrollNext, canScrollNext } = useCarousel();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tdata-slot=\"carousel-next\"\n\t\t\tclassName={cn(arrowVariants({ size, side: \"next\" }), className)}\n\t\t\tdisabled={!canScrollNext}\n\t\t\tonClick={scrollNext}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronRightIcon className=\"cn-rtl-flip\" />\n\t\t\t<span className=\"sr-only\">Next slide</span>\n\t\t</button>\n\t);\n}\n\n/**\n * Past this many items the indicator switches from \"show every dot\" to the\n * Airbnb-style windowed mode: at most `MANY_WINDOW` dots, the active one kept\n * near the centre, and dots at a clipped edge faded down to imply more beyond.\n */\nconst MANY_THRESHOLD = 5;\nconst MANY_WINDOW = 5;\n\ntype IndicatorDot = {\n\t/** Index into the full list of slides. */\n\tindex: number;\n\t/** True for the outermost dot on a side that has hidden slides beyond it. */\n\tfaded: boolean;\n};\n\n/**\n * Returns the dots to render plus the window start, so the determinate and\n * windowed (\"many\") cases share one render path. The dot strip is always the\n * full list; `start` drives the translate that slides it under the viewport.\n */\nfunction getIndicatorWindow(count: number, selected: number) {\n\tif (count < MANY_THRESHOLD) {\n\t\tconst dots: IndicatorDot[] = Array.from({ length: count }, (_, index) => ({\n\t\t\tindex,\n\t\t\tfaded: false,\n\t\t}));\n\t\treturn { dots, start: 0, visible: count };\n\t}\n\n\tconst half = Math.floor(MANY_WINDOW / 2);\n\tconst start = Math.max(0, Math.min(selected - half, count - MANY_WINDOW));\n\tconst end = start + MANY_WINDOW - 1;\n\tconst overflowLeft = start > 0;\n\tconst overflowRight = end < count - 1;\n\n\tconst dots: IndicatorDot[] = Array.from({ length: count }, (_, index) => ({\n\t\tindex,\n\t\tfaded:\n\t\t\t(overflowLeft && index === start) || (overflowRight && index === end),\n\t}));\n\n\treturn { dots, start, visible: MANY_WINDOW };\n}\n\n/** Dot diameter, gap, and pill padding per size — in px to keep them crisp. */\nconst INDICATOR_SIZES: Record<\n\tComponentSize,\n\t{ dot: number; gap: number; padX: number; padY: number }\n> = {\n\tsm: { dot: 5, gap: 4, padX: 8, padY: 4 },\n\tmd: { dot: 7, gap: 5, padX: 10, padY: 5 },\n\tlg: { dot: 9, gap: 6, padX: 12, padY: 6 },\n};\n\n/** Distance of the indicator from the bottom edge, per size (12/18/24px). */\nconst INDICATOR_OFFSET: Record<ComponentSize, string> = {\n\tsm: \"bottom-3\",\n\tmd: \"bottom-[18px]\",\n\tlg: \"bottom-6\",\n};\n\ntype CarouselIndicatorProps = Omit<\n\tReact.ComponentProps<\"div\">,\n\t\"children\" | \"onSelect\"\n> & {\n\t/** Override the live count (e.g. for static design previews). */\n\tcount?: number;\n\t/** Override the live selected index. */\n\tselected?: number;\n\t/** Override the inherited carousel size. */\n\tsize?: ComponentSize;\n\t/** Jump to a slide when a dot is activated. Defaults to the carousel API. */\n\tonSelect?: (index: number) => void;\n};\n\nfunction CarouselIndicator({\n\tclassName,\n\tcount: countProp,\n\tselected: selectedProp,\n\tsize: sizeProp,\n\tonSelect,\n\t...props\n}: CarouselIndicatorProps) {\n\t// Read context loosely so the indicator can also stand alone (previews,\n\t// docs) by passing `count`/`selected` directly.\n\tconst ctx = React.useContext(CarouselContext);\n\tconst inheritedSize = useComponentSize(sizeProp);\n\n\tconst size = sizeProp ?? ctx?.size ?? inheritedSize;\n\tconst count = countProp ?? ctx?.scrollSnaps.length ?? 0;\n\tconst selected = selectedProp ?? ctx?.selectedIndex ?? 0;\n\tconst handleSelect = onSelect ?? ctx?.scrollTo;\n\n\tif (count <= 1) return null;\n\n\tconst { dot, gap, padX, padY } = INDICATOR_SIZES[size];\n\tconst { dots, start, visible } = getIndicatorWindow(count, selected);\n\tconst step = dot + gap;\n\t// Viewport width clips the strip to exactly `visible` dots; the strip then\n\t// translates by `start` steps so the windowed dots line up under it.\n\tconst viewportWidth = visible * step - gap;\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full\",\n\t\t\t\tINDICATOR_OFFSET[size],\n\t\t\t\tglassChrome,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ padding: `${padY}px ${padX}px` }}\n\t\t\trole=\"tablist\"\n\t\t\taria-label=\"Slide indicators\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"overflow-hidden\" style={{ width: viewportWidth }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex items-center transition-transform duration-300 ease-out\"\n\t\t\t\t\tstyle={{ gap, transform: `translateX(${-start * step}px)` }}\n\t\t\t\t>\n\t\t\t\t\t{dots.map(({ index, faded }) => {\n\t\t\t\t\t\tconst isActive = index === selected;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={isActive}\n\t\t\t\t\t\t\t\taria-label={`Go to slide ${index + 1}`}\n\t\t\t\t\t\t\t\tonClick={() => handleSelect?.(index)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out\",\n\t\t\t\t\t\t\t\t\thandleSelect ? \"cursor-pointer\" : \"cursor-default\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: dot,\n\t\t\t\t\t\t\t\t\theight: dot,\n\t\t\t\t\t\t\t\t\topacity: faded ? 0.3 : isActive ? 1 : 0.55,\n\t\t\t\t\t\t\t\t\ttransform: faded ? \"scale(0.6)\" : \"scale(1)\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport {\n\ttype CarouselApi,\n\tCarousel,\n\tCarouselContent,\n\tCarouselItem,\n\tCarouselPrevious,\n\tCarouselNext,\n\tCarouselIndicator,\n\tuseCarousel,\n};\n"],"mappings":";;;;;;;;AAEA,SAAS,WAA8B;AACvC,OAAO,sBAEA;AACP,SAAS,iBAAiB,wBAAwB;AAClD,YAAY,WAAW;AAgLpB,cAwFD,YAxFC;AAjKH,IAAM,cACL;AAED,IAAM,mBAAmB;AAAA,EACxB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,WAAW;AAAA,QACV,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACP;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,WAAW;AAAA,IACZ;AAAA,EACD;AACD;AAgBA,IAAM,kBAAwB,oBAA2C,IAAI;AAE7E,SAAS,cAAc;AACtB,QAAM,UAAgB,iBAAW,eAAe;AAEhD,MAAI,CAAC,SAAS;AACb,UAAM,IAAI,MAAM,gDAAgD;AAAA,EACjE;AAEA,SAAO;AACR;AAWA,SAAS,SAAS;AAAA,EACjB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAEwC;AACvC,QAAM,eAAe,iBAAiB,IAAI;AAC1C,QAAM,CAAC,aAAa,GAAG,IAAI;AAAA,IAC1B;AAAA,MACC,GAAG;AAAA,MACH,MAAM,gBAAgB,eAAe,MAAM;AAAA,IAC5C;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAU,eAAS,KAAK;AAC9D,QAAM,CAAC,eAAe,gBAAgB,IAAU,eAAS,KAAK;AAC9D,QAAM,CAAC,eAAe,gBAAgB,IAAU,eAAS,CAAC;AAC1D,QAAM,CAAC,aAAa,cAAc,IAAU,eAAmB,CAAC,CAAC;AAEjE,QAAM,WAAiB,kBAAY,CAACA,SAAqB;AACxD,QAAI,CAACA,KAAK;AACV,qBAAiBA,KAAI,cAAc,CAAC;AACpC,qBAAiBA,KAAI,cAAc,CAAC;AACpC,qBAAiBA,KAAI,mBAAmB,CAAC;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,WAAiB;AAAA,IACtB,CAACA,SAAqB;AACrB,UAAI,CAACA,KAAK;AACV,qBAAeA,KAAI,eAAe,CAAC;AACnC,eAASA,IAAG;AAAA,IACb;AAAA,IACA,CAAC,QAAQ;AAAA,EACV;AAEA,QAAM,aAAmB,kBAAY,MAAM;AAC1C,SAAK,WAAW;AAAA,EACjB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,aAAmB,kBAAY,MAAM;AAC1C,SAAK,WAAW;AAAA,EACjB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,WAAiB;AAAA,IACtB,CAAC,UAAkB;AAClB,WAAK,SAAS,KAAK;AAAA,IACpB;AAAA,IACA,CAAC,GAAG;AAAA,EACL;AAEA,QAAM,gBAAsB;AAAA,IAC3B,CAAC,UAA+C;AAC/C,YAAM,UAAU,gBAAgB,eAAe,cAAc;AAC7D,YAAM,UAAU,gBAAgB,eAAe,eAAe;AAC9D,UAAI,MAAM,QAAQ,SAAS;AAC1B,cAAM,eAAe;AACrB,mBAAW;AAAA,MACZ,WAAW,MAAM,QAAQ,SAAS;AACjC,cAAM,eAAe;AACrB,mBAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,CAAC,aAAa,YAAY,UAAU;AAAA,EACrC;AAEA,EAAM,gBAAU,MAAM;AACrB,QAAI,CAAC,OAAO,CAAC,OAAQ;AACrB,WAAO,GAAG;AAAA,EACX,GAAG,CAAC,KAAK,MAAM,CAAC;AAEhB,EAAM,gBAAU,MAAM;AACrB,QAAI,CAAC,IAAK;AACV,aAAS,GAAG;AACZ,QAAI,GAAG,UAAU,QAAQ;AACzB,QAAI,GAAG,UAAU,QAAQ;AAEzB,WAAO,MAAM;AACZ,WAAK,IAAI,UAAU,QAAQ;AAC3B,WAAK,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACD,GAAG,CAAC,KAAK,UAAU,QAAQ,CAAC;AAE5B,SACC;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAGA;AAAA,QAAC;AAAA;AAAA,UACA,kBAAkB;AAAA,UAClB,WAAW,GAAG,iBAAiB,EAAE,UAAU,CAAC,GAAG,SAAS;AAAA,UACxD,MAAK;AAAA,UACL,wBAAqB;AAAA,UACrB,aAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACF;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC9E,QAAM,EAAE,aAAa,YAAY,IAAI,YAAY;AAEjD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,aAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACA,WAAW;AAAA,YACV;AAAA,YACA,gBAAgB,eAAe,KAAK;AAAA,YACpC;AAAA,UACD;AAAA,UACC,GAAG;AAAA;AAAA,MACL;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC3E;AAAA;AAAA,IAEC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,wBAAqB;AAAA,QACrB,aAAU;AAAA,QACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA;AAAA,IACL;AAAA;AAEF;AAEA,IAAM,gBAAgB;AAAA,EACrB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACP;AAAA,IACD;AAAA,IACA,kBAAkB;AAAA,MACjB,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,SAAS;AAAA,MAChD,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,UAAU;AAAA,MACjD,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,SAAS;AAAA,MAChD,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,UAAU;AAAA,MACjD,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,SAAS;AAAA,MAChD,EAAE,MAAM,MAAM,MAAM,QAAQ,WAAW,UAAU;AAAA,IAClD;AAAA,IACA,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD;AACD;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA,GAAG;AACJ,GAAmC;AAClC,QAAM,EAAE,MAAM,YAAY,cAAc,IAAI,YAAY;AAExD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,MAAM,MAAM,OAAO,CAAC,GAAG,SAAS;AAAA,MAC9D,UAAU,CAAC;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAgB,WAAU,eAAc;AAAA,QACzC,oBAAC,UAAK,WAAU,WAAU,4BAAc;AAAA;AAAA;AAAA,EACzC;AAEF;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAmC;AAC9E,QAAM,EAAE,MAAM,YAAY,cAAc,IAAI,YAAY;AAExD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,MAAM,MAAM,OAAO,CAAC,GAAG,SAAS;AAAA,MAC9D,UAAU,CAAC;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,4BAAC,oBAAiB,WAAU,eAAc;AAAA,QAC1C,oBAAC,UAAK,WAAU,WAAU,wBAAU;AAAA;AAAA;AAAA,EACrC;AAEF;AAOA,IAAM,iBAAiB;AACvB,IAAM,cAAc;AAcpB,SAAS,mBAAmB,OAAe,UAAkB;AAC5D,MAAI,QAAQ,gBAAgB;AAC3B,UAAMC,QAAuB,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,WAAW;AAAA,MACzE;AAAA,MACA,OAAO;AAAA,IACR,EAAE;AACF,WAAO,EAAE,MAAAA,OAAM,OAAO,GAAG,SAAS,MAAM;AAAA,EACzC;AAEA,QAAM,OAAO,KAAK,MAAM,cAAc,CAAC;AACvC,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,MAAM,QAAQ,WAAW,CAAC;AACxE,QAAM,MAAM,QAAQ,cAAc;AAClC,QAAM,eAAe,QAAQ;AAC7B,QAAM,gBAAgB,MAAM,QAAQ;AAEpC,QAAM,OAAuB,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,WAAW;AAAA,IACzE;AAAA,IACA,OACE,gBAAgB,UAAU,SAAW,iBAAiB,UAAU;AAAA,EACnE,EAAE;AAEF,SAAO,EAAE,MAAM,OAAO,SAAS,YAAY;AAC5C;AAGA,IAAM,kBAGF;AAAA,EACH,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE;AAAA,EACvC,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,MAAM,EAAE;AAAA,EACxC,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,MAAM,EAAE;AACzC;AAGA,IAAM,mBAAkD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACL;AAgBA,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACJ,GAA2B;AAG1B,QAAM,MAAY,iBAAW,eAAe;AAC5C,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,OAAO,YAAY,KAAK,QAAQ;AACtC,QAAM,QAAQ,aAAa,KAAK,YAAY,UAAU;AACtD,QAAM,WAAW,gBAAgB,KAAK,iBAAiB;AACvD,QAAM,eAAe,YAAY,KAAK;AAEtC,MAAI,SAAS,EAAG,QAAO;AAEvB,QAAM,EAAE,KAAK,KAAK,MAAM,KAAK,IAAI,gBAAgB,IAAI;AACrD,QAAM,EAAE,MAAM,OAAO,QAAQ,IAAI,mBAAmB,OAAO,QAAQ;AACnE,QAAM,OAAO,MAAM;AAGnB,QAAM,gBAAgB,UAAU,OAAO;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA,iBAAiB,IAAI;AAAA,QACrB;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO,EAAE,SAAS,GAAG,IAAI,MAAM,IAAI,KAAK;AAAA,MACxC,MAAK;AAAA,MACL,cAAW;AAAA,MACV,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,OAAO,cAAc,GAC9D;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO,EAAE,KAAK,WAAW,cAAc,CAAC,QAAQ,IAAI,MAAM;AAAA,UAEzD,eAAK,IAAI,CAAC,EAAE,OAAO,MAAM,MAAM;AAC/B,kBAAM,WAAW,UAAU;AAC3B,mBACC;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,cAAY,eAAe,QAAQ,CAAC;AAAA,gBACpC,SAAS,MAAM,eAAe,KAAK;AAAA,gBACnC,WAAW;AAAA,kBACV;AAAA,kBACA,eAAe,mBAAmB;AAAA,gBACnC;AAAA,gBACA,OAAO;AAAA,kBACN,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,SAAS,QAAQ,MAAM,WAAW,IAAI;AAAA,kBACtC,WAAW,QAAQ,eAAe;AAAA,gBACnC;AAAA;AAAA,cAfK;AAAA,YAgBN;AAAA,UAEF,CAAC;AAAA;AAAA,MACF,GACD;AAAA;AAAA,EACD;AAEF;","names":["api","dots"]}
|
package/dist/chunk-GJOFIJS3.js
DELETED
|
@@ -1,246 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Combobox,
|
|
3
|
-
ComboboxContent,
|
|
4
|
-
ComboboxEmpty,
|
|
5
|
-
ComboboxInput,
|
|
6
|
-
ComboboxItem,
|
|
7
|
-
ComboboxList,
|
|
8
|
-
ComboboxTrigger,
|
|
9
|
-
ComboboxValue
|
|
10
|
-
} from "./chunk-VGR4ZWJ3.js";
|
|
11
|
-
import {
|
|
12
|
-
Button
|
|
13
|
-
} from "./chunk-B4H6RNDH.js";
|
|
14
|
-
import {
|
|
15
|
-
cn
|
|
16
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
17
|
-
|
|
18
|
-
// src/calendar.tsx
|
|
19
|
-
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
20
|
-
import * as React from "react";
|
|
21
|
-
import {
|
|
22
|
-
DayPicker,
|
|
23
|
-
getDefaultClassNames
|
|
24
|
-
} from "react-day-picker";
|
|
25
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
26
|
-
function Calendar({
|
|
27
|
-
className,
|
|
28
|
-
classNames,
|
|
29
|
-
showOutsideDays = false,
|
|
30
|
-
weekStartsOn = 1,
|
|
31
|
-
locale,
|
|
32
|
-
formatters,
|
|
33
|
-
components,
|
|
34
|
-
...props
|
|
35
|
-
}) {
|
|
36
|
-
const defaultClassNames = getDefaultClassNames();
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
-
DayPicker,
|
|
39
|
-
{
|
|
40
|
-
showOutsideDays,
|
|
41
|
-
weekStartsOn,
|
|
42
|
-
className: cn(
|
|
43
|
-
"group/calendar bg-transparent p-4 [--cell-radius:var(--radius-md)] [--cell-height:36px] [--cell-width:40px]",
|
|
44
|
-
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
45
|
-
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
46
|
-
className
|
|
47
|
-
),
|
|
48
|
-
locale,
|
|
49
|
-
formatters: {
|
|
50
|
-
formatWeekdayName: (date) => date.toLocaleString(locale?.code, { weekday: "narrow" }),
|
|
51
|
-
...formatters
|
|
52
|
-
},
|
|
53
|
-
classNames: {
|
|
54
|
-
root: cn("w-fit", defaultClassNames.root),
|
|
55
|
-
months: cn(
|
|
56
|
-
"relative flex flex-col gap-4 md:flex-row",
|
|
57
|
-
defaultClassNames.months
|
|
58
|
-
),
|
|
59
|
-
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
60
|
-
nav: cn(
|
|
61
|
-
// pointer-events pass through the bar itself so it never blocks
|
|
62
|
-
// the caption dropdowns rendered underneath it.
|
|
63
|
-
"pointer-events-none absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1 *:pointer-events-auto",
|
|
64
|
-
defaultClassNames.nav
|
|
65
|
-
),
|
|
66
|
-
button_previous: cn(
|
|
67
|
-
"flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
|
|
68
|
-
defaultClassNames.button_previous
|
|
69
|
-
),
|
|
70
|
-
button_next: cn(
|
|
71
|
-
"flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
|
|
72
|
-
defaultClassNames.button_next
|
|
73
|
-
),
|
|
74
|
-
month_caption: cn(
|
|
75
|
-
"flex h-(--cell-height) w-full items-center justify-center px-(--cell-width)",
|
|
76
|
-
defaultClassNames.month_caption
|
|
77
|
-
),
|
|
78
|
-
caption_label: cn(
|
|
79
|
-
"text-gdt-sm font-medium text-fg-primary select-none",
|
|
80
|
-
defaultClassNames.caption_label
|
|
81
|
-
),
|
|
82
|
-
dropdowns: cn(
|
|
83
|
-
"flex h-(--cell-height) w-full items-center justify-center gap-1.5",
|
|
84
|
-
defaultClassNames.dropdowns
|
|
85
|
-
),
|
|
86
|
-
table: "w-full border-collapse",
|
|
87
|
-
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
88
|
-
weekday: cn(
|
|
89
|
-
"flex-1 text-gdt-xs font-normal text-fg-secondary select-none",
|
|
90
|
-
defaultClassNames.weekday
|
|
91
|
-
),
|
|
92
|
-
week: cn("mt-1 flex w-full", defaultClassNames.week),
|
|
93
|
-
day: cn(
|
|
94
|
-
"group/day relative aspect-square h-full w-full p-0 text-center select-none",
|
|
95
|
-
defaultClassNames.day
|
|
96
|
-
),
|
|
97
|
-
range_start: cn(
|
|
98
|
-
"rounded-l-full bg-surface-brand-subtle",
|
|
99
|
-
defaultClassNames.range_start
|
|
100
|
-
),
|
|
101
|
-
range_middle: cn(
|
|
102
|
-
"rounded-none bg-surface-brand-subtle",
|
|
103
|
-
defaultClassNames.range_middle
|
|
104
|
-
),
|
|
105
|
-
range_end: cn(
|
|
106
|
-
"rounded-r-full bg-surface-brand-subtle",
|
|
107
|
-
defaultClassNames.range_end
|
|
108
|
-
),
|
|
109
|
-
today: cn(
|
|
110
|
-
"rounded-full h-(--cell-height) w-(--cell-width) flex items-center justify-center bg-surface-brand-subtle p-0",
|
|
111
|
-
defaultClassNames.today
|
|
112
|
-
),
|
|
113
|
-
outside: cn(
|
|
114
|
-
"text-fg-caption-placeholder aria-selected:text-fg-caption-placeholder",
|
|
115
|
-
defaultClassNames.outside
|
|
116
|
-
),
|
|
117
|
-
disabled: cn(
|
|
118
|
-
"text-fg-caption-placeholder opacity-50",
|
|
119
|
-
defaultClassNames.disabled
|
|
120
|
-
),
|
|
121
|
-
hidden: cn("invisible", defaultClassNames.hidden),
|
|
122
|
-
...classNames
|
|
123
|
-
},
|
|
124
|
-
components: {
|
|
125
|
-
Root: ({ className: className2, rootRef, ...props2 }) => {
|
|
126
|
-
return /* @__PURE__ */ jsx(
|
|
127
|
-
"div",
|
|
128
|
-
{
|
|
129
|
-
"data-slot": "calendar",
|
|
130
|
-
ref: rootRef,
|
|
131
|
-
className: cn(className2),
|
|
132
|
-
...props2
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
},
|
|
136
|
-
Chevron: ({ className: className2, orientation, ...props2 }) => {
|
|
137
|
-
if (orientation === "right") {
|
|
138
|
-
return /* @__PURE__ */ jsx(
|
|
139
|
-
ChevronRightIcon,
|
|
140
|
-
{
|
|
141
|
-
className: cn("size-4", className2),
|
|
142
|
-
...props2
|
|
143
|
-
}
|
|
144
|
-
);
|
|
145
|
-
}
|
|
146
|
-
return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
|
|
147
|
-
},
|
|
148
|
-
DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
|
|
149
|
-
Dropdown: CalendarDropdown,
|
|
150
|
-
WeekNumber: ({ children, ...props2 }) => {
|
|
151
|
-
return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex h-(--cell-height) w-(--cell-width) items-center justify-center text-center", children }) });
|
|
152
|
-
},
|
|
153
|
-
...components
|
|
154
|
-
},
|
|
155
|
-
...props
|
|
156
|
-
}
|
|
157
|
-
);
|
|
158
|
-
}
|
|
159
|
-
function CalendarDropdown({
|
|
160
|
-
options = [],
|
|
161
|
-
value,
|
|
162
|
-
onChange,
|
|
163
|
-
disabled,
|
|
164
|
-
"aria-label": ariaLabel
|
|
165
|
-
}) {
|
|
166
|
-
const selected = options.find((option) => option.value === Number(value));
|
|
167
|
-
return /* @__PURE__ */ jsxs(
|
|
168
|
-
Combobox,
|
|
169
|
-
{
|
|
170
|
-
size: "sm",
|
|
171
|
-
items: options.map((option) => option.label),
|
|
172
|
-
value: selected?.label ?? null,
|
|
173
|
-
onValueChange: (label) => {
|
|
174
|
-
const next = options.find((option) => option.label === label);
|
|
175
|
-
if (!next) return;
|
|
176
|
-
onChange?.({
|
|
177
|
-
target: { value: String(next.value) }
|
|
178
|
-
});
|
|
179
|
-
},
|
|
180
|
-
disabled,
|
|
181
|
-
children: [
|
|
182
|
-
/* @__PURE__ */ jsx(ComboboxTrigger, { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ComboboxValue, {}) }),
|
|
183
|
-
/* @__PURE__ */ jsxs(ComboboxContent, { className: "w-auto min-w-32", children: [
|
|
184
|
-
/* @__PURE__ */ jsx(ComboboxInput, { placeholder: "Search", showTrigger: false }),
|
|
185
|
-
/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No results" }),
|
|
186
|
-
/* @__PURE__ */ jsx(ComboboxList, { className: "max-h-56", children: (label) => /* @__PURE__ */ jsx(
|
|
187
|
-
ComboboxItem,
|
|
188
|
-
{
|
|
189
|
-
value: label,
|
|
190
|
-
disabled: options.find((option) => option.label === label)?.disabled,
|
|
191
|
-
children: label
|
|
192
|
-
},
|
|
193
|
-
label
|
|
194
|
-
) })
|
|
195
|
-
] })
|
|
196
|
-
]
|
|
197
|
-
}
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
function CalendarDayButton({
|
|
201
|
-
className,
|
|
202
|
-
day,
|
|
203
|
-
modifiers,
|
|
204
|
-
locale,
|
|
205
|
-
...props
|
|
206
|
-
}) {
|
|
207
|
-
const defaultClassNames = getDefaultClassNames();
|
|
208
|
-
const ref = React.useRef(null);
|
|
209
|
-
React.useEffect(() => {
|
|
210
|
-
if (modifiers.focused) ref.current?.focus();
|
|
211
|
-
}, [modifiers.focused]);
|
|
212
|
-
const isEndpoint = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle || modifiers.range_start || modifiers.range_end;
|
|
213
|
-
return /* @__PURE__ */ jsx(
|
|
214
|
-
Button,
|
|
215
|
-
{
|
|
216
|
-
ref,
|
|
217
|
-
variant: "ghost",
|
|
218
|
-
size: "icon",
|
|
219
|
-
"data-day": day.date.toLocaleDateString(locale?.code),
|
|
220
|
-
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
221
|
-
"data-range-start": modifiers.range_start,
|
|
222
|
-
"data-range-end": modifiers.range_end,
|
|
223
|
-
"data-range-middle": modifiers.range_middle,
|
|
224
|
-
className: cn(
|
|
225
|
-
"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-width) h-(--cell-height) items-center justify-center rounded-full border-0 text-gdt-sm font-normal leading-none",
|
|
226
|
-
// Selected single + range endpoints: filled brand circle.
|
|
227
|
-
"data-[range-end=true]:bg-action-primary data-[range-end=true]:text-fg-on-brand data-[range-end=true]:hover:bg-action-primary-hover data-[range-end=true]:hover:text-fg-on-brand",
|
|
228
|
-
"data-[range-start=true]:bg-action-primary data-[range-start=true]:text-fg-on-brand data-[range-start=true]:hover:bg-action-primary-hover data-[range-start=true]:hover:text-fg-on-brand",
|
|
229
|
-
"data-[selected-single=true]:bg-action-primary data-[selected-single=true]:text-fg-on-brand data-[selected-single=true]:hover:bg-action-primary-hover data-[selected-single=true]:hover:text-fg-on-brand",
|
|
230
|
-
// In-range days: brand wash carried by the cell, brand text on the button.
|
|
231
|
-
"data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-fg-brand data-[range-middle=true]:hover:bg-transparent",
|
|
232
|
-
isEndpoint && "font-medium",
|
|
233
|
-
"group-data-[focused=true]/day:border-line-focus group-data-[focused=true]/day:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
|
|
234
|
-
defaultClassNames.day,
|
|
235
|
-
className
|
|
236
|
-
),
|
|
237
|
-
...props
|
|
238
|
-
}
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
export {
|
|
243
|
-
Calendar,
|
|
244
|
-
CalendarDayButton
|
|
245
|
-
};
|
|
246
|
-
//# sourceMappingURL=chunk-GJOFIJS3.js.map
|