@deepnoid/ui 0.1.118 → 0.1.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/.turbo/turbo-build.log +136 -136
  2. package/dist/{chunk-WIZDHK4O.mjs → chunk-QKRCC26D.mjs} +63 -55
  3. package/dist/{chunk-CF7LIQF6.mjs → chunk-U33MTXQX.mjs} +56 -22
  4. package/dist/{chunk-63KZGR73.mjs → chunk-UA24L44Z.mjs} +34 -26
  5. package/dist/{chunk-KIN2UK2C.mjs → chunk-VB5NKWJG.mjs} +1 -1
  6. package/dist/components/charts/areaChart.js +63 -55
  7. package/dist/components/charts/areaChart.mjs +1 -1
  8. package/dist/components/charts/barChart.d.mts +14 -4
  9. package/dist/components/charts/barChart.d.ts +14 -4
  10. package/dist/components/charts/barChart.js +55 -21
  11. package/dist/components/charts/barChart.mjs +1 -1
  12. package/dist/components/charts/circularProgress.js +1 -1
  13. package/dist/components/charts/circularProgress.mjs +1 -1
  14. package/dist/components/charts/index.js +153 -103
  15. package/dist/components/charts/index.mjs +4 -4
  16. package/dist/components/charts/radarChart.js +34 -26
  17. package/dist/components/charts/radarChart.mjs +1 -1
  18. package/dist/index.js +153 -103
  19. package/dist/index.mjs +4 -4
  20. package/package.json +1 -1
package/dist/{chunk-CF7LIQF6.mjs → chunk-U33MTXQX.mjs} RENAMED
@@ -8,17 +8,20 @@ import {
8
8
 
9
9
  // src/components/charts/barChart.tsx
10
10
  import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
11
- import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar } from "recharts";
11
+ import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar, Tooltip } from "recharts";
12
12
  import { jsx, jsxs } from "react/jsx-runtime";
13
13
  var BarChartComponent = forwardRef((originalProps, ref) => {
14
14
  const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
15
- const { data, label, classNames } = { ...props, ...variantProps };
15
+ const {
16
+ data,
17
+ label,
18
+ classNames,
19
+ yAxisTicks = [0, 20, 40, 60, 80, 100],
20
+ yAxisTickFormatter = (value) => `${value}%`,
21
+ yAxisDomain = [-6, 110],
22
+ customTooltip
23
+ } = { ...props, ...variantProps };
16
24
  const slots = useMemo(() => barChartStyle({ ...variantProps }), [variantProps]);
17
- const COLOR_MAP = {
18
- primary: "#C7E5FA",
19
- secondary: "#92DCB2",
20
- warning: "#DEC1FA"
21
- };
22
25
  const [tickPositions, setTickPositions] = useState([]);
23
26
  const tickRef = useRef([]);
24
27
  const CustomBarShape = (barProps) => {
@@ -54,6 +57,28 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
54
57
  }
55
58
  );
56
59
  };
