feat: initialize React Spectrum template with layouts and showcases

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/form-examples/date-number-fields.tsx b/src/components/form-examples/date-number-fields.tsx
new file mode 100644
index 0000000..f2c489f
--- /dev/null
+++ b/src/components/form-examples/date-number-fields.tsx
@@ -0,0 +1,45 @@
+import FieldGrid from './field-grid'
+import { useState } from 'react'
+import { NumberField } from '@react-spectrum/s2/NumberField'
+import { Slider } from '@react-spectrum/s2/Slider'
+import { RangeSlider } from '@react-spectrum/s2/RangeSlider'
+import { DateField } from '@react-spectrum/s2/DateField'
+import { TimeField } from '@react-spectrum/s2/TimeField'
+import { DatePicker } from '@react-spectrum/s2/DatePicker'
+import { DateRangePicker } from '@react-spectrum/s2/DateRangePicker'
+import { Calendar } from '@react-spectrum/s2/Calendar'
+import { RangeCalendar, type DateRange } from '@react-spectrum/s2/RangeCalendar'
+import styles from './form-examples.module.css'
+
+export default function DateNumberFields({ disabled }: { disabled: boolean }) {
+  const [day, setDay] = useState('')
+  const [range, setRange] = useState<DateRange | null>(null)
+  return (
+    <>
+      <section className={styles.section} aria-labelledby="number-fields-title">
+        <h2 id="number-fields-title">数字与滑块</h2>
+        <FieldGrid>
+          <NumberField name="quantity" label="数量" defaultValue={2} minValue={1} maxValue={20} step={1} description="范围 1–20，支持步进按钮。" />
+          <NumberField name="budget" label="预算" defaultValue={1000} minValue={0} step={100} formatOptions={{ style: 'currency', currency: 'CNY' }} />
+          <NumberField name="ratio" label="百分比" defaultValue={0.5} minValue={0} maxValue={1} step={0.05} formatOptions={{ style: 'percent' }} />
+          <Slider name="volume" label="音量" defaultValue={40} minValue={0} maxValue={100} />
+          <RangeSlider startName="priceMin" endName="priceMax" label="价格区间" defaultValue={{ start: 20, end: 80 }} minValue={0} maxValue={100} />
+        </FieldGrid>
+      </section>
+      <section className={styles.section} aria-labelledby="date-fields-title">
+        <h2 id="date-fields-title">日期与时间</h2>
+        <FieldGrid>
+          <DateField name="date" label="分段日期输入" />
+          <TimeField name="time" label="时间输入" hourCycle={24} granularity="minute" />
+          <DatePicker name="appointment" label="日期选择器" />
+          <DatePicker name="appointmentTime" label="日期和时间" granularity="minute" hourCycle={24} />
+          <DateRangePicker startName="tripStart" endName="tripEnd" label="日期范围" />
+        </FieldGrid>
+        <div className={styles.calendars}>
+          <div className={styles.stack}><span id="calendar-label">独立日历</span><Calendar isDisabled={disabled} aria-labelledby="calendar-label" onChange={(value) => setDay(value?.toString() ?? '')} /><input type="hidden" name="calendar" value={day} /></div>
+          <div className={styles.stack}><span id="range-calendar-label">独立范围日历</span><RangeCalendar isDisabled={disabled} aria-labelledby="range-calendar-label" value={range} onChange={setRange} /><input type="hidden" name="calendarStart" value={range?.start.toString() ?? ''} /><input type="hidden" name="calendarEnd" value={range?.end.toString() ?? ''} /></div>
+        </div>
+      </section>
+    </>
+  )
+}