@mlw-packages/react-components 1.9.10 → 1.9.12

package/dist/index.js

@@ -43,6 +43,7 @@ var core = require('@dnd-kit/core');
 var utilities = require('@dnd-kit/utilities');
 var reactRadioGroup = require('@radix-ui/react-radio-group');
 var recharts = require('recharts');
+var useEmblaCarousel = require('embla-carousel-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -84,6 +85,7 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var ptBR3__default = /*#__PURE__*/_interopDefault(ptBR3);
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -3755,7 +3757,7 @@ var FileUploader = React32__namespace.forwardRef(
     showPreview = true,
     dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
     dropzoneSubtext,
-    animate: animate2 = true,
+    animate = true,
     ...props
   }, ref) => {
     const [isDragging, setIsDragging] = React32__namespace.useState(false);
@@ -3963,7 +3965,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.p,
             {
               className: "mb-2 text-base font-semibold text-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.1 },
               children: dropzoneText
@@ -3973,7 +3975,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.p,
             {
               className: "text-sm text-muted-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.2 },
               children: defaultSubtext
@@ -4017,7 +4019,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.div,
             {
               className: "mt-6 w-full",
-              initial: animate2 ? { opacity: 0, y: 10 } : false,
+              initial: animate ? { opacity: 0, y: 10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.3 },
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4032,7 +4034,7 @@ var FileUploader = React32__namespace.forwardRef(
                   framerMotion.motion.div,
                   {
                     layout: true,
-                    initial: animate2 ? { opacity: 0, x: -20 } : false,
+                    initial: animate ? { opacity: 0, x: -20 } : false,
                     animate: { opacity: 1, x: 0 },
                     exit: {
                       opacity: 0,
@@ -4040,7 +4042,7 @@ var FileUploader = React32__namespace.forwardRef(
                       transition: { duration: 0.2 }
                     },
                     transition: {
-                      delay: animate2 ? index * 0.05 : 0,
+                      delay: animate ? index * 0.05 : 0,
                       layout: { duration: 0.2 }
                     },
                     className: cn(
@@ -5738,7 +5740,7 @@ var sheetVariants = classVarianceAuthority.cva(
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         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",
-        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"
+        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"
       }
     },
     defaultVariants: {
@@ -16524,11 +16526,11 @@ var NoData = ({
       ),
       style: {
         "--pl": `${paddingLeft}px`,
-        "--svg-h": typeof height === "number" ? `${height}px` : String(height)
+        ...typeof height === "number" ? { height } : {}
       },
       role: "img",
       "aria-label": message,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-[900px] relative", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-[900px] relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -17263,11 +17265,30 @@ function useOpenTooltipForPeriod({
   );
 }
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
+function ChartWrapper({
+  className,
+  children,
+  wrapperRef
+}) {
+  const cls = className ?? "";
+  const hasExplicitSizing = /\bh-/.test(cls) || /\bflex-1\b/.test(cls);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "w-full overflow-hidden min-w-0 rounded-lg border-border",
+        !hasExplicitSizing && "h-[550px]",
+        className
+      ),
+      children
+    }
+  );
+}
 var Chart = ({
   data,
   series,
   className,
-  height = 350,
   width = "100%",
   colors: colors2 = DEFAULT_COLORS2,
   gridColor,
@@ -17299,19 +17320,7 @@ var Chart = ({
   timeSeries,
   timeSeriesLegend,
   customLegend
-  // horizontal removido
-  // orderBy removido
 }) => {
-  const usesFullHeight = typeof height === "string" && (height === "100%" || height === "100vh") || typeof className === "string" && /\bh-full\b/.test(className || "");
-  const responsiveHeight = usesFullHeight ? "100%" : height;
-  const wrapperClass = cn(
-    "w-full min-w-0 rounded-lg border-border",
-    className,
-    "overflow-hidden"
-  );
-  const wrapperStyle = usesFullHeight ? void 0 : {
-    height: typeof responsiveHeight === "number" ? `${responsiveHeight}px` : responsiveHeight
-  };
   const { xAxisConfig, mapperConfig } = React32.useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
   }, [data, xAxis, labelMap]);
@@ -17455,393 +17464,419 @@ var Chart = ({
     maxTooltips,
     effectiveChartWidth
   });
-  const legendSpace = showLegend ? 44 : 0;
-  const xAxisLabelSpace = xAxisLabel ? 18 : 0;
-  const brushSpace = timeSeriesConfig?.height ? 200 : 0;
-  const bottomMargin = 10 + legendSpace + xAxisLabelSpace + brushSpace;
   if (!data && !isLoading) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsxRuntime.jsx(
       NoData_default,
       {
         title,
         isLoading: true,
         loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
         paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
+        height: "100%"
       }
-    );
+    ) });
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsxRuntime.jsx(
       NoData_default,
       {
         title,
         paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
+        height: "100%"
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1",
-        style: usesFullHeight ? { height: "100%" } : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ChartHeader,
-            {
-              title,
-              titlePosition,
-              HORIZONTAL_PADDING_CLASS,
-              customLegend,
-              data,
-              allKeys,
-              processedData,
-              finalColors,
-              mapperConfig,
-              finalValueFormatter,
-              formatBR
-            }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, wrapperRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col rounded-lg bg-card py-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChartHeader,
+        {
+          title,
+          titlePosition,
+          HORIZONTAL_PADDING_CLASS,
+          customLegend,
+          data,
+          allKeys,
+          processedData,
+          finalColors,
+          mapperConfig,
+          finalValueFormatter,
+          formatBR
+        }
+      ),
+      allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
+        ChartControls,
+        {
+          allKeys,
+          mapperConfig,
+          finalColors,
+          highlightedSeries,
+          toggleHighlight,
+          showOnlyHighlighted,
+          setShowOnlyHighlighted,
+          highlightedSeriesSize: highlightedSeries.size,
+          clearHighlights,
+          enableHighlights,
+          enableShowOnly,
+          enablePeriodsDropdown,
+          enableDraggableTooltips,
+          processedData,
+          onOpenPeriod: openTooltipForPeriod,
+          rightOffset: finalChartRightMargin,
+          activePeriods,
+          containerClass: cn("flex items-center gap-2", teste),
+          containerWidth: chartInnerWidth
+        }
+      ),
+      !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "w-full flex justify-end mb-2",
+            HORIZONTAL_PADDING_CLASS
           ),
-          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
-            ChartControls,
+          style: {
+            paddingRight: `${finalChartRightMargin}px`,
+            maxWidth: `${chartInnerWidth}px`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            PeriodsDropdown_default,
             {
-              allKeys,
-              mapperConfig,
-              finalColors,
-              highlightedSeries,
-              toggleHighlight,
-              showOnlyHighlighted,
-              setShowOnlyHighlighted,
-              highlightedSeriesSize: highlightedSeries.size,
-              clearHighlights,
-              enableHighlights,
-              enableShowOnly,
-              enablePeriodsDropdown,
-              enableDraggableTooltips,
               processedData,
               onOpenPeriod: openTooltipForPeriod,
-              rightOffset: finalChartRightMargin,
-              activePeriods,
-              containerClass: cn("flex items-center gap-2", teste),
-              containerWidth: chartInnerWidth
+              rightOffset: finalChartRightMargin
             }
-          ),
-          !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "w-full flex justify-end mb-2",
-                HORIZONTAL_PADDING_CLASS
-              ),
-              style: {
-                paddingRight: `${finalChartRightMargin}px`,
-                maxWidth: `${chartInnerWidth}px`
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                PeriodsDropdown_default,
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data: processedData,
+          margin: {
+            top: 10,
+            right: finalChartRightMargin,
+            left: finalChartLeftMargin,
+            bottom: 10
+          },
+          onClick: handleChartClick,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+              const key = s.key;
+              const color = finalColors[key];
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "linearGradient",
                 {
-                  processedData,
-                  onOpenPeriod: openTooltipForPeriod,
-                  rightOffset: finalChartRightMargin
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: responsiveHeight, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            recharts.ComposedChart,
-            {
-              data: processedData,
-              margin: {
-                top: 10,
-                right: finalChartRightMargin,
-                left: finalChartLeftMargin,
-                bottom: bottomMargin
-              },
-              onClick: handleChartClick,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                  const key = s.key;
-                  const color = finalColors[key];
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "linearGradient",
-                    {
-                      id: `gradient-${key}`,
-                      x1: "0",
-                      y1: "0",
-                      x2: "0",
-                      y2: "0.8",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
-                      ]
-                    },
-                    `gradient-${key}`
-                  );
-                }) }),
-                showGrid && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.CartesianGrid,
-                  {
-                    strokeDasharray: "3 3",
-                    stroke: gridColor || "hsl(var(--muted-foreground))",
-                    opacity: 0.5
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.XAxis,
-                  {
-                    dataKey: xAxisConfig.dataKey,
-                    stroke: "hsl(var(--muted-foreground))",
-                    fontSize: 12,
-                    tickLine: false,
-                    axisLine: false,
-                    tickFormatter: (value) => {
-                      if (categoryFormatter)
-                        return categoryFormatter(value);
-                      if (xAxisConfig.valueFormatter)
-                        return xAxisConfig.valueFormatter(value);
-                      return String(value ?? "");
-                    },
-                    label: xAxisLabel ? {
-                      value: xAxisLabel,
-                      position: "insideBottomRight",
-                      offset: -5,
-                      style: {
-                        fontSize: 12,
-                        fill: "hsl(var(--muted-foreground))",
-                        fontWeight: 500
+                  id: `gradient-${key}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "0.8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: color,
+                        stopOpacity: 0.8
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "stop",
+                      {
+                        offset: "90%",
+                        stopColor: color,
+                        stopOpacity: 0.1
                       }
-                    } : void 0
+                    )
+                  ]
+                },
+                `gradient-${key}`
+              );
+            }) }),
+            showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                strokeDasharray: "3 3",
+                stroke: gridColor || "hsl(var(--muted-foreground))",
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: xAxisConfig.dataKey,
+                stroke: "hsl(var(--muted-foreground))",
+                fontSize: 12,
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => {
+                  if (categoryFormatter)
+                    return categoryFormatter(value);
+                  if (xAxisConfig.valueFormatter)
+                    return xAxisConfig.valueFormatter(
+                      value
+                    );
+                  return String(value ?? "");
+                },
+                label: xAxisLabel ? {
+                  value: xAxisLabel,
+                  position: "insideBottomRight",
+                  offset: -5,
+                  style: {
+                    fontSize: 12,
+                    fill: "hsl(var(--muted-foreground))",
+                    fontWeight: 500
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.YAxis,
-                  {
-                    yAxisId: "left",
-                    width: yAxisTickWidth,
-                    stroke: "hsl(var(--muted-foreground))",
+                } : void 0
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                width: yAxisTickWidth,
+                stroke: "hsl(var(--muted-foreground))",
+                fontSize: 12,
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: yTickFormatter,
+                domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
+                tickCount: 6,
+                label: yAxisLabel ? {
+                  value: yAxisLabel,
+                  angle: -90,
+                  position: "left",
+                  dx: leftYAxisLabelDx,
+                  style: {
                     fontSize: 12,
-                    tickLine: false,
-                    axisLine: false,
-                    tickFormatter: yTickFormatter,
-                    domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                    tickCount: 6,
-                    label: yAxisLabel ? {
-                      value: yAxisLabel,
-                      angle: -90,
-                      position: "left",
-                      dx: leftYAxisLabelDx,
-                      style: {
-                        fontSize: 12,
-                        fill: "hsl(var(--muted-foreground))",
-                        fontWeight: 500,
-                        textAnchor: "middle"
-                      }
-                    } : void 0
+                    fill: "hsl(var(--muted-foreground))",
+                    fontWeight: 500,
+                    textAnchor: "middle"
                   }
-                ),
-                rightKeys.length > 0 && (() => {
-                  const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
-                    biaxialConfigNormalized,
-                    yTickFormatter,
-                    finalColors
-                  );
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      yAxisId: "right",
-                      width: finalChartRightMargin,
-                      orientation: "right",
-                      stroke: "hsl(var(--muted-foreground))",
+                } : void 0
+              }
+            ),
+            rightKeys.length > 0 && (() => {
+              const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
+                biaxialConfigNormalized,
+                yTickFormatter,
+                finalColors
+              );
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  yAxisId: "right",
+                  width: finalChartRightMargin,
+                  orientation: "right",
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tick: { fill: rightAxisColor },
+                  tickFormatter: rightTickFormatter,
+                  domain: [Math.min(minRightDataValue, 0), niceMaxRight],
+                  tickCount: 6,
+                  label: biaxialConfigNormalized?.label ? {
+                    value: biaxialConfigNormalized.label,
+                    angle: -90,
+                    position: "right",
+                    dx: rightYAxisLabelDx,
+                    style: {
                       fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tick: { fill: rightAxisColor },
-                      tickFormatter: rightTickFormatter,
-                      domain: [Math.min(minRightDataValue, 0), niceMaxRight],
-                      tickCount: 6,
-                      label: biaxialConfigNormalized?.label ? {
-                        value: biaxialConfigNormalized.label,
-                        angle: -90,
-                        position: "right",
-                        dx: rightYAxisLabelDx,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500,
-                          textAnchor: "middle"
-                        }
-                      } : void 0
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500,
+                      textAnchor: "middle"
                     }
-                  );
-                })(),
-                showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Tooltip,
+                  } : void 0
+                }
+              );
+            })(),
+            showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
+                  TooltipWithTotal_default,
                   {
-                    content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
-                      TooltipWithTotal_default,
-                      {
-                        finalColors,
-                        valueFormatter: finalValueFormatter,
-                        categoryFormatter,
-                        periodLabel
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      TooltipSimple_default,
-                      {
-                        finalColors,
-                        valueFormatter: finalValueFormatter,
-                        categoryFormatter,
-                        periodLabel
-                      }
-                    ),
-                    cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                    finalColors,
+                    valueFormatter: finalValueFormatter,
+                    categoryFormatter,
+                    periodLabel
                   }
-                ),
-                showLegend && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Legend,
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  TooltipSimple_default,
                   {
-                    iconSize: 12,
-                    formatter: (value) => {
-                      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
-                        value,
-                        mapperConfig,
-                        labelMap,
-                        legendUppercase
-                      ) });
-                    }
+                    finalColors,
+                    valueFormatter: finalValueFormatter,
+                    categoryFormatter,
+                    periodLabel
                   }
                 ),
-                seriesOrder.map((s) => {
-                  if (showOnlyHighlighted && !highlightedSeries.has(s.key))
-                    return null;
-                  const { label, color, key } = fnBuildConfigData(
-                    s,
-                    mapperConfig,
-                    labelMap,
-                    finalColors,
-                    rightKeys,
-                    biaxialConfigNormalized
-                  );
-                  if (s.type === "bar") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Bar,
+                cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                iconSize: 12,
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
+                  value,
+                  mapperConfig,
+                  labelMap,
+                  legendUppercase
+                ) })
+              }
+            ),
+            seriesOrder.map((s) => {
+              if (showOnlyHighlighted && !highlightedSeries.has(s.key))
+                return null;
+              const { label, color, key } = fnBuildConfigData(
+                s,
+                mapperConfig,
+                labelMap,
+                finalColors,
+                rightKeys,
+                biaxialConfigNormalized
+              );
+              if (s.type === "bar") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Bar,
+                  {
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    fill: color,
+                    radius: [4, 4, 0, 0],
+                    onClick: handleBarClick,
+                    className: "cursor-pointer",
+                    style: { opacity: getSeriesOpacity(key) },
+                    activeBar: /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.Rectangle,
                       {
-                        dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
                         fill: color,
-                        radius: [4, 4, 0, 0],
-                        onClick: handleBarClick,
-                        className: "cursor-pointer",
-                        style: { opacity: getSeriesOpacity(key) },
-                        activeBar: /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Rectangle,
-                          {
-                            fill: color,
-                            stroke: color,
-                            strokeWidth: 2,
-                            opacity: 0.8
-                          }
-                        ),
-                        children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.LabelList,
-                          {
-                            dataKey: key,
-                            content: (props) => {
-                              if (!fnContentLabelList(props)) return null;
-                              const inside = renderInsideBarLabel(
-                                color,
-                                finalValueFormatter
-                              );
-                              return inside(props);
-                            },
-                            offset: 0
-                          }
-                        ) : null
-                      },
-                      `bar-${key}`
-                    );
-                  }
-                  if (s.type === "line") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Line,
-                      {
-                        dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
                         stroke: color,
                         strokeWidth: 2,
-                        dot: { r: 3 },
-                        activeDot: { r: 6 },
-                        onClick: handleSeriesClick,
-                        className: "cursor-pointer pointer-events-auto",
-                        style: { opacity: getSeriesOpacity(key) },
-                        children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.LabelList,
-                          {
-                            dataKey: key,
-                            position: "top",
-                            content: pillLabelRenderer_default(
-                              color,
-                              "filled",
-                              (props) => formatLinePercentage(props.value)
-                            ),
-                            offset: 14
-                          }
-                        ) : null
-                      },
-                      `line-${key}`
-                    );
-                  }
-                  if (s.type === "area") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Area,
+                        opacity: 0.8
+                      }
+                    ),
+                    children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
                       {
-                        type: "monotone",
                         dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
-                        stroke: color,
-                        fill: `url(#gradient-${key})`,
-                        fillOpacity: 1,
-                        strokeWidth: 2,
-                        onClick: handleSeriesClick,
-                        className: "cursor-pointer pointer-events-auto",
-                        style: { opacity: getSeriesOpacity(key) },
-                        activeDot: {
-                          r: 6,
-                          fill: color,
-                          stroke: "hsl(var(--background))",
-                          strokeWidth: 2
+                        content: (props) => {
+                          if (!fnContentLabelList(props)) return null;
+                          const inside = renderInsideBarLabel(
+                            color,
+                            finalValueFormatter
+                          );
+                          return inside(props);
                         },
-                        children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.LabelList,
-                          {
-                            dataKey: key,
-                            position: "top",
-                            content: pillLabelRenderer_default(
-                              color,
-                              "soft",
-                              finalValueFormatter
-                            ),
-                            offset: 12
-                          }
-                        ) : null
-                      },
-                      `area-${key}`
-                    );
-                  }
-                  return null;
-                })
-              ]
-            }
-          ) })
-        ]
-      }
-    ),
+                        offset: 0
+                      }
+                    ) : null
+                  },
+                  `bar-${key}`
+                );
+              }
+              if (s.type === "line") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Line,
+                  {
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    stroke: color,
+                    strokeWidth: 2,
+                    dot: { r: 3 },
+                    activeDot: { r: 6 },
+                    onClick: handleSeriesClick,
+                    className: "cursor-pointer pointer-events-auto",
+                    style: { opacity: getSeriesOpacity(key) },
+                    children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          color,
+                          "filled",
+                          (props) => formatLinePercentage(props.value)
+                        ),
+                        offset: 14
+                      }
+                    ) : null
+                  },
+                  `line-${key}`
+                );
+              }
+              if (s.type === "area") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Area,
+                  {
+                    type: "monotone",
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    stroke: color,
+                    fill: `url(#gradient-${key})`,
+                    fillOpacity: 1,
+                    strokeWidth: 2,
+                    onClick: handleSeriesClick,
+                    className: "cursor-pointer pointer-events-auto",
+                    style: { opacity: getSeriesOpacity(key) },
+                    activeDot: {
+                      r: 6,
+                      fill: color,
+                      stroke: "hsl(var(--background))",
+                      strokeWidth: 2
+                    },
+                    children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          color,
+                          "soft",
+                          finalValueFormatter
+                        ),
+                        offset: 12
+                      }
+                    ) : null
+                  },
+                  `area-${key}`
+                );
+              }
+              return null;
+            })
+          ]
+        }
+      ) }) }),
+      timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
+        Brush_default,
+        {
+          legend: timeSeriesLegend,
+          data,
+          startIndex,
+          endIndex,
+          onMouseDown: handleMouseDown,
+          brushRef,
+          xAxisKey: xAxisConfig.dataKey,
+          seriesOrder,
+          finalColors,
+          brushHeight: timeSeriesConfig.height,
+          brushColor: timeSeriesConfig.brushColor,
+          miniChartOpacity: timeSeriesConfig.miniChartOpacity,
+          showGrid,
+          gridColor,
+          margin: {
+            left: finalChartLeftMargin,
+            right: finalChartRightMargin
+          }
+        }
+      )
+    ] }) }),
     enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
       DraggableTooltip_default,
       {
@@ -17875,29 +17910,6 @@ var Chart = ({
         position: "top-center",
         variant: "floating"
       }
-    ),
-    timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
-      Brush_default,
-      {
-        legend: timeSeriesLegend,
-        data,
-        startIndex,
-        endIndex,
-        onMouseDown: handleMouseDown,
-        brushRef,
-        xAxisKey: xAxisConfig.dataKey,
-        seriesOrder,
-        finalColors,
-        brushHeight: timeSeriesConfig.height,
-        brushColor: timeSeriesConfig.brushColor,
-        miniChartOpacity: timeSeriesConfig.miniChartOpacity,
-        showGrid,
-        gridColor,
-        margin: {
-          left: finalChartLeftMargin,
-          right: finalChartRightMargin
-        }
-      }
     )
   ] });
 };