60
+ const CustomYAxisTick = ({ x, y, payload }) => {
61
+ return /* @__PURE__ */ jsx(
62
+ "text",
63
+ {
64
+ x: x - 10,
65
+ y,
66
+ textAnchor: "middle",
67
+ fontSize: 12,
68
+ fontWeight: 700,
69
+ fill: "currentColor",
70
+ className: "text-body-foreground",
71
+ dy: 4,
72
+ children: yAxisTickFormatter(payload.value)
73
+ }
74
+ );
75
+ };
76
+ const CustomTooltip = ({ active, payload, label: label2 }) => {
77
+ if (customTooltip && active && payload && payload.length) {
78
+ return customTooltip({ active, payload, label: label2 });
79
+ }
80
+ return null;
81
+ };
57
82
  useEffect(() => {
58
83
  const raf = requestAnimationFrame(() => {
59
84
  const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -72,11 +97,25 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
72
97
  BarChart,
73
98
  {
74
99
  data,
75
- margin: { left: -30 },
100
+ margin: { left: -20 },
76
101
  barSize: 20,
77
- barGap: 10,
102
+ barGap: 20,
78
103
  className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
79
104
  children: [
105
+ /* @__PURE__ */ jsxs("defs", { children: [
106
+ /* @__PURE__ */ jsxs("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
107
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DEC1FA" }),
108
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3F9CF2" })
109
+ ] }),
110
+ /* @__PURE__ */ jsxs("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
111
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#C2E59C" }),
112
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#64B3F4" })
113
+ ] }),
114
+ /* @__PURE__ */ jsxs("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
115
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DDD6F3" }),
116
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#FAACA8" })
117
+ ] })
118
+ ] }),
80
119
  /* @__PURE__ */ jsx(
81
120
  CartesianGrid,
82
121
  {
@@ -90,7 +129,7 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
90
129
  /* @__PURE__ */ jsx(
91
130
  XAxis,
92
131
  {
93
- dataKey: "name",
132
+ dataKey: "title",
94
133
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
95
134
  tickLine: false,
96
135
  tick: CustomTick,
@@ -102,20 +141,15 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
102
141
  {
103
142
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
104
143
  tickLine: false,
105
- tick: {
106
- fontSize: 12,
107
- fontWeight: 700,
108
- fill: "text-body-foreground",
109
- textAnchor: "middle",
110
- dx: -10
111
- },
112
- ticks: [0, 20, 40, 60, 80, 100],
113
- domain: [-6, 110]
144
+ tick: CustomYAxisTick,
145
+ ticks: yAxisTicks,
146
+ domain: yAxisDomain
114
147
  }
115
148
  ),
116
- /* @__PURE__ */ jsx(Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
117
- /* @__PURE__ */ jsx(Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
118
- /* @__PURE__ */ jsx(Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
149
+ customTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "transparent" } }),
150
+ /* @__PURE__ */ jsx(Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
151
+ /* @__PURE__ */ jsx(Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
152
+ /* @__PURE__ */ jsx(Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
119
153
  ]
120
154
  }
121
155
  ) })
package/dist/{chunk-63KZGR73.mjs → chunk-UA24L44Z.mjs} RENAMED
@@ -26,31 +26,39 @@ var RadarChart = forwardRef((originalProps, ref) => {
26
26
  return Math.max(...data.map((item) => item.fullMark || 100));
27
27
  }, [data]);
28
28
  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
29
- /* @__PURE__ */ jsx(ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ jsxs(RechartsRadarChart, { data, outerRadius: "80%", children: [
30
- /* @__PURE__ */ jsx(PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
31
- /* @__PURE__ */ jsx(
32
- PolarAngleAxis,
33
- {
34
- dataKey: "name",
35
- tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
36
- tickFormatter: (value) => value,
37
- tickSize: 15
38
- }
39
- ),
40
- /* @__PURE__ */ jsx(PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
41
- /* @__PURE__ */ jsx(
42
- Radar,
43
- {
44
- name: label,
45
- dataKey: "value",
46
- stroke: "#3F9CF2",
47
- fill: "#C7E5FA",
48
- strokeWidth: 1.75,
49
- dot: false,
50
- activeDot: false
51
- }
52
- )
53
- ] }) }),
29
+ /* @__PURE__ */ jsx(ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ jsxs(
30
+ RechartsRadarChart,
31
+ {
32
+ data,
33
+ outerRadius: "80%",
34
+ className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
35
+ children: [
36
+ /* @__PURE__ */ jsx(PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
37
+ /* @__PURE__ */ jsx(
38
+ PolarAngleAxis,
39
+ {
40
+ dataKey: "name",
41
+ tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
42
+ tickFormatter: (value) => value,
43
+ tickSize: 15
44
+ }
45
+ ),
46
+ /* @__PURE__ */ jsx(PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
47
+ /* @__PURE__ */ jsx(
48
+ Radar,
49
+ {
50
+ name: label,
51
+ dataKey: "value",
52
+ stroke: "#3F9CF2",
53
+ fill: "#EFF8FF",
54
+ strokeWidth: 1.75,
55
+ dot: false,
56
+ activeDot: false
57
+ }
58
+ )
59
+ ]
60
+ }
61
+ ) }),
54
62
  label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
55
63
  ] });
56
64
  });
@@ -58,7 +66,7 @@ RadarChart.displayName = "RadarChart";
58
66
  var radarChart_default = RadarChart;
