css refactor

frontend/src/lib/ui/Input.svelte

@@ -8,14 +8,22 @@
 @INVARIANT: Consistent spacing and focus states.
 -->
 
-<script lang="ts">
+<script>
+  // [SECTION: IMPORTS]
+  import { cn } from "$lib/utils.js";
+  // [/SECTION: IMPORTS]
+
   // [SECTION: PROPS]
-  export let label: string = "";
-  export let value: string = "";
-  export let placeholder: string = "";
-  export let error: string = "";
-  export let disabled: boolean = false;
-  export let type: 'text' | 'password' | 'email' | 'number' = 'text';
+  let {
+    label = "",
+    value = $bindable(""),
+    placeholder = "",
+    error = "",
+    disabled = false,
+    type = "text",
+    class: className = "",
+    ...rest
+  } = $props();
   // [/SECTION: PROPS]
 
   let id = "input-" + Math.random().toString(36).substr(2, 9);
@@ -28,20 +36,25 @@
       {label}
     </label>
   {/if}
-  
+
   <input
     {id}
     {type}
     {placeholder}
     {disabled}
     bind:value
-    class="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {error ? 'border-red-500' : ''}"
+    class={cn(
+      "flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      error ? "border-destructive" : "",
+      className,
+    )}
+    {...rest}
   />
 
   {#if error}
-    <span class="text-xs text-red-500">{error}</span>
+    <span class="text-xs text-destructive">{error}</span>
   {/if}
 </div>
 <!-- [/SECTION: TEMPLATE] -->
 
-<!-- [/DEF:Input:Component] -->
+<!-- [/DEF:Input:Component] -->