@deepnoid/ui 0.1.118 → 0.1.120

package/dist/{chunk-CF7LIQF6.mjs → chunk-OGJONB7G.mjs}

@@ -8,17 +8,20 @@ import {
 
 // src/components/charts/barChart.tsx
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar } from "recharts";
+import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar, Tooltip } from "recharts";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BarChartComponent = 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 = useMemo(() => barChartStyle({ ...variantProps }), [variantProps]);
-  const COLOR_MAP = {
-    primary: "#C7E5FA",
-    secondary: "#92DCB2",
-    warning: "#DEC1FA"
-  };
   const [tickPositions, setTickPositions] = useState([]);
   const tickRef = useRef([]);
   const CustomBarShape = (barProps) => {
@@ -54,6 +57,28 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
       }
     );
   };
+  const CustomYAxisTick = ({ x, y, payload }) => {
+    return /* @__PURE__ */ 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;
+  };
   useEffect(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -72,11 +97,25 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
       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__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3F9CF2" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#C2E59C" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#64B3F4" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#FAACA8" })
+            ] })
+          ] }),
           /* @__PURE__ */ jsx(
             CartesianGrid,
             {
@@ -90,11 +129,11 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
           /* @__PURE__ */ jsx(
             XAxis,
             {
-              dataKey: "name",
+              dataKey: "title",
               axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
               tickLine: false,
               tick: CustomTick,
-              padding: { left: 32, right: 32 }
+              padding: { left: 0, right: 0 }
             }
           ),
           /* @__PURE__ */ jsx(
@@ -102,20 +141,15 @@ var BarChartComponent = 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__ */ jsx(Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ jsx(Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ jsx(Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+          customTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "transparent" } }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
         ]
       }
     ) })

package/dist/{chunk-WIZDHK4O.mjs → chunk-QKRCC26D.mjs}

@@ -62,67 +62,75 @@ var AreaChartComponent = forwardRef((originalProps, ref) => {
   };
   return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data, margin: { left: -30 }, children: [
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-        /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        CartesianGrid,
-        {
-          vertical: true,
-          horizontal: false,
-          strokeDasharray: "3 3",
-          className: "stroke-neutral-light",
-          verticalPoints: tickPositions
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: "name",
-          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-          tickLine: false,
-          tick: CustomTick,
-          padding: { left: 35.5, right: 35.5 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        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__ */ jsx(
-        Area,
-        {
-          type: "monotone",
-          dataKey: "value",
-          stroke: colorHex,
-          strokeWidth: 2,
-          fill: `url(#colorGradient-${uniqueId})`,
-          dot: /* @__PURE__ */ jsx(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-          activeDot: { r: 7, fill: colorHex }
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      AreaChart,
+      {
+        data,
+        margin: { left: -30 },
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "3 3",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "name",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 35.5, right: 35.5 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: "value",
+              stroke: colorHex,
+              strokeWidth: 2,
+              fill: `url(#colorGradient-${uniqueId})`,
+              dot: /* @__PURE__ */ 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/{chunk-63KZGR73.mjs → chunk-UA24L44Z.mjs}

@@ -26,31 +26,39 @@ var RadarChart = forwardRef((originalProps, ref) => {
     return Math.max(...data.map((item) => item.fullMark || 100));
   }, [data]);
   return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ jsxs(RechartsRadarChart, { data, outerRadius: "80%", children: [
-      /* @__PURE__ */ jsx(PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
-      /* @__PURE__ */ jsx(
-        PolarAngleAxis,
-        {
-          dataKey: "name",
-          tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
-          tickFormatter: (value) => value,
-          tickSize: 15
-        }
-      ),
-      /* @__PURE__ */ jsx(PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
-      /* @__PURE__ */ jsx(
-        Radar,
-        {
-          name: label,
-          dataKey: "value",
-          stroke: "#3F9CF2",
-          fill: "#C7E5FA",
-          strokeWidth: 1.75,
-          dot: false,
-          activeDot: false
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ jsxs(
+      RechartsRadarChart,
+      {
+        data,
+        outerRadius: "80%",
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ jsx(PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
+          /* @__PURE__ */ jsx(
+            PolarAngleAxis,
+            {
+              dataKey: "name",
+              tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
+              tickFormatter: (value) => value,
+              tickSize: 15
+            }
+          ),
+          /* @__PURE__ */ jsx(PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
+          /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: label,
+              dataKey: "value",
+              stroke: "#3F9CF2",
+              fill: "#EFF8FF",
+              strokeWidth: 1.75,
+              dot: false,
+              activeDot: false
+            }
+          )
+        ]
+      }
+    ) }),
     label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
@@ -58,7 +66,7 @@ RadarChart.displayName = "RadarChart";
 var radarChart_default = RadarChart;
 var radarChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[10px]"],
+    base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
     label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {},

package/dist/{chunk-KIN2UK2C.mjs → chunk-VB5NKWJG.mjs}

@@ -102,7 +102,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/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>>;