@@ -18392,9 +18404,7 @@ var HorizontalChart_default = HorizontalChart;
 var TimeSeries = ({
   data,
   xAxis,
-  chartHeight = 350,
-  height,
-  brushHeight,
+  brushHeight = 60,
   className,
   start,
   end,
@@ -18406,21 +18416,21 @@ var TimeSeries = ({
   miniChartOpacity = 0.2,
   ...rest
 }) => {
-  const brushHeightValue = brushHeight ?? height ?? 60;
   const startIndex = defaultStartIndex ?? start ?? 0;
   const endIndex = defaultEndIndex ?? end;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const hasExplicitHeight = /\bh-/.test(className ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full flex flex-col overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Chart_default,
     {
       ...rest,
       data,
       xAxis,
-      height: chartHeight + brushHeightValue + 40,
+      className: hasExplicitHeight ? "flex-1 min-h-0" : void 0,
       timeSeries: {
         start: startIndex,
         end: endIndex,
         onRangeChange,
-        height: brushHeightValue,
+        height: brushHeight,
         brushColor,
         brushStroke,
         miniChartOpacity
@@ -18647,58 +18657,472 @@ function Leaderboard({
     }
   );
 }
-function CarouselBase({
-  items,
-  className,
-  containerClassName,
-  imageClassName,
-  width,
-  height = "400px",
-  showControls = true,
-  showIndicators = true,
-  autoPlay = false,
-  autoPlayInterval = 3e3,
-  springConfig = {
-    stiffness: 300,
-    damping: 30
+var ZoomImage = React32__namespace.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    maxZoom = 2,
+    transitionDuration = 0.3,
+    borderRadius = 12,
+    imageClassName,
+    ...props
+  }, ref) => {
+    const mouseX = framerMotion.useMotionValue(50);
+    const mouseY = framerMotion.useMotionValue(50);
+    const zoomLevel = framerMotion.useMotionValue(1);
+    const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
+    const smoothMouseX = framerMotion.useSpring(mouseX, springConfig);
+    const smoothMouseY = framerMotion.useSpring(mouseY, springConfig);
+    const smoothZoomLevel = framerMotion.useSpring(zoomLevel, springConfig);
+    const transformOrigin = framerMotion.useTransform(
+      [smoothMouseX, smoothMouseY],
+      ([latestX, latestY]) => `${latestX}% ${latestY}%`
+    );
+    const touchStartDist = React32__namespace.useRef(0);
+    const touchStartZoom = React32__namespace.useRef(1);
+    const isPinching = React32__namespace.useRef(false);
+    const handleMouseMove = (e) => {
+      if (isPinching.current) return;
+      const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - left) / width * 100;
+      const y = (e.clientY - top) / height * 100;
+      mouseX.set(x);
+      mouseY.set(y);
+    };
+    const handleWheel = (e) => {
+      const delta = -e.deltaY * 5e-3;
+      const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
+      zoomLevel.set(newZoom);
+    };
+    const handleMouseLeave = () => {
+      if (!isPinching.current) {
+        mouseX.set(50);
+        mouseY.set(50);
+        zoomLevel.set(1);
+      }
+    };
+    const getDistance = (touches) => {
+      const dx = touches[0].clientX - touches[1].clientX;
+      const dy = touches[0].clientY - touches[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy);
+    };
+    const getCenter = (touches, rect) => {
+      const x = (touches[0].clientX + touches[1].clientX) / 2;
+      const y = (touches[0].clientY + touches[1].clientY) / 2;
+      return {
+        x: (x - rect.left) / rect.width * 100,
+        y: (y - rect.top) / rect.height * 100
+      };
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        isPinching.current = true;
+        touchStartDist.current = getDistance(e.touches);
+        touchStartZoom.current = zoomLevel.get();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && isPinching.current) {
+        e.preventDefault();
+        const dist = getDistance(e.touches);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const scaleChange = dist / touchStartDist.current;
+        const newZoom = Math.min(
+          Math.max(1, touchStartZoom.current * scaleChange),
+          maxZoom
+        );
+        zoomLevel.set(newZoom);
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchEnd = (e) => {
+      if (e.touches.length < 2) {
+        if (isPinching.current) {
+          isPinching.current = false;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref,
+        className: cn(
+          "relative w-full h-full overflow-hidden touch-none",
+          className
+        ),
+        style: { borderRadius: `${borderRadius}px` },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onWheel: handleWheel,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.img,
+          {
+            src,
+            alt,
+            className: cn("w-full h-full object-cover", imageClassName),
+            style: {
+              borderRadius: `${borderRadius}px`,
+              transformOrigin,
+              scale: smoothZoomLevel
+            },
+            transition: {
+              type: "spring",
+              duration: transitionDuration,
+              bounce: 0
+            }
+          }
+        )
+      }
+    );
   }
+);
+ZoomImage.displayName = "ZoomImage";
+var Lens = ({
+  children,
+  initialZoom = 1.5,
+  maxZoom = 4,
+  lensSize = 150,
+  isStatic = false,
+  position = { x: 200, y: 150 },
+  hovering,
+  setHovering
+}) => {
+  const containerRef = React32.useRef(null);
+  const [localIsHovering, setLocalIsHovering] = React32.useState(false);
+  const isHovering = hovering !== void 0 ? hovering : localIsHovering;
+  const setIsHovering = setHovering || setLocalIsHovering;
+  const [mousePosition, setMousePosition] = React32.useState({ x: 100, y: 100 });
+  const [zoomFactor, setZoomFactor] = React32.useState(initialZoom);
+  const [isActivated, setIsActivated] = React32.useState(false);
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setMousePosition({ x, y });
+  };
+  const handleWheel = (e) => {
+    if (!isActivated) return;
+    const delta = -e.deltaY * 5e-3;
+    setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
+  };
+  const resetZoom = () => {
+    setZoomFactor(initialZoom);
+    setIsActivated(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative overflow-hidden rounded-lg z-20 h-full",
+        isActivated ? "cursor-none" : "cursor-pointer"
+      ),
+      onClick: () => setIsActivated(!isActivated),
+      onMouseEnter: () => {
+        setIsHovering(true);
+      },
+      onMouseLeave: () => {
+        setIsHovering(false);
+        resetZoom();
+      },
+      onMouseMove: handleMouseMove,
+      onWheel: handleWheel,
+      children: [
+        children,
+        isStatic ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${position.x}px ${position.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${position.x}px ${position.y}px`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${position.x}px ${position.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute pointer-events-none",
+              style: {
+                left: position.x - lensSize / 2,
+                top: position.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isHovering && isActivated && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute inset-0 overflow-hidden",
+              style: {
+                maskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${mousePosition.x}px ${mousePosition.y}px, black 100%, transparent 100%)`,
+                transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,
+                zIndex: 50
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    transform: `scale(${zoomFactor})`,
+                    transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.58 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: { duration: 0.3, ease: "easeOut" },
+              className: "absolute pointer-events-none z-[60]",
+              style: {
+                left: mousePosition.x - lensSize / 2,
+                top: mousePosition.y - lensSize / 2,
+                width: lensSize,
+                height: lensSize,
+                borderRadius: "50%",
+                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
+                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+              }
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+function CarouselSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full h-full lg:p-10 sm:p-4 p-2", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-lg h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full bg-muted rounded-lg overflow-hidden relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "absolute inset-0",
+        style: {
+          background: "linear-gradient(105deg, transparent 30%, hsl(var(--muted-foreground) / 0.08) 50%, transparent 70%)",
+          backgroundSize: "200% 100%"
+        },
+        animate: { backgroundPositionX: ["200%", "-200%"] },
+        transition: {
+          duration: 1.6,
+          ease: "linear",
+          repeat: Infinity
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        animate: { opacity: [0.3, 0.6, 0.3] },
+        transition: {
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "48",
+            height: "48",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-muted-foreground/30",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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" }),
+    /* @__PURE__ */ jsxRuntime.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" }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "h-2 rounded-full bg-muted-foreground/20",
+        style: { width: w },
+        animate: { opacity: [0.4, 0.7, 0.4] },
+        transition: {
+          duration: 1.8,
+          repeat: Infinity,
+          ease: "easeInOut",
+          delay: i * 0.15
+        }
+      },
+      i
+    )) })
+  ] }) }) }) });
+}
+function CarouselBase({
+  items,
+  className,
+  containerClassName,
+  imageClassName,
+  width,
+  height,
+  showControls = true,
+  showIndicators = true,
+  autoPlay = false,
+  autoPlayInterval = 3e3,
+  zoomEffect = null,
+  download = false,
+  isLoading = false
 }) {
+  const isMobile = useIsMobile();
   const [index, setIndex] = React32.useState(0);
-  const containerRef = React32.useRef(null);
-  const x = framerMotion.useMotionValue(0);
+  const [emblaRef, emblaApi] = useEmblaCarousel__default.default({ loop: true });
+  const [isDownloading, setIsDownloading] = React32.useState(false);
+  const [downloadSuccess, setDownloadSuccess] = React32.useState(false);
   React32.useEffect(() => {
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.offsetWidth || 1;
-      const targetX = -index * containerWidth;
-      framerMotion.animate(x, targetX, {
-        type: "spring",
-        stiffness: springConfig.stiffness,
-        damping: springConfig.damping
-      });
-    }
-  }, [index, x, springConfig.stiffness, springConfig.damping]);
+    if (!emblaApi) return;
+    const onSelect = () => {
+      setIndex(emblaApi.selectedScrollSnap());
+    };
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi]);
   React32.useEffect(() => {
-    if (!autoPlay || items.length <= 1) return;
+    if (!autoPlay || items.length <= 1 || !emblaApi) return;
     const interval = setInterval(() => {
-      setIndex((i) => (i + 1) % items.length);
+      emblaApi.scrollNext();
     }, autoPlayInterval);
     return () => clearInterval(interval);
-  }, [autoPlay, autoPlayInterval, items.length]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  }, [autoPlay, autoPlayInterval, items.length, emblaApi]);
+  React32.useEffect(() => {
+    if (emblaApi && index !== emblaApi.selectedScrollSnap()) {
+      emblaApi.scrollTo(index);
+    }
+  }, [index, emblaApi]);
+  const handleDownload = async () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    setDownloadSuccess(false);
+    const currentItem = items[index];
+    try {
+      const response = await fetch(currentItem.url);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = currentItem.title || "image";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setIsDownloading(false);
+      setDownloadSuccess(true);
+      setTimeout(() => setDownloadSuccess(false), 2e3);
+    } catch (error) {
+      console.error("Error downloading image:", error);
+      setIsDownloading(false);
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        style: { width, height },
+        className: "h-full",
+        children: /* @__PURE__ */ jsxRuntime.jsx(CarouselSkeleton, { className })
+      },
+      "carousel-skeleton"
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
     {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.4 },
       className: cn("w-full lg:p-10 sm:p-4 p-2", className),
