Input component with storybook and testing

app/forms/page.js

@@ -3,14 +3,21 @@
 import React, { useState } from "react";
 import Checkbox from "../components/Checkbox";
 import RadioButton from "../components/RadioButton";
-import RadioGroup from "../components/RadioGroup";
+import Input from "../components/Input";
 
 export default function FormsPlayground() {
   const [standardChecked, setStandardChecked] = useState(false);
   const [inverseChecked, setInverseChecked] = useState(true);
   const [radioValue, setRadioValue] = useState("option1");
-  const [standardRadioValue, setStandardRadioValue] = useState("option1");
-  const [inverseRadioValue, setInverseRadioValue] = useState("option2");
+  const [smallValue, setSmallValue] = useState("Data");
+  const [mediumValue, setMediumValue] = useState("Data");
+  const [largeValue, setLargeValue] = useState("Data");
+  const [defaultLabelValue, setDefaultLabelValue] = useState("Data");
+  const [horizontalLabelValue, setHorizontalLabelValue] = useState("Data");
+  const [smallHorizontalValue, setSmallHorizontalValue] = useState("Data");
+  const [smallDefaultValue, setSmallDefaultValue] = useState("Data");
+  const [errorStateValue, setErrorStateValue] = useState("Data");
+  const [disabledStateValue, setDisabledStateValue] = useState("Data");
 
   return (
     <div className="p-[24px] space-y-[24px]">
@@ -59,38 +66,86 @@ export default function FormsPlayground() {
       </section>
 
       <section className="space-y-[12px]">
-        <h2 className="font-space text-[18px]">Radio Group</h2>
+        <h2 className="font-space text-[18px]">Input Examples</h2>
         <div className="max-w-[520px] space-y-[16px]">
           <div>
-            <h3 className="font-space text-[14px] mb-[8px]">Standard Mode</h3>
-            <RadioGroup
-              name="standard-radio"
-              value={standardRadioValue}
-              mode="standard"
-              state="default"
-              onChange={({ value }) => setStandardRadioValue(value)}
-              options={[
-                { value: "option1", label: "Option 1" },
-                { value: "option2", label: "Option 2" },
-                { value: "option3", label: "Option 3" },
-              ]}
-            />
+            <h3 className="font-space text-[14px] mb-[8px]">Sizes</h3>
+            <div className="space-y-[12px]">
+              <Input
+                label="Small"
+                size="small"
+                value={smallValue}
+                onChange={(e) => setSmallValue(e.target.value)}
+              />
+              <Input
+                label="Medium"
+                size="medium"
+                value={mediumValue}
+                onChange={(e) => setMediumValue(e.target.value)}
+              />
+              <Input
+                label="Large"
+                size="large"
+                value={largeValue}
+                onChange={(e) => setLargeValue(e.target.value)}
+              />
+            </div>
           </div>
 
           <div>
-            <h3 className="font-space text-[14px] mb-[8px]">Inverse Mode</h3>
-            <RadioGroup
-              name="inverse-radio"
-              value={inverseRadioValue}
-              mode="inverse"
-              state="default"
-              onChange={({ value }) => setInverseRadioValue(value)}
-              options={[
-                { value: "option1", label: "Option 1" },
-                { value: "option2", label: "Option 2" },
-                { value: "option3", label: "Option 3" },
-              ]}
-            />
+            <h3 className="font-space text-[14px] mb-[8px]">Label Variants</h3>
+            <div className="space-y-[12px]">
+              <Input
+                label="Default (Top Label)"
+                labelVariant="default"
+                size="medium"
+                value={defaultLabelValue}
+                onChange={(e) => setDefaultLabelValue(e.target.value)}
+              />
+              <Input
+                label="Small Default"
+                labelVariant="default"
+                size="small"
+                value={smallDefaultValue}
+                onChange={(e) => setSmallDefaultValue(e.target.value)}
+              />
+              <Input
+                label="Horizontal (Left Label)"
+                labelVariant="horizontal"
+                size="medium"
+                value={horizontalLabelValue}
+                onChange={(e) => setHorizontalLabelValue(e.target.value)}
+              />
+              <Input
+                label="Small Horizontal"
+                labelVariant="horizontal"
+                size="small"
+                value={smallHorizontalValue}
+                onChange={(e) => setSmallHorizontalValue(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className="font-space text-[14px] mb-[8px]">States</h3>
+            <div className="space-y-[12px]">
+              <Input
+                label="Error"
+                size="medium"
+                state="default"
+                error={true}
+                value={errorStateValue}
+                onChange={(e) => setErrorStateValue(e.target.value)}
+              />
+              <Input
+                label="Disabled"
+                size="medium"
+                state="default"
+                disabled={true}
+                value={disabledStateValue}
+                onChange={(e) => setDisabledStateValue(e.target.value)}
+              />
+            </div>
           </div>
         </div>
       </section>