fix: input control sizes and icon sizes

src/components/Input/index.tsx

@@ -5,7 +5,7 @@ import { BsX, BsPersonFill, BsSearch } from '@/assets'
 
 const leftSideVariants = cva(['flex', 'items-center', 'text-inherit'])
 
-const rightSideVariants = cva(['flex', 'self-center text-inherit'])
+const rightSideVariants = cva(['flex', 'items-center', 'size-3', 'pb-1'])
 
 const formVariants = cva(
   [
@@ -14,9 +14,10 @@ const formVariants = cva(
     'border-2',
     'rounded-lg',
     'overflow-hidden',
-    'p-3',
     'items-center',
     'gap-1.5',
+    'pl-3',
+    'pr-3',
     '[&:has(:disabled)]:border-none'
   ],
   {
@@ -48,7 +49,15 @@ const formVariants = cva(
           'hover:border-green-700',
           'focus-within:shadow-green'
         ]
+      },
+      size: {
+        sm: ['h-9.25'],
+        md: ['h-10.5']
       }
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md'
     }
   }
 )
@@ -69,9 +78,10 @@ const inputVariants = cva(
   }
 )
 
-interface InputProps extends React.HTMLProps<HTMLInputElement> {
+interface InputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size'> {
   variant: 'primary' | 'error' | 'success'
   type: 'text' | 'search'
+  size: 'sm' | 'md'
   formClassName?: string
   leftSideClassName?: string
   leftSideChild?: React.ReactNode
@@ -86,7 +96,7 @@ const convertTypeToComponent = {
   }
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLButtonElement, InputProps>(
   (
     {
       type,
@@ -96,17 +106,20 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       variant,
       leftSideChild,
       rightSideChild,
+      size,
       onClear,
       ...props
     },
     ref
   ) => {
     const leftSideComponent =
       leftSideChild ?? convertTypeToComponent.left[`${type}`]
-    const rightSideComponent = rightSideChild ?? <BsX strokeWidth={0.6} />
+    const rightSideComponent = rightSideChild ?? (
+      <BsX width={3} height={3} viewBox="0 0 12 12" strokeWidth={0.6} />
+    )
 
     return (
-      <form className={cn(formVariants({ variant }), formClassName)}>
+      <form className={cn(formVariants({ variant, size }), formClassName)}>
         <div className={cn(leftSideVariants(), leftSideClassName)}>
           {leftSideComponent}
         </div>
@@ -116,7 +129,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           {...props}
         />
-        <div className="input-right-side"></div>
         <button type="button" onClick={onClear} className={rightSideVariants()}>
           {rightSideComponent}
         </button>

stories/Input/Docs.mdx

@@ -20,6 +20,10 @@ A search is a user interface element that includes a search bar or input field,
 
 <Canvas of={InputStories.SuccessInput} />
 
+## Small Text
+
+<Canvas of={InputStories.SmallInput} />
+
 ## Disabled Text
 
 <Canvas of={InputStories.Disabled} />

stories/Input/Input.example.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Input, InputProps } from '@/index'
 
-const InputDemo = ({ variant, type, disabled }: InputProps) => {
+const InputDemo = ({ variant, type, disabled, size }: InputProps) => {
   const [value, setValue] = useState('')
   const handleOnClear = () => {
     setValue('')
@@ -14,6 +14,7 @@ const InputDemo = ({ variant, type, disabled }: InputProps) => {
       value={value}
       variant={variant}
       type={type}
+      size={size}
       onClear={handleOnClear}
       onChange={handleOnChange}
       disabled={disabled}

stories/Input/Input.stories.ts

@@ -16,6 +16,10 @@ const meta = {
       options: [true, false, 'indeterminate'],
       control: { type: 'radio' }
     },
+    size: {
+      options: ['sm', 'md'],
+      controls: { type: 'radio' }
+    },
     className: {
       controle: 'text',
       description: 'Alter the className to change the style'
@@ -30,32 +34,44 @@ type Story = StoryObj<typeof meta>
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PrimaryInput: Story = {
   args: {
+    size: 'md',
     variant: 'primary',
     type: 'text'
   }
 }
 export const ErrorInput: Story = {
   args: {
+    size: 'md',
     variant: 'error',
     type: 'text'
   }
 }
 
 export const SuccessInput: Story = {
   args: {
+    size: 'md',
     variant: 'success',
     type: 'text'
   }
 }
+export const SmallInput: Story = {
+  args: {
+    size: 'sm',
+    variant: 'primary',
+    type: 'text'
+  }
+}
 export const Disabled: Story = {
   args: {
+    size: 'md',
     variant: 'primary',
     type: 'text',
     disabled: true
   }
 }
 export const Search: Story = {
   args: {
+    size: 'md',
     variant: 'primary',
     type: 'search'
   }

tailwind.config.ts

@@ -33,7 +33,11 @@ export default {
     },
     extend: {
       keyframes: animations.keyframes,
-      animation: animations.animation
+      animation: animations.animation,
+      height: {
+        '9.25': '37px',
+        '10.5': '42px'
+      }
     }
   }
 }