margo-ui 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/chip/style.ts

@@ -1,5 +1,5 @@
 export const chipBaseClassName = `bg-on-main/8 margo-text-box-trim flex items-center justify-center px-3 py-0.5
-whitespace-nowrap lowercase flex-none leading-none rounded-margo-sm text-mc shadow-chip
+whitespace-nowrap lowercase flex-none rounded-margo-sm text-mc leading-none shadow-chip
 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
 
 export const chipActiveClassName = "bg-on-main text-main";

package/src/hooks/use_theme.ts

@@ -1,30 +1,38 @@
-import { useCallback, useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 
-import { margoThemeClient } from "../utils/theme/theme.js";
+import { margoTheme } from "../utils/theme/theme.js";
 
 import type { MargoTheme } from "../utils/theme/type.js";
 
-export const useMargoTheme = (): [MargoTheme, (next: MargoTheme | ((current: MargoTheme) => MargoTheme)) => void] => {
-  const [theme, setThemeState] = useState<MargoTheme>(() => margoThemeClient.get());
+type UseMargoTheme = {
+  theme: MargoTheme | undefined;
+  set: (next: MargoTheme) => void;
+  toggle: () => void;
+};
+
+const getSnapshot = (): MargoTheme =>
+  document.documentElement.classList.contains(margoTheme.DARK) ? margoTheme.DARK : margoTheme.LIGHT;
 
-  useEffect(() => {
-    if (typeof document === "undefined") return;
+const getServerSnapshot = () => undefined;
 
-    const root = document.documentElement;
-    setThemeState(margoThemeClient.get());
+const subscribe = (onChange: () => void) => {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
 
-    const observer = new MutationObserver(() => {
-      setThemeState(margoThemeClient.get());
-    });
+  return () => observer.disconnect();
+};
 
-    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+const applyTheme = (next: MargoTheme) => {
+  const { classList } = document.documentElement;
+
+  classList.remove(margoTheme.LIGHT, margoTheme.DARK);
+  classList.add(next);
+};
 
-    return () => observer.disconnect();
-  }, []);
+const toggle = () => applyTheme(getSnapshot() === margoTheme.DARK ? margoTheme.LIGHT : margoTheme.DARK);
 
-  const setTheme = useCallback((next: MargoTheme | ((current: MargoTheme) => MargoTheme)) => {
-    margoThemeClient.set(typeof next === "function" ? next(margoThemeClient.get()) : next);
-  }, []);
+export const useMargoTheme = (): UseMargoTheme => {
+  const theme = useSyncExternalStore<MargoTheme | undefined>(subscribe, getSnapshot, getServerSnapshot);
 
-  return [theme, setTheme];
+  return { theme, set: applyTheme, toggle };
 };

package/src/index.ts

@@ -33,7 +33,7 @@ export { useMargoTheme } from "./hooks/use_theme.js";
 
 export { cn } from "./utils/cn/cn.js";
 export { isMargoLayerSupported } from "./utils/support/support.js";
-export { margoTheme, margoThemeClient } from "./utils/theme/theme.js";
+export { margoTheme } from "./utils/theme/theme.js";
 
 export type { BlockquoteProps } from "./components/blockquote/type.js";
 
@@ -83,4 +83,4 @@ export type { MaskGradientXProps } from "./hoc/mask_gradient_x/type.js";
 export type { MaskGradientYProps } from "./hoc/mask_gradient_y/type.js";
 export type { RippleProps } from "./hoc/ripple/type.js";
 
-export type { MargoTheme, MargoThemeClient } from "./utils/theme/type.js";
+export type { MargoTheme } from "./utils/theme/type.js";

package/src/utils/theme/theme.ts

@@ -1,26 +1,6 @@
-import type { MargoTheme, MargoThemeClient, MargoThemeConstants } from "./type.js";
+import type { MargoThemeConstants } from "./type.js";
 
 export const margoTheme: MargoThemeConstants = {
   LIGHT: "light",
   DARK: "dark",
 };
-
-const get = (): MargoTheme => {
-  if (typeof document === "undefined") return margoTheme.DARK;
-
-  return document.documentElement.classList.contains(margoTheme.DARK) ? margoTheme.DARK : margoTheme.LIGHT;
-};
-
-const set = (next: MargoTheme) => {
-  if (typeof document === "undefined") return;
-
-  document.documentElement.classList.toggle(margoTheme.DARK, next === margoTheme.DARK);
-};
-
-const toggle = () => set(get() === margoTheme.DARK ? margoTheme.LIGHT : margoTheme.DARK);
-
-export const margoThemeClient: MargoThemeClient = {
-  get,
-  set,
-  toggle,
-};

package/src/utils/theme/type.ts

@@ -4,9 +4,3 @@ export type MargoThemeConstants = {
   readonly LIGHT: MargoTheme;
   readonly DARK: MargoTheme;
 };
-
-export type MargoThemeClient = {
-  get: () => MargoTheme;
-  set: (next: MargoTheme) => void;
-  toggle: () => void;
-};