docs: use lucide-react for RAC example's icons (#8516)

* use lucide-react for RAC example's icons

* up contrast in CheckCircle in shipping-radio example

* update icon in image-grid example

* improve shopping-list example

Author: reidbarber

packages/react-aria-components/docs/examples/action-menu.mdx

@@ -39,13 +39,13 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {MenuTrigger, Button, Popover, Menu, MenuItem, Separator} from 'react-aria-components';
 import type {MenuItemProps} from 'react-aria-components';
-import RailIcon from '@spectrum-icons/workflow/Rail';
+import {Menu as MenuIcon} from 'lucide-react';
 
 function MenuExample() {
   return (
     <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
       <MenuTrigger>
-        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"><RailIcon size="S" /></Button>
+        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"><MenuIcon className="w-4 h-4" /></Button>
         <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
           <Menu className="outline-hidden">
             <ActionItem id="new">New…</ActionItem>

packages/react-aria-components/docs/examples/datepicker.mdx

@@ -43,9 +43,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {DatePicker, Label, Group, Heading, DateInput, DateSegment, Button, Popover, Dialog, Calendar, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell} from 'react-aria-components';
 import type {ButtonProps, PopoverProps} from 'react-aria-components';
-import ChevronUpDownIcon from '@spectrum-icons/workflow/ChevronUpDown';
-import ChevronLeftIcon from '@spectrum-icons/workflow/ChevronLeft';
-import ChevronRightIcon from '@spectrum-icons/workflow/ChevronRight';
+import {ChevronLeft, ChevronRight, ChevronsUpDown} from 'lucide-react';
 
 function DatePickerExample() {
   return (
@@ -57,16 +55,16 @@ function DatePickerExample() {
             {(segment) => <DateSegment segment={segment} className="px-0.5 tabular-nums outline-hidden rounded-xs focus:bg-violet-700 focus:text-white caret-transparent placeholder-shown:italic" />}
           </DateInput>
           <Button className="outline-hidden px-3 flex items-center text-gray-700 transition border-0 border-solid border-l border-l-purple-200 bg-transparent rounded-r-lg pressed:bg-purple-100 focus-visible:ring-2 ring-black">
-            <ChevronUpDownIcon size="XS" />
+            <ChevronsUpDown className="w-4 h-4" />
           </Button>
         </Group>
         <MyPopover>
           <Dialog className="p-6 text-gray-600">
             <Calendar>
               <header className="flex items-center gap-1 pb-4 px-1 font-serif w-full">
                 <Heading className="flex-1 font-semibold text-2xl ml-2" />
-                <RoundButton slot="previous"><ChevronLeftIcon /></RoundButton>
-                <RoundButton slot="next"><ChevronRightIcon /></RoundButton>
+                <RoundButton slot="previous"><ChevronLeft /></RoundButton>
+                <RoundButton slot="next"><ChevronRight /></RoundButton>
               </header>
               <CalendarGrid className="border-spacing-1 border-separate">
                 <CalendarGridHeader>

packages/react-aria-components/docs/examples/destructive-dialog.mdx

@@ -38,7 +38,7 @@ import './tailwind.global.css';
 
 ```tsx example standalone
 import {DialogTrigger, Button, ModalOverlay, Modal, Dialog, Heading} from 'react-aria-components';
-import AlertIcon from '@spectrum-icons/workflow/Alert';
+import {AlertTriangle} from 'lucide-react';
 
 function ModalExample() {
   return (
@@ -58,7 +58,7 @@ function ModalExample() {
             <Dialog role="alertdialog" className="outline-hidden relative">
               {({ close }) => (<>
                 <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700">Delete folder</Heading>
-                <div className="w-6 h-6 text-red-500 absolute right-0 top-0 stroke-2"><AlertIcon size="M" /></div>
+                <div className="w-6 h-6 text-red-500 absolute right-0 top-0 stroke-2"><AlertTriangle className="w-6 h-6" /></div>
                 <p className="mt-3 text-slate-500">
                   Are you sure you want to delete "Documents"? All contents will be permanently destroyed.
                 </p>

packages/react-aria-components/docs/examples/file-system.mdx

@@ -82,7 +82,7 @@ const filesystem = [
 
 ```tsx example standalone
 import {Button, Collection, Tree, TreeItem, TreeItemContent} from 'react-aria-components';
-import ChevronIcon from '@spectrum-icons/ui/ChevronRightMedium';
+import {ChevronRight} from 'lucide-react';
 
 function FileSystemExample() {
   return (
@@ -104,7 +104,7 @@ function FileSystemExample() {
                       {hasChildItems ? <Button slot="chevron" className={`shrink-0 w-8 h-8
                         group-data-[expanded=true]:rotate-90 transition-rotate duration-200
                         inline-flex items-center justify-center bg-transparent border-0 me-0
-                        cursor-default outline-hidden text-white`}><ChevronIcon /></Button> : <div className="shrink-0 w-8 h-8" />}
+                        cursor-default outline-hidden text-white`}><ChevronRight className="w-4 h-4" /></Button> : <div className="shrink-0 w-8 h-8" />}
                       <div>{item.name}</div>
                     </div>
                   )}

packages/react-aria-components/docs/examples/image-grid.mdx

@@ -38,7 +38,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {ListBox, ListBoxItem, Text, ProgressBar} from 'react-aria-components';
 import {useAsyncList} from 'react-stately';
-import CheckCircleIcon from '@spectrum-icons/workflow/CheckmarkCircle';
+import {CheckCircle2} from 'lucide-react';
 
 type Item = {
   user: { name: string },
@@ -73,7 +73,7 @@ function ImageGridExample() {
             <img src={item.urls.regular} alt={item.alt_description} className="h-[80px] w-full object-cover rounded-sm group-selected:ring-2 group-focus-visible:ring-4 group-selected:group-focus-visible:ring-4 ring-offset-2 ring-sky-600" />
             <Text slot="label" className="text-[11px] text-gray-700 font-semibold overflow-hidden text-ellipsis whitespace-nowrap max-w-full block mt-1">{item.user.name}</Text>
             <div className="absolute top-2 left-2 text-sky-800 rounded-full leading-0 bg-white border border-white border-solid hidden group-selected:block">
-              <CheckCircleIcon size="S" />
+              <CheckCircle2 className="h-6 w-6" />
             </div>
           </ListBoxItem>
         )}

packages/react-aria-components/docs/examples/notifications-popover.mdx

@@ -40,15 +40,14 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {DialogTrigger, Button, Popover, OverlayArrow, Dialog, Link} from 'react-aria-components';
 import type {PopoverProps} from 'react-aria-components';
-import BellIcon from '@spectrum-icons/workflow/Bell';
-import ChatIcon from '@spectrum-icons/workflow/Chat';
+import {Bell, MessageSquare} from 'lucide-react';
 
 function PopoverExample() {
   return (
     <div className="bg-linear-to-r from-orange-400 to-pink-600 p-8 rounded-lg sm:h-[300px] flex items-start justify-center">
       <DialogTrigger>
         <Button aria-label="Notifications" className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">
-          <BellIcon size="S" />
+          <Bell className="w-6 h-6" />
         </Button>
         <MyPopover>
           <OverlayArrow>
@@ -86,7 +85,7 @@ function Notification({avatar, name, time, text}) {
     <Link href="#" className="p-2 rounded-lg hover:bg-gray-100 grid grid-cols-[theme(width.5)_1fr_theme(width.4)] gap-x-2 text-[inherit] no-underline outline-hidden focus-visible:ring-2 ring-pink-800">
       <img src={avatar} className="rounded-full w-5 h-5 row-span-3" />
       <div className="text-gray-800 font-semibold leading-5">{name}</div>
-      <div className="text-gray-400"><ChatIcon size="XS" /></div>
+      <div className="text-gray-400"><MessageSquare className="w-4 h-4" /></div>
       <div className="text-sm text-gray-500 col-span-2">Commented {time} ago</div>
       <p className="text-sm overflow-hidden text-ellipsis line-clamp-2 mt-1 mb-0 col-span-2">{text}</p>
     </Link>

packages/react-aria-components/docs/examples/ripple-button.mdx

@@ -37,7 +37,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {Button} from 'react-aria-components';
 import {useEffect, useRef, useState} from 'react';
-import Airplane from '@spectrum-icons/workflow/Airplane';
+import {Plane} from 'lucide-react';
 
 function RippleButton(props) {
   const [coords, setCoords] = useState(null);
@@ -80,7 +80,7 @@ function RippleButton(props) {
   )
 }
 
-<RippleButton><Airplane size="S" /> Book flight</RippleButton>
+<RippleButton><Plane className="w-6 h-6" /> Book flight</RippleButton>
 ```
 ```css
 @keyframes ripple {

packages/react-aria-components/docs/examples/shipping-radio.mdx

@@ -36,7 +36,7 @@ import './tailwind.global.css';
 
 ```tsx example standalone
 import {RadioGroup, Radio, Label} from 'react-aria-components';
-import CheckCircleIcon from '@spectrum-icons/workflow/CheckmarkCircle';
+import {CheckCircle, Circle} from 'lucide-react';
 
 function RadioGroupExample() {
   return (
@@ -60,18 +60,20 @@ function ShippingOption({name, time, price}) {
       ${isPressed && !isSelected ? 'bg-blue-50' : ''}
       ${!isSelected && !isPressed ? 'bg-white' : ''}
     `}>
-      <div className="flex w-full items-center justify-between gap-3">
-        <div className="flex items-center shrink-0 text-blue-100 group-selected:text-white">
-          <CheckCircleIcon size="M" />
-        </div>
-        <div className="flex flex-1 flex-col">
-          <div className="text-lg font-serif font-semibold text-gray-900 group-selected:text-white">{name}</div>
-          <div className="inline text-gray-500 group-selected:text-sky-100">
-            {time}
+      {({isSelected}) => (
+        <div className="flex w-full items-center justify-between gap-3">
+          <div className="flex items-center shrink-0 text-blue-400 group-selected:text-white">
+            {isSelected ? <CheckCircle className="w-6 h-6" /> : <Circle className="w-6 h-6" />}
+          </div>
+          <div className="flex flex-1 flex-col">
+            <div className="text-lg font-serif font-semibold text-gray-900 group-selected:text-white">{name}</div>
+            <div className="inline text-gray-500 group-selected:text-sky-100">
+              {time}
+            </div>
           </div>
+          <div className="font-medium font-mono text-gray-900 group-selected:text-white">{price}</div>
         </div>
-        <div className="font-medium font-mono text-gray-900 group-selected:text-white">{price}</div>
-      </div>
+      )}
     </Radio>
   );
 }

packages/react-aria-components/docs/examples/status-select.mdx

@@ -40,8 +40,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {Select, Label, Button, SelectValue, Popover, ListBox, ListBoxItem} from 'react-aria-components';
 import type {ListBoxItemProps} from 'react-aria-components';
-import ChevronUpDownIcon from '@spectrum-icons/workflow/ChevronUpDown';
-import CheckIcon from '@spectrum-icons/workflow/Checkmark';
+import {ChevronsUpDown, Check} from 'lucide-react';
 
 function SelectExample() {
   return (
@@ -50,7 +49,7 @@ function SelectExample() {
         <Label className="text-white cursor-default">Status</Label>
         <Button className="flex items-center cursor-default rounded-lg border-0 bg-white/90 pressed:bg-white transition py-2 pl-5 pr-2 text-base text-left leading-normal shadow-md text-gray-700 focus:outline-hidden focus-visible:ring-2 ring-white ring-offset-2 ring-offset-rose-700">
           <SelectValue className="flex-1 truncate placeholder-shown:italic" />
-          <ChevronUpDownIcon size="XS" />
+          <ChevronsUpDown className="w-4 h-4" />
         </Button>
         <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
           <ListBox className="outline-hidden p-1">
@@ -90,7 +89,7 @@ function StatusItem(props: ListBoxItemProps & {children: React.ReactNode}) {
         <>
           <span className="flex-1 flex items-center gap-2 truncate font-normal group-selected:font-medium">{props.children}</span>
           <span className="w-5 flex items-center text-rose-600 group-focus:text-white">
-            {isSelected && <CheckIcon size="S" />}
+            {isSelected && <Check className="w-4 h-4" />}
           </span>
         </>
       )}

packages/react-aria-components/docs/examples/stock-table.mdx

@@ -88,7 +88,7 @@ const stocks = [{"id":1,"symbol":"PAACR","name":"Pacific Special Acquisition Cor
 ```tsx example standalone
 import {Table, TableHeader, TableBody, Column, Row, Cell, ResizableTableContainer, ColumnResizer, Group} from 'react-aria-components';
 import type {ColumnProps, RowProps, CellProps, SortDescriptor} from 'react-aria-components';
-import ArrowUpIcon from '@spectrum-icons/ui/ArrowUpSmall';
+import {ArrowUp} from 'lucide-react';
 import {useState, useMemo} from 'react';
 
 function StockTableExample() {
@@ -142,7 +142,7 @@ function StockColumn(props: ColumnProps & {children: React.ReactNode}) {
             <span className="flex-1 truncate">{props.children}</span>
             {allowsSorting && (
               <span className={`ml-1 w-4 h-4 flex items-center justify-center transition ${sortDirection === 'descending' ? 'rotate-180' : ''}`}>
-                {sortDirection && <ArrowUpIcon width={8} height={10} />}
+                {sortDirection && <ArrowUp className="w-4 h-4" />}
               </span>
             )}
           </Group>