startx 1.0.2 → 1.0.3

package/packages/ui/src/components/ui/spinner.tsx

@@ -1,16 +1,9 @@
-import { type HTMLProps, forwardRef } from 'react';
+import { Loader2Icon } from "lucide-react";
 
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
 
-export const Spinner = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
-	({ className, ...rest }, ref) => {
-		const spinnerClass = cn(
-			'animate-spin rounded-full border-2 border-current border-t-transparent h-4 w-4',
-			className,
-		);
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+	return <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />;
+}
 
-		return <div className={spinnerClass} ref={ref} {...rest} />;
-	},
-);
-
-Spinner.displayName = 'Spinner';
+export { Spinner };

package/packages/ui/src/components/ui/switch.tsx

@@ -1,25 +1,30 @@
-'use client';
+"use client";
 
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import type * as React from 'react';
+import { Switch as SwitchPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
 
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+	size?: "sm" | "default";
+}) {
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
+			data-size={size}
 			className={cn(
-				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-				className,
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+				className
 			)}
 			{...props}
 		>
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
-				className={cn(
-					'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-				)}
+				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
 			/>
 		</SwitchPrimitive.Root>
 	);

package/packages/ui/src/components/ui/table.tsx

@@ -1,116 +1,75 @@
 "use client";
 
-import type * as React from "react";
+import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "@repo/ui/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  );
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  );
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  );
+	return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+			{...props}
+		/>
+	);
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  );
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+	);
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/packages/ui/src/components/ui/tabs.tsx

@@ -1,28 +1,47 @@
-'use client';
+"use client";
 
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type * as React from 'react';
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
 
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
 	return (
 		<TabsPrimitive.Root
 			data-slot="tabs"
-			className={cn('flex flex-col gap-2', className)}
+			data-orientation={orientation}
+			className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
 			{...props}
 		/>
 	);
 }
 
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+const tabsListVariants = cva(
+	"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
 	return (
 		<TabsPrimitive.List
 			data-slot="tabs-list"
-			className={cn(
-				'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-				className,
-			)}
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
 			{...props}
 		/>
 	);
@@ -33,8 +52,11 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
 			className={cn(
-				"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
+				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+				className
 			)}
 			{...props}
 		/>
@@ -45,10 +67,10 @@ function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPr
 	return (
 		<TabsPrimitive.Content
 			data-slot="tabs-content"
-			className={cn('flex-1 outline-none', className)}
+			className={cn("flex-1 text-sm outline-none", className)}
 			{...props}
 		/>
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/packages/ui/src/components/ui/textarea.tsx

@@ -1,18 +1,18 @@
-import type * as React from "react";
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
 
-import { cn } from "../lib/utils";
-export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { Textarea };

package/packages/ui/src/components/ui/tooltip.tsx

@@ -1,30 +1,44 @@
-'use client';
+"use client";
 
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<TooltipPrimitive.Content
-		ref={ref}
-		sideOffset={sideOffset}
-		className={cn(
-			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			className,
-		)}
-		{...props}
-	/>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -1,10 +1,6 @@
-/* eslint-disable id-denylist */
-import { type RefObject, useEffect } from 'react';
+import { type RefObject, useEffect } from "react";
 
-function useOutsideClick<T extends HTMLElement>(
-	ref: RefObject<T | null>,
-	callback: () => void,
-): void {
+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)) {
@@ -12,10 +8,10 @@ function useOutsideClick<T extends HTMLElement>(
 			}
 		};
 
-		document.addEventListener('mousedown', handleClickOrTouch);
+		document.addEventListener("mousedown", handleClickOrTouch);
 
 		return () => {
-			document.removeEventListener('mousedown', handleClickOrTouch);
+			document.removeEventListener("mousedown", handleClickOrTouch);
 		};
 	}, [ref, callback]);
 }
@@ -28,10 +24,10 @@ function useInsideClick<T extends HTMLElement>(ref: RefObject<T>, callback: () =
 			}
 		};
 
-		document.addEventListener('mousedown', handleClickOrTouch);
+		document.addEventListener("mousedown", handleClickOrTouch);
 
 		return () => {
-			document.removeEventListener('mousedown', handleClickOrTouch);
+			document.removeEventListener("mousedown", handleClickOrTouch);
 		};
 	}, [ref, callback]);
 }

package/packages/ui/src/hooks/time/use-timer.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/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/hooks/use-mobile.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export function useIsMobile(mobileBreakpoint = 768) {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < mobileBreakpoint);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < mobileBreakpoint);
+		return () => mql.removeEventListener("change", onChange);
+	}, [mobileBreakpoint]);
+
+	return !!isMobile;
+}

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

@@ -1,5 +1,5 @@
-import type React from 'react';
-import { useEffect, useRef } from 'react';
+import type React from "react";
+import { useEffect, useRef } from "react";
 
 const useDidMountEffect = (func: React.EffectCallback, deps: React.DependencyList) => {
 	const didMount = useRef(false);