analytica-frontend-lib 1.1.53 → 1.1.55

package/dist/DropdownMenu/index.js

@@ -29,13 +29,14 @@ __export(DropdownMenu_exports, {
   ProfileMenuHeader: () => ProfileMenuHeader,
   ProfileMenuSection: () => ProfileMenuSection,
   ProfileMenuTrigger: () => ProfileMenuTrigger,
+  ProfileToggleTheme: () => ProfileToggleTheme,
   createDropdownStore: () => createDropdownStore,
   default: () => DropdownMenu_default,
   useDropdownStore: () => useDropdownStore
 });
 module.exports = __toCommonJS(DropdownMenu_exports);
-var import_phosphor_react = require("phosphor-react");
-var import_react = require("react");
+var import_phosphor_react3 = require("phosphor-react");
+var import_react5 = require("react");
 var import_zustand = require("zustand");
 
 // src/utils/utils.ts
@@ -103,8 +104,495 @@ var Button = ({
 };
 var Button_default = Button;
 
-// src/components/DropdownMenu/DropdownMenu.tsx
+// src/components/Text/Text.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/Modal/Modal.tsx
+var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
+
+// src/components/Modal/utils/videoUtils.ts
+var isYouTubeUrl = (url) => {
+  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
+  return youtubeRegex.test(url);
+};
+var isValidYouTubeHost = (host) => {
+  if (host === "youtu.be") return "youtu.be";
+  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
+  if (isValidYouTubeCom) return "youtube";
+  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
+  if (isValidNoCookie) return "nocookie";
+  return null;
+};
+var extractYoutuBeId = (pathname) => {
+  const firstSeg = pathname.split("/").filter(Boolean)[0];
+  return firstSeg || null;
+};
+var extractYouTubeId = (pathname, searchParams) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const [first, second] = parts;
+  if (first === "embed" && second) return second;
+  if (first === "shorts" && second) return second;
+  if (first === "live" && second) return second;
+  const v = searchParams.get("v");
+  if (v) return v;
+  return null;
+};
+var getYouTubeVideoId = (url) => {
+  try {
+    const u = new URL(url);
+    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
+    if (!hostType) return null;
+    if (hostType === "youtu.be") {
+      return extractYoutuBeId(u.pathname);
+    }
+    return extractYouTubeId(u.pathname, u.searchParams);
+  } catch {
+    return null;
+  }
+};
+var getYouTubeEmbedUrl = (videoId) => {
+  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
+};
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SIZE_CLASSES2 = {
+  xs: "max-w-[360px]",
+  sm: "max-w-[420px]",
+  md: "max-w-[510px]",
+  lg: "max-w-[640px]",
+  xl: "max-w-[970px]"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  className = "",
+  closeOnEscape = true,
+  footer,
+  hideCloseButton = false,
+  variant = "default",
+  description,
+  image,
+  imageAlt,
+  actionLink,
+  actionLabel
+}) => {
+  const titleId = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+  (0, import_react.useEffect)(() => {
+    const originalOverflow = document.body.style.overflow;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = originalOverflow;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const sizeClasses = SIZE_CLASSES2[size];
+  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
+  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
+  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
+  const handleActionClick = () => {
+    if (actionLink) {
+      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
+    }
+  };
+  if (variant === "activity") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "dialog",
+      {
+        className: modalClasses,
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        open: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.X, { size: 18 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
+            image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "img",
+              {
+                src: image,
+                alt: imageAlt ?? "",
+                className: "w-[122px] h-[122px] object-contain"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "h2",
+              {
+                id: titleId,
+                className: "text-lg font-semibold text-text-950 text-center",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
+            actionLink && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full", children: [
+              (() => {
+                const normalized = normalizeUrl(actionLink);
+                const isYT = isYouTubeUrl(normalized);
+                if (!isYT) return null;
+                const id = getYouTubeVideoId(normalized);
+                if (!id) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      action: "primary",
+                      size: "large",
+                      className: "w-full",
+                      onClick: handleActionClick,
+                      children: actionLabel || "Iniciar Atividade"
+                    }
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "iframe",
+                  {
+                    src: getYouTubeEmbedUrl(id),
+                    className: "w-full aspect-video rounded-lg",
+                    allowFullScreen: true,
+                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                    title: "V\xEDdeo YouTube"
+                  }
+                );
+              })(),
+              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Button_default,
+                {
+                  variant: "solid",
+                  action: "primary",
+                  size: "large",
+                  className: "w-full",
+                  onClick: handleActionClick,
+                  children: actionLabel || "Iniciar Atividade"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "dialog",
+    {
+      className: modalClasses,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      open: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.X, { size: 18 })
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+      ]
+    }
+  ) });
+};
+var Modal_default = Modal;
+
+// src/components/ThemeToggle/ThemeToggle.tsx
+var import_phosphor_react2 = require("phosphor-react");
+var import_react4 = require("react");
+
+// src/components/SelectionButton/SelectionButton.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SelectionButton = (0, import_react2.forwardRef)(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(allClasses, className),
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+SelectionButton.displayName = "SelectionButton";
+var SelectionButton_default = SelectionButton;
+
+// src/hooks/useTheme.ts
+var import_react3 = require("react");
+var useTheme = () => {
+  const [themeMode, setThemeMode] = (0, import_react3.useState)("system");
+  const [isDark, setIsDark] = (0, import_react3.useState)(false);
+  const themeModeRef = (0, import_react3.useRef)("system");
+  const applyTheme = (0, import_react3.useCallback)((mode) => {
+    const htmlElement = document.documentElement;
+    const originalTheme = htmlElement.getAttribute("data-original-theme");
+    if (mode === "dark") {
+      htmlElement.setAttribute("data-theme", "dark");
+      setIsDark(true);
+    } else if (mode === "light") {
+      if (originalTheme) {
+        htmlElement.setAttribute("data-theme", originalTheme);
+      }
+      setIsDark(false);
+    } else if (mode === "system") {
+      const isSystemDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      if (isSystemDark) {
+        htmlElement.setAttribute("data-theme", "dark");
+        setIsDark(true);
+      } else if (originalTheme) {
+        htmlElement.setAttribute("data-theme", originalTheme);
+        setIsDark(false);
+      }
+    }
+  }, []);
+  const toggleTheme = (0, import_react3.useCallback)(() => {
+    let newMode;
+    if (themeMode === "light") {
+      newMode = "dark";
+    } else if (themeMode === "dark") {
+      newMode = "light";
+    } else {
+      newMode = "dark";
+    }
+    setThemeMode(newMode);
+    themeModeRef.current = newMode;
+    applyTheme(newMode);
+    localStorage.setItem("theme-mode", newMode);
+  }, [themeMode, applyTheme]);
+  const setTheme = (0, import_react3.useCallback)(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
+  );
+  (0, import_react3.useEffect)(() => {
+    const htmlElement = document.documentElement;
+    const currentTheme = htmlElement.getAttribute("data-theme");
+    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
+      htmlElement.setAttribute("data-original-theme", currentTheme);
+    }
+    const savedThemeMode = localStorage.getItem("theme-mode");
+    const initialMode = savedThemeMode || "system";
+    if (!savedThemeMode) {
+      localStorage.setItem("theme-mode", "system");
+    }
+    setThemeMode(initialMode);
+    themeModeRef.current = initialMode;
+    applyTheme(initialMode);
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemThemeChange = () => {
+      if (themeModeRef.current === "system") {
+        applyTheme("system");
+      }
+    };
+    mediaQuery.addEventListener("change", handleSystemThemeChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleSystemThemeChange);
+    };
+  }, [applyTheme]);
+  return {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme
+  };
+};
+
+// src/components/ThemeToggle/ThemeToggle.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ThemeToggle = ({
+  variant = "default",
+  onToggle
+}) => {
+  const { themeMode, setTheme } = useTheme();
+  const [tempTheme, setTempTheme] = (0, import_react4.useState)(themeMode);
+  (0, import_react4.useEffect)(() => {
+    setTempTheme(themeMode);
+  }, [themeMode]);
+  const problemTypes = [
+    {
+      id: "light",
+      title: "Claro",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Sun, { size: 24 })
+    },
+    {
+      id: "dark",
+      title: "Escuro",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Moon, { size: 24 })
+    },
+    {
+      id: "system",
+      title: "Sistema",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "svg",
+        {
+          width: "25",
+          height: "25",
+          viewBox: "0 0 25 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M12.5 2.75C15.085 2.75276 17.5637 3.78054 19.3916 5.6084C21.2195 7.43628 22.2473 9.915 22.25 12.5C22.25 14.4284 21.6778 16.3136 20.6064 17.917C19.5352 19.5201 18.0128 20.7699 16.2314 21.5078C14.4499 22.2458 12.489 22.4387 10.5977 22.0625C8.70642 21.6863 6.96899 20.758 5.60547 19.3945C4.24197 18.031 3.31374 16.2936 2.9375 14.4023C2.56129 12.511 2.75423 10.5501 3.49219 8.76855C4.23012 6.98718 5.47982 5.46483 7.08301 4.39355C8.68639 3.32221 10.5716 2.75 12.5 2.75ZM11.75 4.28516C9.70145 4.47452 7.7973 5.42115 6.41016 6.94043C5.02299 8.4599 4.25247 10.4426 4.25 12.5C4.25247 14.5574 5.02299 16.5401 6.41016 18.0596C7.7973 19.5789 9.70145 20.5255 11.75 20.7148V4.28516Z",
+              fill: "#525252"
+            }
+          )
+        }
+      )
+    }
+  ];
+  const handleThemeSelect = (selectedTheme) => {
+    if (variant === "with-save") {
+      setTempTheme(selectedTheme);
+    } else {
+      setTheme(selectedTheme);
+    }
+    if (onToggle) {
+      onToggle(selectedTheme);
+    }
+  };
+  const currentTheme = variant === "with-save" ? tempTheme : themeMode;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-2 sm:gap-4 py-2", children: problemTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SelectionButton_default,
+    {
+      icon: type.icon,
+      label: type.title,
+      selected: currentTheme === type.id,
+      onClick: () => handleThemeSelect(type.id),
+      className: "w-full p-2 sm:p-4"
+    },
+    type.id
+  )) });
+};
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function createDropdownStore() {
   return (0, import_zustand.create)((set) => ({
     open: false,
@@ -120,8 +608,8 @@ var useDropdownStore = (externalStore) => {
   return externalStore;
 };
 var injectStore = (children, store) => {
-  return import_react.Children.map(children, (child) => {
-    if ((0, import_react.isValidElement)(child)) {
+  return import_react5.Children.map(children, (child) => {
+    if ((0, import_react5.isValidElement)(child)) {
       const typedChild = child;
       const newProps = {
         store
@@ -129,7 +617,7 @@ var injectStore = (children, store) => {
       if (typedChild.props.children) {
         newProps.children = injectStore(typedChild.props.children, store);
       }
-      return (0, import_react.cloneElement)(typedChild, newProps);
+      return (0, import_react5.cloneElement)(typedChild, newProps);
     }
     return child;
   });
@@ -139,14 +627,14 @@ var DropdownMenu = ({
   open: propOpen,
   onOpenChange
 }) => {
-  const storeRef = (0, import_react.useRef)(null);
+  const storeRef = (0, import_react5.useRef)(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
   const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
   const setOpen = (newOpen) => {
     storeSetOpen(newOpen);
   };
-  const menuRef = (0, import_react.useRef)(null);
+  const menuRef = (0, import_react5.useRef)(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -180,7 +668,7 @@ var DropdownMenu = ({
       setOpen(false);
     }
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (open) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
@@ -190,16 +678,16 @@ var DropdownMenu = ({
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [open]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setOpen(open);
     onOpenChange?.(open);
   }, [open, onOpenChange]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (propOpen) {
       setOpen(propOpen);
     }
   }, [propOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
 var DropdownMenuTrigger = ({
   className,
@@ -211,7 +699,7 @@ var DropdownMenuTrigger = ({
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       onClick: (e) => {
@@ -246,8 +734,8 @@ var MENUCONTENT_VARIANT_CLASSES = {
   menu: "p-1",
   profile: "p-6"
 };
-var MenuLabel = (0, import_react.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var MenuLabel = (0, import_react5.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref,
@@ -257,7 +745,7 @@ var MenuLabel = (0, import_react.forwardRef)(({ className, inset, store: _store,
   );
 });
 MenuLabel.displayName = "MenuLabel";
-var DropdownMenuContent = (0, import_react.forwardRef)(
+var DropdownMenuContent = (0, import_react5.forwardRef)(
   ({
     className,
     align = "start",
@@ -270,8 +758,8 @@ var DropdownMenuContent = (0, import_react.forwardRef)(
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = (0, import_zustand.useStore)(store, (s) => s.open);
-    const [isVisible, setIsVisible] = (0, import_react.useState)(open);
-    (0, import_react.useEffect)(() => {
+    const [isVisible, setIsVisible] = (0, import_react5.useState)(open);
+    (0, import_react5.useEffect)(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -286,7 +774,7 @@ var DropdownMenuContent = (0, import_react.forwardRef)(
       return `absolute ${vertical} ${horizontal}`;
     };
     const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
@@ -311,7 +799,7 @@ var DropdownMenuContent = (0, import_react.forwardRef)(
   }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = (0, import_react.forwardRef)(
+var DropdownMenuItem = (0, import_react5.forwardRef)(
   ({
     className,
     size = "small",
@@ -345,7 +833,7 @@ var DropdownMenuItem = (0, import_react.forwardRef)(
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         ref,
@@ -367,7 +855,7 @@ var DropdownMenuItem = (0, import_react.forwardRef)(
         ...props,
         children: [
           iconLeft,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-full text-md", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full", children }),
           iconRight
         ]
       }
@@ -375,7 +863,7 @@ var DropdownMenuItem = (0, import_react.forwardRef)(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = (0, import_react.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var DropdownMenuSeparator = (0, import_react5.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "div",
   {
     ref,
@@ -384,11 +872,11 @@ var DropdownMenuSeparator = (0, import_react.forwardRef)(({ className, store: _s
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var ProfileMenuTrigger = (0, import_react.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+var ProfileMenuTrigger = (0, import_react5.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       ref,
@@ -403,13 +891,13 @@ var ProfileMenuTrigger = (0, import_react.forwardRef)(({ className, onClick, sto
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { className: "text-primary-950", size: 18 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.User, { className: "text-primary-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
-var ProfileMenuHeader = (0, import_react.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+var ProfileMenuHeader = (0, import_react5.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref,
@@ -417,18 +905,98 @@ var ProfileMenuHeader = (0, import_react.forwardRef)(({ className, name, email,
       className: cn("flex flex-row gap-4 items-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { size: 34, className: "text-primary-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.User, { size: 34, className: "text-primary-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { size: "xl", weight: "bold", color: "text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { size: "md", color: "text-text-600", children: email })
         ] })
       ]
     }
   );
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileMenuSection = (0, import_react.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
+var ProfileToggleTheme = ({ ...props }) => {
+  const { themeMode, setTheme } = useTheme();
+  const [modalThemeToggle, setModalThemeToggle] = (0, import_react5.useState)(false);
+  const [selectedTheme, setSelectedTheme] = (0, import_react5.useState)(themeMode);
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalThemeToggle(true);
+  };
+  const handleSave = () => {
+    setTheme(selectedTheme);
+    setModalThemeToggle(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        role: "menuitem",
+        "data-variant": "profile",
+        className: "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0 cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            setModalThemeToggle(true);
+          }
+        },
+        tabIndex: 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "svg",
+            {
+              width: "25",
+              height: "25",
+              viewBox: "0 0 25 25",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M12.5 2.75C15.085 2.75276 17.5637 3.78054 19.3916 5.6084C21.2195 7.43628 22.2473 9.915 22.25 12.5C22.25 14.4284 21.6778 16.3136 20.6064 17.917C19.5352 19.5201 18.0128 20.7699 16.2314 21.5078C14.4499 22.2458 12.489 22.4387 10.5977 22.0625C8.70642 21.6863 6.96899 20.758 5.60547 19.3945C4.24197 18.031 3.31374 16.2936 2.9375 14.4023C2.56129 12.511 2.75423 10.5501 3.49219 8.76855C4.23012 6.98718 5.47982 5.46483 7.08301 4.39355C8.68639 3.32221 10.5716 2.75 12.5 2.75ZM11.75 4.28516C9.70145 4.47452 7.7973 5.42115 6.41016 6.94043C5.02299 8.4599 4.25247 10.4426 4.25 12.5C4.25247 14.5574 5.02299 16.5401 6.41016 18.0596C7.7973 19.5789 9.70145 20.5255 11.75 20.7148V4.28516Z",
+                  fill: "#525252"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { className: "w-full", size: "md", children: "Apar\xEAncia" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.CaretRight, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Modal_default,
+      {
+        isOpen: modalThemeToggle,
+        onClose: () => setModalThemeToggle(false),
+        title: "Apar\xEAncia",
+        size: "md",
+        footer: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button_default,
+            {
+              variant: "outline",
+              onClick: () => setModalThemeToggle(false),
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { variant: "solid", onClick: () => handleSave(), children: "Salvar" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-text-500", children: "Escolha o tema:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeToggle, { variant: "with-save", onToggle: setSelectedTheme })
+        ] })
+      }
+    )
+  ] });
+};
+ProfileToggleTheme.displayName = "ProfileToggleTheme";
+var ProfileMenuSection = (0, import_react5.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
 });
 ProfileMenuSection.displayName = "ProfileMenuSection";
 var ProfileMenuFooter = ({
@@ -440,7 +1008,7 @@ var ProfileMenuFooter = ({
 }) => {
   const store = useDropdownStore(externalStore);
   const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Button_default,
     {
       variant: "outline",
@@ -452,8 +1020,8 @@ var ProfileMenuFooter = ({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.SignOut, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Sair" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { children: "Sair" })
       ]
     }
   );
@@ -471,6 +1039,7 @@ var DropdownMenu_default = DropdownMenu;
   ProfileMenuHeader,
   ProfileMenuSection,
   ProfileMenuTrigger,
+  ProfileToggleTheme,
   createDropdownStore,
   useDropdownStore
 });