From 4a281b30939b0ccecbcfb213bb1102b21d959791 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 22 Mar 2024 17:18:48 +0100
Subject: [PATCH] fix(Input): invalid `xs` size

---
 playground/pages/input.vue                    |  8 ++++
 src/theme/input.ts                            |  2 +-
 .../__snapshots__/Input.spec.ts.snap          | 44 +------------------
 3 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/playground/pages/input.vue b/playground/pages/input.vue
index 0621966f..b3f2036c 100644
--- a/playground/pages/input.vue
+++ b/playground/pages/input.vue
@@ -20,6 +20,14 @@ const sizes = Object.keys(theme.variants.size)
       <UInput loading trailing placeholder="Search..." />
       <UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
     </div>
+    <div class="flex items-center gap-4">
+      <UInput
+        v-for="size in sizes"
+        :key="size"
+        placeholder="Search..."
+        :size="(size as any)"
+      />
+    </div>
     <div class="flex items-center gap-4">
       <UInput
         v-for="size in sizes"
diff --git a/src/theme/input.ts b/src/theme/input.ts
index 0bb7f045..a1d9ca46 100644
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -18,7 +18,7 @@ export default (config: { colors: string[] }) => {
           trailingIcon: 'size-4'
         },
         xs: {
-          base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
+          base: 'text-sm gap-x-1.5 px-2.5 py-1',
           leading: 'px-2.5',
           trailing: 'px-2.5',
           leadingIcon: 'size-4',
diff --git a/test/components/__snapshots__/Input.spec.ts.snap b/test/components/__snapshots__/Input.spec.ts.snap
index 0f073014..0acd0c7b 100644
--- a/test/components/__snapshots__/Input.spec.ts.snap
+++ b/test/components/__snapshots__/Input.spec.ts.snap
@@ -79,48 +79,6 @@ exports[`Input > renders with size 2xs correctly 1`] = `
 </div>"
 `;
 
-exports[`Input > renders with size correctly 1`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Input > renders with size correctly 2`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Input > renders with size correctly 3`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Input > renders with size correctly 4`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Input > renders with size correctly 5`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Input > renders with size correctly 6`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-base gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
 exports[`Input > renders with size lg correctly 1`] = `
 "<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
   <!--v-if-->
@@ -150,7 +108,7 @@ exports[`Input > renders with size xl correctly 1`] = `
 `;
 
 exports[`Input > renders with size xs correctly 1`] = `
-"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
   <!--v-if-->
   <!--v-if-->
 </div>"