@deepnoid/ui 0.1.161 → 0.1.163

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

@@ -106,13 +106,14 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let centeredLeft = tooltipState.x - tooltipWidth / 2;
-    if (centeredLeft < 8) {
-      centeredLeft = 8;
-    } else if (centeredLeft + tooltipWidth > chartWidth - 8) {
-      centeredLeft = chartWidth - tooltipWidth - 8;
+    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(centeredLeft);
+    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 }),
@@ -214,7 +215,9 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
           zIndex: 10,
           opacity: tooltipState ? 1 : 0,
           transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden"
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
         },
         children: tooltipState && tooltipFormatter(tooltipState)
       }

package/dist/{chunk-553TGKS6.mjs → chunk-WA7CSZQ3.mjs}

@@ -8,11 +8,11 @@ import {
 
 // src/components/charts/circularProgress.tsx
 import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts";
-import { forwardRef, useMemo } from "react";
+import { cloneElement, forwardRef, isValidElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CircularProgress = forwardRef((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
-  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
+  const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
   const slots = useMemo(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
@@ -45,6 +45,9 @@ var CircularProgress = forwardRef((originalProps, ref) => {
   const colorValue = originalProps.color;
   const colorKey = colorValue || "blue";
   const currentGradient = gradientColors[colorKey];
+  const wrappedInnerContent = useMemo(() => {
+    return wrapSpanWithClass(innerContent);
+  }, [innerContent]);
   return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ jsxs(
@@ -90,10 +93,7 @@ var CircularProgress = forwardRef((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center", children: [
-        /* @__PURE__ */ jsx("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
-        /* @__PURE__ */ jsx("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
-      ] })
+      innerContent && /* @__PURE__ */ jsx("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent })
     ] }),
     label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
@@ -105,8 +105,16 @@ var circularProgressStyle = tv({
     base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
-    percentage: ["text-xl", "font-bold", "text-body-foreground"],
-    unit: ["text-md", "font-bold", "text-body-foreground"],
+    inner: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "font-bold",
+      "text-body-foreground",
+      "text-md"
+    ],
     label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
@@ -126,6 +134,28 @@ var circularProgressStyle = tv({
     color: "blue"
   }
 });
+function wrapSpanWithClass(node) {
+  var _a;
+  if (Array.isArray(node)) {
+    return node.map(wrapSpanWithClass);
+  }
+  if (isValidElement(node)) {
+    const element = node;
+    if (element.type === "span") {
+      const existing = (_a = element.props.className) != null ? _a : "";
+      return cloneElement(element, {
+        className: `text-xl font-bold ${existing}`.trim()
+      });
+    }
+    if (element.props.children) {
+      return cloneElement(element, {
+        children: wrapSpanWithClass(element.props.children)
+      });
+    }
+    return element;
+  }
+  return node;
+}
 
 export {
   circularProgress_default

package/dist/components/charts/barChart.js

@@ -474,13 +474,14 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let centeredLeft = tooltipState.x - tooltipWidth / 2;
-    if (centeredLeft < 8) {
-      centeredLeft = 8;
-    } else if (centeredLeft + tooltipWidth > chartWidth - 8) {
-      centeredLeft = chartWidth - tooltipWidth - 8;
+    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(centeredLeft);
+    setTooltipLeft(left);
   }, [tooltipState]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
@@ -582,7 +583,9 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
           zIndex: 10,
           opacity: tooltipState ? 1 : 0,
           transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden"
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
         },
         children: tooltipState && tooltipFormatter(tooltipState)
       }

package/dist/components/charts/barChart.mjs

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

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

@@ -1,13 +1,14 @@
 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 Props = {
-    percentage: number;
-    unit?: string;
     label?: string;
     size?: number;
+    percentage: number;
+    innerContent?: ReactNode;
     classNames?: SlotsToClasses<CircularProgressSlots>;
 };
 type CircularProgressProps = Props & CircularProgressVariantProps;
@@ -29,8 +30,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, undefined, {
     color: {
@@ -48,8 +48,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
@@ -67,8 +66,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type CircularProgressVariantProps = VariantProps<typeof circularProgressStyle>;

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

@@ -1,13 +1,14 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
 type Props = {
-    percentage: number;
-    unit?: string;
     label?: string;
     size?: number;
+    percentage: number;
+    innerContent?: ReactNode;
     classNames?: SlotsToClasses<CircularProgressSlots>;
 };
 type CircularProgressProps = Props & CircularProgressVariantProps;
@@ -29,8 +30,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, undefined, {
     color: {
@@ -48,8 +48,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
@@ -67,8 +66,7 @@ declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     base: string[];
     background: string[];
     progress: string[];
-    percentage: string[];
-    unit: string[];
+    inner: string[];
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type CircularProgressVariantProps = VariantProps<typeof circularProgressStyle>;

package/dist/components/charts/circularProgress.js

@@ -379,7 +379,7 @@ var tv = (0, import_tailwind_variants.createTV)({
 var import_jsx_runtime = require("react/jsx-runtime");
 var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
-  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
+  const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
   const slots = (0, import_react.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
@@ -412,6 +412,9 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
   const colorValue = originalProps.color;
   const colorKey = colorValue || "blue";
   const currentGradient = gradientColors[colorKey];
+  const wrappedInnerContent = (0, import_react.useMemo)(() => {
+    return wrapSpanWithClass(innerContent);
+  }, [innerContent]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -457,10 +460,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
-      ] })
+      innerContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent })
     ] }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
@@ -472,8 +472,16 @@ var circularProgressStyle = tv({
     base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
-    percentage: ["text-xl", "font-bold", "text-body-foreground"],
-    unit: ["text-md", "font-bold", "text-body-foreground"],
+    inner: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "font-bold",
+      "text-body-foreground",
+      "text-md"
+    ],
     label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
@@ -493,3 +501,25 @@ var circularProgressStyle = tv({
     color: "blue"
   }
 });
+function wrapSpanWithClass(node) {
+  var _a;
+  if (Array.isArray(node)) {
+    return node.map(wrapSpanWithClass);
+  }
+  if ((0, import_react.isValidElement)(node)) {
+    const element = node;
+    if (element.type === "span") {
+      const existing = (_a = element.props.className) != null ? _a : "";
+      return (0, import_react.cloneElement)(element, {
+        className: `text-xl font-bold ${existing}`.trim()
+      });
+    }
+    if (element.props.children) {
+      return (0, import_react.cloneElement)(element, {
+        children: wrapSpanWithClass(element.props.children)
+      });
+    }
+    return element;
+  }
+  return node;
+}

package/dist/components/charts/circularProgress.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-553TGKS6.mjs";
+} from "../../chunk-WA7CSZQ3.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-U4DJHAM5.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/index.js

@@ -385,7 +385,7 @@ var tv = (0, import_tailwind_variants.createTV)({
 var import_jsx_runtime = require("react/jsx-runtime");
 var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
-  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
+  const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
   const slots = (0, import_react.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
@@ -418,6 +418,9 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
   const colorValue = originalProps.color;
   const colorKey = colorValue || "blue";
   const currentGradient = gradientColors[colorKey];
+  const wrappedInnerContent = (0, import_react.useMemo)(() => {
+    return wrapSpanWithClass(innerContent);
+  }, [innerContent]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -463,10 +466,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
-      ] })
+      innerContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent })
     ] }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
@@ -478,8 +478,16 @@ var circularProgressStyle = tv({
     base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
-    percentage: ["text-xl", "font-bold", "text-body-foreground"],
-    unit: ["text-md", "font-bold", "text-body-foreground"],
+    inner: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "font-bold",
+      "text-body-foreground",
+      "text-md"
+    ],
     label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
@@ -499,6 +507,28 @@ var circularProgressStyle = tv({
     color: "blue"
   }
 });
+function wrapSpanWithClass(node) {
+  var _a;
+  if (Array.isArray(node)) {
+    return node.map(wrapSpanWithClass);
+  }
+  if ((0, import_react.isValidElement)(node)) {
+    const element = node;
+    if (element.type === "span") {
+      const existing = (_a = element.props.className) != null ? _a : "";
+      return (0, import_react.cloneElement)(element, {
+        className: `text-xl font-bold ${existing}`.trim()
+      });
+    }
+    if (element.props.children) {
+      return (0, import_react.cloneElement)(element, {
+        children: wrapSpanWithClass(element.props.children)
+      });
+    }
+    return element;
+  }
+  return node;
+}
 
 // src/components/charts/areaChart.tsx
 var import_react2 = require("react");
@@ -863,13 +893,14 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let centeredLeft = tooltipState.x - tooltipWidth / 2;
-    if (centeredLeft < 8) {
-      centeredLeft = 8;
-    } else if (centeredLeft + tooltipWidth > chartWidth - 8) {
-      centeredLeft = chartWidth - tooltipWidth - 8;
+    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(centeredLeft);
+    setTooltipLeft(left);
   }, [tooltipState]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
@@ -971,7 +1002,9 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
           zIndex: 10,
           opacity: tooltipState ? 1 : 0,
           transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden"
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
         },
         children: tooltipState && tooltipFormatter(tooltipState)
       }

package/dist/components/charts/index.mjs

@@ -8,10 +8,10 @@ import "../../chunk-EWS3FESG.mjs";
 import {
   BarChartTooltip,
   barChart_default
-} from "../../chunk-V25UBATO.mjs";
+} from "../../chunk-BRVQTI2T.mjs";
 import {
   circularProgress_default
-} from "../../chunk-553TGKS6.mjs";
+} from "../../chunk-WA7CSZQ3.mjs";
 import {
   radarChart_default
 } from "../../chunk-U7SYKG2C.mjs";

