@deepnoid/ui 0.1.167 → 0.1.169

package/dist/chunk-B4UNRT7U.mjs

@@ -0,0 +1,192 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-U4DJHAM5.mjs";
+
+// src/components/charts/simpleBarChart.tsx
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SimpleBarChartComponent = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, simpleBarChartStyle.variantKeys);
+  const {
+    data = [],
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisDomain = [0, 100],
+    barGap = 20,
+    tooltipFormatter
+  } = { ...props, ...variantProps };
+  const slots = useMemo(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [tooltipLeft, setTooltipLeft] = useState(0);
+  const [tickPositions, setTickPositions] = useState([]);
+  const tickRef = useRef([]);
+  const [tooltipState, setTooltipState] = useState(null);
+  const handleMouseEnter = (e) => {
+    if (!tooltipFormatter || !chartRef.current) return;
+    const { payload, x, y } = e;
+    if (!payload) return;
+    setTooltipState({
+      x,
+      y,
+      value: payload.value,
+      label: payload.title
+    });
+  };
+  const handleMouseLeave = () => {
+    setTooltipState(null);
+  };
+  const CustomBarShape = ({ x, y, width, height, fill }) => {
+    const radius = 4;
+    const extraHeight = 10;
+    const adjustedHeight = height + extraHeight;
+    const adjustedY = y - extraHeight;
+    const bottomY = adjustedY + adjustedHeight;
+    return height > 0 ? /* @__PURE__ */ 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__ */ jsx("rect", { x, y, width, height: 0, fill });
+  };
+  const CustomTick = ({ x, y, payload }) => {
+    if (x !== void 0) tickRef.current.push(x);
+    return /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        children: payload.value
+      }
+    );
+  };
+  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]);
+  useLayoutEffect(() => {
+    if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
+    const chartRect = chartRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const chartWidth = chartRect.width;
+    const tooltipWidth = tooltipRect.width;
+    let left = tooltipState.x - tooltipWidth / 2;
+    const padding = 8;
+    if (left < padding) {
+      left = padding;
+    } else if (left + tooltipWidth > chartWidth - padding) {
+      left = chartWidth - tooltipWidth - padding;
+    }
+    setTooltipLeft(left);
+  }, [tooltipState]);
+  return /* @__PURE__ */ jsxs("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
+    label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ jsxs(
+      BarChart,
+      {
+        data,
+        margin: { left: 0, right: 0, top: 0, bottom: 0 },
+        barSize: 10,
+        barGap,
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "4 4",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "0",
+              strokeWidth: 2,
+              className: "stroke-neutral-light",
+              verticalPoints: [0]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "title",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 0, right: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "value",
+              fill: "#C7E5FA",
+              shape: CustomBarShape,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave
+            }
+          )
+        ]
+      }
+    ) }),
+    tooltipFormatter && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tooltipRef,
+        style: {
+          position: "absolute",
+          left: tooltipLeft + 5,
+          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
+          pointerEvents: "none",
+          zIndex: 10,
+          opacity: tooltipState ? 1 : 0,
+          transition: "opacity 0.1s ease-out",
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
+        },
+        children: tooltipState && tooltipFormatter(tooltipState)
+      }
+    )
+  ] });
+});
+SimpleBarChartComponent.displayName = "simpleBarChart";
+var simpleBarChart_default = SimpleBarChartComponent;
+var simpleBarChartStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[10px]", "select-none", "relative", "w-full"],
+    label: ["text-md", "font-bold", "text-common-black"]
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+export {
+  simpleBarChart_default
+};

package/dist/{chunk-BRVQTI2T.mjs → chunk-JOK735WN.mjs}

@@ -145,7 +145,7 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
             {
               vertical: true,
               horizontal: false,
-              strokeDasharray: "3 3",
+              strokeDasharray: "4 4",
               className: "stroke-neutral-light",
               verticalPoints: tickPositions
             }
