Update dependencies and refactor icon imports across the codebase

libs/ui/src/components/accordion.tsx

@@ -1,4 +1,4 @@
-import { CaretDown } from "@phosphor-icons/react";
+import { CaretDownIcon } from "@phosphor-icons/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -28,7 +28,7 @@ export const AccordionTrigger = forwardRef<
       {...props}
     >
       {children}
-      <CaretDown className="size-4 shrink-0 transition-transform duration-200" />
+      <CaretDownIcon className="size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

libs/ui/src/components/checkbox.tsx

@@ -1,4 +1,4 @@
-import { Check } from "@phosphor-icons/react";
+import { CheckIcon } from "@phosphor-icons/react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -16,7 +16,7 @@ export const Checkbox = forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check size={12} weight="bold" />
+      <CheckIcon size={12} weight="bold" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

libs/ui/src/components/combobox.tsx

@@ -1,4 +1,4 @@
-import { CaretDown, Check } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef, useState } from "react";
 
@@ -85,7 +85,7 @@ export const Combobox = forwardRef(
               {!props.value ||
                 (props.value.length === 0 && (props.selectPlaceholder ?? "Select an option"))}
             </span>
-            <CaretDown
+            <CaretDownIcon
               className={cn(
                 "ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
                 open && "rotate-180",
@@ -122,7 +122,7 @@ export const Combobox = forwardRef(
                       }
                     }}
                   >
-                    <Check
+                    <CheckIcon
                       className={cn(
                         "mr-2 size-4 opacity-0",
                         !props.multiple && props.value === option.value && "opacity-100",

libs/ui/src/components/command.tsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlass } from "@phosphor-icons/react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import { Command as CommandPrimitive } from "cmdk";
 import { forwardRef } from "react";
@@ -21,7 +21,7 @@ export const CommandInput = forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlass size={16} className="mr-1 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon size={16} className="mr-1 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(

libs/ui/src/components/context-menu.tsx

@@ -1,4 +1,4 @@
-import { CaretRight, Check } from "@phosphor-icons/react";
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -31,7 +31,7 @@ export const ContextMenuSubTrigger = forwardRef<
     {...props}
   >
     {children}
-    <CaretRight className="ml-auto size-4" />
+    <CaretRightIcon className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 
@@ -105,7 +105,7 @@ export const ContextMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check size={14} />
+        <CheckIcon size={14} />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -128,7 +128,7 @@ export const ContextMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check size={14} className="fill-current" />
+        <CheckIcon size={14} className="fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}

libs/ui/src/components/dialog.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -45,7 +45,7 @@ export const DialogContent = forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="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-secondary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground">
-        <X className="size-4" />
+        <XIcon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

libs/ui/src/components/dropdown-menu.tsx

@@ -1,4 +1,4 @@
-import { CaretRight, Check, DotOutline } from "@phosphor-icons/react";
+import { CaretRightIcon, CheckIcon, DotOutlineIcon } from "@phosphor-icons/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -31,7 +31,7 @@ export const DropdownMenuSubTrigger = forwardRef<
     {...props}
   >
     {children}
-    <CaretRight className="ml-auto size-4" />
+    <CaretRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 
@@ -111,7 +111,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -134,7 +134,7 @@ export const DropdownMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotOutline size={18} weight="fill" className="fill-current" />
+        <DotOutlineIcon size={18} weight="fill" className="fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

libs/ui/src/components/resizable-panel.tsx

@@ -1,4 +1,4 @@
-import { DotsSixVertical } from "@phosphor-icons/react";
+import { DotsSixVerticalIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import * as PanelPrimitive from "react-resizable-panels";
 
@@ -31,7 +31,7 @@ export const PanelResizeHandle = ({
     </div>
 
     <div className="pointer-events-none absolute inset-y-0 left-[-5px] z-50 flex items-center justify-center">
-      <DotsSixVertical size={14} opacity={0.75} />
+      <DotsSixVerticalIcon size={14} opacity={0.75} />
     </div>
   </PanelPrimitive.PanelResizeHandle>
 );

libs/ui/src/components/rich-input.tsx

@@ -1,30 +1,30 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
-  ArrowClockwise,
-  ArrowCounterClockwise,
-  Code as CodeIcon,
-  CodeBlock as CodeBlockIcon,
-  HighlighterCircle,
-  Image as ImageIcon,
-  KeyReturn,
-  LinkSimple,
-  ListBullets,
-  ListNumbers,
-  Minus,
-  Paragraph as ParagraphIcon,
-  TextAlignCenter,
-  TextAlignJustify,
-  TextAlignLeft,
-  TextAlignRight,
-  TextAUnderline,
-  TextB,
-  TextHOne,
-  TextHThree,
-  TextHTwo,
-  TextIndent,
-  TextItalic,
-  TextOutdent,
-  TextStrikethrough,
+  ArrowClockwiseIcon,
+  ArrowCounterClockwiseIcon,
+  CodeBlockIcon as CodeBlockIconImport,
+  CodeIcon as CodeIconImport,
+  HighlighterCircleIcon,
+  ImageIcon as ImageIconImport,
+  KeyReturnIcon,
+  LinkSimpleIcon,
+  ListBulletsIcon,
+  ListNumbersIcon,
+  MinusIcon,
+  ParagraphIcon as ParagraphIconImport,
+  TextAlignCenterIcon,
+  TextAlignJustifyIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
+  TextAUnderlineIcon,
+  TextBIcon,
+  TextHOneIcon,
+  TextHThreeIcon,
+  TextHTwoIcon,
+  TextIndentIcon,
+  TextItalicIcon,
+  TextOutdentIcon,
+  TextStrikethroughIcon,
 } from "@phosphor-icons/react";
 import { PopoverTrigger } from "@radix-ui/react-popover";
 import { cn } from "@reactive-resume/utils";
@@ -153,7 +153,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().toggleBold().run()}
           onPressedChange={() => editor.chain().focus().toggleBold().run()}
         >
-          <TextB />
+          <TextBIcon />
         </Toggle>
       </Tooltip>
 
@@ -165,7 +165,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleItalic().run()}
           onPressedChange={() => editor.chain().focus().toggleItalic().run()}
         >
-          <TextItalic />
+          <TextItalicIcon />
         </Toggle>
       </Tooltip>
 
@@ -177,7 +177,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleStrike().run()}
           onPressedChange={() => editor.chain().focus().toggleStrike().run()}
         >
-          <TextStrikethrough />
+          <TextStrikethroughIcon />
         </Toggle>
       </Tooltip>
 
@@ -189,7 +189,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
           onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
         >
-          <TextAUnderline />
+          <TextAUnderlineIcon />
         </Toggle>
       </Tooltip>
 
@@ -201,13 +201,13 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHighlight().run()}
           onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
         >
