feat(components): add input label and description

packages/forms/src/input/index.tsx

@@ -9,7 +9,7 @@ export interface InputProps {
   label?: string
   placeholder?: string
   disabled?: boolean,
-  description?: string
+  description?: string | ReactNode
   leftSection?: string | ReactNode
   rightSection?: string | ReactNode
 }
@@ -39,9 +39,11 @@ const Input: React.FC<InputProps> = ({
                         `
   return (
     <div className="input-group mb-3">
-      <label htmlFor={id}>{label}</label>
+      <div className='bootwind-label mb-2'>
+        <label className='text-neutral-600 leading-tight font-medium' htmlFor={id}>{label}</label>
+      </div>
       <input type={type} placeholder={placeholder} name={name} className={inputClasses} disabled={disabled}/>
-      <span>{description}</span>
+      <span className='text-zinc-500 flex gap-2 items-center text-sm mt-2'>{description}</span>
     </div>
   );
 };

packages/forms/stories/Input.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Toggle, { ToggleProps } from '../src/toggle';
 
-import { FaMoon, FaSun } from 'react-icons/fa6';
+import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2';
 import Text from '../../typography/src/text';
 import Input from '../src/input';
 
@@ -21,6 +21,23 @@ export const BasicInput = (args: ToggleProps) => (
         <Input placeholder='Disabled input' disabled></Input>
     </>
 )
+export const LabelAndHelperText = (args: ToggleProps) => (
+    <>
+    <div className="mb-10">
+        <Text type='headline' size={6}>Input with Label</Text>
+        <Input placeholder='[email protected]' label='Email'></Input>
+    </div>
+    <div className="mb-10">
+        <Text type='headline' size={6}>Input with Description</Text>
+        <Input placeholder='[email protected]' label='Email' description={
+          <>
+          <HiOutlineQuestionMarkCircle className='w-4 h-4'/>
+          Helping text for user
+          </>
+        }></Input>
+    </div>
+    </>
+)
 export const InputGroup = (args: ToggleProps) => (
     <>
     </>