@snksergio/design-system 0.32.1 → 0.34.0

package/dist-lib/chunks/{app-shell-78w0pYdP.mjs → useTheme-DF2xbSdI.mjs}

@@ -3330,7 +3330,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: {
@@ -3385,7 +3385,7 @@ function AppShell({
   onLogout,
   // Menu collapse (controlled/uncontrolled)
   menuCollapsed: controlledCollapsed,
-  defaultMenuCollapsed = false,
+  defaultMenuCollapsed,
   onMenuCollapseChange,
   // Body
   children,
@@ -3393,7 +3393,11 @@ function AppShell({
   mobileEdgeToEdge,
   className
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState(defaultMenuCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = 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] = useState(false);
@@ -3474,45 +3478,107 @@ 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] = useState(() => getStoredTheme());
+  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 = 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 }));
+  }, []);
+  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 = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  return { theme, setTheme, isDark, toggle };
+}
 export {
-  SidebarSection as $,
+  SidebarRail as $,
   AppShell as A,
   Button as B,
   Chip as C,
   DropdownMenu as D,
-  DropdownMenuLabel as E,
-  HeaderBreadcrumb as F,
-  HeaderMessages as G,
+  DropdownMenuGroup as E,
+  DropdownMenuLabel as F,
+  HeaderBreadcrumb as G,
   Header as H,
-  HeaderNotifications as I,
-  HeaderSearch as J,
-  HeaderThemeSwitcher as K,
-  InputGroup as L,
-  InputGroupAddon as M,
-  InputGroupButton as N,
-  InputGroupInput as O,
+  HeaderMessages as I,
+  HeaderNotifications as J,
+  HeaderSearch as K,
+  HeaderThemeSwitcher as L,
+  InputGroup as M,
+  InputGroupAddon as N,
+  InputGroupButton as O,
   Popover as P,
-  InputGroupText as Q,
-  InputGroupTextarea as R,
-  MenuSidebar as S,
-  DropdownMenuCheckboxItem as T,
-  DropdownMenuRadioGroup as U,
-  DropdownMenuRadioItem as V,
-  SidebarBrandIcon as W,
-  SidebarItem as X,
-  SidebarPanel as Y,
-  SidebarPill as Z,
-  SidebarRail as _,
+  InputGroupInput as Q,
+  InputGroupText as R,
+  InputGroupTextarea as S,
+  MenuSidebar as T,
+  DropdownMenuCheckboxItem as U,
+  DropdownMenuRadioGroup as V,
+  DropdownMenuRadioItem as W,
+  SidebarBrandIcon as X,
+  SidebarItem as Y,
+  SidebarPanel as Z,
+  SidebarPill as _,
   Avatar as a,
-  SidebarSubgroup as a0,
-  UserMenu as a1,
-  buttonVariants as a2,
-  chipCount as a3,
-  chipVariants as a4,
-  inputGroupVariants as a5,
-  useControllable as a6,
-  useMediaQuery as a7,
-  Command as a8,
+  SidebarSection as a0,
+  SidebarSubgroup as a1,
+  UserMenu as a2,
+  buttonVariants as a3,
+  chipCount as a4,
+  chipVariants as a5,
+  inputGroupVariants as a6,
+  useControllable as a7,
+  useMediaQuery as a8,
+  Command as a9,
   AvatarFallback as b,
   cn as c,
   ChipGroup as d,
@@ -3532,11 +3598,11 @@ export {
   DialogDescription as r,
   CommandDialog as s,
   tv as t,
-  CommandInput as u,
-  CommandList as v,
-  CommandEmpty as w,
-  CommandGroup as x,
-  CommandItem as y,
-  DropdownMenuGroup as z
+  useTheme as u,
+  CommandInput as v,
+  CommandList as w,
+  CommandEmpty as x,
+  CommandGroup as y,
+  CommandItem as z
 };
-//# sourceMappingURL=app-shell-78w0pYdP.mjs.map
+//# sourceMappingURL=useTheme-DF2xbSdI.mjs.map