Removed default lucide icons and updated some packages

components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
 import { cn } from "~/lib/utils"
-import { MoreHorizontal } from "lucide-vue-next"
+import { PhArrowsHorizontal } from "@phosphor-icons/vue";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class="size-4" />
+      <PhArrowsHorizontal class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
 import { cn } from "~/lib/utils"
-import { ChevronRight } from "lucide-vue-next"
+import { PhCaretRight } from "@phosphor-icons/vue";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:w-3 [&>svg]:h-3', props.class)"
   >
     <slot>
-      <ChevronRight />
+      <PhCaretRight />
     </slot>
   </li>
 </template>

components/ui/checkbox/Checkbox.vue

@@ -2,8 +2,8 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue"
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "radix-vue"
-import { Check } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<CheckboxRootEmits>()
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
-        <Check class="size-4" />
+        <PhCheck class="size-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

components/ui/command/CommandInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
-import { Search } from "lucide-vue-next"
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
 import { cn } from "~/lib/utils"
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 defineOptions({
   inheritAttrs: false
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <Search class="mr-2 size-4 shrink-0 opacity-50" />
+    <PhMagnifyingGlass class="mr-2 size-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus

components/ui/dialog/DialogContent.vue

@@ -9,8 +9,8 @@ import {
   DialogPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { X } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden 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"
       >
-        <X class="w-4 h-4" />
+        <PhX class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

components/ui/dialog/DialogScrollContent.vue

@@ -9,8 +9,8 @@ import {
   DialogPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { X } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
@@ -55,7 +55,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <DialogClose
           class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class="w-4 h-4" />
+          <PhX class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -7,8 +7,8 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits
 } from "radix-vue"
-import { Check } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <PhCheck class="size-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -7,8 +7,8 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits
 } from "radix-vue"
-import { Circle } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCircle } from "@phosphor-icons/vue";
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
 
@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Circle class="h-2 w-2 fill-current" />
+        <PhCircle class="size-2 text-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/pagination/PaginationEllipsis.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationEllipsis, type PaginationEllipsisProps } from "radix-vue"
-import { MoreHorizontal } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhArrowsHorizontal } from "@phosphor-icons/vue";
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
 
@@ -16,10 +16,10 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis
     v-bind="delegatedProps"
-    :class="cn('w-9 h-9 flex items-center justify-center', props.class)"
+    :class="cn('size-9 flex items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal />
+      <PhArrowsHorizontal />
     </slot>
   </PaginationEllipsis>
 </template>

components/ui/pagination/PaginationFirst.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationFirst, type PaginationFirstProps } from "radix-vue"
-import { ChevronsLeft } from "lucide-vue-next"
 import { Button } from "~/components/ui/button"
 import { cn } from "~/lib/utils"
+import { PhCaretDoubleLeft } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationFirstProps & { class?: HTMLAttributes["class"] }>(),
@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
   <PaginationFirst v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronsLeft class="size-4" />
+        <PhCaretDoubleLeft class="size-4" />
       </slot>
     </Button>
   </PaginationFirst>

components/ui/pagination/PaginationLast.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationLast, type PaginationLastProps } from "radix-vue"
-import { ChevronsRight } from "lucide-vue-next"
 import { Button } from "~/components/ui/button"
 import { cn } from "~/lib/utils"
+import { PhCaretDoubleRight } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationLastProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronsRight class="size-4" />
+        <PhCaretDoubleRight class="size-4" />
       </slot>
     </Button>
   </PaginationLast>

components/ui/pagination/PaginationNext.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationNext, type PaginationNextProps } from "radix-vue"
-import { ChevronRight } from "lucide-vue-next"
 import { Button } from "~/components/ui/button"
 import { cn } from "~/lib/utils"
+import { PhCaretRight } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationNextProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRight class="size-4" />
+        <PhCaretRight class="size-4" />
       </slot>
     </Button>
   </PaginationNext>

components/ui/pagination/PaginationPrev.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationPrev, type PaginationPrevProps } from "radix-vue"
-import { ChevronLeft } from "lucide-vue-next"
 import { Button } from "~/components/ui/button"
 import { cn } from "~/lib/utils"
+import { PhCaretLeft } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationPrevProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeft class="size-4" />
+        <PhCaretLeft class="size-4" />
       </slot>
     </Button>
   </PaginationPrev>

components/ui/select/SelectItem.vue

@@ -7,8 +7,8 @@ import {
   SelectItemText,
   useForwardProps
 } from "radix-vue"
-import { Check } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
@@ -31,9 +31,9 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <Check class="size-4" />
+        <PhCheck class="size-4" />
       </SelectItemIndicator>
     </span>
 

components/ui/select/SelectScrollDownButton.vue

@@ -5,8 +5,8 @@ import {
   type SelectScrollDownButtonProps,
   useForwardProps
 } from "radix-vue"
-import { ChevronDown } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCaretDown } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
 
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronDown class="size-4" />
+      <PhCaretDown class="size-4" />
     </slot>
   </SelectScrollDownButton>
 </template>

components/ui/select/SelectScrollUpButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from "radix-vue"
-import { ChevronUp } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCaretUp } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
 
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronUp class="size-4" />
+      <PhCaretUp class="size-4" />
     </slot>
   </SelectScrollUpButton>
 </template>

components/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from "radix-vue"
-import { ChevronDown } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhCaretDown } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>()
 
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50" />
+      <PhCaretDown class="size-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

components/ui/tags-input/TagsInputItemDelete.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from "radix-vue"
-import { X } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
 
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn('flex rounded bg-transparent mr-1', props.class)"
   >
     <slot>
-      <X class="w-4 h-4" />
+      <PhX class="size-4" />
     </slot>
   </TagsInputItemDelete>
 </template>

components/ui/toast/ToastClose.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { ToastClose, type ToastCloseProps } from "radix-vue"
-import { X } from "lucide-vue-next"
 import { cn } from "~/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes["class"]
@@ -17,6 +17,6 @@ const delegatedProps = computed(() => {
 
 <template>
   <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600', props.class)">
-    <X class="size-4" />
+    <PhX class="size-4" />
   </ToastClose>
 </template>

package.json

@@ -25,12 +25,12 @@
     "@vueuse/nuxt": "^13.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-vue-next": "^0.488.0",
+    "lucide-vue-next": "^0.503.0",
     "luxon": "^3.6.1",
     "nuxt": "^3.16.2",
     "pinia": "^3.0.2",
     "radix-vue": "^1.9.17",
-    "shadcn-nuxt": "^2.0.1",
+    "shadcn-nuxt": "^2.1.0",
     "sortablejs": "^1.15.6",
     "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
@@ -44,15 +44,15 @@
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@stylistic/eslint-plugin-js": "^4.2.0",
     "@types/luxon": "^3.6.2",
-    "@typescript-eslint/eslint-plugin": "^8.30.1",
-    "@typescript-eslint/parser": "^8.30.1",
-    "eslint": "^9.24.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
+    "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-vue": "^10.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "sass": "^1.86.3",
+    "sass": "^1.87.0",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
     "wrangler": "^4.12.0"