Update dependencies and replace radix-icons-svelte with lucide-svelte

.gitignore

@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .unlighthouse
+.vercel

package.json

@@ -49,7 +49,6 @@
 		"lucide-svelte": "^0.367.0",
 		"mode-watcher": "^0.3.0",
 		"pocketbase": "^0.21.2",
-		"radix-icons-svelte": "^1.2.1",
 		"svelte-headless-table": "^0.18.2",
 		"svelte-sonner": "^0.3.22",
 		"tailwind-merge": "^2.3.0",

pnpm-lock.yaml

@@ -23,9 +23,6 @@ dependencies:
   pocketbase:
     specifier: ^0.21.2
     version: 0.21.2
-  radix-icons-svelte:
-    specifier: ^1.2.1
-    version: 1.2.1
   svelte-headless-table:
     specifier: ^0.18.2
     version: 0.18.2(svelte@4.2.15)
@@ -4947,10 +4944,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /radix-icons-svelte@1.2.1:
-    resolution: {integrity: sha512-svmiMd0ocpdTm9cvAz0klcZpnh639lVctj6psQiawd4pYalVzOG4cX+JizAgRckyTAsRVdzObP7D2EBrSfdghA==}
-    dev: false
-
   /radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
     dev: true

src/lib/components/site/icons/index.ts

@@ -1,8 +1,10 @@
 import type { Icon as LucideIcon } from 'lucide-svelte';
 import { ArrowRight, Loader2 } from 'lucide-svelte';
-import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
 import Logo from './logo.svelte';
 import Svelte from './svelte.svelte';
+import GitHubLogo from './github.svelte';
+import VercelLogo from './vercel.svelte';
+import LinkedInLogo from './linkedin.svelte';
 import MicrosoftLogo from './microsoft.svelte';
 import AppleLogo from './apple.svelte';
 import GitLabLogo from './gitlab.svelte';
