@mlw-packages/react-components 1.9.11 → 1.9.13

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.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, useSpring, useTransform, animate } from 'framer-motion';
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: animate2 = true,
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: animate2 ? { opacity: 0, y: -10 } : false,
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: animate2 ? { opacity: 0, y: -10 } : false,
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: animate2 ? { opacity: 0, y: 10 } : false,
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: animate2 ? { opacity: 0, x: -20 } : false,
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: animate2 ? index * 0.05 : 0,
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 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
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: {
@@ -14620,7 +14621,8 @@ var DraggableTooltipComponent = ({
14620
14621
  toggleHighlight,
14621
14622
  showOnlyHighlighted,
14622
14623
  valueFormatter,
14623
- categoryFormatter
14624
+ categoryFormatter,
14625
+ seriesTypeMap
14624
14626
  }) => {
14625
14627
  const visibleKeys = useMemo(
14626
14628
  () => showOnlyHighlighted && highlightedSeries && highlightedSeries.size > 0 ? dataKeys.filter((k) => highlightedSeries.has(k)) : dataKeys,
@@ -14631,7 +14633,9 @@ var DraggableTooltipComponent = ({
14631
14633
  const numeric = visibleKeys2.map((k) => data2[k]).filter((v) => typeof v === "number");
14632
14634
  return numeric.reduce((s, v) => s + (v || 0), 0);
14633
14635
  }, [data2, visibleKeys2]);
14634
- const defaultTotalFormatted = total.toLocaleString("pt-BR");
14636
+ const defaultTotalFormatted = total.toLocaleString("pt-BR", {
14637
+ maximumFractionDigits: 0
14638
+ });
14635
14639
  const displayTotal = localformatter ? localformatter({
14636
14640
  value: total,
14637
14641
  formattedValue: defaultTotalFormatted,
@@ -15086,7 +15090,13 @@ var DraggableTooltipComponent = ({
15086
15090
  0
15087
15091
  );
15088
15092
  const val = typeof value === "number" ? value : Number(value) || 0;
15089
- const defaultFormatted = val.toLocaleString("pt-BR");
15093
+ const isLine = seriesTypeMap?.[key] === "line";
15094
+ const defaultFormatted = isLine ? `${(val / 100).toLocaleString("pt-BR", {
15095
+ minimumFractionDigits: 2,
15096
+ maximumFractionDigits: 2
15097
+ })}%` : val.toLocaleString("pt-BR", {
15098
+ maximumFractionDigits: 0
15099
+ });
15090
15100
  const displayValue = valueFormatter ? valueFormatter({
15091
15101
  value,
15092
15102
  formattedValue: defaultFormatted,
@@ -15141,7 +15151,7 @@ var DraggableTooltipComponent = ({
15141
15151
  children: displayValue
15142
15152
  }
15143
15153
  ),
15144
- /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
15154
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%` : "-" })
15145
15155
  ] })
15146
15156
  ] }),
15147
15157
  /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -15205,7 +15215,8 @@ var RechartTooltipWithTotal = ({
15205
15215
  valueFormatter,
15206
15216
  categoryFormatter,
15207
15217
  yAxisMap,
15208
- isBiaxial = false
15218
+ isBiaxial = false,
15219
+ seriesTypeMap
15209
15220
  }) => {
15210
15221
  if (!active || !payload || payload.length === 0) return null;
15211
15222
  const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -15214,18 +15225,9 @@ var RechartTooltipWithTotal = ({
15214
15225
  );
15215
15226
  const total = numeric.reduce((sum, p) => sum + (p.value || 0), 0);
15216
15227
  const isTotalNegative = total < 0;
15217
- const defaultTotalFormatted = (() => {
15218
- try {
15219
- if (Math.abs(total) < 1e3) {
15220
- return new Intl.NumberFormat("pt-BR", {
15221
- minimumFractionDigits: 2,
15222
- maximumFractionDigits: 2
15223
- }).format(total);
15224
- }
15225
- } catch {
15226
- }
15227
- return total.toLocaleString("pt-BR");
15228
- })();
15228
+ const defaultTotalFormatted = total.toLocaleString("pt-BR", {
15229
+ maximumFractionDigits: 0
15230
+ });
15229
15231
  const displayTotal = valueFormatter ? valueFormatter({
15230
15232
  value: total,
15231
15233
  formattedValue: defaultTotalFormatted,
@@ -15277,18 +15279,13 @@ var RechartTooltipWithTotal = ({
15277
15279
  const pct = absDenominator > 0 ? Math.abs(value) / absDenominator * 100 : 0;
15278
15280
  const baseColor = finalColors[entry.dataKey] || entry.color || "#999";
15279
15281
  const isNeg = value < 0;
15280
- const defaultFormatted = (() => {
15281
- try {
15282
- if (Math.abs(value) < 1e3) {
15283
- return new Intl.NumberFormat("pt-BR", {
15284
- minimumFractionDigits: 2,
15285
- maximumFractionDigits: 2
15286
- }).format(value);
15287
- }
15288
- } catch {
15289
- }
15290
- return value.toLocaleString("pt-BR");
15291
- })();
15282
+ const isLine = seriesTypeMap?.[entry.dataKey] === "line";
15283
+ const defaultFormatted = isLine ? `${(value / 100).toLocaleString("pt-BR", {
15284
+ minimumFractionDigits: 2,
15285
+ maximumFractionDigits: 2
15286
+ })}%` : value.toLocaleString("pt-BR", {
15287
+ maximumFractionDigits: 0
15288
+ });
15292
15289
  const displayValue = valueFormatter ? valueFormatter({
15293
15290
  value: entry.value,
15294
15291
  formattedValue: defaultFormatted,
@@ -15327,8 +15324,14 @@ var RechartTooltipWithTotal = ({
15327
15324
  const axis = normalize(yAxisMap[entry.dataKey]);
15328
15325
  const denom = axisDenominators[axis] || 0;
15329
15326
  const p = denom > 0 ? Math.abs(value) / denom * 100 : 0;
15330
- return denom > 0 ? `${p.toFixed(1)}%` : "-";
15331
- })() : absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
15327
+ return denom > 0 ? `${p.toLocaleString("pt-BR", {
15328
+ minimumFractionDigits: 2,
15329
+ maximumFractionDigits: 2
15330
+ })}%` : "-";
15331
+ })() : absDenominator > 0 ? `${pct.toLocaleString("pt-BR", {
15332
+ minimumFractionDigits: 2,
15333
+ maximumFractionDigits: 2
15334
+ })}%` : "-" })
15332
15335
  ] })
15333
15336
  ] }),
15334
15337
  /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -15357,7 +15360,8 @@ var TooltipSimple = ({
15357
15360
  valueFormatter,
15358
15361
  categoryFormatter,
15359
15362
  yAxisMap,
15360
- isBiaxial = false
15363
+ isBiaxial = false,
15364
+ seriesTypeMap
15361
15365
  }) => {
15362
15366
  if (!active || !payload || payload.length === 0) return null;
15363
15367
  const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -15390,18 +15394,13 @@ var TooltipSimple = ({
15390
15394
  );
15391
15395
  pct = axisSum > 0 ? Math.abs(value) / axisSum * 100 : 0;
15392
15396
  }
15393
- const defaultFormatted = (() => {
15394
- try {
15395
- if (Math.abs(value) < 1e3) {
15396
- return new Intl.NumberFormat("pt-BR", {
15397
- minimumFractionDigits: 2,
15398
- maximumFractionDigits: 2
15399
- }).format(value);
15400
- }
15401
- } catch {
15402
- }
15403
- return value.toLocaleString("pt-BR");
15404
- })();
15397
+ const isLine = seriesTypeMap?.[entry.dataKey] === "line";
15398
+ const defaultFormatted = isLine ? `${(value / 100).toLocaleString("pt-BR", {
15399
+ minimumFractionDigits: 2,
15400
+ maximumFractionDigits: 2
15401
+ })}%` : value.toLocaleString("pt-BR", {
15402
+ maximumFractionDigits: 0
15403
+ });
15405
15404
  const displayValue = valueFormatter ? valueFormatter({
15406
15405
  value: entry.value,
15407
15406
  formattedValue: defaultFormatted,
@@ -15432,7 +15431,10 @@ var TooltipSimple = ({
15432
15431
  children: displayValue
15433
15432
  }
15434
15433
  ),
15435
- isBiaxial ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toFixed(1)}%` : "-" }) : null
15434
+ isBiaxial ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toLocaleString("pt-BR", {
15435
+ minimumFractionDigits: 2,
15436
+ maximumFractionDigits: 2
15437
+ })}%` : "-" }) : null
15436
15438
  ] }) })
15437
15439
  ]
15438
15440
  },
@@ -16477,16 +16479,16 @@ var NoData = ({
16477
16479
  "div",
16478
16480
  {
16479
16481
  className: cn(
16480
- "rounded-xl bg-card relative overflow-hidden w-full border border-border/50 shadow-sm h-full",
16482
+ "rounded-xl bg-card relative overflow-hidden w-full shadow-sm h-full",
16481
16483
  className
16482
16484
  ),
16483
16485
  style: {
16484
16486
  "--pl": `${paddingLeft}px`,
16485
- "--svg-h": typeof height === "number" ? `${height}px` : String(height)
16487
+ ...typeof height === "number" ? { height } : {}
16486
16488
  },
16487
16489
  role: "img",
16488
16490
  "aria-label": message,
16489
- children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[900px] relative", children: [
16491
+ 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
16492
  /* @__PURE__ */ jsxs(
16491
16493
  "svg",
16492
16494
  {
@@ -17221,11 +17223,30 @@ function useOpenTooltipForPeriod({
17221
17223
  );
17222
17224
  }
17223
17225
  var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
17226
+ function ChartWrapper({
17227
+ className,
17228
+ children,
17229
+ wrapperRef
17230
+ }) {
17231
+ const cls = className ?? "";
17232
+ const hasExplicitSizing = /\bh-/.test(cls) || /\bflex-1\b/.test(cls);
17233
+ return /* @__PURE__ */ jsx(
17234
+ "div",
17235
+ {
17236
+ ref: wrapperRef,
17237
+ className: cn(
17238
+ "w-full overflow-hidden min-w-0 rounded-lg border-border",
17239
+ !hasExplicitSizing && "h-[550px]",
17240
+ className
17241
+ ),
17242
+ children
17243
+ }
17244
+ );
17245
+ }
17224
17246
  var Chart = ({
17225
17247
  data,
17226
17248
  series,
17227
17249
  className,
17228
- height = 350,
17229
17250
  width = "100%",
17230
17251
  colors: colors2 = DEFAULT_COLORS2,
17231
17252
  gridColor,
@@ -17257,19 +17278,7 @@ var Chart = ({
17257
17278
  timeSeries,
17258
17279
  timeSeriesLegend,
17259
17280
  customLegend
17260
- // horizontal removido
17261
- // orderBy removido
17262
17281
  }) => {
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
17282
  const { xAxisConfig, mapperConfig } = useMemo(() => {
17274
17283
  return fnSmartConfig({ xAxis, data, labelMap });
17275
17284
  }, [data, xAxis, labelMap]);
@@ -17413,417 +17422,453 @@ var Chart = ({
17413
17422
  maxTooltips,
17414
17423
  effectiveChartWidth
17415
17424
  });
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;
17425
+ const seriesTypeMap = useMemo(() => {
17426
+ const map = {};
17427
+ seriesOrder.forEach((s) => {
17428
+ map[s.key] = s.type;
17429
+ });
17430
+ return map;
17431
+ }, [seriesOrder]);
17420
17432
  if (!data && !isLoading) return null;
17421
17433
  if (isLoading) {
17422
- return /* @__PURE__ */ jsx(
17434
+ return /* @__PURE__ */ jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsx(
17423
17435
  NoData_default,
17424
17436
  {
17425
17437
  title,
17426
17438
  isLoading: true,
17427
17439
  loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
17428
17440
  paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
17429
- height
17441
+ height: "100%"
17430
17442
  }
17431
- );
17443
+ ) });
17432
17444
  }
17433
17445
  if (Array.isArray(data) && data.length === 0) {
17434
- return /* @__PURE__ */ jsx(
17446
+ return /* @__PURE__ */ jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsx(
17435
17447
  NoData_default,
17436
17448
  {
17437
17449
  title,
17438
17450
  paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
17439
- height
17451
+ height: "100%"
17440
17452
  }
17441
- );
17453
+ ) });
17442
17454
  }
17443
- return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: [
17444
- /* @__PURE__ */ jsxs(
17445
- "div",
17446
- {
17447
- className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1",
17448
- style: usesFullHeight ? { height: "100%" } : void 0,
17449
- children: [
17450
- /* @__PURE__ */ jsx(
17451
- ChartHeader,
17452
- {
17453
- title,
17454
- titlePosition,
17455
- HORIZONTAL_PADDING_CLASS,
17456
- customLegend,
17457
- data,
17458
- allKeys,
17459
- processedData,
17460
- finalColors,
17461
- mapperConfig,
17462
- finalValueFormatter,
17463
- formatBR
17464
- }
17455
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
17456
+ /* @__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: [
17457
+ /* @__PURE__ */ jsx(
17458
+ ChartHeader,
17459
+ {
17460
+ title,
17461
+ titlePosition,
17462
+ HORIZONTAL_PADDING_CLASS,
17463
+ customLegend,
17464
+ data,
17465
+ allKeys,
17466
+ processedData,
17467
+ finalColors,
17468
+ mapperConfig,
17469
+ finalValueFormatter,
17470
+ formatBR
17471
+ }
17472
+ ),
17473
+ allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsx(
17474
+ ChartControls,
17475
+ {
17476
+ allKeys,
17477
+ mapperConfig,
17478
+ finalColors,
17479
+ highlightedSeries,
17480
+ toggleHighlight,
17481
+ showOnlyHighlighted,
17482
+ setShowOnlyHighlighted,
17483
+ highlightedSeriesSize: highlightedSeries.size,
17484
+ clearHighlights,
17485
+ enableHighlights,
17486
+ enableShowOnly,
17487
+ enablePeriodsDropdown,
17488
+ enableDraggableTooltips,
17489
+ processedData,
17490
+ onOpenPeriod: openTooltipForPeriod,
17491
+ rightOffset: finalChartRightMargin,
17492
+ activePeriods,
17493
+ containerClass: cn("flex items-center gap-2", teste),
17494
+ containerWidth: chartInnerWidth
17495
+ }
17496
+ ),
17497
+ !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
17498
+ "div",
17499
+ {
17500
+ className: cn(
17501
+ "w-full flex justify-end mb-2",
17502
+ HORIZONTAL_PADDING_CLASS
17465
17503
  ),
17466
- allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsx(
17467
- ChartControls,
17504
+ style: {
17505
+ paddingRight: `${finalChartRightMargin}px`,
17506
+ maxWidth: `${chartInnerWidth}px`
17507
+ },
17508
+ children: /* @__PURE__ */ jsx(
17509
+ PeriodsDropdown_default,
17468
17510
  {
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
17511
  processedData,
17483
17512
  onOpenPeriod: openTooltipForPeriod,
17484
- rightOffset: finalChartRightMargin,
17485
- activePeriods,
17486
- containerClass: cn("flex items-center gap-2", teste),
17487
- containerWidth: chartInnerWidth
17513
+ rightOffset: finalChartRightMargin
17488
17514
  }
17489
- ),
17490
- !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
17491
- "div",
17492
- {
17493
- className: cn(
17494
- "w-full flex justify-end mb-2",
17495
- HORIZONTAL_PADDING_CLASS
17496
- ),
17497
- style: {
17498
- paddingRight: `${finalChartRightMargin}px`,
17499
- maxWidth: `${chartInnerWidth}px`
17500
- },
17501
- children: /* @__PURE__ */ jsx(
17502
- PeriodsDropdown_default,
17515
+ )
17516
+ }
17517
+ ),
17518
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
17519
+ ComposedChart,
17520
+ {
17521
+ data: processedData,
17522
+ margin: {
17523
+ top: 10,
17524
+ right: finalChartRightMargin,
17525
+ left: finalChartLeftMargin,
17526
+ bottom: 10
17527
+ },
17528
+ onClick: handleChartClick,
17529
+ children: [
17530
+ /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
17531
+ const key = s.key;
17532
+ const color = finalColors[key];
17533
+ return /* @__PURE__ */ jsxs(
17534
+ "linearGradient",
17503
17535
  {
17504
- processedData,
17505
- onOpenPeriod: openTooltipForPeriod,
17506
- rightOffset: finalChartRightMargin
17507
- }
17508
- )
17509
- }
17510
- ),
17511
- /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: responsiveHeight, children: /* @__PURE__ */ jsxs(
17512
- ComposedChart,
17513
- {
17514
- data: processedData,
17515
- margin: {
17516
- top: 10,
17517
- right: finalChartRightMargin,
17518
- left: finalChartLeftMargin,
17519
- bottom: bottomMargin
17520
- },
17521
- onClick: handleChartClick,
17522
- children: [
17523
- /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
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
17536
+ id: `gradient-${key}`,
17537
+ x1: "0",
17538
+ y1: "0",
17539
+ x2: "0",
17540
+ y2: "0.8",
17541
+ children: [
17542
+ /* @__PURE__ */ jsx(
17543
+ "stop",
17544
+ {
17545
+ offset: "0%",
17546
+ stopColor: color,
17547
+ stopOpacity: 0.8
17573
17548
  }
17574
- } : void 0
17549
+ ),
17550
+ /* @__PURE__ */ jsx(
17551
+ "stop",
17552
+ {
17553
+ offset: "90%",
17554
+ stopColor: color,
17555
+ stopOpacity: 0.1
17556
+ }
17557
+ )
17558
+ ]
17559
+ },
17560
+ `gradient-${key}`
17561
+ );
17562
+ }) }),
17563
+ showGrid && /* @__PURE__ */ jsx(
17564
+ CartesianGrid,
17565
+ {
17566
+ strokeDasharray: "3 3",
17567
+ stroke: gridColor || "hsl(var(--muted-foreground))",
17568
+ opacity: 0.5
17569
+ }
17570
+ ),
17571
+ /* @__PURE__ */ jsx(
17572
+ XAxis,
17573
+ {
17574
+ dataKey: xAxisConfig.dataKey,
17575
+ stroke: "hsl(var(--muted-foreground))",
17576
+ fontSize: 12,
17577
+ tickLine: false,
17578
+ axisLine: false,
17579
+ tickFormatter: (value) => {
17580
+ if (categoryFormatter)
17581
+ return categoryFormatter(value);
17582
+ if (xAxisConfig.valueFormatter)
17583
+ return xAxisConfig.valueFormatter(
17584
+ value
17585
+ );
17586
+ return String(value ?? "");
17587
+ },
17588
+ label: xAxisLabel ? {
17589
+ value: xAxisLabel,
17590
+ position: "insideBottomRight",
17591
+ offset: -5,
17592
+ style: {
17593
+ fontSize: 12,
17594
+ fill: "hsl(var(--muted-foreground))",
17595
+ fontWeight: 500
17575
17596
  }
17576
- ),
17577
- /* @__PURE__ */ jsx(
17578
- YAxis,
17579
- {
17580
- yAxisId: "left",
17581
- width: yAxisTickWidth,
17582
- stroke: "hsl(var(--muted-foreground))",
17597
+ } : void 0
17598
+ }
17599
+ ),
17600
+ /* @__PURE__ */ jsx(
17601
+ YAxis,
17602
+ {
17603
+ yAxisId: "left",
17604
+ width: yAxisTickWidth,
17605
+ stroke: "hsl(var(--muted-foreground))",
17606
+ fontSize: 12,
17607
+ tickLine: false,
17608
+ axisLine: false,
17609
+ tickFormatter: yTickFormatter,
17610
+ domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17611
+ tickCount: 6,
17612
+ label: yAxisLabel ? {
17613
+ value: yAxisLabel,
17614
+ angle: -90,
17615
+ position: "left",
17616
+ dx: leftYAxisLabelDx,
17617
+ style: {
17583
17618
  fontSize: 12,
17584
- tickLine: false,
17585
- axisLine: false,
17586
- tickFormatter: yTickFormatter,
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
17619
+ fill: "hsl(var(--muted-foreground))",
17620
+ fontWeight: 500,
17621
+ textAnchor: "middle"
17601
17622
  }
17602
- ),
17603
- rightKeys.length > 0 && (() => {
17604
- const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17605
- biaxialConfigNormalized,
17606
- yTickFormatter,
17607
- finalColors
17608
- );
17609
- return /* @__PURE__ */ jsx(
17610
- YAxis,
17611
- {
17612
- yAxisId: "right",
17613
- width: finalChartRightMargin,
17614
- orientation: "right",
17615
- stroke: "hsl(var(--muted-foreground))",
17623
+ } : void 0
17624
+ }
17625
+ ),
17626
+ rightKeys.length > 0 && (() => {
17627
+ const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17628
+ biaxialConfigNormalized,
17629
+ yTickFormatter,
17630
+ finalColors
17631
+ );
17632
+ return /* @__PURE__ */ jsx(
17633
+ YAxis,
17634
+ {
17635
+ yAxisId: "right",
17636
+ width: finalChartRightMargin,
17637
+ orientation: "right",
17638
+ stroke: "hsl(var(--muted-foreground))",
17639
+ fontSize: 12,
17640
+ tickLine: false,
17641
+ axisLine: false,
17642
+ tick: { fill: rightAxisColor },
17643
+ tickFormatter: rightTickFormatter,
17644
+ domain: [Math.min(minRightDataValue, 0), niceMaxRight],
17645
+ tickCount: 6,
17646
+ label: biaxialConfigNormalized?.label ? {
17647
+ value: biaxialConfigNormalized.label,
17648
+ angle: -90,
17649
+ position: "right",
17650
+ dx: rightYAxisLabelDx,
17651
+ style: {
17616
17652
  fontSize: 12,
17617
- tickLine: false,
17618
- axisLine: false,
17619
- tick: { fill: rightAxisColor },
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
17653
+ fill: "hsl(var(--muted-foreground))",
17654
+ fontWeight: 500,
17655
+ textAnchor: "middle"
17635
17656
  }
17636
- );
17637
- })(),
17638
- showTooltip && /* @__PURE__ */ jsx(
17639
- Tooltip,
17657
+ } : void 0
17658
+ }
17659
+ );
17660
+ })(),
17661
+ showTooltip && /* @__PURE__ */ jsx(
17662
+ Tooltip,
17663
+ {
17664
+ content: showTooltipTotal ? /* @__PURE__ */ jsx(
17665
+ TooltipWithTotal_default,
17640
17666
  {
17641
- content: showTooltipTotal ? /* @__PURE__ */ jsx(
17642
- TooltipWithTotal_default,
17643
- {
17644
- finalColors,
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 }
17667
+ finalColors,
17668
+ valueFormatter: finalValueFormatter,
17669
+ categoryFormatter,
17670
+ periodLabel,
17671
+ seriesTypeMap
17659
17672
  }
17660
- ),
17661
- showLegend && /* @__PURE__ */ jsx(
17662
- Legend,
17673
+ ) : /* @__PURE__ */ jsx(
17674
+ TooltipSimple_default,
17663
17675
  {
17664
- iconSize: 12,
17665
- formatter: (value) => {
17666
- return /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17667
- value,
17668
- mapperConfig,
17669
- labelMap,
17670
- legendUppercase
17671
- ) });
17672
- }
17676
+ finalColors,
17677
+ valueFormatter: finalValueFormatter,
17678
+ categoryFormatter,
17679
+ periodLabel,
17680
+ seriesTypeMap
17673
17681
  }
17674
17682
  ),
17675
- seriesOrder.map((s) => {
17676
- if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17677
- return null;
17678
- const { label, color, key } = fnBuildConfigData(
17679
- s,
17680
- mapperConfig,
17681
- labelMap,
17682
- finalColors,
17683
- rightKeys,
17684
- biaxialConfigNormalized
17685
- );
17686
- if (s.type === "bar") {
17687
- return /* @__PURE__ */ jsx(
17688
- Bar,
17683
+ cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
17684
+ }
17685
+ ),
17686
+ showLegend && /* @__PURE__ */ jsx(
17687
+ Legend,
17688
+ {
17689
+ iconSize: 12,
17690
+ formatter: (value) => /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17691
+ value,
17692
+ mapperConfig,
17693
+ labelMap,
17694
+ legendUppercase
17695
+ ) })
17696
+ }
17697
+ ),
17698
+ seriesOrder.map((s) => {
17699
+ if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17700
+ return null;
17701
+ const { label, color, key } = fnBuildConfigData(
17702
+ s,
17703
+ mapperConfig,
17704
+ labelMap,
17705
+ finalColors,
17706
+ rightKeys,
17707
+ biaxialConfigNormalized
17708
+ );
17709
+ if (s.type === "bar") {
17710
+ return /* @__PURE__ */ jsx(
17711
+ Bar,
17712
+ {
17713
+ dataKey: key,
17714
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17715
+ name: label,
17716
+ fill: color,
17717
+ radius: [4, 4, 0, 0],
17718
+ onClick: handleBarClick,
17719
+ className: "cursor-pointer",
17720
+ style: { opacity: getSeriesOpacity(key) },
17721
+ activeBar: /* @__PURE__ */ jsx(
17722
+ Rectangle,
17689
17723
  {
17690
- dataKey: key,
17691
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17692
- name: label,
17693
17724
  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
17725
  stroke: color,
17734
17726
  strokeWidth: 2,
17735
- dot: { r: 3 },
17736
- activeDot: { r: 6 },
17737
- onClick: handleSeriesClick,
17738
- className: "cursor-pointer pointer-events-auto",
17739
- style: { opacity: getSeriesOpacity(key) },
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,
17727
+ opacity: 0.8
17728
+ }
17729
+ ),
17730
+ children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17731
+ LabelList,
17760
17732
  {
17761
- type: "monotone",
17762
17733
  dataKey: key,
17763
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17764
- name: label,
17765
- stroke: color,
17766
- fill: `url(#gradient-${key})`,
17767
- fillOpacity: 1,
17768
- strokeWidth: 2,
17769
- onClick: handleSeriesClick,
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
17734
+ content: (props) => {
17735
+ if (!fnContentLabelList(props)) return null;
17736
+ const inside = renderInsideBarLabel(
17737
+ color,
17738
+ finalValueFormatter
17739
+ );
17740
+ return inside(props);
17777
17741
  },
17778
- children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17779
- LabelList,
17780
- {
17781
- dataKey: key,
17782
- position: "top",
17783
- content: pillLabelRenderer_default(
17784
- color,
17785
- "soft",
17786
- finalValueFormatter
17787
- ),
17788
- offset: 12
17789
- }
17790
- ) : null
17791
- },
17792
- `area-${key}`
17793
- );
17794
- }
17795
- return null;
17796
- })
17797
- ]
17798
- }
17799
- ) })
17800
- ]
17801
- }
17802
- ),
17803
- enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
17804
- DraggableTooltip_default,
17805
- {
17806
- id: tooltip.id,
17807
- data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
17808
- position: tooltip.position,
17809
- title,
17810
- dataKeys: allKeys,
17811
- finalColors,
17812
- highlightedSeries,
17813
- toggleHighlight,
17814
- showOnlyHighlighted,
17815
- onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
17816
- onPositionChange: onTooltipPositionChange,
17817
- periodLabel,
17818
- dataLabel: "Dados do Per\xEDodo",
17819
- valueFormatter: finalValueFormatter,
17820
- categoryFormatter,
17821
- globalTooltipCount: activeTooltips.length,
17822
- onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
17823
- closeAllButtonPosition: "top-center",
17824
- closeAllButtonVariant: "floating"
17825
- },
17826
- tooltip.id
17742
+ offset: 0
17743
+ }
17744
+ ) : null
17745
+ },
17746
+ `bar-${key}`
17747
+ );
17748
+ }
17749
+ if (s.type === "line") {
17750
+ return /* @__PURE__ */ jsx(
17751
+ Line,
17752
+ {
17753
+ dataKey: key,
17754
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17755
+ name: label,
17756
+ stroke: color,
17757
+ strokeWidth: 2,
17758
+ dot: { r: 3 },
17759
+ activeDot: { r: 6 },
17760
+ onClick: handleSeriesClick,
17761
+ className: "cursor-pointer pointer-events-auto",
17762
+ style: { opacity: getSeriesOpacity(key) },
17763
+ children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17764
+ LabelList,
17765
+ {
17766
+ dataKey: key,
17767
+ position: "top",
17768
+ content: pillLabelRenderer_default(
17769
+ color,
17770
+ "filled",
17771
+ (props) => formatLinePercentage(props.value)
17772
+ ),
17773
+ offset: 14
17774
+ }
17775
+ ) : null
17776
+ },
17777
+ `line-${key}`
17778
+ );
17779
+ }
17780
+ if (s.type === "area") {
17781
+ return /* @__PURE__ */ jsx(
17782
+ Area,
17783
+ {
17784
+ type: "monotone",
17785
+ dataKey: key,
17786
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17787
+ name: label,
17788
+ stroke: color,
17789
+ fill: `url(#gradient-${key})`,
17790
+ fillOpacity: 1,
17791
+ strokeWidth: 2,
17792
+ onClick: handleSeriesClick,
17793
+ className: "cursor-pointer pointer-events-auto",
17794
+ style: { opacity: getSeriesOpacity(key) },
17795
+ activeDot: {
17796
+ r: 6,
17797
+ fill: color,
17798
+ stroke: "hsl(var(--background))",
17799
+ strokeWidth: 2
17800
+ },
17801
+ children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17802
+ LabelList,
17803
+ {
17804
+ dataKey: key,
17805
+ position: "top",
17806
+ content: pillLabelRenderer_default(
17807
+ color,
17808
+ "soft",
17809
+ finalValueFormatter
17810
+ ),
17811
+ offset: 12
17812
+ }
17813
+ ) : null
17814
+ },
17815
+ `area-${key}`
17816
+ );
17817
+ }
17818
+ return null;
17819
+ })
17820
+ ]
17821
+ }
17822
+ ) }) }),
17823
+ timeSeriesConfig && /* @__PURE__ */ jsx(
17824
+ Brush_default,
17825
+ {
17826
+ legend: timeSeriesLegend,
17827
+ data,
17828
+ startIndex,
17829
+ endIndex,
17830
+ onMouseDown: handleMouseDown,
17831
+ brushRef,
17832
+ xAxisKey: xAxisConfig.dataKey,
17833
+ seriesOrder,
17834
+ finalColors,
17835
+ brushHeight: timeSeriesConfig.height,
17836
+ brushColor: timeSeriesConfig.brushColor,
17837
+ miniChartOpacity: timeSeriesConfig.miniChartOpacity,
17838
+ showGrid,
17839
+ gridColor,
17840
+ margin: {
17841
+ left: finalChartLeftMargin,
17842
+ right: finalChartRightMargin
17843
+ }
17844
+ }
17845
+ )
17846
+ ] }) }),
17847
+ enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
17848
+ DraggableTooltip_default,
17849
+ {
17850
+ id: tooltip.id,
17851
+ data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
17852
+ position: tooltip.position,
17853
+ title,
17854
+ dataKeys: allKeys,
17855
+ finalColors,
17856
+ highlightedSeries,
17857
+ toggleHighlight,
17858
+ showOnlyHighlighted,
17859
+ onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
17860
+ onPositionChange: onTooltipPositionChange,
17861
+ periodLabel,
17862
+ dataLabel: "Dados do Per\xEDodo",
17863
+ valueFormatter: finalValueFormatter,
17864
+ categoryFormatter,
17865
+ globalTooltipCount: activeTooltips.length,
17866
+ onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
17867
+ closeAllButtonPosition: "top-center",
17868
+ closeAllButtonVariant: "floating",
17869
+ seriesTypeMap
17870
+ },
17871
+ tooltip.id
17827
17872
  )),