-      style: { width },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      style: { width, height },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "relative overflow-hidden rounded-lg",
+            "relative overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
             containerClassName
           ),
-          ref: containerRef,
+          ref: emblaRef,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "flex", style: { x }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full", style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full h-full min-w-0", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsxRuntime.jsx(
+              ZoomImage,
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn("w-full h-full select-none"),
+                imageClassName,
+                borderRadius: 8,
+                maxZoom: 3
+              }
+            ) : zoomEffect === "lens" ? /* @__PURE__ */ jsxRuntime.jsx(Lens, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.url,
+                alt: item.title,
+                className: cn(
+                  "w-full h-full object-cover rounded-lg select-none pointer-events-none",
+                  imageClassName
+                ),
+                draggable: false
+              }
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: item.url,
@@ -18710,14 +19134,94 @@ function CarouselBase({
                 draggable: false
               }
             ) }, item.id)) }),
+            download && /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.button,
+              {
+                onClick: handleDownload,
+                className: cn(
+                  "absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
+                  downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
+                ),
+                title: "Download image",
+                initial: false,
+                animate: {
+                  scale: isDownloading ? 0.9 : 1,
+                  backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
+                },
+                whileHover: { scale: 1.05 },
+                whileTap: { scale: 0.95 },
+                children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    animate: { rotate: 360 },
+                    transition: {
+                      repeat: Infinity,
+                      ease: "linear",
+                      duration: 1
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                  },
+                  "loading"
+                ) : downloadSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                  },
+                  "success"
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.svg,
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0.5, opacity: 0 },
+                    animate: { scale: 1, opacity: 1 },
+                    exit: { scale: 0.5, opacity: 0 },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                    ]
+                  },
+                  "download"
+                ) })
+              }
+            ),
             showControls && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  disabled: index === 0,
