chore: lint using react-doctor, update translations, dynamic imports

packages/ui/src/components/form.tsx

@@ -11,7 +11,7 @@ type FormItemContextValue = {
 const FormItemContext = React.createContext<FormItemContextValue>({ id: "", hasError: false });
 
 function useFormItem() {
-	return React.useContext(FormItemContext);
+	return React.use(FormItemContext);
 }
 
 type FormItemProps = React.ComponentProps<"div"> & { hasError?: boolean };

packages/ui/src/components/label.tsx

@@ -1,10 +1,11 @@
 import type * as React from "react";
 import { cn } from "@reactive-resume/utils/style";
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, htmlFor, ...props }: React.ComponentProps<"label">) {
 	return (
 		// biome-ignore lint/a11y/noLabelWithoutControl: label is a generic component
 		<label
+			htmlFor={htmlFor}
 			data-slot="label"
 			className={cn(
 				"flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",

packages/ui/src/components/sidebar.tsx

@@ -33,7 +33,7 @@ type SidebarContextProps = {
 const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebarState() {
-	const context = React.useContext(SidebarContext);
+	const context = React.use(SidebarContext);
 
 	if (!context) {
 		throw new Error("useSidebarState must be used within a SidebarProvider.");
@@ -60,7 +60,7 @@ function SidebarProvider({
 
 	// This is the internal state of the sidebar.
 	// We use openProp and setOpenProp for control from outside the component.
-	const [_open, _setOpen] = React.useState(defaultOpen);
+	const [_open, _setOpen] = React.useReducer((_state: boolean, nextOpen: boolean) => nextOpen, defaultOpen);
 	const open = openProp ?? _open;
 	const setOpen = React.useCallback(
 		(value: boolean | ((value: boolean) => boolean)) => {

packages/ui/src/components/slider.tsx

@@ -1,8 +1,16 @@
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import { cn } from "@reactive-resume/utils/style";
 
+const THUMB_POSITION_KEYS = ["single", "start", "end"] as const;
+
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: SliderPrimitive.Root.Props) {
 	const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+	const thumbDescriptors = _values.map((thumbValue, position) => ({
+		key:
+			_values.length === 1
+				? THUMB_POSITION_KEYS[0]
+				: (THUMB_POSITION_KEYS[position + 1] ?? `thumb-${position}-${thumbValue}`),
+	}));
 
 	return (
 		<SliderPrimitive.Root
@@ -25,10 +33,10 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 						className="select-none bg-primary data-horizontal:h-full data-vertical:w-full"
 					/>
 				</SliderPrimitive.Track>
-				{Array.from({ length: _values.length }, (_, index) => (
+				{thumbDescriptors.map((thumb) => (
 					<SliderPrimitive.Thumb
 						data-slot="slider-thumb"
-						key={index}
+						key={thumb.key}
 						className="relative block size-3 shrink-0 select-none rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:outline-hidden focus-visible:ring-3 active:ring-3 disabled:pointer-events-none disabled:opacity-50"
 					/>
 				))}

packages/ui/src/hooks/use-confirm.tsx

@@ -85,7 +85,7 @@ export function ConfirmDialogProvider({ children }: { children: React.ReactNode
 }
 
 export function useConfirm() {
-	const context = React.useContext(ConfirmContext);
+	const context = React.use(ConfirmContext);
 
 	if (!context) {
 		throw new Error("useConfirm must be used within a <ConfirmDialogProvider />.");

packages/ui/src/hooks/use-cookie.tsx

@@ -73,19 +73,18 @@ export function useCookie(
 
 	useEffect(() => {
 		const cookie = getCookie(name);
+		let nextValue: string | null;
 
 		if (cookie !== null) {
-			setValue(cookie);
-			return;
+			nextValue = cookie;
+		} else if (defaultValue === undefined) {
+			nextValue = null;
+		} else {
+			if (canUseCookies()) Cookie.set(name, defaultValue, resolveCookieOptions(defaultOptions));
+			nextValue = defaultValue;
 		}
 
-		if (defaultValue === undefined) {
-			setValue(null);
-			return;
-		}
-
-		if (canUseCookies()) Cookie.set(name, defaultValue, resolveCookieOptions(defaultOptions));
-		setValue(defaultValue);
+		setValue(nextValue);
 	}, [name, defaultValue, defaultOptions]);
 
 	const updateCookie = useCallback(

packages/ui/src/hooks/use-prompt.tsx

@@ -49,10 +49,12 @@ export function PromptDialogProvider({ children }: { children: React.ReactNode }
 	React.useEffect(() => {
 		if (!state.open) return;
 
-		setTimeout(() => {
+		const timeoutId = window.setTimeout(() => {
 			if (!inputRef.current) return;
 			inputRef.current.focus();
 		}, 0);
+
+		return () => window.clearTimeout(timeoutId);
 	}, [state.open]);
 
 	const prompt = React.useCallback(async (title: string, options?: PromptOptions): Promise<string | null> => {
@@ -126,7 +128,7 @@ export function PromptDialogProvider({ children }: { children: React.ReactNode }
 }
 
 export function usePrompt() {
-	const context = React.useContext(PromptContext);
+	const context = React.use(PromptContext);
 
 	if (!context) {
 		throw new Error("usePrompt must be used within a <PromptDialogProvider />.");