@peachy/hooks 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @peachy/hooks
 
+## 0.0.11
+
+### Patch Changes
+
+- 3e37e37: Improve types for useBinding hook
+
+## 0.0.10
+
+### Patch Changes
+
+- b74728b: Add useDarkMode and useAccentColor hook
+
 ## 0.0.9
 
 ## 0.0.8

package/README.md

@@ -24,11 +24,7 @@ import { useNetworkMonitor } from "@peachy/hooks";
 const App = () => {
   const { connected } = useNetworkMonitor();
 
-  return (
-    <Gtk.Label>
-      {connected ? "Connected" : "Disconnected"}
-    </Gtk.Label>
-  );
+  return <Gtk.Label>{connected ? "Connected" : "Disconnected"}</Gtk.Label>;
 };
 ```
 
@@ -51,12 +47,8 @@ const App = () => {
 
   return (
     <Gtk.Box>
-      <Gtk.Label>
-        Theme: {value}
-      </Gtk.Label>
-      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>
-        Change Theme
-      </Gtk.Button>
+      <Gtk.Label>Theme: {value}</Gtk.Label>
+      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>Change Theme</Gtk.Button>
     </Gtk.Box>
   );
 };
@@ -68,6 +60,8 @@ const App = () => {
 
 Bind to a property, and listen for changes.
 
+NOTE: You can provide a default value for the hook as third parameter
+
 ```tsx
 import Adw from "gi://Adw?version=1";
 
