xertica-ui 2.4.0 → 2.4.1

package/dist/LayoutContext-BvK-ggDa.cjs

@@ -0,0 +1,96 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const LayoutContext = React.createContext(void 0);
+function getCookie(name) {
+  const nameLenPlus = name.length + 1;
+  return document.cookie.split(";").map((c) => c.trim()).filter((cookie) => {
+    return cookie.substring(0, nameLenPlus) === `${name}=`;
+  }).map((cookie) => {
+    return decodeURIComponent(cookie.substring(nameLenPlus));
+  })[0] || null;
+}
+function setCookie(name, value) {
+  document.cookie = `${name}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+function LayoutProvider({ children }) {
+  const [sidebarExpanded, setSidebarExpandedState] = React.useState(() => {
+    if (typeof document === "undefined") return false;
+    const saved = getCookie(SIDEBAR_COOKIE_NAME);
+    return saved === "true";
+  });
+  const [assistenteExpanded, setAssistenteExpandedState] = React.useState(false);
+  const [sidebarWidth, setSidebarWidth] = React.useState(256);
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  React.useEffect(() => {
+    setCookie(SIDEBAR_COOKIE_NAME, sidebarExpanded.toString());
+  }, [sidebarExpanded]);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [sidebarExpanded, assistenteExpanded]);
+  const toggleSidebar = React.useCallback(() => {
+    setSidebarExpandedState((prev) => {
+      const newState = !prev;
+      if (newState && assistenteExpanded) {
+        setAssistenteExpandedState(false);
+      }
+      return newState;
+    });
+  }, [assistenteExpanded]);
+  const toggleAssistente = React.useCallback(() => {
+    setAssistenteExpandedState((prev) => {
+      const newState = !prev;
+      if (newState && sidebarExpanded) {
+        setSidebarExpandedState(false);
+      }
+      return newState;
+    });
+  }, [sidebarExpanded]);
+  const toggleAssistenteWithTab = React.useCallback((tab) => {
+    if (!assistenteExpanded) {
+      if (sidebarExpanded) {
+        setSidebarExpandedState(false);
+      }
+      setAssistenteExpandedState(true);
+    }
+  }, [assistenteExpanded, sidebarExpanded]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.Provider, { value: {
+    sidebarExpanded,
+    assistenteExpanded,
+    toggleSidebar,
+    toggleAssistente,
+    toggleAssistenteWithTab,
+    setSidebarExpanded: setSidebarExpandedState,
+    setAssistenteExpanded: setAssistenteExpandedState,
+    sidebarWidth,
+    setSidebarWidth,
+    isMobile
+  }, children });
+}
+function useLayout() {
+  const context = React.useContext(LayoutContext);
+  if (context === void 0) {
+    throw new Error("useLayout must be used within a LayoutProvider");
+  }
+  return context;
+}
+exports.LayoutProvider = LayoutProvider;
+exports.useLayout = useLayout;

package/dist/{ThemeContext-Bo-W2WZH.js → ThemeContext-BWq9ACPo.js}

@@ -475,7 +475,7 @@ const breadcrumb$2 = "Página de Template";
 const title$g = "Página de Template";
 const subtitle$8 = "Template completo com componentes do Xertica UI Design System";
 const formSubmitSuccess$2 = "Formulário enviado com sucesso!";
-const sections$2 = { "alerts": "Alertas", "cardsAndTabs": "Cards & Tabs", "buttons": "Botões", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Variações da Sidebar", "enhancedComponents": "v2.2.0 — Componentes Aprimorados" };
+const sections$2 = { "alerts": "Alertas", "cardsAndTabs": "Cards & Tabs", "buttons": "Botões", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Variações da Sidebar", "enhancedComponents": "v2.2.1 — Componentes Aprimorados" };
 const alerts$2 = { "infoTitle": "Informação", "infoDescription": "Este é um exemplo de alerta informativo usando os componentes do Design System.", "errorTitle": "Erro", "errorDescription": "Ocorreu um erro ao processar sua solicitação.", "successTitle": "Sucesso", "successDescription": "Operação realizada com sucesso!", "warningTitle": "Aviso", "warningDescription": "Atenção: esta ação não pode ser desfeita." };
 const tabs$4 = { "overview": "Visão Geral", "forms": "Formulários", "data": "Dados", "settings": "Configurações" };
 const overview$4 = { "progressTitle": "Progress & Sliders", "progressDescription": "Exemplos de componentes de progresso", "projectProgress": "Progresso do Projeto", "volume": "Volume", "totalUsersDemoValue": "1.234", "revenueDemoValue": "R$ 45,2k", "conversionRateDemoValue": "3,2%" };
@@ -1017,7 +1017,7 @@ const breadcrumb$1 = "Template Page";
 const title$8 = "Template Page";
 const subtitle$4 = "Complete template with components from the Xertica UI Design System";
 const formSubmitSuccess$1 = "Form submitted successfully!";
-const sections$1 = { "alerts": "Alerts", "cardsAndTabs": "Cards & Tabs", "buttons": "Buttons", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Sidebar Variations", "enhancedComponents": "v2.2.0 — Enhanced Components" };
+const sections$1 = { "alerts": "Alerts", "cardsAndTabs": "Cards & Tabs", "buttons": "Buttons", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Sidebar Variations", "enhancedComponents": "v2.2.1 — Enhanced Components" };
 const alerts$1 = { "infoTitle": "Information", "infoDescription": "This is an example of an informational alert using Design System components.", "errorTitle": "Error", "errorDescription": "An error occurred while processing your request.", "successTitle": "Success", "successDescription": "Operation completed successfully!", "warningTitle": "Warning", "warningDescription": "Warning: this action cannot be undone." };
 const tabs$2 = { "overview": "Overview", "forms": "Forms", "data": "Data", "settings": "Settings" };
 const overview$2 = { "progressTitle": "Progress & Sliders", "progressDescription": "Examples of progress components", "projectProgress": "Project Progress", "volume": "Volume", "totalUsersDemoValue": "1,234", "revenueDemoValue": "$45.2k", "conversionRateDemoValue": "3.2%" };
@@ -1559,7 +1559,7 @@ const breadcrumb = "Página de Plantilla";
 const title = "Página de Plantilla";
 const subtitle = "Plantilla completa con componentes del Xertica UI Design System";
 const formSubmitSuccess = "¡Formulario enviado con éxito!";
-const sections = { "alerts": "Alertas", "cardsAndTabs": "Cards & Tabs", "buttons": "Botones", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Variaciones de la Sidebar", "enhancedComponents": "v2.2.0 — Componentes Mejorados" };
+const sections = { "alerts": "Alertas", "cardsAndTabs": "Cards & Tabs", "buttons": "Botones", "badges": "Badges", "dialogs": "Dialogs", "sidebarVariations": "Variaciones de la Sidebar", "enhancedComponents": "v2.2.1 — Componentes Mejorados" };
 const alerts = { "infoTitle": "Información", "infoDescription": "Este es un ejemplo de alerta informativa usando los componentes del Design System.", "errorTitle": "Error", "errorDescription": "Ocurrió un error al procesar tu solicitud.", "successTitle": "Éxito", "successDescription": "¡Operación realizada con éxito!", "warningTitle": "Aviso", "warningDescription": "Atención: esta acción no se puede deshacer." };
 const tabs = { "overview": "Vista General", "forms": "Formularios", "data": "Datos", "settings": "Configuración" };
 const overview = { "progressTitle": "Progress & Sliders", "progressDescription": "Ejemplos de componentes de progreso", "projectProgress": "Progreso del Proyecto", "volume": "Volumen", "totalUsersDemoValue": "1.234", "revenueDemoValue": "€45,2k", "conversionRateDemoValue": "3,2%" };
@@ -1705,8 +1705,7 @@ function LanguageProvider({
   }, [languageCodesKey]);
   const resolvedDefault = defaultLanguage ?? languages[0].code;
   const [language, setLanguageState] = useState(() => {
-    var _a;
-    const saved = typeof window !== "undefined" ? (_a = window.localStorage) == null ? void 0 : _a.getItem(STORAGE_KEY) : null;
+    const saved = typeof window !== "undefined" ? window.localStorage?.getItem(STORAGE_KEY) : null;
     if (saved && languages.some((l) => l.code === saved)) {
       return saved;
     }
@@ -1720,7 +1719,6 @@ function LanguageProvider({
   });
   const setLanguage = useCallback(
     (lang) => {
-      var _a;
       if (!languages.some((l) => l.code === lang)) {
         if (typeof console !== "undefined") {
           console.warn(
@@ -1730,7 +1728,7 @@ function LanguageProvider({
         return;
       }
       setLanguageState(lang);
-      (_a = window.localStorage) == null ? void 0 : _a.setItem(STORAGE_KEY, lang);
+      window.localStorage?.setItem(STORAGE_KEY, lang);
       i18n.changeLanguage(lang);
       queryClient.invalidateQueries();
     },
@@ -1773,11 +1771,10 @@ function ThemeProvider({
   storageKey = "xertica-theme"
 }) {
   const getInitialTheme = () => {
-    var _a;
     if (disableDarkMode) return "light";
     if (defaultTheme) return defaultTheme;
     if (typeof window !== "undefined") {
-      const savedTheme = (_a = window.localStorage) == null ? void 0 : _a.getItem(storageKey);
+      const savedTheme = window.localStorage?.getItem(storageKey);
       if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
         return savedTheme;
       }
@@ -1794,7 +1791,6 @@ function ThemeProvider({
     }
   }, [disableDarkMode, theme]);
   useEffect(() => {
-    var _a;
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.classList.remove("light", "dark");
@@ -1804,14 +1800,13 @@ function ThemeProvider({
       root.classList.add("light");
     }
     if (typeof window !== "undefined") {
-      (_a = window.localStorage) == null ? void 0 : _a.setItem(storageKey, theme);
+      window.localStorage?.setItem(storageKey, theme);
     }
   }, [theme, storageKey]);
   useEffect(() => {
-    var _a;
     if (disableDarkMode) return;
     if (typeof window === "undefined" || !window.matchMedia) return;
-    if (!((_a = window.localStorage) == null ? void 0 : _a.getItem(storageKey))) {
+    if (!window.localStorage?.getItem(storageKey)) {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const handleChange = (e) => {
         setThemeState(e.matches ? "dark" : "light");