Update Input component to include xl size option

Author: j0h-dev

pages/UI/input.vue

@@ -6,12 +6,14 @@
  <Input label="Text" helper="Input can also have helper text" size="sm" v-model="text" variant="default" />
  <Input label="Text" helper="Input can also have helper text" size="md" v-model="text" variant="default" />
  <Input label="Text" helper="Input can also have helper text" size="lg" v-model="text" variant="default" />
+ <Input label="Text" helper="Input can also have helper text" size="xl" v-model="text" variant="default" />
  </div>
 
  <div class="flex flex-col gap-4">
  <Input label="Text" helper="Input can also have helper text" size="sm" variant="default" v-model="text" disabled />
  <Input label="Text" helper="Input can also have helper text" size="md" variant="default" v-model="text" disabled />
  <Input label="Text" helper="Input can also have helper text" size="lg" variant="default" v-model="text" disabled />
+ <Input label="Text" helper="Input can also have helper text" size="xl" variant="default" v-model="text" disabled />
  </div>
  </div>
 
@@ -22,6 +24,7 @@
  <Input label="Text" helper="Input can also have helper text" size="sm" variant="default" v-model="text" pattern="" />
  <Input label="Text" helper="Input can also have helper text" size="md" variant="default" v-model="text" pattern="" />
  <Input label="Text" helper="Input can also have helper text" size="lg" variant="default" v-model="text" pattern="" />
+ <Input label="Text" helper="Input can also have helper text" size="xl" variant="default" v-model="text" pattern="" />
  </form>
  </div>
  </div>

ui-components/Input.vue

@@ -41,15 +41,20 @@ const inputTV = tv({
  size: {
  sm: {
  label: '-top-2 left-3.5 px-1.5 text-xs',
- input: 'h-10 px-4',
+ input: 'h-9 px-4',
  small: 'px-2 py-1 text-xs'
  },
  md: {
+ label: '-top-2 left-3.5 px-1.5 text-xs',
+ input: 'h-10 px-4',
+ small: 'px-2 py-1 text-xs'
+ },
+ lg: {
  label: '-top-2 left-3 px-1.5 text-sm',
  input: 'h-12 px-4',
  small: 'px-2 py-1 text-xs'
  },
- lg: {
+ xl: {
  label: 'text-md -top-3 left-3.5 px-2',
  input: 'h-14 px-5 text-lg',
  small: 'px-2 py-1 text-xs'