startx 0.1.5 → 0.1.6

package/packages/ui/src/components/custom/theme-provider.tsx

@@ -1,74 +1,74 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { Toaster } from 'sonner';
-type Theme = 'dark' | 'light' | 'system';
-
-type ThemeProviderProps = {
-	children: React.ReactNode;
-	defaultTheme?: Theme;
-	storageKey?: string;
-};
-
-type ThemeProviderState = {
-	theme: Theme;
-	setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-	theme: 'system',
-	setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export const ThemeProvider = ({
-	children,
-	defaultTheme = 'dark',
-	storageKey = 'vite-ui-theme',
-	...props
-}: ThemeProviderProps) => {
-	const [theme, setTheme] = useState<Theme>(
-		() =>
-			(typeof window !== 'undefined' && (localStorage.getItem(storageKey) as Theme)) ||
-			defaultTheme,
-	);
-
-	useEffect(() => {
-		const root = window.document.documentElement;
-
-		root.classList.remove('light', 'dark');
-
-		if (theme === 'system') {
-			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-				? 'dark'
-				: 'light';
-
-			root.classList.add(systemTheme);
-			return;
-		}
-
-		root.classList.add(theme);
-	}, [theme]);
-
-	const value = {
-		theme,
-		setTheme: (theme: Theme) => {
-			localStorage.setItem(storageKey, theme);
-			setTheme(theme);
-		},
-	};
-
-	return (
-		<ThemeProviderContext.Provider {...props} value={value}>
-			<Toaster richColors />
-			{children}
-		</ThemeProviderContext.Provider>
-	);
-};
-
-export const useTheme = () => {
-	const context = useContext(ThemeProviderContext);
-
-	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-	return context;
-};
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Toaster } from 'sonner';
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+	children: React.ReactNode;
+	defaultTheme?: Theme;
+	storageKey?: string;
+};
+
+type ThemeProviderState = {
+	theme: Theme;
+	setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+	theme: 'system',
+	setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export const ThemeProvider = ({
+	children,
+	defaultTheme = 'dark',
+	storageKey = 'vite-ui-theme',
+	...props
+}: ThemeProviderProps) => {
+	const [theme, setTheme] = useState<Theme>(
+		() =>
+			(typeof window !== 'undefined' && (localStorage.getItem(storageKey) as Theme)) ||
+			defaultTheme,
+	);
+
+	useEffect(() => {
+		const root = window.document.documentElement;
+
+		root.classList.remove('light', 'dark');
+
+		if (theme === 'system') {
+			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+				? 'dark'
+				: 'light';
+
+			root.classList.add(systemTheme);
+			return;
+		}
+
+		root.classList.add(theme);
+	}, [theme]);
+
+	const value = {
+		theme,
+		setTheme: (theme: Theme) => {
+			localStorage.setItem(storageKey, theme);
+			setTheme(theme);
+		},
+	};
+
+	return (
+		<ThemeProviderContext.Provider {...props} value={value}>
+			<Toaster richColors />
+			{children}
+		</ThemeProviderContext.Provider>
+	);
+};
+
+export const useTheme = () => {
+	const context = useContext(ThemeProviderContext);
+
+	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+	return context;
+};

package/packages/ui/src/components/hooks/event/use-click.tsx

@@ -1,39 +1,39 @@
-/* eslint-disable id-denylist */
-import { type RefObject, useEffect } from 'react';
-
-function useOutsideClick<T extends HTMLElement>(
-	ref: RefObject<T | null>,
-	callback: () => void,
-): void {
-	useEffect(() => {
-		const handleClickOrTouch = (event: Event) => {
-			if (ref.current && !ref.current.contains(event.target as Node)) {
-				callback();
-			}
-		};
-
-		document.addEventListener('mousedown', handleClickOrTouch);
-
-		return () => {
-			document.removeEventListener('mousedown', handleClickOrTouch);
-		};
-	}, [ref, callback]);
-}
-
-function useInsideClick<T extends HTMLElement>(ref: RefObject<T>, callback: () => void): void {
-	useEffect(() => {
-		const handleClickOrTouch = (event: Event) => {
-			if (ref.current && !ref.current.contains(event.target as Node)) {
-				callback();
-			}
-		};
-
-		document.addEventListener('mousedown', handleClickOrTouch);
-
-		return () => {
-			document.removeEventListener('mousedown', handleClickOrTouch);
-		};
-	}, [ref, callback]);
-}
-
-export { useInsideClick, useOutsideClick };
+/* eslint-disable id-denylist */
+import { type RefObject, useEffect } from 'react';
+
+function useOutsideClick<T extends HTMLElement>(
+	ref: RefObject<T | null>,
+	callback: () => void,
+): void {
+	useEffect(() => {
+		const handleClickOrTouch = (event: Event) => {
+			if (ref.current && !ref.current.contains(event.target as Node)) {
+				callback();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOrTouch);
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOrTouch);
+		};
+	}, [ref, callback]);
+}
+
+function useInsideClick<T extends HTMLElement>(ref: RefObject<T>, callback: () => void): void {
+	useEffect(() => {
+		const handleClickOrTouch = (event: Event) => {
+			if (ref.current && !ref.current.contains(event.target as Node)) {
+				callback();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOrTouch);
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOrTouch);
+		};
+	}, [ref, callback]);
+}
+
+export { useInsideClick, useOutsideClick };

