@underverse-ui/underverse 1.0.16 → 1.0.18

package/dist/index.js

@@ -933,6 +933,7 @@ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = forwardRef3(
   ({
     label,
+    labelClassName,
     error,
     description,
     className,
@@ -1062,7 +1063,8 @@ var Input = forwardRef3(
               "font-medium transition-colors duration-200",
               // default color and highlight while any descendant focused
               disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
-              errMsg && "text-destructive"
+              errMsg && "text-destructive",
+              labelClassName
             ),
             children: [
               label,
@@ -1403,7 +1405,20 @@ var NumberInput = forwardRef3(
 );
 NumberInput.displayName = "NumberInput";
 var Textarea = forwardRef3(
-  ({ label, error, description, variant = "default", resize = "vertical", counter = false, className, required, value, maxLength, ...props }, ref) => {
+  ({
+    label,
+    labelClassName,
+    error,
+    description,
+    variant = "default",
+    resize = "vertical",
+    counter = false,
+    className,
+    required,
+    value,
+    maxLength,
+    ...props
+  }, ref) => {
     const [isFocused, setIsFocused] = useState4(false);
     const charCount = typeof value === "string" ? value.length : 0;
     const variantStyles6 = {
@@ -1426,7 +1441,8 @@ var Textarea = forwardRef3(
             className: cn(
               "text-sm font-medium transition-colors duration-200",
               isFocused ? "text-primary" : "text-foreground",
-              error && "text-destructive"
+              error && "text-destructive",
+              labelClassName
             ),
             children: [
               label,
@@ -1498,6 +1514,7 @@ var TagInput = forwardRef4(
     placeholder,
     placeholderWithTags,
     label,
+    labelClassName,
     hideSearchButton = false,
     hideClearButton = false,
     className,
@@ -1535,14 +1552,14 @@ var TagInput = forwardRef4(
         input: "text-sm",
         tag: "px-2 py-1 text-sm gap-1.5 rounded-full",
         tagIcon: "h-3.5 w-3.5",
-        button: "h-8 text-sm px-3"
+        button: "h-9 text-sm px-3"
       },
       lg: {
         container: "min-h-12 p-2.5 gap-2 rounded-full",
         input: "text-base",
         tag: "px-2.5 py-1.5 text-base gap-2 rounded-full",
         tagIcon: "h-4 w-4",
-        button: "h-9 text-base px-4"
+        button: "h-11 text-base px-4"
       }
     };
     const addTag = (tagValue) => {
@@ -1610,7 +1627,8 @@ var TagInput = forwardRef4(
           className: cn(
             "block font-medium transition-colors duration-200",
             size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
-            disabled ? "text-muted-foreground" : isFocused ? "text-primary" : "text-foreground"
+            disabled ? "text-muted-foreground" : isFocused ? "text-primary" : "text-foreground",
+            labelClassName
           ),
           children: [
             label,
@@ -1872,6 +1890,7 @@ var Switch = ({
   checked,
   onCheckedChange,
   label,
+  labelClassName,
   size = "md",
   variant = "default",
   disabled = false,
@@ -1914,79 +1933,60 @@ var Switch = ({
       inactive: "bg-input border-input"
     }
   };
-  return /* @__PURE__ */ jsxs8(
-    "label",
-    {
-      className: cn(
-        "inline-flex items-center gap-3 cursor-pointer select-none",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs8(
-          "div",
-          {
-            className: cn(
-              "relative inline-flex rounded-full align-middle",
-              sizeClasses2[size].track,
-              // Focus ring styled like shadcn (via peer-visible)
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
-              disabled && "opacity-50"
-            ),
-            children: [
-              /* @__PURE__ */ jsx9(
-                "input",
-                {
-                  type: "checkbox",
-                  className: "sr-only peer",
-                  checked,
-                  disabled,
-                  onChange: (e) => !disabled && onCheckedChange(e.target.checked),
-                  ...props
-                }
-              ),
-              /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  className: cn(
-                    "block w-full h-full rounded-full transition-colors duration-200 ease-out border",
-                    checked ? variantClasses2[variant].active : variantClasses2[variant].inactive
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  className: cn(
-                    "absolute top-0.5 left-0.5 rounded-full transition-transform duration-200 ease-out shadow-sm",
-                    sizeClasses2[size].handle,
-                    "bg-background border border-border",
-                    checked ? sizeClasses2[size].translate : "translate-x-0",
-                    !disabled && "hover:scale-[1.02]",
-                    isPressed && "scale-95",
-                    disabled && "opacity-70"
-                  ),
-                  onMouseDown: () => !disabled && setIsPressed(true),
-                  onMouseUp: () => setIsPressed(false),
-                  onMouseLeave: () => setIsPressed(false)
-                }
-              )
-            ]
-          }
+  return /* @__PURE__ */ jsxs8("label", { className: cn("inline-flex items-center gap-3 cursor-pointer select-none", disabled && "cursor-not-allowed opacity-50", className), children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn(
+          "relative inline-flex rounded-full align-middle",
+          sizeClasses2[size].track,
+          // Focus ring styled like shadcn (via peer-visible)
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+          disabled && "opacity-50"
         ),
-        label && /* @__PURE__ */ jsx9(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium text-foreground transition-colors",
-              disabled && "text-muted-foreground"
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              type: "checkbox",
+              className: "sr-only peer",
+              checked,
+              disabled,
+              onChange: (e) => !disabled && onCheckedChange(e.target.checked),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn(
+                "block w-full h-full rounded-full transition-colors duration-200 ease-out border",
+                checked ? variantClasses2[variant].active : variantClasses2[variant].inactive
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn(
+                "absolute top-0.5 left-0.5 rounded-full transition-transform duration-200 ease-out shadow-sm",
+                sizeClasses2[size].handle,
+                "bg-background border border-border",
+                checked ? sizeClasses2[size].translate : "translate-x-0",
+                !disabled && "hover:scale-[1.02]",
+                isPressed && "scale-95",
+                disabled && "opacity-70"
+              ),
+              onMouseDown: () => !disabled && setIsPressed(true),
+              onMouseUp: () => setIsPressed(false),
+              onMouseLeave: () => setIsPressed(false)
+            }
+          )
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ jsx9("span", { className: cn("text-sm font-medium text-foreground transition-colors", disabled && "text-muted-foreground", labelClassName), children: label })
+  ] });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
@@ -4830,6 +4830,7 @@ var Combobox = ({
   allowClear = false,
   usePortal = true,
   label,
+  labelClassName,
   required,
   fontBold = false,
   loading: loading2 = false,
@@ -5171,7 +5172,8 @@ var Combobox = ({
         className: cn(
           labelSize,
           "font-medium transition-colors duration-200",
-          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          labelClassName
         ),
         children: [
           label,
@@ -5659,6 +5661,7 @@ var DatePicker = ({
   disabled = false,
   size = "md",
   label,
+  labelClassName,
   required,
   todayLabel,
   clearLabel,
@@ -5716,7 +5719,7 @@ var DatePicker = ({
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-11",
+      trigger: "px-3 py-2.5 text-sm h-10",
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -5733,7 +5736,7 @@ var DatePicker = ({
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-14",
+      trigger: "px-4 py-3 text-base h-12",
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -6062,7 +6065,8 @@ var DatePicker = ({
         className: cn(
           labelSize,
           "font-semibold transition-colors duration-300 cursor-pointer",
-          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary"
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary",
+          labelClassName
         ),
         children: [
           label,
@@ -6197,7 +6201,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-11",
+      trigger: "px-3 py-2.5 text-sm h-10",
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -6214,7 +6218,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-14",
+      trigger: "px-4 py-3 text-base h-12",
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -6964,6 +6968,7 @@ function MonthYearPicker({
   disabled = false,
   size = "md",
   label,
+  labelClassName,
   required,
   clearable = true,
   variant = "default",
@@ -7275,7 +7280,7 @@ function MonthYearPicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ jsxs25("div", { className: cn("w-full", className), ...rest, children: [
-      label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80"), children: [
+      label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
         label,
         required && /* @__PURE__ */ jsx30("span", { className: "text-destructive ml-0.5", children: "*" })
       ] }),
@@ -7284,7 +7289,7 @@ function MonthYearPicker({
     ] });
   }
   return /* @__PURE__ */ jsxs25("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80"), children: [
+    label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
       label,
       required && /* @__PURE__ */ jsx30("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
@@ -9076,6 +9081,7 @@ var DateTimePicker = ({
   format = "24",
   includeSeconds = false,
   label,
+  labelClassName,
   required,
   doneLabel,
   clearLabel,
@@ -9214,7 +9220,7 @@ var DateTimePicker = ({
   };
   const weekdays = getWeekdays(locale);
   return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ jsxs28("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1"), children: [
+    label && /* @__PURE__ */ jsxs28("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", labelClassName), children: [
       label,
       " ",
       required && /* @__PURE__ */ jsx33("span", { className: "text-destructive", children: "*" })
@@ -12057,6 +12063,7 @@ var MultiCombobox = ({
   size = "md",
   variant = "default",
   label,
+  labelClassName,
   title,
   required,
   displayFormat = (option) => option.label,
@@ -12348,7 +12355,7 @@ var MultiCombobox = ({
         !!error && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ jsx40("div", { className: cn("flex items-center gap-1.5 flex-wrap flex-1", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs35(Fragment13, { children: [
+        /* @__PURE__ */ jsx40("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs35(Fragment13, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
               return /* @__PURE__ */ jsx40(React34.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
@@ -12357,7 +12364,7 @@ var MultiCombobox = ({
               "span",
               {
                 className: cn(
-                  "inline-flex items-center gap-1.5 bg-primary/10 text-primary rounded-full transition-all duration-200",
+                  "inline-flex items-center gap-1.5 bg-primary/10 text-primary rounded-full transition-all duration-200 shrink-0",
                   "hover:bg-primary/20",
                   sizeStyles8[size].tag
                 ),
@@ -12391,7 +12398,7 @@ var MultiCombobox = ({
               option.value
             );
           }),
-          hiddenCount > 0 && /* @__PURE__ */ jsxs35("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg", sizeStyles8[size].tag), children: [
+          hiddenCount > 0 && /* @__PURE__ */ jsxs35("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles8[size].tag), children: [
             "+",
             hiddenCount,
             " more"
@@ -12440,7 +12447,8 @@ var MultiCombobox = ({
         className: cn(
           size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
           "font-medium transition-colors duration-200",
-          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          labelClassName
         ),
         children: [
           title,
@@ -12456,7 +12464,8 @@ var MultiCombobox = ({
         className: cn(
           labelSize,
           "font-medium transition-colors duration-200",
-          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          labelClassName
         ),
         children: [
           label,
@@ -12588,7 +12597,7 @@ var sizeStyles7 = {
   }
 };
 var RadioGroupItem = React35.forwardRef(
-  ({ value, id, disabled, className, children, label, description, icon }, ref) => {
+  ({ value, id, disabled, className, children, label, labelClassName, description, icon }, ref) => {
     const { value: selectedValue, onValueChange, name, disabled: groupDisabled, size = "md", variant = "default" } = useRadioGroup();
     const isDisabled = disabled || groupDisabled;
     const isSelected = selectedValue === value;
@@ -12639,7 +12648,7 @@ var RadioGroupItem = React35.forwardRef(
               /* @__PURE__ */ jsxs36("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
                   Icon && /* @__PURE__ */ jsx41(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ jsx41("label", { htmlFor: radioId, className: cn("font-medium text-foreground cursor-pointer", sizeStyles7[size].text), children: label || children })
+                  /* @__PURE__ */ jsx41("label", { htmlFor: radioId, className: cn("font-medium text-foreground cursor-pointer", sizeStyles7[size].text, labelClassName), children: label || children })
                 ] }),
                 description && /* @__PURE__ */ jsx41("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
@@ -12734,7 +12743,8 @@ var RadioGroupItem = React35.forwardRef(
             "font-medium text-foreground cursor-pointer flex-1",
             "disabled:cursor-not-allowed disabled:opacity-50",
             sizeStyles7[size].text,
-            isDisabled && "cursor-not-allowed opacity-50"
+            isDisabled && "cursor-not-allowed opacity-50",
+            labelClassName
           ),
           children: [
             /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
@@ -17221,6 +17231,7 @@ function LineChart({
   curved = true,
   formatValue,
   referenceLines = [],
+  labelClassName,
   className = ""
 }) {
   const svgRef = useRef21(null);
@@ -17288,7 +17299,18 @@ function LineChart({
       /* @__PURE__ */ jsx56("defs", { children: /* @__PURE__ */ jsx56("clipPath", { id: clipId, children: /* @__PURE__ */ jsx56("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ jsx56("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs51("g", { children: [
         /* @__PURE__ */ jsx56("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ jsx56("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", fill: "currentColor", className: "text-muted-foreground", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
+        /* @__PURE__ */ jsx56(
+          "text",
+          {
+            x: padding.left - 8,
+            y: line.y + 4,
+            textAnchor: "end",
+            fontSize: "10",
+            fill: "currentColor",
+            className: labelClassName || "text-muted-foreground",
+            children: formatValue ? formatValue(line.value) : line.value.toFixed(0)
+          }
+        )
       ] }, i)) }),
       /* @__PURE__ */ jsxs51("g", { clipPath: `url(#${clipId})`, children: [
         processedSeries.map(
@@ -17409,7 +17431,19 @@ function LineChart({
       ) }),
       showLabels && labels.map((lbl, i) => {
         const x = padding.left + i / (labels.length - 1 || 1) * chartWidth;
-        return /* @__PURE__ */ jsx56("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: lbl }, i);
+        return /* @__PURE__ */ jsx56(
+          "text",
+          {
+            x,
+            y: height - 10,
+            textAnchor: "middle",
+            fontSize: "10",
+            className: labelClassName || "text-muted-foreground",
+            fill: "currentColor",
+            children: lbl
+          },
+          i
+        );
       }),
       /* @__PURE__ */ jsx56("style", { children: `
           @keyframes drawLine {
@@ -17471,6 +17505,7 @@ function BarChart({
   barRadius = 4,
   barGap = 0.3,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const svgRef = useRef22(null);
@@ -17599,10 +17634,32 @@ function BarChart({
     /* @__PURE__ */ jsxs52("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ jsx57("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx57("g", { children: horizontal ? /* @__PURE__ */ jsxs52(Fragment24, { children: [
         /* @__PURE__ */ jsx57("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ jsx57("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
+        /* @__PURE__ */ jsx57(
+          "text",
+          {
+            x: line.x,
+            y: height - 8,
+            textAnchor: "middle",
+            fontSize: "10",
+            className: labelClassName || "text-muted-foreground",
+            fill: "currentColor",
+            children: formatValue ? formatValue(line.value) : line.value.toFixed(0)
+          }
+        )
       ] }) : /* @__PURE__ */ jsxs52(Fragment24, { children: [
         /* @__PURE__ */ jsx57("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ jsx57("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
+        /* @__PURE__ */ jsx57(
+          "text",
+          {
+            x: padding.left - 8,
+            y: line.y + 4,
+            textAnchor: "end",
+            fontSize: "10",
+            className: labelClassName || "text-muted-foreground",
+            fill: "currentColor",
+            children: formatValue ? formatValue(line.value) : line.value.toFixed(0)
+          }
+        )
       ] }) }, i)) }),
       barGroups.map((group, gi) => /* @__PURE__ */ jsxs52("g", { children: [
         group.bars.map((bar, bi) => {
@@ -17678,7 +17735,7 @@ function BarChart({
             y: horizontal ? padding.top + (gi + 0.5) * (chartHeight / barGroups.length) + 4 : height - 10,
             textAnchor: horizontal ? "end" : "middle",
             fontSize: "10",
-            className: "text-muted-foreground",
+            className: labelClassName || "text-muted-foreground",
             fill: "currentColor",
             children: group.label
           }
@@ -17732,6 +17789,7 @@ function PieChart({
   startAngle = -90,
   renderCenter,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const containerRef = useRef23(null);
@@ -17824,7 +17882,7 @@ function PieChart({
                   y: seg.labelY,
                   textAnchor: seg.labelX > center ? "start" : "end",
                   fontSize: "10",
-                  className: "text-foreground",
+                  className: labelClassName || "text-foreground",
                   fill: "currentColor",
                   style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
                   children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : formatValue ? formatValue(seg.value) : seg.value
@@ -17900,6 +17958,7 @@ function AreaChart({
   curved = true,
   formatValue,
   emptyText = "No data",
+  labelClassName,
   className = ""
 }) {
   const containerRef = useRef24(null);
@@ -17990,7 +18049,18 @@ function AreaChart({
       /* @__PURE__ */ jsx59("defs", { children: /* @__PURE__ */ jsx59("clipPath", { id: clipId, children: /* @__PURE__ */ jsx59("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ jsx59("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs54("g", { children: [
         /* @__PURE__ */ jsx59("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ jsx59("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
+        /* @__PURE__ */ jsx59(
+          "text",
+          {
+            x: padding.left - 8,
+            y: line.y + 4,
+            textAnchor: "end",
+            fontSize: "10",
+            className: labelClassName || "text-muted-foreground",
+            fill: "currentColor",
+            children: formatValue ? formatValue(line.value) : line.value.toFixed(0)
+          }
+        )
       ] }, i)) }),
       /* @__PURE__ */ jsx59("g", { clipPath: `url(#${clipId})`, children: [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ jsx59(
         "path",
@@ -18067,7 +18137,7 @@ function AreaChart({
           `dot-${seriesIdx}-${i}`
         ))
       ),
-      showLabels && /* @__PURE__ */ jsx59("g", { className: "text-muted-foreground", children: labels.map((label, i) => {
+      showLabels && /* @__PURE__ */ jsx59("g", { className: labelClassName || "text-muted-foreground", children: labels.map((label, i) => {
         const x = padding.left + i / (labels.length - 1) * chartWidth;
         return /* @__PURE__ */ jsx59("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", fill: "currentColor", children: label }, i);
       }) }),
@@ -18275,6 +18345,7 @@ function RadarChart({
   showValues = false,
   animated = true,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const containerRef = useRef25(null);
@@ -18421,7 +18492,7 @@ function RadarChart({
           ))
         ] }, i)
       ),
-      showLabels && /* @__PURE__ */ jsx61("g", { className: "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ jsx61("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
+      showLabels && /* @__PURE__ */ jsx61("g", { className: labelClassName || "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ jsx61("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
       /* @__PURE__ */ jsx61("style", { children: `
           @keyframes radarPop {
             from {
@@ -18501,6 +18572,7 @@ function GaugeChart({
   endAngle = 135,
   zones,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const center = size / 2;
@@ -18587,7 +18659,7 @@ function GaugeChart({
         ]
       }
     ),
-    showMinMax && /* @__PURE__ */ jsxs57("g", { className: "text-muted-foreground", children: [
+    showMinMax && /* @__PURE__ */ jsxs57("g", { className: labelClassName || "text-muted-foreground", children: [
       /* @__PURE__ */ jsx62(
         "text",
         {