@deepnoid/ui 0.1.118 → 0.1.120

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 +146 -146
  2. package/dist/{chunk-CF7LIQF6.mjs → chunk-OGJONB7G.mjs} +57 -23
  3. package/dist/{chunk-WIZDHK4O.mjs → chunk-QKRCC26D.mjs} +63 -55
  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 +56 -22
  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 +154 -104
  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 +154 -104
  19. package/dist/index.mjs +8 -8
  20. package/package.json +1 -1
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,11 +491,11 @@ 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,
459
- padding: { left: 32, right: 32 }
498
+ padding: { left: 0, right: 0 }
460
499
  }
461
500
  ),
462
501
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -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-OGJONB7G.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";
package/dist/components/charts/index.js CHANGED
@@ -467,7 +467,7 @@ CircularProgress.displayName = "CircularProgress";
467
467
  var circularProgress_default = CircularProgress;
468
468
  var circularProgressStyle = tv({
469
469
  slots: {
470
- base: ["flex", "flex-col", "items-center", "gap-[20px]"],
470
+ base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
471
471
  background: ["fill-body-background", "border-neutral-light"],
472
472
  progress: ["transition-all", "duration-1000 ease-out"],
473
473
  percentage: ["text-xl", "font-bold", "text-body-foreground"],
@@ -548,67 +548,75 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
548
548
  };
549
549
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
550
550
  label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
551
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
552
- /* @__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: [
553
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
554
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
555
- ] }) }),
556
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
557
- import_recharts2.CartesianGrid,
558
- {
559
- vertical: true,
560
- horizontal: false,
561
- strokeDasharray: "3 3",
562
- className: "stroke-neutral-light",
563
- verticalPoints: tickPositions
564
- }
565
- ),
566
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
567
- import_recharts2.XAxis,
568
- {
569
- dataKey: "name",
570
- axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
571
- tickLine: false,
572
- tick: CustomTick,
573
- padding: { left: 35.5, right: 35.5 }
574
- }
575
- ),
576
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
577
- import_recharts2.YAxis,
578
- {
579
- axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
580
- tickLine: false,
581
- tick: {
582
- fontSize: 12,
583
- fontWeight: 700,
584
- fill: "text-body-foreground",
585
- textAnchor: "middle",
586
- dx: -10
587
- },
588
- ticks: [0, 20, 40, 60, 80, 100],
589
- domain: [-6, 110]
590
- }
591
- ),
592
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
593
- import_recharts2.Area,
594
- {
595
- type: "monotone",
596
- dataKey: "value",
597
- stroke: colorHex,
598
- strokeWidth: 2,
599
- fill: `url(#colorGradient-${uniqueId})`,
600
- dot: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
601
- activeDot: { r: 7, fill: colorHex }
602
- }
603
- )
604
- ] }) })
551
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
552
+ import_recharts2.AreaChart,
553
+ {
554
+ data,
555
+ margin: { left: -30 },
556
+ className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
557
+ children: [
558
+ /* @__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: [
559
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
560
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
561
+ ] }) }),
562
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
563
+ import_recharts2.CartesianGrid,
564
+ {
565
+ vertical: true,
566
+ horizontal: false,
567
+ strokeDasharray: "3 3",
568
+ className: "stroke-neutral-light",
569
+ verticalPoints: tickPositions
570
+ }
571
+ ),
572
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
573
+ import_recharts2.XAxis,
574
+ {
575
+ dataKey: "name",
576
+ axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
577
+ tickLine: false,
578
+ tick: CustomTick,
579
+ padding: { left: 35.5, right: 35.5 }
580
+ }
581
+ ),
582
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
583
+ import_recharts2.YAxis,
584
+ {
585
+ axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
586
+ tickLine: false,
587
+ tick: {
588
+ fontSize: 12,
589
+ fontWeight: 700,
590
+ fill: "text-body-foreground",
591
+ textAnchor: "middle",
592
+ dx: -10
593
+ },
594
+ ticks: [0, 20, 40, 60, 80, 100],
595
+ domain: [-6, 110]
596
+ }
597
+ ),
598
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
599
+ import_recharts2.Area,
600
+ {
601
+ type: "monotone",
602
+ dataKey: "value",
603
+ stroke: colorHex,
604
+ strokeWidth: 2,
605
+ fill: `url(#colorGradient-${uniqueId})`,
606
+ dot: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
607
+ activeDot: { r: 7, fill: colorHex }
608
+ }
609
+ )
610
+ ]
611
+ }
612
+ ) })
605
613
  ] });
606
614
  });
607
615
  AreaChartComponent.displayName = "AreaChart";
608
616
  var areaChart_default = AreaChartComponent;
609
617
  var areaChartStyle = tv({
610
618
  slots: {
611
- base: ["flex", "flex-col", "gap-[10px]"],
619
+ base: ["flex", "flex-col", "gap-[10px]", "select-none"],
612
620
  color: [],
613
621
  axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
614
622
  label: ["text-md", "font-bold", "text-body-foreground"]
@@ -634,13 +642,16 @@ var import_recharts3 = require("recharts");
634
642
  var import_jsx_runtime3 = require("react/jsx-runtime");
635
643
  var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
636
644
  const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
637
- const { data, label, classNames } = { ...props, ...variantProps };
645
+ const {
646
+ data,
647
+ label,
648
+ classNames,
649
+ yAxisTicks = [0, 20, 40, 60, 80, 100],
650
+ yAxisTickFormatter = (value) => `${value}`,
651
+ yAxisDomain = [-6, 110],
652
+ customTooltip
653
+ } = { ...props, ...variantProps };
638
654
  const slots = (0, import_react3.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
639
- const COLOR_MAP = {
640
- primary: "#C7E5FA",
641
- secondary: "#92DCB2",
642
- warning: "#DEC1FA"
643
- };
644
655
  const [tickPositions, setTickPositions] = (0, import_react3.useState)([]);
645
656
  const tickRef = (0, import_react3.useRef)([]);
646
657
  const CustomBarShape = (barProps) => {
@@ -676,6 +687,28 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
676
687
  }
677
688
  );
678
689
  };
690
+ const CustomYAxisTick = ({ x, y, payload }) => {
691
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
692
+ "text",
693
+ {
694
+ x: x - 10,
695
+ y,
696
+ textAnchor: "middle",
697
+ fontSize: 12,
698
+ fontWeight: 700,
699
+ fill: "currentColor",
700
+ className: "text-body-foreground",
701
+ dy: 4,
702
+ children: yAxisTickFormatter(payload.value)
703
+ }
704
+ );
705
+ };
706
+ const CustomTooltip = ({ active, payload, label: label2 }) => {
707
+ if (customTooltip && active && payload && payload.length) {
708
+ return customTooltip({ active, payload, label: label2 });
709
+ }
710
+ return null;
711
+ };
679
712
  (0, import_react3.useEffect)(() => {
680
713
  const raf = requestAnimationFrame(() => {
681
714
  const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -694,11 +727,25 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
694
727
  import_recharts3.BarChart,
695
728
  {
696
729
  data,
697
- margin: { left: -30 },
730
+ margin: { left: -20 },
698
731
  barSize: 20,
699
- barGap: 10,
732
+ barGap: 20,
700
733
  className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
701
734
  children: [
735
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
736
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
737
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
738
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
739
+ ] }),
740
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
741
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
742
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
743
+ ] }),
744
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
745
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
746
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
747
+ ] })
748
+ ] }),
702
749
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
703
750
  import_recharts3.CartesianGrid,
704
751
  {
@@ -712,11 +759,11 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
712
759
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
713
760
  import_recharts3.XAxis,
714
761
  {
715
- dataKey: "name",
762
+ dataKey: "title",
716
763
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
717
764
  tickLine: false,
718
765
  tick: CustomTick,
719
- padding: { left: 32, right: 32 }
766
+ padding: { left: 0, right: 0 }
720
767
  }
721
768
  ),
722
769
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -724,20 +771,15 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
724
771
  {
725
772
  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
726
773
  tickLine: false,
727
- tick: {
728
- fontSize: 12,
729
- fontWeight: 700,
730
- fill: "text-body-foreground",
731
- textAnchor: "middle",
732
- dx: -10
733
- },
734
- ticks: [0, 20, 40, 60, 80, 100],
735
- domain: [-6, 110]
774
+ tick: CustomYAxisTick,
775
+ ticks: yAxisTicks,
776
+ domain: yAxisDomain
736
777
  }
737
778
  ),
738
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
739
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
740
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
779
+ customTooltip && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
780
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
781
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
782
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
741
783
  ]
742
784
  }
743
785
  ) })
@@ -769,31 +811,39 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
769
811
  return Math.max(...data.map((item) => item.fullMark || 100));
770
812
  }, [data]);
771
813
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
772
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts4.RadarChart, { data, outerRadius: "80%", children: [
773
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
774
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
775
- import_recharts4.PolarAngleAxis,
776
- {
777
- dataKey: "name",
778
- tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
779
- tickFormatter: (value) => value,
780
- tickSize: 15
781
- }
782
- ),
783
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
784
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
785
- import_recharts4.Radar,
786
- {
787
- name: label,
788
- dataKey: "value",
789
- stroke: "#3F9CF2",
790
- fill: "#C7E5FA",
791
- strokeWidth: 1.75,
792
- dot: false,
793
- activeDot: false
794
- }
795
- )
796
- ] }) }),
814
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
815
+ import_recharts4.RadarChart,
816
+ {
817
+ data,
818
+ outerRadius: "80%",
819
+ className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
820
+ children: [
821
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
822
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
823
+ import_recharts4.PolarAngleAxis,
824
+ {
825
+ dataKey: "name",
826
+ tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
827
+ tickFormatter: (value) => value,
828
+ tickSize: 15
829
+ }
830
+ ),
831
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
832
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
833
+ import_recharts4.Radar,
834
+ {
835
+ name: label,
836
+ dataKey: "value",
837
+ stroke: "#3F9CF2",
838
+ fill: "#EFF8FF",
839
+ strokeWidth: 1.75,
840
+ dot: false,
841
+ activeDot: false
842
+ }
843
+ )
844
+ ]
845
+ }
846
+ ) }),
797
847
  label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
798
848
  ] });
799
849
  });
@@ -801,7 +851,7 @@ RadarChart.displayName = "RadarChart";
801
851
  var radarChart_default = RadarChart;
802
852
  var radarChartStyle = tv({
803
853
  slots: {
804
- base: ["flex", "flex-col", "items-center", "gap-[10px]"],
854
+ base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
805
855
  label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
806
856
  },
807
857
  variants: {},
package/dist/components/charts/index.mjs CHANGED
@@ -2,16 +2,16 @@
2
2
  import "../../chunk-VYNBJBXD.mjs";
3
3
  import {
4
4
  areaChart_default
5
- } from "../../chunk-WIZDHK4O.mjs";
5
+ } from "../../chunk-QKRCC26D.mjs";
6
6
  import {
7
7
  barChart_default
8
- } from "../../chunk-CF7LIQF6.mjs";
8
+ } from "../../chunk-OGJONB7G.mjs";
9
9
  import {
10
10
  circularProgress_default
11
- } from "../../chunk-KIN2UK2C.mjs";
11
+ } from "../../chunk-VB5NKWJG.mjs";
12
12
  import {
13
13
  radarChart_default
14
- } from "../../chunk-63KZGR73.mjs";
14
+ } from "../../chunk-UA24L44Z.mjs";
15
15
  import "../../chunk-E3G5QXSH.mjs";
16
16
  import "../../chunk-CDXBML6O.mjs";
17
17
  import "../../chunk-AC6TWLRT.mjs";
package/dist/components/charts/radarChart.js CHANGED
@@ -379,31 +379,39 @@ var RadarChart = (0, import_react.forwardRef)((originalProps, ref) => {
379
379
  return Math.max(...data.map((item) => item.fullMark || 100));
380
380
  }, [data]);
381
381
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
382
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.RadarChart, { data, outerRadius: "80%", children: [
383
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
384
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
385
- import_recharts.PolarAngleAxis,
386
- {
387
- dataKey: "name",
388
- tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
389
- tickFormatter: (value) => value,
390
- tickSize: 15
391
- }
392
- ),
393
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
394
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
395
- import_recharts.Radar,
396
- {
397
- name: label,
398
- dataKey: "value",
399
- stroke: "#3F9CF2",
400
- fill: "#C7E5FA",
401
- strokeWidth: 1.75,
402
- dot: false,
403
- activeDot: false
404
- }
405
- )
406
- ] }) }),
382
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
383
+ import_recharts.RadarChart,
384
+ {
385
+ data,
386
+ outerRadius: "80%",
387
+ className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
388
+ children: [
389
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
390
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
391
+ import_recharts.PolarAngleAxis,
392
+ {
393
+ dataKey: "name",
394
+ tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
395
+ tickFormatter: (value) => value,
396
+ tickSize: 15
397
+ }
398
+ ),
399
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
400
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
401
+ import_recharts.Radar,
402
+ {
403
+ name: label,
404
+ dataKey: "value",
405
+ stroke: "#3F9CF2",
406
+ fill: "#EFF8FF",
407
+ strokeWidth: 1.75,
408
+ dot: false,
409
+ activeDot: false
410
+ }
411
+ )
412
+ ]
413
+ }
414
+ ) }),
407
415
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
408
416
  ] });
409
417
  });
@@ -411,7 +419,7 @@ RadarChart.displayName = "RadarChart";
411
419
  var radarChart_default = RadarChart;
412
420
  var radarChartStyle = tv({
413
421
  slots: {
414
- base: ["flex", "flex-col", "items-center", "gap-[10px]"],
422
+ base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
415
423
  label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
416
424
  },
417
425
  variants: {},
package/dist/components/charts/radarChart.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  radarChart_default
4
- } from "../../chunk-63KZGR73.mjs";
4
+ } from "../../chunk-UA24L44Z.mjs";
5
5
  import "../../chunk-E3G5QXSH.mjs";
6
6
  import "../../chunk-CDXBML6O.mjs";
7
7
  import "../../chunk-AC6TWLRT.mjs";