@@ -81,14 +75,34 @@ const App = () => {
 
   return (
     <Gtk.Box>
-      <Gtk.Label>
-        Theme: {darkMode ? "Dark" : "Light"}
-      </Gtk.Label>
-      
-      <Gtk.Label>
-        Accent Color: {accentColor}
-      </Gtk.Label>
+      <Gtk.Label>Theme: {darkMode ? "Dark" : "Light"}</Gtk.Label>
+
+      <Gtk.Label>Accent Color: {accentColor}</Gtk.Label>
     </Gtk.Box>
   );
 };
 ```
+
+### 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, "accent-color");
+	const [systemSupportsAccentColors] = useBinding(styleManager, "system-supports-accent-colors");
+	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");
+	return [isDark, useCallback((value) => {
+		styleManager.current.set_color_scheme(value ? Adw.ColorScheme.PREFER_DARK : Adw.ColorScheme.PREFER_LIGHT);
+	}, [styleManager])];
+}
+
+//#endregion
+export { useDarkMode };

package/dist/gio/use-network-monitor.mjs

@@ -1,26 +1,27 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Gio from "gi://Gio?version=2.0";
 
 //#region src/gio/use-network-monitor.ts
 function useNetworkMonitor() {
-	const monitor = Gio.NetworkMonitor.get_default();
+	const monitor = useRef(Gio.NetworkMonitor.get_default());
 	const [state, setState] = useState(() => calculateState());
 	const calculateState = useCallback(() => {
 		return {
-			available: monitor.network_available,
-			connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
-			state: monitor.connectivity,
-			metered: monitor.network_metered
+			available: monitor.current.networkAvailable,
+			connected: monitor.current.connectivity === Gio.NetworkConnectivity.FULL,
+			state: monitor.current.connectivity,
+			metered: monitor.current.networkMetered
 		};
-	}, []);
+	}, [monitor]);
 	useEffect(() => {
-		const id = monitor.connect("network-changed", () => {
+		const monitorObj = monitor.current;
+		const id = monitorObj.connect("network-changed", () => {
 			setState(calculateState());
 		});
 		return () => {
-			monitor.disconnect(id);
+			monitorObj.disconnect(id);
 		};
-	}, []);
+	}, [calculateState]);
 	return state;
 }
 

package/dist/gio/use-setting.mjs

@@ -1,21 +1,25 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Gio from "gi://Gio?version=2.0";
 
 //#region src/gio/use-setting.ts
 function useSetting(schema, key) {
-	const settings = Gio.Settings.new(schema);
-	const getValue = () => settings.get_value(key).recursiveUnpack();
+	const settings = useRef(Gio.Settings.new(schema));
+	const getValue = useCallback(() => settings.current.get_value(key).recursiveUnpack(), [key, settings]);
 	const [value, setValue] = useState(() => getValue());
 	useEffect(() => {
-		const handler = settings.connect("changed::" + key, () => {
+		let settingsObj = settings.current;
+		const handler = settingsObj.connect(`changed::${key}`, () => {
 			setValue(getValue());
 		});
-		return () => settings.disconnect(handler);
-	}, [settings, key]);
-	const changeValue = (newValue) => {
-		settings.set_value(key, newValue);
-	};
-	return [value, changeValue];
+		return () => settingsObj.disconnect(handler);
+	}, [
+		settings,
+		key,
+		getValue
+	]);
+	return [value, useCallback(() => (newValue) => {
+		settings.current.set_value(key, newValue);
+	}, [key])];
 }
 
 //#endregion

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

@@ -2,8 +2,10 @@ import { RefObject } from "react";
 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>, Converter extends (value: T[Prop]) => any>(object: T | RefObject<T>, property: Prop, defaultValue: T[Prop] | undefined, converter: Converter): [ReturnType<Converter>];
+type PropertyOf<T extends GObject.Object> = Extract<keyof T["$readableProperties"], string>;
+type PropertyType<T, Prop extends keyof T> = T["$readableProperties"][Prop];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T>, property: Prop, defaultValue?: null): [PropType];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T | null>, property: Prop, defaultValue: PropType): [PropType];
+declare function useBinding<T extends GObject.Object, Prop extends PropertyOf<T>, PropType extends PropertyType<T, Prop>>(object: T | RefObject<T | null>, property: Prop, defaultValue?: null): [PropType | null];
 //#endregion
 export { useBinding };

package/dist/gobject/use-binding.mjs

@@ -3,31 +3,23 @@ import "../base/index.mjs";
 import { useEffect, useState } from "react";
 
 //#region src/gobject/use-binding.ts
-function useBinding(object, _property, defaultValue, converter) {
-	const property = toKebabCase(_property);
+function useBinding(object, property, defaultValue) {
 	const value = useReference(object);
 	const [result, setResult] = useState(() => {
-		if (!value) return defaultValue;
-		const initialResult = value[property];
-		return converter ? converter(initialResult) : initialResult;
+		if (!value) return defaultValue ?? null;
+		return value[property];
 	});
 	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, property]);
 	return [result];
 }
-function toKebabCase(str) {
-	return str.replace(/([A-Z])/g, "-$1").replace(/_/g, "-").toLowerCase();
-}
 
 //#endregion
 export { useBinding };

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,7 +1,9 @@
 {
   "name": "@peachy/hooks",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "",
+  "license": "MIT",
+  "author": "",
   "main": "./dist/index.mjs",
   "exports": {
     ".": {
@@ -13,14 +15,12 @@
       "types": "./dist/*/index.d.mts"
     }
   },
-  "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.9"
+    "@peachy/react": "0.0.11"
   },
   "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,18 @@
+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, "accent-color");
+  const [systemSupportsAccentColors] = useBinding(styleManager, "system-supports-accent-colors");
+
+  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");
+  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/base/use-reference.ts

@@ -3,10 +3,7 @@ import { RefObject, useEffect, useState } from "react";
 /**
  * Returns the value inside a `ref`, correctly checking it after the initial render
  */
-export function useReference<T>(
-  value: T | RefObject<T>,
-  defaultValue?: T,
-): T | null {
+export function useReference<T>(value: T | RefObject<T>, defaultValue?: T): T | null {
   const [result, setResult] = useState<T | null>(() => {
     return getValue(value) ?? (defaultValue || null);
   });

package/src/gio/use-network-monitor.ts

@@ -1,5 +1,6 @@
 import Gio from "gi://Gio?version=2.0";
-import { useCallback, useEffect, useState } from "react";
+
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface NetworkMonitor {
   connected: boolean;
@@ -9,27 +10,29 @@ interface NetworkMonitor {
 }
 
 export function useNetworkMonitor(): NetworkMonitor {
-  const monitor = Gio.NetworkMonitor.get_default();
+  const monitor = useRef(Gio.NetworkMonitor.get_default());
   const [state, setState] = useState(() => calculateState());
 
   const calculateState = useCallback(() => {
     return {
-      available: monitor.network_available,
-      connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
-      state: monitor.connectivity,
-      metered: monitor.network_metered,
+      available: monitor.current.networkAvailable,
+      connected: monitor.current.connectivity === Gio.NetworkConnectivity.FULL,
+      state: monitor.current.connectivity,
+      metered: monitor.current.networkMetered,
     } as NetworkMonitor;
-  }, []);
+  }, [monitor]);
 
   useEffect(() => {
-    const id = monitor.connect("network-changed", () => {
+    const monitorObj = monitor.current;
+
+    const id = monitorObj.connect("network-changed", () => {
       setState(calculateState());
     });
 
     return () => {
-      monitor.disconnect(id);
+      monitorObj.disconnect(id);
     };
-  }, []);
+  }, [calculateState]);
 
   return state;
 }

package/src/gio/use-setting.ts

@@ -1,25 +1,34 @@
 import Gio from "gi://Gio?version=2.0";
 import GLib from "gi://GLib?version=2.0";
-import { useEffect, useState } from "react";
+
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export function useSetting<T = unknown>(schema: string, key: string) {
-  const settings = Gio.Settings.new(schema);
+  const settings = useRef(Gio.Settings.new(schema));
 
-  const getValue = () => settings.get_value(key).recursiveUnpack() as T;
+  const getValue = useCallback(
+    () => settings.current.get_value(key).recursiveUnpack() as T,
+    [key, settings],
+  );
 
   const [value, setValue] = useState<T>(() => getValue());
 
   useEffect(() => {
-    const handler = settings.connect("changed::" + key, () => {
+    let settingsObj = settings.current;
+
+    const handler = settingsObj.connect(`changed::${key}`, () => {
       setValue(getValue());
     });
 
-    return () => settings.disconnect(handler);
-  }, [settings, key]);
+    return () => settingsObj.disconnect(handler);
+  }, [settings, key, getValue]);
 
-  const changeValue = (newValue: GLib.Variant) => {
-    settings.set_value(key, newValue);
-  };
+  const changeValue = useCallback(
+    () => (newValue: GLib.Variant) => {
+      settings.current.set_value(key, newValue);
+    },
+    [key],
+  );
 
   return [value, changeValue] as [T, (newValue: GLib.Variant) => void];
 }

package/src/gobject/use-binding.ts

@@ -1,62 +1,52 @@
 import GObject from "gi://GObject?version=2.0";
+
 import { RefObject, useEffect, useState } from "react";
+
 import { useReference } from "../base";
 
-type NonFunctionKeys<T> = {
-  [K in keyof T]: T[K] extends Function
-    ? never
-    : K extends Symbol
-      ? never
-      : K extends number
-        ? never
-        : K;
-}[keyof T];
+type PropertyOf<T extends GObject.Object> = Extract<keyof T["$readableProperties"], string>;
 
+/// @ts-expect-error broken
+type PropertyType<T, Prop extends keyof T> = T["$readableProperties"][Prop];
+
+// when your ref is non-nullable, the result is never null
 export function useBinding<
   T extends GObject.Object,
-  Prop extends NonFunctionKeys<T>,
->(
-  object: T | RefObject<T>,
-  property: Prop,
-  defaultValue?: T[Prop],
-  converter?: undefined,
-): [T[Prop]];
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T>, property: Prop, defaultValue?: null): [PropType];
+// when the ref is nullable but you provided a default value, the result is never null
 export 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>];
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T | null>, property: Prop, defaultValue: PropType): [PropType];
+// when you didn't provide a default value, the result can be null
 export function useBinding<
   T extends GObject.Object,
-  Prop extends NonFunctionKeys<T>,
-  Converter extends (value: T[Prop]) => any,
->(
-  object: T | RefObject<T>,
-  _property: Prop,
-  defaultValue?: any,
-  converter?: Converter,
-): any {
-  const property = toKebabCase(_property);
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T | null>, property: Prop, defaultValue?: null): [PropType | null];
+// base implementation
+export function useBinding<
+  T extends GObject.Object,
+  Prop extends PropertyOf<T>,
+  PropType extends PropertyType<T, Prop>,
+>(object: T | RefObject<T>, property: Prop, defaultValue?: PropType): any {
   const value = useReference(object);
 
   const [result, setResult] = useState(() => {
-    if (!value) return defaultValue;
-    const initialResult = value[property];
-    return converter ? converter(initialResult) : initialResult;
+    if (!value) return defaultValue ?? null;
+    return value[property];
   });
 
   // run this on initial render
   useEffect(() => {
     if (!value) {
-      console.error(`Object is null or undefined`);
       return;
     }
 
+    // @ts-expect-error trust me, we are listening to a property
     const id = value.connect(`notify::${property}`, () => {
       setResult(value[property]);
     });
@@ -64,14 +54,7 @@ export function useBinding<
     return () => {
       value.disconnect(id);
     };
-  }, []);
+  }, [value, property]);
 
   return [result] as const;
 }
-
-function toKebabCase(str: string): string {
-  return str
-    .replace(/([A-Z])/g, "-$1")
-    .replace(/_/g, "-")
-    .toLowerCase();
-}

package/src/index.ts

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

package/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "@peachy/react/tsconfig",
+  "extends": "@peachy/react/tsconfig"
 }

package/dist/types.d.mts

@@ -1 +0,0 @@
-export { };

package/dist/types.mjs

@@ -1 +0,0 @@
-export {  };