@@ -234,8 +234,14 @@ var barChartStyle = tv({
   variants: {},
   defaultVariants: {}
 });
-function BarChartTooltip({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "text-md text-common-white bg-common-black max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold", children });
+function BarChartTooltip({ className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `text-md text-common-white bg-common-black flex max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold ${className}`,
+      children
+    }
+  );
 }
 
 export {

package/dist/{chunk-ARNMOGRH.mjs → chunk-LH6Z7SDZ.mjs}

@@ -115,7 +115,7 @@ var AreaChartComponent = forwardRef((originalProps, ref) => {
               {
                 vertical: true,
                 horizontal: false,
-                strokeDasharray: "3 3",
+                strokeDasharray: "4 4",
                 className: "stroke-neutral-light",
                 verticalPoints: tickPositions
               }

package/dist/components/charts/areaChart.js

@@ -558,7 +558,7 @@ var AreaChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
               {
                 vertical: true,
                 horizontal: false,
-                strokeDasharray: "3 3",
+                strokeDasharray: "4 4",
                 className: "stroke-neutral-light",
                 verticalPoints: tickPositions
               }

package/dist/components/charts/areaChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   areaChart_default
-} from "../../chunk-ARNMOGRH.mjs";
+} from "../../chunk-LH6Z7SDZ.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-EWS3FESG.mjs";
 import "../../chunk-E3G5QXSH.mjs";

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

@@ -41,8 +41,10 @@ declare const barChartStyle: tailwind_variants.TVReturnType<{}, {
 }, undefined, unknown, unknown, undefined>>;
 type barChartVariantProps = VariantProps<typeof barChartStyle>;
 type barChartSlots = keyof ReturnType<typeof barChartStyle>;
-declare function BarChartTooltip({ children }: {
+type BarChartTooltipProps = {
+    className?: string;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+};
+declare function BarChartTooltip({ className, children }: BarChartTooltipProps): react_jsx_runtime.JSX.Element;
 
 export { BarChartTooltip, type barChartProps, BarChartComponent as default };

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

@@ -41,8 +41,10 @@ declare const barChartStyle: tailwind_variants.TVReturnType<{}, {
 }, undefined, unknown, unknown, undefined>>;
 type barChartVariantProps = VariantProps<typeof barChartStyle>;
 type barChartSlots = keyof ReturnType<typeof barChartStyle>;
-declare function BarChartTooltip({ children }: {
+type BarChartTooltipProps = {
+    className?: string;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+};
+declare function BarChartTooltip({ className, children }: BarChartTooltipProps): react_jsx_runtime.JSX.Element;
 
 export { BarChartTooltip, type barChartProps, BarChartComponent as default };

package/dist/components/charts/barChart.js

@@ -513,7 +513,7 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
             {
               vertical: true,
               horizontal: false,
-              strokeDasharray: "3 3",
+              strokeDasharray: "4 4",
               className: "stroke-neutral-light",
               verticalPoints: tickPositions
             }
@@ -602,8 +602,14 @@ var barChartStyle = tv({
   variants: {},
   defaultVariants: {}
 });
-function BarChartTooltip({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-md text-common-white bg-common-black max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold", children });
+function BarChartTooltip({ className = "", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `text-md text-common-white bg-common-black flex max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold ${className}`,
+      children
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/charts/barChart.mjs

@@ -2,7 +2,7 @@
 import {
   BarChartTooltip,
   barChart_default
-} from "../../chunk-BRVQTI2T.mjs";
+} from "../../chunk-JOK735WN.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-U4DJHAM5.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -2,6 +2,7 @@ export { default as CircularProgress } from './circularProgress.mjs';
 export { default as AreaChart } from './areaChart.mjs';
 export { default as BarChart, BarChartTooltip } from './barChart.mjs';
 export { default as RadarChart } from './radarChart.mjs';
+export { default as SimpleBarChart } from './simpleBarChart.mjs';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.mjs';

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

@@ -2,6 +2,7 @@ export { default as CircularProgress } from './circularProgress.js';
 export { default as AreaChart } from './areaChart.js';
 export { default as BarChart, BarChartTooltip } from './barChart.js';
 export { default as RadarChart } from './radarChart.js';
+export { default as SimpleBarChart } from './simpleBarChart.js';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.js';

package/dist/components/charts/index.js

@@ -106,7 +106,8 @@ __export(charts_exports, {
   BarChart: () => barChart_default,
   BarChartTooltip: () => BarChartTooltip,
   CircularProgress: () => circularProgress_default,
-  RadarChart: () => radarChart_default
+  RadarChart: () => radarChart_default,
+  SimpleBarChart: () => simpleBarChart_default
 });
 module.exports = __toCommonJS(charts_exports);
 
@@ -715,7 +716,7 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
               {
                 vertical: true,
                 horizontal: false,
-                strokeDasharray: "3 3",
+                strokeDasharray: "4 4",
                 className: "stroke-neutral-light",
                 verticalPoints: tickPositions
               }
@@ -932,7 +933,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
             {
               vertical: true,
               horizontal: false,
-              strokeDasharray: "3 3",
+              strokeDasharray: "4 4",
               className: "stroke-neutral-light",
               verticalPoints: tickPositions
             }
@@ -1021,8 +1022,14 @@ var barChartStyle = tv({
   variants: {},
   defaultVariants: {}
 });
-function BarChartTooltip({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-md text-common-white bg-common-black max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold", children });
+function BarChartTooltip({ className = "", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: `text-md text-common-white bg-common-black flex max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold ${className}`,
+      children
+    }
+  );
 }
 
 // src/components/charts/radarChart.tsx
@@ -1128,11 +1135,193 @@ var radarChartStyle = tv({
     color: "primary"
   }
 });
+
+// src/components/charts/simpleBarChart.tsx
+var import_react5 = require("react");
+var import_recharts5 = require("recharts");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, simpleBarChartStyle.variantKeys);
+  const {
+    data = [],
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisDomain = [0, 100],
+    barGap = 20,
+    tooltipFormatter
+  } = { ...props, ...variantProps };
+  const slots = (0, import_react5.useMemo)(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = (0, import_react5.useRef)(null);
+  const tooltipRef = (0, import_react5.useRef)(null);
+  const [tooltipLeft, setTooltipLeft] = (0, import_react5.useState)(0);
+  const [tickPositions, setTickPositions] = (0, import_react5.useState)([]);
+  const tickRef = (0, import_react5.useRef)([]);
+  const [tooltipState, setTooltipState] = (0, import_react5.useState)(null);
+  const handleMouseEnter = (e) => {
+    if (!tooltipFormatter || !chartRef.current) return;
+    const { payload, x, y } = e;
+    if (!payload) return;
+    setTooltipState({
+      x,
+      y,
+      value: payload.value,
+      label: payload.title
+    });
+  };
+  const handleMouseLeave = () => {
+    setTooltipState(null);
+  };
+  const CustomBarShape = ({ x, y, width, height, fill }) => {
+    const radius = 4;
+    const extraHeight = 10;
+    const adjustedHeight = height + extraHeight;
+    const adjustedY = y - extraHeight;
+    const bottomY = adjustedY + adjustedHeight;
+    return height > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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_runtime6.jsx)(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        children: payload.value
+      }
+    );
+  };
+  (0, import_react5.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]);
+  (0, import_react5.useLayoutEffect)(() => {
+    if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
+    const chartRect = chartRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const chartWidth = chartRect.width;
+    const tooltipWidth = tooltipRect.width;
+    let left = tooltipState.x - tooltipWidth / 2;
+    const padding2 = 8;
+    if (left < padding2) {
+      left = padding2;
+    } else if (left + tooltipWidth > chartWidth - padding2) {
+      left = chartWidth - tooltipWidth - padding2;
+    }
+    setTooltipLeft(left);
+  }, [tooltipState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_recharts5.BarChart,
+      {
+        data,
+        margin: { left: 0, right: 0, top: 0, bottom: 0 },
+        barSize: 10,
+        barGap,
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_recharts5.CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "4 4",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_recharts5.CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "0",
+              strokeWidth: 2,
+              className: "stroke-neutral-light",
+              verticalPoints: [0]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_recharts5.XAxis,
+            {
+              dataKey: "title",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 0, right: 0 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_recharts5.Bar,
+            {
+              dataKey: "value",
+              fill: "#C7E5FA",
+              shape: CustomBarShape,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave
+            }
+          )
+        ]
+      }
+    ) }),
+    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        ref: tooltipRef,
+        style: {
+          position: "absolute",
+          left: tooltipLeft + 5,
+          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
+          pointerEvents: "none",
+          zIndex: 10,
+          opacity: tooltipState ? 1 : 0,
+          transition: "opacity 0.1s ease-out",
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
+        },
+        children: tooltipState && tooltipFormatter(tooltipState)
+      }
+    )
+  ] });
+});
+SimpleBarChartComponent.displayName = "simpleBarChart";
+var simpleBarChart_default = SimpleBarChartComponent;
+var simpleBarChartStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[10px]", "select-none", "relative", "w-full"],
+    label: ["text-md", "font-bold", "text-common-black"]
+  },
+  variants: {},
+  defaultVariants: {}
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
   BarChart,
   BarChartTooltip,
   CircularProgress,
