aural-ui 4.0.1 → 4.2.0

package/dist/components/form/Form.stories.tsx

@@ -2,11 +2,14 @@ import React, { useEffect } from "react"
 import { Button } from "@components/button"
 import { Checkbox } from "@components/checkbox"
 import Input from "@components/input"
+import TextArea from "@components/textarea"
 import { zodResolver } from "@hookform/resolvers/zod"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import {
   Form,
   FormControl,
@@ -17,311 +20,594 @@ import {
   FormMessage,
 } from "."
 
-const MAX_DESCRIPTION_LENGTH = 160
+// ─── Schema ───────────────────────────────────────────────────────────────────
 
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-  email: z.string().email({
-    message: "Please enter a valid email address.",
-  }),
-  bio: z.string().max(MAX_DESCRIPTION_LENGTH).optional(),
+const profileSchema = z.object({
+  username: z
+    .string()
+    .min(2, { message: "Username must be at least 2 characters." }),
+  email: z.string().email({ message: "Please enter a valid email address." }),
+  bio: z
+    .string()
+    .max(160, { message: "Bio must be 160 characters or less." })
+    .optional(),
   terms: z.boolean().refine((val) => val === true, {
     message: "You must accept the terms and conditions.",
   }),
 })
 
-const FormExample = ({
-  onSubmit = () => {},
-}: {
-  onSubmit?: (values: z.infer<typeof formSchema>) => void
-}) => {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: "",
-      email: "",
-      bio: "",
-      terms: false,
-    },
-  })
+type ProfileFormValues = z.infer<typeof profileSchema>
 
