From 563a1d3bbb9c4a471bb79c562252d6c1112f4ab4 Mon Sep 17 00:00:00 2001
From: Behon Baker <53905713+BayBreezy@users.noreply.github.com>
Date: Sun, 18 Aug 2024 17:13:04 -0500
Subject: [PATCH] chore: update to newest components

---
 app/components/Ui/Accordion/Content.vue       |  9 +++++----
 app/components/Ui/Accordion/Header.vue        |  4 +++-
 app/components/Ui/Accordion/Item.vue          |  9 ++++-----
 app/components/Ui/Accordion/Trigger.vue       | 10 ++++++----
 app/components/Ui/Alert/Description.vue       |  7 +++----
 app/components/Ui/Alert/Title.vue             |  4 +++-
 app/components/Ui/AlertDialog/Action.vue      |  4 +++-
 app/components/Ui/AlertDialog/Cancel.vue      |  4 +++-
 app/components/Ui/AlertDialog/Description.vue |  7 +++----
 app/components/Ui/AlertDialog/Footer.vue      |  4 +++-
 app/components/Ui/AlertDialog/Header.vue      |  4 ++--
 app/components/Ui/AlertDialog/Overlay.vue     |  7 ++-----
 app/components/Ui/AlertDialog/Title.vue       |  4 ++--
 app/components/Ui/Autocomplete/Trigger.vue    |  4 ++--
 app/components/Ui/Avatar/Fallback.vue         |  6 ++----
 app/components/Ui/Breadcrumbs.vue             |  2 +-
 app/components/Ui/Checkbox/Indicator.vue      |  7 ++-----
 app/components/Ui/Collapsible/Content.vue     |  4 ++--
 app/components/Ui/Command/Cancel.vue          |  4 ++--
 app/components/Ui/Command/Empty.vue           |  4 ++--
 app/components/Ui/Command/Group.vue           |  7 ++-----
 app/components/Ui/Command/Input.vue           |  2 +-
 app/components/Ui/Command/Label.vue           |  7 ++-----
 app/components/Ui/Container.vue               |  4 +++-
 app/components/Ui/ContextMenu/Arrow.vue       |  3 ++-
 .../Ui/ContextMenu/CheckboxItem.vue           |  9 +++------
 app/components/Ui/ContextMenu/Item.vue        | 14 ++++++-------
 .../Ui/ContextMenu/ItemIndicator.vue          |  8 +++++++-
 app/components/Ui/ContextMenu/Label.vue       |  7 ++-----
 app/components/Ui/ContextMenu/SubTrigger.vue  |  7 ++-----
 app/components/Ui/CurrencyInput.vue           |  1 +
 app/components/Ui/Dialog/Description.vue      |  7 ++-----
 app/components/Ui/Dialog/Footer.vue           |  4 ++--
 app/components/Ui/Dialog/Header.vue           |  4 ++--
 app/components/Ui/Dialog/Overlay.vue          |  3 ++-
 app/components/Ui/Dialog/Title.vue            |  7 ++-----
 app/components/Ui/DropdownMenu/Arrow.vue      |  7 ++-----
 .../Ui/DropdownMenu/ItemIndicator.vue         | 10 +++++++++-
 app/components/Ui/DropdownMenu/Label.vue      |  7 ++-----
 app/components/Ui/DropdownMenu/Separator.vue  |  7 ++-----
 app/components/Ui/DropdownMenu/Shortcut.vue   |  4 ++--
 app/components/Ui/DropdownMenu/SubTrigger.vue |  7 ++-----
 app/components/Ui/Dropfile.vue                |  2 +-
 app/components/Ui/Editable/Area.vue           | 12 +++++++++++
 app/components/Ui/Editable/Cancel.vue         | 12 +++++++++++
 app/components/Ui/Editable/Edit.vue           | 12 +++++++++++
 app/components/Ui/Editable/Editable.vue       | 20 +++++++++++++++++++
 app/components/Ui/Editable/Input.vue          | 12 +++++++++++
 app/components/Ui/Editable/Preview.vue        | 12 +++++++++++
 app/components/Ui/Editable/Submit.vue         | 12 +++++++++++
 app/components/Ui/GradientDivider.vue         |  4 +++-
 app/components/Ui/HoverCard/Arrow.vue         |  4 ++--
 app/components/Ui/HoverCard/Content.vue       |  7 ++-----
 app/components/Ui/Input.vue                   |  1 +
 app/components/Ui/Kbd.vue                     |  7 +++----
 app/components/Ui/Label.vue                   |  4 +++-
 app/components/Ui/List/Content.vue            |  4 ++--
 app/components/Ui/List/List.vue               |  4 ++--
 app/components/Ui/List/Subtitle.vue           |  7 ++-----
 app/components/Ui/List/Title.vue              |  4 ++--
 app/components/Ui/Menubar/ItemIndicator.vue   |  9 ++++++++-
 app/components/Ui/Menubar/Label.vue           |  7 ++-----
 app/components/Ui/Menubar/Separator.vue       |  4 ++--
 app/components/Ui/Menubar/Shortcut.vue        |  4 ++--
 app/components/Ui/Menubar/SubTrigger.vue      |  7 ++-----
 app/components/Ui/Menubar/Trigger.vue         |  4 ++--
 app/components/Ui/Navbar.vue                  |  6 +++++-
 .../Ui/NavigationMenu/Indicator.vue           |  7 ++-----
 app/components/Ui/NavigationMenu/List.vue     |  4 ++--
 app/components/Ui/NavigationMenu/Trigger.vue  |  7 ++-----
 app/components/Ui/NavigationMenu/Viewport.vue |  3 ++-
 app/components/Ui/Pagination/Ellipsis.vue     |  3 ++-
 app/components/Ui/Pagination/First.vue        |  3 ++-
 app/components/Ui/Pagination/Last.vue         |  3 ++-
 app/components/Ui/Pagination/List.vue         |  8 ++------
 app/components/Ui/Pagination/Prev.vue         |  4 +++-
 app/components/Ui/PinInput/PinInputInput.vue  |  3 ++-
 app/components/Ui/Popover/Arrow.vue           |  2 +-
 app/components/Ui/Progress/Indicator.vue      |  4 ++--
 app/components/Ui/RadioGroup/Indicator.vue    |  7 ++-----
 app/components/Ui/RadioGroup/Item.vue         |  7 ++-----
 app/components/Ui/ScrollArea/ScrollArea.vue   |  4 ++--
 app/components/Ui/ScrollArea/Scrollbar.vue    |  7 ++-----
 app/components/Ui/ScrollArea/Thumb.vue        |  7 ++-----
 app/components/Ui/ScrollArea/Viewport.vue     |  4 ++--
 app/components/Ui/Select/Icon.vue             |  2 +-
 app/components/Ui/Select/Item.vue             |  7 ++-----
 app/components/Ui/Select/ItemIndicator.vue    |  4 ++--
 app/components/Ui/Select/Label.vue            |  4 ++--
 app/components/Ui/Select/ScrollDownButton.vue |  3 ++-
 app/components/Ui/Select/ScrollUpButton.vue   |  3 ++-
 app/components/Ui/Select/Separator.vue        |  4 ++--
 app/components/Ui/Select/Trigger.vue          |  7 ++-----
 app/components/Ui/Select/Viewport.vue         |  7 ++-----
 app/components/Ui/Separator.vue               |  7 +++----
 app/components/Ui/Sheet/Description.vue       |  7 ++-----
 app/components/Ui/Sheet/Footer.vue            |  4 ++--
 app/components/Ui/Sheet/Header.vue            |  4 ++--
 app/components/Ui/Sheet/Overlay.vue           |  4 ++--
 app/components/Ui/Sheet/Title.vue             |  7 ++-----
 app/components/Ui/Sheet/X.vue                 |  7 ++-----
 app/components/Ui/Skeleton.vue                |  7 +++----
 app/components/Ui/Slider/Range.vue            |  3 ++-
 app/components/Ui/Slider/Thumb.vue            |  4 ++--
 app/components/Ui/Slider/Track.vue            |  4 ++--
 app/components/Ui/Stepper/Description.vue     | 12 +++++++++++
 app/components/Ui/Stepper/Indicator.vue       | 12 +++++++++++
 app/components/Ui/Stepper/Item.vue            | 12 +++++++++++
 app/components/Ui/Stepper/Separator.vue       | 12 +++++++++++
 app/components/Ui/Stepper/Stepper.vue         | 14 +++++++++++++
 app/components/Ui/Stepper/Title.vue           | 12 +++++++++++
 app/components/Ui/Stepper/Trigger.vue         | 12 +++++++++++
 app/components/Ui/Switch/Thumb.vue            |  4 ++--
 app/components/Ui/Tabs/Content.vue            |  4 ++--
 app/components/Ui/Tabs/Indicator.vue          |  7 ++-----
 app/components/Ui/Tabs/List.vue               |  4 ++--
 app/components/Ui/Tabs/Trigger.vue            |  4 ++--
 app/components/Ui/TagsInput/Field.vue         |  4 ++--
 app/components/Ui/TagsInput/Item.vue          |  6 ++----
 app/components/Ui/TagsInput/ItemDelete.vue    |  7 ++-----
 app/components/Ui/TagsInput/ItemText.vue      |  4 ++--
 app/components/Ui/Toast/Action.vue            |  4 ++--
 app/components/Ui/Toast/Close.vue             |  4 ++--
 app/components/Ui/Toast/Description.vue       |  7 ++-----
 app/components/Ui/Toast/Title.vue             |  7 ++-----
 app/components/Ui/Toast/Viewport.vue          |  4 ++--
 app/components/Ui/Tree/Item.vue               | 15 ++++++++++++++
 app/components/Ui/Tree/Tree.vue               | 15 ++++++++++++++
 app/components/Ui/Tree/Virtualizer.vue        | 13 ++++++++++++
 app/components/Ui/Vee/PinInput.vue            | 15 +++++++++-----
 nuxt.config.ts                                |  2 +-
 131 files changed, 498 insertions(+), 329 deletions(-)
 create mode 100644 app/components/Ui/Editable/Area.vue
 create mode 100644 app/components/Ui/Editable/Cancel.vue
 create mode 100644 app/components/Ui/Editable/Edit.vue
 create mode 100644 app/components/Ui/Editable/Editable.vue
 create mode 100644 app/components/Ui/Editable/Input.vue
 create mode 100644 app/components/Ui/Editable/Preview.vue
 create mode 100644 app/components/Ui/Editable/Submit.vue
 create mode 100644 app/components/Ui/Stepper/Description.vue
 create mode 100644 app/components/Ui/Stepper/Indicator.vue
 create mode 100644 app/components/Ui/Stepper/Item.vue
 create mode 100644 app/components/Ui/Stepper/Separator.vue
 create mode 100644 app/components/Ui/Stepper/Stepper.vue
 create mode 100644 app/components/Ui/Stepper/Title.vue
 create mode 100644 app/components/Ui/Stepper/Trigger.vue
 create mode 100644 app/components/Ui/Tree/Item.vue
 create mode 100644 app/components/Ui/Tree/Tree.vue
 create mode 100644 app/components/Ui/Tree/Virtualizer.vue

