@slimr/react 3.0.6 → 3.0.8

package/cjs/index.d.ts

@@ -5,5 +5,6 @@ export * from '@slimr/styled';
 export * from '@slimr/swr';
 export * from 'react-use';
 export * from './merge-refs.js';
+export * from './useColorScheme.js';
 export * from './useMemos.js';
 export * from './useSet2.js';

package/cjs/index.js

@@ -21,6 +21,7 @@ __exportStar(require("@slimr/styled"), exports);
 __exportStar(require("@slimr/swr"), exports);
 __exportStar(require("react-use"), exports);
 __exportStar(require("./merge-refs.js"), exports);
+__exportStar(require("./useColorScheme.js"), exports);
 __exportStar(require("./useMemos.js"), exports);
 __exportStar(require("./useSet2.js"), exports);
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,kDAA+B;AAC/B,gDAA6B;AAC7B,gDAA6B;AAC7B,6CAA0B;AAC1B,4CAAyB;AAEzB,kDAA+B;AAC/B,gDAA6B;AAC7B,+CAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,kDAA+B;AAC/B,gDAA6B;AAC7B,gDAA6B;AAC7B,6CAA0B;AAC1B,4CAAyB;AAEzB,kDAA+B;AAC/B,sDAAmC;AACnC,gDAA6B;AAC7B,+CAA4B"}

package/cjs/index.ts

@@ -6,5 +6,6 @@ export * from '@slimr/swr'
 export * from 'react-use'
 
 export * from './merge-refs.js'
+export * from './useColorScheme.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/cjs/useColorScheme.d.ts

@@ -0,0 +1,5 @@
+export declare function useColorScheme(): {
+    dark: boolean;
+    light: boolean;
+    scheme: string;
+};

package/cjs/useColorScheme.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorScheme = void 0;
+const react_1 = require("react");
+const matchMediaPrefersDark = matchMedia?.('(prefers-color-scheme:dark)');
+function useColorScheme() {
+    const [dark, setDark] = (0, react_1.useState)(!!matchMediaPrefersDark?.matches);
+    (0, react_1.useEffect)(() => {
+        const updateColorScheme = () => {
+            setDark(!!matchMediaPrefersDark?.matches);
+        };
+        matchMediaPrefersDark.addEventListener('change', updateColorScheme);
+        return () => {
+            matchMediaPrefersDark.removeEventListener('change', updateColorScheme);
+        };
+    }, []);
+    return { dark, light: !dark, scheme: dark ? 'dark' : 'light' };
+}
+exports.useColorScheme = useColorScheme;
+//# sourceMappingURL=useColorScheme.js.map

package/cjs/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":";;;AAAA,iCAAyC;AAEzC,MAAM,qBAAqB,GAAG,UAAU,EAAE,CAAC,6BAA6B,CAAC,CAAA;AAEzE,SAAgB,cAAc;IAC5B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;IAElE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAA;QACD,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACnE,OAAO,GAAG,EAAE;YACV,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACxE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAA;AAC9D,CAAC;AAdD,wCAcC"}

package/cjs/useColorScheme.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+
+const matchMediaPrefersDark = matchMedia?.('(prefers-color-scheme:dark)')
+
+export function useColorScheme() {
+  const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
+
+  useEffect(() => {
+    const updateColorScheme = () => {
+      setDark(!!matchMediaPrefersDark?.matches)
+    }
+    matchMediaPrefersDark.addEventListener('change', updateColorScheme)
+    return () => {
+      matchMediaPrefersDark.removeEventListener('change', updateColorScheme)
+    }
+  }, [])
+
+  return {dark, light: !dark, scheme: dark ? 'dark' : 'light'}
+}

package/esm/index.d.ts

@@ -5,5 +5,6 @@ export * from '@slimr/styled';
 export * from '@slimr/swr';
 export * from 'react-use';
 export * from './merge-refs.js';
+export * from './useColorScheme.js';
 export * from './useMemos.js';
 export * from './useSet2.js';

package/esm/index.js

@@ -5,6 +5,7 @@ export * from '@slimr/styled';
 export * from '@slimr/swr';
 export * from 'react-use';
 export * from './merge-refs.js';
+export * from './useColorScheme.js';
 export * from './useMemos.js';
 export * from './useSet2.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AAEzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AAEzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/esm/index.ts

@@ -6,5 +6,6 @@ export * from '@slimr/swr'
 export * from 'react-use'
 
 export * from './merge-refs.js'
+export * from './useColorScheme.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/esm/useColorScheme.d.ts

@@ -0,0 +1,5 @@
+export declare function useColorScheme(): {
+    dark: boolean;
+    light: boolean;
+    scheme: string;
+};

package/esm/useColorScheme.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+const matchMediaPrefersDark = matchMedia?.('(prefers-color-scheme:dark)');
+export function useColorScheme() {
+    const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches);
+    useEffect(() => {
+        const updateColorScheme = () => {
+            setDark(!!matchMediaPrefersDark?.matches);
+        };
+        matchMediaPrefersDark.addEventListener('change', updateColorScheme);
+        return () => {
+            matchMediaPrefersDark.removeEventListener('change', updateColorScheme);
+        };
+    }, []);
+    return { dark, light: !dark, scheme: dark ? 'dark' : 'light' };
+}
+//# sourceMappingURL=useColorScheme.js.map

package/esm/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEzC,MAAM,qBAAqB,GAAG,UAAU,EAAE,CAAC,6BAA6B,CAAC,CAAA;AAEzE,MAAM,UAAU,cAAc;IAC5B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAA;QACD,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACnE,OAAO,GAAG,EAAE;YACV,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACxE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAA;AAC9D,CAAC"}

package/esm/useColorScheme.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+
+const matchMediaPrefersDark = matchMedia?.('(prefers-color-scheme:dark)')
+
+export function useColorScheme() {
+  const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
+
+  useEffect(() => {
+    const updateColorScheme = () => {
+      setDark(!!matchMediaPrefersDark?.matches)
+    }
+    matchMediaPrefersDark.addEventListener('change', updateColorScheme)
+    return () => {
+      matchMediaPrefersDark.removeEventListener('change', updateColorScheme)
+    }
+  }, [])
+
+  return {dark, light: !dark, scheme: dark ? 'dark' : 'light'}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimr/react",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,
@@ -32,7 +32,7 @@
     "start": "nodemon -w src -e '*' -x 'npm run build && cd ../demo && npm start'"
   },
   "dependencies": {
-    "@slimr/forms": "^5.0.4",
+    "@slimr/forms": "^5.0.6",
     "@slimr/markdown": "^2.1.36",
     "@slimr/router": "^2.1.53",
     "@slimr/styled": "^2.1.44",

package/src/index.ts

@@ -6,5 +6,6 @@ export * from '@slimr/swr'
 export * from 'react-use'
 
 export * from './merge-refs.js'
+export * from './useColorScheme.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/src/useColorScheme.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+
+const matchMediaPrefersDark = matchMedia?.('(prefers-color-scheme:dark)')
+
+export function useColorScheme() {
+  const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
+
+  useEffect(() => {
+    const updateColorScheme = () => {
+      setDark(!!matchMediaPrefersDark?.matches)
+    }
+    matchMediaPrefersDark.addEventListener('change', updateColorScheme)
+    return () => {
+      matchMediaPrefersDark.removeEventListener('change', updateColorScheme)
+    }
+  }, [])
+
+  return {dark, light: !dark, scheme: dark ? 'dark' : 'light'}
+}