feat(KAN-18): redesign foundational UI components

resources/js/components/ui/input/Input.vue

@@ -1,33 +1,38 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number | null
-  class?: HTMLAttributes["class"]
-}>()
+    defaultValue?: string | number;
+    modelValue?: string | number | null;
+    class?: HTMLAttributes["class"];
+    invalid?: boolean;
+}>();
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+    (e: "update:modelValue", payload: string | number): void;
+}>();
 
 const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
+    passive: true,
+    defaultValue: props.defaultValue,
+});
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
+    <input
+        v-model="modelValue"
+        data-slot="input"
+        :data-invalid="invalid ? '' : undefined"
+        :aria-invalid="invalid ? 'true' : undefined"
+        :class="
+            cn(
+                'border-input bg-card placeholder:text-muted-foreground selection:bg-brand selection:text-brand-foreground min-h-control w-full min-w-0 rounded-md border px-3 py-2 text-base shadow-xs transition-[border-color,box-shadow] outline-none file:mr-3 file:inline-flex file:min-h-8 file:border-0 file:bg-transparent file:text-body file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 md:text-body',
+                'hover:border-primary/45 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35',
+                'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25',
+                props.class,
+            )
+        "
+    />
 </template>