npm - @snksergio/design-system - Versions diffs - 0.5.1 → 0.17.0 - Mend

@snksergio/design-system 0.5.1 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (390) hide show

package/dist-lib/chunks/useTheme-BUPLZBMs.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTheme-BUPLZBMs.mjs","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nexport type Theme = \"light\" \| \"dark\" \| \"system\";\n\nconst STORAGE_KEY = \"igreen-ds-theme\";\nconst CHANGE_EVENT = \"igreen-ds-theme-change\";\n\nfunction isTheme(value: unknown): value is Theme {\n return value === \"light\" \|\| value === \"dark\" \|\| value === \"system\";\n}\n\nfunction getStoredTheme(): Theme {\n if (typeof window === \"undefined\") return \"system\";\n const stored = window.localStorage.getItem(STORAGE_KEY);\n return isTheme(stored) ? stored : \"system\";\n}\n\nfunction getEffectiveDark(theme: Theme): boolean {\n if (theme === \"dark\") return true;\n if (theme === \"light\") return false;\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/*\n Hook único de tema do app.\n \n - 3 valores: `\"light\"` \| `\"dark\"` \| `\"system\"` (segue prefers-color-scheme).\n * - Persiste em `localStorage[\"igreen-ds-theme\"]`.\n * - Sincroniza múltiplas instâncias na mesma tab via `CustomEvent` e entre\n * tabs via `storage` event. Pode ser chamado em qualquer page/component\n * sem precisar de Context Provider.\n * - Aplica `.dark` no `<html>` com observador de `prefers-color-scheme`\n * quando theme=`\"system\"`.\n /\nexport function useTheme() {\n const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());\n\n // Aplica .dark no <html> + observa prefers-color-scheme quando theme=\"system\"\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n const apply = () => root.classList.toggle(\"dark\", getEffectiveDark(theme));\n apply();\n\n if (theme === \"system\") {\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", apply);\n return () => mq.removeEventListener(\"change\", apply);\n }\n }, [theme]);\n\n // setTheme — persiste no localStorage + broadcast pra outras instâncias do hook\n const setTheme = useCallback((next: Theme) => {\n setThemeState(next);\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(STORAGE_KEY, next);\n } catch {\n / ignore */\n }\n window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));\n }, []);\n\n // Listener — recebe broadcast de outras instâncias (mesma tab + cross-tab)\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const onCustom = (e: Event) => {\n const next = (e as CustomEvent).detail;\n if (isTheme(next)) setThemeState(next);\n };\n const onStorage = (e: StorageEvent) => {\n if (e.key !== STORAGE_KEY) return;\n if (isTheme(e.newValue)) setThemeState(e.newValue);\n };\n window.addEventListener(CHANGE_EVENT, onCustom);\n window.addEventListener(\"storage\", onStorage);\n return () => {\n window.removeEventListener(CHANGE_EVENT, onCustom);\n window.removeEventListener(\"storage\", onStorage);\n };\n }, []);\n\n const isDark = getEffectiveDark(theme);\n\n // Backwards-compat: alterna apenas entre light/dark (ignora system).\n const toggle = useCallback(() => {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n }, [theme, setTheme]);\n\n return { theme, setTheme, isDark, toggle } as const;\n}\n"],"names":[],"mappings":";AAIA,MAAM,cAAc;AACpB,MAAM,eAAe;AAErB,SAAS,QAAQ,OAAgC;AAC/C,SAAO,UAAU,WAAW,UAAU,UAAU,UAAU;AAC5D;AAEA,SAAS,iBAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,OAAO,aAAa,QAAQ,WAAW;AACtD,SAAO,QAAQ,MAAM,IAAI,SAAS;AACpC;AAEA,SAAS,iBAAiB,OAAuB;AAC/C,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,OAAO,WAAW,8BAA8B,EAAE;AAC3D;AAaO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,aAAa,IAAI,SAAgB,MAAM,gBAAgB;AAGrE,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,QAAQ,iBAAiB,KAAK,CAAC;AACzE,UAAA;AAEA,QAAI,UAAU,UAAU;AACtB,YAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,SAAG,iBAAiB,UAAU,KAAK;AACnC,aAAO,MAAM,GAAG,oBAAoB,UAAU,KAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,WAAW,YAAY,CAAC,SAAgB;AAC5C,kBAAc,IAAI;AAClB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,aAAa,IAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AACA,WAAO,cAAc,IAAI,YAAY,cAAc,EAAE,QAAQ,KAAA,CAAM,CAAC;AAAA,EACtE,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,WAAW,CAAC,MAAa;AAC7B,YAAM,OAAQ,EAAkB;AAChC,UAAI,QAAQ,IAAI,EAAG,eAAc,IAAI;AAAA,IACvC;AACA,UAAM,YAAY,CAAC,MAAoB;AACrC,UAAI,EAAE,QAAQ,YAAa;AAC3B,UAAI,QAAQ,EAAE,QAAQ,EAAG,eAAc,EAAE,QAAQ;AAAA,IACnD;AACA,WAAO,iBAAiB,cAAc,QAAQ;AAC9C,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,cAAc,QAAQ;AACjD,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,iBAAiB,KAAK;AAGrC,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,UAAU,SAAS,UAAU,MAAM;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,EAAE,OAAO,UAAU,QAAQ,OAAA;AACpC;"}
1	+ {"version":3,"file":"useTheme-BUPLZBMs.mjs","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\r\n\r\nexport type Theme = \"light\" \| \"dark\" \| \"system\";\r\n\r\nconst STORAGE_KEY = \"igreen-ds-theme\";\r\nconst CHANGE_EVENT = \"igreen-ds-theme-change\";\r\n\r\nfunction isTheme(value: unknown): value is Theme {\r\n return value === \"light\" \|\| value === \"dark\" \|\| value === \"system\";\r\n}\r\n\r\nfunction getStoredTheme(): Theme {\r\n if (typeof window === \"undefined\") return \"system\";\r\n const stored = window.localStorage.getItem(STORAGE_KEY);\r\n return isTheme(stored) ? stored : \"system\";\r\n}\r\n\r\nfunction getEffectiveDark(theme: Theme): boolean {\r\n if (theme === \"dark\") return true;\r\n if (theme === \"light\") return false;\r\n if (typeof window === \"undefined\") return false;\r\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n}\r\n\r\n/*\r\n Hook único de tema do app.\r\n \r\n - 3 valores: `\"light\"` \| `\"dark\"` \| `\"system\"` (segue prefers-color-scheme).\r\n * - Persiste em `localStorage[\"igreen-ds-theme\"]`.\r\n * - Sincroniza múltiplas instâncias na mesma tab via `CustomEvent` e entre\r\n * tabs via `storage` event. Pode ser chamado em qualquer page/component\r\n * sem precisar de Context Provider.\r\n * - Aplica `.dark` no `<html>` com observador de `prefers-color-scheme`\r\n * quando theme=`\"system\"`.\r\n /\r\nexport function useTheme() {\r\n const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());\r\n\r\n // Aplica .dark no <html> + observa prefers-color-scheme quando theme=\"system\"\r\n useEffect(() => {\r\n if (typeof document === \"undefined\") return;\r\n const root = document.documentElement;\r\n const apply = () => root.classList.toggle(\"dark\", getEffectiveDark(theme));\r\n apply();\r\n\r\n if (theme === \"system\") {\r\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\r\n mq.addEventListener(\"change\", apply);\r\n return () => mq.removeEventListener(\"change\", apply);\r\n }\r\n }, [theme]);\r\n\r\n // setTheme — persiste no localStorage + broadcast pra outras instâncias do hook\r\n const setTheme = useCallback((next: Theme) => {\r\n setThemeState(next);\r\n if (typeof window === \"undefined\") return;\r\n try {\r\n window.localStorage.setItem(STORAGE_KEY, next);\r\n } catch {\r\n / ignore */\r\n }\r\n window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));\r\n }, []);\r\n\r\n // Listener — recebe broadcast de outras instâncias (mesma tab + cross-tab)\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n const onCustom = (e: Event) => {\r\n const next = (e as CustomEvent).detail;\r\n if (isTheme(next)) setThemeState(next);\r\n };\r\n const onStorage = (e: StorageEvent) => {\r\n if (e.key !== STORAGE_KEY) return;\r\n if (isTheme(e.newValue)) setThemeState(e.newValue);\r\n };\r\n window.addEventListener(CHANGE_EVENT, onCustom);\r\n window.addEventListener(\"storage\", onStorage);\r\n return () => {\r\n window.removeEventListener(CHANGE_EVENT, onCustom);\r\n window.removeEventListener(\"storage\", onStorage);\r\n };\r\n }, []);\r\n\r\n const isDark = getEffectiveDark(theme);\r\n\r\n // Backwards-compat: alterna apenas entre light/dark (ignora system).\r\n const toggle = useCallback(() => {\r\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\r\n }, [theme, setTheme]);\r\n\r\n return { theme, setTheme, isDark, toggle } as const;\r\n}\r\n"],"names":[],"mappings":";AAIA,MAAM,cAAc;AACpB,MAAM,eAAe;AAErB,SAAS,QAAQ,OAAgC;AAC/C,SAAO,UAAU,WAAW,UAAU,UAAU,UAAU;AAC5D;AAEA,SAAS,iBAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,OAAO,aAAa,QAAQ,WAAW;AACtD,SAAO,QAAQ,MAAM,IAAI,SAAS;AACpC;AAEA,SAAS,iBAAiB,OAAuB;AAC/C,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,OAAO,WAAW,8BAA8B,EAAE;AAC3D;AAaO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,aAAa,IAAI,SAAgB,MAAM,gBAAgB;AAGrE,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,QAAQ,iBAAiB,KAAK,CAAC;AACzE,UAAA;AAEA,QAAI,UAAU,UAAU;AACtB,YAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,SAAG,iBAAiB,UAAU,KAAK;AACnC,aAAO,MAAM,GAAG,oBAAoB,UAAU,KAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,WAAW,YAAY,CAAC,SAAgB;AAC5C,kBAAc,IAAI;AAClB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,aAAa,IAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AACA,WAAO,cAAc,IAAI,YAAY,cAAc,EAAE,QAAQ,KAAA,CAAM,CAAC;AAAA,EACtE,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,WAAW,CAAC,MAAa;AAC7B,YAAM,OAAQ,EAAkB;AAChC,UAAI,QAAQ,IAAI,EAAG,eAAc,IAAI;AAAA,IACvC;AACA,UAAM,YAAY,CAAC,MAAoB;AACrC,UAAI,EAAE,QAAQ,YAAa;AAC3B,UAAI,QAAQ,EAAE,QAAQ,EAAG,eAAc,EAAE,QAAQ;AAAA,IACnD;AACA,WAAO,iBAAiB,cAAc,QAAQ;AAC9C,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,cAAc,QAAQ;AACjD,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,iBAAiB,KAAK;AAGrC,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,UAAU,SAAS,UAAU,MAAM;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,EAAE,OAAO,UAAU,QAAQ,OAAA;AACpC;"}

