@devup-ui/react 1.0.16 → 1.0.17

package/dist/hooks/use-theme.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),o=require("./use-safe-effect.cjs");let t=null;const u={};let a=null;function f(){const n=l.useId(),[r,s]=l.useState(a);return o.useSafeEffect(()=>{if(a!==null)return;const e=document.documentElement.getAttribute("data-theme");e!==null&&e!==r&&s(e)},[r]),o.useSafeEffect(()=>{const e=document.documentElement;return u[n]=s,t||(t=new MutationObserver(()=>{const c=document.documentElement.getAttribute("data-theme");a=c;for(const i in u)u[i](c)}),t.observe(e,{attributes:!0,attributeFilter:["data-theme"],childList:!1,subtree:!1,characterData:!1,attributeOldValue:!1,characterDataOldValue:!1})),()=>{delete u[n],t&&Object.keys(u).length===0&&t.disconnect()}},[n]),r}exports.useTheme=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),r=require("../stores/theme-store.cjs"),e=r.createThemeStore();function o(){return t.useSyncExternalStore(e.subscribe,e.get,e.get)}exports.useTheme=o;

package/dist/hooks/use-theme.d.ts

@@ -1,3 +1,2 @@
-import { DevupTheme } from '../types/theme';
-export declare function useTheme(): keyof DevupTheme | null;
+export declare function useTheme(): null;
 //# sourceMappingURL=use-theme.d.ts.map

package/dist/hooks/use-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAOhD,wBAAgB,QAAQ,IAAI,MAAM,UAAU,GAAG,IAAI,CAqClD"}
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme.ts"],"names":[],"mappings":"AAQA,wBAAgB,QAAQ,SAOvB"}

package/dist/hooks/use-theme.js

@@ -1,35 +1,14 @@
 "use client";
-import { useId as m, useState as i } from "react";
-import { useSafeEffect as s } from "./use-safe-effect.js";
-let t = null;
-const n = {};
-let u = null;
-function h() {
-  const r = m(), [a, l] = i(u);
-  return s(() => {
-    if (u !== null) return;
-    const e = document.documentElement.getAttribute("data-theme");
-    e !== null && e !== a && l(e);
-  }, [a]), s(() => {
-    const e = document.documentElement;
-    return n[r] = l, t || (t = new MutationObserver(() => {
-      const o = document.documentElement.getAttribute("data-theme");
-      u = o;
-      for (const c in n)
-        n[c](o);
-    }), t.observe(e, {
-      attributes: !0,
-      attributeFilter: ["data-theme"],
-      childList: !1,
-      subtree: !1,
-      characterData: !1,
-      attributeOldValue: !1,
-      characterDataOldValue: !1
-    })), () => {
-      delete n[r], t && Object.keys(n).length === 0 && t.disconnect();
-    };
-  }, [r]), a;
+import { useSyncExternalStore as t } from "react";
+import { createThemeStore as r } from "../stores/theme-store.js";
+const e = r();
+function c() {
+  return t(
+    e.subscribe,
+    e.get,
+    e.get
+  );
 }
 export {
-  h as useTheme
+  c as useTheme
 };

package/dist/stores/theme-store.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=null;function a(){if(typeof window>"u")return{get:()=>u,set:()=>{},subscribe:()=>()=>{}};const o=document.documentElement,r=new Set;let n=u;const i=()=>n,s=e=>{n=e,r.forEach(t=>t(n))},c=e=>(r.add(e),s(o.getAttribute("data-theme")),()=>r.delete(e));return new MutationObserver(e=>{for(const t of e)t.type==="attributes"&&t.target instanceof HTMLElement&&s(t.target.getAttribute("data-theme"))}).observe(o,{attributes:!0,attributeFilter:["data-theme"],subtree:!1}),{get:i,set:s,subscribe:c}}exports.createThemeStore=a;

package/dist/stores/theme-store.d.ts

@@ -0,0 +1,14 @@
+import { DevupTheme } from '../types/theme';
+type Theme = keyof DevupTheme | null;
+type StoreChangeEvent = (newTheme: Theme) => void;
+export declare function createThemeStore(): {
+    get: () => null;
+    set: () => void;
+    subscribe: () => () => void;
+} | {
+    get: () => null;
+    set: (newTheme: Theme) => void;
+    subscribe: (onStoreChange: StoreChangeEvent) => () => boolean;
+};
+export {};
+//# sourceMappingURL=theme-store.d.ts.map

package/dist/stores/theme-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-store.d.ts","sourceRoot":"","sources":["../../src/stores/theme-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEhD,KAAK,KAAK,GAAG,MAAM,UAAU,GAAG,IAAI,CAAA;AACpC,KAAK,gBAAgB,GAAG,CAAC,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAA;AAIjD,wBAAgB,gBAAgB;;;;;;oBAYP,KAAK;+BAKM,gBAAgB;EAqBnD"}

package/dist/stores/theme-store.js

@@ -0,0 +1,31 @@
+"use client";
+function a() {
+  if (typeof window > "u")
+    return {
+      get: () => null,
+      set: () => {
+      },
+      subscribe: () => () => {
+      }
+    };
+  const i = document.documentElement, n = /* @__PURE__ */ new Set();
+  let r = null;
+  const o = () => r, s = (e) => {
+    r = e, n.forEach((t) => t(r));
+  }, u = (e) => (n.add(e), s(i.getAttribute("data-theme")), () => n.delete(e));
+  return new MutationObserver((e) => {
+    for (const t of e)
+      t.type === "attributes" && t.target instanceof HTMLElement && s(t.target.getAttribute("data-theme"));
+  }).observe(i, {
+    attributes: !0,
+    attributeFilter: ["data-theme"],
+    subtree: !1
+  }), {
+    get: o,
+    set: s,
+    subscribe: u
+  };
+}
+export {
+  a as createThemeStore
+};

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "1.0.16",
+  "version": "1.0.17",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/dist/hooks/use-safe-effect.cjs

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=typeof window>"u"?e.useEffect:e.useLayoutEffect;exports.useSafeEffect=t;

package/dist/hooks/use-safe-effect.js

@@ -1,6 +0,0 @@
-"use client";
-import { useEffect as e, useLayoutEffect as f } from "react";
-const o = typeof window > "u" ? e : f;
-export {
-  o as useSafeEffect
-};