analytica-frontend-lib 1.1.49 → 1.1.50

package/dist/ThemeToggle/index.d.mts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * ThemeToggle component props interface
+ */
+type ThemeToggleProps = {
+    /** Modo de exibição do toggle */
+    variant?: 'simple' | 'detailed' | 'buttons';
+    /** Tamanho do componente */
+    size?: 'sm' | 'md' | 'lg';
+    /** Mostrar ícones nos botões */
+    showIcons?: boolean;
+    /** Mostrar labels nos botões */
+    showLabels?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Conteúdo customizado para o botão simples */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+/**
+ * ThemeToggle component for Analytica Ensino platforms
+ *
+ * Componente para alternar entre temas light, dark e system.
+ * Oferece diferentes variantes de exibição e tamanhos.
+ * Integra com o hook useTheme para gerenciamento de estado.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param variant - Modo de exibição (simple, detailed, buttons)
+ * @param size - Tamanho do componente (sm, md, lg)
+ * @param showIcons - Mostrar ícones nos botões
+ * @param showLabels - Mostrar labels nos botões
+ * @param className - Classes CSS adicionais
+ * @param children - Conteúdo customizado para o botão simples
+ */
+declare const ThemeToggle: react.ForwardRefExoticComponent<{
+    /** Modo de exibição do toggle */
+    variant?: "simple" | "detailed" | "buttons";
+    /** Tamanho do componente */
+    size?: "sm" | "md" | "lg";
+    /** Mostrar ícones nos botões */
+    showIcons?: boolean;
+    /** Mostrar labels nos botões */
+    showLabels?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Conteúdo customizado para o botão simples */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & react.RefAttributes<HTMLButtonElement>>;
+
+export { ThemeToggle, type ThemeToggleProps };

package/dist/ThemeToggle/index.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * ThemeToggle component props interface
+ */
+type ThemeToggleProps = {
+    /** Modo de exibição do toggle */
+    variant?: 'simple' | 'detailed' | 'buttons';
+    /** Tamanho do componente */
+    size?: 'sm' | 'md' | 'lg';
+    /** Mostrar ícones nos botões */
+    showIcons?: boolean;
+    /** Mostrar labels nos botões */
+    showLabels?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Conteúdo customizado para o botão simples */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+/**
+ * ThemeToggle component for Analytica Ensino platforms
+ *
+ * Componente para alternar entre temas light, dark e system.
+ * Oferece diferentes variantes de exibição e tamanhos.
+ * Integra com o hook useTheme para gerenciamento de estado.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param variant - Modo de exibição (simple, detailed, buttons)
+ * @param size - Tamanho do componente (sm, md, lg)
+ * @param showIcons - Mostrar ícones nos botões
+ * @param showLabels - Mostrar labels nos botões
+ * @param className - Classes CSS adicionais
+ * @param children - Conteúdo customizado para o botão simples
+ */
+declare const ThemeToggle: react.ForwardRefExoticComponent<{
+    /** Modo de exibição do toggle */
+    variant?: "simple" | "detailed" | "buttons";
+    /** Tamanho do componente */
+    size?: "sm" | "md" | "lg";
+    /** Mostrar ícones nos botões */
+    showIcons?: boolean;
+    /** Mostrar labels nos botões */
+    showLabels?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Conteúdo customizado para o botão simples */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & react.RefAttributes<HTMLButtonElement>>;
+
+export { ThemeToggle, type ThemeToggleProps };

package/dist/ThemeToggle/index.js

@@ -0,0 +1,236 @@
+"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/ThemeToggle/ThemeToggle.tsx
+var ThemeToggle_exports = {};
+__export(ThemeToggle_exports, {
+  ThemeToggle: () => ThemeToggle
+});
+module.exports = __toCommonJS(ThemeToggle_exports);
+var import_react2 = require("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/hooks/useTheme.ts
+var import_react = require("react");
+var useTheme = () => {
+  const [themeMode, setThemeMode] = (0, import_react.useState)("system");
+  const [isDark, setIsDark] = (0, import_react.useState)(false);
+  const themeModeRef = (0, import_react.useRef)("system");
+  const applyTheme = (0, import_react.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_react.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_react.useCallback)(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
+  );
+  (0, import_react.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_runtime = require("react/jsx-runtime");
+var ThemeToggle = (0, import_react2.forwardRef)(
+  ({
+    variant = "simple",
+    size = "md",
+    showIcons = true,
+    showLabels = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const { themeMode, isDark, toggleTheme, setTheme } = useTheme();
+    const sizeClasses = {
+      sm: "text-sm px-3 py-1.5",
+      md: "text-md px-4 py-2",
+      lg: "text-lg px-5 py-2.5"
+    };
+    const activeClasses = "bg-primary-500 text-white";
+    const inactiveClasses = "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600";
+    const baseButtonClasses = "inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+    const smallButtonClasses = "px-3 py-1.5 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+    const renderThemeButton = (theme, icon, label, isActive, buttonSize) => {
+      const buttonClasses = buttonSize ? cn(baseButtonClasses, sizeClasses[buttonSize]) : smallButtonClasses;
+      const stateClasses = isActive ? activeClasses : inactiveClasses;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTheme(theme),
+          className: cn(buttonClasses, stateClasses),
+          ...buttonSize ? props : {},
+          children: [
+            showIcons && icon,
+            showLabels && label
+          ]
+        }
+      );
+    };
+    if (variant === "simple") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          ref,
+          onClick: toggleTheme,
+          className: cn(
+            "inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+            sizeClasses[size],
+            className
+          ),
+          ...props,
+          children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            showIcons && (isDark ? "\u2600\uFE0F" : "\u{1F319}"),
+            showLabels && (isDark ? "Claro" : "Escuro")
+          ] })
+        }
+      );
+    }
+    if (variant === "detailed") {
+      const getLabel = () => {
+        if (themeMode === "system") return "Sistema";
+        if (isDark) return "Escuro";
+        return "Claro";
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+          "Tema: ",
+          getLabel()
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-1", children: [
+          renderThemeButton("light", "\u2600\uFE0F ", "Claro", themeMode === "light"),
+          renderThemeButton("dark", "\u{1F319} ", "Escuro", themeMode === "dark"),
+          renderThemeButton(
+            "system",
+            "\u2699\uFE0F ",
+            "Sistema",
+            themeMode === "system"
+          )
+        ] })
+      ] });
+    }
+    if (variant === "buttons") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex gap-2", className), children: [
+        renderThemeButton(
+          "light",
+          "\u2600\uFE0F",
+          "Claro",
+          themeMode === "light",
+          size
+        ),
+        renderThemeButton(
+          "dark",
+          "\u{1F319}",
+          "Escuro",
+          themeMode === "dark",
+          size
+        ),
+        renderThemeButton(
+          "system",
+          "\u2699\uFE0F",
+          "Sistema",
+          themeMode === "system",
+          size
+        )
+      ] });
+    }
+    return null;
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeToggle
+});
+//# sourceMappingURL=index.js.map