@@ -17,11 +19,11 @@ export type Icon = LucideIcon;
 
 export const Icons = {
 	logo: Logo,
-	gitHub: GithubLogo,
+	gitHub: GitHubLogo,
 	microsoft: MicrosoftLogo,
 	svelte: Svelte,
 	vercel: VercelLogo,
-	linkedIn: LinkedinLogo,
+	linkedIn: LinkedInLogo,
 	spinner: Loader2,
 	arrowRight: ArrowRight,
 	apple: AppleLogo,

src/lib/components/site/icons/linkedin.svelte

@@ -0,0 +1,14 @@
+<svg
+	width="15"
+	height="15"
+	viewBox="0 0 15 15"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M2 1C1.44772 1 1 1.44772 1 2V13C1 13.5523 1.44772 14 2 14H13C13.5523 14 14 13.5523 14 13V2C14 1.44772 13.5523 1 13 1H2ZM3.05 6H4.95V12H3.05V6ZM5.075 4.005C5.075 4.59871 4.59371 5.08 4 5.08C3.4063 5.08 2.925 4.59871 2.925 4.005C2.925 3.41129 3.4063 2.93 4 2.93C4.59371 2.93 5.075 3.41129 5.075 4.005ZM12 8.35713C12 6.55208 10.8334 5.85033 9.67449 5.85033C9.29502 5.83163 8.91721 5.91119 8.57874 6.08107C8.32172 6.21007 8.05265 6.50523 7.84516 7.01853H7.79179V6.00044H6V12.0047H7.90616V8.8112C7.8786 8.48413 7.98327 8.06142 8.19741 7.80987C8.41156 7.55832 8.71789 7.49825 8.95015 7.46774H9.02258C9.62874 7.46774 10.0786 7.84301 10.0786 8.78868V12.0047H11.9847L12 8.35713Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	></path></svg
+>

src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { ChevronRight } from 'radix-icons-svelte';
+	import { ChevronRight } from 'lucide-svelte';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 

src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { ChevronLeft } from 'radix-icons-svelte';
+	import { ChevronLeft } from 'lucide-svelte';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 

src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import { Check, Minus } from 'radix-icons-svelte';
+	import { Check, Minus } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	type $$Props = CheckboxPrimitive.Props;

src/lib/components/ui/command/command-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'cmdk-sv';
-	import { MagnifyingGlass } from 'radix-icons-svelte';
+	import { Search } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.InputProps;
@@ -11,7 +11,7 @@
 </script>
 
 <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
-	<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
 			'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',

src/lib/components/ui/dialog/dialog-content.svelte

@@ -2,7 +2,7 @@
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import * as Dialog from '.';
 	import { cn, flyAndScale } from '$lib/utils';
-	import { Cross2 } from 'radix-icons-svelte';
+	import { X } from 'lucide-svelte';
 
 	type $$Props = DialogPrimitive.ContentProps;
 
@@ -29,7 +29,7 @@
 		<DialogPrimitive.Close
 			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"
 		>
-			<Cross2 class="h-4 w-4" />
+			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils';
-	import { Check } from 'radix-icons-svelte';
+	import { Check } from 'lucide-svelte';
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils';
-	import { DotFilled } from 'radix-icons-svelte';
+	import { Dot } from 'lucide-svelte';
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
@@ -28,7 +28,7 @@
 >
 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 		<DropdownMenuPrimitive.RadioIndicator>
-			<DotFilled class="h-4 w-4 fill-current" />
+			<Dot class="h-4 w-4 fill-current" />
 		</DropdownMenuPrimitive.RadioIndicator>
 	</span>
 	<slot />

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils';
-	import { ChevronRight } from 'radix-icons-svelte';
+	import { ChevronRight } from 'lucide-svelte';
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;

src/lib/components/ui/radio-group/radio-group-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { Check } from 'radix-icons-svelte';
+	import { Check } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	type $$Props = RadioGroupPrimitive.ItemProps & {

src/lib/components/ui/select/select-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import { Check } from 'radix-icons-svelte';
+	import { Check } from 'lucide-svelte';
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = Required<SelectPrimitive.ItemEvents>;

src/lib/components/ui/select/select-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import { CaretSort } from 'radix-icons-svelte';
+	import { ArrowUpDown } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	type $$Props = SelectPrimitive.TriggerProps;
@@ -18,5 +18,5 @@
 	{...$$restProps}
 >
 	<slot />
-	<CaretSort class="h-4 w-4 opacity-50" />
+	<ArrowUpDown class="h-4 w-4 opacity-50" />
 </SelectPrimitive.Trigger>

src/lib/components/ui/sheet/sheet-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from 'bits-ui';
 	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from '.';
-	import { Cross2 } from 'radix-icons-svelte';
+	import { Cross2 } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 	import { fly } from 'svelte/transition';
 

src/routes/(auth)/auth/(components)/oauth2-form.svelte

@@ -6,7 +6,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { ChevronDown } from 'radix-icons-svelte';
+	import { ChevronDown } from 'lucide-svelte';
 
 	export let isLoading = false;
 	/* eslint-disable  @typescript-eslint/no-explicit-any */

src/routes/(auth)/reset-password/+page.svelte

@@ -5,7 +5,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { cn } from '$lib/utils';
-	import { CheckCircled } from 'radix-icons-svelte';
+	import { CircleCheck } from 'lucide-svelte';
 	import * as Alert from '$lib/components/ui/alert';
 
 	let isLoading = false;
@@ -54,7 +54,7 @@
 				</div>
 				{#if form?.success}
 					<Alert.Root variant="default" class="mt-2">
-						<CheckCircled class="h-4 w-4" />
+						<CircleCheck class="h-4 w-4" />
 						<Alert.Description>An email has been sent to reset your password.</Alert.Description>
 					</Alert.Root>
 				{/if}

src/routes/(user)/dashboard/(components)/data-table-column-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowDown, ArrowUp, CaretSort } from 'radix-icons-svelte';
+	import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -43,7 +43,7 @@
 					{:else if props.sort.order === 'asc'}
 						<ArrowUp class="ml-2 h-4 w-4" />
 					{:else}
-						<CaretSort class="ml-2 h-4 w-4" />
+						<ArrowUpDown class="ml-2 h-4 w-4" />
 					{/if}
 				</Button>
 			</DropdownMenu.Trigger>

src/routes/(user)/dashboard/(components)/data-table-faceted-filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PlusCircled, Check } from 'radix-icons-svelte';
+	import { CirclePlus, Check } from 'lucide-svelte';
 	import * as Command from '$lib/components/ui/command';
 	import * as Popover from '$lib/components/ui/popover';
 	import { Button } from '$lib/components/ui/button';
@@ -26,7 +26,7 @@
 <Popover.Root bind:open>
 	<Popover.Trigger asChild let:builder>
 		<Button builders={[builder]} variant="outline" size="sm" class="h-8 border-dashed">
-			<PlusCircled class="mr-2 h-4 w-4" />
+			<CirclePlus class="mr-2 h-4 w-4" />
 			{title}
 
 			{#if filterValues.length > 0}

src/routes/(user)/dashboard/(components)/data-table-pagination.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { ChevronRight, ChevronLeft, DoubleArrowRight, DoubleArrowLeft } from 'radix-icons-svelte';
+	import { ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft } from 'lucide-svelte';
 	import * as Select from '$lib/components/ui/select';
 	import type { Ticket } from '../(data)/schemas';
 	import type { AnyPlugins } from 'svelte-headless-table/plugins';
@@ -52,7 +52,7 @@
 				disabled={!$hasPreviousPage}
 			>
 				<span class="sr-only">Go to first page</span>
-				<DoubleArrowLeft size={15} />
+				<ChevronsLeft size={15} />
 			</Button>
 			<Button
 				variant="outline"
@@ -79,7 +79,7 @@
 				disabled={!$hasNextPage}
 			>
 				<span class="sr-only">Go to last page</span>
-				<DoubleArrowRight size={15} />
+				<ChevronsRight size={15} />
 			</Button>
 		</div>
 	</div>

src/routes/(user)/dashboard/(components)/data-table-row-actions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DotsHorizontal } from 'radix-icons-svelte';
+	import { Ellipsis } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { labels } from '../(data)/data';
@@ -16,7 +16,7 @@
 			builders={[builder]}
 			class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
 		>
-			<DotsHorizontal class="h-4 w-4" />
+			<Ellipsis class="h-4 w-4" />
 			<span class="sr-only">Open menu</span>
 		</Button>
 	</DropdownMenu.Trigger>

src/routes/(user)/dashboard/(components)/data-table-toolbar.svelte

@@ -3,7 +3,7 @@
 	import { DataTableFacetedFilter, DataTableViewOptions } from '.';
 	import type { Ticket } from '../(data)/schemas';
 	import Button from '$lib/components/ui/button/button.svelte';
-	import { Cross2 } from 'radix-icons-svelte';
+	import { X } from 'lucide-svelte';
 	import { statuses, priorities } from '../(data)/data';
 	import type { Writable } from 'svelte/store';
 	import type { TableViewModel } from 'svelte-headless-table';
@@ -60,7 +60,7 @@
 				class="h-8 px-2 lg:px-3"
 			>
 				Reset
-				<Cross2 class="ml-2 h-4 w-4" />
+				<X class="ml-2 h-4 w-4" />
 			</Button>
 		{/if}
 	</div>

src/routes/(user)/dashboard/(components)/data-table-view-options.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MixerHorizontal } from 'radix-icons-svelte';
+	import { SlidersHorizontal } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import type { Ticket } from '../(data)/schemas';
@@ -24,7 +24,7 @@
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button variant="outline" size="sm" class="ml-auto hidden h-8 lg:flex" builders={[builder]}>
-			<MixerHorizontal class="mr-2 h-4 w-4" />
+			<SlidersHorizontal class="mr-2 h-4 w-4" />
 			View
 		</Button>
 	</DropdownMenu.Trigger>

src/routes/(user)/dashboard/(data)/data.ts

@@ -2,12 +2,12 @@ import {
 	ArrowDown,
 	ArrowRight,
 	ArrowUp,
-	CheckCircled,
+	CircleCheck,
 	Circle,
-	CrossCircled,
-	QuestionMarkCircled,
-	Stopwatch
-} from 'radix-icons-svelte';
+	CircleX,
+	CircleHelp,
+	Timer
+} from 'lucide-svelte';
 
 export const labels = [
 	{
@@ -28,7 +28,7 @@ export const statuses = [
 	{
 		value: 'backlog',
 		label: 'Backlog',
-		icon: QuestionMarkCircled
+		icon: CircleHelp
 	},
 	{
 		value: 'todo',
@@ -38,17 +38,17 @@ export const statuses = [
 	{
 		value: 'in progress',
 		label: 'In Progress',
-		icon: Stopwatch
+		icon: Timer
 	},
 	{
 		value: 'done',
 		label: 'Done',
-		icon: CheckCircled
+		icon: CircleCheck
 	},
 	{
 		value: 'canceled',
 		label: 'Canceled',
-		icon: CrossCircled
+		icon: CircleX
 	}
 ];