analytica-frontend-lib 1.0.39 → 1.0.41

package/dist/index.mjs

@@ -776,48 +776,34 @@ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var SIZE_CLASSES4 = {
   small: {
     radio: "w-5 h-5",
-    // 20px x 20px
     textSize: "sm",
     spacing: "gap-1.5",
-    // 6px
     borderWidth: "border-2",
-    dotSize: "w-1.5 h-1.5",
-    // 6px inner dot
+    dotSize: "w-2 h-2",
     labelHeight: "h-5"
   },
   medium: {
     radio: "w-6 h-6",
-    // 24px x 24px
     textSize: "md",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    dotSize: "w-2 h-2",
-    // 8px inner dot
+    dotSize: "w-2.5 h-2.5",
     labelHeight: "h-6"
   },
   large: {
     radio: "w-7 h-7",
-    // 28px x 28px
     textSize: "lg",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-2.5 h-2.5",
-    // 10px inner dot
+    dotSize: "w-3 h-3",
     labelHeight: "h-7"
   },
   extraLarge: {
     radio: "w-8 h-8",
-    // 32px x 32px (larger than large)
     textSize: "xl",
     spacing: "gap-3",
-    // 12px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-3 h-3",
-    // 12px inner dot
+    dotSize: "w-3.5 h-3.5",
     labelHeight: "h-8"
   }
 };