package/dist/ThemeToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ThemeToggle/ThemeToggle.tsx","../../src/utils/utils.ts","../../src/hooks/useTheme.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\nimport { useTheme } from '../../hooks/useTheme';\n\n/**\n * ThemeToggle component props interface\n */\nexport type ThemeToggleProps = {\n  /** Modo de exibição do toggle */\n  variant?: 'simple' | 'detailed' | 'buttons';\n  /** Tamanho do componente */\n  size?: 'sm' | 'md' | 'lg';\n  /** Mostrar ícones nos botões */\n  showIcons?: boolean;\n  /** Mostrar labels nos botões */\n  showLabels?: boolean;\n  /** Classes CSS adicionais */\n  className?: string;\n  /** Conteúdo customizado para o botão simples */\n  children?: ReactNode;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;\n\n/**\n * ThemeToggle component for Analytica Ensino platforms\n *\n * Componente para alternar entre temas light, dark e system.\n * Oferece diferentes variantes de exibição e tamanhos.\n * Integra com o hook useTheme para gerenciamento de estado.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param variant - Modo de exibição (simple, detailed, buttons)\n * @param size - Tamanho do componente (sm, md, lg)\n * @param showIcons - Mostrar ícones nos botões\n * @param showLabels - Mostrar labels nos botões\n * @param className - Classes CSS adicionais\n * @param children - Conteúdo customizado para o botão simples\n */\nexport const ThemeToggle = forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      variant = 'simple',\n      size = 'md',\n      showIcons = true,\n      showLabels = true,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { themeMode, isDark, toggleTheme, setTheme } = useTheme();\n\n    // Classes base para tamanhos\n    const sizeClasses = {\n      sm: 'text-sm px-3 py-1.5',\n      md: 'text-md px-4 py-2',\n      lg: 'text-lg px-5 py-2.5',\n    };\n\n    // Classes para botões ativos\n    const activeClasses = 'bg-primary-500 text-white';\n    const inactiveClasses =\n      'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600';\n\n    // Classes base para botões\n    const baseButtonClasses =\n      'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500';\n    const smallButtonClasses =\n      'px-3 py-1.5 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500';\n\n    // Função para renderizar botão de tema\n    const renderThemeButton = (\n      theme: 'light' | 'dark' | 'system',\n      icon: string,\n      label: string,\n      isActive: boolean,\n      buttonSize?: 'sm' | 'md' | 'lg'\n    ) => {\n      const buttonClasses = buttonSize\n        ? cn(baseButtonClasses, sizeClasses[buttonSize])\n        : smallButtonClasses;\n      const stateClasses = isActive ? activeClasses : inactiveClasses;\n\n      return (\n        <button\n          type=\"button\"\n          onClick={() => setTheme(theme)}\n          className={cn(buttonClasses, stateClasses)}\n          {...(buttonSize ? props : {})}\n        >\n          {showIcons && icon}\n          {showLabels && label}\n        </button>\n      );\n    };\n\n    // Renderizar botão simples\n    if (variant === 'simple') {\n      return (\n        <button\n          type=\"button\"\n          ref={ref}\n          onClick={toggleTheme}\n          className={cn(\n            'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',\n            sizeClasses[size],\n            className\n          )}\n          {...props}\n        >\n          {children || (\n            <>\n              {showIcons && (isDark ? '☀️' : '🌙')}\n              {showLabels && (isDark ? 'Claro' : 'Escuro')}\n            </>\n          )}\n        </button>\n      );\n    }\n\n    // Renderizar botões detalhados\n    if (variant === 'detailed') {\n      const getLabel = () => {\n        if (themeMode === 'system') return 'Sistema';\n        if (isDark) return 'Escuro';\n        return 'Claro';\n      };\n      return (\n        <div className={cn('flex flex-col gap-2', className)}>\n          <div className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Tema: {getLabel()}\n          </div>\n          <div className=\"flex gap-1\">\n            {renderThemeButton('light', '☀️ ', 'Claro', themeMode === 'light')}\n            {renderThemeButton('dark', '🌙 ', 'Escuro', themeMode === 'dark')}\n            {renderThemeButton(\n              'system',\n              '⚙️ ',\n              'Sistema',\n              themeMode === 'system'\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    // Renderizar botões separados\n    if (variant === 'buttons') {\n      return (\n        <div className={cn('flex gap-2', className)}>\n          {renderThemeButton(\n            'light',\n            '☀️',\n            'Claro',\n            themeMode === 'light',\n            size\n          )}\n          {renderThemeButton(\n            'dark',\n            '🌙',\n            'Escuro',\n            themeMode === 'dark',\n            size\n          )}\n          {renderThemeButton(\n            'system',\n            '⚙️',\n            'Sistema',\n            themeMode === 'system',\n            size\n          )}\n        </div>\n      );\n    }\n\n    return null;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\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","import { useEffect, useState, useCallback, useRef } from 'react';\n\ntype ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n  const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n  const [isDark, setIsDark] = useState(false);\n\n  // Ref para manter o estado atual do tema de forma síncrona\n  const themeModeRef = useRef<ThemeMode>('system');\n\n  // Função para aplicar o tema baseado no modo selecionado\n  const applyTheme = useCallback((mode: ThemeMode) => {\n    const htmlElement = document.documentElement;\n    const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n    if (mode === 'dark') {\n      htmlElement.setAttribute('data-theme', 'dark');\n      setIsDark(true);\n    } else if (mode === 'light') {\n      if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n      setIsDark(false);\n    } else if (mode === 'system') {\n      const isSystemDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      if (isSystemDark) {\n        htmlElement.setAttribute('data-theme', 'dark');\n        setIsDark(true);\n      } else if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n        setIsDark(false);\n      }\n    }\n  }, []);\n\n  // Função para alternar entre os temas\n  const toggleTheme = useCallback(() => {\n    let newMode: ThemeMode;\n    if (themeMode === 'light') {\n      newMode = 'dark';\n    } else if (themeMode === 'dark') {\n      newMode = 'light';\n    } else {\n      // Se estiver em 'system', vai para 'dark'\n      newMode = 'dark';\n    }\n    setThemeMode(newMode);\n    themeModeRef.current = newMode;\n    applyTheme(newMode);\n    localStorage.setItem('theme-mode', newMode);\n  }, [themeMode, applyTheme]);\n\n  // Função para definir um tema específico\n  const setTheme = useCallback(\n    (mode: ThemeMode) => {\n      setThemeMode(mode);\n      themeModeRef.current = mode;\n      applyTheme(mode);\n      localStorage.setItem('theme-mode', mode);\n    },\n    [applyTheme]\n  );\n\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n    const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n    const initialMode = savedThemeMode || 'system';\n\n    // Se não há tema salvo, persiste 'system' como padrão\n    if (!savedThemeMode) {\n      localStorage.setItem('theme-mode', 'system');\n    }\n\n    setThemeMode(initialMode);\n    themeModeRef.current = initialMode;\n    applyTheme(initialMode);\n\n    // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleSystemThemeChange = () => {\n      // Usa o ref para ter acesso ao estado atual de forma síncrona\n      if (themeModeRef.current === 'system') {\n        applyTheme('system');\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleSystemThemeChange);\n    };\n  }, [applyTheme]);\n\n  return {\n    themeMode,\n    isDark,\n    toggleTheme,\n    setTheme,\n  };\n};\n"],"mappings":"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","names":["import_react"]}

package/dist/ThemeToggle/index.mjs

@@ -0,0 +1,211 @@
+// src/components/ThemeToggle/ThemeToggle.tsx
+import { forwardRef } from "react";
+
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/hooks/useTheme.ts
+import { useEffect, useState, useCallback, useRef } from "react";
+var useTheme = () => {
+  const [themeMode, setThemeMode] = useState("system");
+  const [isDark, setIsDark] = useState(false);
+  const themeModeRef = useRef("system");
+  const applyTheme = 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 = 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 = useCallback(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
+  );
+  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
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ThemeToggle = forwardRef(
+  ({
+    variant = "simple",
+    size = "md",
+    showIcons = true,
+    showLabels = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const { themeMode, isDark, toggleTheme, setTheme } = useTheme();
+    const sizeClasses = {
+      sm: "text-sm px-3 py-1.5",
+      md: "text-md px-4 py-2",
+      lg: "text-lg px-5 py-2.5"
+    };
+    const activeClasses = "bg-primary-500 text-white";
+    const inactiveClasses = "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600";
+    const baseButtonClasses = "inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+    const smallButtonClasses = "px-3 py-1.5 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+    const renderThemeButton = (theme, icon, label, isActive, buttonSize) => {
+      const buttonClasses = buttonSize ? cn(baseButtonClasses, sizeClasses[buttonSize]) : smallButtonClasses;
+      const stateClasses = isActive ? activeClasses : inactiveClasses;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTheme(theme),
+          className: cn(buttonClasses, stateClasses),
+          ...buttonSize ? props : {},
+          children: [
+            showIcons && icon,
+            showLabels && label
+          ]
+        }
+      );
+    };
+    if (variant === "simple") {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ref,
+          onClick: toggleTheme,
+          className: cn(
+            "inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+            sizeClasses[size],
+            className
+          ),
+          ...props,
+          children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+            showIcons && (isDark ? "\u2600\uFE0F" : "\u{1F319}"),
+            showLabels && (isDark ? "Claro" : "Escuro")
+          ] })
+        }
+      );
+    }
+    if (variant === "detailed") {
+      const getLabel = () => {
+        if (themeMode === "system") return "Sistema";
+        if (isDark) return "Escuro";
+        return "Claro";
+      };
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+          "Tema: ",
+          getLabel()
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          renderThemeButton("light", "\u2600\uFE0F ", "Claro", themeMode === "light"),
+          renderThemeButton("dark", "\u{1F319} ", "Escuro", themeMode === "dark"),
+          renderThemeButton(
+            "system",
+            "\u2699\uFE0F ",
+            "Sistema",
+            themeMode === "system"
+          )
+        ] })
+      ] });
+    }
+    if (variant === "buttons") {
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", className), children: [
+        renderThemeButton(
+          "light",
+          "\u2600\uFE0F",
+          "Claro",
+          themeMode === "light",
+          size
+        ),
+        renderThemeButton(
+          "dark",
+          "\u{1F319}",
+          "Escuro",
+          themeMode === "dark",
+          size
+        ),
+        renderThemeButton(
+          "system",
+          "\u2699\uFE0F",
+          "Sistema",
+          themeMode === "system",
+          size
+        )
+      ] });
+    }
+    return null;
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+export {
+  ThemeToggle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/ThemeToggle/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ThemeToggle/ThemeToggle.tsx","../../src/utils/utils.ts","../../src/hooks/useTheme.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\nimport { useTheme } from '../../hooks/useTheme';\n\n/**\n * ThemeToggle component props interface\n */\nexport type ThemeToggleProps = {\n  /** Modo de exibição do toggle */\n  variant?: 'simple' | 'detailed' | 'buttons';\n  /** Tamanho do componente */\n  size?: 'sm' | 'md' | 'lg';\n  /** Mostrar ícones nos botões */\n  showIcons?: boolean;\n  /** Mostrar labels nos botões */\n  showLabels?: boolean;\n  /** Classes CSS adicionais */\n  className?: string;\n  /** Conteúdo customizado para o botão simples */\n  children?: ReactNode;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;\n\n/**\n * ThemeToggle component for Analytica Ensino platforms\n *\n * Componente para alternar entre temas light, dark e system.\n * Oferece diferentes variantes de exibição e tamanhos.\n * Integra com o hook useTheme para gerenciamento de estado.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param variant - Modo de exibição (simple, detailed, buttons)\n * @param size - Tamanho do componente (sm, md, lg)\n * @param showIcons - Mostrar ícones nos botões\n * @param showLabels - Mostrar labels nos botões\n * @param className - Classes CSS adicionais\n * @param children - Conteúdo customizado para o botão simples\n */\nexport const ThemeToggle = forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      variant = 'simple',\n      size = 'md',\n      showIcons = true,\n      showLabels = true,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { themeMode, isDark, toggleTheme, setTheme } = useTheme();\n\n    // Classes base para tamanhos\n    const sizeClasses = {\n      sm: 'text-sm px-3 py-1.5',\n      md: 'text-md px-4 py-2',\n      lg: 'text-lg px-5 py-2.5',\n    };\n\n    // Classes para botões ativos\n    const activeClasses = 'bg-primary-500 text-white';\n    const inactiveClasses =\n      'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600';\n\n    // Classes base para botões\n    const baseButtonClasses =\n      'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500';\n    const smallButtonClasses =\n      'px-3 py-1.5 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500';\n\n    // Função para renderizar botão de tema\n    const renderThemeButton = (\n      theme: 'light' | 'dark' | 'system',\n      icon: string,\n      label: string,\n      isActive: boolean,\n      buttonSize?: 'sm' | 'md' | 'lg'\n    ) => {\n      const buttonClasses = buttonSize\n        ? cn(baseButtonClasses, sizeClasses[buttonSize])\n        : smallButtonClasses;\n      const stateClasses = isActive ? activeClasses : inactiveClasses;\n\n      return (\n        <button\n          type=\"button\"\n          onClick={() => setTheme(theme)}\n          className={cn(buttonClasses, stateClasses)}\n          {...(buttonSize ? props : {})}\n        >\n          {showIcons && icon}\n          {showLabels && label}\n        </button>\n      );\n    };\n\n    // Renderizar botão simples\n    if (variant === 'simple') {\n      return (\n        <button\n          type=\"button\"\n          ref={ref}\n          onClick={toggleTheme}\n          className={cn(\n            'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',\n            sizeClasses[size],\n            className\n          )}\n          {...props}\n        >\n          {children || (\n            <>\n              {showIcons && (isDark ? '☀️' : '🌙')}\n              {showLabels && (isDark ? 'Claro' : 'Escuro')}\n            </>\n          )}\n        </button>\n      );\n    }\n\n    // Renderizar botões detalhados\n    if (variant === 'detailed') {\n      const getLabel = () => {\n        if (themeMode === 'system') return 'Sistema';\n        if (isDark) return 'Escuro';\n        return 'Claro';\n      };\n      return (\n        <div className={cn('flex flex-col gap-2', className)}>\n          <div className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Tema: {getLabel()}\n          </div>\n          <div className=\"flex gap-1\">\n            {renderThemeButton('light', '☀️ ', 'Claro', themeMode === 'light')}\n            {renderThemeButton('dark', '🌙 ', 'Escuro', themeMode === 'dark')}\n            {renderThemeButton(\n              'system',\n              '⚙️ ',\n              'Sistema',\n              themeMode === 'system'\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    // Renderizar botões separados\n    if (variant === 'buttons') {\n      return (\n        <div className={cn('flex gap-2', className)}>\n          {renderThemeButton(\n            'light',\n            '☀️',\n            'Claro',\n            themeMode === 'light',\n            size\n          )}\n          {renderThemeButton(\n            'dark',\n            '🌙',\n            'Escuro',\n            themeMode === 'dark',\n            size\n          )}\n          {renderThemeButton(\n            'system',\n            '⚙️',\n            'Sistema',\n            themeMode === 'system',\n            size\n          )}\n        </div>\n      );\n    }\n\n    return null;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\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","import { useEffect, useState, useCallback, useRef } from 'react';\n\ntype ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n  const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n  const [isDark, setIsDark] = useState(false);\n\n  // Ref para manter o estado atual do tema de forma síncrona\n  const themeModeRef = useRef<ThemeMode>('system');\n\n  // Função para aplicar o tema baseado no modo selecionado\n  const applyTheme = useCallback((mode: ThemeMode) => {\n    const htmlElement = document.documentElement;\n    const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n    if (mode === 'dark') {\n      htmlElement.setAttribute('data-theme', 'dark');\n      setIsDark(true);\n    } else if (mode === 'light') {\n      if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n      }\n      setIsDark(false);\n    } else if (mode === 'system') {\n      const isSystemDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches;\n      if (isSystemDark) {\n        htmlElement.setAttribute('data-theme', 'dark');\n        setIsDark(true);\n      } else if (originalTheme) {\n        htmlElement.setAttribute('data-theme', originalTheme);\n        setIsDark(false);\n      }\n    }\n  }, []);\n\n  // Função para alternar entre os temas\n  const toggleTheme = useCallback(() => {\n    let newMode: ThemeMode;\n    if (themeMode === 'light') {\n      newMode = 'dark';\n    } else if (themeMode === 'dark') {\n      newMode = 'light';\n    } else {\n      // Se estiver em 'system', vai para 'dark'\n      newMode = 'dark';\n    }\n    setThemeMode(newMode);\n    themeModeRef.current = newMode;\n    applyTheme(newMode);\n    localStorage.setItem('theme-mode', newMode);\n  }, [themeMode, applyTheme]);\n\n  // Função para definir um tema específico\n  const setTheme = useCallback(\n    (mode: ThemeMode) => {\n      setThemeMode(mode);\n      themeModeRef.current = mode;\n      applyTheme(mode);\n      localStorage.setItem('theme-mode', mode);\n    },\n    [applyTheme]\n  );\n\n  useEffect(() => {\n    const htmlElement = document.documentElement;\n\n    // Salva o theme original do white label na primeira execução\n    const currentTheme = htmlElement.getAttribute('data-theme');\n    if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n      htmlElement.setAttribute('data-original-theme', currentTheme);\n    }\n\n    // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n    const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n    const initialMode = savedThemeMode || 'system';\n\n    // Se não há tema salvo, persiste 'system' como padrão\n    if (!savedThemeMode) {\n      localStorage.setItem('theme-mode', 'system');\n    }\n\n    setThemeMode(initialMode);\n    themeModeRef.current = initialMode;\n    applyTheme(initialMode);\n\n    // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleSystemThemeChange = () => {\n      // Usa o ref para ter acesso ao estado atual de forma síncrona\n      if (themeModeRef.current === 'system') {\n        applyTheme('system');\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleSystemThemeChange);\n    };\n  }, [applyTheme]);\n\n  return {\n    themeMode,\n    isDark,\n    toggleTheme,\n    setTheme,\n  };\n};\n"],"mappings":";AAAA,SAA0C,kBAAkB;;;ACA5D,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,SAAS,WAAW,UAAU,aAAa,cAAc;AAQlD,IAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB,QAAQ;AAC9D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAG1C,QAAM,eAAe,OAAkB,QAAQ;AAG/C,QAAM,aAAa,YAAY,CAAC,SAAoB;AAClD,UAAM,cAAc,SAAS;AAC7B,UAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,QAAI,SAAS,QAAQ;AACnB,kBAAY,aAAa,cAAc,MAAM;AAC7C,gBAAU,IAAI;AAAA,IAChB,WAAW,SAAS,SAAS;AAC3B,UAAI,eAAe;AACjB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AACA,gBAAU,KAAK;AAAA,IACjB,WAAW,SAAS,UAAU;AAC5B,YAAM,eAAe,OAAO;AAAA,QAC1B;AAAA,MACF,EAAE;AACF,UAAI,cAAc;AAChB,oBAAY,aAAa,cAAc,MAAM;AAC7C,kBAAU,IAAI;AAAA,MAChB,WAAW,eAAe;AACxB,oBAAY,aAAa,cAAc,aAAa;AACpD,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AACJ,QAAI,cAAc,SAAS;AACzB,gBAAU;AAAA,IACZ,WAAW,cAAc,QAAQ;AAC/B,gBAAU;AAAA,IACZ,OAAO;AAEL,gBAAU;AAAA,IACZ;AACA,iBAAa,OAAO;AACpB,iBAAa,UAAU;AACvB,eAAW,OAAO;AAClB,iBAAa,QAAQ,cAAc,OAAO;AAAA,EAC5C,GAAG,CAAC,WAAW,UAAU,CAAC;AAG1B,QAAM,WAAW;AAAA,IACf,CAAC,SAAoB;AACnB,mBAAa,IAAI;AACjB,mBAAa,UAAU;AACvB,iBAAW,IAAI;AACf,mBAAa,QAAQ,cAAc,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,iBAAiB,aAAa,QAAQ,YAAY;AACxD,UAAM,cAAc,kBAAkB;AAGtC,QAAI,CAAC,gBAAgB;AACnB,mBAAa,QAAQ,cAAc,QAAQ;AAAA,IAC7C;AAEA,iBAAa,WAAW;AACxB,iBAAa,UAAU;AACvB,eAAW,WAAW;AAGtB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,0BAA0B,MAAM;AAEpC,UAAI,aAAa,YAAY,UAAU;AACrC,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AF9BQ,SA2BI,UAZJ,KAfA;AA/CD,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,WAAW,QAAQ,aAAa,SAAS,IAAI,SAAS;AAG9D,UAAM,cAAc;AAAA,MAClB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,gBAAgB;AACtB,UAAM,kBACJ;AAGF,UAAM,oBACJ;AACF,UAAM,qBACJ;AAGF,UAAM,oBAAoB,CACxB,OACA,MACA,OACA,UACA,eACG;AACH,YAAM,gBAAgB,aAClB,GAAG,mBAAmB,YAAY,UAAU,CAAC,IAC7C;AACJ,YAAM,eAAe,WAAW,gBAAgB;AAEhD,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,SAAS,KAAK;AAAA,UAC7B,WAAW,GAAG,eAAe,YAAY;AAAA,UACxC,GAAI,aAAa,QAAQ,CAAC;AAAA,UAE1B;AAAA,yBAAa;AAAA,YACb,cAAc;AAAA;AAAA;AAAA,MACjB;AAAA,IAEJ;AAGA,QAAI,YAAY,UAAU;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,YAAY,IAAI;AAAA,YAChB;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEH,sBACC,iCACG;AAAA,0BAAc,SAAS,iBAAO;AAAA,YAC9B,eAAe,SAAS,UAAU;AAAA,aACrC;AAAA;AAAA,MAEJ;AAAA,IAEJ;AAGA,QAAI,YAAY,YAAY;AAC1B,YAAM,WAAW,MAAM;AACrB,YAAI,cAAc,SAAU,QAAO;AACnC,YAAI,OAAQ,QAAO;AACnB,eAAO;AAAA,MACT;AACA,aACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,6BAAC,SAAI,WAAU,wDAAuD;AAAA;AAAA,UAC7D,SAAS;AAAA,WAClB;AAAA,QACA,qBAAC,SAAI,WAAU,cACZ;AAAA,4BAAkB,SAAS,iBAAO,SAAS,cAAc,OAAO;AAAA,UAChE,kBAAkB,QAAQ,cAAO,UAAU,cAAc,MAAM;AAAA,UAC/D;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAc;AAAA,UAChB;AAAA,WACF;AAAA,SACF;AAAA,IAEJ;AAGA,QAAI,YAAY,WAAW;AACzB,aACE,qBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GACvC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,QACF;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,QACF;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,QACF;AAAA,SACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/hooks/useTheme/index.d.mts

@@ -1,8 +1,13 @@
+type ThemeMode = 'light' | 'dark' | 'system';
 /**
- * Hook para detectar preferências do sistema e aplicar dark mode automaticamente
- * Este hook aplica o theme baseado nas preferências do sistema (prefers-color-scheme)
- * na inicialização do componente.
+ * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema
+ * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema
  */
-declare const useTheme: () => void;
+declare const useTheme: () => {
+    themeMode: ThemeMode;
+    isDark: boolean;
+    toggleTheme: () => void;
+    setTheme: (mode: ThemeMode) => void;
+};
 
 export { useTheme };

package/dist/hooks/useTheme/index.d.ts

@@ -1,8 +1,13 @@
+type ThemeMode = 'light' | 'dark' | 'system';
 /**
- * Hook para detectar preferências do sistema e aplicar dark mode automaticamente
- * Este hook aplica o theme baseado nas preferências do sistema (prefers-color-scheme)
- * na inicialização do componente.
+ * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema
+ * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema
  */
-declare const useTheme: () => void;
+declare const useTheme: () => {
+    themeMode: ThemeMode;
+    isDark: boolean;
+    toggleTheme: () => void;
+    setTheme: (mode: ThemeMode) => void;
+};
 
 export { useTheme };