analytica-frontend-lib 1.0.36 → 1.0.38

package/dist/index.mjs

@@ -1601,6 +1601,172 @@ var ProgressBar = ({
 };
 var ProgressBar_default = ProgressBar;
 
+// src/components/ProgressCircle/ProgressCircle.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var SIZE_CLASSES8 = {
+  small: {
+    container: "w-[90px] h-[90px]",
+    // 90px circle from design specs
+    strokeWidth: 4,
+    // 4px stroke width - matches ProgressBar small (h-1)
+    textSize: "2xl",
+    // 24px for percentage (font-size: 24px)
+    textWeight: "medium",
+    // font-weight: 500
+    labelSize: "2xs",
+    // 10px for status label (closest to 8px design spec)
+    labelWeight: "bold",
+    // font-weight: 700
+    spacing: "gap-1"
+    // 4px gap between percentage and label
+  },
+  medium: {
+    container: "w-[152px] h-[152px]",
+    // 151.67px ≈ 152px circle from design specs
+    strokeWidth: 8,
+    // 8px stroke width - matches ProgressBar medium (h-2)
+    textSize: "2xl",
+    // 24px for percentage (font-size: 24px)
+    textWeight: "medium",
+    // font-weight: 500
+    labelSize: "xs",
+    // 12px for status label (font-size: 12px)
+    labelWeight: "medium",
+    // font-weight: 500 (changed from bold)
+    spacing: "gap-1"
+    // 4px gap between percentage and label
+  }
+};
+var VARIANT_CLASSES3 = {
+  blue: {
+    background: "stroke-primary-100",
+    // Light blue background (#BBDCF7)
+    fill: "stroke-primary-700",
+    // Blue for activity progress (#2271C4)
+    textColor: "text-primary-700",
+    // Blue text color (#2271C4)
+    labelColor: "text-text-700"
+    // Gray text for label (#525252)
+  },
+  green: {
+    background: "stroke-background-300",
+    // Gray background (#D5D4D4 - matches design)
+    fill: "stroke-success-200",
+    // Green for performance (#84D3A2 - matches design)
+    textColor: "text-text-800",
+    // Dark gray text (#404040 - matches design)
+    labelColor: "text-text-600"
+    // Medium gray text for label (#737373 - matches design)
+  }
+};
+var ProgressCircle = ({
+  value,
+  max = 100,
+  size = "small",
+  variant = "blue",
+  label,
+  showPercentage = true,
+  className = "",
+  labelClassName = "",
+  percentageClassName = ""
+}) => {
+  const safeValue = isNaN(value) ? 0 : value;
+  const clampedValue = Math.max(0, Math.min(safeValue, max));
+  const percentage = max === 0 ? 0 : clampedValue / max * 100;
+  const sizeClasses = SIZE_CLASSES8[size];
+  const variantClasses = VARIANT_CLASSES3[variant];
+  const radius = size === "small" ? 37 : 64;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size === "small" ? 45 : 76;
+  const svgSize = size === "small" ? 90 : 152;
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: `relative flex flex-col items-center justify-center ${sizeClasses.container} rounded-lg ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "svg",
+          {
+            className: "absolute inset-0 transform -rotate-90",
+            width: svgSize,
+            height: svgSize,
+            viewBox: `0 0 ${svgSize} ${svgSize}`,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx19(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: sizeClasses.strokeWidth,
+                  className: `${variantClasses.background} rounded-lg`
+                }
+              ),
+              /* @__PURE__ */ jsx19(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: sizeClasses.strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset,
+                  className: `${variantClasses.fill} transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          "progress",
+          {
+            value: clampedValue,
+            max,
+            "aria-label": typeof label === "string" ? label : "Progress",
+            className: "absolute opacity-0 w-0 h-0"
+          }
+        ),
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing}`,
+            children: [
+              showPercentage && /* @__PURE__ */ jsxs14(
+                Text_default,
+                {
+                  size: sizeClasses.textSize,
+                  weight: sizeClasses.textWeight,
+                  className: `text-center ${variantClasses.textColor} ${percentageClassName}`,
+                  children: [
+                    Math.round(percentage),
+                    "%"
+                  ]
+                }
+              ),
+              label && /* @__PURE__ */ jsx19(
+                Text_default,
+                {
+                  as: "span",
+                  size: sizeClasses.labelSize,
+                  weight: sizeClasses.labelWeight,
+                  className: `${variantClasses.labelColor} text-center uppercase tracking-wide ${labelClassName}`,
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ProgressCircle_default = ProgressCircle;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { SignOut, User } from "phosphor-react";
 import {
@@ -1613,7 +1779,7 @@ import {
   useState as useState5
 } from "react";
 import { create as create2, useStore } from "zustand";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function createDropdownStore() {
   return create2((set) => ({
     open: false,
@@ -1704,28 +1870,34 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       store.setState({ open });
     }
   }, []);
-  return /* @__PURE__ */ jsx19("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  return /* @__PURE__ */ jsx20("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = forwardRef9(({ className, children, onClick, store: externalStore, ...props }, ref) => {
+var DropdownMenuTrigger = ({
+  className,
+  children,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ jsx19(
-    "button",
+  return /* @__PURE__ */ jsx20(
+    Button_default,
     {
-      ref,
-      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      variant: "outline",
       onClick: (e) => {
         e.stopPropagation();
         toggleOpen();
         if (onClick) onClick(e);
       },
       "aria-expanded": open,
+      className: `${className}`,
       ...props,
       children
     }
   );
-});
+};
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var ITEM_SIZE_CLASSES = {
   small: "text-sm",
@@ -1742,8 +1914,12 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
+var MENUCONTENT_VARIANT_CLASSES = {
+  menu: "p-1",
+  profile: "p-6"
+};
 var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ref,
@@ -1758,6 +1934,7 @@ var MenuContent = forwardRef9(
     className,
     align = "start",
     side = "bottom",
+    variant = "menu",
     sideOffset = 4,
     children,
     store: externalStore,
@@ -1780,15 +1957,17 @@ var MenuContent = forwardRef9(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx19(
+    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         ref,
         role: "menu",
         className: `
