From cd3a058d7e64dfc00c289fb9d84a7a854e6e5ee2 Mon Sep 17 00:00:00 2001
From: Behon Baker <53905713+BayBreezy@users.noreply.github.com>
Date: Sun, 18 Aug 2024 16:53:09 -0500
Subject: [PATCH] style(format & lint): format & lint codebase

---
 components/Ui/Command/Input.vue               |   2 +-
 components/Ui/CurrencyInput.vue               |   3 +-
 components/Ui/Input.vue                       |   3 +-
 .../content/Block/Error/BlockErrorImage.vue   |   3 +-
 components/content/Block/Hero/BlockHero1.vue  |   3 +-
 components/content/Block/Hero/BlockHero2.vue  |   3 +-
 components/content/Block/Hero/BlockHero3.vue  |   3 +-
 components/content/Block/Hero/BlockHero4.vue  |   6 +-
 components/content/Block/Hero/BlockHero5.vue  |   6 +-
 components/content/Block/Hero/BlockHero6.vue  |   6 +-
 components/content/Block/Hero/BlockHero7.vue  |   3 +-
 .../Block/Navigation/BlockNavigation1.vue     |   3 +-
 .../Block/Navigation/BlockNavigation2.vue     |   3 +-
 .../Block/Navigation/BlockNavigation3.vue     |   9 +-
 .../Docs/AspectRatio/DocsAspectRatio.vue      |   3 +-
 .../content/Docs/Drawer/DocsDrawerImage.vue   |   3 +-
 .../NavigationMenu/DocsNavigationMenu.vue     |   6 +-
 .../DocsNavigationMenuVertical.vue            |   6 +-
 server/utils/comp.ts                          | 236 +++++++++---------
 19 files changed, 167 insertions(+), 143 deletions(-)

diff --git a/components/Ui/Command/Input.vue b/components/Ui/Command/Input.vue
index d35a582..dea9a6a 100644
--- a/components/Ui/Command/Input.vue
+++ b/components/Ui/Command/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div class="flex items-center border-b px-3">
     <Icon :name="icon || 'lucide:search'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="$attrs"
diff --git a/components/Ui/CurrencyInput.vue b/components/Ui/CurrencyInput.vue
index c56be96..6b0bf49 100644
--- a/components/Ui/CurrencyInput.vue
+++ b/components/Ui/CurrencyInput.vue
@@ -1,5 +1,6 @@
 <template>
-  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />
 </template>
 
 <script lang="ts" setup>
diff --git a/components/Ui/Input.vue b/components/Ui/Input.vue
index ed8f1d8..5bbe054 100644
--- a/components/Ui/Input.vue
+++ b/components/Ui/Input.vue
@@ -1,5 +1,6 @@
 <template>
-  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
diff --git a/components/content/Block/Error/BlockErrorImage.vue b/components/content/Block/Error/BlockErrorImage.vue
index ddac8a1..683b653 100644
--- a/components/content/Block/Error/BlockErrorImage.vue
+++ b/components/content/Block/Error/BlockErrorImage.vue
@@ -8,11 +8,12 @@
       </div>
     </div>
     <div class="hidden h-screen md:block md:w-1/2 lg:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         src="https://images.unsplash.com/photo-1512551980832-13df02babc9e?q=60&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Login form image"
         class="size-full object-cover"
-      >
+      />
     </div>
   </div>
 </template>
diff --git a/components/content/Block/Hero/BlockHero1.vue b/components/content/Block/Hero/BlockHero1.vue
index 6f97e20..110ed2b 100644
--- a/components/content/Block/Hero/BlockHero1.vue
+++ b/components/content/Block/Hero/BlockHero1.vue
@@ -31,6 +31,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover"
         src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -39,7 +40,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>
diff --git a/components/content/Block/Hero/BlockHero2.vue b/components/content/Block/Hero/BlockHero2.vue
index 3285cb6..a6ce791 100644
--- a/components/content/Block/Hero/BlockHero2.vue
+++ b/components/content/Block/Hero/BlockHero2.vue
@@ -25,6 +25,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover lg:[clip-path:polygon(15%_0,100%_0,100%_100%,0_100%)]"
         src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -33,7 +34,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section two header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>
diff --git a/components/content/Block/Hero/BlockHero3.vue b/components/content/Block/Hero/BlockHero3.vue
index 322fc2d..509c758 100644
--- a/components/content/Block/Hero/BlockHero3.vue
+++ b/components/content/Block/Hero/BlockHero3.vue
@@ -51,6 +51,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-tl-[60px] object-cover lg:rounded-tl-[160px]"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -59,7 +60,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section three header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>
diff --git a/components/content/Block/Hero/BlockHero4.vue b/components/content/Block/Hero/BlockHero4.vue
index e552514..97a5ba1 100644
--- a/components/content/Block/Hero/BlockHero4.vue
+++ b/components/content/Block/Hero/BlockHero4.vue
@@ -8,6 +8,7 @@
     <div
       class="absolute inset-y-0 right-5 -z-[1] hidden h-full md:block md:w-[400px] lg:w-[700px] xl:w-[800px]"
     >
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover shadow lg:rounded-bl-[150px] lg:rounded-tr-[150px]"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -16,7 +17,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
     <div class="flex h-full items-center justify-center lg:w-[768px]">
       <div>
@@ -37,6 +38,7 @@
       </div>
     </div>
     <div class="h-[300px] md:hidden">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-bl-[40px] rounded-tr-[40px] object-cover"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -45,7 +47,7 @@
         width="700"
         height="300"
         :title="`${COMPANY_NAME} hero section four header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>
diff --git a/components/content/Block/Hero/BlockHero5.vue b/components/content/Block/Hero/BlockHero5.vue
index 54bd890..c6ba3e0 100644
--- a/components/content/Block/Hero/BlockHero5.vue
+++ b/components/content/Block/Hero/BlockHero5.vue
@@ -8,6 +8,7 @@
     <div
       class="absolute inset-y-0 right-5 -z-[1] hidden h-full md:block md:w-[450px] lg:w-[700px] xl:w-[800px]"
     >
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-lg object-cover shadow"
         src="https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -16,7 +17,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
     <div class="flex h-full items-center justify-center md:w-[550px] lg:w-[768px]">
       <div>
@@ -71,6 +72,7 @@
       </div>
     </div>
     <div class="h-[300px] md:hidden">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-bl-[70px] rounded-tr-[70px] object-cover"
         src="https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -79,7 +81,7 @@
         width="700"
         height="300"
         :title="`${COMPANY_NAME} hero section four header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>
diff --git a/components/content/Block/Hero/BlockHero6.vue b/components/content/Block/Hero/BlockHero6.vue
index c086b15..64479df 100644
--- a/components/content/Block/Hero/BlockHero6.vue
+++ b/components/content/Block/Hero/BlockHero6.vue
@@ -18,7 +18,8 @@
     <div class="flex h-full items-center justify-center text-center md:w-1/2 md:text-left">
       <div>
         <h1 class="mb-4 text-4xl font-bold md:text-5xl lg:mb-6 lg:mt-5 xl:text-6xl">
-          Super simplified <br >
+          <!-- eslint-disable-next-line vue/html-self-closing -->
+          Super simplified <br />
           customer service
         </h1>
         <p class="text-lg text-muted-foreground lg:text-xl">
@@ -53,13 +54,14 @@
       <div
         class="w-full rounded-md bg-muted/50 px-4 py-10 ring-1 ring-muted/30 dark:bg-muted/5 md:px-10 lg:w-[440px] lg:px-10"
       >
+        <!-- eslint-disable-next-line vue/html-self-closing -->
         <img
           src="/icon.png"
           fit="contain"
           alt="Company Logo"
           title="Company Logo"
           class="mx-auto h-11 object-contain"
-        >
+        />
         <h2 class="text-center text-2xl font-semibold lg:mt-6 lg:text-3xl">Create an account</h2>
         <p class="mt-3 text-center text-muted-foreground">Get started with {{ COMPANY_NAME }}</p>
 
diff --git a/components/content/Block/Hero/BlockHero7.vue b/components/content/Block/Hero/BlockHero7.vue
index 0725aae..7cdd08b 100644
--- a/components/content/Block/Hero/BlockHero7.vue
+++ b/components/content/Block/Hero/BlockHero7.vue
@@ -8,7 +8,8 @@
     </div>
 
     <h1 class="mb-4 mt-7 text-4xl font-bold lg:mb-6 lg:mt-5 lg:text-center lg:text-5xl xl:text-6xl">
-      High-performing remote teams.<br >The future of work.
+      <!-- eslint-disable-next-line vue/html-self-closing -->
+      High-performing remote teams.<br />The future of work.
     </h1>
     <p class="mx-auto max-w-[760px] text-lg text-muted-foreground lg:text-center lg:text-xl">
       Powerful, self-serve team engagement tools and analytics. Supercharge your managers & keep
diff --git a/components/content/Block/Navigation/BlockNavigation1.vue b/components/content/Block/Navigation/BlockNavigation1.vue
index 08f5947..3eee5f8 100644
--- a/components/content/Block/Navigation/BlockNavigation1.vue
+++ b/components/content/Block/Navigation/BlockNavigation1.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">
diff --git a/components/content/Block/Navigation/BlockNavigation2.vue b/components/content/Block/Navigation/BlockNavigation2.vue
index 67eb8c9..d0174db 100644
--- a/components/content/Block/Navigation/BlockNavigation2.vue
+++ b/components/content/Block/Navigation/BlockNavigation2.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">
diff --git a/components/content/Block/Navigation/BlockNavigation3.vue b/components/content/Block/Navigation/BlockNavigation3.vue
index c8d8365..a1f7291 100644
--- a/components/content/Block/Navigation/BlockNavigation3.vue
+++ b/components/content/Block/Navigation/BlockNavigation3.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">
@@ -31,6 +32,7 @@
                           class="group flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:hover:bg-muted/20"
                         >
                           <div class="h-[80px] w-[800px] overflow-hidden rounded-lg shadow-sm">
+                            <!-- eslint-disable-next-line vue/html-self-closing -->
                             <img
                               loading="lazy"
                               :src="`http://unsplash.it/400/90?random=${b}&gravity=center.webp`"
@@ -38,7 +40,7 @@
                               width="400"
                               height="90"
                               class="h-full w-[400px] object-cover transition hover:scale-110 group-hover:scale-110"
-                            >
+                            />
                           </div>
                           <div class="flex flex-col gap-1.5 leading-none">
                             <p class="text-sm font-semibold">Auto layout explained</p>
@@ -108,6 +110,7 @@
                                 class="flex flex-col gap-5 rounded-md transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:hover:bg-muted/20"
                               >
                                 <div class="h-[200px] w-full overflow-hidden rounded-lg shadow-sm">
+                                  <!-- eslint-disable-next-line vue/html-self-closing -->
                                   <img
                                     :src="`http://unsplash.it/400/210?random=${b}&gravity=center.webp`"
                                     alt="Random blog image"
@@ -115,7 +118,7 @@
                                     loading="lazy"
                                     height="200"
                                     class="h-full w-full object-cover transition hover:scale-110 group-hover:scale-110"
-                                  >
+                                  />
                                 </div>
                                 <div class="flex flex-col gap-1.5 leading-none">
                                   <p class="line-clamp-1 overflow-ellipsis font-semibold">
diff --git a/components/content/Docs/AspectRatio/DocsAspectRatio.vue b/components/content/Docs/AspectRatio/DocsAspectRatio.vue
index 74fefb9..1a8c2cf 100644
--- a/components/content/Docs/AspectRatio/DocsAspectRatio.vue
+++ b/components/content/Docs/AspectRatio/DocsAspectRatio.vue
@@ -3,11 +3,12 @@
     <UiAspectRatio :ratio="16 / 9">
       <UiContextMenu>
         <UiContextMenuTrigger as-child>
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
             alt="Snow Lake"
             class="h-full w-full rounded-md object-cover"
-          >
+          />
         </UiContextMenuTrigger>
         <UiContextMenuContent class="w-[150px]">
           <UiContextMenuGroup>
diff --git a/components/content/Docs/Drawer/DocsDrawerImage.vue b/components/content/Docs/Drawer/DocsDrawerImage.vue
index 3e7a3c3..e841c7b 100644
--- a/components/content/Docs/Drawer/DocsDrawerImage.vue
+++ b/components/content/Docs/Drawer/DocsDrawerImage.vue
@@ -16,11 +16,12 @@
             <UiAspectRatio :ratio="16 / 9" class="mt-6">
               <UiContextMenu>
                 <UiContextMenuTrigger as-child>
+                  <!-- eslint-disable-next-line vue/html-self-closing -->
                   <img
                     src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
                     alt="Snow Lake"
                     class="h-full w-full rounded-md object-cover"
-                  >
+                  />
                 </UiContextMenuTrigger>
                 <UiContextMenuContent class="w-[150px]">
                   <UiContextMenuGroup>
diff --git a/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue b/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue
index 249fa32..19e98f9 100644
--- a/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue
+++ b/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue
@@ -6,11 +6,12 @@
           <UiNavigationMenuTrigger title="Beach day" />
           <UiNavigationMenuContent>
             <div class="grid w-[600px] grid-cols-2 gap-5 p-4">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
                 alt="Beach"
                 class="h-full w-full rounded-md object-cover"
-              >
+              />
               <ul class="flex flex-col gap-2">
                 <li
                   v-for="(item, i) in beachAmenities"
@@ -43,11 +44,12 @@
           <UiNavigationMenuTrigger title="Learn more" />
           <UiNavigationMenuContent>
             <div class="grid w-[500px] grid-cols-2 place-items-center gap-5 p-3">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://www.radix-vue.com/logo.svg"
                 alt="Radix Vue Logo"
                 class="h-full w-full"
-              >
+              />
               <div>
                 <p class="text-lg font-semibold text-foreground">Radix Vue</p>
                 <p class="mt-2 text-muted-foreground">
