@deepnoid/ui 0.1.48 → 0.1.50

package/dist/index.js

@@ -102,9 +102,10 @@ var require_plugin = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AreaChart: () => areaCharts_default,
+  AreaChart: () => areaChart_default,
   Avatar: () => avatar_default,
   Backdrop: () => backdrop_default,
+  BarChart: () => barChart_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
   ButtonGroup: () => button_group_default,
@@ -10523,11 +10524,11 @@ var import_react34 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
-  const { title, size = 150, color, percentage, unit, classNames } = { ...props, ...variantProps };
+  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
   const slots = (0, import_react34.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
-      name: title,
+      name: label,
       value: percentage
     }
   ];
@@ -10576,7 +10577,7 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
         unit
       ] }) })
     ] }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title })
+    label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
 CircularProgress.displayName = "CircularProgress";
@@ -10587,7 +10588,7 @@ var circularProgressStyle = tv({
     background: [],
     progress: ["transition-all", "duration-1000 ease-out"],
     text: ["text-xl", "font-bold"],
-    title: ["text-md", "font-bold", "text-center", "text-body-foreground"]
+    label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
     color: {
@@ -10613,14 +10614,14 @@ var circularProgressStyle = tv({
   }
 });
 
-// src/components/charts/areaCharts.tsx
+// src/components/charts/areaChart.tsx
 var import_react35 = require("react");
 var import_recharts2 = require("recharts");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) => {
   const uniqueId = (0, import_react35.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
-  const { areaData, color = "primary", classNames } = { ...props, ...variantProps };
+  const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
   const slots = (0, import_react35.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
@@ -10658,7 +10659,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
       tickRef.current = [];
     });
     return () => cancelAnimationFrame(raf);
-  }, [areaData]);
+  }, [data]);
   const CustomDotWithShadow = (props2) => {
     const { cx, cy, fill, stroke } = props2;
     if (cx === void 0 || cy === void 0) return null;
@@ -10667,68 +10668,72 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_recharts2.AreaChart, { data: areaData, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_recharts2.CartesianGrid,
-      {
-        vertical: true,
-        horizontal: false,
-        strokeDasharray: "3 3",
-        className: "stroke-neutral-light",
-        verticalPoints: tickPositions
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_recharts2.XAxis,
-      {
-        dataKey: "name",
-        axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-        tickLine: false,
-        tick: CustomTick,
-        padding: { left: 35.5, right: 35.5 }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_recharts2.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: [-10, 110]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_recharts2.Area,
-      {
-        type: "monotone",
-        dataKey: "value",
-        stroke: colorHex,
-        strokeWidth: 2,
-        fill: `url(#colorGradient-${uniqueId})`,
-        dot: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-        activeDot: { r: 7, fill: colorHex }
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        import_recharts2.CartesianGrid,
+        {
+          vertical: true,
+          horizontal: false,
+          strokeDasharray: "3 3",
+          className: "stroke-neutral-light",
+          verticalPoints: tickPositions
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        import_recharts2.XAxis,
+        {
+          dataKey: "name",
+          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+          tickLine: false,
+          tick: CustomTick,
+          padding: { left: 35.5, right: 35.5 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        import_recharts2.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_runtime38.jsx)(
+        import_recharts2.Area,
+        {
+          type: "monotone",
+          dataKey: "value",
+          stroke: colorHex,
+          strokeWidth: 2,
+          fill: `url(#colorGradient-${uniqueId})`,
+          dot: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+          activeDot: { r: 7, fill: colorHex }
+        }
+      )
+    ] }) })
+  ] });
 });
 AreaChartComponent.displayName = "AreaChart";