package/packages/ui/src/components/hooks/time/useDebounce.tsx

@@ -1,21 +1,21 @@
-import { useState, useEffect } from 'react';
-
-function useDebounce<T>(value: T, delay: number): T {
-	const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-	useEffect(() => {
-		// Update debounced value after delay
-		const handler = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-
-		// Clear timeout on cleanup to prevent memory leaks
-		return () => {
-			clearTimeout(handler);
-		};
-	}, [value, delay]);
-
-	return debouncedValue;
-}
-
-export { useDebounce };
+import { useState, useEffect } from 'react';
+
+function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+	useEffect(() => {
+		// Update debounced value after delay
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		// Clear timeout on cleanup to prevent memory leaks
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}
+
+export { useDebounce };

package/packages/ui/src/components/hooks/time/useInterval.tsx

@@ -1,35 +1,35 @@
-/* eslint-disable id-denylist */
-import { useRef, useCallback, useEffect } from 'react';
-
-const useInterval = (callback: () => void, interval: number) => {
-	const intervalIdRef = useRef<number | null>(null);
-	const savedCallback = useRef<() => void>(null);
-
-	// Remember the latest callback.
-	useEffect(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-
-	const start = useCallback(() => {
-		if (intervalIdRef.current !== null) return; // Prevent multiple intervals
-		intervalIdRef.current = window.setInterval(() => {
-			if (savedCallback.current) savedCallback.current();
-		}, interval);
-	}, [interval]);
-
-	const clear = useCallback(() => {
-		if (intervalIdRef.current !== null) {
-			clearInterval(intervalIdRef.current);
-			intervalIdRef.current = null;
-		}
-	}, []);
-
-	// Clear interval on component unmount
-	useEffect(() => {
-		return () => clear();
-	}, [clear]);
-
-	return { start, clear };
-};
-
-export { useInterval };
+/* eslint-disable id-denylist */
+import { useRef, useCallback, useEffect } from 'react';
+
+const useInterval = (callback: () => void, interval: number) => {
+	const intervalIdRef = useRef<number | null>(null);
+	const savedCallback = useRef<() => void>(null);
+
+	// Remember the latest callback.
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+
+	const start = useCallback(() => {
+		if (intervalIdRef.current !== null) return; // Prevent multiple intervals
+		intervalIdRef.current = window.setInterval(() => {
+			if (savedCallback.current) savedCallback.current();
+		}, interval);
+	}, [interval]);
+
+	const clear = useCallback(() => {
+		if (intervalIdRef.current !== null) {
+			clearInterval(intervalIdRef.current);
+			intervalIdRef.current = null;
+		}
+	}, []);
+
+	// Clear interval on component unmount
+	useEffect(() => {
+		return () => clear();
+	}, [clear]);
+
+	return { start, clear };
+};
+
+export { useInterval };

package/packages/ui/src/components/hooks/time/useTimeout.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-
-export function useMediaQuery(query: string) {
-	const [value, setValue] = React.useState(false);
-
-	React.useEffect(() => {
-		function onChange(event: MediaQueryListEvent) {
-			setValue(event.matches);
-		}
-
-		const result = matchMedia(query);
-		result.addEventListener('change', onChange);
-		setValue(result.matches);
-
-		return () => result.removeEventListener('change', onChange);
-	}, [query]);
-
-	return value;
-}
+import * as React from 'react';
+
+export function useMediaQuery(query: string) {
+	const [value, setValue] = React.useState(false);
+
+	React.useEffect(() => {
+		function onChange(event: MediaQueryListEvent) {
+			setValue(event.matches);
+		}
+
+		const result = matchMedia(query);
+		result.addEventListener('change', onChange);
+		setValue(result.matches);
+
+		return () => result.removeEventListener('change', onChange);
+	}, [query]);
+
+	return value;
+}

package/packages/ui/src/components/hooks/time/useTimer.tsx

@@ -1,51 +1,51 @@
-import { useState, useRef, useEffect } from "react";
-
-type TimerHook = {
-  counter: number;
-  start: () => void;
-  reset: () => void;
-  clear: () => void;
-};
-
-export function useTimer(initialSeconds: number): TimerHook {
-  const [counter, setCounter] = useState(initialSeconds);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    // Cleanup on component unmount or when counter changes
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  const start = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
-    timerRef.current = setTimeout(() => {
-      setCounter((prev) => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-  };
-
-  const reset = () => {
-    setCounter(initialSeconds);
-    clear();
-  };
-
-  const clear = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
-
-  useEffect(() => {
-    if (counter > 0) {
-      start();
-    }
-  }, [counter]);
-
-  return { counter, start, reset, clear };
-}
+import { useState, useRef, useEffect } from "react";
+
+type TimerHook = {
+  counter: number;
+  start: () => void;
+  reset: () => void;
+  clear: () => void;
+};
+
+export function useTimer(initialSeconds: number): TimerHook {
+  const [counter, setCounter] = useState(initialSeconds);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Cleanup on component unmount or when counter changes
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const start = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
+      setCounter((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+  };
+
+  const reset = () => {
+    setCounter(initialSeconds);
+    clear();
+  };
+
+  const clear = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+
+  useEffect(() => {
+    if (counter > 0) {
+      start();
+    }
+  }, [counter]);
+
+  return { counter, start, reset, clear };
+}

package/packages/ui/src/components/hooks/use-media-query.tsx

@@ -1,19 +1,19 @@
-import * as React from "react";
-
-export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false);
-
-  React.useEffect(() => {
-    function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches);
-    }
-
-    const result = matchMedia(query);
-    result.addEventListener("change", onChange);
-    setValue(result.matches);
-
-    return () => result.removeEventListener("change", onChange);
-  }, [query]);
-
-  return value;
-}
+import * as React from "react";
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+
+  return value;
+}

