@underverse-ui/underverse 1.0.15 → 1.0.17

package/dist/index.cjs

@@ -1113,6 +1113,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var Input = (0, import_react3.forwardRef)(
   ({
     label,
+    labelClassName,
     error,
     description,
     className,
@@ -1242,7 +1243,8 @@ var Input = (0, import_react3.forwardRef)(
               "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,
@@ -1583,7 +1585,20 @@ var NumberInput = (0, import_react3.forwardRef)(
 );
 NumberInput.displayName = "NumberInput";
 var Textarea = (0, import_react3.forwardRef)(
-  ({ 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] = (0, import_react3.useState)(false);
     const charCount = typeof value === "string" ? value.length : 0;
     const variantStyles6 = {
@@ -1606,7 +1621,8 @@ var Textarea = (0, import_react3.forwardRef)(
             className: cn(
               "text-sm font-medium transition-colors duration-200",
               isFocused ? "text-primary" : "text-foreground",
-              error && "text-destructive"
+              error && "text-destructive",
+              labelClassName
             ),
             children: [
               label,
@@ -1678,6 +1694,7 @@ var TagInput = (0, import_react4.forwardRef)(
     placeholder,
     placeholderWithTags,
     label,
+    labelClassName,
     hideSearchButton = false,
     hideClearButton = false,
     className,
@@ -1715,14 +1732,14 @@ var TagInput = (0, import_react4.forwardRef)(
         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) => {
@@ -1790,7 +1807,8 @@ var TagInput = (0, import_react4.forwardRef)(
           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,
@@ -2052,6 +2070,7 @@ var Switch = ({
   checked,
   onCheckedChange,
   label,
+  labelClassName,
   size = "md",
   variant = "default",
   disabled = false,
@@ -2094,79 +2113,60 @@ var Switch = ({
       inactive: "bg-input border-input"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "label",
-    {
-      className: cn(
-        "inline-flex items-center gap-3 cursor-pointer select-none",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "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__ */ (0, import_jsx_runtime9.jsx)(
-                "input",
-                {
-                  type: "checkbox",
-                  className: "sr-only peer",
-                  checked,
-                  disabled,
-                  onChange: (e) => !disabled && onCheckedChange(e.target.checked),
-                  ...props
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "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__ */ (0, import_jsx_runtime9.jsx)(
-                "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__ */ (0, import_jsx_runtime9.jsxs)("label", { className: cn("inline-flex items-center gap-3 cursor-pointer select-none", disabled && "cursor-not-allowed opacity-50", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "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__ */ (0, import_jsx_runtime9.jsx)(
-          "span",
-          {
-            className: cn(
-              "text-sm font-medium text-foreground transition-colors",
-              disabled && "text-muted-foreground"
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              className: "sr-only peer",
+              checked,
+              disabled,
+              onChange: (e) => !disabled && onCheckedChange(e.target.checked),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "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__ */ (0, import_jsx_runtime9.jsx)(
+            "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__ */ (0, import_jsx_runtime9.jsx)("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;
@@ -5010,6 +5010,7 @@ var Combobox = ({
   allowClear = false,
   usePortal = true,
   label,
+  labelClassName,
   required,
   fontBold = false,
   loading: loading2 = false,
@@ -5351,7 +5352,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,
@@ -5839,6 +5841,7 @@ var DatePicker = ({
   disabled = false,
   size = "md",
   label,
+  labelClassName,
   required,
   todayLabel,
   clearLabel,
@@ -5896,7 +5899,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",
@@ -5913,7 +5916,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",
@@ -6242,7 +6245,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,
@@ -6377,7 +6381,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",
@@ -6394,7 +6398,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",
@@ -7144,6 +7148,7 @@ function MonthYearPicker({
   disabled = false,
   size = "md",
   label,
+  labelClassName,
   required,
   clearable = true,
   variant = "default",
@@ -7455,7 +7460,7 @@ function MonthYearPicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80"), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-destructive ml-0.5", children: "*" })
       ] }),
@@ -7464,7 +7469,7 @@ function MonthYearPicker({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
@@ -9256,6 +9261,7 @@ var DateTimePicker = ({
   format = "24",
   includeSeconds = false,
   label,
+  labelClassName,
   required,
   doneLabel,
   clearLabel,
@@ -9394,7 +9400,7 @@ var DateTimePicker = ({
   };
   const weekdays = getWeekdays(locale);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", labelClassName), children: [
       label,
       " ",
       required && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-destructive", children: "*" })
@@ -12237,6 +12243,7 @@ var MultiCombobox = ({
   size = "md",
   variant = "default",
   label,
+  labelClassName,
   title,
   required,
   displayFormat = (option) => option.label,
@@ -12620,7 +12627,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,
@@ -12636,7 +12644,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,
@@ -12768,7 +12777,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;
@@ -12819,7 +12828,7 @@ var RadioGroupItem = React35.forwardRef(
               /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
                   Icon && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { htmlFor: radioId, className: cn("font-medium text-foreground cursor-pointer", sizeStyles7[size].text), children: label || children })
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { htmlFor: radioId, className: cn("font-medium text-foreground cursor-pointer", sizeStyles7[size].text, labelClassName), children: label || children })
                 ] }),
                 description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
@@ -12914,7 +12923,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__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -17385,9 +17395,11 @@ function LineChart({
   curved = true,
   formatValue,
   referenceLines = [],
+  labelClassName,
   className = ""
 }) {
   const svgRef = (0, import_react25.useRef)(null);
+  const clipId = (0, import_react25.useRef)(`line-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 40 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
@@ -17448,42 +17460,56 @@ function LineChart({
   }, [minValue, maxValue, chartHeight, padding.top]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(
+          "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)) }),
-      processedSeries.map(
-        (s, si) => s.fillColor && s.areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+        processedSeries.map(
+          (s, si) => s.fillColor && s.areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "path",
+            {
+              d: s.areaPath,
+              fill: s.fillColor,
+              className: "transition-opacity duration-300",
+              opacity: hiddenSeries.has(s.name) ? 0 : 0.15,
+              style: animated ? { opacity: 0, animation: `fadeIn 0.6s ease-out ${si * 0.1}s forwards` } : void 0
+            },
+            `area-${si}`
+          )
+        ),
+        processedSeries.map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "path",
           {
-            d: s.areaPath,
-            fill: s.fillColor,
+            d: s.linePath,
+            fill: "none",
+            stroke: s.color,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
             className: "transition-opacity duration-300",
-            opacity: hiddenSeries.has(s.name) ? 0 : 0.15,
-            style: animated ? { opacity: 0, animation: `fadeIn 0.6s ease-out ${si * 0.1}s forwards` } : void 0
+            opacity: hiddenSeries.has(s.name) ? 0 : 1,
+            style: animated ? {
+              strokeDasharray: s.lineLength,
+              strokeDashoffset: s.lineLength,
+              animation: `drawLine 1s ease-out ${si * 0.15}s forwards`
+            } : void 0
           },
-          `area-${si}`
-        )
-      ),
-      processedSeries.map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "path",
-        {
-          d: s.linePath,
-          fill: "none",
-          stroke: s.color,
-          strokeWidth: 2,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: "transition-opacity duration-300",
-          opacity: hiddenSeries.has(s.name) ? 0 : 1,
-          style: animated ? {
-            strokeDasharray: s.lineLength,
-            strokeDashoffset: s.lineLength,
-            animation: `drawLine 1s ease-out ${si * 0.15}s forwards`
-          } : void 0
-        },
-        `line-${si}`
-      )),
+          `line-${si}`
+        ))
+      ] }),
       showDots && processedSeries.map(
         (s, si) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
           "g",
@@ -17569,7 +17595,19 @@ function LineChart({
       ) }),
       showLabels && labels.map((lbl, i) => {
         const x = padding.left + i / (labels.length - 1 || 1) * chartWidth;
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: lbl }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "text",
+          {
+            x,
+            y: height - 10,
+            textAnchor: "middle",
+            fontSize: "10",
+            className: labelClassName || "text-muted-foreground",
+            fill: "currentColor",
+            children: lbl
+          },
+          i
+        );
       }),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("style", { children: `
           @keyframes drawLine {
@@ -17631,6 +17669,7 @@ function BarChart({
   barRadius = 4,
   barGap = 0.3,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const svgRef = (0, import_react26.useRef)(null);
@@ -17759,10 +17798,32 @@ function BarChart({
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("g", { children: horizontal ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
+          "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__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
+          "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__ */ (0, import_jsx_runtime57.jsxs)("g", { children: [
         group.bars.map((bar, bi) => {
@@ -17838,7 +17899,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
           }
@@ -17892,6 +17953,7 @@ function PieChart({
   startAngle = -90,
   renderCenter,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const containerRef = (0, import_react27.useRef)(null);
@@ -17984,7 +18046,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
@@ -18060,9 +18122,11 @@ function AreaChart({
   curved = true,
   formatValue,
   emptyText = "No data",
+  labelClassName,
   className = ""
 }) {
   const containerRef = (0, import_react28.useRef)(null);
+  const clipId = (0, import_react28.useRef)(`area-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 50 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
@@ -18146,11 +18210,23 @@ function AreaChart({
   }, [series, chartWidth, chartHeight, padding, stacked, curved]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width, height, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(
+          "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)) }),
-      [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.areaPath,
@@ -18163,8 +18239,8 @@ function AreaChart({
           } : void 0
         },
         `area-${i}`
-      )),
-      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.linePath,
@@ -18182,7 +18258,7 @@ function AreaChart({
           } : void 0
         },
         `line-${i}`
-      )),
+      )) }),
       showDots && processedSeries.map(
         (s, seriesIdx) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "g",
@@ -18225,7 +18301,7 @@ function AreaChart({
           `dot-${seriesIdx}-${i}`
         ))
       ),
-      showLabels && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { className: "text-muted-foreground", children: labels.map((label, i) => {
+      showLabels && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { className: labelClassName || "text-muted-foreground", children: labels.map((label, i) => {
         const x = padding.left + i / (labels.length - 1) * chartWidth;
         return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", fill: "currentColor", children: label }, i);
       }) }),
@@ -18433,6 +18509,7 @@ function RadarChart({
   showValues = false,
   animated = true,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const containerRef = (0, import_react30.useRef)(null);
@@ -18579,7 +18656,7 @@ function RadarChart({
           ))
         ] }, i)
       ),
-      showLabels && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("g", { className: "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
+      showLabels && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("g", { className: labelClassName || "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("style", { children: `
           @keyframes radarPop {
             from {
@@ -18659,6 +18736,7 @@ function GaugeChart({
   endAngle = 135,
   zones,
   formatValue,
+  labelClassName,
   className = ""
 }) {
   const center = size / 2;
@@ -18745,7 +18823,7 @@ function GaugeChart({
         ]
       }
     ),
-    showMinMax && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("g", { className: "text-muted-foreground", children: [
+    showMinMax && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("g", { className: labelClassName || "text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "text",
         {