removes unused Form component; enhances Input component with improved…

… styling, label support, and focus effects for better usability

packages/nobel/components/ui/Input.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useModel } from 'vue'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const { size = 'medium' } = defineProps<{
   size?: 'medium' | 'small' | 'mini'
   label: string
 }>()
 
+const emit = defineEmits(['update:value'])
+
 const focused = ref(false)
 </script>
 
@@ -19,10 +26,11 @@ const focused = ref(false)
       {{ label }}
     </label>
     <input
+      v-bind="$attrs"
       :id="label"
       ref="inputRef"
       class="button buttonText buttonHover buttonActive buttonFocus focus"
-      :class="size"
+      :class="`${size}`"
       :placeholder="label"
       @focus="() => (focused = true)"
       @blur="() => (focused = false)"
@@ -40,12 +48,27 @@ input {
 /* input:-internal-autofill-selected {
   background-color: var(--base-20) !important;
   color: var(--base-contrast) !important;
+}
+
+input:-webkit-autofill {
+  background-color: var(--base-20) !important;
+  color: var(--base-contrast) !important;
+}
+
+input:-webkit-autofill::placeholder {
+  background-color: var(--base-20) !important;
+  color: var(--base-contrast) !important;
 } */
 
 .input {
   position: relative;
 }
 
+div.input:has(input:not(:placeholder-shown)):not(:focus-within) label {
+  transform: translateY(0%);
+  opacity: 0;
+}
+
 div.input:has(+ div:focus-within) {
   filter: blur(4px);
 }
@@ -63,6 +86,15 @@ div.input:has(+ div:focus-within) {
   transition: all 0.3s;
 }
 
+.input input.focus:focus {
+  color: var(--accent-120);
+  background: var(--accent-10);
+}
+
+.input input::placeholder {
+  color: var(--accent-120);
+}
+
 .input label.move {
   transform: translateY(-100%);
   height: var(--block);