diff --git a/app/components/Ui/Accordion/Content.vue b/app/components/Ui/Accordion/Content.vue
index 78f3152..1a0fd2c 100644
--- a/app/components/Ui/Accordion/Content.vue
+++ b/app/components/Ui/Accordion/Content.vue
@@ -1,8 +1,5 @@
 <template>
-  <AccordionContent
-    v-bind="reactiveOmit(props, 'content', 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionContent v-bind="forwarded" :class="styles({ class: props.class })">
     <div class="pb-4 pt-0">
       <slot>{{ content }}</slot>
     </div>
@@ -15,11 +12,15 @@
 
   const props = defineProps<
     AccordionContentProps & {
+      /** Custom class(es) to add to the parent */
       class?: any;
+      /** The content of the accordion */
       content?: any;
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class", "content");
+
   const styles = tv({
     base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
   });
diff --git a/app/components/Ui/Accordion/Header.vue b/app/components/Ui/Accordion/Header.vue
index 1cdcc3a..c1a32bb 100644
--- a/app/components/Ui/Accordion/Header.vue
+++ b/app/components/Ui/Accordion/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <AccordionHeader v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <AccordionHeader v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </AccordionHeader>
 </template>
@@ -14,6 +14,8 @@
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "flex",
   });
diff --git a/app/components/Ui/Accordion/Item.vue b/app/components/Ui/Accordion/Item.vue
index 35f31c9..08fdd46 100644
--- a/app/components/Ui/Accordion/Item.vue
+++ b/app/components/Ui/Accordion/Item.vue
@@ -1,9 +1,5 @@
 <template>
-  <AccordionItem
-    v-slot="slotProps"
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionItem v-slot="slotProps" v-bind="forwarded" :class="styles({ class: props.class })">
     <slot v-bind="slotProps" />
   </AccordionItem>
 </template>
@@ -14,10 +10,13 @@
 
   const props = defineProps<
     AccordionItemProps & {
+      /** Custom class(es) to add to the parent */
       class?: any;
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "border-b",
   });
diff --git a/app/components/Ui/Accordion/Trigger.vue b/app/components/Ui/Accordion/Trigger.vue
index 134b610..30ed0a8 100644
--- a/app/components/Ui/Accordion/Trigger.vue
+++ b/app/components/Ui/Accordion/Trigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <AccordionTrigger
-    v-bind="reactiveOmit(props, 'class', 'icon', 'title')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">
     <slot :props="props">
       {{ title }}
     </slot>
@@ -19,8 +16,11 @@
   const props = withDefaults(
     defineProps<
       AccordionTriggerProps & {
+        /** Custom class(es) to add to the parent */
         class?: any;
+        /** The title of the accordion trigger */
         title?: string;
+        /** The icon to show next to the title */
         icon?: string;
       }
     >(),
@@ -31,6 +31,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class", "icon", "title");
+
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Alert/Description.vue b/app/components/Ui/Alert/Description.vue
index 119fe78..2626623 100644
--- a/app/components/Ui/Alert/Description.vue
+++ b/app/components/Ui/Alert/Description.vue
@@ -1,8 +1,5 @@
 <template>
-  <Primitive
-    v-bind="reactiveOmit(props, 'description', 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <Primitive v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>{{ description }}</slot>
   </Primitive>
 </template>
@@ -23,6 +20,8 @@
     { as: "div", class: undefined, description: undefined }
   );
 
+  const forwarded = reactiveOmit(props, "class", "description");
+
   const styles = tv({
     base: "text-sm [&_p]:leading-relaxed",
   });
diff --git a/app/components/Ui/Alert/Title.vue b/app/components/Ui/Alert/Title.vue
index 9baf696..af89c5f 100644
--- a/app/components/Ui/Alert/Title.vue
+++ b/app/components/Ui/Alert/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive v-bind="reactiveOmit(props, 'class', 'title')" :class="styles({ class: props.class })">
+  <Primitive v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>{{ title }}</slot>
   </Primitive>
 </template>
@@ -20,6 +20,8 @@
     { as: "h5", class: undefined, title: undefined }
   );
 
+  const forwarded = reactiveOmit(props, "class", "title");
+
   const styles = tv({
     base: "mb-1 font-medium leading-none tracking-tight",
   });
diff --git a/app/components/Ui/AlertDialog/Action.vue b/app/components/Ui/AlertDialog/Action.vue
index cc881c7..bef2931 100644
--- a/app/components/Ui/AlertDialog/Action.vue
+++ b/app/components/Ui/AlertDialog/Action.vue
@@ -1,6 +1,6 @@
 <template>
   <AlertDialogAction
-    v-bind="reactiveOmit(props, 'class', 'text', 'variant', 'size')"
+    v-bind="forwarded"
     :class="buttonStyles({ variant, size, disabled, class: props.class })"
   >
     <slot>{{ text }} </slot>
@@ -36,4 +36,6 @@
       onClick: undefined,
     }
   );
+
+  const forwarded = reactiveOmit(props, "class", "text", "variant", "size");
 </script>
diff --git a/app/components/Ui/AlertDialog/Cancel.vue b/app/components/Ui/AlertDialog/Cancel.vue
index b91b666..af8b086 100644
--- a/app/components/Ui/AlertDialog/Cancel.vue
+++ b/app/components/Ui/AlertDialog/Cancel.vue
@@ -1,6 +1,6 @@
 <template>
   <AlertDialogCancel
-    v-bind="reactiveOmit(props, 'class', 'text', 'variant', 'size')"
+    v-bind="forwarded"
     :class="buttonStyles({ variant, size, disabled, class: props.class })"
   >
     <slot>{{ text }}</slot>
@@ -36,4 +36,6 @@
       onClick: undefined,
     }
   );
+
+  const forwarded = reactiveOmit(props, "class", "text", "variant", "size");
 </script>
diff --git a/app/components/Ui/AlertDialog/Description.vue b/app/components/Ui/AlertDialog/Description.vue
index 43f02d9..3179c67 100644
--- a/app/components/Ui/AlertDialog/Description.vue
+++ b/app/components/Ui/AlertDialog/Description.vue
@@ -1,8 +1,5 @@
 <template>
-  <AlertDialogDescription
-    v-bind="reactiveOmit(props, 'class', 'description')"
-    :class="styles({ class: props.class })"
-  >
+  <AlertDialogDescription v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>{{ description }}</slot>
   </AlertDialogDescription>
 </template>
@@ -20,6 +17,8 @@
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class", "description");
+
   const styles = tv({
     base: "text-sm text-muted-foreground",
   });
diff --git a/app/components/Ui/AlertDialog/Footer.vue b/app/components/Ui/AlertDialog/Footer.vue
index 9993559..c3c7a99 100644
--- a/app/components/Ui/AlertDialog/Footer.vue
+++ b/app/components/Ui/AlertDialog/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -20,6 +20,8 @@
       class: undefined,
     }
   );
+
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
   });
diff --git a/app/components/Ui/AlertDialog/Header.vue b/app/components/Ui/AlertDialog/Header.vue
index aa7d1cf..711b904 100644
--- a/app/components/Ui/AlertDialog/Header.vue
+++ b/app/components/Ui/AlertDialog/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -20,7 +20,7 @@
       class: undefined,
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col gap-2 text-center sm:text-left",
   });
diff --git a/app/components/Ui/AlertDialog/Overlay.vue b/app/components/Ui/AlertDialog/Overlay.vue
index 8b26d73..193a39a 100644
--- a/app/components/Ui/AlertDialog/Overlay.vue
+++ b/app/components/Ui/AlertDialog/Overlay.vue
@@ -1,8 +1,5 @@
 <template>
-  <AlertDialogOverlay
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  />
+  <AlertDialogOverlay v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
   });
diff --git a/app/components/Ui/AlertDialog/Title.vue b/app/components/Ui/AlertDialog/Title.vue
index dd04610..38981fd 100644
--- a/app/components/Ui/AlertDialog/Title.vue
+++ b/app/components/Ui/AlertDialog/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <AlertDialogTitle v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <AlertDialogTitle v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>{{ title }}</slot>
   </AlertDialogTitle>
 </template>
@@ -16,7 +16,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "title");
   const styles = tv({
     base: "text-lg font-semibold",
   });
diff --git a/app/components/Ui/Autocomplete/Trigger.vue b/app/components/Ui/Autocomplete/Trigger.vue
index b42018d..5028a5c 100644
--- a/app/components/Ui/Autocomplete/Trigger.vue
+++ b/app/components/Ui/Autocomplete/Trigger.vue
@@ -1,5 +1,5 @@
 <template>
-  <ComboboxTrigger v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <ComboboxTrigger v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </ComboboxTrigger>
 </template>
@@ -13,7 +13,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "inline-flex shrink-0 cursor-pointer items-center justify-center",
   });
diff --git a/app/components/Ui/Avatar/Fallback.vue b/app/components/Ui/Avatar/Fallback.vue
index d541a5a..b910709 100644
--- a/app/components/Ui/Avatar/Fallback.vue
+++ b/app/components/Ui/Avatar/Fallback.vue
@@ -1,8 +1,5 @@
 <template>
-  <AvatarFallback
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'fallback')"
-  >
+  <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       {{ fallback }}
     </slot>
@@ -21,6 +18,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class", "fallback");
   const styles = tv({
     base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
   });
diff --git a/app/components/Ui/Breadcrumbs.vue b/app/components/Ui/Breadcrumbs.vue
index e5df254..e5c3fe5 100644
--- a/app/components/Ui/Breadcrumbs.vue
+++ b/app/components/Ui/Breadcrumbs.vue
@@ -39,7 +39,7 @@
     icon?: string;
     link?: string;
     disabled?: boolean;
