analytica-frontend-lib 1.0.52 → 1.0.54

package/dist/index.mjs

@@ -971,6 +971,7 @@ import {
   useState as useState3,
   useId as useId3
 } from "react";
+import { WarningCircle as WarningCircle2 } from "phosphor-react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var SIZE_CLASSES5 = {
   small: {
@@ -1085,7 +1086,11 @@ var TextArea = forwardRef7(
           ...props
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx12(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      errorMessage && /* @__PURE__ */ jsxs9("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
+        /* @__PURE__ */ jsx12(WarningCircle2, { size: 16 }),
+        " ",
+        errorMessage
+      ] }),
       helperMessage && !errorMessage && /* @__PURE__ */ jsx12(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
     ] });
   }
@@ -1094,7 +1099,7 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle2, Info as Info2, X } from "phosphor-react";
+import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle3, Info as Info2, X } from "phosphor-react";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES4 = {
   solid: {
@@ -1111,7 +1116,7 @@ var VARIANT_ACTION_CLASSES4 = {
 var iconMap = {
   success: CheckCircle2,
   info: Info2,
-  warning: WarningCircle2
+  warning: WarningCircle3
 };
 var Toast = ({
   variant = "outlined",
@@ -1228,7 +1233,7 @@ var Divider = ({
 var Divider_default = Divider;
 
 // src/components/Input/Input.tsx
-import { WarningCircle as WarningCircle3, Eye, EyeSlash } from "phosphor-react";
+import { WarningCircle as WarningCircle4, Eye, EyeSlash } from "phosphor-react";
 import {
   forwardRef as forwardRef8,
   useState as useState4,
@@ -1385,7 +1390,7 @@ var Input = forwardRef8(
       /* @__PURE__ */ jsxs11("div", { className: "mt-1.5 gap-1.5", children: [
         helperText && /* @__PURE__ */ jsx16("p", { className: "text-sm text-text-500", children: helperText }),
         errorMessage && /* @__PURE__ */ jsxs11("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
-          /* @__PURE__ */ jsx16(WarningCircle3, { size: 16 }),
+          /* @__PURE__ */ jsx16(WarningCircle4, { size: 16 }),
           " ",
           errorMessage
         ] })
@@ -2406,7 +2411,7 @@ var getDayStyles = (day, variant, showActivities) => {
   let textStyle = "";
   if (variant === "selection" && day.isSelected) {
     dayStyle = "bg-primary-800";
-    textStyle = "text-white";
+    textStyle = "text-text";
   } else if (day.isToday) {
     textStyle = "text-primary-800";
   } else if (variant === "navigation" && showActivities && day.activities?.length) {
@@ -2778,7 +2783,7 @@ var Calendar = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx21(
       "div",
       {
         className: "h-4 flex items-center justify-center text-xs font-semibold text-text-500",
@@ -2786,7 +2791,7 @@ var Calendar = ({
       },
       day
     )) }),
-    /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+    /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-7", children: calendarData.map((day) => {
       if (!day.isCurrentMonth) {
         return /* @__PURE__ */ jsx21(
           "div",
@@ -2810,9 +2815,9 @@ var Calendar = ({
             "button",
             {
               className: `
-                  w-10 h-10
+                  w-9 h-9
                   flex items-center justify-center
-                  text-xl font-normal
+                  text-lg font-normal
                   cursor-pointer
                   rounded-full
                   focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-1
@@ -3089,7 +3094,7 @@ var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref)
   );
 });
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef9(
+var DropdownMenuContent = forwardRef9(
   ({
     className,
     align = "start",
@@ -3142,7 +3147,7 @@ var MenuContent = forwardRef9(
     );
   }
 );
-MenuContent.displayName = "MenuContent";
+DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = forwardRef9(
   ({
     className,
@@ -3315,7 +3320,7 @@ import {
   cloneElement as cloneElement2,
   useId as useId5
 } from "react";
-import { CaretDown, Check as Check4, WarningCircle as WarningCircle4 } from "phosphor-react";
+import { CaretDown, Check as Check4, WarningCircle as WarningCircle5 } from "phosphor-react";
 import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var VARIANT_CLASSES4 = {
   outlined: "border rounded-lg focus:border-primary-950",
@@ -3499,7 +3504,7 @@ var Select = ({
     /* @__PURE__ */ jsxs19("div", { className: "mt-1.5 gap-1.5", children: [
       helperText && /* @__PURE__ */ jsx24("p", { className: "text-sm text-text-500", children: helperText }),
       errorMessage && /* @__PURE__ */ jsxs19("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
-        /* @__PURE__ */ jsx24(WarningCircle4, { size: 16 }),
+        /* @__PURE__ */ jsx24(WarningCircle5, { size: 16 }),
         " ",
         errorMessage
       ] })
@@ -3671,7 +3676,7 @@ var useMenuStore = (externalStore) => {
 };
 var VARIANT_CLASSES5 = {
   menu: "bg-background shadow-soft-shadow-1",
-  menu2: "overflow-x-auto scroll-smooth",
+  menu2: "",
   breadcrumb: ""
 };
 var Menu = forwardRef11(
@@ -3694,10 +3699,10 @@ var Menu = forwardRef11(
     useEffect5(() => {
       onValueChange?.(value);
     }, [value, onValueChange]);
-    const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
+    const baseClasses = "w-full py-2 px-6 flex flex-row items-center justify-center";
     const variantClasses = VARIANT_CLASSES5[variant];
     return /* @__PURE__ */ jsx25(
-      "ul",
+      "div",
       {
         ref,
         className: `
@@ -3705,7 +3710,6 @@ var Menu = forwardRef11(
           ${variantClasses}
           ${className ?? ""}
         `,
-        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
         ...props,
         children: injectStore3(children, store)
       }
@@ -3713,6 +3717,27 @@ var Menu = forwardRef11(
   }
 );
 Menu.displayName = "Menu";
+var MenuContent = forwardRef11(
+  ({ className, children, variant = "menu", ...props }, ref) => {
+    const baseClasses = "w-full flex flex-row items-center gap-2";
+    const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
+    return /* @__PURE__ */ jsx25(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
 var MenuItem = forwardRef11(
   ({
     className,
@@ -3813,6 +3838,90 @@ var MenuSeparator = forwardRef11(
   )
 );
 MenuSeparator.displayName = "MenuSeparator";
+var internalScroll = (container, direction) => {
+  if (!container) return;
+  container.scrollBy({
+    left: direction === "left" ? -150 : 150,
+    behavior: "smooth"
+  });
+};
+var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
+  if (!container) return;
+  const { scrollLeft, scrollWidth, clientWidth } = container;
+  setShowLeftArrow(scrollLeft > 0);
+  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
+};
+var MenuOverflow = ({
+  children,
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  ...props
+}) => {
+  const containerRef = useRef4(null);
+  const [showLeftArrow, setShowLeftArrow] = useState7(false);
+  const [showRightArrow, setShowRightArrow] = useState7(false);
+  useEffect5(() => {
+    const checkScroll = () => internalCheckScroll(
+      containerRef.current,
+      setShowLeftArrow,
+      setShowRightArrow
+    );
+    checkScroll();
+    const container = containerRef.current;
+    container?.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      container?.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      "data-testid": "menu-overflow-wrapper",
+      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      children: [
+        showLeftArrow && /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "left"),
+            className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-left-button",
+            children: [
+              /* @__PURE__ */ jsx25(CaretLeft, { size: 16 }),
+              /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll left" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          Menu,
+          {
+            defaultValue,
+            onValueChange,
+            value,
+            variant: "menu2",
+            ...props,
+            children: /* @__PURE__ */ jsx25(MenuContent, { ref: containerRef, variant: "menu2", children })
+          }
+        ),
+        showRightArrow && /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "right"),
+            className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-right-button",
+            children: [
+              /* @__PURE__ */ jsx25(CaretRight, { size: 16 }),
+              /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll right" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var injectStore3 = (children, store) => Children3.map(children, (child) => {
   if (!isValidElement3(child)) return child;
   const typedChild = child;
@@ -4366,6 +4475,7 @@ export {
   Chips_default as Chips,
   Divider_default as Divider,
   DropdownMenu_default as DropdownMenu,
+  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -4376,6 +4486,7 @@ export {
   MenuContent,
   MenuItem,
   MenuLabel,
+  MenuOverflow,
   MenuSeparator,
   Modal_default as Modal,
   NavButton_default as NavButton,