From 5a51339bfe02b886920b9b82d256f90aa5d7b065 Mon Sep 17 00:00:00 2001
From: daylily <xy.r@outlook.com>
Date: Thu, 3 Apr 2025 02:33:43 -0400
Subject: [PATCH] Tweak the style of file input

---
 src/lib/components/ui/input/input.svelte | 75 ++++++++++++------------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 13fa116..185032c 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,46 +1,45 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements'
+  import type { WithElementRef } from 'bits-ui'
+  import { cn } from '$lib/utils.js'
 
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+  type InputType = Exclude<HTMLInputTypeAttribute, 'file'>
 
-	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
-	>;
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, 'type'> & ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+  >
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		type,
-		files = $bindable(),
-		class: className,
-		...restProps
-	}: Props = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    ...restProps
+  }: Props = $props()
 </script>
 
-{#if type === "file"}
-	<input
-		bind:this={ref}
-		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			className
-		)}
-		type="file"
-		bind:files
-		bind:value
-		{...restProps}
-	/>
+{#if type === 'file'}
+  <input
+    bind:this={ref}
+    class={cn(
+      'border-input bg-secondary text-secondary-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:cursor-pointer file:hover:cursor-pointer hover:bg-secondary/80 transition-colors',
+      className,
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  />
 {:else}
-	<input
-		bind:this={ref}
-		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			className
-		)}
-		{type}
-		bind:value
-		{...restProps}
-	/>
+  <input
+    bind:this={ref}
+    class={cn(
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      className,
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  />
 {/if}