-
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
     click?: Function;
   }
   const props = withDefaults(
diff --git a/app/components/Ui/Checkbox/Indicator.vue b/app/components/Ui/Checkbox/Indicator.vue
index deabb74..a95f823 100644
--- a/app/components/Ui/Checkbox/Indicator.vue
+++ b/app/components/Ui/Checkbox/Indicator.vue
@@ -1,8 +1,5 @@
 <template>
-  <CheckboxIndicator
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'icon')"
-  >
+  <CheckboxIndicator :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       <Icon :name="checked == 'indeterminate' ? 'lucide:minus' : icon" class="h-4 w-4" />
     </slot>
@@ -31,7 +28,7 @@
       icon: "lucide:check",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     base: "flex items-center justify-center text-current",
   });
diff --git a/app/components/Ui/Collapsible/Content.vue b/app/components/Ui/Collapsible/Content.vue
index 8249516..5c950f5 100644
--- a/app/components/Ui/Collapsible/Content.vue
+++ b/app/components/Ui/Collapsible/Content.vue
@@ -1,5 +1,5 @@
 <template>
-  <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <CollapsibleContent :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </CollapsibleContent>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
   });
diff --git a/app/components/Ui/Command/Cancel.vue b/app/components/Ui/Command/Cancel.vue
index b429721..f500fca 100644
--- a/app/components/Ui/Command/Cancel.vue
+++ b/app/components/Ui/Command/Cancel.vue
@@ -1,5 +1,5 @@
 <template>
-  <ComboboxCancel v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <ComboboxCancel v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon name="lucide:x" class="h-4 w-4 text-muted-foreground/70" />
     </slot>
@@ -11,7 +11,7 @@
   import type { ComboboxCancelProps } from "radix-vue";
 
   const props = defineProps<ComboboxCancelProps & { class?: any }>();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex items-center justify-center",
   });
diff --git a/app/components/Ui/Command/Empty.vue b/app/components/Ui/Command/Empty.vue
index fe9e443..0a17d07 100644
--- a/app/components/Ui/Command/Empty.vue
+++ b/app/components/Ui/Command/Empty.vue
@@ -1,5 +1,5 @@
 <template>
-  <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <ComboboxEmpty :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </ComboboxEmpty>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "py-6 text-center text-sm",
   });
diff --git a/app/components/Ui/Command/Group.vue b/app/components/Ui/Command/Group.vue
index 24e44bd..fc1e3cc 100644
--- a/app/components/Ui/Command/Group.vue
+++ b/app/components/Ui/Command/Group.vue
@@ -1,8 +1,5 @@
 <template>
-  <ComboboxGroup
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'heading')"
-  >
+  <ComboboxGroup :class="styles({ class: props.class })" v-bind="forwarded">
     <slot name="heading">
       <UiCommandLabel v-if="heading" :label="heading" />
     </slot>
@@ -22,7 +19,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "heading");
   const styles = tv({
     base: "overflow-hidden p-1 text-foreground",
   });
diff --git a/app/components/Ui/Command/Input.vue b/app/components/Ui/Command/Input.vue
index d35a582..dea9a6a 100644
--- a/app/components/Ui/Command/Input.vue
+++ b/app/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/app/components/Ui/Command/Label.vue b/app/components/Ui/Command/Label.vue
index af2db59..62c31c3 100644
--- a/app/components/Ui/Command/Label.vue
+++ b/app/components/Ui/Command/Label.vue
@@ -1,8 +1,5 @@
 <template>
-  <ComboboxLabel
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'label')"
-  >
+  <ComboboxLabel :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ label }}</slot>
   </ComboboxLabel>
 </template>
@@ -23,7 +20,7 @@
       label?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "label");
   const styles = tv({
     base: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
   });
diff --git a/app/components/Ui/Container.vue b/app/components/Ui/Container.vue
index 9a9742a..643fe4c 100644
--- a/app/components/Ui/Container.vue
+++ b/app/components/Ui/Container.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,6 +19,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "container mx-auto",
   });
diff --git a/app/components/Ui/ContextMenu/Arrow.vue b/app/components/Ui/ContextMenu/Arrow.vue
index 5e4e98c..9420871 100644
--- a/app/components/Ui/ContextMenu/Arrow.vue
+++ b/app/components/Ui/ContextMenu/Arrow.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContextMenuArrow v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
+  <ContextMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +12,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "border bg-muted",
   });
diff --git a/app/components/Ui/ContextMenu/CheckboxItem.vue b/app/components/Ui/ContextMenu/CheckboxItem.vue
index 666b1f3..ee98e46 100644
--- a/app/components/Ui/ContextMenu/CheckboxItem.vue
+++ b/app/components/Ui/ContextMenu/CheckboxItem.vue
@@ -1,8 +1,5 @@
 <template>
-  <ContextMenuCheckboxItem
-    v-bind="{ ...reactiveOmit(props, 'class', 'shortcut', 'title'), ...useEmitAsProps(emits) }"
-    :class="styles({ class: props.class })"
-  >
+  <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">
       <UiContextMenuItemIndicator icon="lucide:check" />
     </span>
@@ -16,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ContextMenuCheckboxItem, useEmitAsProps } from "radix-vue";
+  import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";
   import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";
 
   const props = defineProps<
@@ -31,7 +28,7 @@
   >();
 
   const emits = defineEmits<ContextMenuCheckboxItemEmits>();
-
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/ContextMenu/Item.vue b/app/components/Ui/ContextMenu/Item.vue
index f6dc7a6..d9889d8 100644
--- a/app/components/Ui/ContextMenu/Item.vue
+++ b/app/components/Ui/ContextMenu/Item.vue
@@ -1,11 +1,5 @@
 <template>
-  <ContextMenuItem
-    v-bind="{
-      ...reactiveOmit(props, 'class', 'inset', 'shortcut', 'title'),
-      ...useEmitAsProps(emits),
-    }"
-    :class="styles({ inset, class: props.class })"
-  >
+  <ContextMenuItem v-bind="forwarded" :class="styles({ inset, class: props.class })">
     <slot>
       <span v-if="title">{{ title }}</span>
     </slot>
@@ -16,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ContextMenuItem, useEmitAsProps } from "radix-vue";
+  import { ContextMenuItem, useForwardPropsEmits } from "radix-vue";
   import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";
 
   const props = defineProps<
@@ -33,6 +27,10 @@
   >();
 
   const emits = defineEmits<ContextMenuItemEmits>();
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "class", "inset", "shortcut", "title"),
+    emits
+  );
 
   const styles = tv({
     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",
diff --git a/app/components/Ui/ContextMenu/ItemIndicator.vue b/app/components/Ui/ContextMenu/ItemIndicator.vue
index 087b662..24a6e58 100644
--- a/app/components/Ui/ContextMenu/ItemIndicator.vue
+++ b/app/components/Ui/ContextMenu/ItemIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContextMenuItemIndicator v-bind="reactiveOmit(props, 'icon')">
+  <ContextMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
     </slot>
@@ -14,6 +14,12 @@
     ContextMenuItemIndicatorProps & {
       /** The icon to display */
       icon?: string;
+      class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
+
+  const styles = tv({
+    base: "flex items-center justify-center",
+  });
 </script>
diff --git a/app/components/Ui/ContextMenu/Label.vue b/app/components/Ui/ContextMenu/Label.vue
index 8a2a1ca..293e705 100644
--- a/app/components/Ui/ContextMenu/Label.vue
+++ b/app/components/Ui/ContextMenu/Label.vue
@@ -1,8 +1,5 @@
 <template>
-  <ContextMenuLabel
-    :class="styles({ inset, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'inset', 'label')"
-  >
+  <ContextMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
     <slot>{{ label }}</slot>
   </ContextMenuLabel>
 </template>
@@ -21,7 +18,7 @@
       label?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "label");
   const styles = tv({
     base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
     variants: {
diff --git a/app/components/Ui/ContextMenu/SubTrigger.vue b/app/components/Ui/ContextMenu/SubTrigger.vue
index 918be31..cd848c3 100644
--- a/app/components/Ui/ContextMenu/SubTrigger.vue
+++ b/app/components/Ui/ContextMenu/SubTrigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <ContextMenuSubTrigger
-    v-bind="reactiveOmit(props, 'class', 'inset', 'icon', 'title')"
-    :class="styles({ inset, class: props.class })"
-  >
+  <ContextMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">
     <slot>
       <span v-if="title">{{ title }}</span>
     </slot>
@@ -26,7 +23,7 @@
       title?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title");
   const styles = tv({
     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",
     variants: {
diff --git a/app/components/Ui/CurrencyInput.vue b/app/components/Ui/CurrencyInput.vue
index 8db55eb..6b0bf49 100644
--- a/app/components/Ui/CurrencyInput.vue
+++ b/app/components/Ui/CurrencyInput.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable-next-line vue/html-self-closing -->
   <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />
 </template>
 
diff --git a/app/components/Ui/Dialog/Description.vue b/app/components/Ui/Dialog/Description.vue
index 2b609fd..b76a789 100644
--- a/app/components/Ui/Dialog/Description.vue
+++ b/app/components/Ui/Dialog/Description.vue
@@ -1,8 +1,5 @@
 <template>
-  <DialogDescription
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'description')"
-  >
+  <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ description }}</slot>
   </DialogDescription>
 </template>
@@ -19,7 +16,7 @@
       description?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "description");
   const styles = tv({
     base: "text-sm text-muted-foreground",
   });
diff --git a/app/components/Ui/Dialog/Footer.vue b/app/components/Ui/Dialog/Footer.vue
index 9771287..2443db1 100644
--- a/app/components/Ui/Dialog/Footer.vue
+++ b/app/components/Ui/Dialog/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "div",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
   });
diff --git a/app/components/Ui/Dialog/Header.vue b/app/components/Ui/Dialog/Header.vue
index 9361f92..4fb0372 100644
--- a/app/components/Ui/Dialog/Header.vue
+++ b/app/components/Ui/Dialog/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "div",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col space-y-1.5 text-center sm:text-left",
   });
diff --git a/app/components/Ui/Dialog/Overlay.vue b/app/components/Ui/Dialog/Overlay.vue
index 00fabe2..0e8be25 100644
--- a/app/components/Ui/Dialog/Overlay.vue
+++ b/app/components/Ui/Dialog/Overlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <DialogOverlay :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
+  <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +12,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
   });