package/packages/ui/src/components/hooks/use-persistent-storage.tsx

@@ -1,52 +1,52 @@
-'use client';
-import { useState, useEffect, type Dispatch, type SetStateAction } from 'react';
-
-export function useLocalStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>] {
-	// Retrieve stored value from localStorage, or use initialValue if none is found
-	const getStoredValue = (): T => {
-		// if (typeof window === "undefined") return initialValue;
-		const storedValue = localStorage.getItem(key);
-		if (storedValue !== null) {
-			try {
-				return JSON.parse(storedValue) as T;
-			} catch (error) {
-				console.error('Error parsing stored value:', error);
-			}
-		}
-		return initialValue;
-	};
-
-	const [value, setValue] = useState<T>(getStoredValue);
-
-	useEffect(() => {
-		localStorage.setItem(key, JSON.stringify(value));
-	}, [key, value]);
-
-	return [value, setValue];
-}
-
-export function useSessionStorage<T>(
-	key: string,
-	initialValue: T,
-): [T, Dispatch<SetStateAction<T>>] {
-	// Retrieve stored value from localStorage, or use initialValue if none is found
-	const getStoredValue = (): T => {
-		const storedValue = sessionStorage.getItem(key);
-		if (storedValue !== null) {
-			try {
-				return JSON.parse(storedValue) as T;
-			} catch (error) {
-				console.error('Error parsing stored value:', error);
-			}
-		}
-		return initialValue;
-	};
-
-	const [value, setValue] = useState<T>(getStoredValue);
-
-	useEffect(() => {
-		sessionStorage.setItem(key, JSON.stringify(value));
-	}, [key, value]);
-
-	return [value, setValue];
-}
+'use client';
+import { useState, useEffect, type Dispatch, type SetStateAction } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>] {
+	// Retrieve stored value from localStorage, or use initialValue if none is found
+	const getStoredValue = (): T => {
+		// if (typeof window === "undefined") return initialValue;
+		const storedValue = localStorage.getItem(key);
+		if (storedValue !== null) {
+			try {
+				return JSON.parse(storedValue) as T;
+			} catch (error) {
+				console.error('Error parsing stored value:', error);
+			}
+		}
+		return initialValue;
+	};
+
+	const [value, setValue] = useState<T>(getStoredValue);
+
+	useEffect(() => {
+		localStorage.setItem(key, JSON.stringify(value));
+	}, [key, value]);
+
+	return [value, setValue];
+}
+
+export function useSessionStorage<T>(
+	key: string,
+	initialValue: T,
+): [T, Dispatch<SetStateAction<T>>] {
+	// Retrieve stored value from localStorage, or use initialValue if none is found
+	const getStoredValue = (): T => {
+		const storedValue = sessionStorage.getItem(key);
+		if (storedValue !== null) {
+			try {
+				return JSON.parse(storedValue) as T;
+			} catch (error) {
+				console.error('Error parsing stored value:', error);
+			}
+		}
+		return initialValue;
+	};
+
+	const [value, setValue] = useState<T>(getStoredValue);
+
+	useEffect(() => {
+		sessionStorage.setItem(key, JSON.stringify(value));
+	}, [key, value]);
+
+	return [value, setValue];
+}