feat(ui): add support for phosphor icons

apps/v4/app/(create)/components/icon-library-picker.tsx

@@ -39,6 +39,12 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
 const PREVIEW_ICONS = {
   lucide: [
     "CopyIcon",
@@ -88,6 +94,22 @@ const PREVIEW_ICONS = {
     "ArrowDown01Icon",
     "ArrowRight01Icon",
   ],
+  phosphor: [
+    "CopyIcon",
+    "WarningCircleIcon",
+    "TrashIcon",
+    "ShareIcon",
+    "BagIcon",
+    "DotsThreeIcon",
+    "SpinnerIcon",
+    "PlusIcon",
+    "MinusIcon",
+    "ArrowLeftIcon",
+    "ArrowRightIcon",
+    "CheckIcon",
+    "CaretDownIcon",
+    "CaretRightIcon",
+  ],
 }
 
 const logos = {
@@ -154,6 +176,24 @@ const logos = {
       ></path>
     </svg>
   ),
+  phosphor: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+    >
+      <path fill="none" d="M0 0h32v32H0z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
+      />
+    </svg>
+  ),
 }
 
 export function IconLibraryPicker({
@@ -259,7 +299,9 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
       ? IconLucide
       : iconLibrary === "tabler"
         ? IconTabler
-        : IconHugeicons
+        : iconLibrary === "hugeicons"
+          ? IconHugeicons
+          : IconPhosphor
 
   return (
     <Suspense

apps/v4/app/(create)/components/icon-placeholder.tsx

@@ -24,6 +24,12 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
 export function IconPlaceholder({
   ...props
 }: {
@@ -43,6 +49,9 @@ export function IconPlaceholder({
       {iconLibrary === "hugeicons" && (
         <IconHugeicons name={iconName} {...props} />
       )}
+      {iconLibrary === "phosphor" && (
+        <IconPhosphor name={iconName} {...props} />
+      )}
     </Suspense>
   )
 }

apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx

@@ -117,6 +117,7 @@ function DropdownMenuCheckboxes() {
               lucide="UserIcon"
               tabler="IconUser"
               hugeicons="UserIcon"
+              phosphor="UserIcon"
             />
             Profile
           </DropdownMenuItem>
@@ -125,6 +126,7 @@ function DropdownMenuCheckboxes() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -133,6 +135,7 @@ function DropdownMenuCheckboxes() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
             />
             Settings
           </DropdownMenuItem>
@@ -167,6 +170,7 @@ function DropdownMenuCheckboxes() {
               lucide="LogOutIcon"
               tabler="IconLogout"
               hugeicons="LogoutIcon"
+              phosphor="SignOutIcon"
             />
             Sign Out
           </DropdownMenuItem>
@@ -222,6 +226,7 @@ function DropdownMenuWithAvatar() {
             lucide="ChevronsUpDownIcon"
             tabler="IconChevronsUpDown"
             hugeicons="ChevronUpDownIcon"
+            phosphor="CaretUpDownIcon"
             className="text-muted-foreground ml-auto"
           />
         </Button>
@@ -251,6 +256,7 @@ function DropdownMenuWithAvatar() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -262,6 +268,7 @@ function DropdownMenuWithAvatar() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
             />
             Account
           </DropdownMenuItem>
@@ -270,6 +277,7 @@ function DropdownMenuWithAvatar() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -278,6 +286,7 @@ function DropdownMenuWithAvatar() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
             />
             Notifications
           </DropdownMenuItem>
@@ -288,6 +297,7 @@ function DropdownMenuWithAvatar() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
           />
           Sign Out
         </DropdownMenuItem>
@@ -341,6 +351,7 @@ function DropdownMenuAvatarOnly() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -352,6 +363,7 @@ function DropdownMenuAvatarOnly() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
             />
             Account
           </DropdownMenuItem>
@@ -360,6 +372,7 @@ function DropdownMenuAvatarOnly() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -368,6 +381,7 @@ function DropdownMenuAvatarOnly() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
             />
             Notifications
           </DropdownMenuItem>
@@ -378,6 +392,7 @@ function DropdownMenuAvatarOnly() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
           />
           Sign Out
         </DropdownMenuItem>
@@ -395,6 +410,7 @@ function DropdownMenuIconColor() {
             lucide="MoreHorizontalIcon"
             tabler="IconDots"
             hugeicons="MoreHorizontalCircle01Icon"
+            phosphor="DotsThreeOutlineIcon"
           />
           <span className="sr-only">Toggle menu</span>
         </Button>
@@ -406,6 +422,7 @@ function DropdownMenuIconColor() {
               lucide="PencilIcon"
               tabler="IconPencil"
               hugeicons="EditIcon"
+              phosphor="PencilIcon"
             />
             Edit
           </DropdownMenuItem>
@@ -414,6 +431,7 @@ function DropdownMenuIconColor() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="ShareIcon"
+              phosphor="ShareIcon"
             />
             Share
           </DropdownMenuItem>
@@ -423,6 +441,7 @@ function DropdownMenuIconColor() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="DeleteIcon"
+              phosphor="TrashIcon"
             />
             Delete
           </DropdownMenuItem>

apps/v4/package.json

@@ -30,6 +30,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@hugeicons/core-free-icons": "^1.2.1",
     "@hugeicons/react": "^1.1.1",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accessible-icon": "^1.1.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.5",

apps/v4/registry/bases/base/blocks/chatgpt.tsx

@@ -118,6 +118,7 @@ function PromptForm() {
                     lucide="PlusIcon"
                     tabler="IconPlus"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                 </TooltipTrigger>
                 <TooltipContent>
@@ -131,6 +132,7 @@ function PromptForm() {
                       lucide="PaperclipIcon"
                       tabler="IconPaperclip"
                       hugeicons="AttachmentIcon"
+                      phosphor="PaperclipIcon"
                     />
                     Add photos & files
                   </DropdownMenuItem>
@@ -139,6 +141,7 @@ function PromptForm() {
                       lucide="SparklesIcon"
                       tabler="IconSparkles"
                       hugeicons="SparklesIcon"
+                      phosphor="SparkleIcon"
                     />
                     Deep research
                   </DropdownMenuItem>
@@ -147,6 +150,7 @@ function PromptForm() {
                       lucide="ShoppingBagIcon"
                       tabler="IconShoppingBag"
                       hugeicons="ShoppingBag01Icon"
+                      phosphor="BagIcon"
                     />
                     Shopping research
                   </DropdownMenuItem>
@@ -155,6 +159,7 @@ function PromptForm() {
                       lucide="WandIcon"
                       tabler="IconWand"
                       hugeicons="MagicWand05Icon"
+                      phosphor="MagicWandIcon"
                     />
                     Create image
                   </DropdownMenuItem>
@@ -166,6 +171,7 @@ function PromptForm() {
                             lucide="MousePointerIcon"
                             tabler="IconPointer"
                             hugeicons="Cursor01Icon"
+                            phosphor="HandPointingIcon"
                           />
                           Agent mode
                         </DropdownMenuItem>
@@ -185,6 +191,7 @@ function PromptForm() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     More
                   </DropdownMenuSubTrigger>
@@ -196,6 +203,7 @@ function PromptForm() {
                             lucide="ShareIcon"
                             tabler="IconShare"
                             hugeicons="Share03Icon"
+                            phosphor="ShareIcon"
                           />
                           Add sources
                         </DropdownMenuItem>
@@ -204,6 +212,7 @@ function PromptForm() {
                             lucide="BookOpenIcon"
                             tabler="IconBook"
                             hugeicons="BookIcon"
+                            phosphor="BookOpenIcon"
                           />
                           Study and learn
                         </DropdownMenuItem>
@@ -212,6 +221,7 @@ function PromptForm() {
                             lucide="GlobeIcon"
                             tabler="IconWorld"
                             hugeicons="GlobalIcon"
+                            phosphor="GlobeIcon"
                           />
                           Web search
                         </DropdownMenuItem>
@@ -220,6 +230,7 @@ function PromptForm() {
                             lucide="PenToolIcon"
                             tabler="IconPencil"
                             hugeicons="PenIcon"
+                            phosphor="PencilIcon"
                           />
                           Canvas
                         </DropdownMenuItem>
@@ -244,6 +255,7 @@ function PromptForm() {
                   lucide="AudioLinesIcon"
                   tabler="IconMicrophone"
                   hugeicons="AudioWave01Icon"
+                  phosphor="MicrophoneIcon"
                 />
               </TooltipTrigger>
               <TooltipContent>Dictate</TooltipContent>
@@ -257,6 +269,7 @@ function PromptForm() {
                 lucide="ArrowUpIcon"
                 tabler="IconArrowUp"
                 hugeicons="ArrowUp02Icon"
+                phosphor="ArrowUpIcon"
               />
             </InputGroupButton>
           </InputGroupAddon>
@@ -281,6 +294,7 @@ function ModelSelector() {
             lucide="ChevronDownIcon"
             tabler="IconChevronDown"
             hugeicons="ArrowDown01Icon"
+            phosphor="CaretDownIcon"
             className="text-muted-foreground size-4"
           />
         </DropdownMenuTrigger>
@@ -435,6 +449,7 @@ function CreateProjectForm() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="Settings01Icon"
+                  phosphor="GearIcon"
                 />
                 <span className="sr-only">Memory</span>
               </DropdownMenuTrigger>
@@ -509,6 +524,7 @@ function CreateProjectForm() {
                         lucide="FolderIcon"
                         tabler="IconFolder"
                         hugeicons="FolderIcon"
+                        phosphor="FolderIcon"
                         className="text-(--color)"
                       />
                     </PopoverTrigger>
@@ -570,6 +586,7 @@ function CreateProjectForm() {
                       lucide="CircleCheckIcon"
                       tabler="IconCircleCheck"
                       hugeicons="CheckmarkCircle02Icon"
+                      phosphor="CheckCircleIcon"
                       data-icon="inline-start"
                       className="hidden group-data-[checked=true]/badge:inline"
                     />
@@ -584,6 +601,7 @@ function CreateProjectForm() {
                   lucide="LightbulbIcon"
                   tabler="IconBulb"
                   hugeicons="BulbIcon"
+                  phosphor="LightbulbIcon"
                 />
                 <AlertDescription className="text-xs">
                   Projects keep chats, files, and custom instructions in one