diff --git a/app/components/Ui/Dialog/Title.vue b/app/components/Ui/Dialog/Title.vue
index b87eeb7..b1851d7 100644
--- a/app/components/Ui/Dialog/Title.vue
+++ b/app/components/Ui/Dialog/Title.vue
@@ -1,8 +1,5 @@
 <template>
-  <DialogTitle
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'title', 'class')"
-  >
+  <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ title }}</slot>
   </DialogTitle>
 </template>
@@ -19,7 +16,7 @@
       title?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "title");
   const styles = tv({
     base: "text-lg font-semibold leading-none tracking-tight",
   });
diff --git a/app/components/Ui/DropdownMenu/Arrow.vue b/app/components/Ui/DropdownMenu/Arrow.vue
index a0b84d1..e44700c 100644
--- a/app/components/Ui/DropdownMenu/Arrow.vue
+++ b/app/components/Ui/DropdownMenu/Arrow.vue
@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuArrow
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  />
+  <DropdownMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -22,7 +19,7 @@
       height: 5,
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "rotate-45 border bg-muted",
   });
diff --git a/app/components/Ui/DropdownMenu/ItemIndicator.vue b/app/components/Ui/DropdownMenu/ItemIndicator.vue
index f3bb02a..5c6b944 100644
--- a/app/components/Ui/DropdownMenu/ItemIndicator.vue
+++ b/app/components/Ui/DropdownMenu/ItemIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <DropdownMenuItemIndicator v-bind="reactiveOmit(props, 'icon')">
+  <DropdownMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
     </slot>
@@ -12,7 +12,15 @@
 
   const props = defineProps<
     DropdownMenuItemIndicatorProps & {
+      /** The icon to display */
       icon?: string;
+      /** Custom class(es) to add to the parent */
+      class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class", "icon");
+
+  const styles = tv({
+    base: "flex items-center justify-center",
+  });
 </script>
diff --git a/app/components/Ui/DropdownMenu/Label.vue b/app/components/Ui/DropdownMenu/Label.vue
index 599eae6..7f7d3dd 100644
--- a/app/components/Ui/DropdownMenu/Label.vue
+++ b/app/components/Ui/DropdownMenu/Label.vue
@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuLabel
-    :class="styles({ inset, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'inset', 'label')"
-  >
+  <DropdownMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
     <slot>{{ label }}</slot>
   </DropdownMenuLabel>
 </template>
@@ -18,7 +15,7 @@
       label?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "label");
   const styles = tv({
     base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
     variants: {
diff --git a/app/components/Ui/DropdownMenu/Separator.vue b/app/components/Ui/DropdownMenu/Separator.vue
index d2b92f8..21ea38f 100644
--- a/app/components/Ui/DropdownMenu/Separator.vue
+++ b/app/components/Ui/DropdownMenu/Separator.vue
@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuSeparator
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class')"
-  />
+  <DropdownMenuSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "-mx-1 my-1 h-px bg-border",
   });
diff --git a/app/components/Ui/DropdownMenu/Shortcut.vue b/app/components/Ui/DropdownMenu/Shortcut.vue
index 7e9fba0..892c99b 100644
--- a/app/components/Ui/DropdownMenu/Shortcut.vue
+++ b/app/components/Ui/DropdownMenu/Shortcut.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "span",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "ml-auto text-xs tracking-widest opacity-60",
   });
diff --git a/app/components/Ui/DropdownMenu/SubTrigger.vue b/app/components/Ui/DropdownMenu/SubTrigger.vue
index 2b720ac..667da9d 100644
--- a/app/components/Ui/DropdownMenu/SubTrigger.vue
+++ b/app/components/Ui/DropdownMenu/SubTrigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuSubTrigger
-    v-bind="reactiveOmit(props, 'class', 'inset', 'icon', 'title', 'trailingIcon')"
-    :class="styles({ inset, class: props.class })"
-  >
+  <DropdownMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
       <span v-if="title">{{ title }}</span>
