From 4db4ed1c4a11ab6fd80bebe37d4edec24226262f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Manuel=20Fuentes=20Trejo?= <futjesus@gmail.com>
Date: Thu, 12 Feb 2026 18:29:48 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20fix:=20unify=20label-field=20spa?=
 =?UTF-8?q?cing=20across=20form=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Standardize all form components to use gap-2 (8px) between label and
field, matching the pattern already used by Input, TextArea, TimePicker,
PhoneNumberInput, and ImageUpload.

- Select: add gap-2 to wrapper, remove mb-1 from label
- Counter: change gap-1 to gap-2 in wrapper
- Autocomplete: add gap-2 to wrapper, remove mb-2 from label
- TagSelect: add gap-2 to wrapper, remove my-2 from label
- MultiSelectDropdown: add gap-2 to wrapper, remove mb-1 from label
---
 lib/components/Autocomplete/Autocomplete.tsx               | 2 +-
 lib/components/Autocomplete/Autocomplete.variants.ts       | 7 +------
 lib/components/Counter/Counter.tsx                         | 2 +-
 .../MultiSelectDropdown/MultiSelectDropdown.variants.ts    | 3 ++-
 lib/components/Select/Select.variants.ts                   | 1 -
 lib/components/Select/components/Wrapper.tsx               | 2 +-
 lib/components/TagSelect/TagSelect.variants.ts             | 3 ++-
 7 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/lib/components/Autocomplete/Autocomplete.tsx b/lib/components/Autocomplete/Autocomplete.tsx
index 47118a21..745e9ebd 100644
--- a/lib/components/Autocomplete/Autocomplete.tsx
+++ b/lib/components/Autocomplete/Autocomplete.tsx
@@ -76,7 +76,7 @@ const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
     return (
       <div
         ref={wrapperRef}
-        className="relative flex flex-col"
+        className="relative flex flex-col gap-2"
         data-theme={theme}
       >
         {label ? (
diff --git a/lib/components/Autocomplete/Autocomplete.variants.ts b/lib/components/Autocomplete/Autocomplete.variants.ts
index 356e6b77..e0063175 100644
--- a/lib/components/Autocomplete/Autocomplete.variants.ts
+++ b/lib/components/Autocomplete/Autocomplete.variants.ts
@@ -22,9 +22,4 @@ export const autocompleteVariants = cva([
   'kubefirst:focus:ring-kubefirst-primary',
 ]);
 
-export const labelVariants = cva([
-  'pl-1',
-  'mb-2',
-  'text-base',
-  'cursor-pointer',
-]);
+export const labelVariants = cva(['pl-1', 'text-base', 'cursor-pointer']);
diff --git a/lib/components/Counter/Counter.tsx b/lib/components/Counter/Counter.tsx
index efc6776d..707bb42d 100644
--- a/lib/components/Counter/Counter.tsx
+++ b/lib/components/Counter/Counter.tsx
@@ -98,7 +98,7 @@ export const Counter: FC<CounterProps> = forwardRef<
     }, [count, max, onChange]);
 
     return (
-      <div className="flex flex-col gap-1" data-theme={theme}>
+      <div className="flex flex-col gap-2" data-theme={theme}>
         {label ? (
           <div className={cn(labelWrapperClassName)}>
             <Typography
diff --git a/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts b/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
index 26d15515..51eccdec 100644
--- a/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
+++ b/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
@@ -3,12 +3,13 @@ import { cva } from 'class-variance-authority';
 export const wrapperVariants = cva([
   'flex',
   'flex-col',
+  'gap-2',
   'w-full',
   'relative',
   'cursor-pointer',
 ]);
 
-export const labelVariants = cva(['cursor-pointer', 'mb-1', 'select-none']);
+export const labelVariants = cva(['cursor-pointer', 'select-none']);
 
 export const multiSelectDropdownVariants = cva([
   'min-h-9',
diff --git a/lib/components/Select/Select.variants.ts b/lib/components/Select/Select.variants.ts
index 9487d952..e44149ad 100644
--- a/lib/components/Select/Select.variants.ts
+++ b/lib/components/Select/Select.variants.ts
@@ -67,7 +67,6 @@ export const inputVariants = cva([
 ]);
 
 export const labelVariants = cva([
-  'mb-1',
   'cursor-pointer',
   'text-sm',
   'leading-5',
diff --git a/lib/components/Select/components/Wrapper.tsx b/lib/components/Select/components/Wrapper.tsx
index 42135248..e23ff24e 100644
--- a/lib/components/Select/components/Wrapper.tsx
+++ b/lib/components/Select/components/Wrapper.tsx
@@ -131,7 +131,7 @@ export const Wrapper: ForwardRefExoticComponent<
     return (
       <div
         ref={wrapperRef}
-        className={cn('flex flex-col w-full relative', wrapperClassName)}
+        className={cn('flex flex-col gap-2 w-full relative', wrapperClassName)}
         data-theme={theme}
       >
         {label ? (
diff --git a/lib/components/TagSelect/TagSelect.variants.ts b/lib/components/TagSelect/TagSelect.variants.ts
index 52316542..c0af769a 100644
--- a/lib/components/TagSelect/TagSelect.variants.ts
+++ b/lib/components/TagSelect/TagSelect.variants.ts
@@ -3,12 +3,13 @@ import { cva } from 'class-variance-authority';
 export const wrapperVariants = cva([
   'flex',
   'flex-col',
+  'gap-2',
   'w-full',
   'relative',
   'text-zinc-500',
 ]);
 
-export const labelVariants = cva(['my-2', 'cursor-pointer']);
+export const labelVariants = cva(['cursor-pointer']);
 
 export const tagSelectVariants = cva([
   'border',