chore: typos (#519)

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -123,7 +123,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     }
   })
 
-  // @ts-expect-error componentName migth not exist in Index
+  // @ts-expect-error componentName might not exist in Index
   const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils')
 
   const files = {

apps/www/src/content/docs/components/form.md

@@ -23,7 +23,7 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
 - Composable components for building forms.
 - A `<FormField />` component for building controlled form fields.
 - Form validation using `zod`.
-- Applies the correct `aria` attributes to form fields based on states, handle unqiue IDs
+- Applies the correct `aria` attributes to form fields based on states, handle unique IDs
 - Built to work with all Radix Vue components.
 - Bring your own schema library. We use `zod` but you can use any other supported schema validation you want, like [`yup`](https://github.com/jquense/yup) or [`valibot`](https://valibot.dev/).
 - **You have full control over the markup and styling.**

apps/www/src/content/docs/contribution.md

@@ -176,7 +176,7 @@ To do so, we have a helper function named [`useForwardPropsEmits`](https://www.r
 To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
 computed object that combines the parsed props and emits as props.
 
-Here's an example from `Accordian` root component.
+Here's an example from `Accordion` root component.
 
 ```vue
 <script setup lang="ts">
@@ -200,7 +200,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </template>
 ```
 
-As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntaxt.
+As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax.
 
 ### CSS Classes
 There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `radix-vue` component via `cn` utility function.

apps/www/src/examples/forms/components/AppearanceForm.vue

@@ -41,7 +41,7 @@ const onSubmit = handleSubmit((values) => {
 <template>
   <div>
     <h3 class="text-lg font-medium">
-      Appearence
+      Appearance
     </h3>
     <p class="text-sm text-muted-foreground">
       Customize the appearance of the app. Automatically switch between day and night themes.

apps/www/src/examples/music/components/Menu.vue

@@ -218,7 +218,7 @@ import {
         </MenubarRadioGroup>
         <MenubarSeparator />
         <MenubarItem inset>
-          Manage Famliy...
+          Manage Family...
         </MenubarItem>
         <MenubarSeparator />
         <MenubarItem inset>

apps/www/src/lib/registry/default/example/Cards/Metric.vue

@@ -59,7 +59,7 @@ function computeLineOpacity(val: any, index: number) {
     <CardHeader>
       <CardTitle>Exercise Minutes</CardTitle>
       <CardDescription>
-        Your excercise minutes are ahead of where you normally are.
+        Your exercise minutes are ahead of where you normally are.
       </CardDescription>
     </CardHeader>
     <CardContent class="pb-4">

apps/www/src/lib/registry/default/example/CarouselPlugin.vue

@@ -15,7 +15,7 @@ const plugin = Autoplay({
     class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
-    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Running')];"
   >
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">

apps/www/src/lib/registry/new-york/example/Cards/Metric.vue

@@ -59,7 +59,7 @@ function computeLineOpacity(val: any, index: number) {
     <CardHeader>
       <CardTitle>Exercise Minutes</CardTitle>
       <CardDescription>
-        Your excercise minutes are ahead of where you normally are.
+        Your exercise minutes are ahead of where you normally are.
       </CardDescription>
     </CardHeader>
     <CardContent class="pb-4">

apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue

@@ -15,7 +15,7 @@ const plugin = Autoplay({
     class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
-    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Running')];"
   >
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">