package/dist/index.js

@@ -12531,7 +12531,7 @@ var import_react38 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var CircularProgress = (0, import_react38.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
-  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
+  const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
   const slots = (0, import_react38.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
@@ -12564,6 +12564,9 @@ var CircularProgress = (0, import_react38.forwardRef)((originalProps, ref) => {
   const colorValue = originalProps.color;
   const colorKey = colorValue || "blue";
   const currentGradient = gradientColors[colorKey];
+  const wrappedInnerContent = (0, import_react38.useMemo)(() => {
+    return wrapSpanWithClass(innerContent);
+  }, [innerContent]);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -12609,10 +12612,7 @@ var CircularProgress = (0, import_react38.forwardRef)((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
-      ] })
+      innerContent && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent })
     ] }),
     label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
@@ -12624,8 +12624,16 @@ var circularProgressStyle = tv({
     base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
-    percentage: ["text-xl", "font-bold", "text-body-foreground"],
-    unit: ["text-md", "font-bold", "text-body-foreground"],
+    inner: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "font-bold",
+      "text-body-foreground",
+      "text-md"
+    ],
     label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
@@ -12645,6 +12653,28 @@ var circularProgressStyle = tv({
     color: "blue"
   }
 });
+function wrapSpanWithClass(node) {
+  var _a;
+  if (Array.isArray(node)) {
+    return node.map(wrapSpanWithClass);
+  }
+  if ((0, import_react38.isValidElement)(node)) {
+    const element = node;
+    if (element.type === "span") {
+      const existing = (_a = element.props.className) != null ? _a : "";
+      return (0, import_react38.cloneElement)(element, {
+        className: `text-xl font-bold ${existing}`.trim()
+      });
+    }
+    if (element.props.children) {
+      return (0, import_react38.cloneElement)(element, {
+        children: wrapSpanWithClass(element.props.children)
+      });
+    }
+    return element;
+  }
+  return node;
+}
 
 // src/components/charts/areaChart.tsx
 var import_react39 = require("react");