diff --git a/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue b/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue
index 7d05783..a8896a5 100644
--- a/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue
+++ b/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue
@@ -6,11 +6,12 @@
           <UiNavigationMenuTrigger class="w-full justify-between" title="Beach day" />
           <UiNavigationMenuContent>
             <div class="grid w-[300px] gap-5 p-4">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
                 alt="Beach"
                 class="h-[100px] w-full rounded-md object-cover"
-              >
+              />
               <ul class="flex flex-col gap-2">
                 <li
                   v-for="(item, i) in beachAmenities"
@@ -43,11 +44,12 @@
           <UiNavigationMenuTrigger class="w-full justify-between" title="Learn more" />
           <UiNavigationMenuContent>
             <div class="grid w-[300px] grid-cols-1 place-items-center gap-5 p-3">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://www.radix-vue.com/logo.svg"
                 alt="Radix Vue Logo"
                 class="h-[100px] w-[100px] rounded-md object-cover"
-              >
+              />
               <div class="text-center">
                 <p class="text-lg font-semibold text-foreground">Radix Vue</p>
                 <p class="mt-2 text-muted-foreground">
diff --git a/server/utils/comp.ts b/server/utils/comp.ts
index 6209333..d2845df 100644
--- a/server/utils/comp.ts
+++ b/server/utils/comp.ts
@@ -14,25 +14,25 @@ export default [
         fileName: "Accordion/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AccordionContent\n    v-bind="reactiveOmit(props, \'content\', \'class\')"\n    :class="styles({ class: props.class })"\n  >\n    <div class="pb-4 pt-0">\n      <slot>{{ content }}</slot>\n    </div>\n  </AccordionContent>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionContent } from "radix-vue";\n  import type { AccordionContentProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionContentProps & {\n      class?: any;\n      content?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",\n  });\n</script>\n',
+          '<template>\n  <AccordionContent v-bind="forwarded" :class="styles({ class: props.class })">\n    <div class="pb-4 pt-0">\n      <slot>{{ content }}</slot>\n    </div>\n  </AccordionContent>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionContent } from "radix-vue";\n  import type { AccordionContentProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionContentProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The content of the accordion */\n      content?: any;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class", "content");\n\n  const styles = tv({\n    base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",\n  });\n</script>\n',
       },
       {
         fileName: "Accordion/Header.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AccordionHeader v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </AccordionHeader>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionHeader } from "radix-vue";\n  import type { AccordionHeaderProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionHeaderProps & {\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex",\n  });\n</script>\n',
