From abc5f5f2bc7d9e1762f0897996b7609a7b77c78c Mon Sep 17 00:00:00 2001
From: Ahmed <ahmedmayara789@gmail.com>
Date: Mon, 11 Sep 2023 15:24:15 +0100
Subject: [PATCH] feat: add account and appearance sections in forms example

---
 .../www/src/content/examples/forms/account.md |   5 +
 .../src/content/examples/forms/appearance.md  |   5 +
 .../src/content/examples/forms/appearence.md  |   0
 apps/www/src/examples/forms/Account.vue       |  10 +
 apps/www/src/examples/forms/Appearance.vue    |  10 +
 apps/www/src/examples/forms/Example.vue       | 174 +-----------------
 .../examples/forms/components/AccountForm.vue | 158 ++++++++++++++++
 .../forms/components/AppearanceForm.vue       | 169 +++++++++++++++++
 .../examples/forms/components/ProfileForm.vue | 152 +++++++++++++++
 .../examples/forms/layouts/FormsLayout.vue    |  28 +++
 .../default/ui/radio-group/RadioGroup.vue     |  10 +-
 .../new-york/ui/select/SelectContent.vue      |   2 +-
 .../new-york/ui/select/SelectTrigger.vue      |   2 +-
 apps/www/tailwind.config.js                   |   4 +
 14 files changed, 555 insertions(+), 174 deletions(-)
 create mode 100644 apps/www/src/content/examples/forms/appearance.md
 delete mode 100644 apps/www/src/content/examples/forms/appearence.md
 create mode 100644 apps/www/src/examples/forms/Account.vue
 create mode 100644 apps/www/src/examples/forms/Appearance.vue
 create mode 100644 apps/www/src/examples/forms/components/AppearanceForm.vue
 create mode 100644 apps/www/src/examples/forms/components/ProfileForm.vue
 create mode 100644 apps/www/src/examples/forms/layouts/FormsLayout.vue

diff --git a/apps/www/src/content/examples/forms/account.md b/apps/www/src/content/examples/forms/account.md
index e69de29b..2561b69c 100644
--- a/apps/www/src/content/examples/forms/account.md
+++ b/apps/www/src/content/examples/forms/account.md
@@ -0,0 +1,5 @@
+<script setup>
+import AccountExample from "@/examples/forms/Account.vue"
+</script>
+
+<AccountExample />
\ No newline at end of file
diff --git a/apps/www/src/content/examples/forms/appearance.md b/apps/www/src/content/examples/forms/appearance.md
new file mode 100644
index 00000000..964013ff
--- /dev/null
+++ b/apps/www/src/content/examples/forms/appearance.md
@@ -0,0 +1,5 @@
+<script setup>
+import AppearanceExample from "@/examples/forms/Appearance.vue"
+</script>
+
+<AppearanceExample />
\ No newline at end of file
diff --git a/apps/www/src/content/examples/forms/appearence.md b/apps/www/src/content/examples/forms/appearence.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/www/src/examples/forms/Account.vue b/apps/www/src/examples/forms/Account.vue
new file mode 100644
index 00000000..bb3d6f97
--- /dev/null
+++ b/apps/www/src/examples/forms/Account.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import AccountForm from './components/AccountForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <AccountForm />
+  </FormsLayout>
+</template>
diff --git a/apps/www/src/examples/forms/Appearance.vue b/apps/www/src/examples/forms/Appearance.vue
new file mode 100644
index 00000000..f678c509
--- /dev/null
+++ b/apps/www/src/examples/forms/Appearance.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import AppearanceForm from './components/AppearanceForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <AppearanceForm />
+  </FormsLayout>
+</template>
diff --git a/apps/www/src/examples/forms/Example.vue b/apps/www/src/examples/forms/Example.vue
index 2664a528..34171518 100644
--- a/apps/www/src/examples/forms/Example.vue
+++ b/apps/www/src/examples/forms/Example.vue
@@ -1,174 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as z from 'zod'
-import SidebarNav from './components/SidebarNav.vue'
-import { cn } from '@/lib/utils'
-
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { Button } from '@/lib/registry/default/ui/button'
-
-const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
-
-const profileForm = ref({
-  username: '',
-  email: '',
-  bio: 'I own a computer.',
-  urls: [
-    { value: 'https://shadcn.com' },
-    { value: 'http://twitter.com/shadcn' },
-  ],
-})
-
-const profileFormSchema = z.object({
-  username: z
-    .string()
-    .min(2, {
-      message: 'Username must be at least 2 characters.',
-    })
-    .max(30, {
-      message: 'Username must not be longer than 30 characters.',
-    }),
-  email: z
-    .string({
-      required_error: 'Please select an email to display.',
-    })
-    .email(),
-  bio: z.string().max(160, { message: 'Bio must not be longer than 160 characters.' }).min(4, { message: 'Bio must be at least 2 characters.' }),
-  urls: z
-    .array(
-      z.object({
-        value: z.string().url({ message: 'Please enter a valid URL.' }),
-      }),
-    )
-    .optional(),
-})
-
-type ProfileFormValues = z.infer<typeof profileFormSchema>
-const errors = ref<z.ZodFormattedError<ProfileFormValues> | null>(null)
-
-async function handleSubmit() {
-  const result = profileFormSchema.safeParse(profileForm.value)
-  if (!result.success) {
-    errors.value = result.error.format()
-    return
-  }
-  errors.value = null
-  console.log('Form submitted!')
-}
+import FormsLayout from './layouts/FormsLayout.vue'
+import ProfileForm from './components/ProfileForm.vue'
 </script>
 
 <template>