@@ -12930,13 +12960,14 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let centeredLeft = tooltipState.x - tooltipWidth / 2;
-    if (centeredLeft < 8) {
-      centeredLeft = 8;
-    } else if (centeredLeft + tooltipWidth > chartWidth - 8) {
-      centeredLeft = chartWidth - tooltipWidth - 8;
-    }
-    setTooltipLeft(centeredLeft);
+    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_runtime43.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
@@ -13038,7 +13069,9 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
           zIndex: 10,
           opacity: tooltipState ? 1 : 0,
           transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden"
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
         },
         children: tooltipState && tooltipFormatter(tooltipState)
       }

package/dist/index.mjs

@@ -9,10 +9,10 @@ import "./chunk-MBLZYQCN.mjs";
 import {
   tree_default
 } from "./chunk-WSBUOY2M.mjs";
-import "./chunk-3MY6LO7N.mjs";
+import "./chunk-RRAZM5D3.mjs";
 import {
-  tabs_default
-} from "./chunk-DW3BX4M2.mjs";
+  textarea_default
+} from "./chunk-3CRSSRCH.mjs";
 import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
@@ -29,14 +29,10 @@ import {
 import {
   table_default
 } from "./chunk-PX4RCHOE.mjs";
-import "./chunk-RRAZM5D3.mjs";
-import {
-  textarea_default
-} from "./chunk-3CRSSRCH.mjs";
-import "./chunk-TPFN22HR.mjs";
+import "./chunk-3MY6LO7N.mjs";
 import {
-  radio_default
-} from "./chunk-PRNE3U26.mjs";
+  tabs_default
+} from "./chunk-DW3BX4M2.mjs";
 import "./chunk-MZ76AA76.mjs";
 import {
   skeleton_default
@@ -49,6 +45,10 @@ import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
 } from "./chunk-AGE57VDD.mjs";
+import "./chunk-TPFN22HR.mjs";
+import {
+  radio_default
+} from "./chunk-PRNE3U26.mjs";
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
@@ -80,14 +80,14 @@ import "./chunk-DJOG6Z35.mjs";
 import {
   modal_default
 } from "./chunk-SCQCMQDP.mjs";
-import "./chunk-MGEWSREV.mjs";
-import {
-  chip_default
-} from "./chunk-2B3HDC26.mjs";
 import "./chunk-32GA3YW4.mjs";
 import {
   drawer_default
 } from "./chunk-45Y7ANPK.mjs";
+import "./chunk-MGEWSREV.mjs";
+import {
+  chip_default
+} from "./chunk-2B3HDC26.mjs";
 import "./chunk-RLXOHILK.mjs";
 import {
   fileUpload_default
@@ -111,10 +111,10 @@ import {
 import {
   BarChartTooltip,
   barChart_default
-} from "./chunk-V25UBATO.mjs";
+} from "./chunk-BRVQTI2T.mjs";
 import {
   circularProgress_default
-} from "./chunk-553TGKS6.mjs";
+} from "./chunk-WA7CSZQ3.mjs";
 import {
   radarChart_default
 } from "./chunk-U7SYKG2C.mjs";

package/package.json

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