@deepnoid/ui 0.1.122 → 0.1.124

package/dist/{chunk-VEBJS4SC.mjs → chunk-Y3CGQN3I.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   backdrop_default
-} from "./chunk-AF4I7ZQS.mjs";
+} from "./chunk-IW2MDZBW.mjs";
 import {
   button_default
-} from "./chunk-XOUAUSP4.mjs";
+} from "./chunk-3HY74IGR.mjs";
 import {
   Icon_default
 } from "./chunk-YZ57UYAS.mjs";
@@ -13,7 +13,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-CDXBML6O.mjs";
+} from "./chunk-76QIZILI.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useMemo, useEffect } from "react";

package/dist/{chunk-YBVJFHH6.mjs → chunk-YGOX6FBU.mjs}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-CDXBML6O.mjs";
+} from "./chunk-76QIZILI.mjs";
 
 // src/components/tooltip/tooltip.tsx
 import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";

package/dist/components/accordion/accordion.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   accordion_default
-} from "../../chunk-EKLA6ZR4.mjs";
+} from "../../chunk-XL3K55LE.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   accordion_default as default

package/dist/components/accordion/accordionItem.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   accordionItem_default
-} from "../../chunk-I3ADJOUT.mjs";
+} from "../../chunk-CVXLLXLE.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   accordionItem_default as default

package/dist/components/accordion/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-NMSDSEBD.mjs";
 import {
   accordion_default
-} from "../../chunk-EKLA6ZR4.mjs";
+} from "../../chunk-XL3K55LE.mjs";
 import {
   accordionItem_default
-} from "../../chunk-I3ADJOUT.mjs";
+} from "../../chunk-CVXLLXLE.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   accordion_default as Accordion,

package/dist/components/avatar/avatar.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   avatar_default
-} from "../../chunk-VOKDAIUY.mjs";
+} from "../../chunk-OL22LVBG.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   avatar_default as default

package/dist/components/avatar/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-7DLOYKVC.mjs";
 import {
   avatar_default
-} from "../../chunk-VOKDAIUY.mjs";
+} from "../../chunk-OL22LVBG.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   avatar_default as Avatar

package/dist/components/backdrop/backdrop.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   backdrop_default
-} from "../../chunk-AF4I7ZQS.mjs";
-import "../../chunk-CDXBML6O.mjs";
+} from "../../chunk-IW2MDZBW.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/backdrop/index.mjs

@@ -2,8 +2,8 @@
 import "../../chunk-SE5TU755.mjs";
 import {
   backdrop_default
-} from "../../chunk-AF4I7ZQS.mjs";
-import "../../chunk-CDXBML6O.mjs";
+} from "../../chunk-IW2MDZBW.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,20 +1,20 @@
 "use client";
 import {
   breadcrumb_default
-} from "../../chunk-2IOTRPCS.mjs";
+} from "../../chunk-WUGITHV6.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-Q364C3FI.mjs";
-import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-XOUAUSP4.mjs";
-import "../../chunk-6JLHCQH7.mjs";
+import "../../chunk-GUTGDPXH.mjs";
+import "../../chunk-3HY74IGR.mjs";
+import "../../chunk-6UKNZTOL.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YZ57UYAS.mjs";
+import "../../chunk-SDUDU3CU.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/breadcrumb/index.mjs

@@ -2,20 +2,20 @@
 import "../../chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "../../chunk-2IOTRPCS.mjs";
+} from "../../chunk-WUGITHV6.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-Q364C3FI.mjs";
-import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-XOUAUSP4.mjs";
-import "../../chunk-6JLHCQH7.mjs";
+import "../../chunk-GUTGDPXH.mjs";
+import "../../chunk-3HY74IGR.mjs";
+import "../../chunk-6UKNZTOL.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YZ57UYAS.mjs";
+import "../../chunk-SDUDU3CU.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/button/button-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   button_group_default
-} from "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-CDXBML6O.mjs";
+} from "../../chunk-GUTGDPXH.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   button_group_default as default

package/dist/components/button/button.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   button_default
-} from "../../chunk-XOUAUSP4.mjs";
+} from "../../chunk-3HY74IGR.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
@@ -9,7 +9,7 @@ import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YZ57UYAS.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   button_default as default

