analytica-frontend-lib 1.0.40 → 1.0.42

package/dist/index.mjs

@@ -776,48 +776,34 @@ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var SIZE_CLASSES4 = {
   small: {
     radio: "w-5 h-5",
-    // 20px x 20px
     textSize: "sm",
     spacing: "gap-1.5",
-    // 6px
     borderWidth: "border-2",
-    dotSize: "w-1.5 h-1.5",
-    // 6px inner dot
+    dotSize: "w-2 h-2",
     labelHeight: "h-5"
   },
   medium: {
     radio: "w-6 h-6",
-    // 24px x 24px
     textSize: "md",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    dotSize: "w-2 h-2",
-    // 8px inner dot
+    dotSize: "w-2.5 h-2.5",
     labelHeight: "h-6"
   },
   large: {
     radio: "w-7 h-7",
-    // 28px x 28px
     textSize: "lg",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-2.5 h-2.5",
-    // 10px inner dot
+    dotSize: "w-3 h-3",
     labelHeight: "h-7"
   },
   extraLarge: {
     radio: "w-8 h-8",
-    // 32px x 32px (larger than large)
     textSize: "xl",
     spacing: "gap-3",
-    // 12px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-3 h-3",
-    // 12px inner dot
+    dotSize: "w-3.5 h-3.5",
     labelHeight: "h-8"
   }
 };
@@ -829,39 +815,27 @@ var STATE_CLASSES2 = {
   },
   hovered: {
     unchecked: "border-border-500 bg-background",
-    // #8C8D8D hover state for unchecked
     checked: "border-info-700 bg-background"
-    // Adjust checked border for hover
   },
   focused: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   invalid: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   disabled: {
     unchecked: "border-border-400 bg-background cursor-not-allowed",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background cursor-not-allowed"
-    // #124393 for checked radio
   }
 };
 var DOT_CLASSES = {
   default: "bg-primary-950",
   hovered: "bg-info-700",
-  // #1C61B2 hover state for checked dot
   focused: "bg-primary-950",
-  // #124393 for focused checked dot
   invalid: "bg-primary-950",
-  // #124393 for invalid checked dot
   disabled: "bg-primary-950"
-  // #124393 for disabled checked dot
 };
 var Radio = forwardRef6(
   ({
@@ -947,7 +921,7 @@ var Radio = forwardRef6(
             label && /* @__PURE__ */ jsx11(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
                 children: /* @__PURE__ */ jsx11(
                   Text_default,
                   {
@@ -955,7 +929,7 @@ var Radio = forwardRef6(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
                     color: getTextColor(),
                     children: label
                   }
@@ -970,7 +944,7 @@ var Radio = forwardRef6(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-error-600",
           children: errorMessage
         }
@@ -980,7 +954,7 @@ var Radio = forwardRef6(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-text-500",
           children: helperText
         }
@@ -1467,7 +1441,6 @@ var SIZE_CLASSES7 = {
     // 4px height (h-1 = 4px in Tailwind)
     bar: "h-1",
     // 4px height for the fill bar
-    labelSize: "xs",
     spacing: "gap-2",
     // 8px gap between label and progress bar
     layout: "flex-col",
@@ -1480,8 +1453,6 @@ var SIZE_CLASSES7 = {
     // 8px height (h-2 = 8px in Tailwind)
     bar: "h-2",
     // 8px height for the fill bar
-    labelSize: "xs",
-    // 12px font size (xs in Tailwind)
     spacing: "gap-2",
     // 8px gap between progress bar and label
     layout: "flex-row items-center",
@@ -1523,25 +1494,25 @@ var ProgressBar = ({
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
       children: [
         size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-between w-full", children: [
           label && /* @__PURE__ */ jsx18(
             Text_default,
             {
               as: "div",
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-950 ${labelClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
               children: label
             }
           ),
           showPercentage && /* @__PURE__ */ jsxs13(
             Text_default,
             {
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-700 text-center ${percentageClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
               children: [
                 Math.round(percentage),
                 "%"
@@ -1576,9 +1547,9 @@ var ProgressBar = ({
         size === "medium" && showPercentage && /* @__PURE__ */ jsxs13(
           Text_default,
           {
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
             children: [
               Math.round(percentage),
               "%"
@@ -1589,9 +1560,9 @@ var ProgressBar = ({
           Text_default,
           {
             as: "div",
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 flex-none ${labelClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
             children: label
           }
         )
@@ -1614,11 +1585,13 @@ var SIZE_CLASSES8 = {
     textWeight: "medium",
     // font-weight: 500
     labelSize: "2xs",
-    // 10px for status label (closest to 8px design spec)
+    // Will be overridden with custom 8px in className
     labelWeight: "bold",
     // font-weight: 700
-    spacing: "gap-1"
-    // 4px gap between percentage and label
+    spacing: "gap-0",
+    // Reduced gap between percentage and label for better spacing
+    contentWidth: "max-w-[50px]"
+    // Reduced width to fit text inside circle
   },
   medium: {
     container: "w-[152px] h-[152px]",
@@ -1633,8 +1606,10 @@ var SIZE_CLASSES8 = {
     // 12px for status label (font-size: 12px)
     labelWeight: "medium",
     // font-weight: 500 (changed from bold)
-    spacing: "gap-1"
+    spacing: "gap-1",
     // 4px gap between percentage and label
+    contentWidth: "max-w-[90px]"
+    // Reduced width to fit text inside circle
   }
 };
 var VARIANT_CLASSES3 = {
@@ -1734,14 +1709,14 @@ var ProgressCircle = ({
         /* @__PURE__ */ jsxs14(
           "div",
           {
-            className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing}`,
+            className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing} ${sizeClasses.contentWidth}`,
             children: [
               showPercentage && /* @__PURE__ */ jsxs14(
                 Text_default,
                 {
                   size: sizeClasses.textSize,
                   weight: sizeClasses.textWeight,
-                  className: `text-center ${variantClasses.textColor} ${percentageClassName}`,
+                  className: `text-center w-full ${variantClasses.textColor} ${percentageClassName}`,
                   children: [
                     Math.round(percentage),
                     "%"
@@ -1754,7 +1729,7 @@ var ProgressCircle = ({
                   as: "span",
                   size: sizeClasses.labelSize,
                   weight: sizeClasses.labelWeight,
-                  className: `${variantClasses.labelColor} text-center uppercase tracking-wide ${labelClassName}`,
+                  className: `${variantClasses.labelColor} text-center uppercase tracking-wide truncate w-full ${size === "small" ? "text-[8px] leading-[9px]" : ""} ${labelClassName}`,
                   children: label
                 }
               )