-                  onClick: () => setIndex((i) => Math.max(0, i - 1)),
-                  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-10
-                  ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                  disabled: !emblaApi?.canScrollPrev(),
+                  onClick: () => emblaApi?.scrollPrev(),
+                  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
+                    ${!emblaApi?.canScrollPrev() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
@@ -18741,10 +19245,10 @@ function CarouselBase({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  disabled: index === items.length - 1,
-                  onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
-                  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-10
-                  ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                  disabled: !emblaApi?.canScrollNext(),
+                  onClick: () => emblaApi?.scrollNext(),
+                  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
+                    ${!emblaApi?.canScrollNext() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
@@ -18769,7 +19273,7 @@ function CarouselBase({
             showIndicators && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: items.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
-                onClick: () => setIndex(i),
+                onClick: () => emblaApi?.scrollTo(i),
                 className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
               },
               i
@@ -18777,8 +19281,240 @@ function CarouselBase({
           ]
         }
       ) })
+    },
+    "carousel-content"
+  ) });
+}
+function useMediaQuery(query) {
+  const [value, setValue] = React32__namespace.useState(false);
+  React32__namespace.useEffect(() => {
+    function onChange(event) {
+      setValue(event.matches);
     }
-  );
+    const result = window.matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+  return value;
+}
+var FULL_CIRCLE = 360;
+var START_ANGLE = -90;
+function degToRad(deg) {
+  return deg * Math.PI / 180;
+}
+function polarToCartesian(radius, angleDeg) {
+  const rad = degToRad(angleDeg);
+  return { x: Math.cos(rad) * radius, y: Math.sin(rad) * radius };
+}
+function slicePath(index, total, wedgeRadius, innerRadius) {
+  if (total <= 0) return "";
+  const anglePerSlice = FULL_CIRCLE / total;
+  const midDeg = START_ANGLE + anglePerSlice * index;
+  const halfSlice = anglePerSlice / 2;
+  const startDeg = midDeg - halfSlice;
+  const endDeg = midDeg + halfSlice;
+  const outerStart = polarToCartesian(wedgeRadius, startDeg);
+  const outerEnd = polarToCartesian(wedgeRadius, endDeg);
+  const innerStart = polarToCartesian(innerRadius, startDeg);
+  const innerEnd = polarToCartesian(innerRadius, endDeg);
+  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
+  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`;
+}
+function RadialMenu({
+  children,
+  menuItems,
+  size = 240,
+  iconSize = 24,
+  bandWidth = 60,
+  innerGap = 16,
+  outerGap = 12,
+  outerRingWidth = 8,
+  onSelect
+}) {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const radius = size / 2;
+  const outerRingOuterRadius = radius;
+  const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;
+  const wedgeOuterRadius = outerRingInnerRadius - outerGap;
+  const wedgeInnerRadius = wedgeOuterRadius - bandWidth;
+  const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;
+  const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);
+  const slice = 360 / menuItems.length;
+  const [activeIndex, setActiveIndex] = React32__namespace.useState(null);
+  const timerRef = React32__namespace.useRef(null);
+  const isLongPress = React32__namespace.useRef(false);
+  const handleTouchStart = (e) => {
+    isLongPress.current = false;
+    const touch = e.touches[0];
+    const { clientX, clientY } = touch;
+    timerRef.current = setTimeout(() => {
+      isLongPress.current = true;
+      const event = new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        clientX,
+        clientY,
+        button: 2,
+        buttons: 2
+      });
+      e.target.dispatchEvent(event);
+    }, 1e3);
+  };
+  const handleTouchEnd = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+  const handleTouchMove = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+  const containerVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: isMobile ? { duration: 0 } : {
+        delayChildren: 0.05,
+        staggerChildren: 0.03,
+        type: "spring",
+        stiffness: 300,
+        damping: 24
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.8,
+      transition: isMobile ? { duration: 0 } : { duration: 0.15 }
+    }
+  };
+  const itemVariants2 = {
+    hidden: { opacity: 0, scale: 0, rotate: -20 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      rotate: 0,
+      transition: isMobile ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 20 }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBase, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "select-none outline-none group touch-none",
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchMove: handleTouchMove,
+        children: children || /* @__PURE__ */ jsxRuntime.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)" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenuContentBase,
+      {
+        className: "p-0 border-none bg-transparent shadow-none overflow-visible -translate-x-1/2 -translate-y-1/2",
+        style: { width: size, height: size },
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            className: "relative size-full drop-shadow-xl will-change-transform",
+            variants: containerVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-background/5 blur-2xl -z-10" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  className: "absolute inset-0 size-full overflow-visible",
+                  viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.circle,
+                      {
+                        r: centerRadius,
+                        initial: { scale: 0 },
+                        animate: { scale: 1 },
+                        transition: isMobile ? { duration: 0 } : {
+                          type: "spring",
+                          stiffness: 300,
+                          delay: 0.2
+                        },
+                        className: "fill-background stroke-border stroke-1 shadow-inner"
+                      }
+                    ),
+                    menuItems.map((item, index) => {
+                      const Icon = item.icon;
+                      const midDeg = START_ANGLE + slice * index;
+                      const { x: iconX, y: iconY } = polarToCartesian(
+                        iconRingRadius,
+                        midDeg
+                      );
+                      const isActive = activeIndex === index;
+                      const ICON_BOX = iconSize * 2.5;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        framerMotion.motion.g,
+                        {
+                          variants: itemVariants2,
+                          className: "cursor-pointer outline-none",
+                          onMouseEnter: () => setActiveIndex(index),
+                          onMouseLeave: () => setActiveIndex(null),
+                          onClick: () => onSelect?.(item),
+                          style: { originX: "0px", originY: "0px" },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                d: slicePath(
+                                  index,
+                                  menuItems.length,
+                                  wedgeOuterRadius,
+                                  wedgeInnerRadius
+                                ),
+                                className: cn(
+                                  "transition-colors duration-200 stroke-1",
+                                  isActive ? "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "foreignObject",
+                              {
+                                x: iconX - ICON_BOX / 2,
+                                y: iconY - ICON_BOX / 2,
+                                width: ICON_BOX,
+                                height: ICON_BOX,
+                                className: "pointer-events-none",
+                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  Icon,
+                                  {
+                                    size: iconSize,
+                                    weight: isActive ? "fill" : "regular",
+                                    className: cn(
+                                      "transition-all duration-200",
+                                      isActive ? "text-primary-foreground " : "text-muted-foreground"
+                                    )
+                                  }
+                                ) })
+                              }
+                            )
+                          ]
+                        },
+                        item.id
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
 }
 
 exports.AddButton = AddButton;
@@ -18992,6 +19728,7 @@ exports.ProgressBase = ProgressBase;
 exports.ProgressCirclesBase = ProgressCirclesBase;
 exports.ProgressPanelsBase = ProgressPanelsBase;
 exports.ProgressSegmentsBase = ProgressSegmentsBase;
+exports.RadialMenu = RadialMenu;
 exports.RangePicker = RangePicker;
 exports.RefreshButton = RefreshButton;
 exports.SaveButton = SaveButton;