diff --git a/src/comps.ts b/src/comps.ts
index 9d482cd..89a59b4 100644
--- a/src/comps.ts
+++ b/src/comps.ts
@@ -338,7 +338,7 @@ export default [
         fileName: "Button.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        className="w-0 flex items-center shrink-0 justify-center translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        className="w-0 flex items-center justify-center shrink-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type fro the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n      }\n    >(),\n    {\n      type: "button",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled"\n    )\n  );\n</script>\n',
+          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type fro the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n      }\n    >(),\n    {\n      type: "button",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled"\n    )\n  );\n</script>\n',
       },
     ],
     composables: [],
@@ -640,7 +640,7 @@ export default [
         fileName: "ContextMenu/CheckboxItem.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiContextMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n  import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuCheckboxItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /**The shortcut for the item */\n      shortcut?: string;\n      /**The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiContextMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n    </slot>\n  </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n  import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    ContextMenuCheckboxItemProps & {\n      /**Custom class(es) to add to the element */\n      class?: any;\n      /**The shortcut for the item */\n      shortcut?: string;\n      /**The title for the item */\n      title?: string;\n    }\n  >();\n\n  const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "ContextMenu/Content.vue",
@@ -833,7 +833,7 @@ export default [
         fileName: "Dialog/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <UiDialogPortal :to="to">\n    <UiDialogOverlay />\n    <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n      <slot>\n        <slot name="header">\n          <UiDialogHeader>\n            <slot name="title">\n              <UiDialogTitle v-if="title" :title="title" />\n            </slot>\n            <slot name="description">\n              <UiDialogDescription v-if="description" :description="description" />\n            </slot>\n          </UiDialogHeader>\n        </slot>\n        <slot name="content" />\n        <slot name="footer" />\n      </slot>\n      <slot name="close">\n        <UiDialogClose />\n      </slot>\n      <UiDialogClose\n        v-if="!hideClose"\n        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n      >\n        <Icon name="lucide:x" class="h-4 w-4" mode="svg" />\n        <span class="sr-only">Close</span>\n      </UiDialogClose>\n    </DialogContent>\n  </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DialogContent, useForwardPropsEmits } from "radix-vue";\n  import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    DialogContentProps & {\n      /** Icon to display in the close button */\n      icon?: string;\n      /** Title text */\n      title?: string;\n      /** Description text */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Whether to hide the close button */\n      hideClose?: boolean;\n      /** Where to render the dialog */\n      to?: string | HTMLElement;\n    }\n  >();\n  const emits = defineEmits<DialogContentEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n    emits\n  );\n\n  const styles = tv({\n    base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n  });\n</script>\n',
+          '<template>\n  <UiDialogPortal :to="to">\n    <UiDialogOverlay />\n    <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n      <slot>\n        <slot name="header">\n          <UiDialogHeader>\n            <slot name="title">\n              <UiDialogTitle v-if="title" :title="title" />\n            </slot>\n            <slot name="description">\n              <UiDialogDescription v-if="description" :description="description" />\n            </slot>\n          </UiDialogHeader>\n        </slot>\n        <slot name="content" />\n        <slot name="footer" />\n      </slot>\n      <slot name="close" />\n      <UiDialogClose\n        v-if="!hideClose"\n        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n      >\n        <Icon name="lucide:x" class="h-4 w-4" mode="svg" />\n        <span class="sr-only">Close</span>\n      </UiDialogClose>\n    </DialogContent>\n  </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DialogContent, useForwardPropsEmits } from "radix-vue";\n  import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<\n    DialogContentProps & {\n      /** Icon to display in the close button */\n      icon?: string;\n      /** Title text */\n      title?: string;\n      /** Description text */\n      description?: string;\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** Whether to hide the close button */\n      hideClose?: boolean;\n      /** Where to render the dialog */\n      to?: string | HTMLElement;\n    }\n  >();\n  const emits = defineEmits<DialogContentEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n    emits\n  );\n\n  const styles = tv({\n    base: "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100%-4rem)] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Description.vue",
@@ -851,7 +851,7 @@ export default [
         fileName: "Dialog/Footer.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
+          '<template>\n  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      as: "div",\n    }\n  );\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2",\n  });\n</script>\n',
       },
       {
         fileName: "Dialog/Header.vue",
@@ -919,7 +919,7 @@ export default [
         fileName: "Drawer/Content.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <UiDrawerPortal>\n    <slot name="overlay">\n      <UiDrawerOverlay />\n    </slot>\n    <slot name="content">\n      <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n        <slot name="knob">\n          <div\n            className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\n          />\n        </slot>\n        <slot />\n      </DrawerContent>\n    </slot>\n  </UiDrawerPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerContent } from "vaul-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\n\n  const props = defineProps<Props & { class?: any }>();\n  const styles = tv({\n    base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\n  });\n</script>\n',
+          '<template>\n  <UiDrawerPortal>\n    <slot name="overlay">\n      <UiDrawerOverlay />\n    </slot>\n    <slot name="content">\n      <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n        <slot name="knob">\n          <div\n            class="mx-auto my-5 h-2 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"\n          />\n        </slot>\n        <slot />\n      </DrawerContent>\n    </slot>\n  </UiDrawerPortal>\n</template>\n\n<script lang="ts" setup>\n  import { DrawerContent } from "vaul-vue";\n\n  defineOptions({ inheritAttrs: false });\n\n  interface Props\n    extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\n\n  const props = defineProps<Props & { class?: any }>();\n  const styles = tv({\n    base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\n  });\n</script>\n',
       },
       {
         fileName: "Drawer/Description.vue",
@@ -976,7 +976,7 @@ export default [
         fileName: "DropdownMenu/CheckboxItem.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiDropdownMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>\n    </slot>\n  </DropdownMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n  import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuCheckboxItemProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The shorttcut text to display */\n      shortcut?: string;\n      /** The title text to display */\n      title?: string;\n    }\n  >();\n  const emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);\n\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n  });\n</script>\n',
+          '<template>\n  <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n      <UiDropdownMenuItemIndicator icon="lucide:check" />\n    </span>\n    <slot>\n      <span v-if="title">{{ title }}</span>\n    </slot>\n    <slot name="shortcut">\n      <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>\n    </slot>\n  </DropdownMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n  import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n  import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "radix-vue";\n\n  const props = defineProps<\n    DropdownMenuCheckboxItemProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n      /** The shorttcut text to display */\n      shortcut?: string;\n      /** The title text to display */\n      title?: string;\n    }\n  >();\n  const emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);\n\n  const styles = tv({\n    base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n  });\n</script>\n',
       },
       {
         fileName: "DropdownMenu/Content.vue",
@@ -1147,7 +1147,7 @@ export default [
         fileName: "FancyIcon.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div :class="styles().base({ class: props.class, color, type, size, circle })">\n    <slot :styles="styles().icon({ color, type, size, circle })">\n      <Icon :name="icon" :class="styles().icon({ color, type, size, circle })" />\n    </slot>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      icon: string;\n      color?: VariantProps<typeof styles>["color"];\n      type?: VariantProps<typeof styles>["type"];\n      size?: VariantProps<typeof styles>["size"];\n      circle?: boolean;\n    }>(),\n    {\n      color: "primary",\n      type: "modern",\n      size: "lg",\n      circle: false,\n    }\n  );\n\n  const styles = tv({\n    slots: {\n      base: "flex shrink-0 items-center justify-center",\n      icon: "",\n    },\n\n    variants: {\n      color: {\n        primary: {\n          base: "",\n          icon: "",\n        },\n        success: {\n          base: "",\n          icon: "",\n        },\n        warning: {\n          base: "",\n          icon: "",\n        },\n        error: {\n          base: "",\n          icon: "",\n        },\n        info: {\n          base: "",\n          icon: "",\n        },\n      },\n      type: {\n        light: {\n          base: "",\n          icon: "",\n        },\n        dark: {\n          base: "",\n          icon: "",\n        },\n        modern: {\n          base: "",\n          icon: "",\n        },\n      },\n      size: {\n        sm: {\n          base: "size-8",\n          icon: "size-4",\n        },\n        md: {\n          base: "size-10",\n          icon: "size-5",\n        },\n        lg: {\n          base: "size-12",\n          icon: "size-6",\n        },\n        xl: {\n          base: "size-14",\n          icon: "size-7",\n        },\n      },\n      circle: {\n        true: {\n          base: "rounded-full",\n        },\n        false: {\n          base: "rounded-lg",\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        color: "primary",\n        type: "light",\n        class: { base: "bg-primary/5", icon: "text-primary" },\n      },\n      {\n        color: "success",\n        type: "light",\n        class: {\n          base: "bg-green-500/10",\n          icon: "text-green-600",\n        },\n      },\n      {\n        color: "warning",\n        type: "light",\n        class: { base: "bg-amber-500/10", icon: "text-amber-600" },\n      },\n      {\n        color: "error",\n        type: "light",\n        class: { base: "bg-destructive/10", icon: "text-destructive" },\n      },\n      {\n        color: "info",\n        type: "light",\n        class: { base: "bg-blue-500/10", icon: "text-blue-600" },\n      },\n      // Dark\n      {\n        color: "primary",\n        type: "dark",\n        class: { base: "bg-primary", icon: "text-primary-foreground" },\n      },\n      {\n        color: "success",\n        type: "dark",\n        class: { base: "bg-green-600", icon: "text-green-50" },\n      },\n      {\n        color: "warning",\n        type: "dark",\n        class: { base: "bg-amber-600", icon: "text-amber-50" },\n      },\n      {\n        color: "error",\n        type: "dark",\n        class: { base: "bg-destructive", icon: "text-destructive-foreground" },\n      },\n      {\n        color: "info",\n        type: "dark",\n        class: { base: "bg-blue-500", icon: "text-blue-50" },\n      },\n      // Modern\n      {\n        type: "modern",\n        class: { base: "border bg-background", icon: "text-muted-foreground" },\n      },\n    ],\n    defaultVariants: {\n      color: "primary",\n      type: "modern",\n      size: "lg",\n      circle: false,\n    },\n  });\n</script>\n',
+          '<template>\n  <div :class="styles().base({ class: props.class, color, type, size, circle })">\n    <slot :styles="styles().icon({ color, type, size, circle })">\n      <Icon v-if="icon" :name="icon" :class="styles().icon({ color, type, size, circle })" />\n    </slot>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      icon?: string;\n      color?: VariantProps<typeof styles>["color"];\n      type?: VariantProps<typeof styles>["type"];\n      size?: VariantProps<typeof styles>["size"];\n      circle?: boolean;\n    }>(),\n    {\n      color: "primary",\n      type: "modern",\n      size: "lg",\n      circle: false,\n    }\n  );\n\n  const styles = tv({\n    slots: {\n      base: "flex shrink-0 items-center justify-center",\n      icon: "",\n    },\n\n    variants: {\n      color: {\n        primary: {\n          base: "",\n          icon: "",\n        },\n        success: {\n          base: "",\n          icon: "",\n        },\n        warning: {\n          base: "",\n          icon: "",\n        },\n        error: {\n          base: "",\n          icon: "",\n        },\n        info: {\n          base: "",\n          icon: "",\n        },\n      },\n      type: {\n        light: {\n          base: "",\n          icon: "",\n        },\n        dark: {\n          base: "",\n          icon: "",\n        },\n        modern: {\n          base: "",\n          icon: "",\n        },\n      },\n      size: {\n        sm: {\n          base: "size-8",\n          icon: "size-4",\n        },\n        md: {\n          base: "size-10",\n          icon: "size-5",\n        },\n        lg: {\n          base: "size-12",\n          icon: "size-6",\n        },\n        xl: {\n          base: "size-14",\n          icon: "size-7",\n        },\n      },\n      circle: {\n        true: {\n          base: "rounded-full",\n        },\n        false: {\n          base: "rounded-lg",\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        color: "primary",\n        type: "light",\n        class: { base: "bg-primary/5", icon: "text-primary" },\n      },\n      {\n        color: "success",\n        type: "light",\n        class: {\n          base: "bg-green-500/10",\n          icon: "text-green-600",\n        },\n      },\n      {\n        color: "warning",\n        type: "light",\n        class: { base: "bg-amber-500/10", icon: "text-amber-600" },\n      },\n      {\n        color: "error",\n        type: "light",\n        class: { base: "bg-destructive/10", icon: "text-destructive" },\n      },\n      {\n        color: "info",\n        type: "light",\n        class: { base: "bg-blue-500/10", icon: "text-blue-600" },\n      },\n      // Dark\n      {\n        color: "primary",\n        type: "dark",\n        class: { base: "bg-primary", icon: "text-primary-foreground" },\n      },\n      {\n        color: "success",\n        type: "dark",\n        class: { base: "bg-green-600", icon: "text-green-50" },\n      },\n      {\n        color: "warning",\n        type: "dark",\n        class: { base: "bg-amber-600", icon: "text-amber-50" },\n      },\n      {\n        color: "error",\n        type: "dark",\n        class: { base: "bg-destructive", icon: "text-destructive-foreground" },\n      },\n      {\n        color: "info",\n        type: "dark",\n        class: { base: "bg-blue-500", icon: "text-blue-50" },\n      },\n      // Modern\n      {\n        type: "modern",\n        class: { base: "border bg-background", icon: "text-muted-foreground" },\n      },\n    ],\n    defaultVariants: {\n      color: "primary",\n      type: "modern",\n      size: "lg",\n      circle: false,\n    },\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2214,7 +2214,7 @@ export default [
         fileName: "Sidebar/Sidebar.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div\n    v-if="collapsible === \'none\'"\n    :class="sideBarStyles().collapsible({ class: props.class })"\n    v-bind="$attrs"\n  >\n    <slot />\n  </div>\n\n  <UiSheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">\n    <UiSheetContent\n      data-sidebar="sidebar"\n      data-mobile="true"\n      :side="side"\n      :class="sideBarStyles().mobileSheet()"\n      :style="{\n        \'--sidebar-width\': SIDEBAR_WIDTH_MOBILE,\n      }"\n    >\n      <VisuallyHidden>\n        <UiSheetTitle>Mobile Sidebar</UiSheetTitle>\n        <UiSheetDescription>\n          This is the mobile sidebar. You can use this to navigate the site.\n        </UiSheetDescription>\n      </VisuallyHidden>\n      <div :class="sideBarStyles().mobileInner()">\n        <slot />\n      </div>\n    </UiSheetContent>\n  </UiSheet>\n\n  <div\n    v-else\n    class="group peer hidden md:block"\n    :data-state="state"\n    :data-collapsible="state === \'collapsed\' ? collapsible : \'\'"\n    :data-variant="variant"\n    :data-side="side"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div :class="sideBarStyles().sideBarWrapper({ variant })" />\n    <div\n      :class="sideBarStyles().sideBarWrapper2({ collapsible, side, variant, class: props.class })"\n      v-bind="$attrs"\n    >\n      <div data-sidebar="sidebar" :class="sideBarStyles().sideBarInner()">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang="ts">\n  import type { VariantProps } from "tailwind-variants";\n  import type { HTMLAttributes } from "vue";\n\n  export const sideBarStyles = tv({\n    slots: {\n      collapsible: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",\n      mobileSheet: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",\n      mobileInner: "flex h-full w-full flex-col",\n      sideBarWrapper:\n        "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",\n      sideBarWrapper2:\n        "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",\n      sideBarInner:\n        "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",\n    },\n    variants: {\n      side: {\n        left: {\n          sideBarWrapper2:\n            "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",\n        },\n        right: {\n          sideBarWrapper2:\n            "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",\n        },\n      },\n      variant: {\n        sidebar: {\n          sideBarWrapper: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",\n          sideBarWrapper2:\n            "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",\n        },\n        floating: {\n          sideBarWrapper:\n            "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n          sideBarWrapper2:\n            "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n        },\n        inset: {\n          sideBarWrapper:\n            "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n          sideBarWrapper2:\n            "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n        },\n      },\n      collapsible: {\n        offcanvas: {},\n        icon: {},\n        none: {},\n      },\n    },\n    defaultVariants: {\n      side: "left",\n      variant: "sidebar",\n      collapsible: "offcanvas",\n    },\n  });\n\n  export type SideBarProps = {\n    /**\n     * The side that the sidebar is on\n     * @default "left"\n     */\n    side?: VariantProps<typeof sideBarStyles>["side"];\n    /**\n     * The variant of the sidebar\n     * @default "sidebar"\n     */\n    variant?: VariantProps<typeof sideBarStyles>["variant"];\n    /**\n     * The collapsible state of the sidebar\n     * @default "offcanvas"\n     */\n    collapsible?: VariantProps<typeof sideBarStyles>["collapsible"];\n    /**\n     * Additional classes to add to the sidebar\n     */\n    class?: HTMLAttributes["class"];\n  };\n</script>\n<script setup lang="ts">\n  defineOptions({ inheritAttrs: false });\n\n  const props = withDefaults(defineProps<SideBarProps>(), {\n    side: "left",\n    variant: "sidebar",\n    collapsible: "offcanvas",\n  });\n\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n</script>\n',
+          '<template>\n  <div\n    v-if="collapsible === \'none\'"\n    :class="sideBarStyles().collapsible({ class: props.class })"\n    v-bind="$attrs"\n  >\n    <slot />\n  </div>\n\n  <UiSheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">\n    <UiSheetContent\n      data-sidebar="sidebar"\n      data-mobile="true"\n      :side="side"\n      :class="sideBarStyles().mobileSheet()"\n      :style="{\n        \'--sidebar-width\': SIDEBAR_WIDTH_MOBILE,\n      }"\n    >\n      <VisuallyHidden>\n        <UiSheetTitle>Mobile Sidebar</UiSheetTitle>\n        <UiSheetDescription>\n          This is the mobile sidebar. You can use this to navigate the site.\n        </UiSheetDescription>\n      </VisuallyHidden>\n      <div :class="sideBarStyles().mobileInner()">\n        <slot />\n      </div>\n    </UiSheetContent>\n  </UiSheet>\n\n  <div\n    v-else\n    class="group peer hidden md:block"\n    :data-state="state"\n    :data-collapsible="state === \'collapsed\' ? collapsible : \'\'"\n    :data-variant="variant"\n    :data-side="side"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div :class="sideBarStyles().sideBarWrapper({ variant })" />\n    <div\n      :class="sideBarStyles().sideBarWrapper2({ collapsible, side, variant, class: props.class })"\n      v-bind="$attrs"\n    >\n      <div data-sidebar="sidebar" :class="sideBarStyles().sideBarInner()">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang="ts">\n  import { VisuallyHidden } from "radix-vue";\n  import type { VariantProps } from "tailwind-variants";\n  import type { HTMLAttributes } from "vue";\n\n  export const sideBarStyles = tv({\n    slots: {\n      collapsible: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",\n      mobileSheet: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",\n      mobileInner: "flex h-full w-full flex-col",\n      sideBarWrapper:\n        "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",\n      sideBarWrapper2:\n        "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",\n      sideBarInner:\n        "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",\n    },\n    variants: {\n      side: {\n        left: {\n          sideBarWrapper2:\n            "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",\n        },\n        right: {\n          sideBarWrapper2:\n            "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",\n        },\n      },\n      variant: {\n        sidebar: {\n          sideBarWrapper: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",\n          sideBarWrapper2:\n            "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",\n        },\n        floating: {\n          sideBarWrapper:\n            "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n          sideBarWrapper2:\n            "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n        },\n        inset: {\n          sideBarWrapper:\n            "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n          sideBarWrapper2:\n            "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n        },\n      },\n      collapsible: {\n        offcanvas: {},\n        icon: {},\n        none: {},\n      },\n    },\n    defaultVariants: {\n      side: "left",\n      variant: "sidebar",\n      collapsible: "offcanvas",\n    },\n  });\n\n  export type SideBarProps = {\n    /**\n     * The side that the sidebar is on\n     * @default "left"\n     */\n    side?: VariantProps<typeof sideBarStyles>["side"];\n    /**\n     * The variant of the sidebar\n     * @default "sidebar"\n     */\n    variant?: VariantProps<typeof sideBarStyles>["variant"];\n    /**\n     * The collapsible state of the sidebar\n     * @default "offcanvas"\n     */\n    collapsible?: VariantProps<typeof sideBarStyles>["collapsible"];\n    /**\n     * Additional classes to add to the sidebar\n     */\n    class?: HTMLAttributes["class"];\n  };\n</script>\n<script setup lang="ts">\n  defineOptions({ inheritAttrs: false });\n\n  const props = withDefaults(defineProps<SideBarProps>(), {\n    side: "left",\n    variant: "sidebar",\n    collapsible: "offcanvas",\n  });\n\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n</script>\n',
       },
       {
         fileName: "Sidebar/Trigger.vue",
@@ -2899,7 +2899,7 @@ export default [
         fileName: "Vee/PinInput.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <UiPinInput\n        :id="inputId"\n        v-bind="{ ...$attrs, ...forwarded }"\n        v-model="value"\n        @complete="emits(\'complete\', $event)"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import type { PinInputRootProps } from "radix-vue";\n\n  const props = defineProps<\n    Omit<PinInputRootProps, "as" | "asChild"> & {\n      label?: string;\n      hint?: string;\n      id?: string;\n      rules?: any;\n      validateOnMount?: boolean;\n      separator?: string;\n      inputCount?: number;\n    }\n  >();\n\n  const emits = defineEmits<{\n    complete: [value: string[]];\n  }>();\n\n  const forwarded = reactiveOmit(\n    props,\n    "label",\n    "hint",\n    "id",\n    "rules",\n    "validateOnMount",\n    "modelValue"\n  );\n  const inputId = props.id || useId();\n\n  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue || [],\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
+          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <UiPinInput\n        :id="inputId"\n        v-bind="{ ...$attrs, ...forwarded }"\n        v-model="value"\n        @complete="emits(\'complete\', $event)"\n      />\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import type { PinInputRootProps } from "radix-vue";\n\n  const props = defineProps<\n    Omit<PinInputRootProps, "as" | "asChild"> & {\n      label?: string;\n      hint?: string;\n      id?: string;\n      rules?: any;\n      validateOnMount?: boolean;\n      separator?: string;\n      inputCount?: number;\n    }\n  >();\n\n  const emits = defineEmits<{\n    complete: [value: string[]];\n    "update:modelValue": [value: string[]];\n  }>();\n\n  const forwarded = reactiveOmit(\n    props,\n    "label",\n    "hint",\n    "id",\n    "rules",\n    "validateOnMount",\n    "modelValue"\n  );\n  const inputId = props.id || useId();\n\n  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n    initialValue: props.modelValue || [],\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
       },
     ],
     utils: [],