package/dist-lib/chunks/useTheme-Dee4mo-A.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTheme-Dee4mo-A.cjs","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nexport type Theme = \"light\" \| \"dark\" \| \"system\";\n\nconst STORAGE_KEY = \"igreen-ds-theme\";\nconst CHANGE_EVENT = \"igreen-ds-theme-change\";\n\nfunction isTheme(value: unknown): value is Theme {\n return value === \"light\" \|\| value === \"dark\" \|\| value === \"system\";\n}\n\nfunction getStoredTheme(): Theme {\n if (typeof window === \"undefined\") return \"system\";\n const stored = window.localStorage.getItem(STORAGE_KEY);\n return isTheme(stored) ? stored : \"system\";\n}\n\nfunction getEffectiveDark(theme: Theme): boolean {\n if (theme === \"dark\") return true;\n if (theme === \"light\") return false;\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/*\n Hook único de tema do app.\n \n - 3 valores: `\"light\"` \| `\"dark\"` \| `\"system\"` (segue prefers-color-scheme).\n * - Persiste em `localStorage[\"igreen-ds-theme\"]`.\n * - Sincroniza múltiplas instâncias na mesma tab via `CustomEvent` e entre\n * tabs via `storage` event. Pode ser chamado em qualquer page/component\n * sem precisar de Context Provider.\n * - Aplica `.dark` no `<html>` com observador de `prefers-color-scheme`\n * quando theme=`\"system\"`.\n /\nexport function useTheme() {\n const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());\n\n // Aplica .dark no <html> + observa prefers-color-scheme quando theme=\"system\"\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n const apply = () => root.classList.toggle(\"dark\", getEffectiveDark(theme));\n apply();\n\n if (theme === \"system\") {\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", apply);\n return () => mq.removeEventListener(\"change\", apply);\n }\n }, [theme]);\n\n // setTheme — persiste no localStorage + broadcast pra outras instâncias do hook\n const setTheme = useCallback((next: Theme) => {\n setThemeState(next);\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(STORAGE_KEY, next);\n } catch {\n / ignore */\n }\n window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));\n }, []);\n\n // Listener — recebe broadcast de outras instâncias (mesma tab + cross-tab)\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const onCustom = (e: Event) => {\n const next = (e as CustomEvent).detail;\n if (isTheme(next)) setThemeState(next);\n };\n const onStorage = (e: StorageEvent) => {\n if (e.key !== STORAGE_KEY) return;\n if (isTheme(e.newValue)) setThemeState(e.newValue);\n };\n window.addEventListener(CHANGE_EVENT, onCustom);\n window.addEventListener(\"storage\", onStorage);\n return () => {\n window.removeEventListener(CHANGE_EVENT, onCustom);\n window.removeEventListener(\"storage\", onStorage);\n };\n }, []);\n\n const isDark = getEffectiveDark(theme);\n\n // Backwards-compat: alterna apenas entre light/dark (ignora system).\n const toggle = useCallback(() => {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n }, [theme, setTheme]);\n\n return { theme, setTheme, isDark, toggle } as const;\n}\n"],"names":["useState","useEffect","useCallback"],"mappings":";;AAIA,MAAM,cAAc;AACpB,MAAM,eAAe;AAErB,SAAS,QAAQ,OAAgC;AAC/C,SAAO,UAAU,WAAW,UAAU,UAAU,UAAU;AAC5D;AAEA,SAAS,iBAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,OAAO,aAAa,QAAQ,WAAW;AACtD,SAAO,QAAQ,MAAM,IAAI,SAAS;AACpC;AAEA,SAAS,iBAAiB,OAAuB;AAC/C,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,OAAO,WAAW,8BAA8B,EAAE;AAC3D;AAaO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,aAAa,IAAIA,MAAAA,SAAgB,MAAM,gBAAgB;AAGrEC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,QAAQ,iBAAiB,KAAK,CAAC;AACzE,UAAA;AAEA,QAAI,UAAU,UAAU;AACtB,YAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,SAAG,iBAAiB,UAAU,KAAK;AACnC,aAAO,MAAM,GAAG,oBAAoB,UAAU,KAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,WAAWC,kBAAY,CAAC,SAAgB;AAC5C,kBAAc,IAAI;AAClB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,aAAa,IAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AACA,WAAO,cAAc,IAAI,YAAY,cAAc,EAAE,QAAQ,KAAA,CAAM,CAAC;AAAA,EACtE,GAAG,CAAA,CAAE;AAGLD,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,WAAW,CAAC,MAAa;AAC7B,YAAM,OAAQ,EAAkB;AAChC,UAAI,QAAQ,IAAI,EAAG,eAAc,IAAI;AAAA,IACvC;AACA,UAAM,YAAY,CAAC,MAAoB;AACrC,UAAI,EAAE,QAAQ,YAAa;AAC3B,UAAI,QAAQ,EAAE,QAAQ,EAAG,eAAc,EAAE,QAAQ;AAAA,IACnD;AACA,WAAO,iBAAiB,cAAc,QAAQ;AAC9C,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,cAAc,QAAQ;AACjD,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,iBAAiB,KAAK;AAGrC,QAAM,SAASC,MAAAA,YAAY,MAAM;AAC/B,aAAS,UAAU,SAAS,UAAU,MAAM;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,EAAE,OAAO,UAAU,QAAQ,OAAA;AACpC;;"}
1	+ {"version":3,"file":"useTheme-Dee4mo-A.cjs","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\r\n\r\nexport type Theme = \"light\" \| \"dark\" \| \"system\";\r\n\r\nconst STORAGE_KEY = \"igreen-ds-theme\";\r\nconst CHANGE_EVENT = \"igreen-ds-theme-change\";\r\n\r\nfunction isTheme(value: unknown): value is Theme {\r\n return value === \"light\" \|\| value === \"dark\" \|\| value === \"system\";\r\n}\r\n\r\nfunction getStoredTheme(): Theme {\r\n if (typeof window === \"undefined\") return \"system\";\r\n const stored = window.localStorage.getItem(STORAGE_KEY);\r\n return isTheme(stored) ? stored : \"system\";\r\n}\r\n\r\nfunction getEffectiveDark(theme: Theme): boolean {\r\n if (theme === \"dark\") return true;\r\n if (theme === \"light\") return false;\r\n if (typeof window === \"undefined\") return false;\r\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n}\r\n\r\n/*\r\n Hook único de tema do app.\r\n \r\n - 3 valores: `\"light\"` \| `\"dark\"` \| `\"system\"` (segue prefers-color-scheme).\r\n * - Persiste em `localStorage[\"igreen-ds-theme\"]`.\r\n * - Sincroniza múltiplas instâncias na mesma tab via `CustomEvent` e entre\r\n * tabs via `storage` event. Pode ser chamado em qualquer page/component\r\n * sem precisar de Context Provider.\r\n * - Aplica `.dark` no `<html>` com observador de `prefers-color-scheme`\r\n * quando theme=`\"system\"`.\r\n /\r\nexport function useTheme() {\r\n const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());\r\n\r\n // Aplica .dark no <html> + observa prefers-color-scheme quando theme=\"system\"\r\n useEffect(() => {\r\n if (typeof document === \"undefined\") return;\r\n const root = document.documentElement;\r\n const apply = () => root.classList.toggle(\"dark\", getEffectiveDark(theme));\r\n apply();\r\n\r\n if (theme === \"system\") {\r\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\r\n mq.addEventListener(\"change\", apply);\r\n return () => mq.removeEventListener(\"change\", apply);\r\n }\r\n }, [theme]);\r\n\r\n // setTheme — persiste no localStorage + broadcast pra outras instâncias do hook\r\n const setTheme = useCallback((next: Theme) => {\r\n setThemeState(next);\r\n if (typeof window === \"undefined\") return;\r\n try {\r\n window.localStorage.setItem(STORAGE_KEY, next);\r\n } catch {\r\n / ignore */\r\n }\r\n window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));\r\n }, []);\r\n\r\n // Listener — recebe broadcast de outras instâncias (mesma tab + cross-tab)\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n const onCustom = (e: Event) => {\r\n const next = (e as CustomEvent).detail;\r\n if (isTheme(next)) setThemeState(next);\r\n };\r\n const onStorage = (e: StorageEvent) => {\r\n if (e.key !== STORAGE_KEY) return;\r\n if (isTheme(e.newValue)) setThemeState(e.newValue);\r\n };\r\n window.addEventListener(CHANGE_EVENT, onCustom);\r\n window.addEventListener(\"storage\", onStorage);\r\n return () => {\r\n window.removeEventListener(CHANGE_EVENT, onCustom);\r\n window.removeEventListener(\"storage\", onStorage);\r\n };\r\n }, []);\r\n\r\n const isDark = getEffectiveDark(theme);\r\n\r\n // Backwards-compat: alterna apenas entre light/dark (ignora system).\r\n const toggle = useCallback(() => {\r\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\r\n }, [theme, setTheme]);\r\n\r\n return { theme, setTheme, isDark, toggle } as const;\r\n}\r\n"],"names":["useState","useEffect","useCallback"],"mappings":";;AAIA,MAAM,cAAc;AACpB,MAAM,eAAe;AAErB,SAAS,QAAQ,OAAgC;AAC/C,SAAO,UAAU,WAAW,UAAU,UAAU,UAAU;AAC5D;AAEA,SAAS,iBAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,OAAO,aAAa,QAAQ,WAAW;AACtD,SAAO,QAAQ,MAAM,IAAI,SAAS;AACpC;AAEA,SAAS,iBAAiB,OAAuB;AAC/C,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,OAAO,WAAW,8BAA8B,EAAE;AAC3D;AAaO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,aAAa,IAAIA,MAAAA,SAAgB,MAAM,gBAAgB;AAGrEC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,OAAO,SAAS;AACtB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,QAAQ,iBAAiB,KAAK,CAAC;AACzE,UAAA;AAEA,QAAI,UAAU,UAAU;AACtB,YAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,SAAG,iBAAiB,UAAU,KAAK;AACnC,aAAO,MAAM,GAAG,oBAAoB,UAAU,KAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,WAAWC,kBAAY,CAAC,SAAgB;AAC5C,kBAAc,IAAI;AAClB,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI;AACF,aAAO,aAAa,QAAQ,aAAa,IAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AACA,WAAO,cAAc,IAAI,YAAY,cAAc,EAAE,QAAQ,KAAA,CAAM,CAAC;AAAA,EACtE,GAAG,CAAA,CAAE;AAGLD,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,WAAW,CAAC,MAAa;AAC7B,YAAM,OAAQ,EAAkB;AAChC,UAAI,QAAQ,IAAI,EAAG,eAAc,IAAI;AAAA,IACvC;AACA,UAAM,YAAY,CAAC,MAAoB;AACrC,UAAI,EAAE,QAAQ,YAAa;AAC3B,UAAI,QAAQ,EAAE,QAAQ,EAAG,eAAc,EAAE,QAAQ;AAAA,IACnD;AACA,WAAO,iBAAiB,cAAc,QAAQ;AAC9C,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,cAAc,QAAQ;AACjD,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,iBAAiB,KAAK;AAGrC,QAAM,SAASC,MAAAA,YAAY,MAAM;AAC/B,aAAS,UAAU,SAAS,UAAU,MAAM;AAAA,EAC9C,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,EAAE,OAAO,UAAU,QAAQ,OAAA;AACpC;;"}