-  RadarChart
+  RadarChart,
+  SimpleBarChart
 });

package/dist/components/charts/index.mjs

@@ -1,20 +1,23 @@
 "use client";
-import "../../chunk-VYNBJBXD.mjs";
+import "../../chunk-3OCNT22V.mjs";
 import {
   areaChart_default
-} from "../../chunk-ARNMOGRH.mjs";
+} from "../../chunk-LH6Z7SDZ.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-EWS3FESG.mjs";
 import {
   BarChartTooltip,
   barChart_default
-} from "../../chunk-BRVQTI2T.mjs";
+} from "../../chunk-JOK735WN.mjs";
 import {
   circularProgress_default
 } from "../../chunk-WA7CSZQ3.mjs";
 import {
   radarChart_default
 } from "../../chunk-U7SYKG2C.mjs";
+import {
+  simpleBarChart_default
+} from "../../chunk-B4UNRT7U.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-U4DJHAM5.mjs";
 import "../../chunk-27Y6K5NK.mjs";
@@ -24,5 +27,6 @@ export {
   barChart_default as BarChart,
   BarChartTooltip,
   circularProgress_default as CircularProgress,
-  radarChart_default as RadarChart
+  radarChart_default as RadarChart,
+  simpleBarChart_default as SimpleBarChart
 };

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

@@ -0,0 +1,40 @@
+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 SimpleBarData = {
+    title: string;
+    value: number;
+};
+type TooltipFormatterParams = {
+    value: number;
+    label: string;
+};
+type Props = {
+    data?: SimpleBarData[];
+    label?: string;
+    classNames?: SlotsToClasses<simpleBarChartSlots>;
+    yAxisTicks?: number[];
+    yAxisDomain?: [number, number];
+    barGap?: number;
+    tooltipFormatter?: (params: TooltipFormatterParams) => ReactNode;
+};
+type simpleBarChartProps = Props & simpleBarChartVariantProps;
+declare const SimpleBarChartComponent: react.ForwardRefExoticComponent<Props & simpleBarChartVariantProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const simpleBarChartStyle: tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, {}, {
+    base: string[];
+    label: string[];
+}, tailwind_variants.TVReturnType<{}, {
+    base: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type simpleBarChartVariantProps = VariantProps<typeof simpleBarChartStyle>;
+type simpleBarChartSlots = keyof ReturnType<typeof simpleBarChartStyle>;
+
+export { SimpleBarChartComponent as default, type simpleBarChartProps };