-          <HighlighterCircle />
+          <HighlighterCircleIcon />
         </Toggle>
       </Tooltip>
 
       <Tooltip content="Hyperlink">
         <Button type="button" size="sm" variant="ghost" className="px-2" onClick={setLink}>
-          <LinkSimple />
+          <LinkSimpleIcon />
         </Button>
       </Tooltip>
 
@@ -219,7 +219,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleCode().run()}
           onPressedChange={() => editor.chain().focus().toggleCode().run()}
         >
-          <CodeIcon />
+          <CodeIconImport />
         </Toggle>
       </Tooltip>
 
@@ -231,7 +231,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
           onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
         >
-          <CodeBlockIcon />
+          <CodeBlockIconImport />
         </Toggle>
       </Tooltip>
 
@@ -243,7 +243,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 1 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         >
-          <TextHOne />
+          <TextHOneIcon />
         </Toggle>
       </Tooltip>
 
@@ -255,7 +255,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 2 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         >
-          <TextHTwo />
+          <TextHTwoIcon />
         </Toggle>
       </Tooltip>
 
@@ -267,7 +267,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 3 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         >
-          <TextHThree />
+          <TextHThreeIcon />
         </Toggle>
       </Tooltip>
 
@@ -278,7 +278,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           pressed={editor.isActive("paragraph")}
           onPressedChange={() => editor.chain().focus().setParagraph().run()}
         >