-var areaCharts_default = AreaChartComponent;
+var areaChart_default = AreaChartComponent;
 var areaChartStyle = tv({
   slots: {
-    base: [],
+    base: ["flex", "flex-col", "gap-[10px]"],
     color: [],
-    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"]
+    axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
+    label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {
     color: {
@@ -10744,11 +10749,130 @@ var areaChartStyle = tv({
     color: "primary"
   }
 });
+
+// src/components/charts/barChart.tsx
+var import_react36 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
+  const { data, label, classNames } = { ...props, ...variantProps };
+  const slots = (0, import_react36.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
+  const COLOR_MAP = {
+    primary: "#C7E5FA",
+    secondary: "#DEC1FA",
+    warning: "#F9C967"
+  };
+  const [tickPositions, setTickPositions] = (0, import_react36.useState)([]);
+  const tickRef = (0, import_react36.useRef)([]);
+  const CustomBarShape = (barProps) => {
+    const { x, y, width, height, fill } = barProps;
+    const radius = 5;
+    const extraHeight = 10;
+    const adjustedHeight = height + extraHeight;
+    const adjustedY = y;
+    const bottomY = adjustedY + adjustedHeight;
+    return height ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "path",
+      {
+        d: `M${x},${bottomY} L${x},${adjustedY + radius} Q${x},${adjustedY} ${x + radius},${adjustedY} L${x + width - radius},${adjustedY} Q${x + width},${adjustedY} ${x + width},${adjustedY + radius} L${x + width},${bottomY} Z`,
+        fill
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { x, y, width, height: 0, fill });
+  };
+  const CustomTick = ({ x, y, payload }) => {
+    if (x !== void 0) {
+      tickRef.current.push(x);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        children: payload.value
+      }
+    );
+  };
+  (0, import_react36.useEffect)(() => {
+    const raf = requestAnimationFrame(() => {
+      const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
+      const mids = [];
+      for (let i = 0; i < unique.length - 1; i++) {
+        mids.push((unique[i] + unique[i + 1]) / 2);
+      }
+      setTickPositions(mids);
+      tickRef.current = [];
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [data]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_recharts3.CartesianGrid,
+        {
+          vertical: true,
+          horizontal: false,
+          strokeDasharray: "3 3",
+          className: "stroke-neutral-light",
+          verticalPoints: tickPositions
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_recharts3.XAxis,
+        {
+          dataKey: "name",
+          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+          tickLine: false,
+          tick: CustomTick,
+          padding: { left: 32, right: 32 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_recharts3.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_runtime39.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+    ] }) })
+  ] });
+});
+BarChartComponent.displayName = "barChart";
+var barChart_default = BarChartComponent;
+var barChartStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[10px]"],
+    label: ["text-md", "font-bold", "text-body-foreground"]
+  },
+  variants: {},
+  defaultVariants: {
+    color: "primary"
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
   Avatar,
   Backdrop,
+  BarChart,
   Breadcrumb,
   Button,
   ButtonGroup,

package/dist/index.mjs

@@ -2,17 +2,16 @@
 import "./chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "./chunk-WPIFIRCJ.mjs";
-import "./chunk-HIE2YRGA.mjs";
+} from "./chunk-NFQMXW4Z.mjs";
+import "./chunk-DX3KXNP6.mjs";
 import {
-  tooltip_default
-} from "./chunk-IL5ENWCR.mjs";
-import "./chunk-ZMOAFSYE.mjs";
-import "./chunk-WSIADHVC.mjs";
-import "./chunk-3MY6LO7N.mjs";
+  table_default
+} from "./chunk-RIW4TT6V.mjs";
 import {
-  tabs_default
-} from "./chunk-SSMMWMQC.mjs";
+  definition_table_default
+} from "./chunk-6TIIBU7J.mjs";
+import "./chunk-BPEMHZH3.mjs";
+import "./chunk-P7YYNA6L.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -21,87 +20,91 @@ import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "./chunk-RTJZEFLZ.mjs";
-import {
-  toast_default
-} from "./chunk-7W2ZI2DD.mjs";
+} from "./chunk-IBI3OVQI.mjs";
 import "./chunk-ZOTHPHXA.mjs";
-import "./chunk-LVFI2NOH.mjs";
 import {
-  switch_default
-} from "./chunk-AJUQBMSV.mjs";
-import "./chunk-DX3KXNP6.mjs";
-import {
-  table_default
-} from "./chunk-JLRQLPXR.mjs";
-import "./chunk-DQRAFUDA.mjs";
+  toast_default
+} from "./chunk-MEY4IL7D.mjs";
+import "./chunk-HIE2YRGA.mjs";
 import {
-  scrollArea_default
-} from "./chunk-M37VBNB3.mjs";
-import "./chunk-SBL6IHEW.mjs";
+  tooltip_default
+} from "./chunk-Z2537DF6.mjs";
+import "./chunk-ZMOAFSYE.mjs";
+import "./chunk-WSIADHVC.mjs";
+import "./chunk-QCEKPS7U.mjs";
 import {
-  definition_table_default
-} from "./chunk-6TIIBU7J.mjs";
-import "./chunk-KJMJIFPS.mjs";
+  select_default
+} from "./chunk-ZYWQWFVT.mjs";
 import "./chunk-MZ76AA76.mjs";
 import {
   skeleton_default
 } from "./chunk-6PN3DGOE.mjs";
