feat: add "cleardestroy" demonstration

Author: Ohh-889

playground/src/app/(demo)/form/modules/ClearDestroy.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+
+type FormValues = {
+  password: string;
+  username: string;
+};
+
+const ClearDestroy = () => {
+  const [form] = useForm<FormValues>();
+
+  const [show, setShow] = useState(true);
+
+  function toggle() {
+    setShow(!show);
+  }
+
+  return (
+    <Card title="Clear Destroy">
+      {show && (
+        <Form
+          clearOnDestroy
+          className="w-[480px] max-sm:w-full space-y-4"
+          form={form}
+          initialValues={{ password: '123456' }}
+        >
+          <FormField
+            label="Username"
+            name="username"
+          >
+            <Input placeholder="Username" />
+          </FormField>
+
+          <FormField
+            label="Password"
+            name="password"
+          >
+            <Input placeholder="Password" />
+          </FormField>
+        </Form>
+      )}
+
+      <Button
+        className="mt-2"
+        onClick={toggle}
+      >
+        Toggle
+      </Button>
+    </Card>
+  );
+};
+
+export default ClearDestroy;

playground/src/app/(demo)/form/page.tsx

@@ -1,3 +1,4 @@
+import ClearDestroy from './modules/ClearDestroy';
 import Default from './modules/Default';
 import FieldChange from './modules/FieldChange';
 import Preserve from './modules/Preserve';
@@ -22,6 +23,8 @@ const FormPage = () => {
       <Reset />
 
       <Preserve />
+
+      <ClearDestroy />
     </div>
   );
 };