17828
17873
  enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsx(
17829
17874
  CloseAllButton_default,
@@ -17833,29 +17878,6 @@ var Chart = ({
17833
17878
  position: "top-center",
17834
17879
  variant: "floating"
17835
17880
  }
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
17881
  )
17860
17882
  ] });
17861
17883
  };
@@ -17996,6 +18018,13 @@ var HorizontalChart = ({
17996
18018
  setActiveTooltips
17997
18019
  ]
17998
18020
  );
18021
+ const seriesTypeMap = useMemo(() => {
18022
+ const map = {};
18023
+ seriesOrder.forEach((s) => {
18024
+ map[s.key] = s.type;
18025
+ });
18026
+ return map;
18027
+ }, [seriesOrder]);
17999
18028
  if (!data && !isLoading) return null;
18000
18029
  if (isLoading) {
18001
18030
  return /* @__PURE__ */ jsx(
@@ -18235,7 +18264,8 @@ var HorizontalChart = ({
18235
18264
  finalColors,
18236
18265
  valueFormatter: finalValueFormatter,
18237
18266
  categoryFormatter,
18238
- periodLabel
18267
+ periodLabel,
18268
+ seriesTypeMap
18239
18269
  }
18240
18270
  ) : /* @__PURE__ */ jsx(
18241
18271
  TooltipSimple_default,
@@ -18243,7 +18273,8 @@ var HorizontalChart = ({
18243
18273
  finalColors,
18244
18274
  valueFormatter: finalValueFormatter,
18245
18275
  categoryFormatter,
18246
- periodLabel
18276
+ periodLabel,
18277
+ seriesTypeMap
18247
18278
  }
18248
18279
  ),
18249
18280
  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -18329,7 +18360,8 @@ var HorizontalChart = ({
18329
18360
  globalTooltipCount: activeTooltips.length,
18330
18361
  onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
18331
18362
  closeAllButtonPosition: "top-center",
18332
- closeAllButtonVariant: "floating"
18363
+ closeAllButtonVariant: "floating",
18364
+ seriesTypeMap
18333
18365
  },
18334
18366
  tooltip.id
18335
18367
  )),
@@ -18350,9 +18382,7 @@ var HorizontalChart_default = HorizontalChart;
18350
18382
  var TimeSeries = ({
18351
18383
  data,
18352
18384
  xAxis,
18353
- chartHeight = 350,
18354
- height,
18355
- brushHeight,
18385
+ brushHeight = 60,
18356
18386
  className,
18357
18387
  start,
18358
18388
  end,
@@ -18364,21 +18394,21 @@ var TimeSeries = ({
18364
18394
  miniChartOpacity = 0.2,
18365
18395
  ...rest
18366
18396
  }) => {
18367
- const brushHeightValue = brushHeight ?? height ?? 60;
18368
18397
  const startIndex = defaultStartIndex ?? start ?? 0;
18369
18398
  const endIndex = defaultEndIndex ?? end;
18370
- return /* @__PURE__ */ jsx("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ jsx(
18399
+ const hasExplicitHeight = /\bh-/.test(className ?? "");
18400
+ return /* @__PURE__ */ jsx("div", { className: cn("w-full flex flex-col overflow-hidden", className), children: /* @__PURE__ */ jsx(
18371
18401
  Chart_default,
18372
18402
  {
18373
18403
  ...rest,
18374
18404
  data,
18375
18405
  xAxis,
18376
- height: chartHeight + brushHeightValue + 40,
18406
+ className: hasExplicitHeight ? "flex-1 min-h-0" : void 0,
18377
18407
  timeSeries: {
18378
18408
  start: startIndex,
18379
18409
  end: endIndex,
18380
18410
  onRangeChange,
18381
- height: brushHeightValue,
18411
+ height: brushHeight,
18382
18412
  brushColor,
18383
18413
  brushStroke,
18384
18414
  miniChartOpacity
@@ -18605,6 +18635,145 @@ function Leaderboard({
18605
18635
  }
18606
18636
  );
18607
18637
  }
18638
+ var ZoomImage = React32.forwardRef(
18639
+ ({
18640
+ className,
18641
+ src,
18642
+ alt,
18643
+ maxZoom = 2,
18644
+ transitionDuration = 0.3,
18645
+ borderRadius = 12,
18646
+ imageClassName,
18647
+ ...props
18648
+ }, ref) => {
18649
+ const mouseX = useMotionValue(50);
18650
+ const mouseY = useMotionValue(50);
18651
+ const zoomLevel = useMotionValue(1);
18652
+ const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
18653
+ const smoothMouseX = useSpring(mouseX, springConfig);
18654
+ const smoothMouseY = useSpring(mouseY, springConfig);
18655
+ const smoothZoomLevel = useSpring(zoomLevel, springConfig);
18656
+ const transformOrigin = useTransform(
18657
+ [smoothMouseX, smoothMouseY],
18658
+ ([latestX, latestY]) => `${latestX}% ${latestY}%`
18659
+ );
18660
+ const touchStartDist = React32.useRef(0);
18661
+ const touchStartZoom = React32.useRef(1);
18662
+ const isPinching = React32.useRef(false);
18663
+ const handleMouseMove = (e) => {
18664
+ if (isPinching.current) return;
18665
+ const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
18666
+ const x = (e.clientX - left) / width * 100;
18667
+ const y = (e.clientY - top) / height * 100;
18668
+ mouseX.set(x);
18669
+ mouseY.set(y);
18670
+ };
18671
+ const innerRef = React32.useRef(null);
18672
+ React32.useImperativeHandle(ref, () => innerRef.current);
18673
+ React32.useEffect(() => {
18674
+ const element = innerRef.current;
18675
+ if (!element) return;
18676
+ const onWheel = (e) => {
18677
+ e.preventDefault();
18678
+ const delta = -e.deltaY * 5e-3;
18679
+ const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
18680
+ zoomLevel.set(newZoom);
18681
+ };
18682
+ element.addEventListener("wheel", onWheel, { passive: false });
18683
+ return () => element.removeEventListener("wheel", onWheel);
18684
+ }, [maxZoom, zoomLevel]);
18685
+ const handleMouseLeave = () => {
18686
+ if (!isPinching.current) {
18687
+ mouseX.set(50);
18688
+ mouseY.set(50);
18689
+ zoomLevel.set(1);
18690
+ }
18691
+ };
18692
+ const getDistance = (touches) => {
18693
+ const dx = touches[0].clientX - touches[1].clientX;
18694
+ const dy = touches[0].clientY - touches[1].clientY;
18695
+ return Math.sqrt(dx * dx + dy * dy);
18696
+ };
18697
+ const getCenter = (touches, rect) => {
18698
+ const x = (touches[0].clientX + touches[1].clientX) / 2;
18699
+ const y = (touches[0].clientY + touches[1].clientY) / 2;
18700
+ return {
18701
+ x: (x - rect.left) / rect.width * 100,
18702
+ y: (y - rect.top) / rect.height * 100
18703
+ };
18704
+ };
18705
+ const handleTouchStart = (e) => {
18706
+ if (e.touches.length === 2) {
18707
+ isPinching.current = true;
18708
+ touchStartDist.current = getDistance(e.touches);
18709
+ touchStartZoom.current = zoomLevel.get();
18710
+ const rect = e.currentTarget.getBoundingClientRect();
18711
+ const center = getCenter(e.touches, rect);
18712
+ mouseX.set(center.x);
18713
+ mouseY.set(center.y);
18714
+ }
18715
+ };
18716
+ const handleTouchMove = (e) => {
18717
+ if (e.touches.length === 2 && isPinching.current) {
18718
+ e.preventDefault();
18719
+ const dist = getDistance(e.touches);
18720
+ const rect = e.currentTarget.getBoundingClientRect();
18721
+ const scaleChange = dist / touchStartDist.current;
18722
+ const newZoom = Math.min(
18723
+ Math.max(1, touchStartZoom.current * scaleChange),
18724
+ maxZoom
18725
+ );
18726
+ zoomLevel.set(newZoom);
18727
+ const center = getCenter(e.touches, rect);
18728
+ mouseX.set(center.x);
18729
+ mouseY.set(center.y);
18730
+ }
18731
+ };
18732
+ const handleTouchEnd = (e) => {
18733
+ if (e.touches.length < 2) {
18734
+ if (isPinching.current) {
18735
+ isPinching.current = false;
18736
+ }
18737
+ }
18738
+ };
18739
+ return /* @__PURE__ */ jsx(
18740
+ motion.div,
18741
+ {
18742
+ ref: innerRef,
18743
+ className: cn(
18744
+ "relative w-full h-full overflow-hidden touch-none",
18745
+ className
18746
+ ),
18747
+ style: { borderRadius: `${borderRadius}px` },
18748
+ onMouseMove: handleMouseMove,
18749
+ onMouseLeave: handleMouseLeave,
18750
+ onTouchStart: handleTouchStart,
18751
+ onTouchMove: handleTouchMove,
18752
+ onTouchEnd: handleTouchEnd,
18753
+ ...props,
18754
+ children: /* @__PURE__ */ jsx(
18755
+ motion.img,
18756
+ {
18757
+ src,
18758
+ alt,
18759
+ className: cn("w-full h-full object-cover", imageClassName),
18760
+ style: {
18761
+ borderRadius: `${borderRadius}px`,
18762
+ transformOrigin,
18763
+ scale: smoothZoomLevel
18764
+ },
18765
+ transition: {
18766
+ type: "spring",
18767
+ duration: transitionDuration,
18768
+ bounce: 0
18769
+ }
18770
+ }
18771
+ )
18772
+ }
18773
+ );
18774
+ }
18775
+ );
18776
+ ZoomImage.displayName = "ZoomImage";
18608
18777
  var Lens = ({
18609
18778
  children,
18610
18779
  initialZoom = 1.5,
@@ -18628,11 +18797,17 @@ var Lens = ({
18628
18797
  const y = e.clientY - rect.top;
18629
18798
  setMousePosition({ x, y });
18630
18799
  };
18631
- const handleWheel = (e) => {
18632
- if (!isActivated) return;
18633
- const delta = -e.deltaY * 5e-3;
18634
- setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
18635
- };
18800
+ React32__default.useEffect(() => {
18801
+ const element = containerRef.current;
18802
+ if (!element || !isActivated) return;
18803
+ const onWheel = (e) => {
18804
+ e.preventDefault();
18805
+ const delta = -e.deltaY * 5e-3;
18806
+ setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
18807
+ };
18808
+ element.addEventListener("wheel", onWheel, { passive: false });
18809
+ return () => element.removeEventListener("wheel", onWheel);
18810
+ }, [isActivated, maxZoom]);
18636
18811
  const resetZoom = () => {
18637
18812
  setZoomFactor(initialZoom);
18638
18813
  setIsActivated(false);
@@ -18654,7 +18829,6 @@ var Lens = ({
18654
18829
  resetZoom();
18655
18830
  },
18656
18831
  onMouseMove: handleMouseMove,
18657
- onWheel: handleWheel,
18658
18832
  children: [
18659
18833
  children,
18660
18834
  isStatic ? /* @__PURE__ */ jsxs("div", { children: [
@@ -18693,9 +18867,9 @@ var Lens = ({
18693
18867
  top: position.y - lensSize / 2,
18694
18868
  width: lensSize,
18695
18869
  height: lensSize,
18696
- borderRadius: "50%",
18697
- boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
18698
- background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
18870
+ borderRadius: "10%",
18871
+ boxShadow: "0 8px 12px rgba(0, 0, 0, 1), 0 4px 16px rgba(5,3, 1, 1)",
18872
+ background: "radial-gradient(circle at center, transparent 100%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%, transparent 100%)"
18699
18873
  }
18700
18874
  }
18701
18875
  )
@@ -18751,137 +18925,73 @@ var Lens = ({
18751
18925
  }
18752
18926
  );
18753
18927
  };
18754
- var ZoomImage = React32.forwardRef(
18755
- ({
18756
- className,
18757
- src,
18758
- alt,
18759
- maxZoom = 2,
18760
- transitionDuration = 0.3,
18761
- borderRadius = 12,
18762
- imageClassName,
18763
- ...props
18764
- }, ref) => {
18765
- const mouseX = useMotionValue(50);
18766
- const mouseY = useMotionValue(50);
18767
- const zoomLevel = useMotionValue(1);
18768
- const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
18769
- const smoothMouseX = useSpring(mouseX, springConfig);
18770
- const smoothMouseY = useSpring(mouseY, springConfig);
18771
- const smoothZoomLevel = useSpring(zoomLevel, springConfig);
18772
- const transformOrigin = useTransform(
18773
- [smoothMouseX, smoothMouseY],
18774
- ([latestX, latestY]) => `${latestX}% ${latestY}%`
18775
- );
18776
- const touchStartDist = React32.useRef(0);
18777
- const touchStartZoom = React32.useRef(1);
18778
- const isPinching = React32.useRef(false);
18779
- const handleMouseMove = (e) => {
18780
- if (isPinching.current) return;
18781
- const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
18782
- const x = (e.clientX - left) / width * 100;
18783
- const y = (e.clientY - top) / height * 100;
18784
- mouseX.set(x);
18785
- mouseY.set(y);
18786
- };
18787
- const handleWheel = (e) => {
18788
- const delta = -e.deltaY * 5e-3;
18789
- const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
18790
- zoomLevel.set(newZoom);
18791
- };
18792
- const handleMouseLeave = () => {
18793
- if (!isPinching.current) {
18794
- mouseX.set(50);
18795
- mouseY.set(50);
18796
- zoomLevel.set(1);
18928
+ function CarouselSkeleton({ className }) {
18929
+ 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: [
18930
+ /* @__PURE__ */ jsx(
18931
+ motion.div,
18932
+ {
18933
+ className: "absolute inset-0",
18934
+ style: {
18935
+ background: "linear-gradient(105deg, transparent 30%, hsl(var(--muted-foreground) / 0.08) 50%, transparent 70%)",
18936
+ backgroundSize: "200% 100%"
18937
+ },
18938
+ animate: { backgroundPositionX: ["200%", "-200%"] },
18939
+ transition: {
18940
+ duration: 1.6,
18941
+ ease: "linear",
18942
+ repeat: Infinity
18943
+ }
18797
18944
  }
18798
- };
18799
- const getDistance = (touches) => {
18800
- const dx = touches[0].clientX - touches[1].clientX;
18801
- const dy = touches[0].clientY - touches[1].clientY;
18802
- return Math.sqrt(dx * dx + dy * dy);
18803
- };
18804
- const getCenter = (touches, rect) => {
18805
- const x = (touches[0].clientX + touches[1].clientX) / 2;
18806
- const y = (touches[0].clientY + touches[1].clientY) / 2;
18807
- return {
18808
- x: (x - rect.left) / rect.width * 100,
18809
- y: (y - rect.top) / rect.height * 100
18810
- };
18811
- };
18812
- const handleTouchStart = (e) => {
18813
- if (e.touches.length === 2) {
18814
- isPinching.current = true;
18815
- touchStartDist.current = getDistance(e.touches);
18816
- touchStartZoom.current = zoomLevel.get();
18817
- const rect = e.currentTarget.getBoundingClientRect();
18818
- const center = getCenter(e.touches, rect);
18819
- mouseX.set(center.x);
18820
- mouseY.set(center.y);
18821
- }
18822
- };
18823
- const handleTouchMove = (e) => {
18824
- if (e.touches.length === 2 && isPinching.current) {
18825
- e.preventDefault();
18826
- const dist = getDistance(e.touches);
18827
- const rect = e.currentTarget.getBoundingClientRect();
18828
- const scaleChange = dist / touchStartDist.current;
18829
- const newZoom = Math.min(
18830
- Math.max(1, touchStartZoom.current * scaleChange),
18831
- maxZoom
18832
- );
18833
- zoomLevel.set(newZoom);
18834
- const center = getCenter(e.touches, rect);
18835
- mouseX.set(center.x);
18836
- mouseY.set(center.y);
18837
- }
18838
- };
18839
- const handleTouchEnd = (e) => {
18840
- if (e.touches.length < 2) {
18841
- if (isPinching.current) {
18842
- isPinching.current = false;
18843
- }
18844
- }
18845
- };
18846
- return /* @__PURE__ */ jsx(
18945
+ ),
18946
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
18847
18947
  motion.div,
18848
18948
  {
18849
- ref,
18850
- className: cn(
18851
- "relative w-full h-full overflow-hidden touch-none",
18852
- className
18853
- ),
18854
- style: { borderRadius: `${borderRadius}px` },
18855
- onMouseMove: handleMouseMove,
18856
- onMouseLeave: handleMouseLeave,
18857
- onWheel: handleWheel,
18858
- onTouchStart: handleTouchStart,
18859
- onTouchMove: handleTouchMove,
18860
- onTouchEnd: handleTouchEnd,
18861
- ...props,
18862
- children: /* @__PURE__ */ jsx(
18863
- motion.img,
18949
+ animate: { opacity: [0.3, 0.6, 0.3] },
18950
+ transition: {
18951
+ duration: 2,
18952
+ repeat: Infinity,
18953
+ ease: "easeInOut"
18954
+ },
18955
+ children: /* @__PURE__ */ jsxs(
18956
+ "svg",
18864
18957
  {
18865
- src,
18866
- alt,
18867
- className: cn("w-full h-full object-cover", imageClassName),
18868
- style: {
18869
- borderRadius: `${borderRadius}px`,
18870
- transformOrigin,
18871
- scale: smoothZoomLevel
18872
- },
18873
- transition: {
18874
- type: "spring",
18875
- duration: transitionDuration,
18876
- bounce: 0
18877
- }
18958
+ width: "48",
18959
+ height: "48",
18960
+ viewBox: "0 0 24 24",
18961
+ fill: "none",
18962
+ stroke: "currentColor",
18963
+ strokeWidth: "1",
18964
+ strokeLinecap: "round",
18965
+ strokeLinejoin: "round",
18966
+ className: "text-muted-foreground/30",
18967
+ children: [
18968
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
18969
+ /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
18970
+ /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
18971
+ ]
18878
18972
  }
18879
18973
  )
18880
18974
  }
18881
- );
18882
- }
18883
- );
18884
- ZoomImage.displayName = "ZoomImage";
18975
+ ) }),
18976
+ /* @__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" }),
18977
+ /* @__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" }),
18978
+ /* @__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(
18979
+ motion.div,
18980
+ {
18981
+ className: "h-2 rounded-full bg-muted-foreground/20",
18982
+ style: { width: w },
18983
+ animate: { opacity: [0.4, 0.7, 0.4] },
18984
+ transition: {
18985
+ duration: 1.8,
18986
+ repeat: Infinity,
18987
+ ease: "easeInOut",
18988
+ delay: i * 0.15
18989
+ }
18990
+ },
18991
+ i
18992
+ )) })
18993
+ ] }) }) }) });
18994
+ }
18885
18995
  function CarouselBase({
18886
18996
  items,
18887
18997
  className,
@@ -18893,37 +19003,35 @@ function CarouselBase({
18893
19003
  showIndicators = true,
18894
19004
  autoPlay = false,
18895
19005
  autoPlayInterval = 3e3,
18896
- springConfig = {
18897
- stiffness: 300,
18898
- damping: 30
18899
- },
18900
19006
  zoomEffect = null,
18901
- download = false
19007
+ download = false,
19008
+ isLoading = false
18902
19009
  }) {
18903
19010
  const isMobile = useIsMobile();
18904
19011
  const [index, setIndex] = useState(0);
18905
- const containerRef = useRef(null);
18906
- const x = useMotionValue(0);
19012
+ const options = useMemo(() => ({ loop: true }), []);
19013
+ const [emblaRef, emblaApi] = useEmblaCarousel(options);
18907
19014
  const [isDownloading, setIsDownloading] = useState(false);
18908
19015
  const [downloadSuccess, setDownloadSuccess] = useState(false);
18909
19016
  useEffect(() => {
18910
- if (containerRef.current) {
18911
- const containerWidth = containerRef.current.offsetWidth || 1;
18912
- const targetX = -index * containerWidth;
18913
- animate(x, targetX, {
18914
- type: "spring",
18915
- stiffness: springConfig.stiffness,
18916
- damping: springConfig.damping
18917
- });
18918
- }
18919
- }, [index, x, springConfig.stiffness, springConfig.damping]);
19017
+ if (!emblaApi) return;
19018
+ const onSelect = () => {
19019
+ setIndex(emblaApi.selectedScrollSnap());
19020
+ };
19021
+ emblaApi.on("select", onSelect);
19022
+ emblaApi.on("reInit", onSelect);
19023
+ return () => {
19024
+ emblaApi.off("select", onSelect);
19025
+ emblaApi.off("reInit", onSelect);
19026
+ };
19027
+ }, [emblaApi]);
18920
19028
  useEffect(() => {
18921
- if (!autoPlay || items.length <= 1) return;
19029
+ if (!autoPlay || items.length <= 1 || !emblaApi) return;
18922
19030
  const interval = setInterval(() => {
18923
- setIndex((i) => (i + 1) % items.length);
19031
+ emblaApi.scrollNext();
18924
19032
  }, autoPlayInterval);
18925
19033
  return () => clearInterval(interval);
18926
- }, [autoPlay, autoPlayInterval, items.length]);
19034
+ }, [autoPlay, autoPlayInterval, items.length, emblaApi]);
18927
19035
  const handleDownload = async () => {
18928
19036
  if (isDownloading) return;
18929
19037
  setIsDownloading(true);
@@ -18948,21 +19056,36 @@ function CarouselBase({
18948
19056
  setIsDownloading(false);
18949
19057
  }
18950
19058
  };
18951
- return /* @__PURE__ */ jsx(
18952
- "div",
19059
+ if (isLoading) {
19060
+ return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
19061
+ motion.div,
19062
+ {
19063
+ initial: { opacity: 0 },
19064
+ animate: { opacity: 1 },
19065
+ exit: { opacity: 0 },
19066
+ transition: { duration: 0.3 },
19067
+ style: { width, height },
19068
+ className: "h-full",
19069
+ children: /* @__PURE__ */ jsx(CarouselSkeleton, { className })
19070
+ },
19071
+ "carousel-skeleton"
19072
+ ) });
19073
+ }
19074
+ return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
19075
+ motion.div,
18953
19076
  {
19077
+ initial: { opacity: 0 },
19078
+ animate: { opacity: 1 },
19079
+ transition: { duration: 0.4 },
18954
19080
  className: cn("w-full lg:p-10 sm:p-4 p-2", className),
18955
19081
  style: { width, height },
18956
- children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs(
18957
- "div",
18958
- {
18959
- className: cn(
18960
- "relative overflow-hidden rounded-lg h-full",
18961
- containerClassName
18962
- ),
18963
- ref: containerRef,
18964
- children: [
18965
- /* @__PURE__ */ jsx(motion.div, { className: "flex h-full", style: { x }, children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full h-full", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsx(
19082
+ children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs("div", { className: cn("relative h-full", containerClassName), children: [
19083
+ /* @__PURE__ */ jsx(
19084
+ "div",
19085
+ {
19086
+ ref: emblaRef,
19087
+ className: "overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
19088
+ children: /* @__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(
18966
19089
  ZoomImage,
18967
19090
  {
18968
19091
  src: item.url,
@@ -18994,156 +19117,400 @@ function CarouselBase({
18994
19117
  ),
18995
19118
  draggable: false
18996
19119
  }
18997
- ) }, item.id)) }),
18998
- download && /* @__PURE__ */ jsx(
18999
- motion.button,
19120
+ ) }, item.id)) })
19121
+ }
19122
+ ),
19123
+ download && /* @__PURE__ */ jsx(
19124
+ motion.button,
19125
+ {
19126
+ onClick: handleDownload,
19127
+ onPointerDown: (e) => e.stopPropagation(),
19128
+ onTouchStart: (e) => e.stopPropagation(),
19129
+ onMouseDown: (e) => e.stopPropagation(),
19130
+ className: cn(
19131
+ "absolute top-4 right-4 z-50 p-2 rounded-full text-white transition-colors border border-white/10",
19132
+ downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
19133
+ ),
19134
+ title: "Download image",
19135
+ initial: false,
19136
+ animate: {
19137
+ scale: isDownloading ? 0.9 : 1,
19138
+ backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
19139
+ },
19140
+ whileHover: { scale: 1.05 },
19141
+ whileTap: { scale: 0.95 },
19142
+ children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
19143
+ motion.svg,
19000
19144
  {
19001
- onClick: handleDownload,
19002
- className: cn(
19003
- "absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
19004
- downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
19005
- ),
19006
- title: "Download image",
19007
- initial: false,
19008
- animate: {
19009
- scale: isDownloading ? 0.9 : 1,
19010
- backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
19145
+ xmlns: "http://www.w3.org/2000/svg",
19146
+ width: "20",
19147
+ height: "20",
19148
+ viewBox: "0 0 24 24",
19149
+ fill: "none",
19150
+ stroke: "currentColor",
19151
+ strokeWidth: "2",
19152
+ strokeLinecap: "round",
19153
+ strokeLinejoin: "round",
19154
+ animate: { rotate: 360 },
19155
+ transition: {
19156
+ repeat: Infinity,
19157
+ ease: "linear",
19158
+ duration: 1
19011
19159
  },
19012
- whileHover: { scale: 1.05 },
19013
- whileTap: { scale: 0.95 },
19014
- children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
19015
- motion.svg,
19016
- {
19017
- xmlns: "http://www.w3.org/2000/svg",
19018
- width: "20",
19019
- height: "20",
19020
- viewBox: "0 0 24 24",
19021
- fill: "none",
19022
- stroke: "currentColor",
19023
- strokeWidth: "2",
19024
- strokeLinecap: "round",
19025
- strokeLinejoin: "round",
19026
- animate: { rotate: 360 },
19027
- transition: {
19028
- repeat: Infinity,
19029
- ease: "linear",
19030
- duration: 1
19031
- },
19032
- children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
19033
- },
19034
- "loading"
19035
- ) : downloadSuccess ? /* @__PURE__ */ jsx(
19036
- motion.svg,
19037
- {
19038
- xmlns: "http://www.w3.org/2000/svg",
19039
- width: "20",
19040
- height: "20",
19041
- viewBox: "0 0 24 24",
19042
- fill: "none",
19043
- stroke: "currentColor",
19044
- strokeWidth: "2",
19045
- strokeLinecap: "round",
19046
- strokeLinejoin: "round",
19047
- initial: { scale: 0.5, opacity: 0 },
19048
- animate: { scale: 1, opacity: 1 },
19049
- exit: { scale: 0.5, opacity: 0 },
19050
- children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
19051
- },
19052
- "success"
19053
- ) : /* @__PURE__ */ jsxs(
19054
- motion.svg,
19055
- {
19056
- xmlns: "http://www.w3.org/2000/svg",
19057
- width: "20",
19058
- height: "20",
19059
- viewBox: "0 0 24 24",
19060
- fill: "none",
19061
- stroke: "currentColor",
19062
- strokeWidth: "2",
19063
- strokeLinecap: "round",
19064
- strokeLinejoin: "round",
19065
- initial: { scale: 0.5, opacity: 0 },
19066
- animate: { scale: 1, opacity: 1 },
19067
- exit: { scale: 0.5, opacity: 0 },
19068
- children: [
19069
- /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
19070
- /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
19071
- /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
19072
- ]
19073
- },
19074
- "download"
19075
- ) })
19076
- }
19077
- ),
19078
- showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
19079
- /* @__PURE__ */ jsx(
19080
- motion.button,
19160
+ children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
19161
+ },
19162
+ "loading"
19163
+ ) : downloadSuccess ? /* @__PURE__ */ jsx(
19164
+ motion.svg,
19165
+ {
19166
+ xmlns: "http://www.w3.org/2000/svg",
19167
+ width: "20",
19168
+ height: "20",
19169
+ viewBox: "0 0 24 24",
19170
+ fill: "none",
19171
+ stroke: "currentColor",
19172
+ strokeWidth: "2",
19173
+ strokeLinecap: "round",
19174
+ strokeLinejoin: "round",
19175
+ initial: { scale: 0.5, opacity: 0 },
19176
+ animate: { scale: 1, opacity: 1 },
19177
+ exit: { scale: 0.5, opacity: 0 },
19178
+ children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
19179
+ },
19180
+ "success"
19181
+ ) : /* @__PURE__ */ jsxs(
19182
+ motion.svg,
19183
+ {
19184
+ xmlns: "http://www.w3.org/2000/svg",
19185
+ width: "20",
19186
+ height: "20",
19187
+ viewBox: "0 0 24 24",
19188
+ fill: "none",
19189
+ stroke: "currentColor",
19190
+ strokeWidth: "2",
19191
+ strokeLinecap: "round",
19192
+ strokeLinejoin: "round",
19193
+ initial: { scale: 0.5, opacity: 0 },
19194
+ animate: { scale: 1, opacity: 1 },
19195
+ exit: { scale: 0.5, opacity: 0 },
19196
+ children: [
19197
+ /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
19198
+ /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
19199
+ /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
19200
+ ]
19201
+ },
19202
+ "download"
19203
+ ) })
19204
+ }
19205
+ ),
19206
+ showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
19207
+ /* @__PURE__ */ jsx(
19208
+ motion.button,
19209
+ {
19210
+ disabled: !emblaApi?.canScrollPrev(),
19211
+ onClick: () => emblaApi?.scrollPrev(),
19212
+ onPointerDown: (e) => e.stopPropagation(),
19213
+ onTouchStart: (e) => e.stopPropagation(),
19214
+ onMouseDown: (e) => e.stopPropagation(),
19215
+ 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-50
19216
+ ${!emblaApi?.canScrollPrev() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
19217
+ children: /* @__PURE__ */ jsx(
19218
+ "svg",
19081
19219
  {
19082
- disabled: index === 0,
19083
- onClick: () => setIndex((i) => Math.max(0, i - 1)),
19084
- 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
19085
- ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
19220
+ className: "w-6 h-6",
19221
+ fill: "none",
19222
+ stroke: "currentColor",
19223
+ viewBox: "0 0 24 24",
19086
19224
  children: /* @__PURE__ */ jsx(
19087
- "svg",
19225
+ "path",
19088
19226
  {
19089
- className: "w-6 h-6",
19090
- fill: "none",
19091
- stroke: "currentColor",
19092
- viewBox: "0 0 24 24",
19093
- children: /* @__PURE__ */ jsx(
19094
- "path",
19095
- {
19096
- strokeLinecap: "round",
19097
- strokeLinejoin: "round",
19098
- strokeWidth: 2,
19099
- d: "M15 19l-7-7 7-7"
19100
- }
19101
- )
19227
+ strokeLinecap: "round",
19228
+ strokeLinejoin: "round",
19229
+ strokeWidth: 2,
19230
+ d: "M15 19l-7-7 7-7"
19102
19231
  }
19103
19232
  )
19104
19233
  }
19105
- ),
19106
- /* @__PURE__ */ jsx(
19107
- motion.button,
19234
+ )
19235
+ }
19236
+ ),
19237
+ /* @__PURE__ */ jsx(
19238
+ motion.button,
19239
+ {
19240
+ disabled: !emblaApi?.canScrollNext(),
19241
+ onClick: () => emblaApi?.scrollNext(),
19242
+ onPointerDown: (e) => e.stopPropagation(),
19243
+ onTouchStart: (e) => e.stopPropagation(),
19244
+ onMouseDown: (e) => e.stopPropagation(),
19245
+ 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-50
19246
+ ${!emblaApi?.canScrollNext() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
19247
+ children: /* @__PURE__ */ jsx(
19248
+ "svg",
19108
19249
  {
19109
- disabled: index === items.length - 1,
19110
- onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
19111
- 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
19112
- ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
19250
+ className: "w-6 h-6",
19251
+ fill: "none",
19252
+ stroke: "currentColor",
19253
+ viewBox: "0 0 24 24",
19113
19254
  children: /* @__PURE__ */ jsx(
19114
- "svg",
19255
+ "path",
19115
19256
  {
19116
- className: "w-6 h-6",
19117
- fill: "none",
19118
- stroke: "currentColor",
19119
- viewBox: "0 0 24 24",
19120
- children: /* @__PURE__ */ jsx(
19121
- "path",
19122
- {
19123
- strokeLinecap: "round",
19124
- strokeLinejoin: "round",
19125
- strokeWidth: 2,
19126
- d: "M9 5l7 7-7 7"
19127
- }
19128
- )
19257
+ strokeLinecap: "round",
19258
+ strokeLinejoin: "round",
19259
+ strokeWidth: 2,
19260
+ d: "M9 5l7 7-7 7"
19129
19261
  }
19130
19262
  )
19131
19263
  }
19132
19264
  )
19133
- ] }),
19134
- showIndicators && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: items.map((_, i) => /* @__PURE__ */ jsx(
19135
- "button",
19136
- {
19137
- onClick: () => setIndex(i),
19138
- className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
19139
- },
19140
- i
19141
- )) })
19142
- ]
19143
- }
19144
- ) })
19265
+ }
19266
+ )
19267
+ ] }),
19268
+ showIndicators && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-50", children: items.map((_, i) => /* @__PURE__ */ jsx(
19269
+ "button",
19270
+ {
19271
+ onClick: () => emblaApi?.scrollTo(i),
19272
+ onPointerDown: (e) => e.stopPropagation(),
19273
+ onTouchStart: (e) => e.stopPropagation(),
19274
+ onMouseDown: (e) => e.stopPropagation(),
19275
+ className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
19276
+ },
19277
+ i
19278
+ )) })
19279
+ ] }) })
19280
+ },
19281
+ "carousel-content"
19282
+ ) });
19283
+ }
19284
+ function useMediaQuery(query) {
19285
+ const [value, setValue] = React32.useState(false);
19286
+ React32.useEffect(() => {
19287
+ function onChange(event) {
19288
+ setValue(event.matches);
19289
+ }
19290
+ const result = window.matchMedia(query);
19291
+ result.addEventListener("change", onChange);
19292
+ setValue(result.matches);
19293
+ return () => result.removeEventListener("change", onChange);
19294
+ }, [query]);
19295
+ return value;
19296
+ }
19297
+ var FULL_CIRCLE = 360;
19298
+ var START_ANGLE = -90;
19299
+ function degToRad(deg) {
19300
+ return deg * Math.PI / 180;
19301
+ }
19302
+ function polarToCartesian(radius, angleDeg) {
19303
+ const rad = degToRad(angleDeg);
19304
+ return { x: Math.cos(rad) * radius, y: Math.sin(rad) * radius };
19305
+ }
19306
+ function slicePath(index, total, wedgeRadius, innerRadius) {
19307
+ if (total <= 0) return "";
19308
+ const anglePerSlice = FULL_CIRCLE / total;
19309
+ const midDeg = START_ANGLE + anglePerSlice * index;
19310
+ const halfSlice = anglePerSlice / 2;
19311
+ const startDeg = midDeg - halfSlice;
19312
+ const endDeg = midDeg + halfSlice;
19313
+ const outerStart = polarToCartesian(wedgeRadius, startDeg);
19314
+ const outerEnd = polarToCartesian(wedgeRadius, endDeg);
19315
+ const innerStart = polarToCartesian(innerRadius, startDeg);
19316
+ const innerEnd = polarToCartesian(innerRadius, endDeg);
19317
+ const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
19318
+ 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`;
19319
+ }
19320
+ function RadialMenu({
19321
+ children,
19322
+ menuItems,
19323
+ size = 240,
19324
+ iconSize = 24,
19325
+ bandWidth = 60,
19326
+ innerGap = 16,
19327
+ outerGap = 12,
19328
+ outerRingWidth = 8,
19329
+ onSelect
19330
+ }) {
19331
+ const isMobile = useMediaQuery("(max-width: 768px)");
19332
+ const radius = size / 2;
19333
+ const outerRingOuterRadius = radius;
19334
+ const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;
19335
+ const wedgeOuterRadius = outerRingInnerRadius - outerGap;
19336
+ const wedgeInnerRadius = wedgeOuterRadius - bandWidth;
19337
+ const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;
19338
+ const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);
19339
+ const slice = 360 / menuItems.length;
19340
+ const [activeIndex, setActiveIndex] = React32.useState(null);
19341
+ const timerRef = React32.useRef(null);
19342
+ const isLongPress = React32.useRef(false);
19343
+ const handleTouchStart = (e) => {
19344
+ isLongPress.current = false;
19345
+ const touch = e.touches[0];
19346
+ const { clientX, clientY } = touch;
19347
+ timerRef.current = setTimeout(() => {
19348
+ isLongPress.current = true;
19349
+ const event = new MouseEvent("contextmenu", {
19350
+ bubbles: true,
19351
+ cancelable: true,
19352
+ view: window,
19353
+ clientX,
19354
+ clientY,
19355
+ button: 2,
19356
+ buttons: 2
19357
+ });
19358
+ e.target.dispatchEvent(event);
19359
+ }, 1e3);
19360
+ };
19361
+ const handleTouchEnd = () => {
19362
+ if (timerRef.current) {
19363
+ clearTimeout(timerRef.current);
19145
19364
  }
19146
- );
19365
+ };
19366
+ const handleTouchMove = () => {
19367
+ if (timerRef.current) {
19368
+ clearTimeout(timerRef.current);
19369
+ }
19370
+ };
19371
+ const containerVariants = {
19372
+ hidden: { opacity: 0, scale: 0.8 },
19373
+ visible: {
19374
+ opacity: 1,
19375
+ scale: 1,
19376
+ transition: isMobile ? { duration: 0 } : {
19377
+ delayChildren: 0.05,
19378
+ staggerChildren: 0.03,
19379
+ type: "spring",
19380
+ stiffness: 300,
19381
+ damping: 24
19382
+ }
19383
+ },
19384
+ exit: {
19385
+ opacity: 0,
19386
+ scale: 0.8,
19387
+ transition: isMobile ? { duration: 0 } : { duration: 0.15 }
19388
+ }
19389
+ };
19390
+ const itemVariants2 = {
19391
+ hidden: { opacity: 0, scale: 0, rotate: -20 },
19392
+ visible: {
19393
+ opacity: 1,
19394
+ scale: 1,
19395
+ rotate: 0,
19396
+ transition: isMobile ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 20 }
19397
+ }
19398
+ };
19399
+ return /* @__PURE__ */ jsxs(ContextMenuBase, { children: [
19400
+ /* @__PURE__ */ jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx(
19401
+ "div",
19402
+ {
19403
+ className: "select-none outline-none group touch-none",
19404
+ onTouchStart: handleTouchStart,
19405
+ onTouchEnd: handleTouchEnd,
19406
+ onTouchMove: handleTouchMove,
19407
+ 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)" })
19408
+ }
19409
+ ) }),
19410
+ /* @__PURE__ */ jsx(
19411
+ ContextMenuContentBase,
19412
+ {
19413
+ className: "p-0 border-none bg-transparent shadow-none overflow-visible -translate-x-1/2 -translate-y-1/2",
19414
+ style: { width: size, height: size },
19415
+ children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
19416
+ motion.div,
19417
+ {
19418
+ className: "relative size-full drop-shadow-xl will-change-transform",
19419
+ variants: containerVariants,
19420
+ initial: "hidden",
19421
+ animate: "visible",
19422
+ exit: "exit",
19423
+ children: [
19424
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-background/5 blur-2xl -z-10" }),
19425
+ /* @__PURE__ */ jsxs(
19426
+ "svg",
19427
+ {
19428
+ className: "absolute inset-0 size-full overflow-visible",
19429
+ viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
19430
+ children: [
19431
+ /* @__PURE__ */ jsx(
19432
+ motion.circle,
19433
+ {
19434
+ r: centerRadius,
19435
+ initial: { scale: 0 },
19436
+ animate: { scale: 1 },
19437
+ transition: isMobile ? { duration: 0 } : {
19438
+ type: "spring",
19439
+ stiffness: 300,
19440
+ delay: 0.2
19441
+ },
19442
+ className: "fill-background stroke-border stroke-1 shadow-inner"
19443
+ }
19444
+ ),
19445
+ menuItems.map((item, index) => {
19446
+ const Icon = item.icon;
19447
+ const midDeg = START_ANGLE + slice * index;
19448
+ const { x: iconX, y: iconY } = polarToCartesian(
19449
+ iconRingRadius,
19450
+ midDeg
19451
+ );
19452
+ const isActive = activeIndex === index;
19453
+ const ICON_BOX = iconSize * 2.5;
19454
+ return /* @__PURE__ */ jsxs(
19455
+ motion.g,
19456
+ {
19457
+ variants: itemVariants2,
19458
+ className: "cursor-pointer outline-none",
19459
+ onMouseEnter: () => setActiveIndex(index),
19460
+ onMouseLeave: () => setActiveIndex(null),
19461
+ onClick: () => onSelect?.(item),
19462
+ style: { originX: "0px", originY: "0px" },
19463
+ children: [
19464
+ /* @__PURE__ */ jsx(
19465
+ "path",
19466
+ {
19467
+ d: slicePath(
19468
+ index,
19469
+ menuItems.length,
19470
+ wedgeOuterRadius,
19471
+ wedgeInnerRadius
19472
+ ),
19473
+ className: cn(
19474
+ "transition-colors duration-200 stroke-1",
19475
+ isActive ? "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
19476
+ )
19477
+ }
19478
+ ),
19479
+ /* @__PURE__ */ jsx(
19480
+ "foreignObject",
19481
+ {
19482
+ x: iconX - ICON_BOX / 2,
19483
+ y: iconY - ICON_BOX / 2,
19484
+ width: ICON_BOX,
19485
+ height: ICON_BOX,
19486
+ className: "pointer-events-none",
19487
+ children: /* @__PURE__ */ jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
19488
+ Icon,
19489
+ {
19490
+ size: iconSize,
19491
+ weight: isActive ? "fill" : "regular",
19492
+ className: cn(
19493
+ "transition-all duration-200",
19494
+ isActive ? "text-primary-foreground " : "text-muted-foreground"
19495
+ )
19496
+ }
19497
+ ) })
19498
+ }
19499
+ )
19500
+ ]
19501
+ },
19502
+ item.id
19503
+ );
19504
+ })
19505
+ ]
19506
+ }
19507
+ )
19508
+ ]
19509
+ }
19510
+ ) })
19511
+ }
19512
+ )
19513
+ ] });
19147
19514
  }
19148
19515
 
19149
- 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 };
19516
+ 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 };