[FIX] useSpeechRecognition hook

nDriaDev · nDriaDev · commit ab1dc6dd4922 · 2024-01-05T10:14:43.000+01:00
diff --git a/apps/react-tools-demo/src/components/hooks/useSpeechSynthesis/UseSpeechSynthesis.tsx b/apps/react-tools-demo/src/components/hooks/useSpeechSynthesis/UseSpeechSynthesis.tsx
@@ -10,7 +10,7 @@ export const UseSpeechSynthesis = () => {
 			console.log(ev)
 		},
 	});
-	const [form, setForm] = useState<{ text: string, voice: string, lang: string, rate: string, pitch: string }>({ text: "", voice: "", lang: "", rate: "1", pitch: "1" });
+	const [form, setForm] = useState<{ text: string, volume: string, voice: string, lang: string, rate: string, pitch: string }>({ text: "", volume: "0.1", voice: "", lang: "", rate: "1", pitch: "1" });
 
 	if (!state.isSupported) {
 		return <div style={{ display: "flex", justifyContent: "center" }}>
@@ -40,13 +40,17 @@ export const UseSpeechSynthesis = () => {
 			<select value={form.lang} onChange={e => setForm(f => ({ ...f, lang: e.target.value }))} disabled={state.status === "speaking"}>
 				<>
 					{
-						["it-IT", "en-US", "en-GB", "de-DE", "es-ES", "fr-FR"].map(el => (
+						["en-US", "it-IT", "en-GB", "de-DE", "es-ES", "fr-FR"].map(el => (
 							<option key={el} value={el}>{`${el}`}</option>
 						))
 					}
 				</>
 			</select>
 		</div>
+		<div>
+			<label htmlFor="volume">Volume</label>
+			<input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value={form.volume} onChange={e => setForm(f => ({...f, volume: e.target.value}))} disabled={state.status === "speaking"}/>
+		</div>
 		<div>
 			<label htmlFor="range">Rate</label>
 			<input type="range" id="range" name="range" min="0.1" max="10" step="0.1" value={form.rate} onChange={e => setForm(f => ({...f, rate: e.target.value}))} disabled={state.status === "speaking"}/>
@@ -63,13 +67,31 @@ export const UseSpeechSynthesis = () => {
 						text: form.text,
 						lang: form.lang as LanguageBCP47Tags,
 						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
+						volume: Number(form.volume),
 						rate: Number(form.rate),
 						pitch: Number(form.pitch),
 					})
 				}}
+				disabled={state.status === "paused"}
 			>
 				Speak
 			</button>
+			<button
+				type="button"
+				onClick={() => {
+					speak({
+						text: form.text,
+						lang: form.lang as LanguageBCP47Tags,
+						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
+						volume: Number(form.volume),
+						rate: Number(form.rate),
+						pitch: Number(form.pitch),
+						startImmediatly: true
+					})
+				}}
+			>
+				Speak immediatly
+			</button>
 			<button
 				type="button"
 				onClick={() => {
diff --git a/apps/react-tools-demo/src/markdown/useResponsive.md b/apps/react-tools-demo/src/markdown/useResponsive.md
@@ -24,17 +24,17 @@ export const UseResponsive = () => {
 ## API
 
 ```tsx
-useResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } | { [s in useResponsiveKeys<T>]: boolean }
+useResponsive<T extends UseResponsiveKeys>(config?: UseResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } | { [s in UseResponsiveKeys<T>]: boolean }
 ```
 
 > ### Params
 >
-> - __config?__: _useResponsiveBreakpoints_  
+> - __config?__: _UseResponsiveBreakpoints_  
 custom breakpoint object.
 >
 
 > ### Returns
 >
 > __breakpoint key__: returns the __size key__ of the __config__, parameter if passed otherwise  __default config__, corresponding to the size of the window.
-> - _keyof useResponsiveBreakpoints_  
+> - _keyof UseResponsiveBreakpoints_  
 >
diff --git a/apps/react-tools-demo/src/markdown/useSpeechSynthesis.md b/apps/react-tools-demo/src/markdown/useSpeechSynthesis.md
@@ -10,7 +10,7 @@ export const UseSpeechSynthesis = () => {
 			console.log(ev)
 		},
 	});
-	const [form, setForm] = useState<{ text: string, voice: string, lang: string, rate: string, pitch: string }>({ text: "", voice: "", lang: "", rate: "1", pitch: "1" });
+	const [form, setForm] = useState<{ text: string, volume: string, voice: string, lang: string, rate: string, pitch: string }>({ text: "", volume: "0.1", voice: "", lang: "", rate: "1", pitch: "1" });
 
 	if (!state.isSupported) {
 		return <div style={{ display: "flex", justifyContent: "center" }}>
@@ -40,13 +40,17 @@ export const UseSpeechSynthesis = () => {
 			<select value={form.lang} onChange={e => setForm(f => ({ ...f, lang: e.target.value }))} disabled={state.status === "speaking"}>
 				<>
 					{
-						["it-IT", "en-US", "en-GB", "de-DE", "es-ES", "fr-FR"].map(el => (
+						["en-US", "it-IT", "en-GB", "de-DE", "es-ES", "fr-FR"].map(el => (
 							<option key={el} value={el}>{`${el}`}</option>
 						))
 					}
 				</>
 			</select>
 		</div>
+		<div>
+			<label htmlFor="volume">Volume</label>
+			<input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value={form.volume} onChange={e => setForm(f => ({...f, volume: e.target.value}))} disabled={state.status === "speaking"}/>
+		</div>
 		<div>
 			<label htmlFor="range">Rate</label>
 			<input type="range" id="range" name="range" min="0.1" max="10" step="0.1" value={form.rate} onChange={e => setForm(f => ({...f, rate: e.target.value}))} disabled={state.status === "speaking"}/>
@@ -63,13 +67,31 @@ export const UseSpeechSynthesis = () => {
 						text: form.text,
 						lang: form.lang as LanguageBCP47Tags,
 						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
+						volume: Number(form.volume),
 						rate: Number(form.rate),
 						pitch: Number(form.pitch),
 					})
 				}}
+				disabled={state.status === "paused"}
 			>
 				Speak
 			</button>
+			<button
+				type="button"
+				onClick={() => {
+					speak({
+						text: form.text,
+						lang: form.lang as LanguageBCP47Tags,
+						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
+						volume: Number(form.volume),
+						rate: Number(form.rate),
+						pitch: Number(form.pitch),
+						startImmediatly: true
+					})
+				}}
+			>
+				Speak immediatly
+			</button>
 			<button
 				type="button"
 				onClick={() => {
@@ -123,7 +145,7 @@ function that will be executed when _end_ event is fired.
 > - __opts.onCancel?__: _SpeechSynthesisonCancel_  
 function that will be executed when _cancel_ event is fired.
 > - __opts.lang?__: _LanguageBCP47Tags_  
-[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang.
+[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang).
 > - __opts.pitch?__: _SpeechSynthesisUtterance["pitch"]_  
 [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/pitch).
 > - __opts.rate?__: _SpeechSynthesisUtterance["rate"]_  
@@ -139,7 +161,8 @@ function that will be executed when _cancel_ event is fired.
 > __return__:  _ReturnType<UseSpeechSynthesis>_  
 > -  __state__: object with these properties:
 > 		- _isSupported_: Returns a boolean value indicating SpeechSynthesis availability.
-> 		- _status_: Returns the current status of SpeechSynthesis.
+> 		- _status_: Returns the current status of SpeechSynthesis between: _ready_ _speaking_ _paused_ _error_ _end_ and _unavailable_.
+> 		- _hasPending_: Returns a boolean indicating the presence of texts to speech.
 > 		- _voices_: Returns the list of available voices.
 > -  __speak__: Function to start speaking.
 > -  __pause__: Function to keep in pause speaking.
diff --git a/packages/react-tools/src/hooks/useResponsive.ts b/packages/react-tools/src/hooks/useResponsive.ts
@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useRef } from "react";
 import { useSyncExternalStore } from ".";
-import { useResponsiveBreakpoints, useResponsiveKeys } from "../models/useResponsive.model";
+import { UseResponsiveBreakpoints, UseResponsiveKeys } from "../models";
 
 const listeners = new Set<() => void>();
 
 const handler = () => listeners.forEach(l => l());
 
-const defaultConfig: useResponsiveBreakpoints<"xs" | "sm" | "md" | "lg" | "xl"> = {
+const defaultConfig: UseResponsiveBreakpoints<"xs" | "sm" | "md" | "lg" | "xl"> = {
 	xs: {
 		value: 576,
 		condition: "<"
@@ -29,7 +29,7 @@ const defaultConfig: useResponsiveBreakpoints<"xs" | "sm" | "md" | "lg" | "xl">
 	}
 };
 
-function calcResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreakpoints<T>): { [s in keyof typeof defaultConfig]: boolean } | { [s in useResponsiveKeys<T>]: boolean } {
+function calcResponsive<T extends UseResponsiveKeys>(config?: UseResponsiveBreakpoints<T>): { [s in keyof typeof defaultConfig]: boolean } | { [s in UseResponsiveKeys<T>]: boolean } {
 	const width = window.innerWidth;
 	const conf = {};
 	const target = config ?? defaultConfig;
@@ -41,7 +41,7 @@ function calcResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreak
 			Reflect.set(conf, key, eval(`${width}${condition}${value}`) as boolean);
 		}
 	}
-	return conf as typeof config extends undefined ? { [k in keyof typeof defaultConfig]: boolean } : { [k in useResponsiveKeys<T>]: boolean };
+	return conf as typeof config extends undefined ? { [k in keyof typeof defaultConfig]: boolean } : { [k in UseResponsiveKeys<T>]: boolean };
 }
 
 /**
@@ -52,12 +52,12 @@ function calcResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreak
  * - md: { value: 768, condition: ">=" }
  * - lg: { value: 992, condition: ">=" }
  * - xl: { value: 1200, condition: ">=" }
- * @param {useResponsiveBreakpoints} [config] - custom breakpoint object.
- * @returns {keyof useResponsiveBreakpoints} breakpoint key - returns the __size key__ of the __config__, parameter if passed otherwise  __default config__, corresponding to the size of the window.
+ * @param {UseResponsiveBreakpoints} [config] - custom breakpoint object.
+ * @returns {keyof UseResponsiveBreakpoints} breakpoint key - returns the __size key__ of the __config__, parameter if passed otherwise  __default config__, corresponding to the size of the window.
  */
 function useResponsive(config?: undefined): { [s in (keyof typeof defaultConfig)]: boolean };
-function useResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreakpoints<T>): { [s in useResponsiveKeys<T>]: boolean };
-function useResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } | { [s in useResponsiveKeys<T>]: boolean } {
+function useResponsive<T extends UseResponsiveKeys>(config?: UseResponsiveBreakpoints<T>): { [s in UseResponsiveKeys<T>]: boolean };
+function useResponsive<T extends UseResponsiveKeys>(config?: UseResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } | { [s in UseResponsiveKeys<T>]: boolean } {
 	const configCache = useRef(() => {
 		if (config === undefined) {
 			return calcResponsive(defaultConfig);
diff --git a/packages/react-tools/src/hooks/useSpeechSynthesis.ts b/packages/react-tools/src/hooks/useSpeechSynthesis.ts
@@ -14,15 +14,16 @@ import { UseSpeechSynthesis, SpeechSynthesisSpeakParam, UseSpeechSynthesisProps
  * @param {SpeechSynthesisUtterance["onerror"]} [opts.onError] - function that will be executed when _error_ event is fired.
  * @param {SpeechSynthesisUtterance["onend"]} [opts.onEnd] - function that will be executed when _end_ event is fired.
  * @param {SpeechSynthesisonCancel} [opts.onCancel] - function that will be executed when _cancel_ event is fired.
- * @param {LanguageBCP47Tags} [opts.lang] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang.
+ * @param {LanguageBCP47Tags} [opts.lang] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang).
  * @param {SpeechSynthesisUtterance["pitch"]} [opts.pitch] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/pitch).
  * @param {SpeechSynthesisUtterance["rate"]} [opts.rate] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/rate).
  * @param {SpeechSynthesisUtterance["voice"]} [opts.voice] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/voice).
  * @param {SpeechSynthesisUtterance["volume"]} [opts.volume] - [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/volume).
  * @returns {ReturnType<UseSpeechSynthesis>} return - Object with these properties:
  * -  __state__: object with these properties:
  * 		- _isSupported_: Returns a boolean value indicating SpeechSynthesis availability.
- * 		- _status_: Returns the current status of SpeechSynthesis.
+ * 		- _status_: Returns the current status of SpeechSynthesis between: _ready_ _speaking_ _paused_ _error_ _end_ and _unavailable_.
+ * 		- _hasPending_: Returns a boolean indicating the presence of texts to speech.
  * 		- _voices_: Returns the list of available voices.
  * -  __speak__: Function to start speaking.
  * -  __pause__: Function to keep in pause speaking.
@@ -35,32 +36,36 @@ export const useSpeechSynthesis = (opts?: UseSpeechSynthesisProps): ReturnType<U
 	const synth = useRef(window && (window as any).speechSynthesis as SpeechSynthesis);
 
 	const notifRef = useRef<() => void>();
-	const error = useRef(false);
+	const status = useRef<ReturnType<UseSpeechSynthesis>["state"]["status"]>(isSupported ? "ready" : "unavailable");
 
 	const onStart = useRef<(handler?: UseSpeechSynthesisProps["onStart"]) => SpeechSynthesisUtterance["onstart"]>((handler) => {
 		return (evt: SpeechSynthesisEvent) => {
-			error.current = false;
+			status.current = "speaking";
 			notifRef.current && notifRef.current();
 			handler && handler.call(evt.utterance, evt);
 		}
 	});
 
 	const onPause = useRef<(handler?: UseSpeechSynthesisProps["onPause"]) => SpeechSynthesisUtterance["onpause"]>((handler) => {
 		return (evt: SpeechSynthesisEvent) => {
+			status.current = "paused";
 			notifRef.current && notifRef.current();
 			handler && handler.call(evt.utterance, evt);
 		}
 	});
 
 	const onResume = useRef<(handler?: UseSpeechSynthesisProps["onResume"]) => SpeechSynthesisUtterance["onresume"]>((handler) => {
 		return (evt: SpeechSynthesisEvent) => {
+			status.current = "speaking";
 			notifRef.current && notifRef.current();
 			handler && handler.call(evt.utterance, evt);
 		}
 	});
 
 	const onEnd = useRef<(handler?: UseSpeechSynthesisProps["onEnd"]) => SpeechSynthesisUtterance["onend"]>((handler) => {
 		return (evt: SpeechSynthesisEvent) => {
+			status.current === "paused" && synth.current.cancel();
+			status.current = "end";
 			notifRef.current && notifRef.current();
 			handler && handler.call(evt.utterance, evt);
 		}
@@ -69,10 +74,11 @@ export const useSpeechSynthesis = (opts?: UseSpeechSynthesisProps): ReturnType<U
 	const onError = useRef<(handler?: UseSpeechSynthesisProps["onError"]) => SpeechSynthesisUtterance["onerror"]>((handler) => {
 		return (evt: SpeechSynthesisErrorEvent) => {
 			if (opts?.onCancel && ["canceled", "interrupted"].includes(evt.error)) {
+				status.current = "ready";
 				const { charIndex, charLength, elapsedTime, utterance} = evt;
 				opts.onCancel.call(evt.utterance, { charIndex, charLength, elapsedTime, utterance, name: "oncancel" })
 			} else {
-				error.current = true;
+				status.current = "error";
 				handler && handler.call(evt.utterance, evt);
 			}
 			notifRef.current && notifRef.current();
@@ -105,18 +111,18 @@ export const useSpeechSynthesis = (opts?: UseSpeechSynthesisProps): ReturnType<U
 		!!onBoundaryHandler && (utterance.onboundary = onBoundaryHandler);
 		!!onMarkHandler && (utterance.onmark = onMarkHandler);
 
-		if (synth.current.paused || rest.startImmediatly) {
+		if (status.current === "paused" || rest.startImmediatly) {
 			synth.current.cancel();
 		}
 
-		!synth.current.speaking && opts?.onSpeak && opts?.onSpeak();
+		["ready", "end", "error"].includes(status.current) && opts?.onSpeak && opts?.onSpeak();
 
 		synth.current.speak(utterance);
 	});
 
-	const pause = useRef(() => isSupported.current && synth.current.speaking && synth.current.pause());
+	const pause = useRef(() => isSupported.current && status.current === "speaking" && synth.current.pause());
 
-	const resume = useRef(() => isSupported.current && synth.current.paused && synth.current.resume());
+	const resume = useRef(() => isSupported.current && status.current === "paused" && synth.current.resume());
 
 	const cancel = useRef(() => isSupported.current && synth.current.cancel());
 
@@ -133,19 +139,22 @@ export const useSpeechSynthesis = (opts?: UseSpeechSynthesisProps): ReturnType<U
 		useMemo(() => {
 			let cached:ReturnType<UseSpeechSynthesis>["state"] = {
 				isSupported: isSupported.current,
-				status: isSupported.current ? synth.current.speaking ? "speaking" : synth.current.paused ? "paused" : error.current ? "error" : synth.current.pending ? "pending" : "end" : "unavailable",
+				status: status.current,
+				hasPending: isSupported.current ? synth.current.pending : false,
 				voices: isSupported.current ? synth.current.getVoices() : null,
 			}
 
 			return () => {
 				const current = {
-					status: isSupported.current ? synth.current.speaking ? "speaking" : synth.current.paused ? "paused" : error.current ? "error" : synth.current.pending ? "pending" : "end" : "unavailable",
+					status: status.current,
+					hasPending: isSupported.current ? synth.current.pending : false,
 					voices: isSupported.current ? synth.current.getVoices() : null,
 				}
-				if (current.status !== cached.status || current.voices?.length !== cached.voices?.length) {
+				if (current.status !== cached.status || current.hasPending !== cached.hasPending || current.voices?.length !== cached.voices?.length) {
 					cached = {
 						isSupported: isSupported.current,
 						status: current.status as typeof cached["status"],
+						hasPending: current.hasPending,
 						voices: current.voices
 					}
 				}
diff --git a/packages/react-tools/src/index.ts b/packages/react-tools/src/index.ts
@@ -6,8 +6,8 @@ export type {
 	UseScriptStatus,
 	UseScript,
 	TextSelection,
-	useResponsiveKeys,
-	useResponsiveBreakpoints,
+	UseResponsiveKeys,
+	UseResponsiveBreakpoints,
 	ConnectionState,
 	BatteryStatus,
 	GeoLocationObject,
diff --git a/packages/react-tools/src/models/index.ts b/packages/react-tools/src/models/index.ts
@@ -1,7 +1,7 @@
 export type { DependencyListTyped, CompareFn, ArrayMinLength1, LanguageBCP47Tags } from "./common.model";
 export type { UseScriptProps, UseScript, UseScriptStatus } from './useScript.model';
 export type { TextSelection } from './useTextSelection.model';
-export type { useResponsiveKeys, useResponsiveBreakpoints } from './useResponsive.model';
+export type { UseResponsiveKeys, UseResponsiveBreakpoints } from './useResponsive.model';
 export type { ConnectionState } from './useNetwork.model';
 export type { BatteryStatus } from './useBattery.model';
 export type { GeoLocationObject } from './useGeolocation.model';
diff --git a/packages/react-tools/src/models/useResponsive.model.ts b/packages/react-tools/src/models/useResponsive.model.ts
@@ -1,7 +1,7 @@
-type useResponsiveKeysType = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+type UseResponsiveKeysType = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
 
-export type useResponsiveKeys<T extends useResponsiveKeysType = useResponsiveKeysType> = T extends useResponsiveKeysType ? Extract<useResponsiveKeysType, T> : never;
+export type UseResponsiveKeys<T extends UseResponsiveKeysType = UseResponsiveKeysType> = T extends UseResponsiveKeysType ? Extract<UseResponsiveKeysType, T> : never;
 
-export type useResponsiveBreakpoints<T extends useResponsiveKeys = useResponsiveKeys> = {
+export type UseResponsiveBreakpoints<T extends UseResponsiveKeys = UseResponsiveKeys> = {
 	[k in T]: number | { value: number, condition: "<" | "<=" | ">" | ">=" }
 }
diff --git a/packages/react-tools/src/models/useSpeechSynthesis.model.ts b/packages/react-tools/src/models/useSpeechSynthesis.model.ts
@@ -81,7 +81,9 @@ export interface UseSpeechSynthesis {
 			/**Returns a boolean value indicating SpeechSynthesis availability.*/
 			isSupported: boolean;
 			/**Returns the current status of SpeechSynthesis.*/
-			status: "speaking" | "paused" | "pending" | "error" | "end" | "unavailable";
+			status: "ready" | "speaking" | "paused" | "error" | "end" | "unavailable";
+			/**Returns a boolean indicating the presence of texts to speech.*/
+			hasPending: boolean;
 			/**Returns the list of available voices.*/
 			voices: SpeechSynthesisVoice[] | null;
 		},

Original file line number	Diff line number	Diff line change
`@@ -24,17 +24,17 @@ export const UseResponsive = () => {`
`24`	`24`	`## API`
`25`	`25`
`26`	`26`	```tsx
`27`		`-useResponsive<T extends useResponsiveKeys>(config?: useResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } \| { [s in useResponsiveKeys<T>]: boolean }`
	`27`	`+useResponsive<T extends UseResponsiveKeys>(config?: UseResponsiveBreakpoints<T>): { [s in (keyof typeof defaultConfig)]: boolean } \| { [s in UseResponsiveKeys<T>]: boolean }`
`28`	`28`	```
`29`	`29`
`30`	`30`	`> ### Params`
`31`	`31`	`>`
`32`		`-> - __config?__: _useResponsiveBreakpoints_`
	`32`	`+> - __config?__: _UseResponsiveBreakpoints_`
`33`	`33`	`custom breakpoint object.`
`34`	`34`	`>`
`35`	`35`
`36`	`36`	`> ### Returns`
`37`	`37`	`>`
`38`	`38`	`> __breakpoint key__: returns the __size key__ of the __config__, parameter if passed otherwise __default config__, corresponding to the size of the window.`
`39`		`-> - _keyof useResponsiveBreakpoints_`
	`39`	`+> - _keyof UseResponsiveBreakpoints_`
`40`	`40`	`>`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-type useResponsiveKeysType = "xxxs" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| "xxxl";`
	`1`	`+type UseResponsiveKeysType = "xxxs" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| "xxxl";`
`2`	`2`
`3`		`-export type useResponsiveKeys<T extends useResponsiveKeysType = useResponsiveKeysType> = T extends useResponsiveKeysType ? Extract<useResponsiveKeysType, T> : never;`
	`3`	`+export type UseResponsiveKeys<T extends UseResponsiveKeysType = UseResponsiveKeysType> = T extends UseResponsiveKeysType ? Extract<UseResponsiveKeysType, T> : never;`
`4`	`4`
`5`		`-export type useResponsiveBreakpoints<T extends useResponsiveKeys = useResponsiveKeys> = {`
	`5`	`+export type UseResponsiveBreakpoints<T extends UseResponsiveKeys = UseResponsiveKeys> = {`
`6`	`6`	`[k in T]: number \| { value: number, condition: "<" \| "<=" \| ">" \| ">=" }`
`7`	`7`	`}`