feat: ✨ Test new form styles

components/LoginInput.vue

@@ -16,5 +16,8 @@ interface Props extends /* @vue-ignore */ InputHTMLAttributes {
     label: string;
 }
 
+defineOptions({
+    inheritAttrs: false,
+});
 defineProps<Props>();
 </script>

components/inputs/error.vue

@@ -0,0 +1,9 @@
+<template>
+    <p class="text-base/6 disabled:opacity-50 sm:text-sm/6 text-red-500">
+        <slot />
+    </p>
+</template>
+
+<script lang="ts" setup>
+
+</script>

components/inputs/field.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="mt-3 flex flex-col gap-2">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

components/inputs/label-and-error.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="flex flex-col gap-1">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

components/inputs/label.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="flex flex-row justify-between">
+        <label v-bind="$attrs"
+            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
+            <slot />
+        </label>
+        <div :id="`${$attrs.for}-label-slot`"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { LabelHTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ LabelHTMLAttributes { }
+
+defineOptions({
+    inheritAttrs: false,
+})
+const props = defineProps<Props>();
+</script>

components/inputs/password.vue

@@ -0,0 +1,32 @@
+<template>
+    <InputsText v-bind="$attrs, $props" :type="showPassword ? 'text' : 'password'" :spellcheck="false"
+        autocomplete="new-password" />
+    <Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
+        <button type="button" @click="showPassword = !showPassword"
+            class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
+            <iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
+            {{ showPassword ? "Hide password" : "Show password" }}
+        </button>
+    </Teleport>
+</template>
+
+<script lang="ts" setup>
+const showPassword = ref(false);
+
+import type { InputHTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ InputHTMLAttributes {
+    isInvalid?: boolean;
+}
+
+defineOptions({
+    inheritAttrs: false,
+});
+defineProps<Props>();
+
+const teleport = ref(false);
+
+onMounted(() => {
+    teleport.value = true;
+});
+</script>

components/inputs/text.vue

@@ -0,0 +1,14 @@
+<template>
+    <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
+        isInvalid && '!ring-red-600 ring-2']">
+</template>
+
+<script setup lang="ts">
+import type { InputHTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ InputHTMLAttributes {
+    isInvalid?: boolean;
+}
+
+defineProps<Props>();
+</script>