-        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
         ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
         ${getPositionClasses()}
+        ${variantClasses}
         ${className}
       `,
         style: {
@@ -1831,14 +2010,14 @@ var MenuItem = forwardRef9(
     };
     const getVariantClasses = () => {
       if (variant === "profile") {
-        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
       }
       return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
     };
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref,
@@ -1860,7 +2039,7 @@ var MenuItem = forwardRef9(
         ...props,
         children: [
           iconLeft,
-          children,
+          /* @__PURE__ */ jsx20("span", { className: "w-full text-md", children }),
           iconRight
         ]
       }
@@ -1868,7 +2047,7 @@ var MenuItem = forwardRef9(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx19(
+var MenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx20(
   "div",
   {
     ref,
@@ -1881,7 +2060,7 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       ref,
@@ -1893,13 +2072,13 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ jsx19("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx19(User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ jsx20("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx20(User, { className: "text-background-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
 var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref,
@@ -1910,10 +2089,10 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
         `,
       ...props,
       children: [
-        /* @__PURE__ */ jsx19("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx19(User, { size: 34, className: "text-background-950" }) }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ jsx19("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ jsx19("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ jsx20("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx20(User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ jsx20("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ jsx20("p", { className: "text-md text-text-600", children: email })
         ] })
       ]
     }
