analytica-frontend-lib 1.0.63 → 1.0.65

package/dist/index.mjs

@@ -2522,16 +2522,16 @@ var Calendar = ({
     onDateSelect?.(day.date);
   };
   if (variant === "navigation") {
-    return /* @__PURE__ */ jsxs16("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
+    return /* @__PURE__ */ jsxs16("div", { className: `bg-background rounded-xl pt-6 ${className}`, children: [
       /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between mb-4 px-6", children: [
         /* @__PURE__ */ jsxs16("div", { className: "relative", ref: monthPickerContainerRef, children: [
           /* @__PURE__ */ jsxs16(
             "button",
             {
               onClick: toggleMonthPicker,
-              className: "flex items-center gap-1 hover:bg-background-100 rounded px-2 py-1 transition-colors",
+              className: "flex items-center group gap-1 rounded transition-colors cursor-pointer",
               children: [
-                /* @__PURE__ */ jsxs16("span", { className: "text-sm font-medium text-text-600", children: [
+                /* @__PURE__ */ jsxs16("span", { className: "text-sm font-medium text-text-600 group-hover:text-primary-950", children: [
                   MONTH_NAMES[currentDate.getMonth()],
                   " ",
                   currentDate.getFullYear()
@@ -2623,7 +2623,7 @@ var Calendar = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1 mb-2 px-3", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ jsx21(
         "div",
         {
           className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
@@ -2631,7 +2631,7 @@ var Calendar = ({
         },
         `${day}-${index}`
       )) }),
-      /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+      /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1 px-3", children: calendarData.map((day) => {
         if (!day.isCurrentMonth) {
           return /* @__PURE__ */ jsx21(
             "div",
@@ -3228,7 +3228,7 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
     "button",
     {
       ref,
-      className: `rounded-lg size-10 bg-background-50 flex items-center justify-center ${className}`,
+      className: `rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer ${className}`,
       onClick: (e) => {
         e.stopPropagation();
         toggleOpen();
@@ -3236,7 +3236,7 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ jsx23("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx23(User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ jsx23("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx23(User, { className: "text-primary-950", size: 18 }) })
     }
   );
 });
@@ -3253,7 +3253,7 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
         `,
       ...props,
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx23(User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ jsx23("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx23(User, { size: 34, className: "text-primary-950" }) }),
         /* @__PURE__ */ jsxs18("div", { className: "flex flex-col ", children: [
           /* @__PURE__ */ jsx23("p", { className: "text-xl font-bold text-text-950", children: name }),
           /* @__PURE__ */ jsx23("p", { className: "text-md text-text-600", children: email })
@@ -3665,9 +3665,13 @@ import {
 } from "react";
 import { CaretLeft, CaretRight } from "phosphor-react";
 import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
-var createMenuStore = () => create4((set) => ({
+var createMenuStore = (onValueChange) => create4((set) => ({
   value: "",
-  setValue: (value) => set({ value })
+  setValue: (value) => {
+    set({ value });
+    onValueChange?.(value);
+  },
+  onValueChange
 }));
 var useMenuStore = (externalStore) => {
   if (!externalStore) throw new Error("MenuItem must be inside Menu");
@@ -3689,22 +3693,12 @@ var Menu = forwardRef11(
     ...props
   }, ref) => {
     const storeRef = useRef4(null);
-    storeRef.current ??= createMenuStore();
+    storeRef.current ??= createMenuStore(onValueChange);
     const store = storeRef.current;
-    const { setValue, value } = useStore3(store, (s) => s);
+    const { setValue } = useStore3(store, (s) => s);
     useEffect5(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
-    const onValueChangeRef = useRef4(onValueChange);
-    const isInitializedRef = useRef4(false);
-    onValueChangeRef.current = onValueChange;
-    useEffect5(() => {
-      if (isInitializedRef.current) {
-        onValueChangeRef.current?.(value);
-      } else {
-        isInitializedRef.current = true;
-      }
-    }, [value]);
     const baseClasses = "w-full py-2 px-6 flex flex-row items-center justify-center";
     const variantClasses = VARIANT_CLASSES5[variant];
     return /* @__PURE__ */ jsx25(
@@ -3734,6 +3728,7 @@ var MenuContent = forwardRef11(
         className: `
           ${baseClasses}
           ${variantClasses}
+          ${variant == "breadcrumb" ? "flex-wrap" : ""}
           ${className ?? ""}
         `,
         style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
@@ -3752,12 +3747,15 @@ var MenuItem = forwardRef11(
     disabled = false,
     store: externalStore,
     variant = "menu",
+    separator = false,
     ...props
   }, ref) => {
     const store = useMenuStore(externalStore);
     const { value: selectedValue, setValue } = useStore3(store, (s) => s);
     const handleClick = (e) => {
-      if (!disabled) setValue(value);
+      if (!disabled) {
+        setValue(value);
+      }
       props.onClick?.(e);
     };
     const commonProps = {
@@ -3790,41 +3788,59 @@ var MenuItem = forwardRef11(
           children
         }
       ),
-      menu2: /* @__PURE__ */ jsx25(
+      menu2: /* @__PURE__ */ jsxs20(
         "li",
         {
           "data-variant": "menu2",
           className: `
-            w-full flex flex-row items-center p-4 gap-2 border-b-4 border-transparent text-text-950 text-xs font-bold cursor-pointer focus:rounded-sm justify-center
-            focus:outline-none focus:border-indicator-info focus:border-2
-            ${selectedValue === value ? "border-b-primary-950" : ""}
-            ${className ?? ""}
+            w-full flex flex-col items-center px-4 pt-4 gap-3 border-b-4 border-transparent cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
+            focus:outline-none focus:border-indicator-info focus:border-2 
+            ${selectedValue === value ? "" : "pb-4"}
           `,
           ...commonProps,
-          children
+          children: [
+            /* @__PURE__ */ jsx25(
+              "span",
+              {
+                className: `flex flex-row items-center gap-2 px-2 text-text-950 text-xs font-bold ${className ?? ""}`,
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ jsx25("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
         }
       ),
-      breadcrumb: /* @__PURE__ */ jsx25(
+      breadcrumb: /* @__PURE__ */ jsxs20(
         "li",
         {
           "data-variant": "breadcrumb",
           className: `
-            w-full p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
+            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
             focus:outline-none focus:border-indicator-info focus:border-2
             ${selectedValue === value ? "text-text-950" : "text-text-600"}
             ${className ?? ""}
           `,
           ...commonProps,
-          children: /* @__PURE__ */ jsx25(
-            "span",
-            {
-              className: `
+          children: [
+            /* @__PURE__ */ jsx25(
+              "span",
+              {
+                className: `
               border-b border-text-600 hover:border-primary-600 text-inherit text-xs
-              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-primary-600"}
+              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
             `,
-              children
-            }
-          )
+                children
+              }
+            ),
+            separator && /* @__PURE__ */ jsx25(
+              CaretRight,
+              {
+                size: 16,
+                className: "text-text-600",
+                "data-testid": "separator"
+              }
+            )
+          ]
         }
       )
     };
@@ -3832,19 +3848,6 @@ var MenuItem = forwardRef11(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef11(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx25(
-    "li",
-    {
-      ref,
-      "aria-hidden": "true",
-      className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx25(CaretRight, {})
-    }
-  )
-);
-MenuSeparator.displayName = "MenuSeparator";
 var internalScroll = (container, direction) => {
   if (!container) return;
   container.scrollBy({
@@ -4217,10 +4220,10 @@ var CardProgress = forwardRef12(
               className: `
             flex justify-center items-center [&>svg]:size-6 text-text-950
             ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+            ${!color.startsWith("#") ? `bg-${color}` : ""}
           `,
-              style: {
-                backgroundColor: color
-              },
+              style: color.startsWith("#") ? { backgroundColor: color } : void 0,
+              "data-testid": "icon-container",
               children: icon
             }
           ),
@@ -4317,7 +4320,8 @@ var CardPerformance = forwardRef12(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `justify-between gap-2 ${className}`,
+        className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
+        onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
         ...props,
         children: [
           /* @__PURE__ */ jsxs21("div", { className: "w-full flex flex-col justify-between gap-2", children: [
@@ -4346,8 +4350,7 @@ var CardPerformance = forwardRef12(
             CaretRight2,
             {
               className: "size-4.5 text-text-800 cursor-pointer",
-              "data-testid": "caret-icon",
-              onClick: () => onClickButton?.(valueButton)
+              "data-testid": "caret-icon"
             }
           )
         ]
@@ -4682,7 +4685,7 @@ var CardAudio = forwardRef12(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `w-auto h-14 items-center gap-2 border-none ${className}`,
+        className: `w-auto h-14 items-center gap-2 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsx26(
@@ -5011,7 +5014,6 @@ export {
   MenuItem,
   MenuLabel,
   MenuOverflow,
-  MenuSeparator,
   Modal_default as Modal,
   NavButton_default as NavButton,
   ProfileMenuFooter,