@@ -829,39 +815,27 @@ var STATE_CLASSES2 = {
   },
   hovered: {
     unchecked: "border-border-500 bg-background",
-    // #8C8D8D hover state for unchecked
     checked: "border-info-700 bg-background"
-    // Adjust checked border for hover
   },
   focused: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   invalid: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   disabled: {
     unchecked: "border-border-400 bg-background cursor-not-allowed",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background cursor-not-allowed"
-    // #124393 for checked radio
   }
 };
 var DOT_CLASSES = {
   default: "bg-primary-950",
   hovered: "bg-info-700",
-  // #1C61B2 hover state for checked dot
   focused: "bg-primary-950",
-  // #124393 for focused checked dot
   invalid: "bg-primary-950",
-  // #124393 for invalid checked dot
   disabled: "bg-primary-950"
-  // #124393 for disabled checked dot
 };
 var Radio = forwardRef6(
   ({
@@ -947,7 +921,7 @@ var Radio = forwardRef6(
             label && /* @__PURE__ */ jsx11(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
                 children: /* @__PURE__ */ jsx11(
                   Text_default,
                   {
@@ -955,7 +929,7 @@ var Radio = forwardRef6(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
                     color: getTextColor(),
                     children: label
                   }
@@ -970,7 +944,7 @@ var Radio = forwardRef6(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-error-600",
           children: errorMessage
         }
@@ -980,7 +954,7 @@ var Radio = forwardRef6(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-text-500",
           children: helperText
         }
@@ -1467,7 +1441,6 @@ var SIZE_CLASSES7 = {
     // 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",
@@ -1480,8 +1453,6 @@ var SIZE_CLASSES7 = {
     // 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",
@@ -1523,25 +1494,25 @@ var ProgressBar = ({
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
       children: [
         size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-between w-full", children: [
           label && /* @__PURE__ */ jsx18(
             Text_default,
             {
               as: "div",
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-950 ${labelClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
               children: label
             }
           ),
           showPercentage && /* @__PURE__ */ jsxs13(
             Text_default,
             {
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-700 text-center ${percentageClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
               children: [
                 Math.round(percentage),
                 "%"
@@ -1576,9 +1547,9 @@ var ProgressBar = ({
         size === "medium" && showPercentage && /* @__PURE__ */ jsxs13(
           Text_default,
           {
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
             children: [
               Math.round(percentage),
               "%"
@@ -1589,9 +1560,9 @@ var ProgressBar = ({
           Text_default,
           {
             as: "div",
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 flex-none ${labelClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
             children: label
           }
         )
@@ -1983,7 +1954,7 @@ var MenuContent = forwardRef9(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = forwardRef9(
+var DropdownMenuItem = forwardRef9(
   ({
     className,
     size = "small",
@@ -2046,8 +2017,8 @@ var MenuItem = forwardRef9(
     );
   }
 );
-MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx20(
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx20(
   "div",
   {
     ref,
@@ -2055,7 +2026,7 @@ var MenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) =>
     ...props
   }
 ));
-MenuSeparator.displayName = "MenuSeparator";
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
@@ -2431,6 +2402,178 @@ var SelectItem = forwardRef10(
 );
 SelectItem.displayName = "SelectItem";
 var Select_default = Select;
+
+// src/components/Menu/Menu.tsx
+import { create as create4, useStore as useStore3 } from "zustand";
+import {
+  useEffect as useEffect3,
+  useRef as useRef3,
+  forwardRef as forwardRef11,
+  isValidElement as isValidElement3,
+  Children as Children3,
+  cloneElement as cloneElement3,
+  useState as useState6
+} from "react";
+import { CaretLeft, CaretRight } from "phosphor-react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var createMenuStore = () => create4((set) => ({
+  value: "",
+  setValue: (value) => set({ value })
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES5 = {
+  menu: "bg-background shadow-soft-shadow-1",
+  menu2: "overflow-x-auto scroll-smooth",
+  breadcrumb: ""
+};
+var Menu = forwardRef11(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = useRef3(null);
+    storeRef.current ??= createMenuStore();
+    const store = storeRef.current;
+    const { setValue, value } = useStore3(store, (s) => s);
+    useEffect3(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    useEffect3(() => {
+      onValueChange?.(value);
+    }, [value, onValueChange]);
+    const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
+    const variantClasses = VARIANT_CLASSES5[variant];
+    return /* @__PURE__ */ jsx22(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children: injectStore3(children, store)
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+var MenuItem = forwardRef11(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    ...props
+  }, ref) => {
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = useStore3(store, (s) => s);
+    const handleClick = (e) => {
+      if (!disabled) setValue(value);
+      props.onClick?.(e);
+    };
+    const commonProps = {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      ref,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (["Enter", " "].includes(e.key)) handleClick(e);
+      },
+      tabIndex: disabled ? -1 : 0,
+      ...props
+    };
+    const variants = {
+      menu: /* @__PURE__ */ jsx22(
+        "li",
+        {
+          "data-variant": "menu",
+          className: `
+            w-full flex flex-col gap-0.5 items-center py-1 px-2 rounded-sm font-medium text-xs
+            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
+            focus:outline-none focus:border-2-indicator-info focus:border-2
+            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      menu2: /* @__PURE__ */ jsx22(
+        "li",
+        {
+          "data-variant": "menu2",
+          className: `
+            flex flex-row items-center p-4 gap-2 border-b-2 border-transparent text-text-950 text-sx font-bold cursor-pointer
+            ${selectedValue === value ? "border-b-primary-950" : ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      breadcrumb: /* @__PURE__ */ jsx22(
+        "li",
+        {
+          "data-variant": "breadcrumb",
+          className: `
+            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-primary-950" : "text-text-600"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children: /* @__PURE__ */ jsx22(
+            "span",
+            {
+              className: `
+              border-b border-text-600 hover:border-primary-600 text-inherit
+              ${selectedValue === value ? "border-b-primary-950" : "border-b-primary-600"}
+            `,
+              children
+            }
+          )
+        }
+      )
+    };
+    return variants[variant] ?? variants["menu"];
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = forwardRef11(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(
+    "li",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx22(CaretRight, {})
+    }
+  )
+);
+MenuSeparator.displayName = "MenuSeparator";
+var injectStore3 = (children, store) => Children3.map(children, (child) => {
+  if (!isValidElement3(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return cloneElement3(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
+  });
+});
+var Menu_default = Menu;
 export {
   Alert_default as Alert,
   Badge_default as Badge,
@@ -2439,10 +2582,13 @@ export {
   Chips_default as Chips,
   Divider_default as Divider,
   DropdownMenu_default as DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   IconButton_default as IconButton,
   IconRoundedButton_default as IconRoundedButton,
   Input_default as Input,
+  Menu_default as Menu,
   MenuContent,
   MenuItem,
   MenuLabel,