@mlw-packages/react-components 1.9.10 → 1.9.12
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/dist/index.css +158 -0
- package/dist/index.d.mts +34 -6
- package/dist/index.d.ts +34 -6
- package/dist/index.js +1181 -444
- package/dist/index.mjs +1181 -446
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -15,7 +15,7 @@ import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
|
|
|
15
15
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
16
16
|
import 'react-router-dom';
|
|
17
17
|
import { Command } from 'cmdk';
|
|
18
|
-
import { AnimatePresence, motion, useMotionValue,
|
|
18
|
+
import { AnimatePresence, motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
|
|
19
19
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
20
20
|
import { XIcon as XIcon$1, CalendarDotIcon, DotsThreeIcon as DotsThreeIcon$1, Check, CheckIcon as CheckIcon$1 } from '@phosphor-icons/react/dist/ssr';
|
|
21
21
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
@@ -42,6 +42,7 @@ import { useSensors, useSensor, MouseSensor, TouchSensor, PointerSensor, DndCont
|
|
|
42
42
|
import { CSS } from '@dnd-kit/utilities';
|
|
43
43
|
import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
|
|
44
44
|
import { ResponsiveContainer, ComposedChart, XAxis, YAxis, Bar, Line, Area, CartesianGrid, Tooltip, Legend, LabelList, Rectangle } from 'recharts';
|
|
45
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
45
46
|
|
|
46
47
|
var __create = Object.create;
|
|
47
48
|
var __defProp = Object.defineProperty;
|
|
@@ -3713,7 +3714,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3713
3714
|
showPreview = true,
|
|
3714
3715
|
dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
|
|
3715
3716
|
dropzoneSubtext,
|
|
3716
|
-
animate
|
|
3717
|
+
animate = true,
|
|
3717
3718
|
...props
|
|
3718
3719
|
}, ref) => {
|
|
3719
3720
|
const [isDragging, setIsDragging] = React32.useState(false);
|
|
@@ -3921,7 +3922,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3921
3922
|
motion.p,
|
|
3922
3923
|
{
|
|
3923
3924
|
className: "mb-2 text-base font-semibold text-foreground",
|
|
3924
|
-
initial:
|
|
3925
|
+
initial: animate ? { opacity: 0, y: -10 } : false,
|
|
3925
3926
|
animate: { opacity: 1, y: 0 },
|
|
3926
3927
|
transition: { delay: 0.1 },
|
|
3927
3928
|
children: dropzoneText
|
|
@@ -3931,7 +3932,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3931
3932
|
motion.p,
|
|
3932
3933
|
{
|
|
3933
3934
|
className: "text-sm text-muted-foreground",
|
|
3934
|
-
initial:
|
|
3935
|
+
initial: animate ? { opacity: 0, y: -10 } : false,
|
|
3935
3936
|
animate: { opacity: 1, y: 0 },
|
|
3936
3937
|
transition: { delay: 0.2 },
|
|
3937
3938
|
children: defaultSubtext
|
|
@@ -3975,7 +3976,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3975
3976
|
motion.div,
|
|
3976
3977
|
{
|
|
3977
3978
|
className: "mt-6 w-full",
|
|
3978
|
-
initial:
|
|
3979
|
+
initial: animate ? { opacity: 0, y: 10 } : false,
|
|
3979
3980
|
animate: { opacity: 1, y: 0 },
|
|
3980
3981
|
transition: { delay: 0.3 },
|
|
3981
3982
|
children: /* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -3990,7 +3991,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3990
3991
|
motion.div,
|
|
3991
3992
|
{
|
|
3992
3993
|
layout: true,
|
|
3993
|
-
initial:
|
|
3994
|
+
initial: animate ? { opacity: 0, x: -20 } : false,
|
|
3994
3995
|
animate: { opacity: 1, x: 0 },
|
|
3995
3996
|
exit: {
|
|
3996
3997
|
opacity: 0,
|
|
@@ -3998,7 +3999,7 @@ var FileUploader = React32.forwardRef(
|
|
|
3998
3999
|
transition: { duration: 0.2 }
|
|
3999
4000
|
},
|
|
4000
4001
|
transition: {
|
|
4001
|
-
delay:
|
|
4002
|
+
delay: animate ? index * 0.05 : 0,
|
|
4002
4003
|
layout: { duration: 0.2 }
|
|
4003
4004
|
},
|
|
4004
4005
|
className: cn(
|
|
@@ -5696,7 +5697,7 @@ var sheetVariants = cva(
|
|
|
5696
5697
|
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
5697
5698
|
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
5698
5699
|
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
5699
|
-
right: "inset-y-0 right-0 h-full w-3/4
|
|
5700
|
+
right: "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
|
|
5700
5701
|
}
|
|
5701
5702
|
},
|
|
5702
5703
|
defaultVariants: {
|
|
@@ -16482,11 +16483,11 @@ var NoData = ({
|
|
|
16482
16483
|
),
|
|
16483
16484
|
style: {
|
|
16484
16485
|
"--pl": `${paddingLeft}px`,
|
|
16485
|
-
|
|
16486
|
+
...typeof height === "number" ? { height } : {}
|
|
16486
16487
|
},
|
|
16487
16488
|
role: "img",
|
|
16488
16489
|
"aria-label": message,
|
|
16489
|
-
children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-
|
|
16490
|
+
children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[900px] relative", children: [
|
|
16490
16491
|
/* @__PURE__ */ jsxs(
|
|
16491
16492
|
"svg",
|
|
16492
16493
|
{
|
|
@@ -17221,11 +17222,30 @@ function useOpenTooltipForPeriod({
|
|
|
17221
17222
|
);
|
|
17222
17223
|
}
|
|
17223
17224
|
var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
|
|
17225
|
+
function ChartWrapper({
|
|
17226
|
+
className,
|
|
17227
|
+
children,
|
|
17228
|
+
wrapperRef
|
|
17229
|
+
}) {
|
|
17230
|
+
const cls = className ?? "";
|
|
17231
|
+
const hasExplicitSizing = /\bh-/.test(cls) || /\bflex-1\b/.test(cls);
|
|
17232
|
+
return /* @__PURE__ */ jsx(
|
|
17233
|
+
"div",
|
|
17234
|
+
{
|
|
17235
|
+
ref: wrapperRef,
|
|
17236
|
+
className: cn(
|
|
17237
|
+
"w-full overflow-hidden min-w-0 rounded-lg border-border",
|
|
17238
|
+
!hasExplicitSizing && "h-[550px]",
|
|
17239
|
+
className
|
|
17240
|
+
),
|
|
17241
|
+
children
|
|
17242
|
+
}
|
|
17243
|
+
);
|
|
17244
|
+
}
|
|
17224
17245
|
var Chart = ({
|
|
17225
17246
|
data,
|
|
17226
17247
|
series,
|
|
17227
17248
|
className,
|
|
17228
|
-
height = 350,
|
|
17229
17249
|
width = "100%",
|
|
17230
17250
|
colors: colors2 = DEFAULT_COLORS2,
|
|
17231
17251
|
gridColor,
|
|
@@ -17257,19 +17277,7 @@ var Chart = ({
|
|
|
17257
17277
|
timeSeries,
|
|
17258
17278
|
timeSeriesLegend,
|
|
17259
17279
|
customLegend
|
|
17260
|
-
// horizontal removido
|
|
17261
|
-
// orderBy removido
|
|
17262
17280
|
}) => {
|
|
17263
|
-
const usesFullHeight = typeof height === "string" && (height === "100%" || height === "100vh") || typeof className === "string" && /\bh-full\b/.test(className || "");
|
|
17264
|
-
const responsiveHeight = usesFullHeight ? "100%" : height;
|
|
17265
|
-
const wrapperClass = cn(
|
|
17266
|
-
"w-full min-w-0 rounded-lg border-border",
|
|
17267
|
-
className,
|
|
17268
|
-
"overflow-hidden"
|
|
17269
|
-
);
|
|
17270
|
-
const wrapperStyle = usesFullHeight ? void 0 : {
|
|
17271
|
-
height: typeof responsiveHeight === "number" ? `${responsiveHeight}px` : responsiveHeight
|
|
17272
|
-
};
|
|
17273
17281
|
const { xAxisConfig, mapperConfig } = useMemo(() => {
|
|
17274
17282
|
return fnSmartConfig({ xAxis, data, labelMap });
|
|
17275
17283
|
}, [data, xAxis, labelMap]);
|
|
@@ -17413,393 +17421,419 @@ var Chart = ({
|
|
|
17413
17421
|
maxTooltips,
|
|
17414
17422
|
effectiveChartWidth
|
|
17415
17423
|
});
|
|
17416
|
-
const legendSpace = showLegend ? 44 : 0;
|
|
17417
|
-
const xAxisLabelSpace = xAxisLabel ? 18 : 0;
|
|
17418
|
-
const brushSpace = timeSeriesConfig?.height ? 200 : 0;
|
|
17419
|
-
const bottomMargin = 10 + legendSpace + xAxisLabelSpace + brushSpace;
|
|
17420
17424
|
if (!data && !isLoading) return null;
|
|
17421
17425
|
if (isLoading) {
|
|
17422
|
-
return /* @__PURE__ */ jsx(
|
|
17426
|
+
return /* @__PURE__ */ jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsx(
|
|
17423
17427
|
NoData_default,
|
|
17424
17428
|
{
|
|
17425
17429
|
title,
|
|
17426
17430
|
isLoading: true,
|
|
17427
17431
|
loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
|
|
17428
17432
|
paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
|
|
17429
|
-
height
|
|
17433
|
+
height: "100%"
|
|
17430
17434
|
}
|
|
17431
|
-
);
|
|
17435
|
+
) });
|
|
17432
17436
|
}
|
|
17433
17437
|
if (Array.isArray(data) && data.length === 0) {
|
|
17434
|
-
return /* @__PURE__ */ jsx(
|
|
17438
|
+
return /* @__PURE__ */ jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsx(
|
|
17435
17439
|
NoData_default,
|
|
17436
17440
|
{
|
|
17437
17441
|
title,
|
|
17438
17442
|
paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
|
|
17439
|
-
height
|
|
17443
|
+
height: "100%"
|
|
17440
17444
|
}
|
|
17441
|
-
);
|
|
17445
|
+
) });
|
|
17442
17446
|
}
|
|
17443
|
-
return /* @__PURE__ */ jsxs(
|
|
17444
|
-
/* @__PURE__ */ jsxs(
|
|
17445
|
-
|
|
17446
|
-
|
|
17447
|
-
|
|
17448
|
-
|
|
17449
|
-
|
|
17450
|
-
|
|
17451
|
-
|
|
17452
|
-
|
|
17453
|
-
|
|
17454
|
-
|
|
17455
|
-
|
|
17456
|
-
|
|
17457
|
-
|
|
17458
|
-
|
|
17459
|
-
|
|
17460
|
-
|
|
17461
|
-
|
|
17462
|
-
|
|
17463
|
-
|
|
17464
|
-
|
|
17447
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17448
|
+
/* @__PURE__ */ jsx(ChartWrapper, { className, wrapperRef, children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex flex-col rounded-lg bg-card py-1 overflow-hidden", children: [
|
|
17449
|
+
/* @__PURE__ */ jsx(
|
|
17450
|
+
ChartHeader,
|
|
17451
|
+
{
|
|
17452
|
+
title,
|
|
17453
|
+
titlePosition,
|
|
17454
|
+
HORIZONTAL_PADDING_CLASS,
|
|
17455
|
+
customLegend,
|
|
17456
|
+
data,
|
|
17457
|
+
allKeys,
|
|
17458
|
+
processedData,
|
|
17459
|
+
finalColors,
|
|
17460
|
+
mapperConfig,
|
|
17461
|
+
finalValueFormatter,
|
|
17462
|
+
formatBR
|
|
17463
|
+
}
|
|
17464
|
+
),
|
|
17465
|
+
allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsx(
|
|
17466
|
+
ChartControls,
|
|
17467
|
+
{
|
|
17468
|
+
allKeys,
|
|
17469
|
+
mapperConfig,
|
|
17470
|
+
finalColors,
|
|
17471
|
+
highlightedSeries,
|
|
17472
|
+
toggleHighlight,
|
|
17473
|
+
showOnlyHighlighted,
|
|
17474
|
+
setShowOnlyHighlighted,
|
|
17475
|
+
highlightedSeriesSize: highlightedSeries.size,
|
|
17476
|
+
clearHighlights,
|
|
17477
|
+
enableHighlights,
|
|
17478
|
+
enableShowOnly,
|
|
17479
|
+
enablePeriodsDropdown,
|
|
17480
|
+
enableDraggableTooltips,
|
|
17481
|
+
processedData,
|
|
17482
|
+
onOpenPeriod: openTooltipForPeriod,
|
|
17483
|
+
rightOffset: finalChartRightMargin,
|
|
17484
|
+
activePeriods,
|
|
17485
|
+
containerClass: cn("flex items-center gap-2", teste),
|
|
17486
|
+
containerWidth: chartInnerWidth
|
|
17487
|
+
}
|
|
17488
|
+
),
|
|
17489
|
+
!(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
|
|
17490
|
+
"div",
|
|
17491
|
+
{
|
|
17492
|
+
className: cn(
|
|
17493
|
+
"w-full flex justify-end mb-2",
|
|
17494
|
+
HORIZONTAL_PADDING_CLASS
|
|
17465
17495
|
),
|
|
17466
|
-
|
|
17467
|
-
|
|
17496
|
+
style: {
|
|
17497
|
+
paddingRight: `${finalChartRightMargin}px`,
|
|
17498
|
+
maxWidth: `${chartInnerWidth}px`
|
|
17499
|
+
},
|
|
17500
|
+
children: /* @__PURE__ */ jsx(
|
|
17501
|
+
PeriodsDropdown_default,
|
|
17468
17502
|
{
|
|
17469
|
-
allKeys,
|
|
17470
|
-
mapperConfig,
|
|
17471
|
-
finalColors,
|
|
17472
|
-
highlightedSeries,
|
|
17473
|
-
toggleHighlight,
|
|
17474
|
-
showOnlyHighlighted,
|
|
17475
|
-
setShowOnlyHighlighted,
|
|
17476
|
-
highlightedSeriesSize: highlightedSeries.size,
|
|
17477
|
-
clearHighlights,
|
|
17478
|
-
enableHighlights,
|
|
17479
|
-
enableShowOnly,
|
|
17480
|
-
enablePeriodsDropdown,
|
|
17481
|
-
enableDraggableTooltips,
|
|
17482
17503
|
processedData,
|
|
17483
17504
|
onOpenPeriod: openTooltipForPeriod,
|
|
17484
|
-
rightOffset: finalChartRightMargin
|
|
17485
|
-
activePeriods,
|
|
17486
|
-
containerClass: cn("flex items-center gap-2", teste),
|
|
17487
|
-
containerWidth: chartInnerWidth
|
|
17505
|
+
rightOffset: finalChartRightMargin
|
|
17488
17506
|
}
|
|
17489
|
-
)
|
|
17490
|
-
|
|
17491
|
-
|
|
17492
|
-
|
|
17493
|
-
|
|
17494
|
-
|
|
17495
|
-
|
|
17496
|
-
|
|
17497
|
-
|
|
17498
|
-
|
|
17499
|
-
|
|
17500
|
-
|
|
17501
|
-
|
|
17502
|
-
|
|
17507
|
+
)
|
|
17508
|
+
}
|
|
17509
|
+
),
|
|
17510
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
|
|
17511
|
+
ComposedChart,
|
|
17512
|
+
{
|
|
17513
|
+
data: processedData,
|
|
17514
|
+
margin: {
|
|
17515
|
+
top: 10,
|
|
17516
|
+
right: finalChartRightMargin,
|
|
17517
|
+
left: finalChartLeftMargin,
|
|
17518
|
+
bottom: 10
|
|
17519
|
+
},
|
|
17520
|
+
onClick: handleChartClick,
|
|
17521
|
+
children: [
|
|
17522
|
+
/* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
|
|
17523
|
+
const key = s.key;
|
|
17524
|
+
const color = finalColors[key];
|
|
17525
|
+
return /* @__PURE__ */ jsxs(
|
|
17526
|
+
"linearGradient",
|
|
17503
17527
|
{
|
|
17504
|
-
|
|
17505
|
-
|
|
17506
|
-
|
|
17507
|
-
|
|
17508
|
-
|
|
17509
|
-
|
|
17510
|
-
|
|
17511
|
-
|
|
17512
|
-
|
|
17513
|
-
|
|
17514
|
-
|
|
17515
|
-
|
|
17516
|
-
|
|
17517
|
-
|
|
17518
|
-
|
|
17519
|
-
|
|
17520
|
-
|
|
17521
|
-
|
|
17522
|
-
|
|
17523
|
-
|
|
17524
|
-
const key = s.key;
|
|
17525
|
-
const color = finalColors[key];
|
|
17526
|
-
return /* @__PURE__ */ jsxs(
|
|
17527
|
-
"linearGradient",
|
|
17528
|
-
{
|
|
17529
|
-
id: `gradient-${key}`,
|
|
17530
|
-
x1: "0",
|
|
17531
|
-
y1: "0",
|
|
17532
|
-
x2: "0",
|
|
17533
|
-
y2: "0.8",
|
|
17534
|
-
children: [
|
|
17535
|
-
/* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
|
|
17536
|
-
/* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
|
|
17537
|
-
]
|
|
17538
|
-
},
|
|
17539
|
-
`gradient-${key}`
|
|
17540
|
-
);
|
|
17541
|
-
}) }),
|
|
17542
|
-
showGrid && /* @__PURE__ */ jsx(
|
|
17543
|
-
CartesianGrid,
|
|
17544
|
-
{
|
|
17545
|
-
strokeDasharray: "3 3",
|
|
17546
|
-
stroke: gridColor || "hsl(var(--muted-foreground))",
|
|
17547
|
-
opacity: 0.5
|
|
17548
|
-
}
|
|
17549
|
-
),
|
|
17550
|
-
/* @__PURE__ */ jsx(
|
|
17551
|
-
XAxis,
|
|
17552
|
-
{
|
|
17553
|
-
dataKey: xAxisConfig.dataKey,
|
|
17554
|
-
stroke: "hsl(var(--muted-foreground))",
|
|
17555
|
-
fontSize: 12,
|
|
17556
|
-
tickLine: false,
|
|
17557
|
-
axisLine: false,
|
|
17558
|
-
tickFormatter: (value) => {
|
|
17559
|
-
if (categoryFormatter)
|
|
17560
|
-
return categoryFormatter(value);
|
|
17561
|
-
if (xAxisConfig.valueFormatter)
|
|
17562
|
-
return xAxisConfig.valueFormatter(value);
|
|
17563
|
-
return String(value ?? "");
|
|
17564
|
-
},
|
|
17565
|
-
label: xAxisLabel ? {
|
|
17566
|
-
value: xAxisLabel,
|
|
17567
|
-
position: "insideBottomRight",
|
|
17568
|
-
offset: -5,
|
|
17569
|
-
style: {
|
|
17570
|
-
fontSize: 12,
|
|
17571
|
-
fill: "hsl(var(--muted-foreground))",
|
|
17572
|
-
fontWeight: 500
|
|
17528
|
+
id: `gradient-${key}`,
|
|
17529
|
+
x1: "0",
|
|
17530
|
+
y1: "0",
|
|
17531
|
+
x2: "0",
|
|
17532
|
+
y2: "0.8",
|
|
17533
|
+
children: [
|
|
17534
|
+
/* @__PURE__ */ jsx(
|
|
17535
|
+
"stop",
|
|
17536
|
+
{
|
|
17537
|
+
offset: "0%",
|
|
17538
|
+
stopColor: color,
|
|
17539
|
+
stopOpacity: 0.8
|
|
17540
|
+
}
|
|
17541
|
+
),
|
|
17542
|
+
/* @__PURE__ */ jsx(
|
|
17543
|
+
"stop",
|
|
17544
|
+
{
|
|
17545
|
+
offset: "90%",
|
|
17546
|
+
stopColor: color,
|
|
17547
|
+
stopOpacity: 0.1
|
|
17573
17548
|
}
|
|
17574
|
-
|
|
17549
|
+
)
|
|
17550
|
+
]
|
|
17551
|
+
},
|
|
17552
|
+
`gradient-${key}`
|
|
17553
|
+
);
|
|
17554
|
+
}) }),
|
|
17555
|
+
showGrid && /* @__PURE__ */ jsx(
|
|
17556
|
+
CartesianGrid,
|
|
17557
|
+
{
|
|
17558
|
+
strokeDasharray: "3 3",
|
|
17559
|
+
stroke: gridColor || "hsl(var(--muted-foreground))",
|
|
17560
|
+
opacity: 0.5
|
|
17561
|
+
}
|
|
17562
|
+
),
|
|
17563
|
+
/* @__PURE__ */ jsx(
|
|
17564
|
+
XAxis,
|
|
17565
|
+
{
|
|
17566
|
+
dataKey: xAxisConfig.dataKey,
|
|
17567
|
+
stroke: "hsl(var(--muted-foreground))",
|
|
17568
|
+
fontSize: 12,
|
|
17569
|
+
tickLine: false,
|
|
17570
|
+
axisLine: false,
|
|
17571
|
+
tickFormatter: (value) => {
|
|
17572
|
+
if (categoryFormatter)
|
|
17573
|
+
return categoryFormatter(value);
|
|
17574
|
+
if (xAxisConfig.valueFormatter)
|
|
17575
|
+
return xAxisConfig.valueFormatter(
|
|
17576
|
+
value
|
|
17577
|
+
);
|
|
17578
|
+
return String(value ?? "");
|
|
17579
|
+
},
|
|
17580
|
+
label: xAxisLabel ? {
|
|
17581
|
+
value: xAxisLabel,
|
|
17582
|
+
position: "insideBottomRight",
|
|
17583
|
+
offset: -5,
|
|
17584
|
+
style: {
|
|
17585
|
+
fontSize: 12,
|
|
17586
|
+
fill: "hsl(var(--muted-foreground))",
|
|
17587
|
+
fontWeight: 500
|
|
17575
17588
|
}
|
|
17576
|
-
|
|
17577
|
-
|
|
17578
|
-
|
|
17579
|
-
|
|
17580
|
-
|
|
17581
|
-
|
|
17582
|
-
|
|
17589
|
+
} : void 0
|
|
17590
|
+
}
|
|
17591
|
+
),
|
|
17592
|
+
/* @__PURE__ */ jsx(
|
|
17593
|
+
YAxis,
|
|
17594
|
+
{
|
|
17595
|
+
yAxisId: "left",
|
|
17596
|
+
width: yAxisTickWidth,
|
|
17597
|
+
stroke: "hsl(var(--muted-foreground))",
|
|
17598
|
+
fontSize: 12,
|
|
17599
|
+
tickLine: false,
|
|
17600
|
+
axisLine: false,
|
|
17601
|
+
tickFormatter: yTickFormatter,
|
|
17602
|
+
domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
|
|
17603
|
+
tickCount: 6,
|
|
17604
|
+
label: yAxisLabel ? {
|
|
17605
|
+
value: yAxisLabel,
|
|
17606
|
+
angle: -90,
|
|
17607
|
+
position: "left",
|
|
17608
|
+
dx: leftYAxisLabelDx,
|
|
17609
|
+
style: {
|
|
17583
17610
|
fontSize: 12,
|
|
17584
|
-
|
|
17585
|
-
|
|
17586
|
-
|
|
17587
|
-
domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
|
|
17588
|
-
tickCount: 6,
|
|
17589
|
-
label: yAxisLabel ? {
|
|
17590
|
-
value: yAxisLabel,
|
|
17591
|
-
angle: -90,
|
|
17592
|
-
position: "left",
|
|
17593
|
-
dx: leftYAxisLabelDx,
|
|
17594
|
-
style: {
|
|
17595
|
-
fontSize: 12,
|
|
17596
|
-
fill: "hsl(var(--muted-foreground))",
|
|
17597
|
-
fontWeight: 500,
|
|
17598
|
-
textAnchor: "middle"
|
|
17599
|
-
}
|
|
17600
|
-
} : void 0
|
|
17611
|
+
fill: "hsl(var(--muted-foreground))",
|
|
17612
|
+
fontWeight: 500,
|
|
17613
|
+
textAnchor: "middle"
|
|
17601
17614
|
}
|
|
17602
|
-
|
|
17603
|
-
|
|
17604
|
-
|
|
17605
|
-
|
|
17606
|
-
|
|
17607
|
-
|
|
17608
|
-
|
|
17609
|
-
|
|
17610
|
-
|
|
17611
|
-
|
|
17612
|
-
|
|
17613
|
-
|
|
17614
|
-
|
|
17615
|
-
|
|
17615
|
+
} : void 0
|
|
17616
|
+
}
|
|
17617
|
+
),
|
|
17618
|
+
rightKeys.length > 0 && (() => {
|
|
17619
|
+
const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
|
|
17620
|
+
biaxialConfigNormalized,
|
|
17621
|
+
yTickFormatter,
|
|
17622
|
+
finalColors
|
|
17623
|
+
);
|
|
17624
|
+
return /* @__PURE__ */ jsx(
|
|
17625
|
+
YAxis,
|
|
17626
|
+
{
|
|
17627
|
+
yAxisId: "right",
|
|
17628
|
+
width: finalChartRightMargin,
|
|
17629
|
+
orientation: "right",
|
|
17630
|
+
stroke: "hsl(var(--muted-foreground))",
|
|
17631
|
+
fontSize: 12,
|
|
17632
|
+
tickLine: false,
|
|
17633
|
+
axisLine: false,
|
|
17634
|
+
tick: { fill: rightAxisColor },
|
|
17635
|
+
tickFormatter: rightTickFormatter,
|
|
17636
|
+
domain: [Math.min(minRightDataValue, 0), niceMaxRight],
|
|
17637
|
+
tickCount: 6,
|
|
17638
|
+
label: biaxialConfigNormalized?.label ? {
|
|
17639
|
+
value: biaxialConfigNormalized.label,
|
|
17640
|
+
angle: -90,
|
|
17641
|
+
position: "right",
|
|
17642
|
+
dx: rightYAxisLabelDx,
|
|
17643
|
+
style: {
|
|
17616
17644
|
fontSize: 12,
|
|
17617
|
-
|
|
17618
|
-
|
|
17619
|
-
|
|
17620
|
-
tickFormatter: rightTickFormatter,
|
|
17621
|
-
domain: [Math.min(minRightDataValue, 0), niceMaxRight],
|
|
17622
|
-
tickCount: 6,
|
|
17623
|
-
label: biaxialConfigNormalized?.label ? {
|
|
17624
|
-
value: biaxialConfigNormalized.label,
|
|
17625
|
-
angle: -90,
|
|
17626
|
-
position: "right",
|
|
17627
|
-
dx: rightYAxisLabelDx,
|
|
17628
|
-
style: {
|
|
17629
|
-
fontSize: 12,
|
|
17630
|
-
fill: "hsl(var(--muted-foreground))",
|
|
17631
|
-
fontWeight: 500,
|
|
17632
|
-
textAnchor: "middle"
|
|
17633
|
-
}
|
|
17634
|
-
} : void 0
|
|
17645
|
+
fill: "hsl(var(--muted-foreground))",
|
|
17646
|
+
fontWeight: 500,
|
|
17647
|
+
textAnchor: "middle"
|
|
17635
17648
|
}
|
|
17636
|
-
|
|
17637
|
-
}
|
|
17638
|
-
|
|
17639
|
-
|
|
17649
|
+
} : void 0
|
|
17650
|
+
}
|
|
17651
|
+
);
|
|
17652
|
+
})(),
|
|
17653
|
+
showTooltip && /* @__PURE__ */ jsx(
|
|
17654
|
+
Tooltip,
|
|
17655
|
+
{
|
|
17656
|
+
content: showTooltipTotal ? /* @__PURE__ */ jsx(
|
|
17657
|
+
TooltipWithTotal_default,
|
|
17640
17658
|
{
|
|
17641
|
-
|
|
17642
|
-
|
|
17643
|
-
|
|
17644
|
-
|
|
17645
|
-
valueFormatter: finalValueFormatter,
|
|
17646
|
-
categoryFormatter,
|
|
17647
|
-
periodLabel
|
|
17648
|
-
}
|
|
17649
|
-
) : /* @__PURE__ */ jsx(
|
|
17650
|
-
TooltipSimple_default,
|
|
17651
|
-
{
|
|
17652
|
-
finalColors,
|
|
17653
|
-
valueFormatter: finalValueFormatter,
|
|
17654
|
-
categoryFormatter,
|
|
17655
|
-
periodLabel
|
|
17656
|
-
}
|
|
17657
|
-
),
|
|
17658
|
-
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
17659
|
+
finalColors,
|
|
17660
|
+
valueFormatter: finalValueFormatter,
|
|
17661
|
+
categoryFormatter,
|
|
17662
|
+
periodLabel
|
|
17659
17663
|
}
|
|
17660
|
-
)
|
|
17661
|
-
|
|
17662
|
-
Legend,
|
|
17664
|
+
) : /* @__PURE__ */ jsx(
|
|
17665
|
+
TooltipSimple_default,
|
|
17663
17666
|
{
|
|
17664
|
-
|
|
17665
|
-
|
|
17666
|
-
|
|
17667
|
-
|
|
17668
|
-
mapperConfig,
|
|
17669
|
-
labelMap,
|
|
17670
|
-
legendUppercase
|
|
17671
|
-
) });
|
|
17672
|
-
}
|
|
17667
|
+
finalColors,
|
|
17668
|
+
valueFormatter: finalValueFormatter,
|
|
17669
|
+
categoryFormatter,
|
|
17670
|
+
periodLabel
|
|
17673
17671
|
}
|
|
17674
17672
|
),
|
|
17675
|
-
|
|
17676
|
-
|
|
17677
|
-
|
|
17678
|
-
|
|
17679
|
-
|
|
17680
|
-
|
|
17681
|
-
|
|
17682
|
-
|
|
17683
|
-
|
|
17684
|
-
|
|
17685
|
-
|
|
17686
|
-
|
|
17687
|
-
|
|
17688
|
-
|
|
17673
|
+
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
17674
|
+
}
|
|
17675
|
+
),
|
|
17676
|
+
showLegend && /* @__PURE__ */ jsx(
|
|
17677
|
+
Legend,
|
|
17678
|
+
{
|
|
17679
|
+
iconSize: 12,
|
|
17680
|
+
formatter: (value) => /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
|
|
17681
|
+
value,
|
|
17682
|
+
mapperConfig,
|
|
17683
|
+
labelMap,
|
|
17684
|
+
legendUppercase
|
|
17685
|
+
) })
|
|
17686
|
+
}
|
|
17687
|
+
),
|
|
17688
|
+
seriesOrder.map((s) => {
|
|
17689
|
+
if (showOnlyHighlighted && !highlightedSeries.has(s.key))
|
|
17690
|
+
return null;
|
|
17691
|
+
const { label, color, key } = fnBuildConfigData(
|
|
17692
|
+
s,
|
|
17693
|
+
mapperConfig,
|
|
17694
|
+
labelMap,
|
|
17695
|
+
finalColors,
|
|
17696
|
+
rightKeys,
|
|
17697
|
+
biaxialConfigNormalized
|
|
17698
|
+
);
|
|
17699
|
+
if (s.type === "bar") {
|
|
17700
|
+
return /* @__PURE__ */ jsx(
|
|
17701
|
+
Bar,
|
|
17702
|
+
{
|
|
17703
|
+
dataKey: key,
|
|
17704
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
17705
|
+
name: label,
|
|
17706
|
+
fill: color,
|
|
17707
|
+
radius: [4, 4, 0, 0],
|
|
17708
|
+
onClick: handleBarClick,
|
|
17709
|
+
className: "cursor-pointer",
|
|
17710
|
+
style: { opacity: getSeriesOpacity(key) },
|
|
17711
|
+
activeBar: /* @__PURE__ */ jsx(
|
|
17712
|
+
Rectangle,
|
|
17689
17713
|
{
|
|
17690
|
-
dataKey: key,
|
|
17691
|
-
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
17692
|
-
name: label,
|
|
17693
17714
|
fill: color,
|
|
17694
|
-
radius: [4, 4, 0, 0],
|
|
17695
|
-
onClick: handleBarClick,
|
|
17696
|
-
className: "cursor-pointer",
|
|
17697
|
-
style: { opacity: getSeriesOpacity(key) },
|
|
17698
|
-
activeBar: /* @__PURE__ */ jsx(
|
|
17699
|
-
Rectangle,
|
|
17700
|
-
{
|
|
17701
|
-
fill: color,
|
|
17702
|
-
stroke: color,
|
|
17703
|
-
strokeWidth: 2,
|
|
17704
|
-
opacity: 0.8
|
|
17705
|
-
}
|
|
17706
|
-
),
|
|
17707
|
-
children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
|
|
17708
|
-
LabelList,
|
|
17709
|
-
{
|
|
17710
|
-
dataKey: key,
|
|
17711
|
-
content: (props) => {
|
|
17712
|
-
if (!fnContentLabelList(props)) return null;
|
|
17713
|
-
const inside = renderInsideBarLabel(
|
|
17714
|
-
color,
|
|
17715
|
-
finalValueFormatter
|
|
17716
|
-
);
|
|
17717
|
-
return inside(props);
|
|
17718
|
-
},
|
|
17719
|
-
offset: 0
|
|
17720
|
-
}
|
|
17721
|
-
) : null
|
|
17722
|
-
},
|
|
17723
|
-
`bar-${key}`
|
|
17724
|
-
);
|
|
17725
|
-
}
|
|
17726
|
-
if (s.type === "line") {
|
|
17727
|
-
return /* @__PURE__ */ jsx(
|
|
17728
|
-
Line,
|
|
17729
|
-
{
|
|
17730
|
-
dataKey: key,
|
|
17731
|
-
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
17732
|
-
name: label,
|
|
17733
17715
|
stroke: color,
|
|
17734
17716
|
strokeWidth: 2,
|
|
17735
|
-
|
|
17736
|
-
|
|
17737
|
-
|
|
17738
|
-
|
|
17739
|
-
|
|
17740
|
-
children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
|
|
17741
|
-
LabelList,
|
|
17742
|
-
{
|
|
17743
|
-
dataKey: key,
|
|
17744
|
-
position: "top",
|
|
17745
|
-
content: pillLabelRenderer_default(
|
|
17746
|
-
color,
|
|
17747
|
-
"filled",
|
|
17748
|
-
(props) => formatLinePercentage(props.value)
|
|
17749
|
-
),
|
|
17750
|
-
offset: 14
|
|
17751
|
-
}
|
|
17752
|
-
) : null
|
|
17753
|
-
},
|
|
17754
|
-
`line-${key}`
|
|
17755
|
-
);
|
|
17756
|
-
}
|
|
17757
|
-
if (s.type === "area") {
|
|
17758
|
-
return /* @__PURE__ */ jsx(
|
|
17759
|
-
Area,
|
|
17717
|
+
opacity: 0.8
|
|
17718
|
+
}
|
|
17719
|
+
),
|
|
17720
|
+
children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
|
|
17721
|
+
LabelList,
|
|
17760
17722
|
{
|
|
17761
|
-
type: "monotone",
|
|
17762
17723
|
dataKey: key,
|
|
17763
|
-
|
|
17764
|
-
|
|
17765
|
-
|
|
17766
|
-
|
|
17767
|
-
|
|
17768
|
-
|
|
17769
|
-
|
|
17770
|
-
className: "cursor-pointer pointer-events-auto",
|
|
17771
|
-
style: { opacity: getSeriesOpacity(key) },
|
|
17772
|
-
activeDot: {
|
|
17773
|
-
r: 6,
|
|
17774
|
-
fill: color,
|
|
17775
|
-
stroke: "hsl(var(--background))",
|
|
17776
|
-
strokeWidth: 2
|
|
17724
|
+
content: (props) => {
|
|
17725
|
+
if (!fnContentLabelList(props)) return null;
|
|
17726
|
+
const inside = renderInsideBarLabel(
|
|
17727
|
+
color,
|
|
17728
|
+
finalValueFormatter
|
|
17729
|
+
);
|
|
17730
|
+
return inside(props);
|
|
17777
17731
|
},
|
|
17778
|
-
|
|
17779
|
-
|
|
17780
|
-
|
|
17781
|
-
|
|
17782
|
-
|
|
17783
|
-
|
|
17784
|
-
|
|
17785
|
-
|
|
17786
|
-
|
|
17787
|
-
|
|
17788
|
-
|
|
17789
|
-
|
|
17790
|
-
|
|
17791
|
-
|
|
17792
|
-
|
|
17793
|
-
|
|
17794
|
-
|
|
17795
|
-
|
|
17796
|
-
|
|
17797
|
-
|
|
17798
|
-
|
|
17799
|
-
|
|
17800
|
-
|
|
17801
|
-
|
|
17802
|
-
|
|
17732
|
+
offset: 0
|
|
17733
|
+
}
|
|
17734
|
+
) : null
|
|
17735
|
+
},
|
|
17736
|
+
`bar-${key}`
|
|
17737
|
+
);
|
|
17738
|
+
}
|
|
17739
|
+
if (s.type === "line") {
|
|
17740
|
+
return /* @__PURE__ */ jsx(
|
|
17741
|
+
Line,
|
|
17742
|
+
{
|
|
17743
|
+
dataKey: key,
|
|
17744
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
17745
|
+
name: label,
|
|
17746
|
+
stroke: color,
|
|
17747
|
+
strokeWidth: 2,
|
|
17748
|
+
dot: { r: 3 },
|
|
17749
|
+
activeDot: { r: 6 },
|
|
17750
|
+
onClick: handleSeriesClick,
|
|
17751
|
+
className: "cursor-pointer pointer-events-auto",
|
|
17752
|
+
style: { opacity: getSeriesOpacity(key) },
|
|
17753
|
+
children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
|
|
17754
|
+
LabelList,
|
|
17755
|
+
{
|
|
17756
|
+
dataKey: key,
|
|
17757
|
+
position: "top",
|
|
17758
|
+
content: pillLabelRenderer_default(
|
|
17759
|
+
color,
|
|
17760
|
+
"filled",
|
|
17761
|
+
(props) => formatLinePercentage(props.value)
|
|
17762
|
+
),
|
|
17763
|
+
offset: 14
|
|
17764
|
+
}
|
|
17765
|
+
) : null
|
|
17766
|
+
},
|
|
17767
|
+
`line-${key}`
|
|
17768
|
+
);
|
|
17769
|
+
}
|
|
17770
|
+
if (s.type === "area") {
|
|
17771
|
+
return /* @__PURE__ */ jsx(
|
|
17772
|
+
Area,
|
|
17773
|
+
{
|
|
17774
|
+
type: "monotone",
|
|
17775
|
+
dataKey: key,
|
|
17776
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
17777
|
+
name: label,
|
|
17778
|
+
stroke: color,
|
|
17779
|
+
fill: `url(#gradient-${key})`,
|
|
17780
|
+
fillOpacity: 1,
|
|
17781
|
+
strokeWidth: 2,
|
|
17782
|
+
onClick: handleSeriesClick,
|
|
17783
|
+
className: "cursor-pointer pointer-events-auto",
|
|
17784
|
+
style: { opacity: getSeriesOpacity(key) },
|
|
17785
|
+
activeDot: {
|
|
17786
|
+
r: 6,
|
|
17787
|
+
fill: color,
|
|
17788
|
+
stroke: "hsl(var(--background))",
|
|
17789
|
+
strokeWidth: 2
|
|
17790
|
+
},
|
|
17791
|
+
children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
|
|
17792
|
+
LabelList,
|
|
17793
|
+
{
|
|
17794
|
+
dataKey: key,
|
|
17795
|
+
position: "top",
|
|
17796
|
+
content: pillLabelRenderer_default(
|
|
17797
|
+
color,
|
|
17798
|
+
"soft",
|
|
17799
|
+
finalValueFormatter
|
|
17800
|
+
),
|
|
17801
|
+
offset: 12
|
|
17802
|
+
}
|
|
17803
|
+
) : null
|
|
17804
|
+
},
|
|
17805
|
+
`area-${key}`
|
|
17806
|
+
);
|
|
17807
|
+
}
|
|
17808
|
+
return null;
|
|
17809
|
+
})
|
|
17810
|
+
]
|
|
17811
|
+
}
|
|
17812
|
+
) }) }),
|
|
17813
|
+
timeSeriesConfig && /* @__PURE__ */ jsx(
|
|
17814
|
+
Brush_default,
|
|
17815
|
+
{
|
|
17816
|
+
legend: timeSeriesLegend,
|
|
17817
|
+
data,
|
|
17818
|
+
startIndex,
|
|
17819
|
+
endIndex,
|
|
17820
|
+
onMouseDown: handleMouseDown,
|
|
17821
|
+
brushRef,
|
|
17822
|
+
xAxisKey: xAxisConfig.dataKey,
|
|
17823
|
+
seriesOrder,
|
|
17824
|
+
finalColors,
|
|
17825
|
+
brushHeight: timeSeriesConfig.height,
|
|
17826
|
+
brushColor: timeSeriesConfig.brushColor,
|
|
17827
|
+
miniChartOpacity: timeSeriesConfig.miniChartOpacity,
|
|
17828
|
+
showGrid,
|
|
17829
|
+
gridColor,
|
|
17830
|
+
margin: {
|
|
17831
|
+
left: finalChartLeftMargin,
|
|
17832
|
+
right: finalChartRightMargin
|
|
17833
|
+
}
|
|
17834
|
+
}
|
|
17835
|
+
)
|
|
17836
|
+
] }) }),
|
|
17803
17837
|
enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
|
|
17804
17838
|
DraggableTooltip_default,
|
|
17805
17839
|
{
|
|
@@ -17833,29 +17867,6 @@ var Chart = ({
|
|
|
17833
17867
|
position: "top-center",
|
|
17834
17868
|
variant: "floating"
|
|
17835
17869
|
}
|
|
17836
|
-
),
|
|
17837
|
-
timeSeriesConfig && /* @__PURE__ */ jsx(
|
|
17838
|
-
Brush_default,
|
|
17839
|
-
{
|
|
17840
|
-
legend: timeSeriesLegend,
|
|
17841
|
-
data,
|
|
17842
|
-
startIndex,
|
|
17843
|
-
endIndex,
|
|
17844
|
-
onMouseDown: handleMouseDown,
|
|
17845
|
-
brushRef,
|
|
17846
|
-
xAxisKey: xAxisConfig.dataKey,
|
|
17847
|
-
seriesOrder,
|
|
17848
|
-
finalColors,
|
|
17849
|
-
brushHeight: timeSeriesConfig.height,
|
|
17850
|
-
brushColor: timeSeriesConfig.brushColor,
|
|
17851
|
-
miniChartOpacity: timeSeriesConfig.miniChartOpacity,
|
|
17852
|
-
showGrid,
|
|
17853
|
-
gridColor,
|
|
17854
|
-
margin: {
|
|
17855
|
-
left: finalChartLeftMargin,
|
|
17856
|
-
right: finalChartRightMargin
|
|
17857
|
-
}
|
|
17858
|
-
}
|
|
17859
17870
|
)
|
|
17860
17871
|
] });
|
|
17861
17872
|
};
|
|
@@ -18350,9 +18361,7 @@ var HorizontalChart_default = HorizontalChart;
|
|
|
18350
18361
|
var TimeSeries = ({
|
|
18351
18362
|
data,
|
|
18352
18363
|
xAxis,
|
|
18353
|
-
|
|
18354
|
-
height,
|
|
18355
|
-
brushHeight,
|
|
18364
|
+
brushHeight = 60,
|
|
18356
18365
|
className,
|
|
18357
18366
|
start,
|
|
18358
18367
|
end,
|
|
@@ -18364,21 +18373,21 @@ var TimeSeries = ({
|
|
|
18364
18373
|
miniChartOpacity = 0.2,
|
|
18365
18374
|
...rest
|
|
18366
18375
|
}) => {
|
|
18367
|
-
const brushHeightValue = brushHeight ?? height ?? 60;
|
|
18368
18376
|
const startIndex = defaultStartIndex ?? start ?? 0;
|
|
18369
18377
|
const endIndex = defaultEndIndex ?? end;
|
|
18370
|
-
|
|
18378
|
+
const hasExplicitHeight = /\bh-/.test(className ?? "");
|
|
18379
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full flex flex-col overflow-hidden", className), children: /* @__PURE__ */ jsx(
|
|
18371
18380
|
Chart_default,
|
|
18372
18381
|
{
|
|
18373
18382
|
...rest,
|
|
18374
18383
|
data,
|
|
18375
18384
|
xAxis,
|
|
18376
|
-
|
|
18385
|
+
className: hasExplicitHeight ? "flex-1 min-h-0" : void 0,
|
|
18377
18386
|
timeSeries: {
|
|
18378
18387
|
start: startIndex,
|
|
18379
18388
|
end: endIndex,
|
|
18380
18389
|
onRangeChange,
|
|
18381
|
-
height:
|
|
18390
|
+
height: brushHeight,
|
|
18382
18391
|
brushColor,
|
|
18383
18392
|
brushStroke,
|
|
18384
18393
|
miniChartOpacity
|
|
@@ -18605,58 +18614,472 @@ function Leaderboard({
|
|
|
18605
18614
|
}
|
|
18606
18615
|
);
|
|
18607
18616
|
}
|
|
18608
|
-
|
|
18609
|
-
|
|
18610
|
-
|
|
18611
|
-
|
|
18612
|
-
|
|
18613
|
-
|
|
18614
|
-
|
|
18615
|
-
|
|
18616
|
-
|
|
18617
|
-
|
|
18618
|
-
|
|
18619
|
-
|
|
18620
|
-
|
|
18621
|
-
|
|
18617
|
+
var ZoomImage = React32.forwardRef(
|
|
18618
|
+
({
|
|
18619
|
+
className,
|
|
18620
|
+
src,
|
|
18621
|
+
alt,
|
|
18622
|
+
maxZoom = 2,
|
|
18623
|
+
transitionDuration = 0.3,
|
|
18624
|
+
borderRadius = 12,
|
|
18625
|
+
imageClassName,
|
|
18626
|
+
...props
|
|
18627
|
+
}, ref) => {
|
|
18628
|
+
const mouseX = useMotionValue(50);
|
|
18629
|
+
const mouseY = useMotionValue(50);
|
|
18630
|
+
const zoomLevel = useMotionValue(1);
|
|
18631
|
+
const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
|
|
18632
|
+
const smoothMouseX = useSpring(mouseX, springConfig);
|
|
18633
|
+
const smoothMouseY = useSpring(mouseY, springConfig);
|
|
18634
|
+
const smoothZoomLevel = useSpring(zoomLevel, springConfig);
|
|
18635
|
+
const transformOrigin = useTransform(
|
|
18636
|
+
[smoothMouseX, smoothMouseY],
|
|
18637
|
+
([latestX, latestY]) => `${latestX}% ${latestY}%`
|
|
18638
|
+
);
|
|
18639
|
+
const touchStartDist = React32.useRef(0);
|
|
18640
|
+
const touchStartZoom = React32.useRef(1);
|
|
18641
|
+
const isPinching = React32.useRef(false);
|
|
18642
|
+
const handleMouseMove = (e) => {
|
|
18643
|
+
if (isPinching.current) return;
|
|
18644
|
+
const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
|
|
18645
|
+
const x = (e.clientX - left) / width * 100;
|
|
18646
|
+
const y = (e.clientY - top) / height * 100;
|
|
18647
|
+
mouseX.set(x);
|
|
18648
|
+
mouseY.set(y);
|
|
18649
|
+
};
|
|
18650
|
+
const handleWheel = (e) => {
|
|
18651
|
+
const delta = -e.deltaY * 5e-3;
|
|
18652
|
+
const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
|
|
18653
|
+
zoomLevel.set(newZoom);
|
|
18654
|
+
};
|
|
18655
|
+
const handleMouseLeave = () => {
|
|
18656
|
+
if (!isPinching.current) {
|
|
18657
|
+
mouseX.set(50);
|
|
18658
|
+
mouseY.set(50);
|
|
18659
|
+
zoomLevel.set(1);
|
|
18660
|
+
}
|
|
18661
|
+
};
|
|
18662
|
+
const getDistance = (touches) => {
|
|
18663
|
+
const dx = touches[0].clientX - touches[1].clientX;
|
|
18664
|
+
const dy = touches[0].clientY - touches[1].clientY;
|
|
18665
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
18666
|
+
};
|
|
18667
|
+
const getCenter = (touches, rect) => {
|
|
18668
|
+
const x = (touches[0].clientX + touches[1].clientX) / 2;
|
|
18669
|
+
const y = (touches[0].clientY + touches[1].clientY) / 2;
|
|
18670
|
+
return {
|
|
18671
|
+
x: (x - rect.left) / rect.width * 100,
|
|
18672
|
+
y: (y - rect.top) / rect.height * 100
|
|
18673
|
+
};
|
|
18674
|
+
};
|
|
18675
|
+
const handleTouchStart = (e) => {
|
|
18676
|
+
if (e.touches.length === 2) {
|
|
18677
|
+
isPinching.current = true;
|
|
18678
|
+
touchStartDist.current = getDistance(e.touches);
|
|
18679
|
+
touchStartZoom.current = zoomLevel.get();
|
|
18680
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
18681
|
+
const center = getCenter(e.touches, rect);
|
|
18682
|
+
mouseX.set(center.x);
|
|
18683
|
+
mouseY.set(center.y);
|
|
18684
|
+
}
|
|
18685
|
+
};
|
|
18686
|
+
const handleTouchMove = (e) => {
|
|
18687
|
+
if (e.touches.length === 2 && isPinching.current) {
|
|
18688
|
+
e.preventDefault();
|
|
18689
|
+
const dist = getDistance(e.touches);
|
|
18690
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
18691
|
+
const scaleChange = dist / touchStartDist.current;
|
|
18692
|
+
const newZoom = Math.min(
|
|
18693
|
+
Math.max(1, touchStartZoom.current * scaleChange),
|
|
18694
|
+
maxZoom
|
|
18695
|
+
);
|
|
18696
|
+
zoomLevel.set(newZoom);
|
|
18697
|
+
const center = getCenter(e.touches, rect);
|
|
18698
|
+
mouseX.set(center.x);
|
|
18699
|
+
mouseY.set(center.y);
|
|
18700
|
+
}
|
|
18701
|
+
};
|
|
18702
|
+
const handleTouchEnd = (e) => {
|
|
18703
|
+
if (e.touches.length < 2) {
|
|
18704
|
+
if (isPinching.current) {
|
|
18705
|
+
isPinching.current = false;
|
|
18706
|
+
}
|
|
18707
|
+
}
|
|
18708
|
+
};
|
|
18709
|
+
return /* @__PURE__ */ jsx(
|
|
18710
|
+
motion.div,
|
|
18711
|
+
{
|
|
18712
|
+
ref,
|
|
18713
|
+
className: cn(
|
|
18714
|
+
"relative w-full h-full overflow-hidden touch-none",
|
|
18715
|
+
className
|
|
18716
|
+
),
|
|
18717
|
+
style: { borderRadius: `${borderRadius}px` },
|
|
18718
|
+
onMouseMove: handleMouseMove,
|
|
18719
|
+
onMouseLeave: handleMouseLeave,
|
|
18720
|
+
onWheel: handleWheel,
|
|
18721
|
+
onTouchStart: handleTouchStart,
|
|
18722
|
+
onTouchMove: handleTouchMove,
|
|
18723
|
+
onTouchEnd: handleTouchEnd,
|
|
18724
|
+
...props,
|
|
18725
|
+
children: /* @__PURE__ */ jsx(
|
|
18726
|
+
motion.img,
|
|
18727
|
+
{
|
|
18728
|
+
src,
|
|
18729
|
+
alt,
|
|
18730
|
+
className: cn("w-full h-full object-cover", imageClassName),
|
|
18731
|
+
style: {
|
|
18732
|
+
borderRadius: `${borderRadius}px`,
|
|
18733
|
+
transformOrigin,
|
|
18734
|
+
scale: smoothZoomLevel
|
|
18735
|
+
},
|
|
18736
|
+
transition: {
|
|
18737
|
+
type: "spring",
|
|
18738
|
+
duration: transitionDuration,
|
|
18739
|
+
bounce: 0
|
|
18740
|
+
}
|
|
18741
|
+
}
|
|
18742
|
+
)
|
|
18743
|
+
}
|
|
18744
|
+
);
|
|
18622
18745
|
}
|
|
18746
|
+
);
|
|
18747
|
+
ZoomImage.displayName = "ZoomImage";
|
|
18748
|
+
var Lens = ({
|
|
18749
|
+
children,
|
|
18750
|
+
initialZoom = 1.5,
|
|
18751
|
+
maxZoom = 4,
|
|
18752
|
+
lensSize = 150,
|
|
18753
|
+
isStatic = false,
|
|
18754
|
+
position = { x: 200, y: 150 },
|
|
18755
|
+
hovering,
|
|
18756
|
+
setHovering
|
|
18757
|
+
}) => {
|
|
18758
|
+
const containerRef = useRef(null);
|
|
18759
|
+
const [localIsHovering, setLocalIsHovering] = useState(false);
|
|
18760
|
+
const isHovering = hovering !== void 0 ? hovering : localIsHovering;
|
|
18761
|
+
const setIsHovering = setHovering || setLocalIsHovering;
|
|
18762
|
+
const [mousePosition, setMousePosition] = useState({ x: 100, y: 100 });
|
|
18763
|
+
const [zoomFactor, setZoomFactor] = useState(initialZoom);
|
|
18764
|
+
const [isActivated, setIsActivated] = useState(false);
|
|
18765
|
+
const handleMouseMove = (e) => {
|
|
18766
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
18767
|
+
const x = e.clientX - rect.left;
|
|
18768
|
+
const y = e.clientY - rect.top;
|
|
18769
|
+
setMousePosition({ x, y });
|
|
18770
|
+
};
|
|
18771
|
+
const handleWheel = (e) => {
|
|
18772
|
+
if (!isActivated) return;
|
|
18773
|
+
const delta = -e.deltaY * 5e-3;
|
|
18774
|
+
setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
|
|
18775
|
+
};
|
|
18776
|
+
const resetZoom = () => {
|
|
18777
|
+
setZoomFactor(initialZoom);
|
|
18778
|
+
setIsActivated(false);
|
|
18779
|
+
};
|
|
18780
|
+
return /* @__PURE__ */ jsxs(
|
|
18781
|
+
"div",
|
|
18782
|
+
{
|
|
18783
|
+
ref: containerRef,
|
|
18784
|
+
className: cn(
|
|
18785
|
+
"relative overflow-hidden rounded-lg z-20 h-full",
|
|
18786
|
+
isActivated ? "cursor-none" : "cursor-pointer"
|
|
18787
|
+
),
|
|
18788
|
+
onClick: () => setIsActivated(!isActivated),
|
|
18789
|
+
onMouseEnter: () => {
|
|
18790
|
+
setIsHovering(true);
|
|
18791
|
+
},
|
|
18792
|
+
onMouseLeave: () => {
|
|
18793
|
+
setIsHovering(false);
|
|
18794
|
+
resetZoom();
|
|
18795
|
+
},
|
|
18796
|
+
onMouseMove: handleMouseMove,
|
|
18797
|
+
onWheel: handleWheel,
|
|
18798
|
+
children: [
|
|
18799
|
+
children,
|
|
18800
|
+
isStatic ? /* @__PURE__ */ jsxs("div", { children: [
|
|
18801
|
+
/* @__PURE__ */ jsx(
|
|
18802
|
+
motion.div,
|
|
18803
|
+
{
|
|
18804
|
+
initial: { opacity: 0, scale: 0.58 },
|
|
18805
|
+
animate: { opacity: 1, scale: 1 },
|
|
18806
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
18807
|
+
transition: { duration: 0.3, ease: "easeOut" },
|
|
18808
|
+
className: "absolute inset-0 overflow-hidden",
|
|
18809
|
+
style: {
|
|
18810
|
+
maskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
|
|
18811
|
+
WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
|
|
18812
|
+
transformOrigin: `${position.x}px ${position.y}px`
|
|
18813
|
+
},
|
|
18814
|
+
children: /* @__PURE__ */ jsx(
|
|
18815
|
+
"div",
|
|
18816
|
+
{
|
|
18817
|
+
className: "absolute inset-0",
|
|
18818
|
+
style: {
|
|
18819
|
+
transform: `scale(${zoomFactor})`,
|
|
18820
|
+
transformOrigin: `${position.x}px ${position.y}px`
|
|
18821
|
+
},
|
|
18822
|
+
children
|
|
18823
|
+
}
|
|
18824
|
+
)
|
|
18825
|
+
}
|
|
18826
|
+
),
|
|
18827
|
+
/* @__PURE__ */ jsx(
|
|
18828
|
+
"div",
|
|
18829
|
+
{
|
|
18830
|
+
className: "absolute pointer-events-none",
|
|
18831
|
+
style: {
|
|
18832
|
+
left: position.x - lensSize / 2,
|
|
18833
|
+
top: position.y - lensSize / 2,
|
|
18834
|
+
width: lensSize,
|
|
18835
|
+
height: lensSize,
|
|
18836
|
+
borderRadius: "50%",
|
|
18837
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
|
|
18838
|
+
background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
|
|
18839
|
+
}
|
|
18840
|
+
}
|
|
18841
|
+
)
|
|
18842
|
+
] }) : /* @__PURE__ */ jsx(AnimatePresence, { children: isHovering && isActivated && /* @__PURE__ */ jsxs("div", { children: [
|
|
18843
|
+
/* @__PURE__ */ jsx(
|
|
18844
|
+
motion.div,
|
|
18845
|
+
{
|
|
18846
|
+
initial: { opacity: 0, scale: 0.58 },
|
|
18847
|
+
animate: { opacity: 1, scale: 1 },
|
|
18848
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
18849
|
+
transition: { duration: 0.3, ease: "easeOut" },
|
|
18850
|
+
className: "absolute inset-0 overflow-hidden",
|
|
18851
|
+
style: {
|
|
18852
|
+
maskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
|
|
18853
|
+
WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
|
|
18854
|
+
transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,
|
|
18855
|
+
zIndex: 50
|
|
18856
|
+
},
|
|
18857
|
+
children: /* @__PURE__ */ jsx(
|
|
18858
|
+
"div",
|
|
18859
|
+
{
|
|
18860
|
+
className: "absolute inset-0",
|
|
18861
|
+
style: {
|
|
18862
|
+
transform: `scale(${zoomFactor})`,
|
|
18863
|
+
transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`
|
|
18864
|
+
},
|
|
18865
|
+
children
|
|
18866
|
+
}
|
|
18867
|
+
)
|
|
18868
|
+
}
|
|
18869
|
+
),
|
|
18870
|
+
/* @__PURE__ */ jsx(
|
|
18871
|
+
motion.div,
|
|
18872
|
+
{
|
|
18873
|
+
initial: { opacity: 0, scale: 0.58 },
|
|
18874
|
+
animate: { opacity: 1, scale: 1 },
|
|
18875
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
18876
|
+
transition: { duration: 0.3, ease: "easeOut" },
|
|
18877
|
+
className: "absolute pointer-events-none z-[60]",
|
|
18878
|
+
style: {
|
|
18879
|
+
left: mousePosition.x - lensSize / 2,
|
|
18880
|
+
top: mousePosition.y - lensSize / 2,
|
|
18881
|
+
width: lensSize,
|
|
18882
|
+
height: lensSize,
|
|
18883
|
+
borderRadius: "50%",
|
|
18884
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
|
|
18885
|
+
background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
|
|
18886
|
+
}
|
|
18887
|
+
}
|
|
18888
|
+
)
|
|
18889
|
+
] }) })
|
|
18890
|
+
]
|
|
18891
|
+
}
|
|
18892
|
+
);
|
|
18893
|
+
};
|
|
18894
|
+
function CarouselSkeleton({ className }) {
|
|
18895
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full h-full lg:p-10 sm:p-4 p-2", className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg h-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-muted rounded-lg overflow-hidden relative", children: [
|
|
18896
|
+
/* @__PURE__ */ jsx(
|
|
18897
|
+
motion.div,
|
|
18898
|
+
{
|
|
18899
|
+
className: "absolute inset-0",
|
|
18900
|
+
style: {
|
|
18901
|
+
background: "linear-gradient(105deg, transparent 30%, hsl(var(--muted-foreground) / 0.08) 50%, transparent 70%)",
|
|
18902
|
+
backgroundSize: "200% 100%"
|
|
18903
|
+
},
|
|
18904
|
+
animate: { backgroundPositionX: ["200%", "-200%"] },
|
|
18905
|
+
transition: {
|
|
18906
|
+
duration: 1.6,
|
|
18907
|
+
ease: "linear",
|
|
18908
|
+
repeat: Infinity
|
|
18909
|
+
}
|
|
18910
|
+
}
|
|
18911
|
+
),
|
|
18912
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
18913
|
+
motion.div,
|
|
18914
|
+
{
|
|
18915
|
+
animate: { opacity: [0.3, 0.6, 0.3] },
|
|
18916
|
+
transition: {
|
|
18917
|
+
duration: 2,
|
|
18918
|
+
repeat: Infinity,
|
|
18919
|
+
ease: "easeInOut"
|
|
18920
|
+
},
|
|
18921
|
+
children: /* @__PURE__ */ jsxs(
|
|
18922
|
+
"svg",
|
|
18923
|
+
{
|
|
18924
|
+
width: "48",
|
|
18925
|
+
height: "48",
|
|
18926
|
+
viewBox: "0 0 24 24",
|
|
18927
|
+
fill: "none",
|
|
18928
|
+
stroke: "currentColor",
|
|
18929
|
+
strokeWidth: "1",
|
|
18930
|
+
strokeLinecap: "round",
|
|
18931
|
+
strokeLinejoin: "round",
|
|
18932
|
+
className: "text-muted-foreground/30",
|
|
18933
|
+
children: [
|
|
18934
|
+
/* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
18935
|
+
/* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
|
|
18936
|
+
/* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
|
|
18937
|
+
]
|
|
18938
|
+
}
|
|
18939
|
+
)
|
|
18940
|
+
}
|
|
18941
|
+
) }),
|
|
18942
|
+
/* @__PURE__ */ jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-muted-foreground/10 border border-muted-foreground/10" }),
|
|
18943
|
+
/* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-muted-foreground/10 border border-muted-foreground/10" }),
|
|
18944
|
+
/* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 items-center", children: [8, 32, 8, 8].map((w, i) => /* @__PURE__ */ jsx(
|
|
18945
|
+
motion.div,
|
|
18946
|
+
{
|
|
18947
|
+
className: "h-2 rounded-full bg-muted-foreground/20",
|
|
18948
|
+
style: { width: w },
|
|
18949
|
+
animate: { opacity: [0.4, 0.7, 0.4] },
|
|
18950
|
+
transition: {
|
|
18951
|
+
duration: 1.8,
|
|
18952
|
+
repeat: Infinity,
|
|
18953
|
+
ease: "easeInOut",
|
|
18954
|
+
delay: i * 0.15
|
|
18955
|
+
}
|
|
18956
|
+
},
|
|
18957
|
+
i
|
|
18958
|
+
)) })
|
|
18959
|
+
] }) }) }) });
|
|
18960
|
+
}
|
|
18961
|
+
function CarouselBase({
|
|
18962
|
+
items,
|
|
18963
|
+
className,
|
|
18964
|
+
containerClassName,
|
|
18965
|
+
imageClassName,
|
|
18966
|
+
width,
|
|
18967
|
+
height,
|
|
18968
|
+
showControls = true,
|
|
18969
|
+
showIndicators = true,
|
|
18970
|
+
autoPlay = false,
|
|
18971
|
+
autoPlayInterval = 3e3,
|
|
18972
|
+
zoomEffect = null,
|
|
18973
|
+
download = false,
|
|
18974
|
+
isLoading = false
|
|
18623
18975
|
}) {
|
|
18976
|
+
const isMobile = useIsMobile();
|
|
18624
18977
|
const [index, setIndex] = useState(0);
|
|
18625
|
-
const
|
|
18626
|
-
const
|
|
18978
|
+
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
|
18979
|
+
const [isDownloading, setIsDownloading] = useState(false);
|
|
18980
|
+
const [downloadSuccess, setDownloadSuccess] = useState(false);
|
|
18627
18981
|
useEffect(() => {
|
|
18628
|
-
if (
|
|
18629
|
-
|
|
18630
|
-
|
|
18631
|
-
|
|
18632
|
-
|
|
18633
|
-
|
|
18634
|
-
|
|
18635
|
-
|
|
18636
|
-
|
|
18637
|
-
|
|
18982
|
+
if (!emblaApi) return;
|
|
18983
|
+
const onSelect = () => {
|
|
18984
|
+
setIndex(emblaApi.selectedScrollSnap());
|
|
18985
|
+
};
|
|
18986
|
+
emblaApi.on("select", onSelect);
|
|
18987
|
+
emblaApi.on("reInit", onSelect);
|
|
18988
|
+
return () => {
|
|
18989
|
+
emblaApi.off("select", onSelect);
|
|
18990
|
+
emblaApi.off("reInit", onSelect);
|
|
18991
|
+
};
|
|
18992
|
+
}, [emblaApi]);
|
|
18638
18993
|
useEffect(() => {
|
|
18639
|
-
if (!autoPlay || items.length <= 1) return;
|
|
18994
|
+
if (!autoPlay || items.length <= 1 || !emblaApi) return;
|
|
18640
18995
|
const interval = setInterval(() => {
|
|
18641
|
-
|
|
18996
|
+
emblaApi.scrollNext();
|
|
18642
18997
|
}, autoPlayInterval);
|
|
18643
18998
|
return () => clearInterval(interval);
|
|
18644
|
-
}, [autoPlay, autoPlayInterval, items.length]);
|
|
18645
|
-
|
|
18646
|
-
|
|
18999
|
+
}, [autoPlay, autoPlayInterval, items.length, emblaApi]);
|
|
19000
|
+
useEffect(() => {
|
|
19001
|
+
if (emblaApi && index !== emblaApi.selectedScrollSnap()) {
|
|
19002
|
+
emblaApi.scrollTo(index);
|
|
19003
|
+
}
|
|
19004
|
+
}, [index, emblaApi]);
|
|
19005
|
+
const handleDownload = async () => {
|
|
19006
|
+
if (isDownloading) return;
|
|
19007
|
+
setIsDownloading(true);
|
|
19008
|
+
setDownloadSuccess(false);
|
|
19009
|
+
const currentItem = items[index];
|
|
19010
|
+
try {
|
|
19011
|
+
const response = await fetch(currentItem.url);
|
|
19012
|
+
const blob = await response.blob();
|
|
19013
|
+
const url = window.URL.createObjectURL(blob);
|
|
19014
|
+
const link = document.createElement("a");
|
|
19015
|
+
link.href = url;
|
|
19016
|
+
link.download = currentItem.title || "image";
|
|
19017
|
+
document.body.appendChild(link);
|
|
19018
|
+
link.click();
|
|
19019
|
+
document.body.removeChild(link);
|
|
19020
|
+
window.URL.revokeObjectURL(url);
|
|
19021
|
+
setIsDownloading(false);
|
|
19022
|
+
setDownloadSuccess(true);
|
|
19023
|
+
setTimeout(() => setDownloadSuccess(false), 2e3);
|
|
19024
|
+
} catch (error) {
|
|
19025
|
+
console.error("Error downloading image:", error);
|
|
19026
|
+
setIsDownloading(false);
|
|
19027
|
+
}
|
|
19028
|
+
};
|
|
19029
|
+
if (isLoading) {
|
|
19030
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
|
|
19031
|
+
motion.div,
|
|
19032
|
+
{
|
|
19033
|
+
initial: { opacity: 0 },
|
|
19034
|
+
animate: { opacity: 1 },
|
|
19035
|
+
exit: { opacity: 0 },
|
|
19036
|
+
transition: { duration: 0.3 },
|
|
19037
|
+
style: { width, height },
|
|
19038
|
+
className: "h-full",
|
|
19039
|
+
children: /* @__PURE__ */ jsx(CarouselSkeleton, { className })
|
|
19040
|
+
},
|
|
19041
|
+
"carousel-skeleton"
|
|
19042
|
+
) });
|
|
19043
|
+
}
|
|
19044
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
|
|
19045
|
+
motion.div,
|
|
18647
19046
|
{
|
|
19047
|
+
initial: { opacity: 0 },
|
|
19048
|
+
animate: { opacity: 1 },
|
|
19049
|
+
transition: { duration: 0.4 },
|
|
18648
19050
|
className: cn("w-full lg:p-10 sm:p-4 p-2", className),
|
|
18649
|
-
style: { width },
|
|
18650
|
-
children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxs(
|
|
19051
|
+
style: { width, height },
|
|
19052
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs(
|
|
18651
19053
|
"div",
|
|
18652
19054
|
{
|
|
18653
19055
|
className: cn(
|
|
18654
|
-
"relative overflow-hidden rounded-lg",
|
|
19056
|
+
"relative overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
|
|
18655
19057
|
containerClassName
|
|
18656
19058
|
),
|
|
18657
|
-
ref:
|
|
19059
|
+
ref: emblaRef,
|
|
18658
19060
|
children: [
|
|
18659
|
-
/* @__PURE__ */ jsx(
|
|
19061
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-full", children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full h-full min-w-0", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsx(
|
|
19062
|
+
ZoomImage,
|
|
19063
|
+
{
|
|
19064
|
+
src: item.url,
|
|
19065
|
+
alt: item.title,
|
|
19066
|
+
className: cn("w-full h-full select-none"),
|
|
19067
|
+
imageClassName,
|
|
19068
|
+
borderRadius: 8,
|
|
19069
|
+
maxZoom: 3
|
|
19070
|
+
}
|
|
19071
|
+
) : zoomEffect === "lens" ? /* @__PURE__ */ jsx(Lens, { children: /* @__PURE__ */ jsx(
|
|
19072
|
+
"img",
|
|
19073
|
+
{
|
|
19074
|
+
src: item.url,
|
|
19075
|
+
alt: item.title,
|
|
19076
|
+
className: cn(
|
|
19077
|
+
"w-full h-full object-cover rounded-lg select-none pointer-events-none",
|
|
19078
|
+
imageClassName
|
|
19079
|
+
),
|
|
19080
|
+
draggable: false
|
|
19081
|
+
}
|
|
19082
|
+
) }) : /* @__PURE__ */ jsx(
|
|
18660
19083
|
"img",
|
|
18661
19084
|
{
|
|
18662
19085
|
src: item.url,
|
|
@@ -18668,14 +19091,94 @@ function CarouselBase({
|
|
|
18668
19091
|
draggable: false
|
|
18669
19092
|
}
|
|
18670
19093
|
) }, item.id)) }),
|
|
19094
|
+
download && /* @__PURE__ */ jsx(
|
|
19095
|
+
motion.button,
|
|
19096
|
+
{
|
|
19097
|
+
onClick: handleDownload,
|
|
19098
|
+
className: cn(
|
|
19099
|
+
"absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
|
|
19100
|
+
downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
|
|
19101
|
+
),
|
|
19102
|
+
title: "Download image",
|
|
19103
|
+
initial: false,
|
|
19104
|
+
animate: {
|
|
19105
|
+
scale: isDownloading ? 0.9 : 1,
|
|
19106
|
+
backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
|
|
19107
|
+
},
|
|
19108
|
+
whileHover: { scale: 1.05 },
|
|
19109
|
+
whileTap: { scale: 0.95 },
|
|
19110
|
+
children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
|
|
19111
|
+
motion.svg,
|
|
19112
|
+
{
|
|
19113
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19114
|
+
width: "20",
|
|
19115
|
+
height: "20",
|
|
19116
|
+
viewBox: "0 0 24 24",
|
|
19117
|
+
fill: "none",
|
|
19118
|
+
stroke: "currentColor",
|
|
19119
|
+
strokeWidth: "2",
|
|
19120
|
+
strokeLinecap: "round",
|
|
19121
|
+
strokeLinejoin: "round",
|
|
19122
|
+
animate: { rotate: 360 },
|
|
19123
|
+
transition: {
|
|
19124
|
+
repeat: Infinity,
|
|
19125
|
+
ease: "linear",
|
|
19126
|
+
duration: 1
|
|
19127
|
+
},
|
|
19128
|
+
children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
19129
|
+
},
|
|
19130
|
+
"loading"
|
|
19131
|
+
) : downloadSuccess ? /* @__PURE__ */ jsx(
|
|
19132
|
+
motion.svg,
|
|
19133
|
+
{
|
|
19134
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19135
|
+
width: "20",
|
|
19136
|
+
height: "20",
|
|
19137
|
+
viewBox: "0 0 24 24",
|
|
19138
|
+
fill: "none",
|
|
19139
|
+
stroke: "currentColor",
|
|
19140
|
+
strokeWidth: "2",
|
|
19141
|
+
strokeLinecap: "round",
|
|
19142
|
+
strokeLinejoin: "round",
|
|
19143
|
+
initial: { scale: 0.5, opacity: 0 },
|
|
19144
|
+
animate: { scale: 1, opacity: 1 },
|
|
19145
|
+
exit: { scale: 0.5, opacity: 0 },
|
|
19146
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
19147
|
+
},
|
|
19148
|
+
"success"
|
|
19149
|
+
) : /* @__PURE__ */ jsxs(
|
|
19150
|
+
motion.svg,
|
|
19151
|
+
{
|
|
19152
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19153
|
+
width: "20",
|
|
19154
|
+
height: "20",
|
|
19155
|
+
viewBox: "0 0 24 24",
|
|
19156
|
+
fill: "none",
|
|
19157
|
+
stroke: "currentColor",
|
|
19158
|
+
strokeWidth: "2",
|
|
19159
|
+
strokeLinecap: "round",
|
|
19160
|
+
strokeLinejoin: "round",
|
|
19161
|
+
initial: { scale: 0.5, opacity: 0 },
|
|
19162
|
+
animate: { scale: 1, opacity: 1 },
|
|
19163
|
+
exit: { scale: 0.5, opacity: 0 },
|
|
19164
|
+
children: [
|
|
19165
|
+
/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
19166
|
+
/* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
|
|
19167
|
+
/* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
|
|
19168
|
+
]
|
|
19169
|
+
},
|
|
19170
|
+
"download"
|
|
19171
|
+
) })
|
|
19172
|
+
}
|
|
19173
|
+
),
|
|
18671
19174
|
showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
18672
19175
|
/* @__PURE__ */ jsx(
|
|
18673
19176
|
motion.button,
|
|
18674
19177
|
{
|
|
18675
|
-
disabled:
|
|
18676
|
-
onClick: () =>
|
|
18677
|
-
className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-
|
|
18678
|
-
|
|
19178
|
+
disabled: !emblaApi?.canScrollPrev(),
|
|
19179
|
+
onClick: () => emblaApi?.scrollPrev(),
|
|
19180
|
+
className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
|
|
19181
|
+
${!emblaApi?.canScrollPrev() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
|
|
18679
19182
|
children: /* @__PURE__ */ jsx(
|
|
18680
19183
|
"svg",
|
|
18681
19184
|
{
|
|
@@ -18699,10 +19202,10 @@ function CarouselBase({
|
|
|
18699
19202
|
/* @__PURE__ */ jsx(
|
|
18700
19203
|
motion.button,
|
|
18701
19204
|
{
|
|
18702
|
-
disabled:
|
|
18703
|
-
onClick: () =>
|
|
18704
|
-
className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-
|
|
18705
|
-
|
|
19205
|
+
disabled: !emblaApi?.canScrollNext(),
|
|
19206
|
+
onClick: () => emblaApi?.scrollNext(),
|
|
19207
|
+
className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
|
|
19208
|
+
${!emblaApi?.canScrollNext() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
|
|
18706
19209
|
children: /* @__PURE__ */ jsx(
|
|
18707
19210
|
"svg",
|
|
18708
19211
|
{
|
|
@@ -18727,7 +19230,7 @@ function CarouselBase({
|
|
|
18727
19230
|
showIndicators && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: items.map((_, i) => /* @__PURE__ */ jsx(
|
|
18728
19231
|
"button",
|
|
18729
19232
|
{
|
|
18730
|
-
onClick: () =>
|
|
19233
|
+
onClick: () => emblaApi?.scrollTo(i),
|
|
18731
19234
|
className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
|
|
18732
19235
|
},
|
|
18733
19236
|
i
|
|
@@ -18735,8 +19238,240 @@ function CarouselBase({
|
|
|
18735
19238
|
]
|
|
18736
19239
|
}
|
|
18737
19240
|
) })
|
|
19241
|
+
},
|
|
19242
|
+
"carousel-content"
|
|
19243
|
+
) });
|
|
19244
|
+
}
|
|
19245
|
+
function useMediaQuery(query) {
|
|
19246
|
+
const [value, setValue] = React32.useState(false);
|
|
19247
|
+
React32.useEffect(() => {
|
|
19248
|
+
function onChange(event) {
|
|
19249
|
+
setValue(event.matches);
|
|
18738
19250
|
}
|
|
18739
|
-
|
|
19251
|
+
const result = window.matchMedia(query);
|
|
19252
|
+
result.addEventListener("change", onChange);
|
|
19253
|
+
setValue(result.matches);
|
|
19254
|
+
return () => result.removeEventListener("change", onChange);
|
|
19255
|
+
}, [query]);
|
|
19256
|
+
return value;
|
|
19257
|
+
}
|
|
19258
|
+
var FULL_CIRCLE = 360;
|
|
19259
|
+
var START_ANGLE = -90;
|
|
19260
|
+
function degToRad(deg) {
|
|
19261
|
+
return deg * Math.PI / 180;
|
|
19262
|
+
}
|
|
19263
|
+
function polarToCartesian(radius, angleDeg) {
|
|
19264
|
+
const rad = degToRad(angleDeg);
|
|
19265
|
+
return { x: Math.cos(rad) * radius, y: Math.sin(rad) * radius };
|
|
19266
|
+
}
|
|
19267
|
+
function slicePath(index, total, wedgeRadius, innerRadius) {
|
|
19268
|
+
if (total <= 0) return "";
|
|
19269
|
+
const anglePerSlice = FULL_CIRCLE / total;
|
|
19270
|
+
const midDeg = START_ANGLE + anglePerSlice * index;
|
|
19271
|
+
const halfSlice = anglePerSlice / 2;
|
|
19272
|
+
const startDeg = midDeg - halfSlice;
|
|
19273
|
+
const endDeg = midDeg + halfSlice;
|
|
19274
|
+
const outerStart = polarToCartesian(wedgeRadius, startDeg);
|
|
19275
|
+
const outerEnd = polarToCartesian(wedgeRadius, endDeg);
|
|
19276
|
+
const innerStart = polarToCartesian(innerRadius, startDeg);
|
|
19277
|
+
const innerEnd = polarToCartesian(innerRadius, endDeg);
|
|
19278
|
+
const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
|
|
19279
|
+
return `M ${outerStart.x} ${outerStart.y} A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y} L ${innerEnd.x} ${innerEnd.y} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y} Z`;
|
|
19280
|
+
}
|
|
19281
|
+
function RadialMenu({
|
|
19282
|
+
children,
|
|
19283
|
+
menuItems,
|
|
19284
|
+
size = 240,
|
|
19285
|
+
iconSize = 24,
|
|
19286
|
+
bandWidth = 60,
|
|
19287
|
+
innerGap = 16,
|
|
19288
|
+
outerGap = 12,
|
|
19289
|
+
outerRingWidth = 8,
|
|
19290
|
+
onSelect
|
|
19291
|
+
}) {
|
|
19292
|
+
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
19293
|
+
const radius = size / 2;
|
|
19294
|
+
const outerRingOuterRadius = radius;
|
|
19295
|
+
const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;
|
|
19296
|
+
const wedgeOuterRadius = outerRingInnerRadius - outerGap;
|
|
19297
|
+
const wedgeInnerRadius = wedgeOuterRadius - bandWidth;
|
|
19298
|
+
const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;
|
|
19299
|
+
const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);
|
|
19300
|
+
const slice = 360 / menuItems.length;
|
|
19301
|
+
const [activeIndex, setActiveIndex] = React32.useState(null);
|
|
19302
|
+
const timerRef = React32.useRef(null);
|
|
19303
|
+
const isLongPress = React32.useRef(false);
|
|
19304
|
+
const handleTouchStart = (e) => {
|
|
19305
|
+
isLongPress.current = false;
|
|
19306
|
+
const touch = e.touches[0];
|
|
19307
|
+
const { clientX, clientY } = touch;
|
|
19308
|
+
timerRef.current = setTimeout(() => {
|
|
19309
|
+
isLongPress.current = true;
|
|
19310
|
+
const event = new MouseEvent("contextmenu", {
|
|
19311
|
+
bubbles: true,
|
|
19312
|
+
cancelable: true,
|
|
19313
|
+
view: window,
|
|
19314
|
+
clientX,
|
|
19315
|
+
clientY,
|
|
19316
|
+
button: 2,
|
|
19317
|
+
buttons: 2
|
|
19318
|
+
});
|
|
19319
|
+
e.target.dispatchEvent(event);
|
|
19320
|
+
}, 1e3);
|
|
19321
|
+
};
|
|
19322
|
+
const handleTouchEnd = () => {
|
|
19323
|
+
if (timerRef.current) {
|
|
19324
|
+
clearTimeout(timerRef.current);
|
|
19325
|
+
}
|
|
19326
|
+
};
|
|
19327
|
+
const handleTouchMove = () => {
|
|
19328
|
+
if (timerRef.current) {
|
|
19329
|
+
clearTimeout(timerRef.current);
|
|
19330
|
+
}
|
|
19331
|
+
};
|
|
19332
|
+
const containerVariants = {
|
|
19333
|
+
hidden: { opacity: 0, scale: 0.8 },
|
|
19334
|
+
visible: {
|
|
19335
|
+
opacity: 1,
|
|
19336
|
+
scale: 1,
|
|
19337
|
+
transition: isMobile ? { duration: 0 } : {
|
|
19338
|
+
delayChildren: 0.05,
|
|
19339
|
+
staggerChildren: 0.03,
|
|
19340
|
+
type: "spring",
|
|
19341
|
+
stiffness: 300,
|
|
19342
|
+
damping: 24
|
|
19343
|
+
}
|
|
19344
|
+
},
|
|
19345
|
+
exit: {
|
|
19346
|
+
opacity: 0,
|
|
19347
|
+
scale: 0.8,
|
|
19348
|
+
transition: isMobile ? { duration: 0 } : { duration: 0.15 }
|
|
19349
|
+
}
|
|
19350
|
+
};
|
|
19351
|
+
const itemVariants2 = {
|
|
19352
|
+
hidden: { opacity: 0, scale: 0, rotate: -20 },
|
|
19353
|
+
visible: {
|
|
19354
|
+
opacity: 1,
|
|
19355
|
+
scale: 1,
|
|
19356
|
+
rotate: 0,
|
|
19357
|
+
transition: isMobile ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 20 }
|
|
19358
|
+
}
|
|
19359
|
+
};
|
|
19360
|
+
return /* @__PURE__ */ jsxs(ContextMenuBase, { children: [
|
|
19361
|
+
/* @__PURE__ */ jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
19362
|
+
"div",
|
|
19363
|
+
{
|
|
19364
|
+
className: "select-none outline-none group touch-none",
|
|
19365
|
+
onTouchStart: handleTouchStart,
|
|
19366
|
+
onTouchEnd: handleTouchEnd,
|
|
19367
|
+
onTouchMove: handleTouchMove,
|
|
19368
|
+
children: children || /* @__PURE__ */ jsx("div", { className: "size-80 flex justify-center items-center border-2 border-dashed border-muted-foreground/20 rounded-xl bg-muted/5 text-muted-foreground hover:bg-muted/10 transition-colors", children: "Right-click or Long-press here (1s)" })
|
|
19369
|
+
}
|
|
19370
|
+
) }),
|
|
19371
|
+
/* @__PURE__ */ jsx(
|
|
19372
|
+
ContextMenuContentBase,
|
|
19373
|
+
{
|
|
19374
|
+
className: "p-0 border-none bg-transparent shadow-none overflow-visible -translate-x-1/2 -translate-y-1/2",
|
|
19375
|
+
style: { width: size, height: size },
|
|
19376
|
+
children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
|
|
19377
|
+
motion.div,
|
|
19378
|
+
{
|
|
19379
|
+
className: "relative size-full drop-shadow-xl will-change-transform",
|
|
19380
|
+
variants: containerVariants,
|
|
19381
|
+
initial: "hidden",
|
|
19382
|
+
animate: "visible",
|
|
19383
|
+
exit: "exit",
|
|
19384
|
+
children: [
|
|
19385
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-background/5 blur-2xl -z-10" }),
|
|
19386
|
+
/* @__PURE__ */ jsxs(
|
|
19387
|
+
"svg",
|
|
19388
|
+
{
|
|
19389
|
+
className: "absolute inset-0 size-full overflow-visible",
|
|
19390
|
+
viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
|
|
19391
|
+
children: [
|
|
19392
|
+
/* @__PURE__ */ jsx(
|
|
19393
|
+
motion.circle,
|
|
19394
|
+
{
|
|
19395
|
+
r: centerRadius,
|
|
19396
|
+
initial: { scale: 0 },
|
|
19397
|
+
animate: { scale: 1 },
|
|
19398
|
+
transition: isMobile ? { duration: 0 } : {
|
|
19399
|
+
type: "spring",
|
|
19400
|
+
stiffness: 300,
|
|
19401
|
+
delay: 0.2
|
|
19402
|
+
},
|
|
19403
|
+
className: "fill-background stroke-border stroke-1 shadow-inner"
|
|
19404
|
+
}
|
|
19405
|
+
),
|
|
19406
|
+
menuItems.map((item, index) => {
|
|
19407
|
+
const Icon = item.icon;
|
|
19408
|
+
const midDeg = START_ANGLE + slice * index;
|
|
19409
|
+
const { x: iconX, y: iconY } = polarToCartesian(
|
|
19410
|
+
iconRingRadius,
|
|
19411
|
+
midDeg
|
|
19412
|
+
);
|
|
19413
|
+
const isActive = activeIndex === index;
|
|
19414
|
+
const ICON_BOX = iconSize * 2.5;
|
|
19415
|
+
return /* @__PURE__ */ jsxs(
|
|
19416
|
+
motion.g,
|
|
19417
|
+
{
|
|
19418
|
+
variants: itemVariants2,
|
|
19419
|
+
className: "cursor-pointer outline-none",
|
|
19420
|
+
onMouseEnter: () => setActiveIndex(index),
|
|
19421
|
+
onMouseLeave: () => setActiveIndex(null),
|
|
19422
|
+
onClick: () => onSelect?.(item),
|
|
19423
|
+
style: { originX: "0px", originY: "0px" },
|
|
19424
|
+
children: [
|
|
19425
|
+
/* @__PURE__ */ jsx(
|
|
19426
|
+
"path",
|
|
19427
|
+
{
|
|
19428
|
+
d: slicePath(
|
|
19429
|
+
index,
|
|
19430
|
+
menuItems.length,
|
|
19431
|
+
wedgeOuterRadius,
|
|
19432
|
+
wedgeInnerRadius
|
|
19433
|
+
),
|
|
19434
|
+
className: cn(
|
|
19435
|
+
"transition-colors duration-200 stroke-1",
|
|
19436
|
+
isActive ? "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
|
|
19437
|
+
)
|
|
19438
|
+
}
|
|
19439
|
+
),
|
|
19440
|
+
/* @__PURE__ */ jsx(
|
|
19441
|
+
"foreignObject",
|
|
19442
|
+
{
|
|
19443
|
+
x: iconX - ICON_BOX / 2,
|
|
19444
|
+
y: iconY - ICON_BOX / 2,
|
|
19445
|
+
width: ICON_BOX,
|
|
19446
|
+
height: ICON_BOX,
|
|
19447
|
+
className: "pointer-events-none",
|
|
19448
|
+
children: /* @__PURE__ */ jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
19449
|
+
Icon,
|
|
19450
|
+
{
|
|
19451
|
+
size: iconSize,
|
|
19452
|
+
weight: isActive ? "fill" : "regular",
|
|
19453
|
+
className: cn(
|
|
19454
|
+
"transition-all duration-200",
|
|
19455
|
+
isActive ? "text-primary-foreground " : "text-muted-foreground"
|
|
19456
|
+
)
|
|
19457
|
+
}
|
|
19458
|
+
) })
|
|
19459
|
+
}
|
|
19460
|
+
)
|
|
19461
|
+
]
|
|
19462
|
+
},
|
|
19463
|
+
item.id
|
|
19464
|
+
);
|
|
19465
|
+
})
|
|
19466
|
+
]
|
|
19467
|
+
}
|
|
19468
|
+
)
|
|
19469
|
+
]
|
|
19470
|
+
}
|
|
19471
|
+
) })
|
|
19472
|
+
}
|
|
19473
|
+
)
|
|
19474
|
+
] });
|
|
18740
19475
|
}
|
|
18741
19476
|
|
|
18742
|
-
export { AddButton, Agenda, AgendaDaysToShow, AgendaDaysToShowAgenda, AgendaView, AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarCombobox, AvatarFallbackBase, AvatarImageBase, BackButton, Badge, BreadcrumbBase, BreadcrumbEllipsisBase, BreadcrumbItemBase, BreadcrumbLinkBase, BreadcrumbListBase, BreadcrumbPageBase, BreadcrumbSeparatorBase, Brush_default as Brush, ButtonBase, ButtonGroupBase, CENTER_INDEX, CalendarBase, CalendarDndProvider, CalendarDndProviderAgenda, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CarouselBase, ChangeButton, Chart_default as Chart, ChartControls, ChartHeader, ChartTotalLegend_default as ChartTotalLegend, CheckButton, CheckboxBase, CheckboxTree, CloseAllButton_default as CloseAllButton, CloseButton, CodeBlock, CollapsibleBase, CollapsibleContentBase, CollapsibleTriggerBase, Combobox, CommandBase, CommandDebouncedInputBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, ContextMenuBase, ContextMenuCheckboxItemBase, ContextMenuContentBase, ContextMenuGroupBase, ContextMenuItemBase, ContextMenuLabelBase, ContextMenuPortalBase, ContextMenuRadioGroupBase, ContextMenuRadioItemBase, ContextMenuSeparatorBase, ContextMenuShortcutBase, ContextMenuSubBase, ContextMenuSubContentBase, ContextMenuSubTriggerBase, ContextMenuTriggerBase, CopyButton, DateTimePicker, DayView, DayViewAgenda, DebouncedInput, DefaultEndHour, DefaultEndHourAgenda, DefaultStartHour, DefaultStartHourAgenda, DestructiveDialog, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DownloadButton, DraggableEvent2 as DraggableEvent, DraggableTooltip_default as DraggableTooltip, DrawerBase, DrawerCloseBase, DrawerContentBase, DrawerDescriptionBase, DrawerFooterBase, DrawerHeaderBase, DrawerOverlayBase, DrawerPortalBase, DrawerTitleBase, DrawerTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, DroppableCell, DroppableCellAgenda, EditButton, EndHour, EndHourAgenda, ErrorMessage_default as ErrorMessage, EventAgenda, EventCalendar, EventDialog, EventGap, EventGapAgenda, EventHeight, EventHeightAgenda, EventItem, EventItemAgenda, EventsPopup, FavoriteButton, FileUploader, FilterButton, HideButton, Highlights_default as Highlights, HorizontalChart_default as HorizontalChart, HorizontalLegend_default as HorizontalLegend, HoverCardBase, HoverCardContentBase, HoverCardTriggerBase, ITEM_HEIGHT, InputBase, InputOTPBase, InputOTPGroupBase, InputOTPSeparatorBase, InputOTPSlotBase, LabelBase_default as LabelBase, Leaderboard, LikeButton, LoadingBase, LockButton, ModalBase, ModalCloseBase, ModalContentBase, ModalDescriptionBase, ModalFooterBase, ModalHeaderBase, ModalOverlayBase, ModalPortalBase, ModalTitleBase, ModalTriggerBase, ModeToggleBase, MonthView, MonthViewAgenda, MoreButton, MultiCombobox, MultiSelect, MultiSelectBase, MultiSelectContentBase, MultiSelectGroupBase, MultiSelectItemBase, MultiSelectSeparatorBase, MultiSelectTriggerBase, MultiSelectValueBase, NavigationMenuBase, NavigationMenuContentBase, NavigationMenuIndicatorBase, NavigationMenuItemBase, NavigationMenuLinkBase, NavigationMenuListBase, NavigationMenuTriggerBase, NavigationMenuViewportBase, NoData_default as NoData, NotificationButton, NumericInput, PeriodsDropdown_default as PeriodsDropdown, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, ProgressCirclesBase, ProgressPanelsBase, ProgressSegmentsBase, RangePicker, RefreshButton, SaveButton, ScrollAreaBase, ScrollBarBase, SearchButton, Select, SelectBase, SelectContentBase, SelectEmpty, SelectGroupBase, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SettingsButton, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, ShowOnly_default as ShowOnly, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, StartHour, StartHourAgenda, StatusIndicator, SwitchBase, SystemTooltip_default as SystemTooltip, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, ThemeProviderBase, TimePicker, TimePickerInput, TimeSeries_default as TimeSeries, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipSimple_default as TooltipSimple, TooltipTriggerBase, TooltipWithTotal_default as TooltipWithTotal, UndatedEvents, UniversalTooltipRenderer, UnlockButton, UploadButton, UseSideBarBase, VISIBLE_ITEMS, ViewButton, VisibilityButton, WeekCellsHeight, WeekCellsHeightAgenda, WeekView, WeekViewAgenda, adaptDataForTooltip, addHoursToDate, addHoursToDateAgenda, addMinutesToDateAgenda, badgeVariants, buttonVariantsBase, compactTick, computeChartWidth, computeNiceMax, computeYAxisTickWidth, convert12HourTo24Hour, createValueFormatter, createYTickFormatter, detectDataFields, detectXAxis, display12HourValue, formatFieldName, formatLinePercentage, generateAdditionalColors, generateColorMap, getAgendaEventsForDay, getAgendaEventsForDayAgenda, getAllEventsForDay, getAllEventsForDayAgenda, getArrowByType, getBorderRadiusClasses, getBorderRadiusClassesAgenda, getDateByType, getEventColorClasses, getEventColorClassesAgenda, getEventEndDate, getEventStartDate, getEventsForDay, getEventsForDayAgenda, getItems, getMaxDataValue, getMinDataValue, getSpanningEventsForDay, getSpanningEventsForDayAgenda, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinuteOrSecond, getValidArrowNumber, getValidHour, getValidMinuteOrSecond, getValidNumber, isMultiDayEvent, isMultiDayEventAgenda, isValid12Hour, isValidHour, isValidMinuteOrSecond, niceCeil, normalizeAttendDate, processNeo4jData, renderInsideBarLabel, pillLabelRenderer_default as renderPillLabel, resolveChartMargins, resolveContainerPaddingLeft, set12Hours, setDateByType, setHours, setMinutes, setSeconds, sortEvents, sortEventsAgenda, toast, useBiaxial, useCalendarDnd, useCalendarDndAgenda, useChartClick, useChartDimensions, useChartHighlights, useChartLayout, useChartMinMax, useChartTooltips, useCurrentTimeIndicator, useCurrentTimeIndicatorAgenda, useDrag, useEventVisibility, useEventVisibilityAgenda, useIsMobile, useOpenTooltipForPeriod, useProcessedData, useSeriesOpacity, useTheme, useTimeSeriesRange, visualForItem };
|
|
19477
|
+
export { AddButton, Agenda, AgendaDaysToShow, AgendaDaysToShowAgenda, AgendaView, AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarCombobox, AvatarFallbackBase, AvatarImageBase, BackButton, Badge, BreadcrumbBase, BreadcrumbEllipsisBase, BreadcrumbItemBase, BreadcrumbLinkBase, BreadcrumbListBase, BreadcrumbPageBase, BreadcrumbSeparatorBase, Brush_default as Brush, ButtonBase, ButtonGroupBase, CENTER_INDEX, CalendarBase, CalendarDndProvider, CalendarDndProviderAgenda, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CarouselBase, ChangeButton, Chart_default as Chart, ChartControls, ChartHeader, ChartTotalLegend_default as ChartTotalLegend, CheckButton, CheckboxBase, CheckboxTree, CloseAllButton_default as CloseAllButton, CloseButton, CodeBlock, CollapsibleBase, CollapsibleContentBase, CollapsibleTriggerBase, Combobox, CommandBase, CommandDebouncedInputBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, ContextMenuBase, ContextMenuCheckboxItemBase, ContextMenuContentBase, ContextMenuGroupBase, ContextMenuItemBase, ContextMenuLabelBase, ContextMenuPortalBase, ContextMenuRadioGroupBase, ContextMenuRadioItemBase, ContextMenuSeparatorBase, ContextMenuShortcutBase, ContextMenuSubBase, ContextMenuSubContentBase, ContextMenuSubTriggerBase, ContextMenuTriggerBase, CopyButton, DateTimePicker, DayView, DayViewAgenda, DebouncedInput, DefaultEndHour, DefaultEndHourAgenda, DefaultStartHour, DefaultStartHourAgenda, DestructiveDialog, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DownloadButton, DraggableEvent2 as DraggableEvent, DraggableTooltip_default as DraggableTooltip, DrawerBase, DrawerCloseBase, DrawerContentBase, DrawerDescriptionBase, DrawerFooterBase, DrawerHeaderBase, DrawerOverlayBase, DrawerPortalBase, DrawerTitleBase, DrawerTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, DroppableCell, DroppableCellAgenda, EditButton, EndHour, EndHourAgenda, ErrorMessage_default as ErrorMessage, EventAgenda, EventCalendar, EventDialog, EventGap, EventGapAgenda, EventHeight, EventHeightAgenda, EventItem, EventItemAgenda, EventsPopup, FavoriteButton, FileUploader, FilterButton, HideButton, Highlights_default as Highlights, HorizontalChart_default as HorizontalChart, HorizontalLegend_default as HorizontalLegend, HoverCardBase, HoverCardContentBase, HoverCardTriggerBase, ITEM_HEIGHT, InputBase, InputOTPBase, InputOTPGroupBase, InputOTPSeparatorBase, InputOTPSlotBase, LabelBase_default as LabelBase, Leaderboard, LikeButton, LoadingBase, LockButton, ModalBase, ModalCloseBase, ModalContentBase, ModalDescriptionBase, ModalFooterBase, ModalHeaderBase, ModalOverlayBase, ModalPortalBase, ModalTitleBase, ModalTriggerBase, ModeToggleBase, MonthView, MonthViewAgenda, MoreButton, MultiCombobox, MultiSelect, MultiSelectBase, MultiSelectContentBase, MultiSelectGroupBase, MultiSelectItemBase, MultiSelectSeparatorBase, MultiSelectTriggerBase, MultiSelectValueBase, NavigationMenuBase, NavigationMenuContentBase, NavigationMenuIndicatorBase, NavigationMenuItemBase, NavigationMenuLinkBase, NavigationMenuListBase, NavigationMenuTriggerBase, NavigationMenuViewportBase, NoData_default as NoData, NotificationButton, NumericInput, PeriodsDropdown_default as PeriodsDropdown, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, ProgressCirclesBase, ProgressPanelsBase, ProgressSegmentsBase, RadialMenu, RangePicker, RefreshButton, SaveButton, ScrollAreaBase, ScrollBarBase, SearchButton, Select, SelectBase, SelectContentBase, SelectEmpty, SelectGroupBase, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SettingsButton, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, ShowOnly_default as ShowOnly, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, StartHour, StartHourAgenda, StatusIndicator, SwitchBase, SystemTooltip_default as SystemTooltip, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, ThemeProviderBase, TimePicker, TimePickerInput, TimeSeries_default as TimeSeries, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipSimple_default as TooltipSimple, TooltipTriggerBase, TooltipWithTotal_default as TooltipWithTotal, UndatedEvents, UniversalTooltipRenderer, UnlockButton, UploadButton, UseSideBarBase, VISIBLE_ITEMS, ViewButton, VisibilityButton, WeekCellsHeight, WeekCellsHeightAgenda, WeekView, WeekViewAgenda, adaptDataForTooltip, addHoursToDate, addHoursToDateAgenda, addMinutesToDateAgenda, badgeVariants, buttonVariantsBase, compactTick, computeChartWidth, computeNiceMax, computeYAxisTickWidth, convert12HourTo24Hour, createValueFormatter, createYTickFormatter, detectDataFields, detectXAxis, display12HourValue, formatFieldName, formatLinePercentage, generateAdditionalColors, generateColorMap, getAgendaEventsForDay, getAgendaEventsForDayAgenda, getAllEventsForDay, getAllEventsForDayAgenda, getArrowByType, getBorderRadiusClasses, getBorderRadiusClassesAgenda, getDateByType, getEventColorClasses, getEventColorClassesAgenda, getEventEndDate, getEventStartDate, getEventsForDay, getEventsForDayAgenda, getItems, getMaxDataValue, getMinDataValue, getSpanningEventsForDay, getSpanningEventsForDayAgenda, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinuteOrSecond, getValidArrowNumber, getValidHour, getValidMinuteOrSecond, getValidNumber, isMultiDayEvent, isMultiDayEventAgenda, isValid12Hour, isValidHour, isValidMinuteOrSecond, niceCeil, normalizeAttendDate, processNeo4jData, renderInsideBarLabel, pillLabelRenderer_default as renderPillLabel, resolveChartMargins, resolveContainerPaddingLeft, set12Hours, setDateByType, setHours, setMinutes, setSeconds, sortEvents, sortEventsAgenda, toast, useBiaxial, useCalendarDnd, useCalendarDndAgenda, useChartClick, useChartDimensions, useChartHighlights, useChartLayout, useChartMinMax, useChartTooltips, useCurrentTimeIndicator, useCurrentTimeIndicatorAgenda, useDrag, useEventVisibility, useEventVisibilityAgenda, useIsMobile, useOpenTooltipForPeriod, useProcessedData, useSeriesOpacity, useTheme, useTimeSeriesRange, visualForItem };
|