@proveanything/smartlinks-auth-ui 0.5.20 → 0.5.22

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 (6) hide show
  1. package/dist/components/SmartlinksAuthUI.d.ts.map +1 -1
  2. package/dist/index.esm.js +34 -3
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +34 -3
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/components/SmartlinksAuthUI.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAcpE,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AA2V7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CAqBjD,CAAC;AAqDF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAI/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAouE5D,CAAC"}
1
+ {"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAcpE,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AA2V7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CAqBjD,CAAC;AAqDF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAI/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwwE5D,CAAC"}
package/dist/index.esm.js CHANGED
@@ -13540,17 +13540,48 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
13540
13540
  }
13541
13541
  };
13542
13542
  // Dark mode detection and theme management
13543
+ // In 'auto' mode we honor (in priority order):
13544
+ // 1. An explicit `.dark` class on <html> or <body> (set by the host portal / SmartLinks theme system)
13545
+ // 2. A SmartLinks theme payload in the URL (?theme=... with m === 'd')
13546
+ // 3. The OS `prefers-color-scheme` preference
13543
13547
  useEffect(() => {
13544
13548
  if (theme !== 'auto') {
13545
13549
  setResolvedTheme(theme);
13546
13550
  return;
13547
13551
  }
13548
- // Auto-detect system theme preference
13549
13552
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
13550
- const updateTheme = () => setResolvedTheme(mediaQuery.matches ? 'dark' : 'light');
13553
+ const hostHasDarkClass = () => document.documentElement.classList.contains('dark') ||
13554
+ document.body.classList.contains('dark');
13555
+ const urlRequestsDark = () => {
13556
+ try {
13557
+ const search = new URLSearchParams(window.location.search);
13558
+ let themeParam = search.get('theme');
13559
+ if (!themeParam && window.location.hash.includes('?')) {
13560
+ themeParam = new URLSearchParams(window.location.hash.substring(window.location.hash.indexOf('?'))).get('theme');
13561
+ }
13562
+ if (!themeParam)
13563
+ return false;
13564
+ const decoded = JSON.parse(atob(themeParam));
13565
+ return decoded?.m === 'd';
13566
+ }
13567
+ catch {
13568
+ return false;
13569
+ }
13570
+ };
13571
+ const updateTheme = () => {
13572
+ const isDark = hostHasDarkClass() || urlRequestsDark() || mediaQuery.matches;
13573
+ setResolvedTheme(isDark ? 'dark' : 'light');
13574
+ };
13551
13575
  updateTheme();
13552
13576
  mediaQuery.addEventListener('change', updateTheme);
13553
- return () => mediaQuery.removeEventListener('change', updateTheme);
13577
+ // Watch host <html>/<body> class changes (portal toggling dark mode at runtime)
13578
+ const observer = new MutationObserver(updateTheme);
13579
+ observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
13580
+ observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
13581
+ return () => {
13582
+ mediaQuery.removeEventListener('change', updateTheme);
13583
+ observer.disconnect();
13584
+ };
13554
13585
  }, [theme]);
13555
13586
  // Version tracking for debugging if needed
13556
13587
  // console.log(`${LOG_PREFIX} Component mounted, v${AUTH_UI_VERSION}`);