startx 0.1.5 → 0.2.0

package/packages/ui/src/components/custom/page-container.tsx

@@ -1,24 +1,24 @@
-import { type AllHTMLAttributes, forwardRef } from 'react';
-
-const PageContainer = forwardRef<HTMLButtonElement, AllHTMLAttributes<HTMLDivElement>>(
-	(
-		{
-			className,
-
-			...props
-		},
-		ref,
-	) => {
-		return (
-			<main
-				ref={ref}
-				{...props}
-				className={` px-4 py-4 gap-8 xs:px-8  md:px-16 lg:px-32  max-w-screen-2xl m-auto ${className} `}
-			>
-				<>{props.children}</>
-			</main>
-		);
-	},
-);
-PageContainer.displayName = 'PageContainer';
-export { PageContainer };
+import { type AllHTMLAttributes, forwardRef } from 'react';
+
+const PageContainer = forwardRef<HTMLButtonElement, AllHTMLAttributes<HTMLDivElement>>(
+	(
+		{
+			className,
+
+			...props
+		},
+		ref,
+	) => {
+		return (
+			<main
+				ref={ref}
+				{...props}
+				className={` px-4 py-4 gap-8 xs:px-8  md:px-16 lg:px-32  max-w-screen-2xl m-auto ${className} `}
+			>
+				<>{props.children}</>
+			</main>
+		);
+	},
+);
+PageContainer.displayName = 'PageContainer';
+export { PageContainer };

package/packages/ui/src/components/custom/simple-popover.tsx

@@ -1,29 +1,29 @@
-import type { ClassNameValue } from 'tailwind-merge';
-
-import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
-import { cn } from '../lib/utils';
-
-interface SimplePopoverProps {
-	children: React.ReactNode;
-	trigger: React.ReactNode;
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	className?: ClassNameValue;
-}
-
-export const SimplePopover = (props: SimplePopoverProps) => {
-	return (
-		<Popover open={props.open} onOpenChange={props.onOpenChange}>
-			<PopoverTrigger asChild>{props.trigger}</PopoverTrigger>
-			<PopoverContent
-				side={props.side}
-				sideOffset={props.sideOffset}
-				className={cn(props.className)}
-			>
-				{props.children}
-			</PopoverContent>
-		</Popover>
-	);
-};
+import type { ClassNameValue } from 'tailwind-merge';
+
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+import { cn } from '../lib/utils';
+
+interface SimplePopoverProps {
+	children: React.ReactNode;
+	trigger: React.ReactNode;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	sideOffset?: number;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	className?: ClassNameValue;
+}
+
+export const SimplePopover = (props: SimplePopoverProps) => {
+	return (
+		<Popover open={props.open} onOpenChange={props.onOpenChange}>
+			<PopoverTrigger asChild>{props.trigger}</PopoverTrigger>
+			<PopoverContent
+				side={props.side}
+				sideOffset={props.sideOffset}
+				className={cn(props.className)}
+			>
+				{props.children}
+			</PopoverContent>
+		</Popover>
+	);
+};

package/packages/ui/src/components/custom/switch-component.tsx

@@ -1,20 +1,20 @@
-import type React from 'react';
-
-export type SwitchCases<T extends string> = {
-	[key in T]?: React.ReactNode; // Mapping of cases with the type T
-};
-
-export type SwitchProps<T extends string> = {
-	value: T; // The value to match against the cases
-	cases: SwitchCases<T>; // Cases object with keys as possible values of type T
-	default?: React.ReactNode; // Default component if no case matches
-};
-
-function SwitchComponent<T extends string>(props: SwitchProps<T>) {
-	const { value, cases, default: defaultCase } = props;
-
-	// Render the component matching the value, or the default if none matches
-	return <>{cases[value] ?? defaultCase ?? <div></div>}</>;
-}
-
-export { SwitchComponent };
+import type React from 'react';
+
+export type SwitchCases<T extends string> = {
+	[key in T]?: React.ReactNode; // Mapping of cases with the type T
+};
+
+export type SwitchProps<T extends string> = {
+	value: T; // The value to match against the cases
+	cases: SwitchCases<T>; // Cases object with keys as possible values of type T
+	default?: React.ReactNode; // Default component if no case matches
+};
+
+function SwitchComponent<T extends string>(props: SwitchProps<T>) {
+	const { value, cases, default: defaultCase } = props;
+
+	// Render the component matching the value, or the default if none matches
+	return <>{cases[value] ?? defaultCase ?? <div></div>}</>;
+}
+
+export { SwitchComponent };

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;
+}