Move all base components to an isolated folder

components/base/Select.vue

@@ -16,7 +16,7 @@
                         <Icon icon="radix-icons:chevron-up" />
                     </SelectScrollUpButton>
                     <SelectViewport class="p-1">
-                        <slot></slot>
+                        <slot />
                     </SelectViewport>
                     <SelectScrollDownButton>
                         <Icon icon="radix-icons:chevron-down" />

components/base/SelectGroup.vue

@@ -1,7 +1,7 @@
 <template>
     <SelectGroup :disabled="disabled" class="">
         <SelectLabel class="">{{ label }}</SelectLabel>
-        <slot></slot>
+        <slot />
     </SelectGroup>
 </template>
 

components/base/Switch.vue

@@ -1,8 +1,8 @@
 <template>
     <Label class="flex justify-center items-center my-2">{{ label }}
         <SwitchRoot v-model:checked="model" :disabled="disabled"
-            class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
-        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+            class="mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
         data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
             <SwitchThumb
                 class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
@@ -12,9 +12,11 @@
 </template>
 
 <script setup lang="ts">
-const { label, disabled } = defineProps<{
+const { label, disabled, onIcon, offIcon } = defineProps<{
     label?: string
     disabled?: boolean
+    onIcon?: string
+    offIcon?: string
 }>();
 const model = defineModel<boolean>();
 </script>

components/base/TextInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <Label class="px-4 my-2">{{ label }}
+    <Label class="my-2">{{ label }}
         <input :placeholder="placeholder" :disabled="disabled"
             class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
         bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40

components/base/Toast.vue

@@ -5,7 +5,7 @@
           <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
           <ToastDescription v-if="content" class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
         </div>
-        <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full" />
+        <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full"  />
     </ToastRoot>
 
     <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
@@ -21,6 +21,21 @@ const { closeable = true, duration, title, content, timer = true } = defineProps
     content?: string
     timer?: boolean
 }>();
+const timeout = ref<NodeJS.Timeout>();
+
+watch(model, (value) => {
+    if(duration)
+    {
+		if(value === true)
+		{
+			timeout.value = setTimeout(() => model.value = false, duration);
+		}
+		else
+		{
+			clearTimeout(timeout.value);
+		}
+    }
+})
 </script>
 
 <style>