@snksergio/design-system 0.32.1 → 0.34.0

package/dist-lib/chunks/{app-shell-Cyh8AUJT.cjs → useTheme-D4alxxGV.cjs}

@@ -3352,7 +3352,7 @@ const body = tv({
 const bodyInner = tv({
   base: [
     "flex flex-col flex-1 min-h-0 w-full mx-auto",
-    "gap-gp-4xl p-pad-6xl"
+    "gap-gp-4xl p-pad-6xl max-2xl:p-pad-4xl"
   ],
   variants: {
     layout: {
@@ -3407,7 +3407,7 @@ function AppShell({
   onLogout,
   // Menu collapse (controlled/uncontrolled)
   menuCollapsed: controlledCollapsed,
-  defaultMenuCollapsed = false,
+  defaultMenuCollapsed,
   onMenuCollapseChange,
   // Body
   children,
@@ -3415,7 +3415,11 @@ function AppShell({
   mobileEdgeToEdge,
   className
 }) {
-  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultMenuCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React.useState(() => {
+    if (defaultMenuCollapsed !== void 0) return defaultMenuCollapsed;
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(max-width: 1535px)").matches;
+  });
   const menuCollapsed = controlledCollapsed ?? internalCollapsed;
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
@@ -3496,6 +3500,67 @@ function AppShell({
   ] });
 }
 AppShell.displayName = "AppShell";
+const STORAGE_KEY = "igreen-ds-theme";
+const CHANGE_EVENT = "igreen-ds-theme-change";
+function isTheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function getStoredTheme() {
+  if (typeof window === "undefined") return "system";
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  return isTheme(stored) ? stored : "system";
+}
+function getEffectiveDark(theme) {
+  if (theme === "dark") return true;
+  if (theme === "light") return false;
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useTheme() {
+  const [theme, setThemeState] = React.useState(() => getStoredTheme());
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const apply = () => root2.classList.toggle("dark", getEffectiveDark(theme));
+    apply();
+    if (theme === "system") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", apply);
+      return () => mq.removeEventListener("change", apply);
+    }
+  }, [theme]);
+  const setTheme = React.useCallback((next) => {
+    setThemeState(next);
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+    }
+    window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));
+  }, []);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onCustom = (e) => {
+      const next = e.detail;
+      if (isTheme(next)) setThemeState(next);
+    };
+    const onStorage = (e) => {
+      if (e.key !== STORAGE_KEY) return;
+      if (isTheme(e.newValue)) setThemeState(e.newValue);
+    };
+    window.addEventListener(CHANGE_EVENT, onCustom);
+    window.addEventListener("storage", onStorage);
+    return () => {
+      window.removeEventListener(CHANGE_EVENT, onCustom);
+      window.removeEventListener("storage", onStorage);
+    };
+  }, []);
+  const isDark = getEffectiveDark(theme);
+  const toggle = React.useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  return { theme, setTheme, isDark, toggle };
+}
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
@@ -3559,4 +3624,5 @@ exports.inputGroupVariants = inputGroupVariants;
 exports.tv = tv;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
-//# sourceMappingURL=app-shell-Cyh8AUJT.cjs.map
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme-D4alxxGV.cjs.map