Integrate latest libraries with rebrand

Author: tannerlinsley

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { CaretDown, Check, X } from '@phosphor-icons/react'
-import { type Framework, type Library } from '~/libraries'
+import { type Framework } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import LibraryGridCard from '~/components/LibraryGridCard'
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
@@ -218,7 +218,7 @@ export function LibrariesOverlay({
                         className="h-full animate-library-card-reveal"
                         style={{ animationDelay: `${delay}ms` }}
                       >
-                        <LibraryGridCard library={library as Library} />
+                        <LibraryGridCard library={library} />
                       </div>
                     ))}
                   </div>

src/components/LibrariesOverlay.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { ArrowRight, CaretRight } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
-import type { Library } from '~/libraries'
+import type { PublicLibrarySlim } from '~/libraries'
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
 import { fallbackLibraryIcon, libraryIcons } from '~/libraries/icons'
 
@@ -29,7 +29,11 @@ const categoryHoverBorder: Record<LibraryCategory, string> = {
   tooling: 'hover:border-ds-neutral-300/60',
 }
 
-export default function LibraryGridCard({ library }: { library: Library }) {
+export default function LibraryGridCard({
+  library,
+}: {
+  library: PublicLibrarySlim
+}) {
   const category = libraryCategories[library.id] ?? 'tooling'
   const IconComponent = libraryIcons[library.id] ?? fallbackLibraryIcon
   const name = library.name.replace(/^TanStack\s+/, '')

src/components/LibraryGridCard.tsx

@@ -190,7 +190,7 @@ const NAV_GROUPS = [
             label: 'Release Notes',
             to: '/blog',
             description: 'The latest releases and changelog.',
-            icon: Sparkle,
+            icon: Sparkles,
           },
         ],
       },

src/components/Navbar.tsx

@@ -681,6 +681,7 @@ export function Breadcrumbs({
 }
 
 export { PalmSpinner } from './PalmSpinner'
+export { PixelSpinner } from './PixelSpinner'
 export {
   StatsSection,
   type StatsPage,

src/components/ds/ui/index.tsx

@@ -3,16 +3,16 @@ import { Link, useParams } from '@tanstack/react-router'
 import {
   ArrowRight,
   BookOpen,
-  Boxes,
-  Braces,
+  Cube as Boxes,
+  BracketsCurly as Braces,
   Check,
-  CircleGauge,
+  Gauge as CircleGauge,
   Highlighter,
-  Layers3,
+  Stack as Layers3,
   Palette,
-  ScanText,
-  Zap,
-} from 'lucide-react'
+  Scan as ScanText,
+  Lightning as Zap,
+} from '@phosphor-icons/react'
 
 import { Footer } from '~/components/Footer'
 import { LandingCommunitySection } from '~/components/LandingCommunitySection'

src/components/landing/HighlightLanding.tsx

@@ -8,21 +8,21 @@ import { streamingMarkdownExtension } from '@tanstack/markdown/extensions/stream
 import {
   ArrowRight,
   BookOpen,
-  Braces,
+  BracketsCurly as Braces,
   Check,
-  CheckCircle2,
+  CheckCircle as CheckCircle2,
   Copy,
   FileText,
   Highlighter,
-  LockKeyhole,
-  PackageOpen,
+  LockKey as LockKeyhole,
+  Package as PackageOpen,
   Pause,
   Play,
   Radio,
-  RotateCcw,
+  ArrowCounterClockwise as RotateCcw,
   ShieldCheck,
   X,
-} from 'lucide-react'
+} from '@phosphor-icons/react'
 
 import { Footer } from '~/components/Footer'
 import { LandingCommunitySection } from '~/components/LandingCommunitySection'

src/components/landing/MarkdownLanding.tsx

@@ -1,4 +1,4 @@
-import { Download, List } from 'lucide-react'
+import { Download, List } from '@phosphor-icons/react'
 import { Tooltip } from '~/components/Tooltip'
 
 const disabledChartActionButtonStyles =

src/components/npm-stats/DisabledChartActions.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import {
   Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  MoreHorizontal,
+  CaretDown as ChevronDown,
+  CaretLeft as ChevronLeft,
+  CaretRight as ChevronRight,
+  CaretDoubleLeft as ChevronsLeft,
+  CaretDoubleRight as ChevronsRight,
+  DotsThree as MoreHorizontal,
   Pause,
   Play,
-} from 'lucide-react'
+} from '@phosphor-icons/react'
 import {
   DropdownMenu,
   DropdownMenuContent,

src/components/npm-stats/LatestBucketNavigator.tsx

@@ -3,7 +3,13 @@ import { createPortal } from 'react-dom'
 import * as Plot from '@observablehq/plot'
 import * as d3 from 'd3'
 import { GIFEncoder, applyPalette, quantize } from 'gifenc'
-import { Check, Code2, Copy, Download, List } from 'lucide-react'
+import {
+  Check,
+  Code as Code2,
+  Copy,
+  Download,
+  List,
+} from '@phosphor-icons/react'
 import {
   DropdownMenu,
   DropdownMenuContent,