analytica-frontend-lib 1.1.93 → 1.1.95

package/dist/BreadcrumbMenu/index.js

@@ -0,0 +1,308 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/BreadcrumbMenu/BreadcrumbMenu.tsx
+var BreadcrumbMenu_exports = {};
+__export(BreadcrumbMenu_exports, {
+  BreadcrumbMenu: () => BreadcrumbMenu
+});
+module.exports = __toCommonJS(BreadcrumbMenu_exports);
+
+// src/components/Menu/Menu.tsx
+var import_zustand = require("zustand");
+var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Menu/Menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var createMenuStore = (onValueChange) => (0, import_zustand.create)((set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+    onValueChange?.(value);
+  },
+  onValueChange
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES = {
+  menu: "bg-background shadow-soft-shadow-1 px-6",
+  menu2: "",
+  "menu-overflow": "",
+  breadcrumb: "bg-transparent shadow-none !px-0"
+};
+var Menu = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = (0, import_react.useRef)(null);
+    storeRef.current ??= createMenuStore(onValueChange);
+    const store = storeRef.current;
+    const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
+    (0, import_react.useEffect)(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
+    const variantClasses = VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        ...props,
+        children: injectStore(children, store)
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+var MenuContent = (0, import_react.forwardRef)(
+  ({ className, children, variant = "menu", ...props }, ref) => {
+    const baseClasses = "w-full flex flex-row items-center gap-2";
+    const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${variant == "breadcrumb" ? "flex-wrap" : ""}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    separator = false,
+    ...props
+  }, ref) => {
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = (0, import_zustand.useStore)(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,
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
+      ...props
+    };
+    const variants = {
+      menu: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "li",
+        {
+          "data-variant": "menu",
+          className: `
+            w-full flex flex-col items-center justify-center gap-0.5 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-indicator-info focus:border-2
+            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "li",
+        {
+          "data-variant": "menu2",
+          className: `
+            w-full flex flex-col items-center px-2 pt-4 gap-3 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: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
+                  className
+                ),
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
+        }
+      ),
+      "menu-overflow": /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "li",
+        {
+          "data-variant": "menu-overflow",
+          className: `
+            w-fit flex flex-col items-center px-2 pt-4 gap-3 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: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
+                  className
+                ),
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
+        }
+      ),
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "li",
+        {
+          "data-variant": "breadcrumb",
+          className: `
+            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_runtime.jsx)(
+              "span",
+              {
+                className: cn(
+                  "border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
+                  selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"
+                ),
+                children
+              }
+            ),
+            separator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_phosphor_react.CaretRight,
+              {
+                size: 16,
+                className: "text-text-600",
+                "data-testid": "separator"
+              }
+            )
+          ]
+        }
+      )
+    };
+    return variants[variant] ?? variants["menu"];
+  }
+);
+MenuItem.displayName = "MenuItem";
+var injectStore = (children, store) => import_react.Children.map(children, (child) => {
+  if (!(0, import_react.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return (0, import_react.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
+  });
+});
+
+// src/components/BreadcrumbMenu/BreadcrumbMenu.tsx
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BreadcrumbMenu = ({
+  breadcrumbs,
+  onBreadcrumbClick,
+  className = "!px-0 py-4 flex-wrap w-full"
+}) => {
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const handleClick = (breadcrumb, index) => {
+    if (onBreadcrumbClick) {
+      onBreadcrumbClick(breadcrumb, index);
+    }
+    navigate(breadcrumb.url);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Menu,
+    {
+      value: `breadcrumb-${breadcrumbs.length - 1}`,
+      defaultValue: "breadcrumb-0",
+      variant: "breadcrumb",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuContent, { className: "w-full flex flex-row flex-wrap gap-2 !px-0", children: breadcrumbs.map((breadcrumb, index) => {
+        const isLast = index === breadcrumbs.length - 1;
+        const hasSeparator = !isLast;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          MenuItem,
+          {
+            variant: "breadcrumb",
+            value: `breadcrumb-${index}`,
+            className: "!p-0 whitespace-nowrap",
+            onClick: () => handleClick(breadcrumb, index),
+            separator: hasSeparator,
+            children: breadcrumb.name
+          },
+          breadcrumb.id
+        );
+      }) })
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BreadcrumbMenu
+});
+//# sourceMappingURL=index.js.map