59
67
  var radarChartStyle = tv({
60
68
  slots: {
61
- base: ["flex", "flex-col", "items-center", "gap-[10px]"],
69
+ base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
62
70
  label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
63
71
  },
64
72
  variants: {},
package/dist/{chunk-KIN2UK2C.mjs → chunk-VB5NKWJG.mjs} RENAMED
@@ -102,7 +102,7 @@ CircularProgress.displayName = "CircularProgress";
102
102
  var circularProgress_default = CircularProgress;
103
103
  var circularProgressStyle = tv({
104
104
  slots: {
105
- base: ["flex", "flex-col", "items-center", "gap-[20px]"],
105
+ base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
106
106
  background: ["fill-body-background", "border-neutral-light"],
107
107
  progress: ["transition-all", "duration-1000 ease-out"],
108
108
  percentage: ["text-xl", "font-bold", "text-body-foreground"],
package/dist/components/charts/areaChart.js CHANGED
@@ -424,67 +424,75 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
424
424
  };
425
425
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
426
426
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
427
- /* @__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: [
428
- /* @__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: [
429
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
430
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
431
- ] }) }),
432
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
433
- import_recharts.CartesianGrid,
434
- {
435
- vertical: true,
436
- horizontal: false,
437
- strokeDasharray: "3 3",
438
- className: "stroke-neutral-light",
439
- verticalPoints: tickPositions
440
- }
441
- ),
442
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
443
- import_recharts.XAxis,
444
- {
445
- dataKey: "name",
446
- axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
447
- tickLine: false,
448
- tick: CustomTick,
449
- padding: { left: 35.5, right: 35.5 }
450
- }
451
- ),
452
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
453
- import_recharts.YAxis,
454
- {
455
- axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
456
- tickLine: false,
457
- tick: {
458
- fontSize: 12,
459
- fontWeight: 700,
460
- fill: "text-body-foreground",
461
- textAnchor: "middle",
462
- dx: -10
463
- },
464
- ticks: [0, 20, 40, 60, 80, 100],
465
- domain: [-6, 110]
466
- }
467
- ),
468
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
469
- import_recharts.Area,
470
- {
471
- type: "monotone",
472
- dataKey: "value",
473
- stroke: colorHex,
474
- strokeWidth: 2,
475
- fill: `url(#colorGradient-${uniqueId})`,
476
- dot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
477
- activeDot: { r: 7, fill: colorHex }
478
- }
479
- )
480
- ] }) })
427
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
428
+ import_recharts.AreaChart,
429
+ {
430
+ data,
431
+ margin: { left: -30 },
432
+ className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
433
+ children: [
434
+ /* @__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: [
435
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
436
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
437
+ ] }) }),
438
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
439
+ import_recharts.CartesianGrid,
440
+ {
441
+ vertical: true,
442
+ horizontal: false,
443
+ strokeDasharray: "3 3",
444
+ className: "stroke-neutral-light",
445
+ verticalPoints: tickPositions
446
+ }
447
+ ),
448
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
449
+ import_recharts.XAxis,
450
+ {
451
+ dataKey: "name",
452
+ axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
453
+ tickLine: false,
454
+ tick: CustomTick,
455
+ padding: { left: 35.5, right: 35.5 }
456
+ }
457
+ ),
458
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
459
+ import_recharts.YAxis,
460
+ {
461
+ axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
462
+ tickLine: false,
463
+ tick: {
464
+ fontSize: 12,
465
+ fontWeight: 700,
466
+ fill: "text-body-foreground",
467
+ textAnchor: "middle",
468
+ dx: -10
469
+ },
470
+ ticks: [0, 20, 40, 60, 80, 100],
471
+ domain: [-6, 110]
472
+ }
473
+ ),
474
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
475
+ import_recharts.Area,
476
+ {
477
+ type: "monotone",
478
+ dataKey: "value",
479
+ stroke: colorHex,
480
+ strokeWidth: 2,
481
+ fill: `url(#colorGradient-${uniqueId})`,
482
+ dot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
483
+ activeDot: { r: 7, fill: colorHex }
484
+ }
485
+ )
486
+ ]
487
+ }
488
+ ) })
481
489
  ] });
482
490
  });
483
491
  AreaChartComponent.displayName = "AreaChart";
484
492
  var areaChart_default = AreaChartComponent;
485
493
  var areaChartStyle = tv({
486
494
  slots: {
487
- base: ["flex", "flex-col", "gap-[10px]"],
495
+ base: ["flex", "flex-col", "gap-[10px]", "select-none"],
488
496
  color: [],
489
497
  axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
490
498
  label: ["text-md", "font-bold", "text-body-foreground"]
package/dist/components/charts/areaChart.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  areaChart_default
4
- } from "../../chunk-WIZDHK4O.mjs";
4
+ } from "../../chunk-QKRCC26D.mjs";
5
5
  import "../../chunk-E3G5QXSH.mjs";
6
6
  import "../../chunk-CDXBML6O.mjs";
7
7
  import "../../chunk-AC6TWLRT.mjs";
package/dist/components/charts/barChart.d.mts CHANGED
@@ -1,18 +1,28 @@
1
1
  import * as tailwind_variants from 'tailwind-variants';
2
2
  import { VariantProps } from 'tailwind-variants';
3
3
  import * as react from 'react';
4
+ import { ReactNode } from 'react';
4
5
  import { SlotsToClasses } from '../../utils/types.mjs';
5
6
 
6
7
  type BarData = {
7
- name: string;
8
- avg: number;
9
- high: number;
10
- low: number;
8
+ title: string;
9
+ blue: number;
10
+ green: number;
11
+ pink: number;
12
+ };
13
+ type TooltipProps = {
14
+ active: boolean;
15
+ payload: any[];
16
+ label: string;
11
17
  };
12
18
  type Props = {
13
19
  data?: BarData[];
14
20
  label?: string;
15
21
  classNames?: SlotsToClasses<barChartSlots>;
22
+ yAxisTicks?: number[];
23
+ yAxisTickFormatter?: (value: number) => string;
24
+ yAxisDomain?: [number, number];
25
+ customTooltip?: (props: TooltipProps) => ReactNode;
16
26
  };
17
27
  type barChartProps = Props & barChartVariantProps;
18
28
  declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;
package/dist/components/charts/barChart.d.ts CHANGED
@@ -1,18 +1,28 @@
1
1
  import * as tailwind_variants from 'tailwind-variants';
2
2
  import { VariantProps } from 'tailwind-variants';
3
3
  import * as react from 'react';
4
+ import { ReactNode } from 'react';
4
5
  import { SlotsToClasses } from '../../utils/types.js';
5
6
 
6
7
  type BarData = {
7
- name: string;
8
- avg: number;
9
- high: number;
10
- low: number;
8
+ title: string;
9
+ blue: number;
10
+ green: number;
11
+ pink: number;
12
+ };
13
+ type TooltipProps = {
14
+ active: boolean;
15
+ payload: any[];
16
+ label: string;
11
17
  };
12
18
  type Props = {
13
19
  data?: BarData[];
14
20
  label?: string;
15
21
  classNames?: SlotsToClasses<barChartSlots>;
22
+ yAxisTicks?: number[];
23
+ yAxisTickFormatter?: (value: number) => string;
24
+ yAxisDomain?: [number, number];
25
+ customTooltip?: (props: TooltipProps) => ReactNode;
16
26
  };
17
27
  type barChartProps = Props & barChartVariantProps;
18
28
  declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;
package/dist/components/charts/barChart.js CHANGED
@@ -374,13 +374,16 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
374
374
  var import_jsx_runtime = require("react/jsx-runtime");
375
375
  var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
376
376
  const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
377
- const { data, label, classNames } = { ...props, ...variantProps };
377
+ const {
378
+ data,
379
+ label,
380
+ classNames,
381
+ yAxisTicks = [0, 20, 40, 60, 80, 100],
382
+ yAxisTickFormatter = (value) => `${value}%`,
383
+ yAxisDomain = [-6, 110],
384
+ customTooltip
385
+ } = { ...props, ...variantProps };
378
386
  const slots = (0, import_react.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
379
- const COLOR_MAP = {
380
- primary: "#C7E5FA",
381
- secondary: "#92DCB2",
382
- warning: "#DEC1FA"
383
- };
384
387
  const [tickPositions, setTickPositions] = (0, import_react.useState)([]);
385
388
  const tickRef = (0, import_react.useRef)([]);
386
389
  const CustomBarShape = (barProps) => {
@@ -416,6 +419,28 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
416
419
  }
417
420
  );
418
421
  };
422
+ const CustomYAxisTick = ({ x, y, payload }) => {
423
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
424
+ "text",
425
+ {
426
+ x: x - 10,
427
+ y,
428
+ textAnchor: "middle",
429
+ fontSize: 12,
430
+ fontWeight: 700,
431
+ fill: "currentColor",
432
+ className: "text-body-foreground",
433
+ dy: 4,
434
+ children: yAxisTickFormatter(payload.value)
435
+ }
436
+ );
437
+ };
438
+ const CustomTooltip = ({ active, payload, label: label2 }) => {
439
+ if (customTooltip && active && payload && payload.length) {
440
+ return customTooltip({ active, payload, label: label2 });
441
+ }
442
+ return null;
443
+ };
419
444
  (0, import_react.useEffect)(() => {
420
445
  const raf = requestAnimationFrame(() => {
421
446
  const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -434,11 +459,25 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
434
459
  import_recharts.BarChart,
435
460
  {
436
461
  data,
437
- margin: { left: -30 },
462
+ margin: { left: -20 },
438
463
  barSize: 20,
439
- barGap: 10,
464
+ barGap: 20,
440
465
  className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
441
466
  children: [
467
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
468
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
469
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
470
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
471
+ ] }),
472
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
473
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
474
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
475
+ ] }),
476
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
477
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
478
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
479
+ ] })
480
+ ] }),
442
481
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
443
482
  import_recharts.CartesianGrid,
444
483
  {
@@ -452,7 +491,7 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
452
491
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
453
492
  import_recharts.XAxis,
454
493
  {
455
- dataKey: "name",
494
+ dataKey: "title",
456
495
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
457
496
  tickLine: false,
458
497
  tick: CustomTick,
@@ -464,20 +503,15 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
464
503
  {
465
504
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
466
505
  tickLine: false,
467
- tick: {
468
- fontSize: 12,
469
- fontWeight: 700,
470
- fill: "text-body-foreground",
471
- textAnchor: "middle",
472
- dx: -10
473
- },
474
- ticks: [0, 20, 40, 60, 80, 100],
475
- domain: [-6, 110]
506
+ tick: CustomYAxisTick,
507
+ ticks: yAxisTicks,
508
+ domain: yAxisDomain
476
509
  }
477
510
  ),
478
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
479
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
480
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
511
+ customTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
512
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
513
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
514
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
481
515
  ]
482
516
  }
483
517
  ) })
package/dist/components/charts/barChart.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  barChart_default
4
- } from "../../chunk-CF7LIQF6.mjs";
4
+ } from "../../chunk-U33MTXQX.mjs";
5
5
  import "../../chunk-E3G5QXSH.mjs";
6
6
  import "../../chunk-CDXBML6O.mjs";
7
7
  import "../../chunk-AC6TWLRT.mjs";
package/dist/components/charts/circularProgress.js CHANGED
@@ -462,7 +462,7 @@ CircularProgress.displayName = "CircularProgress";
462
462
  var circularProgress_default = CircularProgress;
463
463
  var circularProgressStyle = tv({
464
464
  slots: {
465
- base: ["flex", "flex-col", "items-center", "gap-[20px]"],
465
+ base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
466
466
  background: ["fill-body-background", "border-neutral-light"],
467
467
  progress: ["transition-all", "duration-1000 ease-out"],
468
468
  percentage: ["text-xl", "font-bold", "text-body-foreground"],
package/dist/components/charts/circularProgress.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  circularProgress_default
4
- } from "../../chunk-KIN2UK2C.mjs";
4
+ } from "../../chunk-VB5NKWJG.mjs";
5
5
  import "../../chunk-E3G5QXSH.mjs";
6
6
  import "../../chunk-CDXBML6O.mjs";
7
7
  import "../../chunk-AC6TWLRT.mjs";