chore: docs starter

Makefile

@@ -117,7 +117,6 @@ check-examples:
 	yarn tsc --project dist/docs-examples/tsconfig.json
 
 starter:
-	node scripts/extractStarter.mjs
 	cd starters/docs && yarn --no-immutable && yarn tsc
 
 starter-zip: starter

packages/react-aria-components/docs/Button.mdx

@@ -67,6 +67,10 @@ import {Button} from 'react-aria-components';
   outline: none;
   padding: 6px 10px;
   text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
 
   &[data-pressed] {
     box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);

packages/react-aria-components/docs/Calendar.mdx

@@ -43,12 +43,13 @@ type: component
 
 ```tsx example
 import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <Calendar aria-label="Appointment date">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
@@ -218,9 +219,9 @@ function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarPro
   return (
     <Calendar {...props}>
       <header>
-        <Button slot="previous">◀</Button>
+        <Button slot="previous"><ChevronLeft size={20} /></Button>
         <Heading />
-        <Button slot="next">▶</Button>
+        <Button slot="next"><ChevronRight size={20} /></Button>
       </header>
       <CalendarGrid>
         {date => <CalendarCell date={date} />}
@@ -376,9 +377,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
 ```tsx example
 <Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -401,9 +402,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
 ```tsx example
 <Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -735,9 +736,9 @@ import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-ar
 
 <Calendar aria-label="Appointment date">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     <CalendarGridHeader>
@@ -920,9 +921,9 @@ function CalendarValue() {
 
 <Calendar>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
@@ -966,9 +967,9 @@ function WeekCalendarGrid(props: CalendarGridProps) {
 <Calendar visibleDuration={{weeks: 1}} defaultValue={today(getLocalTimeZone())}>
   <div className="week">
     <Heading />
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <WeekCalendarGrid />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </div>
 </Calendar>
 ```

packages/react-aria-components/docs/ColorSlider.mdx

@@ -70,10 +70,14 @@ import {ColorSlider, ColorThumb, Label, SliderOutput, SliderTrack} from 'react-a
 
   .react-aria-Label {
     grid-area: label;
+    color: var(--text-color);
   }
 
   .react-aria-SliderOutput {
     grid-area: output;
+    width: 4ch;
+    text-align: end;
+    color: var(--text-color);
   }
 
   .react-aria-SliderTrack {
@@ -190,7 +194,7 @@ export function MyColorSlider({label, ...props}: MyColorSliderProps) {
     <ColorSlider {...props}>
       <Label>{label}</Label>
       <SliderOutput />
-      <SliderTrack 
+      <SliderTrack
         style={({defaultStyle}) => ({
           background: `${defaultStyle.background},
             repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`

packages/react-aria-components/docs/ComboBox.mdx

@@ -51,12 +51,13 @@ type: component
 
 ```tsx example
 import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'react-aria-components';
+import {ChevronDown} from 'lucide-react';
 
 <ComboBox>
   <Label>Favorite Animal</Label>
   <div>
     <Input />
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   <Popover>
     <ListBox>
@@ -338,7 +339,7 @@ function MyComboBox<T extends object>({label, description, errorMessage, childre
       <Label>{label}</Label>
       <div className="my-combobox-container">
         <Input />
-        <Button>▼</Button>
+        <Button><ChevronDown size={16} /></Button>
       </div>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
@@ -1062,7 +1063,7 @@ The `description` slot can be used to associate additional help text with a Comb
   <Label>Favorite Animal</Label>
   <div>
     <Input />
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   {/*- begin highlight -*/}
   <Text slot="description">Please select an animal.</Text>
@@ -1409,6 +1410,7 @@ This example shows a `ComboBoxClearButton` component that can be placed within a
 
 ```tsx example
 import {ComboBoxStateContext} from 'react-aria-components';
+import {X} from 'lucide-react';
 
 function ComboBoxClearButton() {
   /*- begin highlight -*/
@@ -1421,7 +1423,7 @@ function ComboBoxClearButton() {
       className="clear-button"
       aria-label="Clear"
       onPress={() => state?.setSelectedKey(null)}>
-      ✕
+      <X size={14} />
     </Button>
   );
 }
@@ -1433,7 +1435,7 @@ function ComboBoxClearButton() {
     {/*- begin highlight -*/}
     <ComboBoxClearButton />
     {/*- end highlight -*/}
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   <Popover>
     <ListBox>
@@ -1463,6 +1465,9 @@ function ComboBoxClearButton() {
   border: none;
   padding: 0;
   outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &[data-pressed] {
     background: dimgray;

packages/react-aria-components/docs/DatePicker.mdx

@@ -49,22 +49,23 @@ type: component
 
 ```tsx example
 import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, CalendarCell, Button, Heading, DateInput, DateSegment} from 'react-aria-components';
+import {ChevronDown, ChevronLeft, ChevronRight} from 'lucide-react';
 
 <DatePicker>
   <Label>Date</Label>
   <Group>
     <DateInput>
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -197,7 +198,7 @@ Note that most of this anatomy is shared with [DateRangePicker](DateRangePicker.
 
 ### Internationalization
 
-To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`. 
+To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`.
 
 ### Concepts
 
@@ -305,17 +306,17 @@ function MyDatePicker<T extends DateValue>({label, description, errorMessage, fi
         <DateInput>
           {segment => <DateSegment segment={segment} />}
         </DateInput>
-        <Button>▼</Button>
+        <Button><ChevronDown size={20} /></Button>
       </Group>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
       <Popover>
         <Dialog>
           <Calendar firstDayOfWeek={firstDayOfWeek}>
             <header>
-              <Button slot="previous">◀</Button>
+              <Button slot="previous"><ChevronLeft size={20} /></Button>
               <Heading />
-              <Button slot="next">▶</Button>
+              <Button slot="next"><ChevronRight size={20} /></Button>
             </header>
             <CalendarGrid>
               {date => <CalendarCell date={date} />}
@@ -507,7 +508,7 @@ import {Form, FieldError} from 'react-aria-components';
       <DateInput>
         {segment => <DateSegment segment={segment} />}
       </DateInput>
-      <Button>▼</Button>
+      <Button><ChevronDown size={20} /></Button>
     </Group>
     {/*- begin highlight -*/}
     <FieldError />
@@ -516,9 +517,9 @@ import {Form, FieldError} from 'react-aria-components';
       <Dialog>
         <Calendar>
           <header>
-            <Button slot="previous">◀</Button>
+            <Button slot="previous"><ChevronLeft size={20} /></Button>
             <Heading />
-            <Button slot="next">▶</Button>
+            <Button slot="next"><ChevronRight size={20} /></Button>
           </header>
           <CalendarGrid>
             {date => <CalendarCell date={date} />}
@@ -646,7 +647,7 @@ The `description` slot can be used to associate additional help text with a date
     <DateInput>
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   {/*- begin highlight -*/}
   <Text slot="description">Please select a weekday between 9 AM and 5 PM.</Text>
@@ -655,9 +656,9 @@ The `description` slot can be used to associate additional help text with a date
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -1148,15 +1149,15 @@ function DatePickerClearButton() {
     {/*- begin highlight -*/}
     <DatePickerClearButton />
     {/*- end highlight -*/}
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}