analytica-frontend-lib 1.0.63 → 1.0.64

package/dist/index.d.mts

@@ -23,7 +23,7 @@ export { default as Calendar } from './Calendar/index.mjs';
 export { default as Modal } from './Modal/index.mjs';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.mjs';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
-export { default as Menu, MenuContent, MenuItem, MenuOverflow, MenuSeparator } from './Menu/index.mjs';
+export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.mjs';
 export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.mjs';
 export { Skeleton, SkeletonCard, SkeletonCircle, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText } from './Skeleton/index.mjs';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { default as Calendar } from './Calendar/index.js';
 export { default as Modal } from './Modal/index.js';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
-export { default as Menu, MenuContent, MenuItem, MenuOverflow, MenuSeparator } from './Menu/index.js';
+export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.js';
 export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.js';
 export { Skeleton, SkeletonCard, SkeletonCircle, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText } from './Skeleton/index.js';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -47,7 +47,6 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuLabel: () => MenuLabel,
   MenuOverflow: () => MenuOverflow,
-  MenuSeparator: () => MenuSeparator,
   Modal: () => Modal_default,
   NavButton: () => NavButton_default,
   ProfileMenuFooter: () => ProfileMenuFooter,
@@ -2583,16 +2582,16 @@ var Calendar = ({
     onDateSelect?.(day.date);
   };
   if (variant === "navigation") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl pt-6 ${className}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between mb-4 px-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "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__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-sm font-medium text-text-600", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-sm font-medium text-text-600 group-hover:text-primary-950", children: [
                   MONTH_NAMES[currentDate.getMonth()],
                   " ",
                   currentDate.getFullYear()
@@ -2684,7 +2683,7 @@ var Calendar = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2 px-3", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
@@ -2692,7 +2691,7 @@ var Calendar = ({
         },
         `${day}-${index}`
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1 px-3", children: calendarData.map((day) => {
         if (!day.isCurrentMonth) {
           return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
@@ -3281,7 +3280,7 @@ var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, s
     "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();
@@ -3289,7 +3288,7 @@ var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, s
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { className: "text-primary-950", size: 18 }) })
     }
   );
 });
@@ -3306,7 +3305,7 @@ var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email
         `,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { size: 34, className: "text-primary-950" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col ", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md text-text-600", children: email })
@@ -3702,9 +3701,13 @@ var import_zustand4 = require("zustand");
 var import_react13 = require("react");
 var import_phosphor_react12 = require("phosphor-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var createMenuStore = () => (0, import_zustand4.create)((set) => ({
+var createMenuStore = (onValueChange) => (0, import_zustand4.create)((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");
@@ -3726,22 +3729,12 @@ var Menu = (0, import_react13.forwardRef)(
     ...props
   }, ref) => {
     const storeRef = (0, import_react13.useRef)(null);
-    storeRef.current ??= createMenuStore();
+    storeRef.current ??= createMenuStore(onValueChange);
     const store = storeRef.current;
-    const { setValue, value } = (0, import_zustand4.useStore)(store, (s) => s);
+    const { setValue } = (0, import_zustand4.useStore)(store, (s) => s);
     (0, import_react13.useEffect)(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
-    const onValueChangeRef = (0, import_react13.useRef)(onValueChange);
-    const isInitializedRef = (0, import_react13.useRef)(false);
-    onValueChangeRef.current = onValueChange;
-    (0, import_react13.useEffect)(() => {
-      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__ */ (0, import_jsx_runtime25.jsx)(
@@ -3771,6 +3764,7 @@ var MenuContent = (0, import_react13.forwardRef)(
         className: `
           ${baseClasses}
           ${variantClasses}
+          ${variant == "breadcrumb" ? "flex-wrap" : ""}
           ${className ?? ""}
         `,
         style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
@@ -3789,12 +3783,15 @@ var MenuItem = (0, import_react13.forwardRef)(
     disabled = false,
     store: externalStore,
     variant = "menu",
+    separator = false,
     ...props
   }, ref) => {
     const store = useMenuStore(externalStore);
     const { value: selectedValue, setValue } = (0, import_zustand4.useStore)(store, (s) => s);
     const handleClick = (e) => {
-      if (!disabled) setValue(value);
+      if (!disabled) {
+        setValue(value);
+      }
       props.onClick?.(e);
     };
     const commonProps = {
@@ -3827,41 +3824,59 @@ var MenuItem = (0, import_react13.forwardRef)(
           children
         }
       ),
-      menu2: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "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__ */ (0, import_jsx_runtime25.jsx)(
+              "span",
+              {
+                className: `flex flex-row items-center gap-2 px-2 text-text-950 text-xs font-bold ${className ?? ""}`,
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
         }
       ),
-      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "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__ */ (0, import_jsx_runtime25.jsx)(
-            "span",
-            {
-              className: `
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "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__ */ (0, import_jsx_runtime25.jsx)(
+              import_phosphor_react12.CaretRight,
+              {
+                size: 16,
+                className: "text-text-600",
+                "data-testid": "separator"
+              }
+            )
+          ]
         }
       )
     };
@@ -3869,19 +3884,6 @@ var MenuItem = (0, import_react13.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react13.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "li",
-    {
-      ref,
-      "aria-hidden": "true",
-      className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
-      ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretRight, {})
-    }
-  )
-);
-MenuSeparator.displayName = "MenuSeparator";
 var internalScroll = (container, direction) => {
   if (!container) return;
   container.scrollBy({
@@ -4339,7 +4341,8 @@ var CardPerformance = (0, import_react14.forwardRef)(
         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__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
@@ -4368,8 +4371,7 @@ var CardPerformance = (0, import_react14.forwardRef)(
             import_phosphor_react13.CaretRight,
             {
               className: "size-4.5 text-text-800 cursor-pointer",
-              "data-testid": "caret-icon",
-              onClick: () => onClickButton?.(valueButton)
+              "data-testid": "caret-icon"
             }
           )
         ]
@@ -4704,7 +4706,7 @@ var CardAudio = (0, import_react14.forwardRef)(
         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__ */ (0, import_jsx_runtime26.jsx)(
@@ -5034,7 +5036,6 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   MenuItem,
   MenuLabel,
   MenuOverflow,
-  MenuSeparator,
   Modal,
   NavButton,
   ProfileMenuFooter,