+import "./chunk-LVFI2NOH.mjs";
+import {
+  switch_default
+} from "./chunk-AJUQBMSV.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-2YMAKIZ6.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
-} from "./chunk-33LANVZV.mjs";
-import "./chunk-QCEKPS7U.mjs";
+} from "./chunk-QIRL6HY6.mjs";
+import "./chunk-DQRAFUDA.mjs";
 import {
-  select_default
-} from "./chunk-XWBAGKP6.mjs";
+  scrollArea_default
+} from "./chunk-M37VBNB3.mjs";
 import "./chunk-DJOG6Z35.mjs";
 import {
   modal_default
-} from "./chunk-LR3SWRB4.mjs";
+} from "./chunk-IC25OKBJ.mjs";
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "./chunk-ZSG4NGLK.mjs";
+} from "./chunk-MCNCHQ33.mjs";
 import "./chunk-F3HENRVM.mjs";
 import "./chunk-RLXOHILK.mjs";
 import {
   fileUpload_default
-} from "./chunk-O6YBE7V3.mjs";
+} from "./chunk-25QOEKXS.mjs";
 import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "./chunk-R62HK726.mjs";
-import "./chunk-MGEWSREV.mjs";
-import {
-  chip_default
-} from "./chunk-Y6XQTWB5.mjs";
+} from "./chunk-GH6CPGFN.mjs";
+import "./chunk-XOH6GWRD.mjs";
 import "./chunk-QZ3LVYJW.mjs";
 import {
   checkbox_default
-} from "./chunk-YLRYHUTW.mjs";
+} from "./chunk-D6QI3DJG.mjs";
+import "./chunk-MGEWSREV.mjs";
+import {
+  chip_default
+} from "./chunk-WLNLVX7Q.mjs";
 import "./chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "./chunk-RJ5AGYX2.mjs";
-import "./chunk-FWJ2ZKH6.mjs";
-import "./chunk-X6D7C7QZ.mjs";
-import "./chunk-P732YGHO.mjs";
-import "./chunk-QK2OK7WS.mjs";
+} from "./chunk-C7AFIF2M.mjs";
+import "./chunk-KYJTZPXY.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
 import {
   list_default
-} from "./chunk-UFVQPPPW.mjs";
+} from "./chunk-HIVPDIEP.mjs";
 import {
   listItem_default
-} from "./chunk-W45H2ZMW.mjs";
-import "./chunk-3YMMVZDL.mjs";
+} from "./chunk-RT3S3VVJ.mjs";
+import "./chunk-FWJ2ZKH6.mjs";
+import "./chunk-A7RU3FU5.mjs";
+import "./chunk-P732YGHO.mjs";
 import {
-  areaCharts_default
-} from "./chunk-VYLYF6G5.mjs";
+  areaChart_default
+} from "./chunk-ZOENHWSZ.mjs";
+import {
+  barChart_default
+} from "./chunk-76B5LZBM.mjs";
 import {
   circularProgress_default
-} from "./chunk-FEAPUDMZ.mjs";
+} from "./chunk-U2NPH2O3.mjs";
 import "./chunk-7DLOYKVC.mjs";
 import {
   avatar_default
@@ -109,21 +112,21 @@ import {
 import "./chunk-SE5TU755.mjs";
 import {
   backdrop_default
-} from "./chunk-P5QCU457.mjs";
+} from "./chunk-LL6F3WDX.mjs";
 import "./chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "./chunk-L2VA3ACH.mjs";
+} from "./chunk-PXIVYA5G.mjs";
 import "./chunk-MY5U63QO.mjs";
 import {
   button_group_default
 } from "./chunk-LPZOH3RP.mjs";
 import {
   button_default
-} from "./chunk-7J3KVOTS.mjs";
+} from "./chunk-UB4YBFOT.mjs";
 import {
   icon_button_default
-} from "./chunk-6K3E5BVO.mjs";
+} from "./chunk-7TAGGLNY.mjs";
 import "./chunk-6WSACUIB.mjs";
 import "./chunk-LXHUO6VM.mjs";
 import "./chunk-6PNKRBUT.mjs";
@@ -134,19 +137,20 @@ import {
 } from "./chunk-2TKEWFGH.mjs";
 import {
   text_button_default
-} from "./chunk-2PKM7SLZ.mjs";
+} from "./chunk-WFMFC7R6.mjs";
 import "./chunk-2SDYFOZL.mjs";
-import "./chunk-27Y6K5NK.mjs";
-import "./chunk-E3G5QXSH.mjs";
 import {
   deepnoidUi,
   tv
 } from "./chunk-4ZJFD3L3.mjs";
+import "./chunk-27Y6K5NK.mjs";
+import "./chunk-E3G5QXSH.mjs";
 import "./chunk-AC6TWLRT.mjs";
 export {
-  areaCharts_default as AreaChart,
+  areaChart_default as AreaChart,
   avatar_default as Avatar,
   backdrop_default as Backdrop,
+  barChart_default as BarChart,
   breadcrumb_default as Breadcrumb,
   button_default as Button,
   button_group_default as ButtonGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "license": "MIT",
   "sideEffects": false,
   "exports": {