@deepnoid/ui 0.1.117 → 0.1.119

package/dist/components/charts/areaChart.js

@@ -424,67 +424,75 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   };
   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 }, 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 }
-        }
-      )
-    ] }) })
+    /* @__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 }
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 });
 AreaChartComponent.displayName = "AreaChart";
 var areaChart_default = AreaChartComponent;
 var areaChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "gap-[10px]"],
+    base: ["flex", "flex-col", "gap-[10px]", "select-none"],
     color: [],
     axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
     label: ["text-md", "font-bold", "text-body-foreground"]

package/dist/components/charts/areaChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   areaChart_default
-} from "../../chunk-WIZDHK4O.mjs";
+} from "../../chunk-QKRCC26D.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -1,18 +1,28 @@
 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 BarData = {
-    name: string;
-    avg: number;
-    high: number;
-    low: number;
+    title: string;
+    blue: number;
+    green: number;
+    pink: number;
+};
+type TooltipProps = {
+    active: boolean;
+    payload: any[];
+    label: string;
 };
 type Props = {
     data?: BarData[];
     label?: string;
     classNames?: SlotsToClasses<barChartSlots>;
+    yAxisTicks?: number[];
+    yAxisTickFormatter?: (value: number) => string;
+    yAxisDomain?: [number, number];
+    customTooltip?: (props: TooltipProps) => ReactNode;
 };
 type barChartProps = Props & barChartVariantProps;
 declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;

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

@@ -1,18 +1,28 @@
 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 BarData = {
-    name: string;
-    avg: number;
-    high: number;
-    low: number;
+    title: string;
+    blue: number;
+    green: number;
+    pink: number;
+};
+type TooltipProps = {
+    active: boolean;
+    payload: any[];
+    label: string;
 };
 type Props = {
     data?: BarData[];
     label?: string;
     classNames?: SlotsToClasses<barChartSlots>;
+    yAxisTicks?: number[];
+    yAxisTickFormatter?: (value: number) => string;
+    yAxisDomain?: [number, number];
+    customTooltip?: (props: TooltipProps) => ReactNode;
 };
 type barChartProps = Props & barChartVariantProps;
 declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/charts/barChart.js

@@ -374,13 +374,16 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
 var import_jsx_runtime = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
-  const { data, label, classNames } = { ...props, ...variantProps };
+  const {
+    data,
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisTickFormatter = (value) => `${value}%`,
+    yAxisDomain = [-6, 110],
+    customTooltip
+  } = { ...props, ...variantProps };
   const slots = (0, import_react.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
-  const COLOR_MAP = {
-    primary: "#C7E5FA",
-    secondary: "#92DCB2",
-    warning: "#DEC1FA"
-  };
   const [tickPositions, setTickPositions] = (0, import_react.useState)([]);
   const tickRef = (0, import_react.useRef)([]);
   const CustomBarShape = (barProps) => {
@@ -416,6 +419,28 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       }
     );
   };
+  const CustomYAxisTick = ({ x, y, payload }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "text",
+      {
+        x: x - 10,
+        y,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        dy: 4,
+        children: yAxisTickFormatter(payload.value)
+      }
+    );
+  };
+  const CustomTooltip = ({ active, payload, label: label2 }) => {
+    if (customTooltip && active && payload && payload.length) {
+      return customTooltip({ active, payload, label: label2 });
+    }
+    return null;
+  };
   (0, import_react.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -434,11 +459,25 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       import_recharts.BarChart,
       {
         data,
-        margin: { left: -30 },
+        margin: { left: -20 },
         barSize: 20,
-        barGap: 10,
+        barGap: 20,
         className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_recharts.CartesianGrid,
             {
@@ -452,7 +491,7 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_recharts.XAxis,
             {
-              dataKey: "name",
+              dataKey: "title",
               axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
               tickLine: false,
               tick: CustomTick,
@@ -464,20 +503,15 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
             {
               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]
+              tick: CustomYAxisTick,
+              ticks: yAxisTicks,
+              domain: yAxisDomain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
         ]
       }
     ) })

package/dist/components/charts/barChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   barChart_default
-} from "../../chunk-CF7LIQF6.mjs";
+} from "../../chunk-U33MTXQX.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/circularProgress.js

@@ -462,7 +462,7 @@ CircularProgress.displayName = "CircularProgress";
 var circularProgress_default = CircularProgress;
 var circularProgressStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[20px]"],
+    base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
     percentage: ["text-xl", "font-bold", "text-body-foreground"],

package/dist/components/charts/circularProgress.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-KIN2UK2C.mjs";
+} from "../../chunk-VB5NKWJG.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";