@@ -32,7 +29,7 @@
       trailingIcon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");
   const styles = tv({
     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",
     variants: {
diff --git a/app/components/Ui/Dropfile.vue b/app/components/Ui/Dropfile.vue
index 01716fe..a5bfd7d 100644
--- a/app/components/Ui/Dropfile.vue
+++ b/app/components/Ui/Dropfile.vue
@@ -44,7 +44,7 @@
       /**
        * The function to call when files are dropped.
        */
-
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
       onDrop?: Function;
       /**
        * Whether or not to allow multiple files to be picked. Does not affect drag and drop.
diff --git a/app/components/Ui/Editable/Area.vue b/app/components/Ui/Editable/Area.vue
new file mode 100644
index 0000000..061364b
--- /dev/null
+++ b/app/components/Ui/Editable/Area.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditableArea v-bind="props">
+    <slot />
+  </EditableArea>
+</template>
+
+<script lang="ts" setup>
+  import { EditableArea } from "radix-vue";
+  import type { EditableAreaProps } from "radix-vue";
+
+  const props = defineProps<EditableAreaProps>();
+</script>
diff --git a/app/components/Ui/Editable/Cancel.vue b/app/components/Ui/Editable/Cancel.vue
new file mode 100644
index 0000000..bf1ab22
--- /dev/null
+++ b/app/components/Ui/Editable/Cancel.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditableCancelTrigger v-bind="props">
+    <slot />
+  </EditableCancelTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { EditableCancelTrigger } from "radix-vue";
+  import type { EditableCancelTriggerProps } from "radix-vue";
+
+  const props = defineProps<EditableCancelTriggerProps>();
+</script>
diff --git a/app/components/Ui/Editable/Edit.vue b/app/components/Ui/Editable/Edit.vue
new file mode 100644
index 0000000..eb89cd8
--- /dev/null
+++ b/app/components/Ui/Editable/Edit.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditableEditTrigger v-bind="props">
+    <slot />
+  </EditableEditTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { EditableEditTrigger } from "radix-vue";
+  import type { EditableEditTriggerProps } from "radix-vue";
+
+  const props = defineProps<EditableEditTriggerProps>();
+</script>
diff --git a/app/components/Ui/Editable/Editable.vue b/app/components/Ui/Editable/Editable.vue
new file mode 100644
index 0000000..855d60a
--- /dev/null
+++ b/app/components/Ui/Editable/Editable.vue
@@ -0,0 +1,20 @@
+<template>
+  <EditableRoot :ref="forwardRef" v-slot="slotProps" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </EditableRoot>
+</template>
+
+<script lang="ts" setup>
+  import { EditableRoot, useForwardExpose, useForwardPropsEmits } from "radix-vue";
+  import type { EditableRootEmits, EditableRootProps } from "radix-vue";
+
+  const { currentRef, forwardRef } = useForwardExpose();
+  const props = defineProps<EditableRootProps>();
+  const emit = defineEmits<EditableRootEmits & { ready: [v?: any] }>();
+  const forwarded = useForwardPropsEmits(props, emit);
+
+  onMounted(() => {
+    // Emit the ready event with the current ref value
+    emit("ready", currentRef);
+  });
+</script>
diff --git a/app/components/Ui/Editable/Input.vue b/app/components/Ui/Editable/Input.vue
new file mode 100644
index 0000000..1d0367c
--- /dev/null
+++ b/app/components/Ui/Editable/Input.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditableInput v-bind="props">
+    <slot />
+  </EditableInput>
+</template>
+
+<script lang="ts" setup>
+  import { EditableInput } from "radix-vue";
+  import type { EditableInputProps } from "radix-vue";
+
+  const props = defineProps<EditableInputProps>();
+</script>
diff --git a/app/components/Ui/Editable/Preview.vue b/app/components/Ui/Editable/Preview.vue
new file mode 100644
index 0000000..9ba83fd
--- /dev/null
+++ b/app/components/Ui/Editable/Preview.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditablePreview v-bind="props">
+    <slot />
+  </EditablePreview>
+</template>
+
+<script lang="ts" setup>
+  import { EditablePreview } from "radix-vue";
+  import type { EditablePreviewProps } from "radix-vue";
+
+  const props = defineProps<EditablePreviewProps>();
+</script>
diff --git a/app/components/Ui/Editable/Submit.vue b/app/components/Ui/Editable/Submit.vue
new file mode 100644
index 0000000..43d7838
--- /dev/null
+++ b/app/components/Ui/Editable/Submit.vue
@@ -0,0 +1,12 @@
+<template>
+  <EditableSubmitTrigger v-bind="props">
+    <slot />
+  </EditableSubmitTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { EditableSubmitTrigger } from "radix-vue";
+  import type { EditableSubmitTriggerProps } from "radix-vue";
+
+  const props = defineProps<EditableSubmitTriggerProps>();
+</script>
diff --git a/app/components/Ui/GradientDivider.vue b/app/components/Ui/GradientDivider.vue
index 32390d1..340448a 100644
--- a/app/components/Ui/GradientDivider.vue
+++ b/app/components/Ui/GradientDivider.vue
@@ -1,5 +1,5 @@
 <template>
-  <Separator v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
+  <Separator v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -18,6 +18,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: 'h-px w-full border-t-0 bg-[linear-gradient(90deg,theme("colors.input/10%"),_theme("colors.input"),_theme("colors.input/10%"))]',
   });
diff --git a/app/components/Ui/HoverCard/Arrow.vue b/app/components/Ui/HoverCard/Arrow.vue
index c6d384f..37b4701 100644
--- a/app/components/Ui/HoverCard/Arrow.vue
+++ b/app/components/Ui/HoverCard/Arrow.vue
@@ -1,5 +1,5 @@
 <template>
-  <HoverCardArrow :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
+  <HoverCardArrow :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -18,7 +18,7 @@
       width: 10,
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "fill-popover",
   });
diff --git a/app/components/Ui/HoverCard/Content.vue b/app/components/Ui/HoverCard/Content.vue
index 822406b..4efdd4b 100644
--- a/app/components/Ui/HoverCard/Content.vue
+++ b/app/components/Ui/HoverCard/Content.vue
@@ -1,9 +1,6 @@
 <template>
   <UiHoverCardPortal :to="to">
-    <HoverCardContent
-      v-bind="{ ...reactiveOmit(props, 'class', 'to'), ...$attrs }"
-      :class="styles({ class: props.class })"
-    >
+    <HoverCardContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">
       <slot />
     </HoverCardContent>
   </UiHoverCardPortal>
@@ -32,7 +29,7 @@
       sticky: "partial",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "to");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Input.vue b/app/components/Ui/Input.vue
index 088f124..5bbe054 100644
--- a/app/components/Ui/Input.vue
+++ b/app/components/Ui/Input.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable-next-line vue/html-self-closing -->
   <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
 </template>
 
diff --git a/app/components/Ui/Kbd.vue b/app/components/Ui/Kbd.vue
index eb7001b..7adea49 100644
--- a/app/components/Ui/Kbd.vue
+++ b/app/components/Ui/Kbd.vue
@@ -1,8 +1,5 @@
 <template>
-  <Primitive
-    :class="styles({ size, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'size')"
-  >
+  <Primitive :class="styles({ size, class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -25,6 +22,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class", "size");
+
   const styles = tv({
     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",
     variants: {
diff --git a/app/components/Ui/Label.vue b/app/components/Ui/Label.vue
index 84b3838..c42d483 100644
--- a/app/components/Ui/Label.vue
+++ b/app/components/Ui/Label.vue
@@ -1,5 +1,5 @@
 <template>
-  <Label :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Label :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
     <slot name="hint">
       <span v-if="hint">
@@ -21,6 +21,8 @@
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class", "hint");
+
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/List/Content.vue b/app/components/Ui/List/Content.vue
index d7d9f39..aaaab23 100644
--- a/app/components/Ui/List/Content.vue
+++ b/app/components/Ui/List/Content.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "div",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col gap-1 leading-none",
   });
diff --git a/app/components/Ui/List/List.vue b/app/components/Ui/List/List.vue
index 5191803..1994355 100644
--- a/app/components/Ui/List/List.vue
+++ b/app/components/Ui/List/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "ul",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "w-full py-2",
   });
diff --git a/app/components/Ui/List/Subtitle.vue b/app/components/Ui/List/Subtitle.vue
index 6065676..306fad3 100644
--- a/app/components/Ui/List/Subtitle.vue
+++ b/app/components/Ui/List/Subtitle.vue
@@ -1,8 +1,5 @@
 <template>
-  <Primitive
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'subtitle')"
-  >
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ subtitle }}</slot>
   </Primitive>
 </template>
@@ -24,7 +21,7 @@
       as: "p",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "subtitle");
   const styles = tv({
     base: "text-sm text-muted-foreground",
   });
diff --git a/app/components/Ui/List/Title.vue b/app/components/Ui/List/Title.vue
index 1ecab64..a631529 100644
--- a/app/components/Ui/List/Title.vue
+++ b/app/components/Ui/List/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class', 'title')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ title }}</slot>
   </Primitive>
 </template>
@@ -21,7 +21,7 @@
       as: "p",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "title");
   const styles = tv({
     base: "font-semibold",
   });
diff --git a/app/components/Ui/Menubar/ItemIndicator.vue b/app/components/Ui/Menubar/ItemIndicator.vue
index 1735269..7df22b6 100644
--- a/app/components/Ui/Menubar/ItemIndicator.vue
+++ b/app/components/Ui/Menubar/ItemIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenubarItemIndicator v-bind="reactiveOmit(props, 'icon')">
+  <MenubarItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
     </slot>
@@ -12,7 +12,14 @@
 
   const props = defineProps<
     MenubarItemIndicatorProps & {
+      /** The icon to display */
       icon?: string;
+      /** The class(es) to apply to the parent */
+      class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class", "icon");
+  const styles = tv({
+    base: "flex shrink-0 items-center justify-center",
+  });
 </script>
diff --git a/app/components/Ui/Menubar/Label.vue b/app/components/Ui/Menubar/Label.vue
index 7a89222..66b65d4 100644
--- a/app/components/Ui/Menubar/Label.vue
+++ b/app/components/Ui/Menubar/Label.vue
@@ -1,8 +1,5 @@
 <template>
-  <MenubarLabel
-    :class="styles({ inset, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'inset')"
-  >
+  <MenubarLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
     <slot />
   </MenubarLabel>
 </template>
@@ -17,7 +14,7 @@
       inset?: boolean;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset");
   const styles = tv({
     base: "px-2 py-1.5 text-sm font-semibold",
     variants: {
diff --git a/app/components/Ui/Menubar/Separator.vue b/app/components/Ui/Menubar/Separator.vue
index d330df7..8803253 100644
--- a/app/components/Ui/Menubar/Separator.vue
+++ b/app/components/Ui/Menubar/Separator.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenubarSeparator :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
+  <MenubarSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -12,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "-mx-1 my-1 h-px bg-border",
   });
diff --git a/app/components/Ui/Menubar/Shortcut.vue b/app/components/Ui/Menubar/Shortcut.vue
index 386c73f..58ee2f8 100644
--- a/app/components/Ui/Menubar/Shortcut.vue
+++ b/app/components/Ui/Menubar/Shortcut.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -17,7 +17,7 @@
     >(),
     { as: "span" }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "ml-auto text-xs tracking-widest opacity-60",
   });
diff --git a/app/components/Ui/Menubar/SubTrigger.vue b/app/components/Ui/Menubar/SubTrigger.vue
index 801b26f..4e071c7 100644
--- a/app/components/Ui/Menubar/SubTrigger.vue
+++ b/app/components/Ui/Menubar/SubTrigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <MenubarSubTrigger
-    v-bind="reactiveOmit(props, 'class', 'inset', 'icon', 'title', 'trailingIcon')"
-    :class="styles({ inset, class: props.class })"
-  >
+  <MenubarSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
       <span v-if="title">{{ title }}</span>
@@ -27,7 +24,7 @@
       trailingIcon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");
   const styles = tv({
     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",
     variants: {
diff --git a/app/components/Ui/Menubar/Trigger.vue b/app/components/Ui/Menubar/Trigger.vue
index 1b1ef03..55476ee 100644
--- a/app/components/Ui/Menubar/Trigger.vue
+++ b/app/components/Ui/Menubar/Trigger.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <MenubarTrigger :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </MenubarTrigger>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Navbar.vue b/app/components/Ui/Navbar.vue
index 03b1fa7..47bb00a 100644
--- a/app/components/Ui/Navbar.vue
+++ b/app/components/Ui/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -11,7 +11,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
+        /** Custom class(es) to add to the parent */
         class?: any;
+        /** Whether the navbar should be sticky */
         sticky?: boolean;
       }
     >(),
@@ -20,6 +22,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class", "sticky");
+
   const styles = tv({
     base: "z-20 border-b bg-background/90 backdrop-blur",
     variants: {
diff --git a/app/components/Ui/NavigationMenu/Indicator.vue b/app/components/Ui/NavigationMenu/Indicator.vue
index bf71ea4..37e9b61 100644
--- a/app/components/Ui/NavigationMenu/Indicator.vue
+++ b/app/components/Ui/NavigationMenu/Indicator.vue
@@ -1,8 +1,5 @@
 <template>
-  <NavigationMenuIndicator
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <NavigationMenuIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
@@ -18,7 +15,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/NavigationMenu/List.vue b/app/components/Ui/NavigationMenu/List.vue
index 12f9d47..0984abd 100644
--- a/app/components/Ui/NavigationMenu/List.vue
+++ b/app/components/Ui/NavigationMenu/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavigationMenuList v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <NavigationMenuList v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </NavigationMenuList>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "group flex flex-1 list-none items-center justify-center space-x-1",
   });
diff --git a/app/components/Ui/NavigationMenu/Trigger.vue b/app/components/Ui/NavigationMenu/Trigger.vue
index dcd5de5..9c037e5 100644
--- a/app/components/Ui/NavigationMenu/Trigger.vue
+++ b/app/components/Ui/NavigationMenu/Trigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <NavigationMenuTrigger
-    v-bind="reactiveOmit(props, 'class', 'icon', 'title')"
-    :class="styles({ class: props.class })"
-  >
+  <NavigationMenuTrigger v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>{{ title }}</slot>
     <slot name="icon">
       <Icon
@@ -28,7 +25,7 @@
       title?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon", "title");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/NavigationMenu/Viewport.vue b/app/components/Ui/NavigationMenu/Viewport.vue
index 18937fe..5b672f2 100644
--- a/app/components/Ui/NavigationMenu/Viewport.vue
+++ b/app/components/Ui/NavigationMenu/Viewport.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="absolute left-0 top-full flex justify-center">
     <NavigationMenuViewport
-      v-bind="{ ...reactiveOmit(props, 'class'), ...$attrs }"
+      v-bind="{ ...forwarded, ...$attrs }"
       :class="styles({ class: props.class })"
     />
   </div>
@@ -18,6 +18,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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)]",
   });
diff --git a/app/components/Ui/Pagination/Ellipsis.vue b/app/components/Ui/Pagination/Ellipsis.vue
index ac88755..3f30ddc 100644
--- a/app/components/Ui/Pagination/Ellipsis.vue
+++ b/app/components/Ui/Pagination/Ellipsis.vue
@@ -1,5 +1,5 @@
 <template>
-  <PaginationEllipsis v-bind="reactiveOmit(props, 'icon')">
+  <PaginationEllipsis v-bind="forwarded">
     <slot>
       <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">
         <Icon :name="icon" />
@@ -18,4 +18,5 @@
       icon?: string;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/Pagination/First.vue b/app/components/Ui/Pagination/First.vue
index 628f05c..9f741ce 100644
--- a/app/components/Ui/Pagination/First.vue
+++ b/app/components/Ui/Pagination/First.vue
@@ -1,5 +1,5 @@
 <template>
-  <PaginationFirst v-bind="reactiveOmit(props, 'icon')">
+  <PaginationFirst v-bind="forwarded">
     <slot>
       <UiButton v-if="icon" variant="ghost" size="icon-sm">
         <Icon :name="icon" />
@@ -18,4 +18,5 @@
       icon?: string;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/Pagination/Last.vue b/app/components/Ui/Pagination/Last.vue
index cf1e6d5..cc369be 100644
--- a/app/components/Ui/Pagination/Last.vue
+++ b/app/components/Ui/Pagination/Last.vue
@@ -1,5 +1,5 @@
 <template>
-  <PaginationLast v-bind="reactiveOmit(props, 'icon')">
+  <PaginationLast v-bind="forwarded">
     <slot>
       <UiButton v-if="icon" variant="ghost" size="icon-sm">
         <Icon :name="icon" />
@@ -18,4 +18,5 @@
       icon?: string;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/Pagination/List.vue b/app/components/Ui/Pagination/List.vue
index 44de4ca..3ef129b 100644
--- a/app/components/Ui/Pagination/List.vue
+++ b/app/components/Ui/Pagination/List.vue
@@ -1,9 +1,5 @@
 <template>
-  <PaginationList
-    v-slot="{ items }"
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class')"
-  >
+  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">
     <slot :items="items" />
   </PaginationList>
 </template>
@@ -18,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex items-center gap-1",
   });