@@ -1921,7 +2100,7 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileMenuSection = forwardRef9(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ref,
@@ -1935,29 +2114,33 @@ var ProfileMenuSection = forwardRef9(({ className, children, store: _store, ...p
   );
 });
 ProfileMenuSection.displayName = "ProfileMenuSection";
-var ProfileMenuFooter = forwardRef9(
-  ({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const setOpen = useStore(store, (s) => s.setOpen);
-    return /* @__PURE__ */ jsxs14(
-      "button",
-      {
-        ref,
-        className: `inline-flex items-center justify-center rounded-full cursor-pointer font-medium text-md px-5 py-2.5 w-full bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed ${className}`,
-        disabled,
-        onClick: (e) => {
-          setOpen(false);
-          onClick?.(e);
-        },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx19("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx19(SignOut, {}) }),
-          /* @__PURE__ */ jsx19("span", { children: "Sair" })
-        ]
-      }
-    );
-  }
-);
+var ProfileMenuFooter = ({
+  className,
+  disabled = false,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
+  const store = useDropdownStore(externalStore);
+  const setOpen = useStore(store, (s) => s.setOpen);
+  return /* @__PURE__ */ jsxs15(
+    Button_default,
+    {
+      variant: "outline",
+      className: `w-full ${className}`,
+      disabled,
+      onClick: (e) => {
+        setOpen(false);
+        onClick?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx20("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx20(SignOut, {}) }),
+        /* @__PURE__ */ jsx20("span", { children: "Sair" })
+      ]
+    }
+  );
+};
 ProfileMenuFooter.displayName = "ProfileMenuFooter";
 var DropdownMenu_default = DropdownMenu;
 
@@ -1972,13 +2155,13 @@ import {
   cloneElement as cloneElement2
 } from "react";
 import { CaretDown, Check as Check3 } from "phosphor-react";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var VARIANT_CLASSES3 = {
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var VARIANT_CLASSES4 = {
   outlined: "border-2 rounded-sm focus:border-primary-950",
   underlined: "border-b-2 focus:border-primary-950",
   rounded: "border-2 rounded-4xl focus:border-primary-950"
 };
-var SIZE_CLASSES8 = {
+var SIZE_CLASSES9 = {
   small: "text-sm",
   medium: "text-md",
   large: "text-lg"
@@ -2018,7 +2201,7 @@ function getLabelAsNode(children) {
   }
   const flattened = Children2.toArray(children);
   if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ jsx20(Fragment2, { children: flattened });
+  return /* @__PURE__ */ jsx21(Fragment2, { children: flattened });
 }
 var injectStore2 = (children, store) => {
   return Children2.map(children, (child) => {
@@ -2116,8 +2299,8 @@ var Select = ({
       onValueChange(value);
     }
   }, [value]);
-  const sizeClasses = SIZE_CLASSES8[size];
-  return /* @__PURE__ */ jsx20("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  const sizeClasses = SIZE_CLASSES9[size];
+  return /* @__PURE__ */ jsx21("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
 };
 var SelectValue = ({
   placeholder,
@@ -2126,7 +2309,7 @@ var SelectValue = ({
   const store = useSelectStore(externalStore);
   const selectedLabel = useStore2(store, (s) => s.selectedLabel);
   const value = useStore2(store, (s) => s.value);
-  return /* @__PURE__ */ jsx20("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+  return /* @__PURE__ */ jsx21("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
 };
 var SelectTrigger = forwardRef10(
   ({
@@ -2140,15 +2323,16 @@ var SelectTrigger = forwardRef10(
     const store = useSelectStore(externalStore);
     const open = useStore2(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
-    const variantClasses = VARIANT_CLASSES3[variant];
-    return /* @__PURE__ */ jsxs15(
+    const variantClasses = VARIANT_CLASSES4[variant];
+    return /* @__PURE__ */ jsxs16(
       "button",
       {
         ref,
         className: `
         flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
-        ${invalid && "border-indicator-error"}
-        ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        ${invalid && "border-indicator-error text-text-600"}
+        ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        ${!invalid && !disabled ? "text-text-700" : ""}
         ${variantClasses}
         ${className}
       `,
@@ -2159,7 +2343,7 @@ var SelectTrigger = forwardRef10(
         ...props,
         children: [
           props.children,
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             CaretDown,
             {
               className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
@@ -2183,8 +2367,8 @@ var SelectContent = forwardRef10(
     const store = useSelectStore(externalStore);
     const open = useStore2(store, (s) => s.open);
     if (!open) return null;
-    const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ jsx20(
+    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         role: "menu",
@@ -2218,7 +2402,7 @@ var SelectItem = forwardRef10(
       }
       props.onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         role: "menuitem",
@@ -2238,7 +2422,7 @@ var SelectItem = forwardRef10(
         tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsx20("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx20(Check3, { className: "" }) }),
+          /* @__PURE__ */ jsx21("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx21(Check3, { className: "" }) }),
           children
         ]
       }
@@ -2269,6 +2453,7 @@ export {
   ProfileMenuSection,
   ProfileMenuTrigger,
   ProgressBar_default as ProgressBar,
+  ProgressCircle_default as ProgressCircle,
   Radio_default as Radio,
   Select_default as Select,
   SelectContent,