analytica-frontend-lib 1.0.35 → 1.0.36

package/dist/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   ProfileMenuHeader: () => ProfileMenuHeader,
   ProfileMenuSection: () => ProfileMenuSection,
   ProfileMenuTrigger: () => ProfileMenuTrigger,
+  ProgressBar: () => ProgressBar_default,
   Radio: () => Radio_default,
   Select: () => Select_default,
   SelectContent: () => SelectContent,
@@ -1500,11 +1501,153 @@ var Chips = ({
 };
 var Chips_default = Chips;
 
+// src/components/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SIZE_CLASSES7 = {
+  small: {
+    container: "h-1",
+    // 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",
+    // vertical layout for small
+    borderRadius: "rounded-full"
+    // 9999px border radius
+  },
+  medium: {
+    container: "h-2",
+    // 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",
+    // horizontal layout for medium
+    borderRadius: "rounded-lg"
+    // 8px border radius
+  }
+};
+var VARIANT_CLASSES2 = {
+  blue: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-primary-700"
+    // Blue for activity progress (#2271C4)
+  },
+  green: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-success-200"
+    // Green for performance (#84D3A2)
+  }
+};
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "medium",
+  variant = "blue",
+  label,
+  showPercentage = false,
+  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_CLASSES7[size];
+  const variantClasses = VARIANT_CLASSES2[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      children: [
+        size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Text_default,
+            {
+              as: "div",
+              size: sizeClasses.labelSize,
+              weight: "medium",
+              className: `text-text-950 ${labelClassName}`,
+              children: label
+            }
+          ),
+          showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            Text_default,
+            {
+              size: sizeClasses.labelSize,
+              weight: "medium",
+              className: `text-text-700 text-center ${percentageClassName}`,
+              children: [
+                Math.round(percentage),
+                "%"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "progress",
+                {
+                  value: clampedValue,
+                  max,
+                  "aria-label": typeof label === "string" ? label : "Progress",
+                  className: "absolute inset-0 w-full h-full opacity-0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "div",
+                {
+                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
+                  style: { width: `${percentage}%` }
+                }
+              )
+            ]
+          }
+        ),
+        size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          Text_default,
+          {
+            size: sizeClasses.labelSize,
+            weight: "medium",
+            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            children: [
+              Math.round(percentage),
+              "%"
+            ]
+          }
+        ),
+        size === "medium" && label && !showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Text_default,
+          {
+            as: "div",
+            size: sizeClasses.labelSize,
+            weight: "medium",
+            className: `text-text-950 flex-none ${labelClassName}`,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var ProgressBar_default = ProgressBar;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_phosphor_react7 = require("phosphor-react");
 var import_react9 = require("react");
 var import_zustand2 = require("zustand");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function createDropdownStore() {
   return (0, import_zustand2.create)((set) => ({
     open: false,
@@ -1595,13 +1738,13 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       store.setState({ open });
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
 var DropdownMenuTrigger = (0, import_react9.forwardRef)(({ className, children, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       ref,
@@ -1634,7 +1777,7 @@ var ALIGN_CLASSES = {
   end: "right-0"
 };
 var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       ref,
@@ -1671,7 +1814,7 @@ var MenuContent = (0, import_react9.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -1729,7 +1872,7 @@ var MenuItem = (0, import_react9.forwardRef)(
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         ref,
@@ -1759,7 +1902,7 @@ var MenuItem = (0, import_react9.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     ref,
@@ -1772,7 +1915,7 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       ref,
@@ -1784,13 +1927,13 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
 var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       ref,
@@ -1801,10 +1944,10 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
         `,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-md text-text-600", children: email })
         ] })
       ]
     }
@@ -1812,7 +1955,7 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileMenuSection = (0, import_react9.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       ref,
@@ -1830,7 +1973,7 @@ var ProfileMenuFooter = (0, import_react9.forwardRef)(
   ({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
     const store = useDropdownStore(externalStore);
     const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {
         ref,
@@ -1842,8 +1985,8 @@ var ProfileMenuFooter = (0, import_react9.forwardRef)(
         },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_phosphor_react7.SignOut, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Sair" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.SignOut, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Sair" })
         ]
       }
     );
@@ -1856,13 +1999,13 @@ var DropdownMenu_default = DropdownMenu;
 var import_zustand3 = require("zustand");
 var import_react10 = require("react");
 var import_phosphor_react8 = require("phosphor-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var VARIANT_CLASSES2 = {
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var VARIANT_CLASSES3 = {
   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_CLASSES7 = {
+var SIZE_CLASSES8 = {
   small: "text-sm",
   medium: "text-md",
   large: "text-lg"
@@ -1902,7 +2045,7 @@ function getLabelAsNode(children) {
   }
   const flattened = import_react10.Children.toArray(children);
   if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: flattened });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: flattened });
 }
 var injectStore2 = (children, store) => {
   return import_react10.Children.map(children, (child) => {
@@ -2000,8 +2143,8 @@ var Select = ({
       onValueChange(value);
     }
   }, [value]);
-  const sizeClasses = SIZE_CLASSES7[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  const sizeClasses = SIZE_CLASSES8[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
 };
 var SelectValue = ({
   placeholder,
@@ -2010,7 +2153,7 @@ var SelectValue = ({
   const store = useSelectStore(externalStore);
   const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
   const value = (0, import_zustand3.useStore)(store, (s) => s.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
 };
 var SelectTrigger = (0, import_react10.forwardRef)(
   ({
@@ -2024,8 +2167,8 @@ var SelectTrigger = (0, import_react10.forwardRef)(
     const store = useSelectStore(externalStore);
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
-    const variantClasses = VARIANT_CLASSES2[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    const variantClasses = VARIANT_CLASSES3[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         ref,
@@ -2043,7 +2186,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
         ...props,
         children: [
           props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_phosphor_react8.CaretDown,
             {
               className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
@@ -2068,7 +2211,7 @@ var SelectContent = (0, import_react10.forwardRef)(
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     if (!open) return null;
     const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         role: "menu",
@@ -2102,7 +2245,7 @@ var SelectItem = (0, import_react10.forwardRef)(
       }
       props.onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         role: "menuitem",
@@ -2122,7 +2265,7 @@ var SelectItem = (0, import_react10.forwardRef)(
         tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react8.Check, { className: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react8.Check, { className: "" }) }),
           children
         ]
       }
@@ -2153,6 +2296,7 @@ var Select_default = Select;
   ProfileMenuHeader,
   ProfileMenuSection,
   ProfileMenuTrigger,
+  ProgressBar,
   Radio,
   Select,
   SelectContent,