diff --git a/app/components/Ui/Pagination/Prev.vue b/app/components/Ui/Pagination/Prev.vue
index c2b2d6b..bd736df 100644
--- a/app/components/Ui/Pagination/Prev.vue
+++ b/app/components/Ui/Pagination/Prev.vue
@@ -1,5 +1,5 @@
 <template>
-  <PaginationPrev v-bind="reactiveOmit(props, 'icon')">
+  <PaginationPrev v-bind="forwarded">
     <slot>
       <UiButton v-if="icon" variant="ghost" size="icon-sm">
         <Icon :name="icon" />
@@ -18,4 +18,6 @@
       icon?: string;
     }
   >();
+
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/PinInput/PinInputInput.vue b/app/components/Ui/PinInput/PinInputInput.vue
index 062fcb6..4289f8e 100644
--- a/app/components/Ui/PinInput/PinInputInput.vue
+++ b/app/components/Ui/PinInput/PinInputInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <PinInputInput v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
+  <PinInputInput v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -11,6 +11,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Popover/Arrow.vue b/app/components/Ui/Popover/Arrow.vue
index 3794e88..ced0c59 100644
--- a/app/components/Ui/Popover/Arrow.vue
+++ b/app/components/Ui/Popover/Arrow.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
   import { PopoverArrow, useForwardProps } from "radix-vue";
-  import type { PopoverArrowProps } from "radix-vue/dist/Popover/PopoverArrow";
+  import type { PopoverArrowProps } from "radix-vue";
 
   const props = withDefaults(defineProps<PopoverArrowProps>(), {
     width: 10,
diff --git a/app/components/Ui/Progress/Indicator.vue b/app/components/Ui/Progress/Indicator.vue
index 52b3d8d..d005b6f 100644
--- a/app/components/Ui/Progress/Indicator.vue
+++ b/app/components/Ui/Progress/Indicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <ProgressIndicator v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <ProgressIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </ProgressIndicator>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "h-full w-full flex-1 rounded-full bg-primary transition-all",
   });
diff --git a/app/components/Ui/RadioGroup/Indicator.vue b/app/components/Ui/RadioGroup/Indicator.vue
index b925a31..d7e29bc 100644
--- a/app/components/Ui/RadioGroup/Indicator.vue
+++ b/app/components/Ui/RadioGroup/Indicator.vue
@@ -1,8 +1,5 @@
 <template>
-  <RadioGroupIndicator
-    v-bind="reactiveOmit(props, 'class', 'icon')"
-    :class="styles({ class: props.class })"
-  >
+  <RadioGroupIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon :name="icon || 'ph:circle-fill'" class="h-2.5 w-2.5 fill-current text-current" />
     </slot>
@@ -21,7 +18,7 @@
       icon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     base: "flex items-center justify-center",
   });
diff --git a/app/components/Ui/RadioGroup/Item.vue b/app/components/Ui/RadioGroup/Item.vue
index 11f987c..fec1ff1 100644
--- a/app/components/Ui/RadioGroup/Item.vue
+++ b/app/components/Ui/RadioGroup/Item.vue
@@ -1,8 +1,5 @@
 <template>
-  <RadioGroupItem
-    v-bind="reactiveOmit(props, 'class', 'icon')"
-    :class="styles({ class: props.class })"
-  >
+  <RadioGroupItem v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <UiRadioGroupIndicator :icon="props.icon" />
     </slot>
@@ -21,7 +18,7 @@
       icon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/ScrollArea/ScrollArea.vue b/app/components/Ui/ScrollArea/ScrollArea.vue
index a9d8f10..5194605 100644
--- a/app/components/Ui/ScrollArea/ScrollArea.vue
+++ b/app/components/Ui/ScrollArea/ScrollArea.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollAreaRoot v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <ScrollAreaRoot v-bind="forwarded" :class="styles({ class: props.class })">
     <UiScrollAreaViewport>
       <slot />
     </UiScrollAreaViewport>
@@ -25,7 +25,7 @@
       orientation: "vertical",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "relative overflow-hidden",
   });
diff --git a/app/components/Ui/ScrollArea/Scrollbar.vue b/app/components/Ui/ScrollArea/Scrollbar.vue
index 63ed781..d160c1d 100644
--- a/app/components/Ui/ScrollArea/Scrollbar.vue
+++ b/app/components/Ui/ScrollArea/Scrollbar.vue
@@ -1,8 +1,5 @@
 <template>
-  <ScrollAreaScrollbar
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ orientation, class: props.class })"
-  >
+  <ScrollAreaScrollbar v-bind="forwarded" :class="styles({ orientation, class: props.class })">
     <slot />
     <UiScrollAreaThumb />
   </ScrollAreaScrollbar>
@@ -23,7 +20,7 @@
       orientation: "vertical",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex touch-none select-none transition-colors",
     variants: {
diff --git a/app/components/Ui/ScrollArea/Thumb.vue b/app/components/Ui/ScrollArea/Thumb.vue
index 4c2a572..9b8cb55 100644
--- a/app/components/Ui/ScrollArea/Thumb.vue
+++ b/app/components/Ui/ScrollArea/Thumb.vue
@@ -1,8 +1,5 @@
 <template>
-  <ScrollAreaThumb
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ orientation, class: props.class })"
-  >
+  <ScrollAreaThumb v-bind="forwarded" :class="styles({ orientation, class: props.class })">
     <slot />
   </ScrollAreaThumb>
 </template>
@@ -23,7 +20,7 @@
       orientation: "vertical",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "relative flex-1 rounded-full bg-border",
     variants: {
diff --git a/app/components/Ui/ScrollArea/Viewport.vue b/app/components/Ui/ScrollArea/Viewport.vue
index 6929e56..7ce10b0 100644
--- a/app/components/Ui/ScrollArea/Viewport.vue
+++ b/app/components/Ui/ScrollArea/Viewport.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollAreaViewport v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <ScrollAreaViewport v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </ScrollAreaViewport>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "h-full w-full rounded-[inherit]",
   });
diff --git a/app/components/Ui/Select/Icon.vue b/app/components/Ui/Select/Icon.vue
index 340c10a..74b5503 100644
--- a/app/components/Ui/Select/Icon.vue
+++ b/app/components/Ui/Select/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectIcon v-bind="forwarded">
+  <SelectIcon v-bind="forwarded" class="flex items-center justify-center">
     <slot>
       <Icon :class="styles({ class: props.class })" :name="icon || 'lucide:chevrons-up-down'" />
     </slot>
diff --git a/app/components/Ui/Select/Item.vue b/app/components/Ui/Select/Item.vue
index 54e87d2..66cf95e 100644
--- a/app/components/Ui/Select/Item.vue
+++ b/app/components/Ui/Select/Item.vue
@@ -1,8 +1,5 @@
 <template>
-  <SelectItem
-    v-bind="reactiveOmit(props, 'class', 'icon', 'text')"
-    :class="styles({ class: props.class })"
-  >
+  <SelectItem v-bind="forwarded" :class="styles({ class: props.class })">
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <UiSelectItemIndicator :icon="icon" />
     </span>
@@ -26,7 +23,7 @@
       text?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon", "text");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Select/ItemIndicator.vue b/app/components/Ui/Select/ItemIndicator.vue
index e240e9f..f12fd6a 100644
--- a/app/components/Ui/Select/ItemIndicator.vue
+++ b/app/components/Ui/Select/ItemIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectItemIndicator v-bind="reactiveOmit(props, 'class', 'icon')">
+  <SelectItemIndicator v-bind="forwarded" class="flex items-center justify-center">
     <slot>
       <Icon :class="styles({ class: props.class })" :name="icon || 'lucide:check'" />
     </slot>
@@ -18,7 +18,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     base: "h-4 w-4",
   });
diff --git a/app/components/Ui/Select/Label.vue b/app/components/Ui/Select/Label.vue
index ac9cb9c..d6b8965 100644
--- a/app/components/Ui/Select/Label.vue
+++ b/app/components/Ui/Select/Label.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <SelectLabel :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </SelectLabel>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "py-1.5 pl-8 pr-2 text-sm font-semibold",
   });
diff --git a/app/components/Ui/Select/ScrollDownButton.vue b/app/components/Ui/Select/ScrollDownButton.vue
index 5d58e39..c0d3c21 100644
--- a/app/components/Ui/Select/ScrollDownButton.vue
+++ b/app/components/Ui/Select/ScrollDownButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectScrollDownButton v-bind="reactiveOmit(props, 'icon')">
+  <SelectScrollDownButton v-bind="forwarded">
     <slot> <Icon :name="icon || 'lucide:chevron-down'" class="h-5 w-5" /></slot>
   </SelectScrollDownButton>
 </template>
@@ -14,4 +14,5 @@
       icon?: string;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/Select/ScrollUpButton.vue b/app/components/Ui/Select/ScrollUpButton.vue
index 23b9ce0..ace8636 100644
--- a/app/components/Ui/Select/ScrollUpButton.vue
+++ b/app/components/Ui/Select/ScrollUpButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectScrollUpButton v-bind="reactiveOmit(props, 'icon')">
+  <SelectScrollUpButton v-bind="forwarded">
     <slot>
       <Icon :name="icon || 'lucide:chevron-up'" class="h-5 w-5" />
     </slot>
@@ -16,4 +16,5 @@
       icon?: string;
     }
   >();
+  const forwarded = reactiveOmit(props, "icon");
 </script>
diff --git a/app/components/Ui/Select/Separator.vue b/app/components/Ui/Select/Separator.vue
index 6f34743..0b1fc3f 100644
--- a/app/components/Ui/Select/Separator.vue
+++ b/app/components/Ui/Select/Separator.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectSeparator :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
+  <SelectSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -12,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "-mx-1 my-1 h-px bg-muted",
   });
