startx 0.0.1

package/packages/ui/src/components/extensions/carousel.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import type { EmblaOptionsType } from 'embla-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ChevronRightIcon, ChevronLeftIcon } from 'lucide-react';
+import type React from 'react';
+import { forwardRef, useCallback, useContext, useEffect, useState, createContext } from 'react';
+
+import { Button } from '@/components/ui/button';
+
+import { cn } from '../lib/utils';
+
+type CarouselContextProps = {
+	carouselOptions?: EmblaOptionsType;
+	orientation?: 'vertical' | 'horizontal';
+	plugins?: Parameters<typeof useEmblaCarousel>[1];
+};
+
+type DirectionOption = 'ltr' | 'rtl' | undefined;
+
+type CarouselContextType = {
+	emblaMainApi: ReturnType<typeof useEmblaCarousel>[1];
+	mainRef: ReturnType<typeof useEmblaCarousel>[0];
+	thumbsRef: ReturnType<typeof useEmblaCarousel>[0];
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: boolean;
+	canScrollPrev: boolean;
+	activeIndex: number;
+	onThumbClick: (index: number) => void;
+	handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+	orientation: 'vertical' | 'horizontal';
+	direction: DirectionOption;
+} & CarouselContextProps;
+
+const useCarousel = () => {
+	const context = useContext(CarouselContext);
+	if (!context) {
+		throw new Error('useCarousel must be used within a CarouselProvider');
+	}
+	return context;
+};
+
+const CarouselContext = createContext<CarouselContextType | null>(null);
+
+/**
+ * Carousel Docs: {@link: https://shadcn-extension.vercel.app/docs/carousel}
+ */
+
+const Carousel = forwardRef<
+	HTMLDivElement,
+	CarouselContextProps & React.HTMLAttributes<HTMLDivElement> & {dir: DirectionOption}
+>(
+	(
+		{ carouselOptions, orientation = 'horizontal', dir, plugins, children, className, ...props },
+		ref,
+	) => {
+		const [emblaMainRef, emblaMainApi] = useEmblaCarousel(
+			{
+				...carouselOptions,
+				axis: orientation === 'vertical' ? 'y' : 'x',
+				direction: carouselOptions?.direction ?? (dir as DirectionOption),
+			},
+			plugins,
+		);
+
+		const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel(
+			{
+				...carouselOptions,
+				axis: orientation === 'vertical' ? 'y' : 'x',
+				direction: carouselOptions?.direction ?? (dir as DirectionOption),
+				containScroll: 'keepSnaps',
+				dragFree: true,
+			},
+			plugins,
+		);
+
+		const [canScrollPrev, setCanScrollPrev] = useState<boolean>(false);
+		const [canScrollNext, setCanScrollNext] = useState<boolean>(false);
+		const [activeIndex, setActiveIndex] = useState<number>(0);
+
+		const ScrollNext = useCallback(() => {
+			if (!emblaMainApi) return;
+			emblaMainApi.scrollNext();
+		}, [emblaMainApi]);
+
+		const ScrollPrev = useCallback(() => {
+			if (!emblaMainApi) return;
+			emblaMainApi.scrollPrev();
+		}, [emblaMainApi]);
+
+		const direction = carouselOptions?.direction ?? (dir as DirectionOption);
+
+		const handleKeyDown = useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (!emblaMainApi) return;
+				switch (event.key) {
+					case 'ArrowLeft':
+						event.preventDefault();
+						if (orientation === 'horizontal') {
+							if (direction === 'rtl') {
+								ScrollNext();
+								return;
+							}
+							ScrollPrev();
+						}
+						break;
+					case 'ArrowRight':
+						event.preventDefault();
+						if (orientation === 'horizontal') {
+							if (direction === 'rtl') {
+								ScrollPrev();
+								return;
+							}
+							ScrollNext();
+						}
+						break;
+					case 'ArrowUp':
+						event.preventDefault();
+						if (orientation === 'vertical') {
+							ScrollPrev();
+						}
+						break;
+					case 'ArrowDown':
+						event.preventDefault();
+						if (orientation === 'vertical') {
+							ScrollNext();
+						}
+						break;
+				}
+			},
+			[emblaMainApi, orientation, direction],
+		);
+
+		const onThumbClick = useCallback(
+			(index: number) => {
+				if (!emblaMainApi || !emblaThumbsApi) return;
+				emblaMainApi.scrollTo(index);
+			},
+			[emblaMainApi, emblaThumbsApi],
+		);
+
+		const onSelect = useCallback(() => {
+			if (!emblaMainApi || !emblaThumbsApi) return;
+			const selected = emblaMainApi.selectedScrollSnap();
+			setActiveIndex(selected);
+			emblaThumbsApi.scrollTo(selected);
+			setCanScrollPrev(emblaMainApi.canScrollPrev());
+			setCanScrollNext(emblaMainApi.canScrollNext());
+		}, [emblaMainApi, emblaThumbsApi]);
+
+		useEffect(() => {
+			if (!emblaMainApi) return;
+			onSelect();
+			emblaMainApi.on('select', onSelect);
+			emblaMainApi.on('reInit', onSelect);
+
+			return () => {
+				emblaMainApi.off('select', onSelect);
+			};
+		}, [emblaMainApi, onSelect]);
+
+		return (
+			<CarouselContext.Provider
+				value={{
+					emblaMainApi,
+					mainRef: emblaMainRef,
+					thumbsRef: emblaThumbsRef,
+					scrollNext: ScrollNext,
+					scrollPrev: ScrollPrev,
+					canScrollNext,
+					canScrollPrev,
+					activeIndex,
+					onThumbClick,
+					handleKeyDown,
+					carouselOptions,
+					direction,
+					orientation: orientation || (carouselOptions?.axis === 'y' ? 'vertical' : 'horizontal'),
+				}}
+			>
+				<div
+					{...props}
+					// tabIndex={0}
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn('grid gap-2 w-full relative focus:outline-none', className)}
+					dir={direction}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		);
+	},
+);
+
+Carousel.displayName = 'Carousel';
+
+const CarouselMainContainer = forwardRef<HTMLDivElement, {
+} & React.HTMLAttributes<HTMLDivElement>>(
+	({ className, children, ...props }, ref) => {
+		const { mainRef, orientation, direction } = useCarousel();
+
+		return (
+			<div {...props} ref={mainRef} className="overflow-hidden" dir={direction}>
+				<div
+					ref={ref}
+					className={cn('flex', `${orientation === 'vertical' ? 'flex-col' : ''}`, className)}
+				>
+					{children}
+				</div>
+			</div>
+		);
+	},
+);
+
+CarouselMainContainer.displayName = 'CarouselMainContainer';
+
+const CarouselThumbsContainer = forwardRef<
+	HTMLDivElement,
+	{} & React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+	const { thumbsRef, orientation, direction } = useCarousel();
+
+	return (
+		<div {...props} ref={thumbsRef} className="overflow-hidden" dir={direction}>
+			<div
+				ref={ref}
+				className={cn('flex', `${orientation === 'vertical' ? 'flex-col' : ''}`, className)}
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+
+CarouselThumbsContainer.displayName = 'CarouselThumbsContainer';
+
+const SliderMainItem = forwardRef<HTMLDivElement, {} & React.HTMLAttributes<HTMLDivElement>>(
+	({ className, children, ...props }, ref) => {
+		const { orientation } = useCarousel();
+		return (
+			<div
+				{...props}
+				ref={ref}
+				className={cn(
+					`min-w-0 shrink-0 grow-0 basis-full bg-background p-1 ${
+						orientation === 'vertical' ? 'pb-1' : 'pr-1'
+					}`,
+					className,
+				)}
+			>
+				{children}
+			</div>
+		);
+	},
+);
+
+SliderMainItem.displayName = 'SliderMainItem';
+
+const SliderThumbItem = forwardRef<
+	HTMLDivElement,
+	{
+		index: number;
+	} & React.HTMLAttributes<HTMLDivElement>
+>(({ className, index, children, ...props }, ref) => {
+	const { activeIndex, onThumbClick, orientation } = useCarousel();
+	const isSlideActive = activeIndex === index;
+	return (
+		<div
+			{...props}
+			ref={ref}
+			onClick={() => onThumbClick(index)}
+			className={cn(
+				'flex min-w-0 shrink-0 grow-0 basis-1/3 bg-background p-1',
+				`${orientation === 'vertical' ? 'pb-1' : 'pr-1'}`,
+				className,
+			)}
+		>
+			<div
+				className={`relative aspect-square h-20 w-full opacity-50 rounded-md transition-opacity ${
+					isSlideActive ? '!opacity-100' : ''
+				}`}
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+
+SliderThumbItem.displayName = 'SliderThumbItem';
+
+const CarouselIndicator = forwardRef<
+	HTMLButtonElement,
+	{ index: number } & React.ComponentProps<typeof Button>
+>(({ className, index, children, ...props }, ref) => {
+	const { activeIndex, onThumbClick } = useCarousel();
+	const isSlideActive = activeIndex === index;
+	return (
+		<Button
+			ref={ref}
+			size="icon"
+			className={cn(
+				'h-1 w-6 rounded-full',
+				"data-[active='false']:bg-primary/50 data-[active='true']:bg-primary",
+				className,
+			)}
+			data-active={isSlideActive}
+			onClick={() => onThumbClick(index)}
+			{...props}
+		>
+			<span className="sr-only">slide {index + 1} </span>
+		</Button>
+	);
+});
+
+CarouselIndicator.displayName = 'CarouselIndicator';
+
+const CarouselPrevious = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+	({ className, dir, variant = 'outline', size = 'icon', ...props }, ref) => {
+		const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, orientation, direction } =
+			useCarousel();
+
+		const scroll = direction === 'rtl' ? scrollNext : scrollPrev;
+		const canScroll = direction === 'rtl' ? canScrollNext : canScrollPrev;
+		return (
+			<Button
+				type="button"
+				ref={ref}
+				variant={variant}
+				size={size}
+				className={cn(
+					'absolute h-6 w-6 rounded-full z-10',
+					orientation === 'vertical'
+						? '-top-2 left-1/2 -translate-x-1/2 rotate-90'
+						: '-left-2 top-1/2 -translate-y-1/2',
+					className,
+				)}
+				onClick={scroll}
+				disabled={!canScroll}
+				{...props}
+			>
+				<ChevronLeftIcon className="h-4 w-4" />
+				<span className="sr-only">Previous slide</span>
+			</Button>
+		);
+	},
+);
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+	({ className, dir, variant = 'outline', size = 'icon', ...props }, ref) => {
+		const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, orientation, direction } =
+			useCarousel();
+		const scroll = direction === 'rtl' ? scrollPrev : scrollNext;
+		const canScroll = direction === 'rtl' ? canScrollPrev : canScrollNext;
+		return (
+			<Button
+				type="button"
+				ref={ref}
+				variant={variant}
+				size={size}
+				className={cn(
+					'absolute h-6 w-6 rounded-full z-10',
+					orientation === 'vertical'
+						? '-bottom-2 left-1/2 -translate-x-1/2 rotate-90'
+						: '-right-2 top-1/2 -translate-y-1/2',
+					className,
+				)}
+				onClick={scroll}
+				disabled={!canScroll}
+				{...props}
+			>
+				<ChevronRightIcon className="h-4 w-4" />
+				<span className="sr-only">Next slide</span>
+			</Button>
+		);
+	},
+);
+
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+	Carousel,
+	CarouselMainContainer,
+	CarouselThumbsContainer,
+	SliderMainItem,
+	SliderThumbItem,
+	CarouselIndicator,
+	CarouselPrevious,
+	CarouselNext,
+	useCarousel,
+};

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

@@ -0,0 +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 };

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

@@ -0,0 +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 };

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

@@ -0,0 +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 };

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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 };
+}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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];
+}

package/packages/ui/src/components/hooks/use-update-effect.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { useEffect, useRef } from 'react';
+
+const useDidMountEffect = (func: React.EffectCallback, deps: React.DependencyList) => {
+	const didMount = useRef(false);
+
+	useEffect(() => {
+		if (didMount.current) func();
+		else didMount.current = true;
+	}, deps);
+};
+
+export { useDidMountEffect };

package/packages/ui/src/components/hooks/use-window-dimension.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+type WindowDimensions = {
+	width: number | undefined;
+	height: number | undefined;
+};
+
+const useWindowDimensions = (): WindowDimensions => {
+	const win = typeof window !== 'undefined' ? window : undefined;
+	const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
+		width: win && window?.innerWidth,
+		height: win && window?.innerHeight,
+	});
+	useEffect(() => {
+		function handleResize(): void {
+			setWindowDimensions({
+				width: window?.innerWidth,
+				height: window?.innerHeight,
+			});
+		}
+		handleResize();
+		window.addEventListener('resize', handleResize);
+		return (): void => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return windowDimensions;
+};
+
+export { useWindowDimensions };