package/dist/BreadcrumbMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BreadcrumbMenu/BreadcrumbMenu.tsx","../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { Menu, MenuContent, MenuItem } from '../Menu/Menu';\nimport { useNavigate } from 'react-router-dom';\nimport { type BreadcrumbItem } from './breadcrumbStore';\n\n/**\n * Props do componente BreadcrumbMenu\n */\nexport interface BreadcrumbMenuProps {\n  /** Lista de breadcrumbs a serem exibidos */\n  breadcrumbs: BreadcrumbItem[];\n  /** Callback quando um breadcrumb é clicado */\n  onBreadcrumbClick?: (breadcrumb: BreadcrumbItem, index: number) => void;\n  /** Classes CSS adicionais */\n  className?: string;\n}\n\n/**\n * Componente reutilizável para renderizar um menu de breadcrumbs\n *\n * @example\n * ```tsx\n * <BreadcrumbMenu\n *   breadcrumbs={breadcrumbs}\n *   onBreadcrumbClick={(breadcrumb, index) => {\n *     console.log('Clicked:', breadcrumb, 'at index:', index);\n *   }}\n * />\n * ```\n */\nexport const BreadcrumbMenu = ({\n  breadcrumbs,\n  onBreadcrumbClick,\n  className = '!px-0 py-4 flex-wrap w-full',\n}: BreadcrumbMenuProps) => {\n  const navigate = useNavigate();\n\n  const handleClick = (breadcrumb: BreadcrumbItem, index: number) => {\n    if (onBreadcrumbClick) {\n      onBreadcrumbClick(breadcrumb, index);\n    }\n    navigate(breadcrumb.url);\n  };\n\n  return (\n    <Menu\n      value={`breadcrumb-${breadcrumbs.length - 1}`}\n      defaultValue=\"breadcrumb-0\"\n      variant=\"breadcrumb\"\n      className={className}\n    >\n      <MenuContent className=\"w-full flex flex-row flex-wrap gap-2 !px-0\">\n        {breadcrumbs.map((breadcrumb, index) => {\n          const isLast = index === breadcrumbs.length - 1;\n          const hasSeparator = !isLast;\n\n          return (\n            <MenuItem\n              key={breadcrumb.id}\n              variant=\"breadcrumb\"\n              value={`breadcrumb-${index}`}\n              className=\"!p-0 whitespace-nowrap\"\n              onClick={() => handleClick(breadcrumb, index)}\n              separator={hasSeparator}\n            >\n              {breadcrumb.name}\n            </MenuItem>\n          );\n        })}\n      </MenuContent>\n    </Menu>\n  );\n};\n","import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n  useState,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'menu-overflow' | 'breadcrumb';\n\ninterface MenuStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n  onValueChange?: (value: string) => void\n): MenuStoreApi =>\n  create<MenuStore>((set) => ({\n    value: '',\n    setValue: (value) => {\n      set({ value });\n      onValueChange?.(value);\n    },\n    onValueChange,\n  }));\n\nexport const useMenuStore = (externalStore?: MenuStoreApi) => {\n  if (!externalStore) throw new Error('MenuItem must be inside Menu');\n  return externalStore;\n};\n\ninterface MenuProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  variant?: MenuVariant;\n  onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n  menu: 'bg-background shadow-soft-shadow-1 px-6',\n  menu2: '',\n  'menu-overflow': '',\n  breadcrumb: 'bg-transparent shadow-none !px-0',\n};\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      className,\n      children,\n      defaultValue,\n      value: propValue,\n      variant = 'menu',\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const storeRef = useRef<MenuStoreApi>(null);\n    storeRef.current ??= createMenuStore(onValueChange);\n    const store = storeRef.current;\n    const { setValue } = useStore(store, (s) => s);\n\n    useEffect(() => {\n      setValue(propValue ?? defaultValue);\n    }, [defaultValue, propValue, setValue]);\n\n    const baseClasses =\n      variant === 'menu-overflow'\n        ? 'w-fit py-2 flex flex-row items-center justify-center'\n        : 'w-full py-2 flex flex-row items-center justify-center';\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <div\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${className ?? ''}\n        `}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n  children: ReactNode;\n  variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n  ({ className, children, variant = 'menu', ...props }, ref) => {\n    const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n    const variantClasses =\n      variant === 'menu2' || variant === 'menu-overflow'\n        ? 'overflow-x-auto scroll-smooth'\n        : '';\n\n    return (\n      <ul\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n          ${className ?? ''}\n        `}\n        style={\n          variant === 'menu2' || variant === 'menu-overflow'\n            ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n            : undefined\n        }\n        {...props}\n      >\n        {children}\n      </ul>\n    );\n  }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n  value: string;\n  disabled?: boolean;\n  store?: MenuStoreApi;\n  variant?: MenuVariant;\n  separator?: boolean;\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      variant = 'menu',\n      separator = false,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useMenuStore(externalStore);\n    const { value: selectedValue, setValue } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n    ) => {\n      if (!disabled) {\n        setValue(value);\n      }\n      props.onClick?.(e as MouseEvent<HTMLLIElement>);\n    };\n\n    const commonProps = {\n      role: 'menuitem',\n      'aria-disabled': disabled,\n      ref,\n      onClick: handleClick,\n      onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {\n        if (['Enter', ' '].includes(e.key)) handleClick(e);\n      },\n      tabIndex: disabled ? -1 : 0,\n      onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n        e.preventDefault();\n      },\n      ...props,\n    };\n\n    const variants: Record<string, ReactNode> = {\n      menu: (\n        <li\n          data-variant=\"menu\"\n          className={`\n            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs\n            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'bg-primary-50 text-primary-950' : 'text-text-950'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          {children}\n        </li>\n      ),\n      menu2: (\n        <li\n          data-variant=\"menu2\"\n          className={`\n            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? '' : 'pb-4'}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n              className\n            )}\n          >\n            {children}\n          </span>\n          {selectedValue === value && (\n            <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n          )}\n        </li>\n      ),\n      'menu-overflow': (\n        <li\n          data-variant=\"menu-overflow\"\n          className={`\n            w-fit flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? '' : 'pb-4'}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n              className\n            )}\n          >\n            {children}\n          </span>\n          {selectedValue === value && (\n            <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n          )}\n        </li>\n      ),\n      breadcrumb: (\n        <li\n          data-variant=\"breadcrumb\"\n          className={`\n            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'text-text-950' : 'text-text-600'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n              selectedValue === value\n                ? 'border-b-0 font-bold'\n                : 'border-b-text-600'\n            )}\n          >\n            {children}\n          </span>\n\n          {separator && (\n            <CaretRight\n              size={16}\n              className=\"text-text-600\"\n              data-testid=\"separator\"\n            />\n          )}\n        </li>\n      ),\n    };\n\n    return variants[variant] ?? variants['menu'];\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuItemIcon = ({\n  className,\n  icon,\n  ...props\n}: HTMLAttributes<HTMLSpanElement> & { icon: ReactNode }) => (\n  <span\n    className={cn(\n      'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n      className\n    )}\n    {...props}\n  >\n    {icon}\n  </span>\n);\n\nexport const internalScroll = (\n  container: HTMLUListElement | null,\n  direction: 'left' | 'right'\n) => {\n  if (!container) return;\n  container.scrollBy({\n    left: direction === 'left' ? -150 : 150,\n    behavior: 'smooth',\n  });\n};\n\nexport const internalCheckScroll = (\n  container: HTMLUListElement | null,\n  setShowLeftArrow: (v: boolean) => void,\n  setShowRightArrow: (v: boolean) => void\n) => {\n  if (!container) return;\n  const { scrollLeft, scrollWidth, clientWidth } = container;\n  setShowLeftArrow(scrollLeft > 0);\n  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);\n};\n\ninterface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst MenuOverflow = ({\n  children,\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: MenuOverflowProps) => {\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showLeftArrow, setShowLeftArrow] = useState(false);\n  const [showRightArrow, setShowRightArrow] = useState(false);\n\n  useEffect(() => {\n    const checkScroll = () =>\n      internalCheckScroll(\n        containerRef.current,\n        setShowLeftArrow,\n        setShowRightArrow\n      );\n    checkScroll();\n    const container = containerRef.current;\n    container?.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n    return () => {\n      container?.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n    };\n  }, []);\n\n  return (\n    <div\n      data-testid=\"menu-overflow-wrapper\"\n      className={cn('relative w-full overflow-hidden', className)}\n    >\n      {showLeftArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'left')}\n          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\"\n          data-testid=\"scroll-left-button\"\n        >\n          <CaretLeft size={16} />\n          <span className=\"sr-only\">Scroll left</span>\n        </button>\n      )}\n\n      <Menu\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        value={value}\n        variant=\"menu2\"\n        {...props}\n      >\n        <MenuContent ref={containerRef} variant=\"menu2\">\n          {children}\n        </MenuContent>\n      </Menu>\n\n      {showRightArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'right')}\n          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\"\n          data-testid=\"scroll-right-button\"\n        >\n          <CaretRight size={16} />\n          <span className=\"sr-only\">Scroll right</span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst injectStore = (children: ReactNode, store: MenuStoreApi): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === MenuItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\nexport default Menu;\nexport { Menu, MenuContent, MenuItem, MenuOverflow, MenuItemIcon };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/BreadcrumbMenu/index.mjs

@@ -0,0 +1,289 @@
+// src/components/Menu/Menu.tsx
+import { create, useStore } from "zustand";
+import {
+  useEffect,
+  useRef,
+  forwardRef,
+  isValidElement,
+  Children,
+  cloneElement,
+  useState
+} from "react";
+import { CaretLeft, CaretRight } from "phosphor-react";
+
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Menu/Menu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var createMenuStore = (onValueChange) => create((set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+    onValueChange?.(value);
+  },
+  onValueChange
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES = {
+  menu: "bg-background shadow-soft-shadow-1 px-6",
+  menu2: "",
+  "menu-overflow": "",
+  breadcrumb: "bg-transparent shadow-none !px-0"
+};
+var Menu = forwardRef(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = useRef(null);
+    storeRef.current ??= createMenuStore(onValueChange);
+    const store = storeRef.current;
+    const { setValue } = useStore(store, (s) => s);
+    useEffect(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
+    const variantClasses = VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        ...props,
+        children: injectStore(children, store)
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+var MenuContent = forwardRef(
+  ({ className, children, variant = "menu", ...props }, ref) => {
+    const baseClasses = "w-full flex flex-row items-center gap-2";
+    const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${variant == "breadcrumb" ? "flex-wrap" : ""}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = forwardRef(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    separator = false,
+    ...props
+  }, ref) => {
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = useStore(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,
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
+      ...props
+    };
+    const variants = {
+      menu: /* @__PURE__ */ jsx(
+        "li",
+        {
+          "data-variant": "menu",
+          className: `
+            w-full flex flex-col items-center justify-center gap-0.5 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-indicator-info focus:border-2
+            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      menu2: /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-variant": "menu2",
+          className: `
+            w-full flex flex-col items-center px-2 pt-4 gap-3 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: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
+                  className
+                ),
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ jsx("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
+        }
+      ),
+      "menu-overflow": /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-variant": "menu-overflow",
+          className: `
+            w-fit flex flex-col items-center px-2 pt-4 gap-3 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: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
+                  className
+                ),
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ jsx("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
+        }
+      ),
+      breadcrumb: /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-variant": "breadcrumb",
+          className: `
+            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__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
+                  selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"
+                ),
+                children
+              }
+            ),
+            separator && /* @__PURE__ */ jsx(
+              CaretRight,
+              {
+                size: 16,
+                className: "text-text-600",
+                "data-testid": "separator"
+              }
+            )
+          ]
+        }
+      )
+    };
+    return variants[variant] ?? variants["menu"];
+  }
+);
+MenuItem.displayName = "MenuItem";
+var injectStore = (children, store) => Children.map(children, (child) => {
+  if (!isValidElement(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return cloneElement(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
+  });
+});
+
+// src/components/BreadcrumbMenu/BreadcrumbMenu.tsx
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BreadcrumbMenu = ({
+  breadcrumbs,
+  onBreadcrumbClick,
+  className = "!px-0 py-4 flex-wrap w-full"
+}) => {
+  const navigate = useNavigate();
+  const handleClick = (breadcrumb, index) => {
+    if (onBreadcrumbClick) {
+      onBreadcrumbClick(breadcrumb, index);
+    }
+    navigate(breadcrumb.url);
+  };
+  return /* @__PURE__ */ jsx2(
+    Menu,
+    {
+      value: `breadcrumb-${breadcrumbs.length - 1}`,
+      defaultValue: "breadcrumb-0",
+      variant: "breadcrumb",
+      className,
+      children: /* @__PURE__ */ jsx2(MenuContent, { className: "w-full flex flex-row flex-wrap gap-2 !px-0", children: breadcrumbs.map((breadcrumb, index) => {
+        const isLast = index === breadcrumbs.length - 1;
+        const hasSeparator = !isLast;
+        return /* @__PURE__ */ jsx2(
+          MenuItem,
+          {
+            variant: "breadcrumb",
+            value: `breadcrumb-${index}`,
+            className: "!p-0 whitespace-nowrap",
+            onClick: () => handleClick(breadcrumb, index),
+            separator: hasSeparator,
+            children: breadcrumb.name
+          },
+          breadcrumb.id
+        );
+      }) })
+    }
+  );
+};
+export {
+  BreadcrumbMenu
+};
+//# sourceMappingURL=index.mjs.map