diff --git a/app/components/Ui/Select/Trigger.vue b/app/components/Ui/Select/Trigger.vue
index e0a2df2..9edea5f 100644
--- a/app/components/Ui/Select/Trigger.vue
+++ b/app/components/Ui/Select/Trigger.vue
@@ -1,8 +1,5 @@
 <template>
-  <SelectTrigger
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'icon', 'placeholder')"
-  >
+  <SelectTrigger :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       <UiSelectValue :placeholder="placeholder" />
     </slot>
@@ -24,7 +21,7 @@
       placeholder?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon", "placeholder");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Select/Viewport.vue b/app/components/Ui/Select/Viewport.vue
index 1bb317b..2ef7d9f 100644
--- a/app/components/Ui/Select/Viewport.vue
+++ b/app/components/Ui/Select/Viewport.vue
@@ -1,8 +1,5 @@
 <template>
-  <SelectViewport
-    :class="styles({ position, class: props.class })"
-    v-bind="reactiveOmit(props, 'class')"
-  >
+  <SelectViewport :class="styles({ position, class: props.class })" v-bind="forwarded">
     <slot />
   </SelectViewport>
 </template>
@@ -18,7 +15,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "p-1",
     variants: {
diff --git a/app/components/Ui/Separator.vue b/app/components/Ui/Separator.vue
index 1fc07ee..cddcda8 100644
--- a/app/components/Ui/Separator.vue
+++ b/app/components/Ui/Separator.vue
@@ -1,8 +1,5 @@
 <template>
-  <Separator
-    v-bind="useForwardProps(reactiveOmit(props, 'class'))"
-    :class="styles({ orientation, class: props.class })"
-  />
+  <Separator v-bind="forwarded" :class="styles({ orientation, class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -13,6 +10,8 @@
     orientation: "horizontal",
   });
 
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
   const styles = tv({
     base: "shrink-0 bg-border",
     variants: {
diff --git a/app/components/Ui/Sheet/Description.vue b/app/components/Ui/Sheet/Description.vue
index 080ee63..2793889 100644
--- a/app/components/Ui/Sheet/Description.vue
+++ b/app/components/Ui/Sheet/Description.vue
@@ -1,8 +1,5 @@
 <template>
-  <DialogDescription
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'description')"
-  >
+  <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ description }}</slot>
   </DialogDescription>
 </template>
@@ -19,7 +16,7 @@
       description?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "description");
   const styles = tv({
     base: "text-sm text-muted-foreground",
   });
diff --git a/app/components/Ui/Sheet/Footer.vue b/app/components/Ui/Sheet/Footer.vue
index 1a6db20..c0986fa 100644
--- a/app/components/Ui/Sheet/Footer.vue
+++ b/app/components/Ui/Sheet/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "div",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
   });
diff --git a/app/components/Ui/Sheet/Header.vue b/app/components/Ui/Sheet/Header.vue
index dabddc3..891ff48 100644
--- a/app/components/Ui/Sheet/Header.vue
+++ b/app/components/Ui/Sheet/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "div",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex flex-col space-y-2 text-center sm:text-left",
   });
diff --git a/app/components/Ui/Sheet/Overlay.vue b/app/components/Ui/Sheet/Overlay.vue
index ffce4f8..49cf289 100644
--- a/app/components/Ui/Sheet/Overlay.vue
+++ b/app/components/Ui/Sheet/Overlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <DialogOverlay :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
+  <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -12,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
   });
diff --git a/app/components/Ui/Sheet/Title.vue b/app/components/Ui/Sheet/Title.vue
index 73b32f6..366d574 100644
--- a/app/components/Ui/Sheet/Title.vue
+++ b/app/components/Ui/Sheet/Title.vue
@@ -1,8 +1,5 @@
 <template>
-  <DialogTitle
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'title')"
-  >
+  <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ title }}</slot>
   </DialogTitle>
 </template>
@@ -19,7 +16,7 @@
       title?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "title");
   const styles = tv({
     base: "text-lg font-semibold text-foreground",
   });
diff --git a/app/components/Ui/Sheet/X.vue b/app/components/Ui/Sheet/X.vue
index 7219bbd..2a92e97 100644
--- a/app/components/Ui/Sheet/X.vue
+++ b/app/components/Ui/Sheet/X.vue
@@ -1,8 +1,5 @@
 <template>
-  <DialogClose
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'srText', 'class', 'icon')"
-  >
+  <DialogClose :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       <Icon :name="icon" class="h-4 w-4" />
       <span class="sr-only">{{ srText }}</span>
@@ -30,7 +27,7 @@
       srText: "Close",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "icon", "srText");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Skeleton.vue b/app/components/Ui/Skeleton.vue
index 960dd0a..15fefd0 100644
--- a/app/components/Ui/Skeleton.vue
+++ b/app/components/Ui/Skeleton.vue
@@ -1,8 +1,5 @@
 <template>
-  <Primitive
-    :class="styles({ loading, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'loading')"
-  >
+  <Primitive :class="styles({ loading, class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -31,4 +28,6 @@
       as: "div",
     }
   );
+
+  const forwarded = reactiveOmit(props, "class", "loading");
 </script>
diff --git a/app/components/Ui/Slider/Range.vue b/app/components/Ui/Slider/Range.vue
index fa77876..d28b85c 100644
--- a/app/components/Ui/Slider/Range.vue
+++ b/app/components/Ui/Slider/Range.vue
@@ -1,5 +1,5 @@
 <template>
-  <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <SliderRange :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </SliderRange>
 </template>
@@ -14,6 +14,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "absolute h-full bg-primary",
   });
diff --git a/app/components/Ui/Slider/Thumb.vue b/app/components/Ui/Slider/Thumb.vue
index df8b3bc..a034583 100644
--- a/app/components/Ui/Slider/Thumb.vue
+++ b/app/components/Ui/Slider/Thumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <SliderThumb :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </SliderThumb>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Slider/Track.vue b/app/components/Ui/Slider/Track.vue
index 4f0808a..706c783 100644
--- a/app/components/Ui/Slider/Track.vue
+++ b/app/components/Ui/Slider/Track.vue
@@ -1,5 +1,5 @@
 <template>
-  <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <SliderTrack :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </SliderTrack>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",
   });
diff --git a/app/components/Ui/Stepper/Description.vue b/app/components/Ui/Stepper/Description.vue
new file mode 100644
index 0000000..dac3685
--- /dev/null
+++ b/app/components/Ui/Stepper/Description.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>
+
+<script lang="ts" setup>
+  import { StepperDescription } from "radix-vue";
+  import type { StepperDescriptionProps } from "radix-vue";
+
+  const props = defineProps<StepperDescriptionProps>();
+</script>
diff --git a/app/components/Ui/Stepper/Indicator.vue b/app/components/Ui/Stepper/Indicator.vue
new file mode 100644
index 0000000..45f3d15
--- /dev/null
+++ b/app/components/Ui/Stepper/Indicator.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperIndicator v-bind="props">
+    <slot />
+  </StepperIndicator>
+</template>
+
+<script lang="ts" setup>
+  import { StepperIndicator } from "radix-vue";
+  import type { StepperIndicatorProps } from "radix-vue";
+
+  const props = defineProps<StepperIndicatorProps>();
+</script>
diff --git a/app/components/Ui/Stepper/Item.vue b/app/components/Ui/Stepper/Item.vue
new file mode 100644
index 0000000..c3664a4
--- /dev/null
+++ b/app/components/Ui/Stepper/Item.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperItem v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>
+
+<script lang="ts" setup>
+  import { StepperItem } from "radix-vue";
+  import type { StepperItemProps } from "radix-vue";
+
+  const props = defineProps<StepperItemProps>();
+</script>
diff --git a/app/components/Ui/Stepper/Separator.vue b/app/components/Ui/Stepper/Separator.vue
new file mode 100644
index 0000000..355927d
--- /dev/null
+++ b/app/components/Ui/Stepper/Separator.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperSeparator v-bind="props">
+    <slot />
+  </StepperSeparator>
+</template>
+
+<script lang="ts" setup>
+  import { StepperSeparator } from "radix-vue";
+  import type { StepperSeparatorProps } from "radix-vue";
+
+  const props = defineProps<StepperSeparatorProps>();
+</script>
diff --git a/app/components/Ui/Stepper/Stepper.vue b/app/components/Ui/Stepper/Stepper.vue
new file mode 100644
index 0000000..27e8e3b
--- /dev/null
+++ b/app/components/Ui/Stepper/Stepper.vue
@@ -0,0 +1,14 @@
+<template>
+  <StepperRoot v-slot="slotProps" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>
+
+<script lang="ts" setup>
+  import { StepperRoot, useForwardPropsEmits } from "radix-vue";
+  import type { StepperRootEmits, StepperRootProps } from "radix-vue";
+
+  const props = defineProps<StepperRootProps>();
+  const emit = defineEmits<StepperRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>
diff --git a/app/components/Ui/Stepper/Title.vue b/app/components/Ui/Stepper/Title.vue
new file mode 100644
index 0000000..2da7d04
--- /dev/null
+++ b/app/components/Ui/Stepper/Title.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperTitle v-bind="props">
+    <slot />
+  </StepperTitle>
+</template>
+
+<script lang="ts" setup>
+  import { StepperTitle } from "radix-vue";
+  import type { StepperTitleProps } from "radix-vue";
+
+  const props = defineProps<StepperTitleProps>();
+</script>
diff --git a/app/components/Ui/Stepper/Trigger.vue b/app/components/Ui/Stepper/Trigger.vue
new file mode 100644
index 0000000..39ff1ca
--- /dev/null
+++ b/app/components/Ui/Stepper/Trigger.vue
@@ -0,0 +1,12 @@
+<template>
+  <StepperTrigger v-bind="props">
+    <slot />
+  </StepperTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { StepperTrigger } from "radix-vue";
+  import type { StepperTriggerProps } from "radix-vue";
+
+  const props = defineProps<StepperTriggerProps>();
+</script>
diff --git a/app/components/Ui/Switch/Thumb.vue b/app/components/Ui/Switch/Thumb.vue
index ba86360..804798c 100644
--- a/app/components/Ui/Switch/Thumb.vue
+++ b/app/components/Ui/Switch/Thumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <SwitchThumb :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </SwitchThumb>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Tabs/Content.vue b/app/components/Ui/Tabs/Content.vue
index b801c99..55896ef 100644
--- a/app/components/Ui/Tabs/Content.vue
+++ b/app/components/Ui/Tabs/Content.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabsContent v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <TabsContent v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </TabsContent>
 </template>