-          <ParagraphIcon />
+          <ParagraphIconImport />
         </Toggle>
       </Tooltip>
 
@@ -290,7 +290,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("left").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
         >
-          <TextAlignLeft />
+          <TextAlignLeftIcon />
         </Toggle>
       </Tooltip>
 
@@ -302,7 +302,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("center").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
         >
-          <TextAlignCenter />
+          <TextAlignCenterIcon />
         </Toggle>
       </Tooltip>
 
@@ -314,7 +314,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("right").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
         >
-          <TextAlignRight />
+          <TextAlignRightIcon />
         </Toggle>
       </Tooltip>
 
@@ -326,7 +326,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("justify").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("justify").run()}
         >
-          <TextAlignJustify />
+          <TextAlignJustifyIcon />
         </Toggle>
       </Tooltip>
 
@@ -338,7 +338,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleBulletList().run()}
           onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
         >
-          <ListBullets />
+          <ListBulletsIcon />
         </Toggle>
       </Tooltip>
 
@@ -350,7 +350,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleOrderedList().run()}
           onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
         >
-          <ListNumbers />
+          <ListNumbersIcon />
         </Toggle>
       </Tooltip>
 
@@ -363,7 +363,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().liftListItem("listItem").run()}
           onClick={() => editor.chain().focus().liftListItem("listItem").run()}
         >
-          <TextOutdent />
+          <TextOutdentIcon />
         </Button>
       </Tooltip>
 
@@ -376,7 +376,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().sinkListItem("listItem").run()}
           onClick={() => editor.chain().focus().sinkListItem("listItem").run()}
         >
-          <TextIndent />
+          <TextIndentIcon />
         </Button>
       </Tooltip>
 
@@ -384,7 +384,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         <Tooltip content="Insert Image">
           <PopoverTrigger asChild>
             <Button type="button" size="sm" variant="ghost" className="px-2">
-              <ImageIcon />
+              <ImageIconImport />
             </Button>
           </PopoverTrigger>
         </Tooltip>
@@ -402,7 +402,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setHardBreak().run()}
           onClick={() => editor.chain().focus().setHardBreak().run()}
         >
-          <KeyReturn />
+          <KeyReturnIcon />
         </Button>
       </Tooltip>
 
@@ -415,7 +415,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setHorizontalRule().run()}
           onClick={() => editor.chain().focus().setHorizontalRule().run()}
         >
-          <Minus />
+          <MinusIcon />
         </Button>
       </Tooltip>
 
@@ -428,7 +428,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().undo()}
           onClick={() => editor.chain().focus().undo().run()}
         >
-          <ArrowCounterClockwise />
+          <ArrowCounterClockwiseIcon />
         </Button>
       </Tooltip>
 
@@ -441,7 +441,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().redo()}
           onClick={() => editor.chain().focus().redo().run()}
         >
-          <ArrowClockwise />
+          <ArrowClockwiseIcon />
         </Button>
       </Tooltip>
     </div>

libs/ui/src/components/select.tsx

@@ -1,4 +1,4 @@
-import { CaretUpDown, Check } from "@phosphor-icons/react";
+import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -23,7 +23,7 @@ export const SelectTrigger = forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretUpDown className="size-4 opacity-50" />
+      <CaretUpDownIcon className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -88,7 +88,7 @@ export const SelectItem = forwardRef<
   >
     <span className="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

libs/ui/src/components/sheet.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@reactive-resume/utils";
 import { type VariantProps } from "class-variance-authority";
@@ -50,7 +50,7 @@ export const SheetContent = forwardRef<
 
       {showClose && (
         <SheetPrimitive.Close className="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-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-          <X className="size-4" />
+          <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       )}

libs/ui/src/components/toast.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cn } from "@reactive-resume/utils";
 import { type VariantProps } from "class-variance-authority";
@@ -80,7 +80,7 @@ export const ToastClose = forwardRef<
     toast-close=""
     {...props}
   >
-    <X className="size-4" />
+    <XIcon className="size-4" />
   </ToastPrimitives.Close>
 ));