+          '<template>\n  <AccordionHeader v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </AccordionHeader>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionHeader } from "radix-vue";\n  import type { AccordionHeaderProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionHeaderProps & {\n      class?: any;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class");\n\n  const styles = tv({\n    base: "flex",\n  });\n</script>\n',
       },
       {
         fileName: "Accordion/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AccordionItem\n    v-slot="slotProps"\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot v-bind="slotProps" />\n  </AccordionItem>\n</template>\n\n<script setup lang="ts">\n  import { AccordionItem } from "radix-vue";\n  import type { AccordionItemProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionItemProps & {\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "border-b",\n  });\n</script>\n',
+          '<template>\n  <AccordionItem v-slot="slotProps" v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot v-bind="slotProps" />\n  </AccordionItem>\n</template>\n\n<script setup lang="ts">\n  import { AccordionItem } from "radix-vue";\n  import type { AccordionItemProps } from "radix-vue";\n\n  const props = defineProps<\n    AccordionItemProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class");\n\n  const styles = tv({\n    base: "border-b",\n  });\n</script>\n',
       },
       {
         fileName: "Accordion/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AccordionTrigger\n    v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot :props="props">\n      {{ title }}\n    </slot>\n    <slot name="icon" :props="props">\n      <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n    </slot>\n  </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionTrigger } from "radix-vue";\n  import type { AccordionTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AccordionTriggerProps & {\n        class?: any;\n        title?: string;\n        icon?: string;\n      }\n    >(),\n    {\n      class: undefined,\n      title: "",\n      icon: "lucide:chevron-down",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n  });\n</script>\n',
+          '<template>\n  <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot :props="props">\n      {{ title }}\n    </slot>\n    <slot name="icon" :props="props">\n      <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n    </slot>\n  </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { AccordionTrigger } from "radix-vue";\n  import type { AccordionTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AccordionTriggerProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The title of the accordion trigger */\n        title?: string;\n        /** The icon to show next to the title */\n        icon?: string;\n      }\n    >(),\n    {\n      class: undefined,\n      title: "",\n      icon: "lucide:chevron-down",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "icon", "title");\n\n  const styles = tv({\n    base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -54,13 +54,13 @@ export default [
         fileName: "Alert/Description.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive\n    v-bind="reactiveOmit(props, \'description\', \'class\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>{{ description }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class to add to the parent */\n        class?: any;\n        /** The description text that should be displayed */\n        description?: string;\n      }\n    >(),\n    { as: "div", class: undefined, description: undefined }\n  );\n\n  const styles = tv({\n    base: "text-sm [&_p]:leading-relaxed",\n  });\n</script>\n',
+          '<template>\n  <Primitive v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>{{ description }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class to add to the parent */\n        class?: any;\n        /** The description text that should be displayed */\n        description?: string;\n      }\n    >(),\n    { as: "div", class: undefined, description: undefined }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "description");\n\n  const styles = tv({\n    base: "text-sm [&_p]:leading-relaxed",\n  });\n</script>\n',
       },
       {
         fileName: "Alert/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive v-bind="reactiveOmit(props, \'class\', \'title\')" :class="styles({ class: props.class })">\n    <slot>{{ title }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class to add to the parent */\n        class?: any;\n        /** The title text that should be displayed */\n        title?: string;\n      }\n    >(),\n    { as: "h5", class: undefined, title: undefined }\n  );\n\n  const styles = tv({\n    base: "mb-1 font-medium leading-none tracking-tight",\n  });\n</script>\n',
+          '<template>\n  <Primitive v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>{{ title }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class to add to the parent */\n        class?: any;\n        /** The title text that should be displayed */\n        title?: string;\n      }\n    >(),\n    { as: "h5", class: undefined, title: undefined }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "title");\n\n  const styles = tv({\n    base: "mb-1 font-medium leading-none tracking-tight",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -84,7 +84,7 @@ export default [
         fileName: "AlertDialog/Action.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AlertDialogAction\n    v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n    :class="buttonStyles({ variant, size, disabled, class: props.class })"\n  >\n    <slot>{{ text }} </slot>\n  </AlertDialogAction>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogAction } from "radix-vue";\n  import type { AlertDialogActionProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AlertDialogActionProps & {\n        /** Action to perform when the button is clicked */\n        onClick?: () => void;\n        /** Text to display in the button */\n        text?: string;\n        /** Custom class(es) to add to the button */\n        class?: any;\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** The button\'s visual variant */\n        variant?: VariantProps<typeof buttonStyles>["variant"];\n        /** The button\'s visual size */\n        size?: VariantProps<typeof buttonStyles>["size"];\n      }\n    >(),\n    {\n      text: "Continue",\n      variant: "default",\n      size: "default",\n      class: undefined,\n      onClick: undefined,\n    }\n  );\n</script>\n',
+          '<template>\n  <AlertDialogAction\n    v-bind="forwarded"\n    :class="buttonStyles({ variant, size, disabled, class: props.class })"\n  >\n    <slot>{{ text }} </slot>\n  </AlertDialogAction>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogAction } from "radix-vue";\n  import type { AlertDialogActionProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AlertDialogActionProps & {\n        /** Action to perform when the button is clicked */\n        onClick?: () => void;\n        /** Text to display in the button */\n        text?: string;\n        /** Custom class(es) to add to the button */\n        class?: any;\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** The button\'s visual variant */\n        variant?: VariantProps<typeof buttonStyles>["variant"];\n        /** The button\'s visual size */\n        size?: VariantProps<typeof buttonStyles>["size"];\n      }\n    >(),\n    {\n      text: "Continue",\n      variant: "default",\n      size: "default",\n      class: undefined,\n      onClick: undefined,\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "text", "variant", "size");\n</script>\n',
       },
       {
         fileName: "AlertDialog/AlertDialog.vue",
@@ -96,7 +96,7 @@ export default [
         fileName: "AlertDialog/Cancel.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AlertDialogCancel\n    v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n    :class="buttonStyles({ variant, size, disabled, class: props.class })"\n  >\n    <slot>{{ text }}</slot>\n  </AlertDialogCancel>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogCancel } from "radix-vue";\n  import type { AlertDialogCancelProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AlertDialogCancelProps & {\n        /** Action to perform when the button is clicked */\n        onClick?: () => void;\n        /** Text to display in the button */\n        text?: string;\n        /** Custom class(es) to add to the button */\n        class?: any;\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** The button\'s visual variant */\n        variant?: VariantProps<typeof buttonStyles>["variant"];\n        /** The button\'s visual size */\n        size?: VariantProps<typeof buttonStyles>["size"];\n      }\n    >(),\n    {\n      text: "Cancel",\n      variant: "outline",\n      size: "default",\n      class: undefined,\n      onClick: undefined,\n    }\n  );\n</script>\n',
+          '<template>\n  <AlertDialogCancel\n    v-bind="forwarded"\n    :class="buttonStyles({ variant, size, disabled, class: props.class })"\n  >\n    <slot>{{ text }}</slot>\n  </AlertDialogCancel>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogCancel } from "radix-vue";\n  import type { AlertDialogCancelProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      AlertDialogCancelProps & {\n        /** Action to perform when the button is clicked */\n        onClick?: () => void;\n        /** Text to display in the button */\n        text?: string;\n        /** Custom class(es) to add to the button */\n        class?: any;\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** The button\'s visual variant */\n        variant?: VariantProps<typeof buttonStyles>["variant"];\n        /** The button\'s visual size */\n        size?: VariantProps<typeof buttonStyles>["size"];\n      }\n    >(),\n    {\n      text: "Cancel",\n      variant: "outline",\n      size: "default",\n      class: undefined,\n      onClick: undefined,\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "text", "variant", "size");\n</script>\n',
       },
       {
         fileName: "AlertDialog/Content.vue",
@@ -108,25 +108,25 @@ export default [
         fileName: "AlertDialog/Description.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AlertDialogDescription\n    v-bind="reactiveOmit(props, \'class\', \'description\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>{{ description }}</slot>\n  </AlertDialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogDescription } from "radix-vue";\n  import type { AlertDialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogDescriptionProps & {\n      /** Text to display in the description */\n      description?: string;\n      /** Custom class(es) to add to the description */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <AlertDialogDescription v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>{{ description }}</slot>\n  </AlertDialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogDescription } from "radix-vue";\n  import type { AlertDialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogDescriptionProps & {\n      /** Text to display in the description */\n      description?: string;\n      /** Custom class(es) to add to the description */\n      class?: any;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class", "description");\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "AlertDialog/Footer.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n      class: undefined,\n    }\n  );\n  const styles = tv({\n    base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n      class: undefined,\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",\n  });\n</script>\n',
       },
       {
         fileName: "AlertDialog/Header.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n      class: undefined,\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col gap-2 text-center sm:text-left",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n      class: undefined,\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col gap-2 text-center sm:text-left",\n  });\n</script>\n',
       },
       {
         fileName: "AlertDialog/Overlay.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AlertDialogOverlay\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ class: props.class })"\n  />\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogOverlay } from "radix-vue";\n  import type { AlertDialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogOverlayProps & {\n      /** Custom class(es) to add to the overlay */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
+          '<template>\n  <AlertDialogOverlay v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogOverlay } from "radix-vue";\n  import type { AlertDialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogOverlayProps & {\n      /** Custom class(es) to add to the overlay */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
       },
       {
         fileName: "AlertDialog/Portal.vue",
@@ -138,7 +138,7 @@ export default [
         fileName: "AlertDialog/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AlertDialogTitle v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot>{{ title }}</slot>\n  </AlertDialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogTitle } from "radix-vue";\n  import type { AlertDialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogTitleProps & {\n      /** Text to display in the title */\n      title?: string;\n      /** Custom class(es) to add to the title */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-lg font-semibold",\n  });\n</script>\n',
+          '<template>\n  <AlertDialogTitle v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>{{ title }}</slot>\n  </AlertDialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { AlertDialogTitle } from "radix-vue";\n  import type { AlertDialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    AlertDialogTitleProps & {\n      /** Text to display in the title */\n      title?: string;\n      /** Custom class(es) to add to the title */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "title");\n  const styles = tv({\n    base: "text-lg font-semibold",\n  });\n</script>\n',
       },
       {
         fileName: "AlertDialog/Trigger.vue",
@@ -252,7 +252,7 @@ export default [
         fileName: "Autocomplete/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ComboboxTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </ComboboxTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxTrigger } from "radix-vue";\n  import type { ComboboxTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxTriggerProps & {\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "inline-flex shrink-0 cursor-pointer items-center justify-center",\n  });\n</script>\n',
+          '<template>\n  <ComboboxTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </ComboboxTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxTrigger } from "radix-vue";\n  import type { ComboboxTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxTriggerProps & {\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "inline-flex shrink-0 cursor-pointer items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "Autocomplete/Viewport.vue",
@@ -279,7 +279,7 @@ export default [
         fileName: "Avatar/Fallback.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <AvatarFallback\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'fallback\')"\n  >\n    <slot>\n      {{ fallback }}\n    </slot>\n  </AvatarFallback>\n</template>\n\n<script lang="ts" setup>\n  import { AvatarFallback } from "radix-vue";\n  import type { AvatarFallbackProps } from "radix-vue";\n\n  const props = defineProps<\n    AvatarFallbackProps & {\n      /** The text to display inside th eavatar */\n      fallback?: string;\n      /** Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",\n  });\n</script>\n',
+          '<template>\n  <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>\n      {{ fallback }}\n    </slot>\n  </AvatarFallback>\n</template>\n\n<script lang="ts" setup>\n  import { AvatarFallback } from "radix-vue";\n  import type { AvatarFallbackProps } from "radix-vue";\n\n  const props = defineProps<\n    AvatarFallbackProps & {\n      /** The text to display inside th eavatar */\n      fallback?: string;\n      /** Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "fallback");\n  const styles = tv({\n    base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",\n  });\n</script>\n',
       },
       {
         fileName: "Avatar/Image.vue",
@@ -315,7 +315,7 @@ export default [
         fileName: "Breadcrumbs.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <div class="flex items-center gap-3">\n        <div class="flex cursor-pointer items-center gap-2">\n          <slot name="crumbIcon" :item="item" :index="i">\n            <Icon\n              v-if="item.icon"\n              :name="item.icon"\n              :class="[!isNotLastItem(i) && \'text-primary\']"\n            />\n          </slot>\n          <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n            <NuxtLink\n              v-if="item.label"\n              :to="!item?.disabled ? item.link : \'\'"\n              :class="[\n                isNotLastItem(i)\n                  ? \'text-muted-foreground hover:underline\'\n                  : \'font-semibold text-primary\',\n              ]"\n              class="text-sm text-foreground"\n              @click="item?.click?.()"\n              >{{ item.label }}</NuxtLink\n            >\n          </slot>\n        </div>\n        <slot name="separator" :item="item" :index="i">\n          <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
+          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <div class="flex items-center gap-3">\n        <div class="flex cursor-pointer items-center gap-2">\n          <slot name="crumbIcon" :item="item" :index="i">\n            <Icon\n              v-if="item.icon"\n              :name="item.icon"\n              :class="[!isNotLastItem(i) && \'text-primary\']"\n            />\n          </slot>\n          <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n            <NuxtLink\n              v-if="item.label"\n              :to="!item?.disabled ? item.link : \'\'"\n              :class="[\n                isNotLastItem(i)\n                  ? \'text-muted-foreground hover:underline\'\n                  : \'font-semibold text-primary\',\n              ]"\n              class="text-sm text-foreground"\n              @click="item?.click?.()"\n              >{{ item.label }}</NuxtLink\n            >\n          </slot>\n        </div>\n        <slot name="separator" :item="item" :index="i">\n          <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -421,7 +421,7 @@ export default [
         fileName: "Checkbox/Indicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <CheckboxIndicator\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'icon\')"\n  >\n    <slot>\n      <Icon :name="checked == \'indeterminate\' ? \'lucide:minus\' : icon" class="h-4 w-4" />\n    </slot>\n  </CheckboxIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { CheckboxIndicator } from "radix-vue";\n  import type { CheckboxIndicatorProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      CheckboxIndicatorProps & {\n        /** The state of the checkbox */\n        checked?: boolean | "indeterminate";\n        /** Custom class(es) to add to the element */\n        class?: any;\n        /**\n         * Icon to display when the checkbox is checked\n         * @default lucide:check\n         */\n        icon?: string;\n      }\n    >(),\n    {\n      icon: "lucide:check",\n    }\n  );\n\n  const styles = tv({\n    base: "flex items-center justify-center text-current",\n  });\n</script>\n',
+          '<template>\n  <CheckboxIndicator :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>\n      <Icon :name="checked == \'indeterminate\' ? \'lucide:minus\' : icon" class="h-4 w-4" />\n    </slot>\n  </CheckboxIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { CheckboxIndicator } from "radix-vue";\n  import type { CheckboxIndicatorProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      CheckboxIndicatorProps & {\n        /** The state of the checkbox */\n        checked?: boolean | "indeterminate";\n        /** Custom class(es) to add to the element */\n        class?: any;\n        /**\n         * Icon to display when the checkbox is checked\n         * @default lucide:check\n         */\n        icon?: string;\n      }\n    >(),\n    {\n      icon: "lucide:check",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "flex items-center justify-center text-current",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -457,7 +457,7 @@ export default [
         fileName: "Collapsible/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </CollapsibleContent>\n</template>\n\n<script lang="ts" setup>\n  import { CollapsibleContent } from "radix-vue";\n  import type { CollapsibleContentProps } from "radix-vue";\n\n  const props = defineProps<\n    CollapsibleContentProps & {\n      /** Customer class(es) to add to the element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",\n  });\n</script>\n',
+          '<template>\n  <CollapsibleContent :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </CollapsibleContent>\n</template>\n\n<script lang="ts" setup>\n  import { CollapsibleContent } from "radix-vue";\n  import type { CollapsibleContentProps } from "radix-vue";\n\n  const props = defineProps<\n    CollapsibleContentProps & {\n      /** Customer class(es) to add to the element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",\n  });\n</script>\n',
       },
       {
         fileName: "Collapsible/Trigger.vue",
@@ -478,7 +478,7 @@ export default [
         fileName: "Command/Cancel.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ComboboxCancel v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot>\n      <Icon name="lucide:x" class="h-4 w-4 text-muted-foreground/70" />\n    </slot>\n  </ComboboxCancel>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxCancel } from "radix-vue";\n  import type { ComboboxCancelProps } from "radix-vue";\n\n  const props = defineProps<ComboboxCancelProps & { class?: any }>();\n\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
+          '<template>\n  <ComboboxCancel v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon name="lucide:x" class="h-4 w-4 text-muted-foreground/70" />\n    </slot>\n  </ComboboxCancel>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxCancel } from "radix-vue";\n  import type { ComboboxCancelProps } from "radix-vue";\n\n  const props = defineProps<ComboboxCancelProps & { class?: any }>();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "Command/Command.vue",
@@ -496,19 +496,19 @@ export default [
         fileName: "Command/Empty.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxEmpty } from "radix-vue";\n  import type { ComboboxEmptyProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxEmptyProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "py-6 text-center text-sm",\n  });\n</script>\n',
+          '<template>\n  <ComboboxEmpty :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxEmpty } from "radix-vue";\n  import type { ComboboxEmptyProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxEmptyProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "py-6 text-center text-sm",\n  });\n</script>\n',
       },
       {
         fileName: "Command/Group.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ComboboxGroup\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'heading\')"\n  >\n    <slot name="heading">\n      <UiCommandLabel v-if="heading" :label="heading" />\n    </slot>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxGroup } from "radix-vue";\n  import type { ComboboxGroupProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxGroupProps & {\n      /**The heading for the group */\n      heading?: any;\n      /**Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "overflow-hidden p-1 text-foreground",\n  });\n</script>\n',
+          '<template>\n  <ComboboxGroup :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot name="heading">\n      <UiCommandLabel v-if="heading" :label="heading" />\n    </slot>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxGroup } from "radix-vue";\n  import type { ComboboxGroupProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxGroupProps & {\n      /**The heading for the group */\n      heading?: any;\n      /**Custom class(es) to add to the element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "heading");\n  const styles = tv({\n    base: "overflow-hidden p-1 text-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Command/Input.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div class="flex items-center border-b px-3" cmdk-input-wrapper="">\n    <Icon :name="icon || \'lucide:search\'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />\n    <ComboboxInput\n      v-bind="$attrs"\n      :type="type ?? \'text\'"\n      :disabled="disabled"\n      auto-focus\n      :class="styles({ class: props.class })"\n    />\n    <UiCommandCancel v-if="showCancel" />\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxInput } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = defineProps<{\n    /**Custom class(es) to add to the input element*/\n    class?: any;\n    /**The icon to render*/\n    icon?: string;\n    /**The input type*/\n    type?: string;\n    /**Whether the input is disabled*/\n    disabled?: boolean;\n    /**Whether to show the cancel button*/\n    showCancel?: boolean;\n  }>();\n\n  const styles = tv({\n    base: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <div class="flex items-center border-b px-3">\n    <Icon :name="icon || \'lucide:search\'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />\n    <ComboboxInput\n      v-bind="$attrs"\n      :type="type ?? \'text\'"\n      :disabled="disabled"\n      auto-focus\n      :class="styles({ class: props.class })"\n    />\n    <UiCommandCancel v-if="showCancel" />\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxInput } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = defineProps<{\n    /**Custom class(es) to add to the input element*/\n    class?: any;\n    /**The icon to render*/\n    icon?: string;\n    /**The input type*/\n    type?: string;\n    /**Whether the input is disabled*/\n    disabled?: boolean;\n    /**Whether to show the cancel button*/\n    showCancel?: boolean;\n  }>();\n\n  const styles = tv({\n    base: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
       {
         fileName: "Command/Item.vue",
@@ -520,7 +520,7 @@ export default [
         fileName: "Command/Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ComboboxLabel\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'label\')"\n  >\n    <slot>{{ label }}</slot>\n  </ComboboxLabel>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxLabel } from "radix-vue";\n  import type { ComboboxLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxLabelProps & {\n      /**\n       * Class(es) to pass to the ComboboxLabel component.\n       */\n      class?: any;\n      /**\n       * The label to display.\n       */\n      label?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "px-2 py-1.5 text-xs font-medium text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <ComboboxLabel :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ label }}</slot>\n  </ComboboxLabel>\n</template>\n\n<script lang="ts" setup>\n  import { ComboboxLabel } from "radix-vue";\n  import type { ComboboxLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    ComboboxLabelProps & {\n      /**\n       * Class(es) to pass to the ComboboxLabel component.\n       */\n      class?: any;\n      /**\n       * The label to display.\n       */\n      label?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "label");\n  const styles = tv({\n    base: "px-2 py-1.5 text-xs font-medium text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Command/List.vue",
@@ -553,7 +553,7 @@ export default [
         fileName: "Container.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "container mx-auto",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class");\n\n  const styles = tv({\n    base: "container mx-auto",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -568,13 +568,13 @@ export default [
         fileName: "ContextMenu/Arrow.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuArrow v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuArrow } from "radix-vue";\n  import type { ContextMenuArrowProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuArrowProps & {\n      /** Custom class(es) to add to teh arrow */\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "border bg-muted",\n  });\n</script>\n',
+          '<template>\n  <ContextMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuArrow } from "radix-vue";\n  import type { ContextMenuArrowProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuArrowProps & {\n      /** Custom class(es) to add to teh arrow */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "border bg-muted",\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/CheckboxItem.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuCheckboxItem\n    v-bind="{ ...reactiveOmit(props, \'class\', \'shortcut\', \'title\'), ...useEmitAsProps(emits) }"\n    :class="styles({ class: props.class })"\n  >\n    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiContextMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuCheckboxItem, useEmitAsProps } from "radix-vue";\n  import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuCheckboxItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /**The shortcut for the item */\n      shortcut?: string;\n      /**The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiContextMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n  import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuCheckboxItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /**The shortcut for the item */\n      shortcut?: string;\n      /**The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/Content.vue",
@@ -598,19 +598,19 @@ export default [
         fileName: "ContextMenu/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuItem\n    v-bind="{\n      ...reactiveOmit(props, \'class\', \'inset\', \'shortcut\', \'title\'),\n      ...useEmitAsProps(emits),\n    }"\n    :class="styles({ inset, class: props.class })"\n  >\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuItem, useEmitAsProps } from "radix-vue";\n  import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The shortcut for the item */\n      shortcut?: string;\n      /** The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuItemEmits>();\n\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <ContextMenuItem v-bind="forwarded" :class="styles({ inset, class: props.class })">\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuItem, useForwardPropsEmits } from "radix-vue";\n  import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The shortcut for the item */\n      shortcut?: string;\n      /** The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuItemEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "class", "inset", "shortcut", "title"),\n    emits\n  );\n\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/ItemIndicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuItemIndicator v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </ContextMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuItemIndicator } from "radix-vue";\n  import type { ContextMenuItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuItemIndicatorProps & {\n      /** The icon to display */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <ContextMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </ContextMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuItemIndicator } from "radix-vue";\n  import type { ContextMenuItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuItemIndicatorProps & {\n      /** The icon to display */\n      icon?: string;\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuLabel\n    :class="styles({ inset, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'inset\', \'label\')"\n  >\n    <slot>{{ label }}</slot>\n  </ContextMenuLabel>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuLabel } from "radix-vue";\n  import type { ContextMenuLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuLabelProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The label for the item */\n      label?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n    variants: {\n      inset: { true: "pl-8" },\n    },\n  });\n</script>\n',
+          '<template>\n  <ContextMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\n    <slot>{{ label }}</slot>\n  </ContextMenuLabel>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuLabel } from "radix-vue";\n  import type { ContextMenuLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuLabelProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The label for the item */\n      label?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset", "label");\n  const styles = tv({\n    base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n    variants: {\n      inset: { true: "pl-8" },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/Portal.vue",
@@ -658,7 +658,7 @@ export default [
         fileName: "ContextMenu/SubTrigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuSubTrigger\n    v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\')"\n    :class="styles({ inset, class: props.class })"\n  >\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon class="ml-auto h-4 w-4" :name="icon || \'lucide:chevron-right\'" />\n  </ContextMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuSubTrigger } from "radix-vue";\n  import type { ContextMenuSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuSubTriggerProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The icon to display */\n      icon?: string;\n      /** The title for the item */\n      title?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <ContextMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon class="ml-auto h-4 w-4" :name="icon || \'lucide:chevron-right\'" />\n  </ContextMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuSubTrigger } from "radix-vue";\n  import type { ContextMenuSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuSubTriggerProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The icon to display */\n      icon?: string;\n      /** The title for the item */\n      title?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title");\n  const styles = tv({\n    base: "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/Trigger.vue",
@@ -680,7 +680,7 @@ export default [
         fileName: "CurrencyInput.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >\n</template>\n\n<script lang="ts" setup>\n  import { defu } from "defu";\n  import { useCurrencyInput } from "vue-currency-input";\n  import type { CurrencyInputOptions } from "vue-currency-input";\n\n  const props = defineProps<{\n    class?: any;\n    id?: string;\n    name?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    required?: boolean;\n    modelValue?: any;\n    options?: CurrencyInputOptions;\n  }>();\n\n  const { inputRef } = useCurrencyInput(\n    defu({}, props.options, {\n      currency: "USD",\n      locale: "en-US",\n      hideCurrencySymbolOnFocus: false,\n      hideGroupingSeparatorOnFocus: false,\n    })\n  );\n\n  const styles = tv({\n    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <!-- eslint-disable-next-line vue/html-self-closing -->\n  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n  import { defu } from "defu";\n  import { useCurrencyInput } from "vue-currency-input";\n  import type { CurrencyInputOptions } from "vue-currency-input";\n\n  const props = defineProps<{\n    class?: any;\n    id?: string;\n    name?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    required?: boolean;\n    modelValue?: any;\n    options?: CurrencyInputOptions;\n  }>();\n\n  const { inputRef } = useCurrencyInput(\n    defu({}, props.options, {\n      currency: "USD",\n      locale: "en-US",\n      hideCurrencySymbolOnFocus: false,\n      hideGroupingSeparatorOnFocus: false,\n    })\n  );\n\n  const styles = tv({\n    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -726,7 +726,7 @@ export default [
         fileName: "DateField.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DateFieldRoot\n    v-slot="{ segments }"\n    v-bind="props"\n    v-model="localModel"\n    :class="styles({ class: props.class })"\n  >\n    <template v-for="item in segments" :key="item.part">\n      <DateFieldInput\n        v-if="item.part === \'literal\'"\n        :part="item.part"\n        class="inline-flex items-center justify-center text-muted-foreground"\n      >\n        <Icon v-if="separatorIcon" :name="separatorIcon" class="text-muted-foreground" />\n        <span v-else-if="separator" class="mx-1 text-muted-foreground">{{ separator }}</span>\n      </DateFieldInput>\n      <DateFieldInput\n        v-else\n        :part="item.part"\n        class="inline-flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\n      >\n        {{ item.value }}\n      </DateFieldInput>\n    </template>\n  </DateFieldRoot>\n</template>\n\n<script lang="ts" setup>\n  import { type DateValue } from "@internationalized/date";\n  import { DateFieldInput, DateFieldRoot } from "radix-vue";\n  import type { DateFieldRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DateFieldRootProps & {\n        class?: any;\n        separator?: string;\n        separatorIcon?: string;\n      }\n    >(),\n    {\n      separator: "/",\n    }\n  );\n  const localModel = defineModel<DateValue>();\n\n  const styles = tv({\n    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <DateFieldRoot\n    v-slot="{ segments }"\n    v-bind="props"\n    v-model="localModel"\n    :class="styles({ class: props.class })"\n  >\n    <template v-for="item in segments" :key="item.part">\n      <DateFieldInput\n        v-if="item.part === \'literal\'"\n        :part="item.part"\n        class="inline-flex items-center justify-center text-muted-foreground"\n      >\n        <Icon v-if="separatorIcon" :name="separatorIcon" class="text-muted-foreground" />\n        <span v-else-if="separator" class="mx-1 text-muted-foreground">{{ separator }}</span>\n      </DateFieldInput>\n      <DateFieldInput\n        v-else\n        :part="item.part"\n        class="inline-flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\n      >\n        {{ item.value }}\n      </DateFieldInput>\n    </template>\n  </DateFieldRoot>\n</template>\n\n<script lang="ts" setup>\n  import { DateFieldInput, DateFieldRoot } from "radix-vue";\n  import type { DateValue } from "@internationalized/date";\n  import type { DateFieldRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DateFieldRootProps & {\n        class?: any;\n        separator?: string;\n        separatorIcon?: string;\n      }\n    >(),\n    {\n      separator: "/",\n    }\n  );\n  const localModel = defineModel<DateValue>();\n\n  const styles = tv({\n    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -773,7 +773,7 @@ export default [
         fileName: "Dialog/Description.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogDescription\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'description\')"\n  >\n    <slot>{{ description }}</slot>\n  </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { DialogDescription } from "radix-vue";\n  import type { DialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogDescriptionProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The description text */\n      description?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ description }}</slot>\n  </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { DialogDescription } from "radix-vue";\n  import type { DialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogDescriptionProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The description text */\n      description?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "description");\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Dialog.vue",
@@ -785,19 +785,19 @@ export default [
         fileName: "Dialog/Footer.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Header.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col space-y-1.5 text-center sm:text-left",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col space-y-1.5 text-center sm:text-left",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Overlay.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogOverlay :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')" />\n</template>\n\n<script lang="ts" setup>\n  import { DialogOverlay } from "radix-vue";\n  import type { DialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogOverlayProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
+          '<template>\n  <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { DialogOverlay } from "radix-vue";\n  import type { DialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogOverlayProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Portal.vue",
@@ -809,7 +809,7 @@ export default [
         fileName: "Dialog/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogTitle\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'title\', \'class\')"\n  >\n    <slot>{{ title }}</slot>\n  </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { DialogTitle } from "radix-vue";\n  import type { DialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogTitleProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The title text */\n      title?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-lg font-semibold leading-none tracking-tight",\n  });\n</script>\n',
+          '<template>\n  <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ title }}</slot>\n  </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { DialogTitle } from "radix-vue";\n  import type { DialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogTitleProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The title text */\n      title?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "title");\n  const styles = tv({\n    base: "text-lg font-semibold leading-none tracking-tight",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Trigger.vue",
@@ -904,7 +904,7 @@ export default [
         fileName: "DropdownMenu/Arrow.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuArrow\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ class: props.class })"\n  />\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuArrow } from "radix-vue";\n  import type { DropdownMenuArrowProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DropdownMenuArrowProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      asChild: false,\n      width: 10,\n      height: 5,\n    }\n  );\n\n  const styles = tv({\n    base: "rotate-45 border bg-muted",\n  });\n</script>\n',
+          '<template>\n  <DropdownMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuArrow } from "radix-vue";\n  import type { DropdownMenuArrowProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DropdownMenuArrowProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      asChild: false,\n      width: 10,\n      height: 5,\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "rotate-45 border bg-muted",\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/CheckboxItem.vue",
@@ -940,13 +940,13 @@ export default [
         fileName: "DropdownMenu/ItemIndicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuItemIndicator v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </DropdownMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuItemIndicator } from "radix-vue";\n  import type { DropdownMenuItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuItemIndicatorProps & {\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <DropdownMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </DropdownMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuItemIndicator } from "radix-vue";\n  import type { DropdownMenuItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuItemIndicatorProps & {\n      /** The icon to display */\n      icon?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuLabel\n    :class="styles({ inset, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'inset\', \'label\')"\n  >\n    <slot>{{ label }}</slot>\n  </DropdownMenuLabel>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuLabel } from "radix-vue";\n  import type { DropdownMenuLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuLabelProps & {\n      class?: any;\n      inset?: boolean;\n      label?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n    variants: {\n      inset: { true: "pl-8" },\n    },\n  });\n</script>\n',
+          '<template>\n  <DropdownMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\n    <slot>{{ label }}</slot>\n  </DropdownMenuLabel>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuLabel } from "radix-vue";\n  import type { DropdownMenuLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuLabelProps & {\n      class?: any;\n      inset?: boolean;\n      label?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset", "label");\n  const styles = tv({\n    base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n    variants: {\n      inset: { true: "pl-8" },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Portal.vue",
@@ -970,13 +970,13 @@ export default [
         fileName: "DropdownMenu/Separator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuSeparator\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\')"\n  />\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuSeparator } from "radix-vue";\n  import type { DropdownMenuSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-border",\n  });\n</script>\n',
+          '<template>\n  <DropdownMenuSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuSeparator } from "radix-vue";\n  import type { DropdownMenuSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-border",\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Shortcut.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "span",\n    }\n  );\n\n  const styles = tv({\n    base: "ml-auto text-xs tracking-widest opacity-60",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "span",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "ml-auto text-xs tracking-widest opacity-60",\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Sub.vue",
@@ -994,7 +994,7 @@ export default [
         fileName: "DropdownMenu/SubTrigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuSubTrigger\n    v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\n    :class="styles({ inset, class: props.class })"\n  >\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon\n      class="ml-auto h-4 w-4 text-muted-foreground"\n      :name="trailingIcon || \'lucide:chevron-right\'"\n    />\n  </DropdownMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuSubTrigger } from "radix-vue";\n  import type { DropdownMenuSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuSubTriggerProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The icon to display */\n      icon?: string;\n      /** The title for the item */\n      title?: string;\n      /** The trailing icon to display */\n      trailingIcon?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <DropdownMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon\n      class="ml-auto h-4 w-4 text-muted-foreground"\n      :name="trailingIcon || \'lucide:chevron-right\'"\n    />\n  </DropdownMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuSubTrigger } from "radix-vue";\n  import type { DropdownMenuSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuSubTriggerProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /** Wether an indentation should be added to the item or not */\n      inset?: boolean;\n      /** The icon to display */\n      icon?: string;\n      /** The title for the item */\n      title?: string;\n      /** The trailing icon to display */\n      trailingIcon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");\n  const styles = tv({\n    base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Trigger.vue",
@@ -1015,7 +1015,7 @@ export default [
         fileName: "Dropfile.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })" @click="open()">\n    <slot name="message">\n      <div class="py-10 text-center">\n        <slot name="icon">\n          <div\n            v-if="icon"\n            class="inline-flex items-center justify-center rounded-md border p-2 transition"\n            :class="[isOverDropZone && \'animate-bounce border-primary\']"\n          >\n            <Icon\n              :name="icon"\n              class="h-7 w-7 opacity-70"\n              :class="[isOverDropZone && \'text-primary\']"\n            />\n          </div>\n        </slot>\n        <slot name="title">\n          <p class="mt-5 text-sm font-medium" v-html="title" />\n        </slot>\n        <slot name="subtext">\n          <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext" />\n        </slot>\n      </div>\n    </slot>\n  </div>\n</template>\n\n<script setup lang="ts">\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The text to display as the title of the dropzone.\n       */\n      title?: string;\n      /**\n       * The text to display as the subtext of the dropzone.\n       */\n      subtext?: string;\n      /**\n       * The icon to display in the dropzone.\n       */\n      icon?: string;\n      /**\n       * The function to call when files are dropped.\n       */\n      // eslint-disable-next-line @typescript-eslint/ban-types\n      onDrop?: Function;\n      /**\n       * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\n       */\n      multiple?: boolean;\n      /**\n       * The file types to accept. Does not affect drag and drop.\n       */\n      accept?: string;\n      class?: any;\n    }>(),\n    {\n      title: "Click to upload or drag & drop files.",\n      subtext: "All file types accepted",\n      icon: "heroicons:cloud-arrow-up",\n      multiple: true,\n      accept: "*",\n    }\n  );\n\n  const { open, reset, onChange } = useFileDialog({\n    multiple: props.multiple,\n    accept: props.accept,\n  });\n\n  onChange((files: FileList | null) => {\n    if (files?.length) {\n      handleDrop(Array.from(files || []));\n      reset();\n    }\n  });\n\n  const dropZoneRef = ref<HTMLDivElement>();\n  const emits = defineEmits<{\n    dropped: [any];\n  }>();\n\n  const handleDrop = (files: File[] | null) => {\n    if (!files) return;\n    if (props.onDrop) props.onDrop(files);\n    emits("dropped", files);\n  };\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\n\n  const styles = tv({\n    base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\n    variants: {\n      isOverDropZone: { true: "border-primary bg-primary/10" },\n    },\n  });\n</script>\n',
+          '<template>\n  <div ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })" @click="open()">\n    <slot name="message">\n      <div class="py-10 text-center">\n        <slot name="icon">\n          <div\n            v-if="icon"\n            class="inline-flex items-center justify-center rounded-md border p-2 transition"\n            :class="[isOverDropZone && \'animate-bounce border-primary\']"\n          >\n            <Icon\n              :name="icon"\n              class="h-7 w-7 opacity-70"\n              :class="[isOverDropZone && \'text-primary\']"\n            />\n          </div>\n        </slot>\n        <slot name="title">\n          <p class="mt-5 text-sm font-medium" v-html="title" />\n        </slot>\n        <slot name="subtext">\n          <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext" />\n        </slot>\n      </div>\n    </slot>\n  </div>\n</template>\n\n<script setup lang="ts">\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The text to display as the title of the dropzone.\n       */\n      title?: string;\n      /**\n       * The text to display as the subtext of the dropzone.\n       */\n      subtext?: string;\n      /**\n       * The icon to display in the dropzone.\n       */\n      icon?: string;\n      /**\n       * The function to call when files are dropped.\n       */\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n      onDrop?: Function;\n      /**\n       * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\n       */\n      multiple?: boolean;\n      /**\n       * The file types to accept. Does not affect drag and drop.\n       */\n      accept?: string;\n      class?: any;\n    }>(),\n    {\n      title: "Click to upload or drag & drop files.",\n      subtext: "All file types accepted",\n      icon: "heroicons:cloud-arrow-up",\n      multiple: true,\n      accept: "*",\n    }\n  );\n\n  const { open, reset, onChange } = useFileDialog({\n    multiple: props.multiple,\n    accept: props.accept,\n  });\n\n  onChange((files: FileList | null) => {\n    if (files?.length) {\n      handleDrop(Array.from(files || []));\n      reset();\n    }\n  });\n\n  const dropZoneRef = ref<HTMLDivElement>();\n  const emits = defineEmits<{\n    dropped: [any];\n  }>();\n\n  const handleDrop = (files: File[] | null) => {\n    if (!files) return;\n    if (props.onDrop) props.onDrop(files);\n    emits("dropped", files);\n  };\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\n\n  const styles = tv({\n    base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\n    variants: {\n      isOverDropZone: { true: "border-primary bg-primary/10" },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1118,7 +1118,7 @@ export default [
         fileName: "Form/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div :class="styles({ class: props.class })" v-bind="$attrs">\n    <slot name="label">\n      <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\n    </slot>\n    <UiFormControl>\n      <slot />\n    </UiFormControl>\n    <slot name="description">\n      <UiFormDescription v-if="description" :description="description" />\n    </slot>\n    <slot name="errorMessage">\n      <TransitionSlide tag="p">\n        <UiFormMessage v-if="!hideMessage" />\n      </TransitionSlide>\n    </slot>\n  </div>\n</template>\n\n<script lang="ts">\n  import { type InjectionKey } from "vue";\n\n  export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\n</script>\n\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n\n  const id = useId();\n  provide(FORM_ITEM_INJECTION_KEY, id);\n\n  const props = defineProps<{\n    class?: any;\n    label?: string;\n    description?: string;\n    hint?: string;\n    hideMessage?: boolean;\n  }>();\n\n  const styles = tv({ base: "space-y-1.5" });\n</script>\n',
+          '<template>\n  <div :class="styles({ class: props.class })" v-bind="$attrs">\n    <slot name="label">\n      <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\n    </slot>\n    <UiFormControl>\n      <slot />\n    </UiFormControl>\n    <slot name="description">\n      <UiFormDescription v-if="description" :description="description" />\n    </slot>\n    <slot name="errorMessage">\n      <TransitionSlide tag="p">\n        <UiFormMessage v-if="!hideMessage" />\n      </TransitionSlide>\n    </slot>\n  </div>\n</template>\n\n<script lang="ts">\n  import type { InjectionKey } from "vue";\n\n  export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\n</script>\n\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n\n  const id = useId();\n  provide(FORM_ITEM_INJECTION_KEY, id);\n\n  const props = defineProps<{\n    class?: any;\n    label?: string;\n    description?: string;\n    hint?: string;\n    hideMessage?: boolean;\n  }>();\n\n  const styles = tv({ base: "space-y-1.5" });\n</script>\n',
       },
       {
         fileName: "Form/Label.vue",
@@ -1144,7 +1144,7 @@ export default [
         fileName: "GradientDivider.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Separator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { Separator } from "radix-vue";\n  import type { SeparatorProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      SeparatorProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "hr",\n    }\n  );\n\n  const styles = tv({\n    base: \'h-px w-full border-t-0 bg-[linear-gradient(90deg,theme("colors.input/10%"),_theme("colors.input"),_theme("colors.input/10%"))]\',\n  });\n</script>\n',
+          '<template>\n  <Separator v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { Separator } from "radix-vue";\n  import type { SeparatorProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      SeparatorProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "hr",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class");\n\n  const styles = tv({\n    base: \'h-px w-full border-t-0 bg-[linear-gradient(90deg,theme("colors.input/10%"),_theme("colors.input"),_theme("colors.input/10%"))]\',\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1159,13 +1159,13 @@ export default [
         fileName: "HoverCard/Arrow.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <HoverCardArrow :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')" />\n</template>\n\n<script lang="ts" setup>\n  import { HoverCardArrow } from "radix-vue";\n  import type { HoverCardArrowProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      HoverCardArrowProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      height: 5,\n      width: 10,\n    }\n  );\n\n  const styles = tv({\n    base: "fill-popover",\n  });\n</script>\n',
+          '<template>\n  <HoverCardArrow :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { HoverCardArrow } from "radix-vue";\n  import type { HoverCardArrowProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      HoverCardArrowProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      height: 5,\n      width: 10,\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "fill-popover",\n  });\n</script>\n',
       },
       {
         fileName: "HoverCard/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <UiHoverCardPortal :to="to">\n    <HoverCardContent\n      v-bind="{ ...reactiveOmit(props, \'class\', \'to\'), ...$attrs }"\n      :class="styles({ class: props.class })"\n    >\n      <slot />\n    </HoverCardContent>\n  </UiHoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n  import { HoverCardContent } from "radix-vue";\n  import type { HoverCardContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = withDefaults(\n    defineProps<\n      HoverCardContentProps & {\n        /** Custom class(es) to add to the content */\n        class?: any;\n        /** The element or selector the content should be positioned relative to */\n        to?: string | HTMLElement;\n      }\n    >(),\n    {\n      side: "bottom",\n      sideOffset: 5,\n      align: "center",\n      avoidCollisions: true,\n      sticky: "partial",\n    }\n  );\n\n  const styles = tv({\n    base: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n  });\n</script>\n',
+          '<template>\n  <UiHoverCardPortal :to="to">\n    <HoverCardContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n      <slot />\n    </HoverCardContent>\n  </UiHoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n  import { HoverCardContent } from "radix-vue";\n  import type { HoverCardContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = withDefaults(\n    defineProps<\n      HoverCardContentProps & {\n        /** Custom class(es) to add to the content */\n        class?: any;\n        /** The element or selector the content should be positioned relative to */\n        to?: string | HTMLElement;\n      }\n    >(),\n    {\n      side: "bottom",\n      sideOffset: 5,\n      align: "center",\n      avoidCollisions: true,\n      sticky: "partial",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "to");\n  const styles = tv({\n    base: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n  });\n</script>\n',
       },
       {
         fileName: "HoverCard/HoverCard.vue",
@@ -1199,7 +1199,7 @@ export default [
         fileName: "Input.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      id?: string;\n      name?: string;\n      placeholder?: string;\n      disabled?: boolean;\n      required?: boolean;\n      type?: string;\n      modelValue?: any;\n    }>(),\n    { type: "text" }\n  );\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <!-- eslint-disable-next-line vue/html-self-closing -->\n  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      id?: string;\n      name?: string;\n      placeholder?: string;\n      disabled?: boolean;\n      required?: boolean;\n      type?: string;\n      modelValue?: any;\n    }>(),\n    { type: "text" }\n  );\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1214,7 +1214,7 @@ export default [
         fileName: "Kbd.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive\n    :class="styles({ size, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'size\')"\n  >\n    <slot />\n  </Primitive>\n</template>\n<script setup lang="ts">\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** The size of the component */\n        size?: VariantProps<typeof styles>["size"];\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "kbd",\n      size: "sm",\n    }\n  );\n\n  const styles = tv({\n    base: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md border border-border bg-muted font-sans font-medium",\n    variants: {\n      size: {\n        xs: "h-5 min-h-[16px] px-1 text-[10px]",\n        sm: "h-6 min-h-[20px] px-1.5 text-[11px]",\n        md: "h-7 min-h-[24px] px-2 text-[12px]",\n      },\n    },\n    defaultVariants: {\n      size: "sm",\n    },\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ size, class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n<script setup lang="ts">\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** The size of the component */\n        size?: VariantProps<typeof styles>["size"];\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "kbd",\n      size: "sm",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "size");\n\n  const styles = tv({\n    base: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md border border-border bg-muted font-sans font-medium",\n    variants: {\n      size: {\n        xs: "h-5 min-h-[16px] px-1 text-[10px]",\n        sm: "h-6 min-h-[20px] px-1.5 text-[11px]",\n        md: "h-7 min-h-[24px] px-2 text-[12px]",\n      },\n    },\n    defaultVariants: {\n      size: "sm",\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1229,7 +1229,7 @@ export default [
         fileName: "Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Label :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n    <slot name="hint">\n      <span v-if="hint">\n        {{ hint }}\n      </span>\n    </slot>\n  </Label>\n</template>\n\n<script lang="ts" setup>\n  import { Label } from "radix-vue";\n  import type { LabelProps } from "radix-vue";\n\n  const props = defineProps<\n    LabelProps & {\n      /** Custom class(es) to add to the label */\n      class?: any;\n      hint?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <Label :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n    <slot name="hint">\n      <span v-if="hint">\n        {{ hint }}\n      </span>\n    </slot>\n  </Label>\n</template>\n\n<script lang="ts" setup>\n  import { Label } from "radix-vue";\n  import type { LabelProps } from "radix-vue";\n\n  const props = defineProps<\n    LabelProps & {\n      /** Custom class(es) to add to the label */\n      class?: any;\n      hint?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "class", "hint");\n\n  const styles = tv({\n    base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1244,7 +1244,7 @@ export default [
         fileName: "List/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col gap-1 leading-none",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col gap-1 leading-none",\n  });\n</script>\n',
       },
       {
         fileName: "List/Item.vue",
@@ -1256,19 +1256,19 @@ export default [
         fileName: "List/List.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "ul",\n    }\n  );\n\n  const styles = tv({\n    base: "w-full py-2",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "ul",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "w-full py-2",\n  });\n</script>\n',
       },
       {
         fileName: "List/Subtitle.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'subtitle\')"\n  >\n    <slot>{{ subtitle }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The subtitle of the component */\n        subtitle?: string;\n      }\n    >(),\n    {\n      as: "p",\n    }\n  );\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ subtitle }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The subtitle of the component */\n        subtitle?: string;\n      }\n    >(),\n    {\n      as: "p",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "subtitle");\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "List/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\', \'title\')">\n    <slot>{{ title }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The title of the component */\n        title?: string;\n      }\n    >(),\n    {\n      as: "p",\n    }\n  );\n\n  const styles = tv({\n    base: "font-semibold",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ title }}</slot>\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** The title of the component */\n        title?: string;\n      }\n    >(),\n    {\n      as: "p",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "title");\n  const styles = tv({\n    base: "font-semibold",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1370,13 +1370,13 @@ export default [
         fileName: "Menubar/ItemIndicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarItemIndicator v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </MenubarItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarItemIndicator } from "radix-vue";\n  import type { MenubarItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarItemIndicatorProps & {\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <MenubarItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n    </slot>\n  </MenubarItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarItemIndicator } from "radix-vue";\n  import type { MenubarItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarItemIndicatorProps & {\n      /** The icon to display */\n      icon?: string;\n      /** The class(es) to apply to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "flex shrink-0 items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "Menubar/Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarLabel\n    :class="styles({ inset, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'inset\')"\n  >\n    <slot />\n  </MenubarLabel>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarLabel } from "radix-vue";\n  import type { MenubarLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarLabelProps & {\n      class?: any;\n      inset?: boolean;\n    }\n  >();\n\n  const styles = tv({\n    base: "px-2 py-1.5 text-sm font-semibold",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <MenubarLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\n    <slot />\n  </MenubarLabel>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarLabel } from "radix-vue";\n  import type { MenubarLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarLabelProps & {\n      class?: any;\n      inset?: boolean;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset");\n  const styles = tv({\n    base: "px-2 py-1.5 text-sm font-semibold",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "Menubar/Menu.vue",
@@ -1394,7 +1394,7 @@ export default [
         fileName: "Menubar/Portal.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarPortal v-bind="props">\n    <slot />\n  </MenubarPortal>\n</template>\n\n<script lang="ts" setup>\n  import { type MenubarPortalProps } from "radix-vue";\n\n  const props = defineProps<MenubarPortalProps>();\n</script>\n',
+          '<template>\n  <MenubarPortal v-bind="props">\n    <slot />\n  </MenubarPortal>\n</template>\n\n<script lang="ts" setup>\n  import type { MenubarPortalProps } from "radix-vue";\n\n  const props = defineProps<MenubarPortalProps>();\n</script>\n',
       },
       {
         fileName: "Menubar/RadioGroup.vue",
@@ -1412,13 +1412,13 @@ export default [
         fileName: "Menubar/Separator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarSeparator :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')" />\n</template>\n\n<script lang="ts" setup>\n  import { MenubarSeparator } from "radix-vue";\n  import type { MenubarSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-border",\n  });\n</script>\n',
+          '<template>\n  <MenubarSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { MenubarSeparator } from "radix-vue";\n  import type { MenubarSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-border",\n  });\n</script>\n',
       },
       {
         fileName: "Menubar/Shortcut.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    { as: "span" }\n  );\n\n  const styles = tv({\n    base: "ml-auto text-xs tracking-widest opacity-60",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    { as: "span" }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "ml-auto text-xs tracking-widest opacity-60",\n  });\n</script>\n',
       },
       {
         fileName: "Menubar/Sub.vue",
@@ -1436,13 +1436,13 @@ export default [
         fileName: "Menubar/SubTrigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarSubTrigger\n    v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\n    :class="styles({ inset, class: props.class })"\n  >\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon\n      class="ml-auto h-4 w-4 text-muted-foreground"\n      :name="trailingIcon || \'lucide:chevron-right\'"\n    />\n  </MenubarSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarSubTrigger } from "radix-vue";\n  import type { MenubarSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarSubTriggerProps & {\n      class?: any;\n      inset?: boolean;\n      icon?: string;\n      title?: string;\n      trailingIcon?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <MenubarSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <Icon\n      class="ml-auto h-4 w-4 text-muted-foreground"\n      :name="trailingIcon || \'lucide:chevron-right\'"\n    />\n  </MenubarSubTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarSubTrigger } from "radix-vue";\n  import type { MenubarSubTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarSubTriggerProps & {\n      class?: any;\n      inset?: boolean;\n      icon?: string;\n      title?: string;\n      trailingIcon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");\n  const styles = tv({\n    base: "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",\n    variants: {\n      inset: {\n        true: "pl-8",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "Menubar/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </MenubarTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarTrigger } from "radix-vue";\n  import type { MenubarTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n  });\n</script>\n',
+          '<template>\n  <MenubarTrigger :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </MenubarTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { MenubarTrigger } from "radix-vue";\n  import type { MenubarTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    MenubarTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1473,7 +1473,7 @@ export default [
         fileName: "Navbar.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        class?: any;\n        sticky?: boolean;\n      }\n    >(),\n    {\n      as: "header",\n    }\n  );\n\n  const styles = tv({\n    base: "z-20 border-b bg-background/90 backdrop-blur",\n    variants: {\n      sticky: {\n        true: "sticky top-0",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        /** Whether the navbar should be sticky */\n        sticky?: boolean;\n      }\n    >(),\n    {\n      as: "header",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "sticky");\n\n  const styles = tv({\n    base: "z-20 border-b bg-background/90 backdrop-blur",\n    variants: {\n      sticky: {\n        true: "sticky top-0",\n      },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1494,7 +1494,7 @@ export default [
         fileName: "NavigationMenu/Indicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <NavigationMenuIndicator\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />\n  </NavigationMenuIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuIndicator } from "radix-vue";\n  import type { NavigationMenuIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",\n  });\n</script>\n',
+          '<template>\n  <NavigationMenuIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />\n  </NavigationMenuIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuIndicator } from "radix-vue";\n  import type { NavigationMenuIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",\n  });\n</script>\n',
       },
       {
         fileName: "NavigationMenu/Item.vue",
@@ -1512,7 +1512,7 @@ export default [
         fileName: "NavigationMenu/List.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <NavigationMenuList v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuList } from "radix-vue";\n  import type { NavigationMenuListProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "group flex flex-1 list-none items-center justify-center space-x-1",\n  });\n</script>\n',
+          '<template>\n  <NavigationMenuList v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuList } from "radix-vue";\n  import type { NavigationMenuListProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "group flex flex-1 list-none items-center justify-center space-x-1",\n  });\n</script>\n',
       },
       {
         fileName: "NavigationMenu/NavigationMenu.vue",
@@ -1530,13 +1530,13 @@ export default [
         fileName: "NavigationMenu/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <NavigationMenuTrigger\n    v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>{{ title }}</slot>\n    <slot name="icon">\n      <Icon\n        :name="icon || \'lucide:chevron-down\'"\n        class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\n        aria-hidden="true"\n      />\n    </slot>\n  </NavigationMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuTrigger } from "radix-vue";\n  import type { NavigationMenuTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n      /** Title to show */\n      title?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\n  });\n</script>\n',
+          '<template>\n  <NavigationMenuTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>{{ title }}</slot>\n    <slot name="icon">\n      <Icon\n        :name="icon || \'lucide:chevron-down\'"\n        class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\n        aria-hidden="true"\n      />\n    </slot>\n  </NavigationMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuTrigger } from "radix-vue";\n  import type { NavigationMenuTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    NavigationMenuTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n      /** Title to show */\n      title?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon", "title");\n  const styles = tv({\n    base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\n  });\n</script>\n',
       },
       {
         fileName: "NavigationMenu/Viewport.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div class="absolute left-0 top-full flex justify-center">\n    <NavigationMenuViewport\n      v-bind="{ ...reactiveOmit(props, \'class\'), ...$attrs }"\n      :class="styles({ class: props.class })"\n    />\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuViewport } from "radix-vue";\n  import type { NavigationMenuViewportProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    NavigationMenuViewportProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",\n  });\n</script>\n',
+          '<template>\n  <div class="absolute left-0 top-full flex justify-center">\n    <NavigationMenuViewport\n      v-bind="{ ...forwarded, ...$attrs }"\n      :class="styles({ class: props.class })"\n    />\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import { NavigationMenuViewport } from "radix-vue";\n  import type { NavigationMenuViewportProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    NavigationMenuViewportProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1585,13 +1585,13 @@ export default [
         fileName: "Pagination/Ellipsis.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PaginationEllipsis v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationEllipsis v-bind="forwarded">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/First.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PaginationFirst v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationFirst v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/Item.vue",
@@ -1603,13 +1603,13 @@ export default [
         fileName: "Pagination/Last.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PaginationLast v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationLast v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/List.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PaginationList\n    v-slot="{ items }"\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\')"\n  >\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
+          '<template>\n  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
       },
       {
         fileName: "Pagination/Next.vue",
@@ -1627,7 +1627,7 @@ export default [
         fileName: "Pagination/Prev.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PaginationPrev v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationPrev v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
     ],
     utils: [],
@@ -1648,7 +1648,7 @@ export default [
         fileName: "PinInput/PinInputInput.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PinInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { PinInputInput } from "radix-vue";\n  import type { PinInputInputProps } from "radix-vue";\n\n  const props = defineProps<\n    PinInputInputProps & {\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <PinInputInput v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { PinInputInput } from "radix-vue";\n  import type { PinInputInputProps } from "radix-vue";\n\n  const props = defineProps<\n    PinInputInputProps & {\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1669,7 +1669,7 @@ export default [
         fileName: "Popover/Arrow.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <PopoverArrow v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { PopoverArrow, useForwardProps } from "radix-vue";\n  import type { PopoverArrowProps } from "radix-vue/dist/Popover/PopoverArrow";\n\n  const props = withDefaults(defineProps<PopoverArrowProps>(), {\n    width: 10,\n    height: 5,\n  });\n\n  const forwarded = useForwardProps(props);\n</script>\n',
+          '<template>\n  <PopoverArrow v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { PopoverArrow, useForwardProps } from "radix-vue";\n  import type { PopoverArrowProps } from "radix-vue";\n\n  const props = withDefaults(defineProps<PopoverArrowProps>(), {\n    width: 10,\n    height: 5,\n  });\n\n  const forwarded = useForwardProps(props);\n</script>\n',
       },
       {
         fileName: "Popover/Close.vue",
@@ -1720,7 +1720,7 @@ export default [
         fileName: "Progress/Indicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ProgressIndicator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </ProgressIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { ProgressIndicator } from "radix-vue";\n  import type { ProgressIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    ProgressIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n  });\n</script>\n',
+          '<template>\n  <ProgressIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </ProgressIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { ProgressIndicator } from "radix-vue";\n  import type { ProgressIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    ProgressIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n  });\n</script>\n',
       },
       {
         fileName: "Progress/Progress.vue",
@@ -1741,13 +1741,13 @@ export default [
         fileName: "RadioGroup/Indicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <RadioGroupIndicator\n    v-bind="reactiveOmit(props, \'class\', \'icon\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>\n      <Icon :name="icon || \'ph:circle-fill\'" class="h-2.5 w-2.5 fill-current text-current" />\n    </slot>\n  </RadioGroupIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { RadioGroupIndicator } from "radix-vue";\n  import type { RadioGroupIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    RadioGroupIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
+          '<template>\n  <RadioGroupIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon :name="icon || \'ph:circle-fill\'" class="h-2.5 w-2.5 fill-current text-current" />\n    </slot>\n  </RadioGroupIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { RadioGroupIndicator } from "radix-vue";\n  import type { RadioGroupIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    RadioGroupIndicatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "flex items-center justify-center",\n  });\n</script>\n',
       },
       {
         fileName: "RadioGroup/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <RadioGroupItem\n    v-bind="reactiveOmit(props, \'class\', \'icon\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>\n      <UiRadioGroupIndicator :icon="props.icon" />\n    </slot>\n  </RadioGroupItem>\n</template>\n\n<script lang="ts" setup>\n  import { RadioGroupItem } from "radix-vue";\n  import type { RadioGroupItemProps } from "radix-vue";\n\n  const props = defineProps<\n    RadioGroupItemProps & {\n      /** Class to apply to the item */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <RadioGroupItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <UiRadioGroupIndicator :icon="props.icon" />\n    </slot>\n  </RadioGroupItem>\n</template>\n\n<script lang="ts" setup>\n  import { RadioGroupItem } from "radix-vue";\n  import type { RadioGroupItemProps } from "radix-vue";\n\n  const props = defineProps<\n    RadioGroupItemProps & {\n      /** Class to apply to the item */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "RadioGroup/RadioGroup.vue",
@@ -1774,25 +1774,25 @@ export default [
         fileName: "ScrollArea/ScrollArea.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ScrollAreaRoot v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <UiScrollAreaViewport>\n      <slot />\n    </UiScrollAreaViewport>\n    <UiScrollAreaScrollbar :orientation="orientation" />\n    <UiScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaRoot } from "radix-vue";\n  import type { ScrollAreaRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaRootProps & {\n        /** Orientation for scrolling */\n        orientation?: "vertical" | "horizontal";\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n\n  const styles = tv({\n    base: "relative overflow-hidden",\n  });\n</script>\n',
+          '<template>\n  <ScrollAreaRoot v-bind="forwarded" :class="styles({ class: props.class })">\n    <UiScrollAreaViewport>\n      <slot />\n    </UiScrollAreaViewport>\n    <UiScrollAreaScrollbar :orientation="orientation" />\n    <UiScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaRoot } from "radix-vue";\n  import type { ScrollAreaRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaRootProps & {\n        /** Orientation for scrolling */\n        orientation?: "vertical" | "horizontal";\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "relative overflow-hidden",\n  });\n</script>\n',
       },
       {
         fileName: "ScrollArea/Scrollbar.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ScrollAreaScrollbar\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ orientation, class: props.class })"\n  >\n    <slot />\n    <UiScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaScrollbar } from "radix-vue";\n  import type { ScrollAreaScrollbarProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaScrollbarProps & {\n        /** Class to apply to the scrollbar */\n        class?: any;\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n\n  const styles = tv({\n    base: "flex touch-none select-none transition-colors",\n    variants: {\n      orientation: {\n        vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",\n        horizontal: "h-2.5 border-t border-t-transparent p-[1px]",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <ScrollAreaScrollbar v-bind="forwarded" :class="styles({ orientation, class: props.class })">\n    <slot />\n    <UiScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaScrollbar } from "radix-vue";\n  import type { ScrollAreaScrollbarProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaScrollbarProps & {\n        /** Class to apply to the scrollbar */\n        class?: any;\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex touch-none select-none transition-colors",\n    variants: {\n      orientation: {\n        vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",\n        horizontal: "h-2.5 border-t border-t-transparent p-[1px]",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "ScrollArea/Thumb.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ScrollAreaThumb\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="styles({ orientation, class: props.class })"\n  >\n    <slot />\n  </ScrollAreaThumb>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaThumb } from "radix-vue";\n  import type { ScrollAreaThumbProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaThumbProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        orientation?: "vertical" | "horizontal";\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n\n  const styles = tv({\n    base: "relative flex-1 rounded-full bg-border",\n    variants: {\n      orientation: {\n        vertical: "flex-1",\n        horizontal: "",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <ScrollAreaThumb v-bind="forwarded" :class="styles({ orientation, class: props.class })">\n    <slot />\n  </ScrollAreaThumb>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaThumb } from "radix-vue";\n  import type { ScrollAreaThumbProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ScrollAreaThumbProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n        orientation?: "vertical" | "horizontal";\n      }\n    >(),\n    {\n      orientation: "vertical",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "relative flex-1 rounded-full bg-border",\n    variants: {\n      orientation: {\n        vertical: "flex-1",\n        horizontal: "",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "ScrollArea/Viewport.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ScrollAreaViewport v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </ScrollAreaViewport>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaViewport } from "radix-vue";\n  import type { ScrollAreaViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    ScrollAreaViewportProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "h-full w-full rounded-[inherit]",\n  });\n</script>\n',
+          '<template>\n  <ScrollAreaViewport v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </ScrollAreaViewport>\n</template>\n\n<script lang="ts" setup>\n  import { ScrollAreaViewport } from "radix-vue";\n  import type { ScrollAreaViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    ScrollAreaViewportProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "h-full w-full rounded-[inherit]",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1825,19 +1825,19 @@ export default [
         fileName: "Select/Icon.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectIcon v-bind="forwarded">\n    <slot>\n      <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:chevrons-up-down\'" />\n    </slot>\n  </SelectIcon>\n</template>\n\n<script lang="ts" setup>\n  import { SelectIcon, useForwardProps } from "radix-vue";\n  import type { SelectIconProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectIconProps & {\n      /** Icon to render */\n      icon?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "h-4 w-4 shrink-0 text-muted-foreground opacity-70",\n  });\n</script>\n',
+          '<template>\n  <SelectIcon v-bind="forwarded" class="flex items-center justify-center">\n    <slot>\n      <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:chevrons-up-down\'" />\n    </slot>\n  </SelectIcon>\n</template>\n\n<script lang="ts" setup>\n  import { SelectIcon, useForwardProps } from "radix-vue";\n  import type { SelectIconProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectIconProps & {\n      /** Icon to render */\n      icon?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "h-4 w-4 shrink-0 text-muted-foreground opacity-70",\n  });\n</script>\n',
       },
       {
         fileName: "Select/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectItem\n    v-bind="reactiveOmit(props, \'class\', \'icon\', \'text\')"\n    :class="styles({ class: props.class })"\n  >\n    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">\n      <UiSelectItemIndicator :icon="icon" />\n    </span>\n    <UiSelectItemText>\n      <slot>{{ text }}</slot>\n    </UiSelectItemText>\n  </SelectItem>\n</template>\n\n<script lang="ts" setup>\n  import { SelectItem } from "radix-vue";\n  import type { SelectItemProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectItemProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n      /** Text to show */\n      text?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <SelectItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">\n      <UiSelectItemIndicator :icon="icon" />\n    </span>\n    <UiSelectItemText>\n      <slot>{{ text }}</slot>\n    </UiSelectItemText>\n  </SelectItem>\n</template>\n\n<script lang="ts" setup>\n  import { SelectItem } from "radix-vue";\n  import type { SelectItemProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectItemProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to show */\n      icon?: string;\n      /** Text to show */\n      text?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon", "text");\n  const styles = tv({\n    base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "Select/ItemIndicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectItemIndicator v-bind="reactiveOmit(props, \'class\', \'icon\')">\n    <slot>\n      <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:check\'" />\n    </slot>\n  </SelectItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { SelectItemIndicator } from "radix-vue";\n  import type { SelectItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectItemIndicatorProps & {\n      /** Icon to render */\n      icon?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "h-4 w-4",\n  });\n</script>\n',
+          '<template>\n  <SelectItemIndicator v-bind="forwarded" class="flex items-center justify-center">\n    <slot>\n      <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:check\'" />\n    </slot>\n  </SelectItemIndicator>\n</template>\n\n<script lang="ts" setup>\n  import { SelectItemIndicator } from "radix-vue";\n  import type { SelectItemIndicatorProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectItemIndicatorProps & {\n      /** Icon to render */\n      icon?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "h-4 w-4",\n  });\n</script>\n',
       },
       {
         fileName: "Select/ItemText.vue",
@@ -1849,7 +1849,7 @@ export default [
         fileName: "Select/Label.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </SelectLabel>\n</template>\n\n<script lang="ts" setup>\n  import { SelectLabel } from "radix-vue";\n  import type { SelectLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectLabelProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n  });\n</script>\n',
+          '<template>\n  <SelectLabel :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </SelectLabel>\n</template>\n\n<script lang="ts" setup>\n  import { SelectLabel } from "radix-vue";\n  import type { SelectLabelProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectLabelProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n  });\n</script>\n',
       },
       {
         fileName: "Select/Portal.vue",
@@ -1861,13 +1861,13 @@ export default [
         fileName: "Select/ScrollDownButton.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectScrollDownButton v-bind="reactiveOmit(props, \'icon\')">\n    <slot> <Icon :name="icon || \'lucide:chevron-down\'" class="h-5 w-5" /></slot>\n  </SelectScrollDownButton>\n</template>\n\n<script lang="ts" setup>\n  import { SelectScrollDownButton } from "radix-vue";\n  import type { SelectScrollDownButtonProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectScrollDownButtonProps & {\n      /** Icon to render */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <SelectScrollDownButton v-bind="forwarded">\n    <slot> <Icon :name="icon || \'lucide:chevron-down\'" class="h-5 w-5" /></slot>\n  </SelectScrollDownButton>\n</template>\n\n<script lang="ts" setup>\n  import { SelectScrollDownButton } from "radix-vue";\n  import type { SelectScrollDownButtonProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectScrollDownButtonProps & {\n      /** Icon to render */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Select/ScrollUpButton.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectScrollUpButton v-bind="reactiveOmit(props, \'icon\')">\n    <slot>\n      <Icon :name="icon || \'lucide:chevron-up\'" class="h-5 w-5" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n\n<script lang="ts" setup>\n  import { SelectScrollUpButton } from "radix-vue";\n  import type { SelectScrollUpButtonProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectScrollUpButtonProps & {\n      /** Icon to render */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <SelectScrollUpButton v-bind="forwarded">\n    <slot>\n      <Icon :name="icon || \'lucide:chevron-up\'" class="h-5 w-5" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n\n<script lang="ts" setup>\n  import { SelectScrollUpButton } from "radix-vue";\n  import type { SelectScrollUpButtonProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectScrollUpButtonProps & {\n      /** Icon to render */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Select/Select.vue",
@@ -1879,13 +1879,13 @@ export default [
         fileName: "Select/Separator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectSeparator :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')" />\n</template>\n\n<script lang="ts" setup>\n  import { SelectSeparator } from "radix-vue";\n  import type { SelectSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-muted",\n  });\n</script>\n',
+          '<template>\n  <SelectSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { SelectSeparator } from "radix-vue";\n  import type { SelectSeparatorProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectSeparatorProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "-mx-1 my-1 h-px bg-muted",\n  });\n</script>\n',
       },
       {
         fileName: "Select/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectTrigger\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'icon\', \'placeholder\')"\n  >\n    <slot>\n      <UiSelectValue :placeholder="placeholder" />\n    </slot>\n    <UiSelectIcon :icon="icon" />\n  </SelectTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { SelectTrigger } from "radix-vue";\n  import type { SelectTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to render */\n      icon?: string;\n      /** Placeholder text */\n      placeholder?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "line-clamp-1 flex h-10 w-full items-center justify-between truncate 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 data-[placeholder]:text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <SelectTrigger :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>\n      <UiSelectValue :placeholder="placeholder" />\n    </slot>\n    <UiSelectIcon :icon="icon" />\n  </SelectTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { SelectTrigger } from "radix-vue";\n  import type { SelectTriggerProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectTriggerProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Icon to render */\n      icon?: string;\n      /** Placeholder text */\n      placeholder?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon", "placeholder");\n  const styles = tv({\n    base: "line-clamp-1 flex h-10 w-full items-center justify-between truncate 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 data-[placeholder]:text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Select/Value.vue",
@@ -1897,7 +1897,7 @@ export default [
         fileName: "Select/Viewport.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SelectViewport\n    :class="styles({ position, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\')"\n  >\n    <slot />\n  </SelectViewport>\n</template>\n\n<script lang="ts" setup>\n  import { SelectViewport } from "radix-vue";\n  import type { SelectViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectViewportProps & {\n      position?: "item-aligned" | "popper";\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "p-1",\n    variants: {\n      position: {\n        popper:\n          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",\n        "item-aligned": "",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <SelectViewport :class="styles({ position, class: props.class })" v-bind="forwarded">\n    <slot />\n  </SelectViewport>\n</template>\n\n<script lang="ts" setup>\n  import { SelectViewport } from "radix-vue";\n  import type { SelectViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    SelectViewportProps & {\n      position?: "item-aligned" | "popper";\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "p-1",\n    variants: {\n      position: {\n        popper:\n          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",\n        "item-aligned": "",\n      },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1912,7 +1912,7 @@ export default [
         fileName: "Separator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Separator\n    v-bind="useForwardProps(reactiveOmit(props, \'class\'))"\n    :class="styles({ orientation, class: props.class })"\n  />\n</template>\n\n<script lang="ts" setup>\n  import { Separator, useForwardProps } from "radix-vue";\n  import type { SeparatorProps } from "radix-vue";\n\n  const props = withDefaults(defineProps<SeparatorProps & { class?: any }>(), {\n    orientation: "horizontal",\n  });\n\n  const styles = tv({\n    base: "shrink-0 bg-border",\n    variants: {\n      orientation: {\n        horizontal: "h-[1px] w-full",\n        vertical: "h-full w-[1px]",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <Separator v-bind="forwarded" :class="styles({ orientation, class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { Separator, useForwardProps } from "radix-vue";\n  import type { SeparatorProps } from "radix-vue";\n\n  const props = withDefaults(defineProps<SeparatorProps & { class?: any }>(), {\n    orientation: "horizontal",\n  });\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "shrink-0 bg-border",\n    variants: {\n      orientation: {\n        horizontal: "h-[1px] w-full",\n        vertical: "h-full w-[1px]",\n      },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1939,25 +1939,25 @@ export default [
         fileName: "Sheet/Description.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogDescription\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'description\')"\n  >\n    <slot>{{ description }}</slot>\n  </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { DialogDescription } from "radix-vue";\n  import type { DialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogDescriptionProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n      /** Description text */\n      description?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ description }}</slot>\n  </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n  import { DialogDescription } from "radix-vue";\n  import type { DialogDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogDescriptionProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n      /** Description text */\n      description?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "description");\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Sheet/Footer.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
       },
       {
         fileName: "Sheet/Header.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const styles = tv({\n    base: "flex flex-col space-y-2 text-center sm:text-left",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col space-y-2 text-center sm:text-left",\n  });\n</script>\n',
       },
       {
         fileName: "Sheet/Overlay.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogOverlay :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')" />\n</template>\n\n<script lang="ts" setup>\n  import { DialogOverlay } from "radix-vue";\n  import type { DialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogOverlayProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
+          '<template>\n  <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n  import { DialogOverlay } from "radix-vue";\n  import type { DialogOverlayProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogOverlayProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n  });\n</script>\n',
       },
       {
         fileName: "Sheet/Portal.vue",
@@ -1975,7 +1975,7 @@ export default [
         fileName: "Sheet/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogTitle\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'title\')"\n  >\n    <slot>{{ title }}</slot>\n  </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { DialogTitle } from "radix-vue";\n  import type { DialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogTitleProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n      /** Title text */\n      title?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-lg font-semibold text-foreground",\n  });\n</script>\n',
+          '<template>\n  <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ title }}</slot>\n  </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n  import { DialogTitle } from "radix-vue";\n  import type { DialogTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    DialogTitleProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n      /** Title text */\n      title?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "title");\n  const styles = tv({\n    base: "text-lg font-semibold text-foreground",\n  });\n</script>\n',
       },
       {
         fileName: "Sheet/Trigger.vue",
@@ -1987,7 +1987,7 @@ export default [
         fileName: "Sheet/X.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DialogClose\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'srText\', \'class\', \'icon\')"\n  >\n    <slot>\n      <Icon :name="icon" class="h-4 w-4" />\n      <span class="sr-only">{{ srText }}</span>\n    </slot>\n  </DialogClose>\n</template>\n\n<script lang="ts" setup>\n  import { DialogClose } from "radix-vue";\n  import type { DialogCloseProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DialogCloseProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Icon to display */\n        icon?: string;\n        /** Screen reader text */\n        srText?: string;\n      }\n    >(),\n    {\n      icon: "heroicons:x-mark",\n      srText: "Close",\n    }\n  );\n\n  const styles = tv({\n    base: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",\n  });\n</script>\n',
+          '<template>\n  <DialogClose :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>\n      <Icon :name="icon" class="h-4 w-4" />\n      <span class="sr-only">{{ srText }}</span>\n    </slot>\n  </DialogClose>\n</template>\n\n<script lang="ts" setup>\n  import { DialogClose } from "radix-vue";\n  import type { DialogCloseProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      DialogCloseProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Icon to display */\n        icon?: string;\n        /** Screen reader text */\n        srText?: string;\n      }\n    >(),\n    {\n      icon: "heroicons:x-mark",\n      srText: "Close",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "icon", "srText");\n  const styles = tv({\n    base: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2002,7 +2002,7 @@ export default [
         fileName: "Skeleton.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive\n    :class="styles({ loading, class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'loading\')"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "animate-pulse rounded-md bg-muted",\n    variants: {\n      loading: { true: "cursor-wait", false: "cursor-default" },\n    },\n  });\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Whether the skeleton is loading */\n        loading?: boolean;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ loading, class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "animate-pulse rounded-md bg-muted",\n    variants: {\n      loading: { true: "cursor-wait", false: "cursor-default" },\n    },\n  });\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Whether the skeleton is loading */\n        loading?: boolean;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n\n  const forwarded = reactiveOmit(props, "class", "loading");\n</script>\n',
       },
     ],
     utils: [],
@@ -2017,7 +2017,7 @@ export default [
         fileName: "Slider/Range.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </SliderRange>\n</template>\n\n<script lang="ts" setup>\n  import { SliderRange } from "radix-vue";\n  import type { SliderRangeProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderRangeProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const styles = tv({\n    base: "absolute h-full bg-primary",\n  });\n</script>\n',
+          '<template>\n  <SliderRange :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </SliderRange>\n</template>\n\n<script lang="ts" setup>\n  import { SliderRange } from "radix-vue";\n  import type { SliderRangeProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderRangeProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "absolute h-full bg-primary",\n  });\n</script>\n',
       },
       {
         fileName: "Slider/Slider.vue",
@@ -2029,13 +2029,13 @@ export default [
         fileName: "Slider/Thumb.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </SliderThumb>\n</template>\n\n<script lang="ts" setup>\n  import { SliderThumb } from "radix-vue";\n  import type { SliderThumbProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderThumbProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <SliderThumb :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </SliderThumb>\n</template>\n\n<script lang="ts" setup>\n  import { SliderThumb } from "radix-vue";\n  import type { SliderThumbProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderThumbProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "Slider/Track.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </SliderTrack>\n</template>\n\n<script lang="ts" setup>\n  import { SliderTrack } from "radix-vue";\n  import type { SliderTrackProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderTrackProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n  });\n</script>\n',
+          '<template>\n  <SliderTrack :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </SliderTrack>\n</template>\n\n<script lang="ts" setup>\n  import { SliderTrack } from "radix-vue";\n  import type { SliderTrackProps } from "radix-vue";\n\n  const props = defineProps<\n    SliderTrackProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2134,7 +2134,7 @@ export default [
         fileName: "Switch/Thumb.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </SwitchThumb>\n</template>\n\n<script lang="ts" setup>\n  import { SwitchThumb } from "radix-vue";\n  import type { SwitchThumbProps } from "radix-vue";\n\n  const props = defineProps<\n    SwitchThumbProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",\n  });\n</script>\n',
+          '<template>\n  <SwitchThumb :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </SwitchThumb>\n</template>\n\n<script lang="ts" setup>\n  import { SwitchThumb } from "radix-vue";\n  import type { SwitchThumbProps } from "radix-vue";\n\n  const props = defineProps<\n    SwitchThumbProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2212,19 +2212,19 @@ export default [
         fileName: "Tabs/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </TabsContent>\n</template>\n\n<script lang="ts" setup>\n  import { TabsContent } from "radix-vue";\n  import type { TabsContentProps } from "radix-vue";\n\n  const props = defineProps<\n    TabsContentProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n  });\n</script>\n',
+          '<template>\n  <TabsContent v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </TabsContent>\n</template>\n\n<script lang="ts" setup>\n  import { TabsContent } from "radix-vue";\n  import type { TabsContentProps } from "radix-vue";\n\n  const props = defineProps<\n    TabsContentProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n  });\n</script>\n',
       },
       {
         fileName: "Tabs/Indicator.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ClientOnly>\n    <TabsIndicator\n      v-bind="{ ...reactiveOmit(props, \'class\'), ...$attrs }"\n      :class="styles({ class: props.class })"\n    >\n      <slot>\n        <div class="h-full w-full rounded-md bg-primary" />\n      </slot>\n    </TabsIndicator>\n  </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n  import { TabsIndicator } from "radix-vue";\n  import type { TabsIndicatorProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = defineProps<\n    TabsIndicatorProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",\n  });\n</script>\n',
+          '<template>\n  <ClientOnly>\n    <TabsIndicator v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n      <slot>\n        <div class="h-full w-full rounded-md bg-primary" />\n      </slot>\n    </TabsIndicator>\n  </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n  import { TabsIndicator } from "radix-vue";\n  import type { TabsIndicatorProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  const props = defineProps<\n    TabsIndicatorProps & {\n      /** Custom class(es) to add to parent element */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",\n  });\n</script>\n',
       },
       {
         fileName: "Tabs/List.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </TabsList>\n</template>\n\n<script lang="ts" setup>\n  import { TabsList } from "radix-vue";\n  import type { TabsListProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      TabsListProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        pill?: boolean;\n      }\n    >(),\n    { pill: true }\n  );\n\n  const styles = tv({\n    base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n    variants: {\n      pill: {\n        true: "bg-muted",\n        false: "",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <TabsList :class="styles({ pill, class: props.class })" v-bind="forwarded">\n    <slot />\n  </TabsList>\n</template>\n\n<script lang="ts" setup>\n  import { TabsList } from "radix-vue";\n  import type { TabsListProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      TabsListProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        pill?: boolean;\n      }\n    >(),\n    { pill: true }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n    variants: {\n      pill: {\n        true: "bg-muted",\n        false: "",\n      },\n    },\n  });\n</script>\n',
       },
       {
         fileName: "Tabs/Tabs.vue",
@@ -2236,7 +2236,7 @@ export default [
         fileName: "Tabs/Trigger.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n    <slot />\n  </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { TabsTrigger } from "radix-vue";\n  import type { TabsTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      TabsTriggerProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Whether the trigger should be pill-shaped */\n        pill?: boolean;\n      }\n    >(),\n    {\n      pill: true,\n    }\n  );\n\n  const styles = tv({\n    base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n    variants: {\n      pill: {\n        true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n        false:\n          "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n      },\n    },\n  });\n</script>\n',
+          '<template>\n  <TabsTrigger v-bind="forwarded" :class="styles({ pill, class: props.class })">\n    <slot />\n  </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n  import { TabsTrigger } from "radix-vue";\n  import type { TabsTriggerProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      TabsTriggerProps & {\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** Whether the trigger should be pill-shaped */\n        pill?: boolean;\n      }\n    >(),\n    {\n      pill: true,\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n    variants: {\n      pill: {\n        true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n        false:\n          "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n      },\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2257,25 +2257,25 @@ export default [
         fileName: "TagsInput/Field.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </TagsInputInput>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputInput } from "radix-vue";\n  import type { TagsInputInputProps } from "radix-vue";\n\n  const props = defineProps<TagsInputInputProps & { class?: any }>();\n\n  const styles = tv({\n    base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <TagsInputInput v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </TagsInputInput>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputInput } from "radix-vue";\n  import type { TagsInputInputProps } from "radix-vue";\n\n  const props = defineProps<TagsInputInputProps & { class?: any }>();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n  });\n</script>\n',
       },
       {
         fileName: "TagsInput/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TagsInputItem\n    v-bind="reactiveOmit(props, \'class\', \'icon\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>\n      <slot name="text">\n        <UiTagsInputItemText />\n      </slot>\n      <slot name="delete">\n        <UiTagsInputItemDelete :icon="icon" />\n      </slot>\n    </slot>\n  </TagsInputItem>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItem } from "radix-vue";\n  import type { TagsInputItemProps } from "radix-vue";\n\n  const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();\n  const styles = tv({\n    base: "inline-flex h-6 shrink-0 items-center gap-1.5 rounded bg-primary pl-2 pr-1 leading-none text-primary-foreground sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <TagsInputItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <slot name="text">\n        <UiTagsInputItemText />\n      </slot>\n      <slot name="delete">\n        <UiTagsInputItemDelete :icon="icon" />\n      </slot>\n    </slot>\n  </TagsInputItem>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItem } from "radix-vue";\n  import type { TagsInputItemProps } from "radix-vue";\n\n  const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "inline-flex h-6 shrink-0 items-center gap-1.5 rounded bg-primary pl-2 pr-1 leading-none text-primary-foreground sm:text-sm",\n  });\n</script>\n',
       },
       {
         fileName: "TagsInput/ItemDelete.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TagsInputItemDelete\n    v-bind="reactiveOmit(props, \'icon\', \'class\')"\n    :class="styles({ class: props.class })"\n  >\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItemDelete } from "radix-vue";\n  import type { TagsInputItemDeleteProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<TagsInputItemDeleteProps & { icon?: string; class?: any }>(),\n    {\n      icon: "lucide:x",\n    }\n  );\n\n  const styles = tv({\n    base: "flex items-center justify-center rounded bg-transparent opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\n  });\n</script>\n',
+          '<template>\n  <TagsInputItemDelete v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItemDelete } from "radix-vue";\n  import type { TagsInputItemDeleteProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<TagsInputItemDeleteProps & { icon?: string; class?: any }>(),\n    {\n      icon: "lucide:x",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "flex items-center justify-center rounded bg-transparent opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\n  });\n</script>\n',
       },
       {
         fileName: "TagsInput/ItemText.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n    <slot />\n  </TagsInputItemText>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItemText } from "radix-vue";\n  import type { TagsInputItemTextProps } from "radix-vue";\n\n  const props = defineProps<TagsInputItemTextProps & { class?: any }>();\n\n  const styles = tv({\n    base: "leading-none sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <TagsInputItemText v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </TagsInputItemText>\n</template>\n\n<script lang="ts" setup>\n  import { TagsInputItemText } from "radix-vue";\n  import type { TagsInputItemTextProps } from "radix-vue";\n\n  const props = defineProps<TagsInputItemTextProps & { class?: any }>();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "leading-none sm:text-sm",\n  });\n</script>\n',
       },
       {
         fileName: "TagsInput/TagsInput.vue",
@@ -2338,19 +2338,19 @@ export default [
         fileName: "Toast/Action.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </ToastAction>\n</template>\n\n<script lang="ts" setup>\n  import { ToastAction } from "radix-vue";\n  import type { ToastActionProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ToastActionProps & {\n        /**\n         * Custom class names to add to the button.\n         */\n        class?: any;\n      }\n    >(),\n    {\n      altText: "Action button",\n    }\n  );\n\n  const styles = tv({\n    base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",\n  });\n</script>\n',
+          '<template>\n  <ToastAction :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </ToastAction>\n</template>\n\n<script lang="ts" setup>\n  import { ToastAction } from "radix-vue";\n  import type { ToastActionProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      ToastActionProps & {\n        /**\n         * Custom class names to add to the button.\n         */\n        class?: any;\n      }\n    >(),\n    {\n      altText: "Action button",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",\n  });\n</script>\n',
       },
       {
         fileName: "Toast/Close.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ToastClose :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\', \'icon\')">\n    <slot>\n      <Icon :name="icon || \'lucide:x\'" class="h-4 w-4" />\n    </slot>\n  </ToastClose>\n</template>\n\n<script lang="ts" setup>\n  import { ToastClose } from "radix-vue";\n  import type { ToastCloseProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastCloseProps & {\n      /**\n       * Custom class names to add to the button.\n       */\n      class?: any;\n      /**\n       * The icon to render.\n       */\n      icon?: string;\n    }\n  >();\n\n  const styles = tv({\n    base: "absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 text-foreground/50 opacity-50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus-visible:ring-ring group-hover:opacity-100",\n  });\n</script>\n',
+          '<template>\n  <ToastClose :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>\n      <Icon :name="icon || \'lucide:x\'" class="h-4 w-4" />\n    </slot>\n  </ToastClose>\n</template>\n\n<script lang="ts" setup>\n  import { ToastClose } from "radix-vue";\n  import type { ToastCloseProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastCloseProps & {\n      /**\n       * Custom class names to add to the button.\n       */\n      class?: any;\n      /**\n       * The icon to render.\n       */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "icon");\n  const styles = tv({\n    base: "absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 text-foreground/50 opacity-50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus-visible:ring-ring group-hover:opacity-100",\n  });\n</script>\n',
       },
       {
         fileName: "Toast/Description.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ToastDescription\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'description\')"\n  >\n    <slot>{{ description }}</slot>\n  </ToastDescription>\n</template>\n\n<script lang="ts" setup>\n  import { ToastDescription } from "radix-vue";\n  import type { ToastDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastDescriptionProps & {\n      /** The description text to render */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-sm opacity-90",\n  });\n</script>\n',
+          '<template>\n  <ToastDescription :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ description }}</slot>\n  </ToastDescription>\n</template>\n\n<script lang="ts" setup>\n  import { ToastDescription } from "radix-vue";\n  import type { ToastDescriptionProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastDescriptionProps & {\n      /** The description text to render */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "description");\n  const styles = tv({\n    base: "text-sm opacity-90",\n  });\n</script>\n',
       },
       {
         fileName: "Toast/Provider.vue",
@@ -2362,7 +2362,7 @@ export default [
         fileName: "Toast/Title.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ToastTitle\n    :class="styles({ class: props.class })"\n    v-bind="reactiveOmit(props, \'class\', \'title\')"\n  >\n    <slot>{{ title }}</slot>\n  </ToastTitle>\n</template>\n\n<script lang="ts" setup>\n  import { ToastTitle } from "radix-vue";\n  import type { ToastTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastTitleProps & {\n      /** The title text to render */\n      title?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "text-sm font-semibold",\n  });\n</script>\n',
+          '<template>\n  <ToastTitle :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot>{{ title }}</slot>\n  </ToastTitle>\n</template>\n\n<script lang="ts" setup>\n  import { ToastTitle } from "radix-vue";\n  import type { ToastTitleProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastTitleProps & {\n      /** The title text to render */\n      title?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class", "title");\n  const styles = tv({\n    base: "text-sm font-semibold",\n  });\n</script>\n',
       },
       {
         fileName: "Toast/Toast.vue",
@@ -2380,7 +2380,7 @@ export default [
         fileName: "Toast/Viewport.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n    <slot />\n  </ToastViewport>\n</template>\n\n<script lang="ts" setup>\n  import { ToastViewport } from "radix-vue";\n  import type { ToastViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastViewportProps & {\n      /**\n       * Custom class names to add to the button.\n       */\n      class?: any;\n    }\n  >();\n\n  const styles = tv({\n    base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",\n  });\n</script>\n\n<style>\n  [aria-label~="Notifications"] {\n    display: grid;\n  }\n</style>\n',
+          '<template>\n  <ToastViewport :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </ToastViewport>\n</template>\n\n<script lang="ts" setup>\n  import { ToastViewport } from "radix-vue";\n  import type { ToastViewportProps } from "radix-vue";\n\n  const props = defineProps<\n    ToastViewportProps & {\n      /**\n       * Custom class names to add to the button.\n       */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",\n  });\n</script>\n\n<style>\n  [aria-label~="Notifications"] {\n    display: grid;\n  }\n</style>\n',
       },
     ],
     utils: [],
@@ -2475,7 +2475,7 @@ export default [
         fileName: "Tree/Item.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TreeItem v-slot="slotProps" v-bind="forwarded">\n    <slot v-bind="slotProps" />\n  </TreeItem>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n  import { TreeItem, useForwardPropsEmits } from "radix-vue";\n  import type { TreeItemProps } from "radix-vue";\n\n  // Remove this when the type is properly exported from radix-vue\n  type TreeItemEmits = {\n    /**\n     * Event handler called when the selecting item.\n     *\n     * It can be prevented by calling `event.preventDefault`.\n     */\n    select: [event: any];\n    /**\n     * Event handler called when the selecting item.\n     *\n     * It can be prevented by calling `event.preventDefault`.\n     */\n    toggle: [event: any];\n  };\n\n  const props = defineProps<TreeItemProps<T>>();\n\n  const emit = defineEmits<TreeItemEmits>();\n\n  const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
+          '<template>\n  <TreeItem v-slot="slotProps" v-bind="forwarded">\n    <slot v-bind="slotProps" />\n  </TreeItem>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n  import { TreeItem, useForwardPropsEmits } from "radix-vue";\n  import type { TreeItemEmits, TreeItemProps } from "radix-vue";\n\n  const props = defineProps<TreeItemProps<T>>();\n  const emit = defineEmits<TreeItemEmits<T>>();\n\n  const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
       },
       {
         fileName: "Tree/Tree.vue",
@@ -2487,7 +2487,7 @@ export default [
         fileName: "Tree/Virtualizer.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <TreeVirtualizer v-slot="slotProps" v-bind="forwarded">\n    <slot v-bind="slotProps" />\n  </TreeVirtualizer>\n</template>\n\n<script lang="ts" setup>\n  import { TreeVirtualizer, useForwardPropsEmits } from "radix-vue";\n  import type { TreeVirtualizerProps } from "radix-vue";\n\n  const props = defineProps<TreeVirtualizerProps>();\n\n  const forwarded = useForwardPropsEmits(props);\n</script>\n',
+          '<template>\n  <TreeVirtualizer v-slot="slotProps" v-bind="forwarded">\n    <slot v-bind="slotProps" />\n  </TreeVirtualizer>\n</template>\n\n<script lang="ts" setup>\n  import { TreeVirtualizer, useForwardPropsEmits } from "radix-vue";\n  import type { TreeVirtualizerProps } from "radix-vue";\n\n  const props = defineProps<TreeVirtualizerProps>();\n  const forwarded = useForwardPropsEmits(props);\n</script>\n',
       },
     ],
     utils: [],
@@ -2658,7 +2658,7 @@ export default [
         fileName: "Vee/PinInput.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <UiPinInput\n        :id="inputId"\n        v-bind="{\n          ...$attrs,\n          ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\n        }"\n        v-model="value"\n        @complete="emits(\'complete\', $event)"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import type { PinInputRootProps } from "radix-vue";\n\n  const props = defineProps<\n    Omit<PinInputRootProps, "as" | "asChild"> & {\n      label?: string;\n      hint?: string;\n      id?: string;\n      rules?: any;\n      validateOnMount?: boolean;\n      separator?: string;\n      inputCount?: number;\n    }\n  >();\n\n  const emits = defineEmits<{\n    complete: [value: string[]];\n  }>();\n\n  const inputId = props.id || useId();\n\n  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue || [],\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
+          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <UiPinInput\n        :id="inputId"\n        v-bind="{ ...$attrs, ...forwarded }"\n        v-model="value"\n        @complete="emits(\'complete\', $event)"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import type { PinInputRootProps } from "radix-vue";\n\n  const props = defineProps<\n    Omit<PinInputRootProps, "as" | "asChild"> & {\n      label?: string;\n      hint?: string;\n      id?: string;\n      rules?: any;\n      validateOnMount?: boolean;\n      separator?: string;\n      inputCount?: number;\n    }\n  >();\n\n  const emits = defineEmits<{\n    complete: [value: string[]];\n  }>();\n\n  const forwarded = reactiveOmit(\n    props,\n    "label",\n    "hint",\n    "id",\n    "rules",\n    "validateOnMount",\n    "modelValue"\n  );\n  const inputId = props.id || useId();\n\n  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue || [],\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
       },
     ],
     utils: [],