abckit 0.0.10 → 0.0.12

package/dist/module.d.mts

@@ -27,12 +27,24 @@ interface SetupConfig {
         };
     };
 }
+interface AuthClientOptions {
+    /**
+     * Base URL for Better Auth client
+     * Required for Capacitor/mobile apps where the default URL is not http/https
+     * @example 'https://api.example.com'
+     */
+    baseURL?: string;
+}
 interface ModuleOptions {
     /**
      * Enable Sentry user tracking in useAuth composable
      * @default false
      */
     sentry?: boolean;
+    /**
+     * Better Auth client configuration
+     */
+    auth?: AuthClientOptions;
 }
 declare module 'nuxt/schema' {
     interface AppConfig extends BreadcrumbsConfig, SetupConfig {
@@ -77,10 +89,13 @@ declare module 'nuxt/schema' {
         };
         abckit: {
             sentry: boolean;
+            auth: {
+                baseURL?: string;
+            };
         };
     }
 }
 declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { BreadcrumbsConfig, ModuleOptions, SetupConfig };
+export type { AuthClientOptions, BreadcrumbsConfig, ModuleOptions, SetupConfig };

package/dist/module.mjs

@@ -27,11 +27,12 @@ const module$1 = defineNuxtModule({
   }),
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public, {
-      abckit: {
-        sentry: options.sentry ?? false
+    nuxt.options.runtimeConfig.public.abckit = {
+      sentry: nuxt.options.runtimeConfig.public.abckit?.sentry ?? options.sentry ?? false,
+      auth: {
+        baseURL: nuxt.options.runtimeConfig.public.abckit?.auth?.baseURL ?? options.auth?.baseURL
       }
-    });
+    };
     nuxt.options.runtimeConfig.dragonfly = defu(nuxt.options.runtimeConfig.dragonfly, {
       host: "dragonfly",
       port: Number.parseInt("6379", 10),
@@ -212,7 +213,6 @@ export {}
     excludeSet.add("zod");
     excludeSet.add("date-fns");
     excludeSet.add("date-fns/locale");
-    excludeSet.add("lucide-vue-next");
     excludeSet.add("class-variance-authority");
     excludeSet.add("reka-ui");
     excludeSet.add("clsx");

package/dist/runtime/components/app/AppBreadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useAppConfig, useRoute } from "#app";
+import { useAppConfig } from "#app";
 import { NuxtLink } from "#components";
 import { useBreadcrumbItems } from "abckit/composables/useBreadcrumbItems";
 import {
@@ -11,7 +11,6 @@ import {
   BreadcrumbSeparator
 } from "abckit/shadcn/breadcrumb";
 import { computed } from "vue";
-const route = useRoute();
 const appConfig = useAppConfig();
 const breadcrumbConfig = computed(() => appConfig.breadcrumbs || {});
 const baseUrl = computed(() => {

package/dist/runtime/components/app/AppHeader.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { Icon } from "#components";
 import { SidebarMenuButton, useSidebar } from "abckit/shadcn/sidebar";
-import { Shield } from "lucide-vue-next";
 const props = defineProps({
   tenant: { type: Object, required: false }
 });
@@ -13,7 +13,7 @@ const { state } = useSidebar();
     class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
   >
     <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-      <Shield class="h-4 w-4" />
+      <Icon name="lucide:shield" class="h-4 w-4" />
     </div>
     <div
       v-show="state !== 'collapsed'"

package/dist/runtime/components/app/AppNavMain.d.vue.ts

@@ -1,9 +1,8 @@
-import type { LucideIcon } from 'lucide-vue-next';
 type __VLS_Props = {
     items: {
         title: string;
         url: string;
-        icon?: LucideIcon;
+        icon?: string;
         isActive?: boolean;
         items?: {
             title: string;

package/dist/runtime/components/app/AppNavMain.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Icon } from "#components";
 import {
   Collapsible,
   CollapsibleContent,
@@ -14,7 +15,6 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem
 } from "abckit/shadcn/sidebar";
-import { ChevronRight } from "lucide-vue-next";
 defineProps({
   items: { type: Array, required: true },
   label: { type: String, required: false }
@@ -38,7 +38,7 @@ defineProps({
           <template v-if="!item.items">
             <SidebarMenuButton as-child :tooltip="item.title">
               <NuxtLink :to="item.url">
-                <component :is="item.icon" v-if="item.icon" />
+                <Icon v-if="item.icon" :name="item.icon" />
                 <span>{{ item.title }}</span>
               </NuxtLink>
             </SidebarMenuButton>
@@ -46,9 +46,9 @@ defineProps({
           <template v-else>
             <CollapsibleTrigger as-child>
               <SidebarMenuButton :tooltip="item.title">
-                <component :is="item.icon" v-if="item.icon" />
+                <Icon v-if="item.icon" :name="item.icon" />
                 <span>{{ item.title }}</span>
-                <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                <Icon name="lucide:chevron-right" class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
               </SidebarMenuButton>
             </CollapsibleTrigger>
             <CollapsibleContent>

package/dist/runtime/components/app/AppNavMain.vue.d.ts

@@ -1,9 +1,8 @@
-import type { LucideIcon } from 'lucide-vue-next';
 type __VLS_Props = {
     items: {
         title: string;
         url: string;
-        icon?: LucideIcon;
+        icon?: string;
         isActive?: boolean;
         items?: {
             title: string;

package/dist/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   AccordionHeader,
   AccordionTrigger
@@ -28,7 +28,8 @@ const delegatedProps = reactiveOmit(props, "class");
     >
       <slot />
       <slot name="icon">
-        <ChevronDown
+        <Icon
+          name="lucide:chevron-down"
           class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>

package/dist/runtime/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { Button } from "abckit/shadcn/button";
 import { FormItem, FormMessage } from "abckit/shadcn/form";
-import { PlusIcon, TrashIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { FieldArray, FieldContextKey, useField } from "vee-validate";
 import { computed, provide } from "vue";
 import * as z from "zod";
@@ -95,7 +95,7 @@ function getEmptyValueForZodType(schema) {
                   class="h-8 w-8 p-0 text-destructive hover:text-destructive"
                   @click="remove(index)"
                 >
-                  <TrashIcon :size="14" />
+                  <Icon name="lucide:trash" class="size-3.5" />
                 </Button>
               </div>
               
@@ -116,7 +116,7 @@ function getEmptyValueForZodType(schema) {
             :disabled="disabled"
             @click="push(getEmptyValueForZodType(itemShape?.schema))"
           >
-            <PlusIcon :size="16" />
+            <Icon name="lucide:plus" class="size-4" />
             {{ `Add ${beautifyObjectName(fieldName.replace(/s$/, ""))}` }}
           </Button>
         </div>

package/dist/runtime/components/ui/auto-form/AutoFormFieldDate.vue

@@ -5,7 +5,7 @@ import { Calendar } from "abckit/shadcn/calendar";
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from "abckit/shadcn/form";
 import { Popover, PopoverContent, PopoverTrigger } from "abckit/shadcn/popover";
 import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
-import { CalendarIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import AutoFormLabel from "./AutoFormLabel.vue";
 import { beautifyObjectName, maybeBooleanishToBoolean } from "./utils";
 defineProps({
@@ -38,7 +38,7 @@ const df = new DateFormatter("en-US", {
   !slotProps.componentField.modelValue && 'text-muted-foreground'
 )"
                 >
-                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <Icon name="lucide:calendar" class="mr-2 h-4 w-4" />
                   {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
                 </Button>
               </PopoverTrigger>

package/dist/runtime/components/ui/auto-form/AutoFormFieldFile.vue

@@ -2,7 +2,7 @@
 import { Button } from "abckit/shadcn/button";
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from "abckit/shadcn/form";
 import { Input } from "abckit/shadcn/input";
-import { Trash } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ref } from "vue";
 import AutoFormLabel from "./AutoFormLabel.vue";
 import { beautifyObjectName } from "./utils";
@@ -63,7 +63,7 @@ async function parseFileAsString(file) {
   slotProps.componentField.onInput(void 0);
 }"
             >
-              <Trash />
+              <Icon name="lucide:trash" />
             </Button>
           </div>
         </slot>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { MoreHorizontal } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +14,7 @@ const props = defineProps({
     :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class="size-4" />
+      <Icon name="lucide:more-horizontal" class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +14,7 @@ const props = defineProps({
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRight />
+      <Icon name="lucide:chevron-right" />
     </slot>
   </li>
 </template>

package/dist/runtime/components/ui/calendar/CalendarNextButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CalendarNext, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronRight class="size-4" />
+      <Icon name="lucide:chevron-right" class="size-4" />
     </slot>
   </CalendarNext>
 </template>

package/dist/runtime/components/ui/calendar/CalendarPrevButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeft } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CalendarPrev, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronLeft class="size-4" />
+      <Icon name="lucide:chevron-left" class="size-4" />
     </slot>
   </CalendarPrev>
 </template>

package/dist/runtime/components/ui/carousel/CarouselNext.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 import { Button } from "abckit/shadcn/button";
 import { useCarousel } from "./useCarousel";
@@ -25,7 +25,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel();
     @click="scrollNext"
   >
     <slot>
-      <ArrowRight />
+      <Icon name="lucide:arrow-right" />
       <span class="sr-only">Next Slide</span>
     </slot>
   </Button>

package/dist/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowLeft } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 import { Button } from "abckit/shadcn/button";
 import { useCarousel } from "./useCarousel";
@@ -25,7 +25,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel();
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeft />
+      <Icon name="lucide:arrow-left" />
       <span class="sr-only">Previous Slide</span>
     </slot>
   </Button>

package/dist/runtime/components/ui/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       class="grid place-content-center text-current transition-none"
     >
       <slot v-bind="slotProps">
-        <Check class="size-3.5" />
+        <Icon name="lucide:check" class="size-3.5" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/dist/runtime/components/ui/combobox/ComboboxInput.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { SearchIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ComboboxInput, useForwardPropsEmits } from "reka-ui";
 import { cn } from "abckit/utils";
 defineOptions({
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <SearchIcon class="size-4 shrink-0 opacity-50" />
+    <Icon name="lucide:search" class="size-4 shrink-0 opacity-50" />
     <ComboboxInput
       data-slot="command-input"
       :class="cn(

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Search } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ListboxFilter, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { useCommand } from ".";
@@ -25,7 +25,7 @@ const { filterState } = useCommand();
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <Search class="size-4 shrink-0 opacity-50" />
+    <Icon name="lucide:search" class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"

package/dist/runtime/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
+          <Icon name="lucide:circle" class="size-2 fill-current" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuSubTrigger,
   useForwardProps
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps);
 )"
   >
     <slot />
-    <ChevronRight class="ml-auto" />
+    <Icon name="lucide:chevron-right" class="ml-auto" />
   </ContextMenuSubTrigger>
 </template>

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DialogClose,
   DialogContent,
@@ -45,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         data-slot="dialog-close"
         class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
-        <X />
+        <Icon name="lucide:x" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DialogClose,
   DialogContent,
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <DialogClose
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class="w-4 h-4" />
+          <Icon name="lucide:x" class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
+          <Icon name="lucide:circle" class="size-2 fill-current" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuSubTrigger,
   useForwardProps
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps);
 )"
   >
     <slot />
-    <ChevronRight class="ml-auto size-4" />
+    <Icon name="lucide:chevron-right" class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>

package/dist/runtime/components/ui/file/FileEmptyState.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Cloud, Trash2 } from "lucide-vue-next";
+import { Icon } from "#components";
 const props = defineProps({
   searchQuery: { type: String, required: false, default: "" },
   isTrash: { type: Boolean, required: false, default: false },
@@ -22,7 +22,7 @@ function handleUploadClick() {
       class="relative rounded-full bg-muted p-8 mb-4 cursor-pointer transition-transform hover:scale-105"
       @click="handleUploadClick"
     >
-      <Cloud class="h-16 w-16 text-muted-foreground" />
+      <Icon name="lucide:cloud" class="h-16 w-16 text-muted-foreground" />
       <input
         v-if="!onUploadClick"
         type="file"
@@ -32,7 +32,7 @@ function handleUploadClick() {
       />
     </div>
     <div v-else-if="!searchQuery" class="rounded-full bg-muted p-8 mb-4">
-      <Trash2 class="h-16 w-16 text-muted-foreground" />
+      <Icon name="lucide:trash-2" class="h-16 w-16 text-muted-foreground" />
     </div>
     <div v-else class="rounded-full bg-muted p-8 mb-4">
       <Icon name="lucide:search-x" class="h-16 w-16 text-muted-foreground" />

package/dist/runtime/components/ui/file/FileGrid.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { Cloud, FileText, Film, Folder, Image } from "lucide-vue-next";
 import { bytesToSize } from "abckit/shared/constants/r2";
 import { AppImage } from "abckit/components/app";
+import { Icon } from "#components";
 const props = defineProps({
   files: { type: Array, required: true },
   selectedFiles: { type: Set, required: false },
@@ -11,13 +11,13 @@ const props = defineProps({
 });
 const emit = defineEmits(["select", "folderClick"]);
 const FILE_TYPE_ICONS = {
-  IMAGE: Image,
-  VIDEO: Film,
-  AUDIO: FileText,
-  DOCUMENT: FileText,
-  ARCHIVE: Cloud,
-  OTHER: Cloud,
-  FOLDER: Folder
+  IMAGE: "lucide:image",
+  VIDEO: "lucide:film",
+  AUDIO: "lucide:file-text",
+  DOCUMENT: "lucide:file-text",
+  ARCHIVE: "lucide:cloud",
+  OTHER: "lucide:cloud",
+  FOLDER: "lucide:folder"
 };
 function getFileIcon(file) {
   if (file.isFolder)
@@ -70,8 +70,8 @@ function isSelected(fileId) {
           fallback=""
         />
         <div v-else class="flex h-full items-center justify-center">
-          <component
-            :is="getFileIcon(file)"
+          <Icon
+            :name="getFileIcon(file)"
             class="h-12 w-12 text-muted-foreground"
           />
         </div>