abckit 0.0.9 → 0.0.11

package/dist/runtime/components/ui/input-otp/InputOTPSeparator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { MinusIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { useForwardProps } from "reka-ui";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +14,7 @@ const forwarded = useForwardProps(props);
     v-bind="forwarded"
   >
     <slot>
-      <MinusIcon />
+      <Icon name="lucide:minus" />
     </slot>
   </div>
 </template>

package/dist/runtime/components/ui/menubar/MenubarCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   MenubarCheckboxItem,
   MenubarItemIndicator,
@@ -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">
       <MenubarItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </MenubarItemIndicator>
     </span>

package/dist/runtime/components/ui/menubar/MenubarRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -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">
       <MenubarItemIndicator>
         <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
+          <Icon name="lucide:circle" class="size-2 fill-current" />
         </slot>
       </MenubarItemIndicator>
     </span>

package/dist/runtime/components/ui/menubar/MenubarSubTrigger.vue

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

package/dist/runtime/components/ui/native-select/NativeSelect.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit, useVModel } from "@vueuse/core";
-import { ChevronDownIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 defineOptions({
   inheritAttrs: false
@@ -35,7 +35,8 @@ const delegatedProps = reactiveOmit(props, "class");
     >
       <slot />
     </select>
-    <ChevronDownIcon
+    <Icon
+      name="lucide:chevron-down"
       class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
       aria-hidden="true"
       data-slot="native-select-icon"

package/dist/runtime/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   NavigationMenuTrigger,
   useForwardProps
@@ -24,7 +24,8 @@ const forwardedProps = useForwardProps(delegatedProps);
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
   >
     <slot />
-    <ChevronDown
+    <Icon
+      name="lucide:chevron-down"
       class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />

package/dist/runtime/components/ui/number-field/NumberFieldDecrement.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Minus } from "lucide-vue-next";
+import { Icon } from "#components";
 import { NumberFieldDecrement, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps);
 <template>
   <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
     <slot>
-      <Minus class="h-4 w-4" />
+      <Icon name="lucide:minus" class="h-4 w-4" />
     </slot>
   </NumberFieldDecrement>
 </template>

package/dist/runtime/components/ui/number-field/NumberFieldIncrement.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Plus } from "lucide-vue-next";
+import { Icon } from "#components";
 import { NumberFieldIncrement, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps);
 <template>
   <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
     <slot>
-      <Plus class="h-4 w-4" />
+      <Icon name="lucide:plus" class="h-4 w-4" />
     </slot>
   </NumberFieldIncrement>
 </template>

package/dist/runtime/components/ui/pagination/PaginationEllipsis.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { MoreHorizontal } from "lucide-vue-next";
+import { Icon } from "#components";
 import { PaginationEllipsis } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -18,7 +18,7 @@ const delegatedProps = reactiveOmit(props, "class");
     :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class="size-4" />
+      <Icon name="lucide:more-horizontal" class="size-4" />
       <span class="sr-only">More pages</span>
     </slot>
   </PaginationEllipsis>

package/dist/runtime/components/ui/pagination/PaginationFirst.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeftIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { PaginationFirst, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -21,7 +21,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
   >
     <slot>
-      <ChevronLeftIcon />
+      <Icon name="lucide:chevron-left" />
       <span class="hidden sm:block">First</span>
     </slot>
   </PaginationFirst>

package/dist/runtime/components/ui/pagination/PaginationLast.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRightIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { PaginationLast, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
   >
     <slot>
       <span class="hidden sm:block">Last</span>
-      <ChevronRightIcon />
+      <Icon name="lucide:chevron-right" />
     </slot>
   </PaginationLast>
 </template>

package/dist/runtime/components/ui/pagination/PaginationNext.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRightIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { PaginationNext, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
   >
     <slot>
       <span class="hidden sm:block">Next</span>
-      <ChevronRightIcon />
+      <Icon name="lucide:chevron-right" />
     </slot>
   </PaginationNext>
 </template>

package/dist/runtime/components/ui/pagination/PaginationPrevious.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeftIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { PaginationPrev, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -21,7 +21,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
   >
     <slot>
-      <ChevronLeftIcon />
+      <Icon name="lucide:chevron-left" />
       <span class="hidden sm:block">Previous</span>
     </slot>
   </PaginationPrev>

package/dist/runtime/components/ui/pin-input/PinInputSeparator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Minus } from "lucide-vue-next";
+import { Icon } from "#components";
 import { Primitive, useForwardProps } from "reka-ui";
 const props = defineProps({
   asChild: { type: Boolean, required: false },
@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(props);
     v-bind="forwardedProps"
   >
     <slot>
-      <Minus />
+      <Icon name="lucide:minus" />
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/ui/radio-group/RadioGroupItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { CircleIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   RadioGroupIndicator,
   RadioGroupItem,
@@ -37,7 +37,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       class="relative flex items-center justify-center"
     >
       <slot>
-        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        <Icon name="lucide:circle" class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </slot>
     </RadioGroupIndicator>
   </RadioGroupItem>

package/dist/runtime/components/ui/range-calendar/RangeCalendarNextButton.vue

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

package/dist/runtime/components/ui/range-calendar/RangeCalendarPrevButton.vue

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

package/dist/runtime/components/ui/resizable/ResizableHandle.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { GripVertical } from "lucide-vue-next";
+import { Icon } from "#components";
 import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <template v-if="props.withHandle">
       <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
         <slot>
-          <GripVertical class="size-2.5" />
+          <Icon name="lucide:grip-vertical" class="size-2.5" />
         </slot>
       </div>
     </template>

package/dist/runtime/components/ui/select/SelectItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   SelectItem,
   SelectItemIndicator,
@@ -34,7 +34,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     <span class="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </SelectItemIndicator>
     </span>

package/dist/runtime/components/ui/select/SelectScrollDownButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
+import { Icon } from "#components";
 import { SelectScrollDownButton, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronDown class="size-4" />
+      <Icon name="lucide:chevron-down" class="size-4" />
     </slot>
   </SelectScrollDownButton>
 </template>

package/dist/runtime/components/ui/select/SelectScrollUpButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronUp } from "lucide-vue-next";
+import { Icon } from "#components";
 import { SelectScrollUpButton, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronUp class="size-4" />
+      <Icon name="lucide:chevron-up" class="size-4" />
     </slot>
   </SelectScrollUpButton>
 </template>

package/dist/runtime/components/ui/select/SelectTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
+import { Icon } from "#components";
 import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
+      <Icon name="lucide:chevron-down" class="size-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

package/dist/runtime/components/ui/sheet/InnerSheetContent.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);
       <DialogClose
         class="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <X class="size-4" />
+        <Icon name="lucide:x" class="size-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

package/dist/runtime/components/ui/sheet/SheetContent.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);
       <DialogClose
         class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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"
       >
-        <X class="size-4" />
+        <Icon name="lucide:x" class="size-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

package/dist/runtime/components/ui/sidebar/SidebarTrigger.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { PanelLeft } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 import { Button } from "abckit/shadcn/button";
 import { useSidebar } from "./utils";
@@ -18,7 +18,7 @@ const { toggleSidebar } = useSidebar();
     :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeft />
+    <Icon name="lucide:panel-left" />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>

package/dist/runtime/components/ui/sonner/Sonner.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { Toaster as Sonner } from "vue-sonner";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -39,24 +39,24 @@ const props = defineProps({
     v-bind="props"
   >
     <template #success-icon>
-      <CircleCheckIcon class="size-4" />
+      <Icon name="lucide:circle-check" class="size-4" />
     </template>
     <template #info-icon>
-      <InfoIcon class="size-4" />
+      <Icon name="lucide:info" class="size-4" />
     </template>
     <template #warning-icon>
-      <TriangleAlertIcon class="size-4" />
+      <Icon name="lucide:triangle-alert" class="size-4" />
     </template>
     <template #error-icon>
-      <OctagonXIcon class="size-4" />
+      <Icon name="lucide:octagon-x" class="size-4" />
     </template>
     <template #loading-icon>
       <div>
-        <Loader2Icon class="size-4 animate-spin" />
+        <Icon name="lucide:loader-2" class="size-4 animate-spin" />
       </div>
     </template>
     <template #close-icon>
-      <XIcon class="size-4" />
+      <Icon name="lucide:x" class="size-4" />
     </template>
   </Sonner>
 </template>

package/dist/runtime/components/ui/spinner/Spinner.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Loader2Icon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 const props = defineProps({
   class: { type: null, required: false }
@@ -7,7 +7,8 @@ const props = defineProps({
 </script>
 
 <template>
-  <Loader2Icon
+  <Icon
+    name="lucide:loader-2"
     role="status"
     aria-label="Loading"
     :class="cn('size-4 animate-spin', props.class)"

package/dist/runtime/components/ui/storage/StorageActionBar.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { FolderPlus, Search } from "lucide-vue-next";
+import { Icon } from "#components";
 import { Button } from "abckit/shadcn/button";
 import { Input } from "abckit/shadcn/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "abckit/shadcn/select";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "abckit/shadcn/tooltip";
-import { Icon } from "#components";
 import { computed } from "vue";
 const props = defineProps({
   searchQuery: { type: String, required: false, default: "" },
@@ -34,7 +33,7 @@ const selectedTypeModel = computed({
   <div class="flex gap-2">
     <!-- Search -->
     <div class="relative flex-1">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Icon name="lucide:search" class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
       <Input
         v-model="searchModel"
         placeholder="Dosya ara..."
@@ -97,7 +96,7 @@ const selectedTypeModel = computed({
       <Tooltip>
         <TooltipTrigger as-child>
           <Button variant="outline" size="icon" class="h-10 w-10" @click="emit('create-folder')">
-            <FolderPlus class="h-4 w-4" />
+            <Icon name="lucide:folder-plus" class="h-4 w-4" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>

package/dist/runtime/components/ui/storage/StorageEmptyState.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Cloud, Trash2, Upload } from "lucide-vue-next";
 import { Icon } from "#components";
 import { ref } from "vue";
 const props = defineProps({
@@ -33,9 +32,9 @@ function handleFileInput(event) {
         class="hidden"
         @change="handleFileInput"
       >
-      <Upload v-if="type === 'empty' && showUpload" class="h-16 w-16 text-muted-foreground" />
-      <Cloud v-else-if="type === 'empty'" class="h-16 w-16 text-muted-foreground" />
-      <Trash2 v-else-if="type === 'trash'" class="h-16 w-16 text-muted-foreground" />
+      <Icon v-if="type === 'empty' && showUpload" name="lucide:upload" class="h-16 w-16 text-muted-foreground" />
+      <Icon v-else-if="type === 'empty'" name="lucide:cloud" class="h-16 w-16 text-muted-foreground" />
+      <Icon v-else-if="type === 'trash'" name="lucide:trash-2" class="h-16 w-16 text-muted-foreground" />
       <Icon v-else name="lucide:search-x" class="h-16 w-16 text-muted-foreground" />
     </div>
 

package/dist/runtime/components/ui/storage/StorageGrid.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Cloud, FileText, Film, Folder, Image, MoreVertical } from "lucide-vue-next";
 import { bytesToSize } from "abckit/shared/constants/r2";
 import { Button } from "abckit/shadcn/button";
 import { Checkbox } from "abckit/shadcn/checkbox";
@@ -14,13 +13,13 @@ const props = defineProps({
 });
 const emit = defineEmits(["fileClick", "folderClick", "toggleSelection", "fileAction"]);
 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) return FILE_TYPE_ICONS.FOLDER;
@@ -72,8 +71,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>
@@ -102,7 +101,7 @@ function isSelected(fileId) {
               class="h-8 w-8 bg-background/80 backdrop-blur-sm"
               @click.stop
             >
-              <MoreVertical class="h-4 w-4" />
+              <Icon name="lucide:more-vertical" class="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">

package/dist/runtime/components/ui/storage/StorageSelectionBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { RotateCcw, Trash2 } from "lucide-vue-next";
+import { Icon } from "#components";
 import { Button } from "abckit/shadcn/button";
 const props = defineProps({
   selectedCount: { type: Number, required: true },
@@ -33,7 +33,7 @@ const emit = defineEmits(["toggle-selection-mode", "clear-selection", "select-al
       size="sm"
       @click="emit('restore-selected')"
     >
-      <RotateCcw class="mr-2 h-4 w-4" />
+      <Icon name="lucide:rotate-ccw" class="mr-2 h-4 w-4" />
       Geri Yükle ({{ selectedCount }})
     </Button>
     
@@ -43,7 +43,7 @@ const emit = defineEmits(["toggle-selection-mode", "clear-selection", "select-al
       size="sm"
       @click="emit('delete-selected')"
     >
-      <Trash2 class="mr-2 h-4 w-4" />
+      <Icon name="lucide:trash-2" class="mr-2 h-4 w-4" />
       {{ isTrash ? "Kal\u0131c\u0131 Olarak" : "" }} Sil ({{ selectedCount }})
     </Button>
   </div>