chore: update to newest components

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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>

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>

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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(

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",
   });

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",
   });

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",
   });

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",
   });

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",
   });

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"