@@ -14,7 +14,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   });
diff --git a/app/components/Ui/Tabs/Indicator.vue b/app/components/Ui/Tabs/Indicator.vue
index ed57a92..36d443e 100644
--- a/app/components/Ui/Tabs/Indicator.vue
+++ b/app/components/Ui/Tabs/Indicator.vue
@@ -1,9 +1,6 @@
 <template>
   <ClientOnly>
-    <TabsIndicator
-      v-bind="{ ...reactiveOmit(props, 'class'), ...$attrs }"
-      :class="styles({ class: props.class })"
-    >
+    <TabsIndicator v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">
       <slot>
         <div class="h-full w-full rounded-md bg-primary" />
       </slot>
@@ -23,7 +20,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Tabs/List.vue b/app/components/Ui/Tabs/List.vue
index 040da9f..8df5d20 100644
--- a/app/components/Ui/Tabs/List.vue
+++ b/app/components/Ui/Tabs/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <TabsList :class="styles({ pill, class: props.class })" v-bind="forwarded">
     <slot />
   </TabsList>
 </template>
@@ -18,7 +18,7 @@
     >(),
     { pill: true }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
     variants: {
diff --git a/app/components/Ui/Tabs/Trigger.vue b/app/components/Ui/Tabs/Trigger.vue
index 42e877c..ad71af1 100644
--- a/app/components/Ui/Tabs/Trigger.vue
+++ b/app/components/Ui/Tabs/Trigger.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabsTrigger v-bind="reactiveOmit(props, 'class')" :class="styles({ pill, class: props.class })">
+  <TabsTrigger v-bind="forwarded" :class="styles({ pill, class: props.class })">
     <slot />
   </TabsTrigger>
 </template>
@@ -21,7 +21,7 @@
       pill: true,
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
     variants: {
diff --git a/app/components/Ui/TagsInput/Field.vue b/app/components/Ui/TagsInput/Field.vue
index c62bfa4..0490937 100644
--- a/app/components/Ui/TagsInput/Field.vue
+++ b/app/components/Ui/TagsInput/Field.vue
@@ -1,5 +1,5 @@
 <template>
-  <TagsInputInput v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <TagsInputInput v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </TagsInputInput>
 </template>
@@ -9,7 +9,7 @@
   import type { TagsInputInputProps } from "radix-vue";
 
   const props = defineProps<TagsInputInputProps & { class?: any }>();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "flex-1 bg-transparent focus:outline-none sm:text-sm",
   });
diff --git a/app/components/Ui/TagsInput/Item.vue b/app/components/Ui/TagsInput/Item.vue
index 988c872..20d7c7c 100644
--- a/app/components/Ui/TagsInput/Item.vue
+++ b/app/components/Ui/TagsInput/Item.vue
@@ -1,8 +1,5 @@
 <template>
-  <TagsInputItem
-    v-bind="reactiveOmit(props, 'class', 'icon')"
-    :class="styles({ class: props.class })"
-  >
+  <TagsInputItem v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <slot name="text">
         <UiTagsInputItemText />
@@ -19,6 +16,7 @@
   import type { TagsInputItemProps } from "radix-vue";
 
   const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/TagsInput/ItemDelete.vue b/app/components/Ui/TagsInput/ItemDelete.vue
index fdda743..2aaba9b 100644
--- a/app/components/Ui/TagsInput/ItemDelete.vue
+++ b/app/components/Ui/TagsInput/ItemDelete.vue
@@ -1,8 +1,5 @@
 <template>
-  <TagsInputItemDelete
-    v-bind="reactiveOmit(props, 'icon', 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <TagsInputItemDelete v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />
     </slot>
@@ -19,7 +16,7 @@
       icon: "lucide:x",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/TagsInput/ItemText.vue b/app/components/Ui/TagsInput/ItemText.vue
index 2612d2a..d7a6505 100644
--- a/app/components/Ui/TagsInput/ItemText.vue
+++ b/app/components/Ui/TagsInput/ItemText.vue
@@ -1,5 +1,5 @@
 <template>
-  <TagsInputItemText v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <TagsInputItemText v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </TagsInputItemText>
 </template>
@@ -9,7 +9,7 @@
   import type { TagsInputItemTextProps } from "radix-vue";
 
   const props = defineProps<TagsInputItemTextProps & { class?: any }>();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "leading-none sm:text-sm",
   });
diff --git a/app/components/Ui/Toast/Action.vue b/app/components/Ui/Toast/Action.vue
index 0691141..2347ff3 100644
--- a/app/components/Ui/Toast/Action.vue
+++ b/app/components/Ui/Toast/Action.vue
@@ -1,5 +1,5 @@
 <template>
-  <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <ToastAction :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </ToastAction>
 </template>
@@ -21,7 +21,7 @@
       altText: "Action button",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Toast/Close.vue b/app/components/Ui/Toast/Close.vue
index 4ad9e1b..f715311 100644
--- a/app/components/Ui/Toast/Close.vue
+++ b/app/components/Ui/Toast/Close.vue
@@ -1,5 +1,5 @@
 <template>
-  <ToastClose :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class', 'icon')">
+  <ToastClose :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       <Icon :name="icon || 'lucide:x'" class="h-4 w-4" />
     </slot>
@@ -22,7 +22,7 @@
       icon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "icon");
   const styles = tv({
     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",
   });
diff --git a/app/components/Ui/Toast/Description.vue b/app/components/Ui/Toast/Description.vue
index 3835127..61e02cd 100644
--- a/app/components/Ui/Toast/Description.vue
+++ b/app/components/Ui/Toast/Description.vue
@@ -1,8 +1,5 @@
 <template>
-  <ToastDescription
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'description')"
-  >
+  <ToastDescription :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ description }}</slot>
   </ToastDescription>
 </template>
@@ -19,7 +16,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "description");
   const styles = tv({
     base: "text-sm opacity-90",
   });
diff --git a/app/components/Ui/Toast/Title.vue b/app/components/Ui/Toast/Title.vue
index b45b91d..2fbb4fe 100644
--- a/app/components/Ui/Toast/Title.vue
+++ b/app/components/Ui/Toast/Title.vue
@@ -1,8 +1,5 @@
 <template>
-  <ToastTitle
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'title')"
-  >
+  <ToastTitle :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>{{ title }}</slot>
   </ToastTitle>
 </template>
@@ -19,7 +16,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "title");
   const styles = tv({
     base: "text-sm font-semibold",
   });
diff --git a/app/components/Ui/Toast/Viewport.vue b/app/components/Ui/Toast/Viewport.vue
index 5a0ef2e..02bd8f7 100644
--- a/app/components/Ui/Toast/Viewport.vue
+++ b/app/components/Ui/Toast/Viewport.vue
@@ -1,5 +1,5 @@
 <template>
-  <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <ToastViewport :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </ToastViewport>
 </template>
@@ -16,7 +16,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     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]",
   });
diff --git a/app/components/Ui/Tree/Item.vue b/app/components/Ui/Tree/Item.vue
new file mode 100644
index 0000000..9ee93ec
--- /dev/null
+++ b/app/components/Ui/Tree/Item.vue
@@ -0,0 +1,15 @@
+<template>
+  <TreeItem v-slot="slotProps" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeItem>
+</template>
+
+<script lang="ts" setup generic="T extends Record<string, any>">
+  import { TreeItem, useForwardPropsEmits } from "radix-vue";
+  import type { TreeItemEmits, TreeItemProps } from "radix-vue";
+
+  const props = defineProps<TreeItemProps<T>>();
+  const emit = defineEmits<TreeItemEmits<T>>();
+
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>
diff --git a/app/components/Ui/Tree/Tree.vue b/app/components/Ui/Tree/Tree.vue
new file mode 100644
index 0000000..73be221
--- /dev/null
+++ b/app/components/Ui/Tree/Tree.vue
@@ -0,0 +1,15 @@
+<template>
+  <TreeRoot v-slot="slotProps" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeRoot>
+</template>
+
+<script lang="ts" setup>
+  import { TreeRoot, useForwardPropsEmits } from "radix-vue";
+  import type { TreeRootEmits, TreeRootProps } from "radix-vue";
+
+  const props = defineProps<TreeRootProps>();
+  const emit = defineEmits<TreeRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>
diff --git a/app/components/Ui/Tree/Virtualizer.vue b/app/components/Ui/Tree/Virtualizer.vue
new file mode 100644
index 0000000..90e2db9
--- /dev/null
+++ b/app/components/Ui/Tree/Virtualizer.vue
@@ -0,0 +1,13 @@
+<template>
+  <TreeVirtualizer v-slot="slotProps" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeVirtualizer>
+</template>
+
+<script lang="ts" setup>
+  import { TreeVirtualizer, useForwardPropsEmits } from "radix-vue";
+  import type { TreeVirtualizerProps } from "radix-vue";
+
+  const props = defineProps<TreeVirtualizerProps>();
+  const forwarded = useForwardPropsEmits(props);
+</script>
diff --git a/app/components/Ui/Vee/PinInput.vue b/app/components/Ui/Vee/PinInput.vue
index be62c92..22d3cdf 100644
--- a/app/components/Ui/Vee/PinInput.vue
+++ b/app/components/Ui/Vee/PinInput.vue
@@ -9,10 +9,7 @@
     <div class="relative">
       <UiPinInput
         :id="inputId"
-        v-bind="{
-          ...$attrs,
-          ...reactiveOmit(props, 'label', 'hint', 'id', 'rules', 'validateOnMount', 'modelValue'),
-        }"
+        v-bind="{ ...$attrs, ...forwarded }"
         v-model="value"
         @complete="emits('complete', $event)"
       />
@@ -21,7 +18,6 @@
       <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">
         {{ hint }}
       </p>
-
       <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">
         {{ errorMessage }}
       </p>
@@ -48,6 +44,15 @@
     complete: [value: string[]];
   }>();
 
+  const forwarded = reactiveOmit(
+    props,
+    "label",
+    "hint",
+    "id",
+    "rules",
+    "validateOnMount",
+    "modelValue"
+  );
   const inputId = props.id || useId();
 
   const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7cdf98f..61f4dbc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -131,4 +131,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: "2024-07-09",
-});
+});
\ No newline at end of file