package/dist/components/button/icon-button.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   icon_button_default
-} from "../../chunk-6JLHCQH7.mjs";
+} from "../../chunk-6UKNZTOL.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
@@ -9,7 +9,7 @@ import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YZ57UYAS.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   icon_button_default as default

package/dist/components/button/index.mjs

@@ -1,25 +1,25 @@
 "use client";
 import "../../chunk-MY5U63QO.mjs";
-import {
-  text_button_default
-} from "../../chunk-Q364C3FI.mjs";
 import {
   button_group_default
-} from "../../chunk-ITWKPTSD.mjs";
+} from "../../chunk-GUTGDPXH.mjs";
 import {
   button_default
-} from "../../chunk-XOUAUSP4.mjs";
+} from "../../chunk-3HY74IGR.mjs";
 import {
   icon_button_default
-} from "../../chunk-6JLHCQH7.mjs";
+} from "../../chunk-6UKNZTOL.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YZ57UYAS.mjs";
+import {
+  text_button_default
+} from "../../chunk-SDUDU3CU.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-BG4DIGKH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/button/text-button.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   text_button_default
-} from "../../chunk-Q364C3FI.mjs";
+} from "../../chunk-SDUDU3CU.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/charts/areaChart.d.mts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
 type AreaData = {
@@ -10,6 +11,10 @@ type AreaData = {
 type Props = {
     data?: AreaData[];
     label?: string;
+    headerContent?: ReactNode;
+    startFromZero?: boolean;
+    itemWidth?: number;
+    chartHeight?: number;
     classNames?: SlotsToClasses<AreaChartSlots>;
 };
 type AreaChartProps = Props & AreaChartVariantProps;

package/dist/components/charts/areaChart.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
 type AreaData = {
@@ -10,6 +11,10 @@ type AreaData = {
 type Props = {
     data?: AreaData[];
     label?: string;
+    headerContent?: ReactNode;
+    startFromZero?: boolean;
+    itemWidth?: number;
+    chartHeight?: number;
     classNames?: SlotsToClasses<AreaChartSlots>;
 };
 type AreaChartProps = Props & AreaChartVariantProps;

package/dist/components/charts/areaChart.js

@@ -370,29 +370,131 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/charts/areaChart.tsx
+// src/components/scroll/scrollArea.tsx
+var import_tailwind_variants2 = require("tailwind-variants");
+
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/scroll/scrollArea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var ScrollArea = ({ children, className, direction, size }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
+};
+ScrollArea.displayName = "ScrollArea";
+var scrollArea_default = ScrollArea;
+var scrollAreaStyle = (0, import_tailwind_variants2.tv)({
+  base: [
+    "h-full",
+    "x-full",
+    "scrollbar-thumb-trans-soft",
+    "hover:scrollbar-thumb-neutral-light",
+    "scrollbar-track-neutral-soft",
+    "scrollbar-button-neutral-main"
+  ],
+  variants: {
+    direction: {
+      x: ["overflow-x-auto", "overflow-y-hidden"],
+      y: ["overflow-y-auto", "overflow-x-hidden"],
+      both: ["overflow-auto"]
+    },
+    size: {
+      sm: ["scrollbar-sm"],
+      // "scrollbar-thin",
+      md: ["scrollbar-md"],
+      lg: ["scrollbar-lg"]
+    }
+  },
+  defaultVariants: {
+    direction: "both",
+    size: "md"
+  }
+});
+
+// src/components/charts/areaChart.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   const uniqueId = (0, import_react.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
-  const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
+  const {
+    data,
+    label,
+    headerContent,
+    color = "primary",
+    startFromZero = false,
+    itemWidth,
+    chartHeight = 240,
+    classNames
+  } = { ...props, ...variantProps };
   const slots = (0, import_react.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
     danger: "#FF4684"
   };
   const colorHex = (0, import_react.useMemo)(() => COLOR_MAP[color], [color]);
+  const totalChartWidth = (0, import_react.useMemo)(() => {
+    if (!data || !itemWidth) return void 0;
+    const dataLength = startFromZero ? data.length + 1 : data.length;
+    return dataLength * itemWidth;
+  }, [data, itemWidth, startFromZero]);
+  const needsScroll = (0, import_react.useMemo)(() => {
+    return totalChartWidth;
+  }, [totalChartWidth]);
+  const processedData = (0, import_react.useMemo)(() => {
+    if (!data) return [];
+    return data;
+  }, [data, startFromZero]);
   const [tickPositions, setTickPositions] = (0, import_react.useState)([]);
   const tickRef = (0, import_react.useRef)([]);
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    if (startFromZero && payload.value === "") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "text",
       {
         x,
-        y: y + 14,
+        y: y + 11,
         textAnchor: "middle",
         fontSize: 12,
         fontWeight: 700,
@@ -413,79 +515,95 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       tickRef.current = [];
     });
     return () => cancelAnimationFrame(raf);
-  }, [data]);
+  }, [processedData]);
   const CustomDotWithShadow = (props2) => {
-    const { cx, cy, fill, stroke } = props2;
+    const { cx, cy, fill, stroke, payload } = props2;
     if (cx === void 0 || cy === void 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
+    if (startFromZero && (payload == null ? void 0 : payload.name) === "") {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_recharts.AreaChart,
-      {
-        data,
-        margin: { left: -30 },
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_recharts.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "3 3",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_recharts.XAxis,
-            {
-              dataKey: "name",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 35.5, right: 35.5 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_recharts.YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: {
-                fontSize: 12,
-                fontWeight: 700,
-                fill: "text-body-foreground",
-                textAnchor: "middle",
-                dx: -10
-              },
-              ticks: [0, 20, 40, 60, 80, 100],
-              domain: [-6, 110]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_recharts.Area,
-            {
-              type: "monotone",
-              dataKey: "value",
-              stroke: colorHex,
-              strokeWidth: 2,
-              fill: `url(#colorGradient-${uniqueId})`,
-              dot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-              activeDot: { r: 7, fill: colorHex }
-            }
-          )
-        ]
-      }
-    ) })
+  const chartContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        width: totalChartWidth || "100%",
+        minWidth: totalChartWidth || "100%"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        import_recharts.AreaChart,
+        {
+          width: totalChartWidth || 400,
+          height: chartHeight + 30,
+          data: processedData,
+          margin: { left: -30 },
+          className: "bg-body-background [&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.CartesianGrid,
+              {
+                vertical: true,
+                horizontal: false,
+                strokeDasharray: "3 3",
+                className: "stroke-neutral-light",
+                verticalPoints: tickPositions
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.XAxis,
+              {
+                dataKey: "name",
+                axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                tickLine: false,
+                tick: CustomTick,
+                padding: { left: 35.5, right: 35.5 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.YAxis,
+              {
+                axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                tickLine: false,
+                tick: {
+                  fontSize: 12,
+                  fontWeight: 700,
+                  fill: "text-body-foreground",
+                  textAnchor: "middle",
+                  dx: -10
+                },
+                ticks: [0, 20, 40, 60, 80, 100],
+                domain: [-6, 110]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.Area,
+              {
+                type: "monotone",
+                dataKey: "value",
+                stroke: colorHex,
+                strokeWidth: 2,
+                fill: `url(#colorGradient-${uniqueId})`,
+                dot: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+                activeDot: false
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    headerContent,
+    needsScroll ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(scrollArea_default, { direction: "x", size: "sm", children: chartContent }) : chartContent
   ] });
 });
 AreaChartComponent.displayName = "AreaChart";

package/dist/components/charts/areaChart.mjs

@@ -1,9 +1,12 @@
 "use client";
 import {
   areaChart_default
-} from "../../chunk-QKRCC26D.mjs";
+} from "../../chunk-IHLCZM5T.mjs";
+import "../../chunk-DQRAFUDA.mjs";
+import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   areaChart_default as default

package/dist/components/charts/barChart.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   barChart_default
-} from "../../chunk-OGJONB7G.mjs";
+} from "../../chunk-WNNOVISA.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   barChart_default as default