@peachy/hooks 0.0.8 → 0.0.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @peachy/hooks
 
+## 0.0.10
+
+### Patch Changes
+
+- b74728b: Add useDarkMode and useAccentColor hook
+
+## 0.0.9
+
 ## 0.0.8
 
 ### Patch Changes

package/README.md

@@ -92,3 +92,27 @@ const App = () => {
   );
 };
 ```
+
+### Adwaita
+
+#### `useDarkMode`
+
+Allows checking the current dark mode state and setting it.
+
+```ts
+import { useDarkMode } from "@peachy/hooks";
+
+const [darkMode, setDarkMode] = useDarkMode();
+```
+
+#### `useAccentColor`
+
+Allows checking the current accent color if set.
+
+```ts
+import { useAccentColor } from "@peachy/hooks";
+
+const [accentColor] = useAccentColor();
+
+// NOTE: returns `null` if accent colors are unsupported
+```

package/dist/adw/index.d.mts

@@ -0,0 +1,3 @@
+import { useAccentColor } from "./use-accent-color.mjs";
+import { useDarkMode } from "./use-dark-mode.mjs";
+export { useAccentColor, useDarkMode };

package/dist/adw/index.mjs

@@ -0,0 +1,4 @@
+import { useAccentColor } from "./use-accent-color.mjs";
+import { useDarkMode } from "./use-dark-mode.mjs";
+
+export { useAccentColor, useDarkMode };

package/dist/adw/use-accent-color.d.mts

@@ -0,0 +1,8 @@
+//#region src/adw/use-accent-color.d.ts
+/**
+ * Query the system's accent color if supported
+ * @returns [accentColor] - accent color or null
+ */
+declare function useAccentColor(): any[];
+//#endregion
+export { useAccentColor };

package/dist/adw/use-accent-color.mjs

@@ -0,0 +1,19 @@
+import { useBinding } from "../gobject/use-binding.mjs";
+import "../gobject/index.mjs";
+import { useRef } from "react";
+import Adw from "gi://Adw?version=1";
+
+//#region src/adw/use-accent-color.ts
+/**
+* Query the system's accent color if supported
+* @returns [accentColor] - accent color or null
+*/
+function useAccentColor() {
+	const styleManager = useRef(Adw.StyleManager.get_default());
+	const [accentColor] = useBinding(styleManager, "accentColor");
+	const [systemSupportsAccentColors] = useBinding(styleManager, "systemSupportsAccentColors");
+	return [systemSupportsAccentColors ? accentColor : null];
+}
+
+//#endregion
+export { useAccentColor };

package/dist/adw/use-dark-mode.d.mts

@@ -0,0 +1,4 @@
+//#region src/adw/use-dark-mode.d.ts
+declare function useDarkMode(): any[];
+//#endregion
+export { useDarkMode };

package/dist/adw/use-dark-mode.mjs

@@ -0,0 +1,16 @@
+import { useBinding } from "../gobject/use-binding.mjs";
+import "../gobject/index.mjs";
+import { useCallback, useRef } from "react";
+import Adw from "gi://Adw?version=1";
+
+//#region src/adw/use-dark-mode.ts
+function useDarkMode() {
+	const styleManager = useRef(Adw.StyleManager.get_default());
+	const [isDark] = useBinding(styleManager, "dark", false);
+	return [isDark, useCallback((value) => {
+		styleManager.current.set_color_scheme(value ? Adw.ColorScheme.PREFER_DARK : Adw.ColorScheme.PREFER_LIGHT);
+	}, [styleManager])];
+}
+
+//#endregion
+export { useDarkMode };

package/dist/gobject/use-binding.d.mts

@@ -3,7 +3,7 @@ import GObject from "gi://GObject?version=2.0";
 
 //#region src/gobject/use-binding.d.ts
 type NonFunctionKeys<T> = { [K in keyof T]: T[K] extends Function ? never : K extends Symbol ? never : K extends number ? never : K }[keyof T];
-declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>>(object: T | RefObject<T>, property: Prop, defaultValue?: T[Prop], converter?: undefined): [T[Prop]];
+declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>>(object: T | RefObject<T | null>, property: Prop, defaultValue?: T[Prop], converter?: undefined): [T[Prop]];
 declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>, Converter extends (value: T[Prop]) => any>(object: T | RefObject<T>, property: Prop, defaultValue: T[Prop] | undefined, converter: Converter): [ReturnType<Converter>];
 //#endregion
 export { useBinding };

package/dist/gobject/use-binding.mjs

@@ -12,17 +12,14 @@ function useBinding(object, _property, defaultValue, converter) {
 		return converter ? converter(initialResult) : initialResult;
 	});
 	useEffect(() => {
-		if (!value) {
-			console.error(`Object is null or undefined`);
-			return;
-		}
+		if (!value) return;
 		const id = value.connect(`notify::${property}`, () => {
 			setResult(value[property]);
 		});
 		return () => {
 			value.disconnect(id);
 		};
-	}, []);
+	}, [value]);
 	return [result];
 }
 function toKebabCase(str) {

package/dist/index.d.mts

@@ -1,5 +1,7 @@
+import { useAccentColor } from "./adw/use-accent-color.mjs";
+import { useDarkMode } from "./adw/use-dark-mode.mjs";
 import { useReference } from "./base/use-reference.mjs";
 import "./base/index.mjs";
 import { useBinding } from "./gobject/use-binding.mjs";
 import "./gobject/index.mjs";
-export { useBinding, useReference };
+export { useAccentColor, useBinding, useDarkMode, useReference };

package/dist/index.mjs

@@ -2,5 +2,8 @@ import { useReference } from "./base/use-reference.mjs";
 import "./base/index.mjs";
 import { useBinding } from "./gobject/use-binding.mjs";
 import "./gobject/index.mjs";
+import { useAccentColor } from "./adw/use-accent-color.mjs";
+import { useDarkMode } from "./adw/use-dark-mode.mjs";
+import "./adw/index.mjs";
 
-export { useBinding, useReference };
+export { useAccentColor, useBinding, useDarkMode, useReference };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peachy/hooks",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "",
   "main": "./dist/index.mjs",
   "exports": {
@@ -16,11 +16,11 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@types/react": "^19.2.8",
-    "react": "^19.2.3",
-    "tsdown": "0.20.0-beta.4",
+    "@types/react": "^19.2.13",
+    "react": "^19.2.4",
+    "tsdown": "0.20.3",
     "typescript": "^5.9.3",
-    "@peachy/react": "0.0.8"
+    "@peachy/react": "0.0.10"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/adw/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-accent-color";
+export * from "./use-dark-mode";

package/src/adw/use-accent-color.ts

@@ -0,0 +1,21 @@
+import Adw from "gi://Adw?version=1";
+
+import { useRef } from "react";
+
+import { useBinding } from "../gobject";
+
+/**
+ * Query the system's accent color if supported
+ * @returns [accentColor] - accent color or null
+ */
+export function useAccentColor() {
+  const styleManager = useRef(Adw.StyleManager.get_default());
+
+  const [accentColor] = useBinding(styleManager, "accentColor");
+  const [systemSupportsAccentColors] = useBinding(
+    styleManager,
+    "systemSupportsAccentColors",
+  );
+
+  return [systemSupportsAccentColors ? accentColor : null];
+}

package/src/adw/use-dark-mode.ts

@@ -0,0 +1,21 @@
+import Adw from "gi://Adw?version=1";
+
+import { useCallback, useRef } from "react";
+
+import { useBinding } from "../gobject";
+
+export function useDarkMode() {
+  const styleManager = useRef(Adw.StyleManager.get_default());
+
+  const [isDark] = useBinding(styleManager, "dark", false);
+  const setDarkMode = useCallback(
+    (value: boolean) => {
+      styleManager.current.set_color_scheme(
+        value ? Adw.ColorScheme.PREFER_DARK : Adw.ColorScheme.PREFER_LIGHT,
+      );
+    },
+    [styleManager],
+  );
+
+  return [isDark, setDarkMode];
+}

package/src/gobject/use-binding.ts

@@ -16,7 +16,7 @@ export function useBinding<
   T extends GObject.Object,
   Prop extends NonFunctionKeys<T>,
 >(
-  object: T | RefObject<T>,
+  object: T | RefObject<T | null>,
   property: Prop,
   defaultValue?: T[Prop],
   converter?: undefined,
@@ -46,25 +46,24 @@ export function useBinding<
 
   const [result, setResult] = useState(() => {
     if (!value) return defaultValue;
-    const initialResult = value[property];
+    const initialResult = value[property as Prop];
     return converter ? converter(initialResult) : initialResult;
   });
 
   // run this on initial render
   useEffect(() => {
     if (!value) {
-      console.error(`Object is null or undefined`);
       return;
     }
 
     const id = value.connect(`notify::${property}`, () => {
-      setResult(value[property]);
+      setResult(value[property as Prop]);
     });
 
     return () => {
       value.disconnect(id);
     };
-  }, []);
+  }, [value]);
 
   return [result] as const;
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./base";
 export * from "./gobject";
+export * from "./adw";