@usetheo/ui 0.6.1-next.0 → 0.6.3-next.0

package/dist/index.js

@@ -188,35 +188,25 @@ function ThemeProvider({
   useEffect(() => {
     setThemes(mergedThemes);
   }, [mergedThemes]);
-  const [themeName, setThemeName] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultTheme;
-    try {
-      return window.localStorage.getItem(`${storageKey}:name`) ?? defaultTheme;
-    } catch (err) {
-      warnStorageFailure("read theme name", err);
-      return defaultTheme;
-    }
-  });
-  const [mode, setModeState] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultMode;
-    try {
-      const stored = window.localStorage.getItem(`${storageKey}:mode`);
-      return stored === "dark" || stored === "light" ? stored : defaultMode;
-    } catch (err) {
-      warnStorageFailure("read theme mode", err);
-      return defaultMode;
-    }
-  });
-  const [density, setDensityState] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultDensity;
+  const [themeName, setThemeName] = useState(defaultTheme);
+  const [mode, setModeState] = useState(defaultMode);
+  const [density, setDensityState] = useState(defaultDensity);
+  const skipFirstPersistRef = useRef(true);
+  useEffect(() => {
+    if (typeof window === "undefined" || !storageKey) return;
     try {
-      const stored = window.localStorage.getItem(`${storageKey}:density`);
-      return stored === "compact" || stored === "comfortable" || stored === "spacious" ? stored : defaultDensity;
+      const storedName = window.localStorage.getItem(`${storageKey}:name`);
+      const storedMode = window.localStorage.getItem(`${storageKey}:mode`);
+      const storedDensity = window.localStorage.getItem(`${storageKey}:density`);
+      if (storedName) setThemeName(storedName);
+      if (storedMode === "dark" || storedMode === "light") setModeState(storedMode);
+      if (storedDensity === "compact" || storedDensity === "comfortable" || storedDensity === "spacious") {
+        setDensityState(storedDensity);
+      }
     } catch (err) {
-      warnStorageFailure("read density", err);
-      return defaultDensity;
+      warnStorageFailure("read theme + mode + density", err);
     }
-  });
+  }, [storageKey]);
   useEffect(() => {
     injectThemeCss(themes);
   }, [themes]);
@@ -232,6 +222,10 @@ function ThemeProvider({
     injectDensityCss();
   }, [themeName, mode, density, themes]);
   useEffect(() => {
+    if (skipFirstPersistRef.current) {
+      skipFirstPersistRef.current = false;
+      return;
+    }
     if (typeof window === "undefined" || !storageKey) return;
     try {
       window.localStorage.setItem(`${storageKey}:name`, themeName);
@@ -285,18 +279,20 @@ function useTheme() {
 function safe(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
-function buildScript(defaultTheme, defaultMode, storageKey) {
+function buildScript(defaultTheme, defaultMode, defaultDensity, storageKey) {
   const k = safe(storageKey);
   const t = safe(defaultTheme);
   const m = safe(defaultMode);
-  return `(function(){try{var k=${k};var d=document.documentElement;var t=null;var m=null;if(k){t=localStorage.getItem(k+":name");m=localStorage.getItem(k+":mode");}d.setAttribute("data-theme",t||${t});d.setAttribute("data-mode",m||${m});if((m||${m})==="dark"){d.classList.add("dark");}}catch(e){}})();`;
+  const dn = safe(defaultDensity);
+  return `(function(){try{var k=${k};var d=document.documentElement;var t=null;var m=null;var dn=null;if(k){t=localStorage.getItem(k+":name");m=localStorage.getItem(k+":mode");dn=localStorage.getItem(k+":density");}d.setAttribute("data-theme",t||${t});d.setAttribute("data-mode",m||${m});d.setAttribute("data-density",dn||${dn});if((m||${m})==="dark"){d.classList.add("dark");}}catch(e){}})();`;
 }
 function ThemeScript({
   defaultTheme = "violet-forge",
   defaultMode = "dark",
+  defaultDensity = "comfortable",
   storageKey = "theo-ui:theme"
 }) {
-  const code = buildScript(defaultTheme, defaultMode, storageKey);
+  const code = buildScript(defaultTheme, defaultMode, defaultDensity, storageKey);
   return /* @__PURE__ */ jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: code } });
 }
 function ThemeSwitcher({ className, showModeToggle = true }) {
@@ -1452,6 +1448,15 @@ var buttonVariants = cva(
     "font-medium font-sans tracking-tight",
     "transition-[box-shadow,background-color,color,transform] duration-base ease-out-soft",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    // Tailwind v4 dropped the `button { cursor: pointer }` preflight rule
+    // (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor) so
+    // every <button> now shows the default arrow cursor. Restore the
+    // "clickable hand" explicitly for the Button primitive; the
+    // `disabled:pointer-events-none` rule below short-circuits cursor
+    // application for disabled state (no events → cursor is moot).
+    // `aria-disabled:cursor-default` is a belt-and-suspenders override
+    // for paths where pointer-events still flow.
+    "cursor-pointer disabled:cursor-default aria-disabled:cursor-default",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
   ],