-  function handleSubmit(values: z.infer<typeof formSchema>) {
-    onSubmit(values)
-  }
+// ─── Meta ─────────────────────────────────────────────────────────────────────
 
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(handleSubmit)}
-        className="text-fm-primary w-full max-w-md space-y-6"
-      >
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field, fieldState }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="username"
-                  variant={fieldState.error ? "error" : "default"}
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field, fieldState }) => {
-            return (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="email@example.com"
-                    helperText={
-                      fieldState.error
-                        ? fieldState.error.message
-                        : "We'll never share your email with anyone else."
-                    }
-                    variant={fieldState.error ? "error" : "default"}
-                    {...field}
-                  />
-                </FormControl>
-              </FormItem>
-            )
-          }}
-        />
-        <FormField
-          control={form.control}
-          name="bio"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <Input
-                  placeholder="Tell us about yourself"
-                  label="Bio"
-                  maxLength={MAX_DESCRIPTION_LENGTH}
-                  helperText="Your bio will appear on your profile."
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="terms"
-          render={({ field }) => (
-            <FormItem className="flex flex-row flex-wrap items-start space-y-0 space-x-3 rounded-md border p-4">
-              <FormControl>
-                <Checkbox
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel>Accept terms and conditions</FormLabel>
-                <FormDescription>
-                  You agree to our Terms of Service and Privacy Policy.
-                </FormDescription>
-              </div>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
-
-const meta: Meta<typeof FormExample> = {
+const meta: Meta = {
   title: "Components/UI/Form",
-  component: FormExample,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A set of compound components for building accessible, validated forms with React Hook Form. Provides FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage — each wired to form state automatically via context.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "React Hook Form",
+              description: "Context-wired validation",
+            },
+            {
+              title: "Zod Schema Support",
+              description: "Resolver built in",
+            },
+            {
+              title: "Compound Parts",
+              description: "Label, control, message",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
-  argTypes: {
-    onSubmit: { action: "submitted" },
-  },
 }
 
 export default meta
-type Story = StoryObj<typeof FormExample>
+type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+// ─── 1. Parts ────────────────────────────────────────────────────────────────
 
-export const WithErrors: Story = {
-  render: () => {
-    const form = useForm<z.infer<typeof formSchema>>({
-      resolver: zodResolver(formSchema),
-      defaultValues: {
-        username: "",
-        email: "",
-        bio: "",
-        terms: false,
+export const Parts: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Each sub-component of the Form system shown individually with its role and usage. FormField wraps a Controller, FormItem groups related elements, FormLabel renders a label tied to the field, FormControl slots the actual input, FormDescription adds helper text, and FormMessage surfaces validation errors.",
       },
+    },
+  },
+  render: () => {
+    const form = useForm<ProfileFormValues>({
+      resolver: zodResolver(profileSchema),
+      defaultValues: { username: "", email: "", bio: "", terms: false },
     })
 
-    useEffect(() => {
-      form.setError("username", {
-        type: "manual",
-        message: "Username is already taken.",
-      })
+    return (
+      <div className="w-full max-w-lg space-y-10">
+        {/* FormItem + FormLabel */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+            FormItem &amp; FormLabel
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-3">
+              FormItem provides the accessible group wrapper. FormLabel renders
+              a <code className="font-(--font-fm-mono)">{"<label>"}</code> tied
+              to the input via{" "}
+              <code className="font-(--font-fm-mono)">htmlFor</code>.
+            </p>
+            <Form {...form}>
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input placeholder="your_handle" {...field} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </Form>
+          </div>
+        </div>
+
+        {/* FormControl */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+            FormControl
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-3">
+              FormControl is a{" "}
+              <code className="font-(--font-fm-mono)">Slot</code> that forwards{" "}
+              <code className="font-(--font-fm-mono)">id</code>,{" "}
+              <code className="font-(--font-fm-mono)">aria-describedby</code>,
+              and <code className="font-(--font-fm-mono)">aria-invalid</code> to
+              the wrapped input automatically.
+            </p>
+            <Form {...form}>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="you@example.com"
+                        {...field}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </Form>
+          </div>
+        </div>
 
-      form.setError("email", {
-        type: "manual",
-        message: "Invalid email address.",
-      })
-    }, [])
+        {/* FormDescription */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+            FormDescription
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-3">
+              FormDescription renders a{" "}
+              <code className="font-(--font-fm-mono)">HelperText</code> with a
+              stable ID linked to the input via{" "}
+              <code className="font-(--font-fm-mono)">aria-describedby</code>.
+            </p>
+            <Form {...form}>
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input placeholder="your_handle" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This is your public display name.
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+            </Form>
+          </div>
+        </div>
 
-    return (
-      <Form {...form}>
-        <form className="w-full max-w-md space-y-6">
-          <FormField
-            control={form.control}
-            name="username"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Username</FormLabel>
-                <FormControl>
-                  <Input placeholder="username" variant="error" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input
-                    type="email"
-                    variant="error"
-                    placeholder="email@example.com"
-                    {...field}
-                  />
-                </FormControl>
-                <FormDescription>
-                  We'll never share your email with anyone else.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </form>
-      </Form>
+        {/* FormMessage */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+            FormMessage
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-3">
+              FormMessage reads the field error from form state and renders it
+              in a styled error{" "}
+              <code className="font-(--font-fm-mono)">HelperText</code>. It
+              renders nothing when there is no error.
+            </p>
+            <ErrorMessageDemo />
+          </div>
+        </div>
+      </div>
     )
   },
 }
 
-export const Filled: Story = {
-  render: () => {
-    const form = useForm<z.infer<typeof formSchema>>({
-      resolver: zodResolver(formSchema),
-      defaultValues: {
-        username: "johndoe",
-        email: "john.doe@example.com",
-        bio: "Frontend developer with 5+ years of experience",
-        terms: true,
-      },
+// Helper: shows FormMessage in error state without triggering a full form submit
+function ErrorMessageDemo() {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: { username: "", email: "", bio: "", terms: false },
+  })
+
+  useEffect(() => {
+    form.setError("username", {
+      type: "manual",
+      message: "Username is already taken.",
     })
+  }, [form])
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="username"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Username</FormLabel>
+            <FormControl>
+              <Input placeholder="your_handle" variant="error" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  )
+}
+
+// ─── 2. States ───────────────────────────────────────────────────────────────
 
+export const States: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "FormField in four distinct states: pristine (no interaction), valid (passes validation), error (validation failure with message), and warning (advisory notice via FormDescription).",
+      },
+    },
+  },
+  render: () => {
     return (
-      <Form {...form}>
-        <form className="w-full max-w-md space-y-6">
-          <FormField
-            control={form.control}
-            name="username"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Username</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input type="email" {...field} />
-                </FormControl>
-                <FormDescription>
-                  We'll never share your email with anyone else.
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="bio"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Bio</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>
-                  Your bio will appear on your profile.
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="terms"
-            render={({ field }) => (
-              <FormItem className="flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4">
-                <FormControl>
-                  <Checkbox
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-                <div className="space-y-1 leading-none">
-                  <FormLabel>Accept terms and conditions</FormLabel>
-                  <FormDescription>
-                    You agree to our Terms of Service and Privacy Policy.
-                  </FormDescription>
-                </div>
-              </FormItem>
-            )}
-          />
-        </form>
-      </Form>
+      <div className="w-full max-w-md space-y-8">
+        {/* Pristine */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-3 font-medium">
+            Pristine
+          </h4>
+          <PristineField />
+        </div>
+
+        {/* Valid */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-3 font-medium">
+            Valid
+          </h4>
+          <ValidField />
+        </div>
+
+        {/* Error */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-3 font-medium">
+            Error
+          </h4>
+          <ErrorField />
+        </div>
+
+        {/* Warning */}
+        <div>
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-3 font-medium">
+            Warning (advisory)
+          </h4>
+          <WarningField />
+        </div>
+      </div>
     )
   },
 }
+
+function PristineField() {
+  const form = useForm({ defaultValues: { email: "" } })
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="email"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                placeholder="you@example.com"
+                fullWidth
+                {...field}
+              />
+            </FormControl>
+            <FormDescription>
+              Enter the email address associated with your account.
+            </FormDescription>
+          </FormItem>
+        )}
+      />
+    </Form>
+  )
+}
+
+function ValidField() {
+  const form = useForm({ defaultValues: { email: "user@example.com" } })
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="email"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input type="email" variant="success" fullWidth {...field} />
+            </FormControl>
+            <FormDescription>Email address is valid.</FormDescription>
+          </FormItem>
+        )}
+      />
+    </Form>
+  )
+}
+
+function ErrorField() {
+  const form = useForm<{ email: string }>({
+    resolver: zodResolver(z.object({ email: z.string().email() })),
+    defaultValues: { email: "" },
+  })
+
+  useEffect(() => {
+    form.setError("email", {
+      type: "manual",
+      message: "Please enter a valid email address.",
+    })
+  }, [form])
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="email"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                placeholder="you@example.com"
+                variant="error"
+                fullWidth
+                {...field}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  )
+}
+
+function WarningField() {
+  const form = useForm({ defaultValues: { password: "abc" } })
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="password"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Password</FormLabel>
+            <FormControl>
+              <Input type="password" variant="warning" fullWidth {...field} />
+            </FormControl>
+            <FormDescription>
+              Password is weak — use at least 8 characters including a number.
+            </FormDescription>
+          </FormItem>
+        )}
+      />
+    </Form>
+  )
+}
+
+// ─── 3. Interactive ──────────────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A live profile-edit form with Zod + React Hook Form. Errors appear in real time as you interact with each field. Try submitting with empty or invalid values to see FormMessage in action.",
+      },
+    },
+  },
+  render: () => <ProfileForm />,
+}
+
+function ProfileForm() {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: { username: "", email: "", bio: "", terms: false },
+    mode: "onChange",
+  })
+
+  const [submitted, setSubmitted] = React.useState<ProfileFormValues | null>(
+    null
+  )
+
+  function handleSubmit(values: ProfileFormValues) {
+    setSubmitted(values)
+  }
+
+  return (
+    <div className="w-full p-8">
+      <div className="mx-auto max-w-3xl space-y-6">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+          {/* Controls panel */}
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+            <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+              Form State
+            </p>
+            <div className="space-y-3">
+              <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border p-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-1 font-medium">
+                  Is Valid
+                </p>
+                <p className="text-fm-primary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                  {form.formState.isValid ? "true" : "false"}
+                </p>
+              </div>
+              <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border p-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-1 font-medium">
+                  Is Submitted
+                </p>
+                <p className="text-fm-primary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                  {form.formState.isSubmitted ? "true" : "false"}
+                </p>
+              </div>
+              <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border p-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-1 font-medium">
+                  Error Count
+                </p>
+                <p className="text-fm-primary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                  {Object.keys(form.formState.errors).length}
+                </p>
+              </div>
+            </div>
+            <div className="border-fm-divider-secondary border-t pt-4" />
+            {submitted && (
+              <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border p-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mb-1 font-medium">
+                  Last Submission
+                </p>
+                <p className="text-fm-primary text-fm-sm leading-fm-sm font-(--font-fm-mono) break-all">
+                  {submitted.username} / {submitted.email}
+                </p>
+              </div>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                form.reset()
+                setSubmitted(null)
+              }}
+              className="w-full"
+            >
+              Reset Form
+            </Button>
+          </div>
+
+          {/* Preview stage */}
+          <div className="flex flex-col gap-3 lg:col-span-2">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleSubmit)}
+                className="space-y-5"
+              >
+                {/* Username */}
+                <FormField
+                  control={form.control}
+                  name="username"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      <FormLabel>Username</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="your_handle"
+                          variant={
+                            fieldState.error
+                              ? "error"
+                              : fieldState.isDirty && !fieldState.error
+                                ? "success"
+                                : "default"
+                          }
+                          fullWidth
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Your public display name (min 2 characters).
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Email */}
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="email"
+                          placeholder="you@example.com"
+                          variant={
+                            fieldState.error
+                              ? "error"
+                              : fieldState.isDirty && !fieldState.error
+                                ? "success"
+                                : "default"
+                          }
+                          fullWidth
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Bio */}
+                <FormField
+                  control={form.control}
+                  name="bio"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      <FormControl>
+                        <TextArea
+                          label="Bio"
+                          placeholder="Tell us about yourself (optional, max 160 chars)"
+                          variant={fieldState.error ? "error" : "default"}
+                          maxLength={160}
+                          showCharCount
+                          decoration="outline"
+                          fullWidth
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Terms */}
+                <FormField
+                  control={form.control}
+                  name="terms"
+                  render={({ field }) => (
+                    <FormItem className="border-fm-divider-secondary flex flex-row flex-wrap items-start space-y-0 space-x-3 rounded-md border p-4">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Accept terms and conditions</FormLabel>
+                        <FormDescription>
+                          You agree to our Terms of Service and Privacy Policy.
+                        </FormDescription>
+                      </div>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Button type="submit" className="w-full">
+                  Save Profile
+                </Button>
+              </form>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}