analytica-frontend-lib 1.0.33 → 1.0.35

package/dist/DropdownMenu/index.mjs

@@ -1,31 +1,58 @@
 "use client";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
+import { SignOut, User } from "phosphor-react";
 import {
-  createContext,
-  useState,
-  useCallback,
-  useContext,
   forwardRef,
   useEffect,
   useRef,
-  useMemo
+  isValidElement,
+  Children,
+  cloneElement,
+  useState
 } from "react";
+import { create, useStore } from "zustand";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DropdownMenuContext = createContext(
-  void 0
-);
+function createDropdownStore() {
+  return create((set) => ({
+    open: false,
+    setOpen: (open) => set({ open })
+  }));
+}
+var useDropdownStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a DropdownMenu (store is missing)"
+    );
+  }
+  return externalStore;
+};
+var injectStore = (children, store) => {
+  return Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore(typedChild.props.children, store);
+      }
+      return cloneElement(typedChild, newProps);
+    }
+    return child;
+  });
+};
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState(false);
+  const storeRef = useRef(null);
+  storeRef.current ??= createDropdownStore();
+  const store = storeRef.current;
   const isControlled = open !== void 0;
-  const currentOpen = isControlled ? open : internalOpen;
-  const setOpen = useCallback(
-    (newOpen) => {
-      if (onOpenChange) onOpenChange(newOpen);
-      if (!isControlled) setInternalOpen(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
+  const uncontrolledOpen = useStore(store, (s) => s.open);
+  const currentOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = (newOpen) => {
+    onOpenChange?.(newOpen);
+    if (!isControlled) store.setState({ open: newOpen });
+  };
   const menuRef = useRef(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
@@ -61,6 +88,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     }
   };
   useEffect(() => {
+    onOpenChange?.(currentOpen);
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
@@ -70,17 +98,17 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  const value = useMemo(
-    () => ({ open: currentOpen, setOpen }),
-    [currentOpen, setOpen]
-  );
-  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "relative", ref: menuRef, children }) });
+  useEffect(() => {
+    if (isControlled) {
+      store.setState({ open });
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = forwardRef(({ className, children, onClick, ...props }, ref) => {
-  const context = useContext(DropdownMenuContext);
-  if (!context)
-    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
-  const { open, setOpen } = context;
+var DropdownMenuTrigger = forwardRef(({ className, children, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = useStore(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -88,7 +116,7 @@ var DropdownMenuTrigger = forwardRef(({ className, children, onClick, ...props }
       className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
       onClick: (e) => {
         e.stopPropagation();
-        setOpen(!open);
+        toggleOpen();
         if (onClick) onClick(e);
       },
       "aria-expanded": open,
@@ -113,15 +141,16 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  "fieldset",
-  {
-    ref,
-    role: "group",
-    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
-    ...props
-  }
-));
+var MenuLabel = forwardRef(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+      ...props
+    }
+  );
+});
 MenuLabel.displayName = "MenuLabel";
 var MenuContent = forwardRef(
   ({
@@ -130,9 +159,11 @@ var MenuContent = forwardRef(
     side = "bottom",
     sideOffset = 4,
     children,
+    store: externalStore,
     ...props
   }, ref) => {
-    const { open } = useContext(DropdownMenuContext);
+    const store = useDropdownStore(externalStore);
+    const open = useStore(store, (s) => s.open);
     const [isVisible, setIsVisible] = useState(open);
     useEffect(() => {
       if (open) {
@@ -175,15 +206,18 @@ MenuContent.displayName = "MenuContent";
 var MenuItem = forwardRef(
   ({
     className,
-    inset,
     size = "small",
     children,
     iconRight,
     iconLeft,
     disabled = false,
     onClick,
+    variant = "menu",
+    store: externalStore,
     ...props
   }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const setOpen = useStore(store, (s) => s.setOpen);
     const sizeClasses = ITEM_SIZE_CLASSES[size];
     const handleClick = (e) => {
       if (disabled) {
@@ -192,17 +226,27 @@ var MenuItem = forwardRef(
         return;
       }
       onClick?.(e);
+      setOpen(false);
+    };
+    const getVariantClasses = () => {
+      if (variant === "profile") {
+        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+      }
+      return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
+    };
+    const getVariantProps = () => {
+      return variant === "profile" ? { "data-variant": "profile" } : {};
     };
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         role: "menuitem",
+        ...getVariantProps(),
         "aria-disabled": disabled,
         className: `
           focus-visible:bg-background-50
-          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
-          ${inset && "pl-8"}
+           ${getVariantClasses()}
           ${sizeClasses}
           ${className}
           ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
@@ -223,7 +267,7 @@ var MenuItem = forwardRef(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenuSeparator = forwardRef(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -232,6 +276,88 @@ var MenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 MenuSeparator.displayName = "MenuSeparator";
+var ProfileMenuTrigger = forwardRef(({ className, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = useStore(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: `rounded-lg size-10 bg-background-50 flex items-center justify-center ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        onClick?.(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(User, { className: "text-background-950", size: 18 }) })
+    }
+  );
+});
+ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
+var ProfileMenuHeader = forwardRef(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-component": "ProfileMenuHeader",
+      className: `
+          flex flex-row gap-4 items-center
+          ${className}
+        `,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "text-md text-text-600", children: email })
+        ] })
+      ]
+    }
+  );
+});
+ProfileMenuHeader.displayName = "ProfileMenuHeader";
+var ProfileMenuSection = forwardRef(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `
+          flex flex-col p-2
+          ${className}
+        `,
+      ...props,
+      children
+    }
+  );
+});
+ProfileMenuSection.displayName = "ProfileMenuSection";
+var ProfileMenuFooter = forwardRef(
+  ({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const setOpen = useStore(store, (s) => s.setOpen);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: `inline-flex items-center justify-center rounded-full cursor-pointer font-medium text-md px-5 py-2.5 w-full bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed ${className}`,
+        disabled,
+        onClick: (e) => {
+          setOpen(false);
+          onClick?.(e);
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx(SignOut, {}) }),
+          /* @__PURE__ */ jsx("span", { children: "Sair" })
+        ]
+      }
+    );
+  }
+);
+ProfileMenuFooter.displayName = "ProfileMenuFooter";
 var DropdownMenu_default = DropdownMenu;
 export {
   DropdownMenuTrigger,
@@ -239,6 +365,12 @@ export {
   MenuItem,
   MenuLabel,
   MenuSeparator,
-  DropdownMenu_default as default
+  ProfileMenuFooter,
+  ProfileMenuHeader,
+  ProfileMenuSection,
+  ProfileMenuTrigger,
+  createDropdownStore,
+  DropdownMenu_default as default,
+  useDropdownStore
 };
 //# sourceMappingURL=index.mjs.map

package/dist/DropdownMenu/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useState,\n  useCallback,\n  useContext,\n  forwardRef,\n  ReactNode,\n  ButtonHTMLAttributes,\n  useEffect,\n  useRef,\n  HTMLAttributes,\n  MouseEvent,\n  KeyboardEvent,\n  useMemo,\n} from 'react';\n\ntype DropdownMenuContextType = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nconst DropdownMenuContext = createContext<DropdownMenuContextType | undefined>(\n  undefined\n);\n\ninterface DropdownMenuProps {\n  children: ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst DropdownMenu = ({ children, open, onOpenChange }: DropdownMenuProps) => {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isControlled = open !== undefined;\n  const currentOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      if (onOpenChange) onOpenChange(newOpen);\n      if (!isControlled) setInternalOpen(newOpen);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const menuRef = useRef<HTMLDivElement | null>(null);\n\n  const handleArrowDownOrArrowUp = (event: globalThis.KeyboardEvent) => {\n    const menuContent = menuRef.current?.querySelector('[role=\"menu\"]');\n    if (menuContent) {\n      event.preventDefault();\n\n      const items = Array.from(\n        menuContent.querySelectorAll(\n          '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n        )\n      ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n      if (items.length === 0) return;\n\n      const focusedItem = document.activeElement as HTMLElement;\n      const currentIndex = items.findIndex((item) => item === focusedItem);\n\n      let nextIndex;\n      if (event.key === 'ArrowDown') {\n        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n      } else {\n        // ArrowUp\n        nextIndex =\n          currentIndex === -1\n            ? items.length - 1\n            : (currentIndex - 1 + items.length) % items.length;\n      }\n\n      items[nextIndex]?.focus();\n    }\n  };\n\n  const handleDownkey = (event: globalThis.KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      setOpen(false);\n    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      handleArrowDownOrArrowUp(event);\n    }\n  };\n\n  const handleClickOutside = (event: globalThis.MouseEvent) => {\n    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n      setOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    if (currentOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleDownkey);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleDownkey);\n    };\n  }, [currentOpen]);\n\n  const value = useMemo(\n    () => ({ open: currentOpen, setOpen }),\n    [currentOpen, setOpen]\n  );\n  return (\n    <DropdownMenuContext.Provider value={value}>\n      <div className=\"relative\" ref={menuRef}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, onClick, ...props }, ref) => {\n  const context = useContext(DropdownMenuContext);\n  if (!context)\n    throw new Error('DropdownMenuTrigger must be used within a DropdownMenu');\n\n  const { open, setOpen } = context;\n\n  return (\n    <button\n      ref={ref}\n      className={`border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`}\n      onClick={(e) => {\n        e.stopPropagation();\n        setOpen(!open);\n        if (onClick) onClick(e);\n      }}\n      aria-expanded={open}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nconst ITEM_SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full',\n  right: 'top-full',\n  bottom: 'top-full',\n  left: 'top-full',\n};\n\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\nconst MenuLabel = forwardRef<\n  HTMLFieldSetElement,\n  HTMLAttributes<HTMLFieldSetElement> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n  <fieldset\n    ref={ref}\n    role=\"group\"\n    className={`text-sm w-full ${inset ? 'pl-8' : ''} ${className ?? ''}`}\n    {...props}\n  />\n));\nMenuLabel.displayName = 'MenuLabel';\n\nconst MenuContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    align?: 'start' | 'center' | 'end';\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    sideOffset?: number;\n  }\n>(\n  (\n    {\n      className,\n      align = 'start',\n      side = 'bottom',\n      sideOffset = 4,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { open } = useContext(DropdownMenuContext)!;\n    const [isVisible, setIsVisible] = useState(open);\n\n    useEffect(() => {\n      if (open) {\n        setIsVisible(true);\n      } else {\n        const timer = setTimeout(() => setIsVisible(false), 200);\n        return () => clearTimeout(timer);\n      }\n    }, [open]);\n\n    if (!isVisible) return null;\n\n    const getPositionClasses = () => {\n      const vertical = SIDE_CLASSES[side];\n      const horizontal = ALIGN_CLASSES[align];\n\n      return `absolute ${vertical} ${horizontal}`;\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"menu\"\n        className={`\n        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100\n        ${open ? 'animate-in fade-in-0 zoom-in-95' : 'animate-out fade-out-0 zoom-out-95'}\n        ${getPositionClasses()}\n        ${className}\n      `}\n        style={{\n          marginTop: side === 'bottom' ? sideOffset : undefined,\n          marginBottom: side === 'top' ? sideOffset : undefined,\n          marginLeft: side === 'right' ? sideOffset : undefined,\n          marginRight: side === 'left' ? sideOffset : undefined,\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nMenuContent.displayName = 'MenuContent';\n\nconst MenuItem = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    inset?: boolean;\n    size?: 'small' | 'medium';\n    iconLeft?: ReactNode;\n    iconRight?: ReactNode;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      inset,\n      size = 'small',\n      children,\n      iconRight,\n      iconLeft,\n      disabled = false,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClasses = ITEM_SIZE_CLASSES[size];\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${inset && 'pl-8'}\n          ${sizeClasses}\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        {iconLeft}\n        {children}\n        {iconRight}\n      </div>\n    );\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuSeparator = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={`my-1 h-px bg-border-200 ${className}`}\n    {...props}\n  />\n));\nMenuSeparator.displayName = 'MenuSeparator';\n\nexport default DropdownMenu;\nexport { DropdownMenuTrigger, MenuContent, MenuItem, MenuLabel, MenuSeparator };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { SignOut, User } from 'phosphor-react';\nimport {\n  forwardRef,\n  ReactNode,\n  ButtonHTMLAttributes,\n  useEffect,\n  useRef,\n  HTMLAttributes,\n  MouseEvent,\n  KeyboardEvent,\n  isValidElement,\n  Children,\n  cloneElement,\n  ReactElement,\n  useState,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\n\ninterface DropdownStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\ntype DropdownStoreApi = StoreApi<DropdownStore>;\n\nexport function createDropdownStore(): DropdownStoreApi {\n  return create<DropdownStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n  }));\n}\n\nexport const useDropdownStore = (externalStore?: DropdownStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a DropdownMenu (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nconst injectStore = (\n  children: ReactNode,\n  store: DropdownStoreApi\n): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: DropdownStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{\n        store: DropdownStoreApi;\n        children: ReactNode;\n      }> = {\n        store,\n      };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\ninterface DropdownMenuProps {\n  children: ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst DropdownMenu = ({ children, open, onOpenChange }: DropdownMenuProps) => {\n  const storeRef = useRef<DropdownStoreApi | null>(null);\n  storeRef.current ??= createDropdownStore();\n  const store = storeRef.current;\n  const isControlled = open !== undefined;\n  const uncontrolledOpen = useStore(store, (s) => s.open);\n  const currentOpen = isControlled ? open : uncontrolledOpen;\n\n  const setOpen = (newOpen: boolean) => {\n    onOpenChange?.(newOpen);\n    if (!isControlled) store.setState({ open: newOpen });\n  };\n\n  const menuRef = useRef<HTMLDivElement | null>(null);\n\n  const handleArrowDownOrArrowUp = (event: globalThis.KeyboardEvent) => {\n    const menuContent = menuRef.current?.querySelector('[role=\"menu\"]');\n    if (menuContent) {\n      event.preventDefault();\n\n      const items = Array.from(\n        menuContent.querySelectorAll(\n          '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n        )\n      ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n      if (items.length === 0) return;\n\n      const focusedItem = document.activeElement as HTMLElement;\n      const currentIndex = items.findIndex((item) => item === focusedItem);\n\n      let nextIndex;\n      if (event.key === 'ArrowDown') {\n        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n      } else {\n        // ArrowUp\n        nextIndex =\n          currentIndex === -1\n            ? items.length - 1\n            : (currentIndex - 1 + items.length) % items.length;\n      }\n\n      items[nextIndex]?.focus();\n    }\n  };\n\n  const handleDownkey = (event: globalThis.KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      setOpen(false);\n    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      handleArrowDownOrArrowUp(event);\n    }\n  };\n\n  const handleClickOutside = (event: globalThis.MouseEvent) => {\n    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n      setOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    onOpenChange?.(currentOpen);\n    if (currentOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleDownkey);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleDownkey);\n    };\n  }, [currentOpen]);\n\n  useEffect(() => {\n    if (isControlled) {\n      store.setState({ open: open });\n    }\n  }, []);\n\n  return (\n    <div className=\"relative\" ref={menuRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\n// Componentes genéricos do DropdownMenu\nconst DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement> & { store?: DropdownStoreApi }\n>(({ className, children, onClick, store: externalStore, ...props }, ref) => {\n  const store = useDropdownStore(externalStore);\n\n  const open = useStore(store, (s) => s.open);\n  const toggleOpen = () => store.setState({ open: !open });\n\n  return (\n    <button\n      ref={ref}\n      className={`border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`}\n      onClick={(e) => {\n        e.stopPropagation();\n        toggleOpen();\n        if (onClick) onClick(e);\n      }}\n      aria-expanded={open}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nconst ITEM_SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full',\n  right: 'top-full',\n  bottom: 'top-full',\n  left: 'top-full',\n};\n\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\nconst MenuLabel = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    inset?: boolean;\n    store?: DropdownStoreApi;\n  }\n>(({ className, inset, store: _store, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={`text-sm w-full ${inset ? 'pl-8' : ''} ${className ?? ''}`}\n      {...props}\n    />\n  );\n});\nMenuLabel.displayName = 'MenuLabel';\n\nconst MenuContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    align?: 'start' | 'center' | 'end';\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    sideOffset?: number;\n    store?: DropdownStoreApi;\n  }\n>(\n  (\n    {\n      className,\n      align = 'start',\n      side = 'bottom',\n      sideOffset = 4,\n      children,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useDropdownStore(externalStore);\n    const open = useStore(store, (s) => s.open);\n    const [isVisible, setIsVisible] = useState(open);\n\n    useEffect(() => {\n      if (open) {\n        setIsVisible(true);\n      } else {\n        const timer = setTimeout(() => setIsVisible(false), 200);\n        return () => clearTimeout(timer);\n      }\n    }, [open]);\n\n    if (!isVisible) return null;\n\n    const getPositionClasses = () => {\n      const vertical = SIDE_CLASSES[side];\n      const horizontal = ALIGN_CLASSES[align];\n\n      return `absolute ${vertical} ${horizontal}`;\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"menu\"\n        className={`\n        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100\n        ${open ? 'animate-in fade-in-0 zoom-in-95' : 'animate-out fade-out-0 zoom-out-95'}\n        ${getPositionClasses()}\n        ${className}\n      `}\n        style={{\n          marginTop: side === 'bottom' ? sideOffset : undefined,\n          marginBottom: side === 'top' ? sideOffset : undefined,\n          marginLeft: side === 'right' ? sideOffset : undefined,\n          marginRight: side === 'left' ? sideOffset : undefined,\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nMenuContent.displayName = 'MenuContent';\n\nconst MenuItem = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    inset?: boolean;\n    size?: 'small' | 'medium';\n    iconLeft?: ReactNode;\n    iconRight?: ReactNode;\n    disabled?: boolean;\n    variant?: 'profile' | 'menu';\n    store?: DropdownStoreApi;\n  }\n>(\n  (\n    {\n      className,\n      size = 'small',\n      children,\n      iconRight,\n      iconLeft,\n      disabled = false,\n      onClick,\n      variant = 'menu',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useDropdownStore(externalStore);\n    const setOpen = useStore(store, (s) => s.setOpen);\n    const sizeClasses = ITEM_SIZE_CLASSES[size];\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      onClick?.(e as MouseEvent<HTMLDivElement>);\n      setOpen(false);\n    };\n\n    const getVariantClasses = () => {\n      if (variant === 'profile') {\n        return 'relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0';\n      }\n      return 'relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0';\n    };\n\n    const getVariantProps = () => {\n      return variant === 'profile' ? { 'data-variant': 'profile' } : {};\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"menuitem\"\n        {...getVariantProps()}\n        aria-disabled={disabled}\n        className={`\n          focus-visible:bg-background-50\n           ${getVariantClasses()}\n          ${sizeClasses}\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        {iconLeft}\n        {children}\n        {iconRight}\n      </div>\n    );\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuSeparator = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & { store?: DropdownStoreApi }\n>(({ className, store: _store, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={`my-1 h-px bg-border-200 ${className}`}\n    {...props}\n  />\n));\nMenuSeparator.displayName = 'MenuSeparator';\n\n// Componentes específicos do ProfileMenu\nconst ProfileMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement> & { store?: DropdownStoreApi }\n>(({ className, onClick, store: externalStore, ...props }, ref) => {\n  const store = useDropdownStore(externalStore);\n  const open = useStore(store, (s) => s.open);\n  const toggleOpen = () => store.setState({ open: !open });\n\n  return (\n    <button\n      ref={ref}\n      className={`rounded-lg size-10 bg-background-50 flex items-center justify-center ${className}`}\n      onClick={(e) => {\n        e.stopPropagation();\n        toggleOpen();\n        onClick?.(e);\n      }}\n      aria-expanded={open}\n      {...props}\n    >\n      <span className=\"size-6 rounded-full bg-background-100 flex items-center justify-center\">\n        <User className=\"text-background-950\" size={18} />\n      </span>\n    </button>\n  );\n});\nProfileMenuTrigger.displayName = 'ProfileMenuTrigger';\n\nconst ProfileMenuHeader = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    name: string;\n    email: string;\n    store?: DropdownStoreApi;\n  }\n>(({ className, name, email, store: _store, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-component=\"ProfileMenuHeader\"\n      className={`\n          flex flex-row gap-4 items-center\n          ${className}\n        `}\n      {...props}\n    >\n      <span className=\"size-16 bg-background-100 rounded-full flex items-center justify-center\">\n        <User size={34} className=\"text-background-950\" />\n      </span>\n      <div className=\"flex flex-col \">\n        <p className=\"text-xl font-bold text-text-950\">{name}</p>\n        <p className=\"text-md text-text-600\">{email}</p>\n      </div>\n    </div>\n  );\n});\nProfileMenuHeader.displayName = 'ProfileMenuHeader';\n\nconst ProfileMenuSection = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & { store?: DropdownStoreApi }\n>(({ className, children, store: _store, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={`\n          flex flex-col p-2\n          ${className}\n        `}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nProfileMenuSection.displayName = 'ProfileMenuSection';\n\nconst ProfileMenuFooter = forwardRef<\n  HTMLButtonElement,\n  HTMLAttributes<HTMLButtonElement> & {\n    disabled?: boolean;\n    store?: DropdownStoreApi;\n  }\n>(\n  (\n    { className, disabled = false, onClick, store: externalStore, ...props },\n    ref\n  ) => {\n    const store = useDropdownStore(externalStore);\n    const setOpen = useStore(store, (s) => s.setOpen);\n\n    return (\n      <button\n        ref={ref}\n        className={`inline-flex items-center justify-center rounded-full cursor-pointer font-medium text-md px-5 py-2.5 w-full bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed ${className}`}\n        disabled={disabled}\n        onClick={(e) => {\n          setOpen(false);\n          onClick?.(e);\n        }}\n        {...props}\n      >\n        <span className=\"mr-2 flex items-center\">\n          <SignOut />\n        </span>\n        <span>Sair</span>\n      </button>\n    );\n  }\n);\nProfileMenuFooter.displayName = 'ProfileMenuFooter';\n\n// Exportações\nexport default DropdownMenu;\nexport {\n  // Componentes genéricos\n  DropdownMenuTrigger,\n  MenuContent,\n  MenuItem,\n  MenuLabel,\n  MenuSeparator,\n\n  // Componentes específicos do ProfileMenu\n  ProfileMenuTrigger,\n  ProfileMenuHeader,\n  ProfileMenuSection,\n  ProfileMenuFooter,\n};\n"],"mappings":"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","names":[]}

package/dist/index.css

@@ -61,6 +61,7 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --radius-4xl: 2rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -89,6 +90,7 @@
     --color-background-200: #dcdbdb;
     --color-background-500: #8e8e8e;
     --color-background-800: #414040;
+    --color-background-950: #121212;
     --color-background-muted: #f7f8f7;
     --color-border-50: #f3f3f3;
     --color-border-100: #e6e6e6;
@@ -375,6 +377,9 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -450,6 +455,9 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -510,6 +518,18 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+  .size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -522,6 +542,9 @@
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -537,6 +560,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -546,6 +572,9 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
+  .h-\[1em\] {
+    height: 1em;
+  }
   .h-\[21px\] {
     height: 21px;
   }
@@ -570,6 +599,9 @@
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -591,6 +623,12 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-\[1em\] {
+    width: 1em;
+  }
+  .w-\[288px\] {
+    width: 288px;
+  }
   .w-\[384px\] {
     width: 384px;
   }
@@ -612,6 +650,12 @@
   .min-w-\[210px\] {
     min-width: 210px;
   }
+  .min-w-\[220px\] {
+    min-width: 220px;
+  }
+  .min-w-\[288px\] {
+    min-width: 288px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -622,10 +666,21 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -695,6 +750,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -715,6 +773,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-4xl {
+    border-radius: var(--radius-4xl);
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1106,6 +1167,9 @@
   .text-background-800 {
     color: var(--color-background-800);
   }
+  .text-background-950 {
+    color: var(--color-background-950);
+  }
   .text-error-500 {
     color: var(--color-error-500);
   }
@@ -1133,6 +1197,9 @@
   .text-info-800 {
     color: var(--color-info-800);
   }
+  .text-inherit {
+    color: inherit;
+  }
   .text-primary {
     color: var(--color-primary);
   }
@@ -1293,6 +1360,15 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-transform {
+    transition-property:
+      transform,
+      translate,
+      scale,
+      rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1787,6 +1863,12 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\]\:size-6 {
+    & > svg {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  }
   .\[\&\>svg\]\:shrink-0 {
     & > svg {
       flex-shrink: 0;