-  <div class="md:hidden" />
-  <div class="hidden space-y-6 p-10 pb-16 md:block">
-    <div class="space-y-0.5">
-      <h2 class="text-2xl font-bold tracking-tight">
-        Settings
-      </h2>
-      <p class="text-muted-foreground">
-        Manage your account settings and set e-mail preferences.
-      </p>
-    </div>
-    <Separator class="my-6" />
-    <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-      <aside class="-mx-4 lg:w-1/5">
-        <SidebarNav />
-      </aside>
-      <div class="flex-1 lg:max-w-2xl">
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-lg font-medium">
-              Profile
-            </h3>
-            <p class="text-sm text-muted-foreground">
-              This is how others will see you on the site.
-            </p>
-          </div>
-          <Separator />
-          <form class="space-y-8" @submit.prevent="handleSubmit">
-            <div class="grid gap-2">
-              <Label for="username" :class="cn('text-sm', errors?.username && 'text-destructive')">
-                Username
-              </Label>
-              <Input id="username" v-model="profileForm.username" placeholder="shadcn" />
-              <span class="text-muted-foreground text-sm">
-                This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.
-              </span>
-              <div v-if="errors?.username" class="text-sm text-destructive">
-                <span v-for="error in errors.username._errors" :key="error">{{ error }}</span>
-              </div>
-            </div>
-            <div class="grid gap-2">
-              <Label for="email" :class="cn('text-sm', errors?.email && 'text-destructive')">
-                Email
-              </Label>
-              <Select id="email" v-model="profileForm.email">
-                <SelectTrigger>
-                  <SelectValue placeholder="Select an email" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem v-for="email in verifiedEmails" :key="email" :value="email">
-                      {{ email }}
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <span class="text-muted-foreground text-sm">
-                You can manage verified email addresses in your email settings.
-              </span>
-              <div v-if="errors?.email" class="text-sm text-destructive">
-                <span v-for="error in errors.email._errors" :key="error">{{ error }}</span>
-              </div>
-            </div>
-            <div class="grid gap-2">
-              <Label for="bio" :class="cn('text-sm', errors?.bio && 'text-destructive')">
-                Bio
-              </Label>
-              <Textarea id="bio" v-model="profileForm.bio" placeholder="Tell us about yourself." />
-              <span class="text-muted-foreground text-sm">
-                You can @mention other users and organizations to link to them.
-              </span>
-              <div v-if="errors?.bio" class="text-sm text-destructive">
-                <span v-for="error in errors.bio._errors" :key="error">{{ error }}</span>
-              </div>
-            </div>
-            <div class="grid gap-2">
-              <Label for="urls" :class="cn('text-sm', errors?.urls && 'text-destructive')">
-                URLs
-              </Label>
-              <Input v-for="(url, index) in profileForm.urls" id="urls" :key="index" v-model="url.value" />
-              <div v-if="errors?.urls" class="text-sm text-destructive">
-                <span v-for="error in errors.urls._errors" :key="error">{{ error }}</span>
-              </div>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                class="text-xs w-20 mt-2"
-                @click="profileForm.urls?.push({ value: '' })"
-              >
-                Add URL
-              </Button>
-            </div>
-            <div class="flex justify-start">
-              <Button type="submit">
-                Update profile
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
+  <FormsLayout>
+    <ProfileForm />
+  </FormsLayout>
 </template>
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index e69de29b..4f203ef8 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { format } from 'date-fns'
+import { cn } from '@/lib/utils'
+
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+
+const accountForm = ref({
+  name: '',
+  dob: null,
+  language: '',
+})
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const accountFormSchema = z.object({
+  name: z
+    .string()
+    .min(2, {
+      message: 'Name must be at least 2 characters.',
+    })
+    .max(30, {
+      message: 'Name must not be longer than 30 characters.',
+    }),
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+  language: z.string().nonempty({
+    message: 'Please select a language.',
+  }),
+})
+
+type AccountFormValues = z.infer<typeof accountFormSchema>
+const errors = ref<z.ZodFormattedError<AccountFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = accountFormSchema.safeParse(accountForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', accountForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Account
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Update your account settings. Set your preferred language and timezone.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="name" :class="cn('text-sm', errors?.name && 'text-destructive')">
+        Name
+      </Label>
+      <Input id="name" v-model="accountForm.name" placeholder="Your name" />
+      <span class="text-muted-foreground text-sm">
+        This is the name that will be displayed on your profile and in emails.
+      </span>
+      <div v-if="errors?.name" class="text-sm text-destructive">
+        <span v-for="error in errors.name._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="dob" :class="cn('text-sm', errors?.dob && 'text-destructive')">
+        Date of Birth
+      </Label>
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            :class="cn(
+              'w-[280px] pl-3 text-left font-normal',
+              !accountForm.dob && 'text-muted-foreground',
+            )"
+          >
+            <span>{{ accountForm.dob ? format(accountForm.dob, "PPP") : "Pick a date" }}</span>
+            <RadixIconsCalendar class="ml-auto h-4 w-4 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+          <Calendar v-model="accountForm.dob" />
+        </PopoverContent>
+      </Popover>
+      <span class="text-muted-foreground text-sm">
+        Your date of birth is used to calculate your age.
+      </span>
+      <div v-if="errors?.dob" class="text-sm text-destructive">
+        <span v-for="error in errors.dob._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="language" :class="cn('text-sm', errors?.language && 'text-destructive')">
+        Language
+      </Label>
+      <Select id="language" v-model="accountForm.language">
+        <SelectTrigger class="w-[200px]">
+          <SelectValue placeholder="Select a language" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem v-for="language in languages" :key="language.value" :value="language.value">
+              {{ language.label }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-sm">
+        This is the language that will be used in the dashboard.
+      </span>
+      <div v-if="errors?.language" class="text-sm text-destructive">
+        <span v-for="error in errors.language._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update account
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
new file mode 100644
index 00000000..a8a79a20
--- /dev/null
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const appearenceForm = ref({
+  theme: '',
+  font: '',
+})
+
+const appearanceFormSchema = z.object({
+  theme: z.enum(['light', 'dark'], {
+    required_error: 'Please select a theme.',
+  }),
+  font: z.enum(['inter', 'manrope', 'system'], {
+    invalid_type_error: 'Select a font',
+    required_error: 'Please select a font.',
+  }),
+})
+
+type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
+const errors = ref<z.ZodFormattedError<AppearanceFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = appearanceFormSchema.safeParse(appearenceForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', appearenceForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Appearence
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Customize the appearance of the app. Automatically switch between day and night themes.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="font" :class="cn('text-sm', errors?.font && 'text-destructive')">
+        Font
+      </Label>
+      <Select id="font" v-model="appearenceForm.font">
+        <SelectTrigger class="w-[200px]">
+          <SelectValue placeholder="Select a font" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="inter">
+              Inter
+            </SelectItem>
+            <SelectItem value="manrope">
+              Manrope
+            </SelectItem>
+            <SelectItem value="system">
+              System
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-xs">
+        Set the font you want to use in the dashboard.
+      </span>
+      <div v-if="errors?.font" class="text-sm text-destructive">
+        <span v-for="error in errors.font._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+
+    <div class="grid gap-2">
+      <Label for="theme" :class="cn('text-sm', errors?.theme && 'text-destructive')">
+        Theme
+      </Label>
+      <span class="text-muted-foreground text-xs">
+        Select the theme for the dashboard.
+      </span>
+      <RadioGroup
+        v-model="appearenceForm.theme"
+        default-value="light"
+        class="grid max-w-md grid-cols-2 gap-8 pt-2"
+      >
+        <div class="grid gap-2">
+          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <div>
+              <RadioGroupItem value="light" class="sr-only" />
+            </div>
+            <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+              <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
+                <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+              </div>
+            </div>
+            <span class="block w-full p-2 text-center font-normal">
+              Light
+            </span>
+          </Label>
+        </div>
+        <div>
+          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <div>
+              <RadioGroupItem value="dark" class="sr-only" />
+            </div>
+            <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+              <div class="space-y-2 rounded-sm bg-slate-950 p-2">
+                <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-2 w-[80px] rounded-lg bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+              </div>
+            </div>
+            <span class="block w-full p-2 text-center font-normal">
+              Dark
+            </span>
+          </Label>
+        </div>
+
+        <div class="col-span-2">
+          <span v-if="errors?.theme" class="text-sm text-destructive">
+            <span v-for="error in errors.theme._errors" :key="error">{{ error }}</span>
+          </span>
+        </div>
+      </RadioGroup>
+    </div>
+
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update preferences
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue
new file mode 100644
index 00000000..7fdb783f
--- /dev/null
+++ b/apps/www/src/examples/forms/components/ProfileForm.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
+
+const profileForm = ref({
+  username: '',
+  email: '',
+  bio: 'I own a computer.',
+  urls: [
+    { value: 'https://shadcn.com' },
+    { value: 'http://twitter.com/shadcn' },
+  ],
+})
+
+const profileFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, {
+      message: 'Username must be at least 2 characters.',
+    })
+    .max(30, {
+      message: 'Username must not be longer than 30 characters.',
+    }),
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+  bio: z.string().max(160, { message: 'Bio must not be longer than 160 characters.' }).min(4, { message: 'Bio must be at least 2 characters.' }),
+  urls: z
+    .array(
+      z.object({
+        value: z.string().url({ message: 'Please enter a valid URL.' }),
+      }),
+    )
+    .optional(),
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+const errors = ref<z.ZodFormattedError<ProfileFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = profileFormSchema.safeParse(profileForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    return
+  }
+  errors.value = null
+  console.log('Form submitted!')
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Profile
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      This is how others will see you on the site.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="username" :class="cn('text-sm', errors?.username && 'text-destructive')">
+        Username
+      </Label>
+      <Input id="username" v-model="profileForm.username" placeholder="shadcn" />
+      <span class="text-muted-foreground text-sm">
+        This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.
+      </span>
+      <div v-if="errors?.username" class="text-sm text-destructive">
+        <span v-for="error in errors.username._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="email" :class="cn('text-sm', errors?.email && 'text-destructive')">
+        Email
+      </Label>
+      <Select id="email" v-model="profileForm.email">
+        <SelectTrigger>
+          <SelectValue placeholder="Select an email" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem v-for="email in verifiedEmails" :key="email" :value="email">
+              {{ email }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-sm">
+        You can manage verified email addresses in your email settings.
+      </span>
+      <div v-if="errors?.email" class="text-sm text-destructive">
+        <span v-for="error in errors.email._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="bio" :class="cn('text-sm', errors?.bio && 'text-destructive')">
+        Bio
+      </Label>
+      <Textarea id="bio" v-model="profileForm.bio" placeholder="Tell us about yourself." />
+      <span class="text-muted-foreground text-sm">
+        You can @mention other users and organizations to link to them.
+      </span>
+      <div v-if="errors?.bio" class="text-sm text-destructive">
+        <span v-for="error in errors.bio._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="urls" :class="cn('text-sm', errors?.urls && 'text-destructive')">
+        URLs
+      </Label>
+      <Input v-for="(url, index) in profileForm.urls" id="urls" :key="index" v-model="url.value" />
+      <div v-if="errors?.urls" class="text-sm text-destructive">
+        <span v-for="error in errors.urls._errors" :key="error">{{ error }}</span>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="text-xs w-20 mt-2"
+        @click="profileForm.urls?.push({ value: '' })"
+      >
+        Add URL
+      </Button>
+    </div>
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update profile
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/apps/www/src/examples/forms/layouts/FormsLayout.vue b/apps/www/src/examples/forms/layouts/FormsLayout.vue
new file mode 100644
index 00000000..e1011941
--- /dev/null
+++ b/apps/www/src/examples/forms/layouts/FormsLayout.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import SidebarNav from '../components/SidebarNav.vue'
+</script>
+
+<template>
+  <div class="md:hidden" />
+  <div class="hidden space-y-6 p-10 pb-16 md:block">
+    <div class="space-y-0.5">
+      <h2 class="text-2xl font-bold tracking-tight">
+        Settings
+      </h2>
+      <p class="text-muted-foreground">
+        Manage your account settings and set e-mail preferences.
+      </p>
+    </div>
+    <Separator class="my-6" />
+    <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+      <aside class="-mx-4 lg:w-1/5">
+        <SidebarNav />
+      </aside>
+      <div class="flex-1 lg:max-w-2xl">
+        <div class="space-y-6">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
index 0bc73d5d..8968f85a 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<RadioGroupRootProps & { class?: string }>()
+
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="props">
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
     <slot />
   </RadioGroupRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index 1f2610c8..8a05145f 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -33,7 +33,7 @@ const emitsAsProps = useEmitAsProps(emits)
     >
       <SelectViewport
         :class="
-          cn('p-1',
+          cn('p-0',
              position === 'popper'
                && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
       >
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 3fb1cb46..086e5396 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       ),
       props.invalid
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index b6fb15c1..9b724e9c 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -5,6 +5,10 @@ export default {
   darkMode: 'class',
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
+    fontFamily: {
+      sans: ['Inter', 'sans-serif'],
+      mono: ['JetBrains Mono', 'monospace'],
+    },
     container: {
       center: true,
       padding: '2rem',