style: apply biome formatting to UI components

- Convert spaces to tabs for consistency
- Add 'type' modifier to React imports
- Format component code

Co-authored-by: Ona <no-reply@ona.com>

apps/drive-web/src/APITester.tsx

@@ -1,25 +1,25 @@
-import { useRef, type FormEvent } from "react";
+import { type FormEvent, useRef } from "react"
 
 export function APITester() {
-  const responseInputRef = useRef<HTMLTextAreaElement>(null);
+	const responseInputRef = useRef<HTMLTextAreaElement>(null)
 
 	const testEndpoint = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+		e.preventDefault()
 
 		try {
-      const form = e.currentTarget;
+			const form = e.currentTarget
-      const formData = new FormData(form);
+			const formData = new FormData(form)
-      const endpoint = formData.get("endpoint") as string;
+			const endpoint = formData.get("endpoint") as string
-      const url = new URL(endpoint, location.href);
+			const url = new URL(endpoint, location.href)
-      const method = formData.get("method") as string;
+			const method = formData.get("method") as string
-      const res = await fetch(url, { method });
+			const res = await fetch(url, { method })
 
-      const data = await res.json();
+			const data = await res.json()
-      responseInputRef.current!.value = JSON.stringify(data, null, 2);
+			responseInputRef.current!.value = JSON.stringify(data, null, 2)
 		} catch (error) {
-      responseInputRef.current!.value = String(error);
+			responseInputRef.current!.value = String(error)
+		}
 	}
-  };
 
 	return (
 		<div className="api-tester">
@@ -28,12 +28,23 @@ export function APITester() {
 					<option value="GET">GET</option>
 					<option value="PUT">PUT</option>
 				</select>
-        <input type="text" name="endpoint" defaultValue="/api/hello" className="url-input" placeholder="/api/hello" />
+				<input
+					type="text"
+					name="endpoint"
+					defaultValue="/api/hello"
+					className="url-input"
+					placeholder="/api/hello"
+				/>
 				<button type="submit" className="send-button">
 					Send
 				</button>
 			</form>
-      <textarea ref={responseInputRef} readOnly placeholder="Response will appear here..." className="response-area" />
+			<textarea
+				ref={responseInputRef}
+				readOnly
+				placeholder="Response will appear here..."
+				className="response-area"
+			/>
 		</div>
-  );
+	)
 }

apps/drive-web/src/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -8,7 +8,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card"
 			className={cn(
 				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -21,7 +21,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-header"
 			className={cn(
 				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -54,7 +54,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-action"
 			className={cn(
 				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+				className,
 			)}
 			{...props}
 		/>

apps/drive-web/src/components/ui/field.tsx

@@ -1,9 +1,8 @@
-import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
+import { useMemo } from "react"
-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
 	return (
@@ -12,7 +11,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
 			className={cn(
 				"flex flex-col gap-6",
 				"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -32,7 +31,7 @@ function FieldLegend({
 				"mb-3 font-medium",
 				"data-[variant=legend]:text-base",
 				"data-[variant=label]:text-sm",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -45,7 +44,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="field-group"
 			className={cn(
 				"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -73,7 +72,7 @@ const fieldVariants = cva(
 		defaultVariants: {
 			orientation: "vertical",
 		},
-  }
+	},
 )
 
 function Field({
@@ -98,7 +97,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="field-content"
 			className={cn(
 				"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -116,7 +115,7 @@ function FieldLabel({
 				"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
 				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
 				"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -129,7 +128,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="field-label"
 			className={cn(
 				"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -144,7 +143,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
 				"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
 				"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
 				"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
@@ -164,7 +163,7 @@ function FieldSeparator({
 			data-content={!!children}
 			className={cn(
 				"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -206,7 +205,7 @@ function FieldError({
 			<ul className="ml-4 flex list-disc flex-col gap-1">
 				{errors.map(
 					(error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+						error?.message && <li key={index}>{error.message}</li>,
 				)}
 			</ul>
 		)

apps/drive-web/src/components/ui/label.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -12,7 +12,7 @@ function Label({
 			data-slot="label"
 			className={cn(
 				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+				className,
 			)}
 			{...props}
 		/>

apps/drive-web/src/components/ui/progress.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -13,7 +13,7 @@ function Progress({
 			data-slot="progress"
 			className={cn(
 				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
+				className,
 			)}
 			{...props}
 		>

apps/drive-web/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -18,7 +18,7 @@ function Separator({
 			orientation={orientation}
 			className={cn(
 				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+				className,
 			)}
 			{...props}
 		/>