feat(date): Temporal polyfill integration

.histoire/AGENTS.md

@@ -0,0 +1,41 @@
+# .histoire
+
+## Scope
+Histoire (storybook-like) environment for component development and visual testing.
+
+## Config
+- `vite.config.ts` — Histoire config embedded in Vite.
+- `setup.ts` — global setup (imports styles).
+- `style.css` — global styles for stories.
+- `tailwind.config.js` — Tailwind tokens for story previews.
+
+## Story Conventions
+- Stories live next to components: `packages/core/src/<Component>/story/<Component>.story.vue`.
+- File naming: `<Component>.story.vue` for primary stories, `_*.vue` for internal/demo components.
+- Match pattern: `**/*.story.vue` (configured in `storyMatch`).
+- Story tree groups: Components, Compounds, Utilities.
+
+## When to Touch
+- Adding visual stories for new components.
+- Updating story themes, logos, or tree structure.
+- Fixing story rendering issues (CSS, aliases, plugins).
+
+## Commands
+| Command | What |
+|---|---|
+| `pnpm story:dev` | Start Histoire dev server (port 6006). |
+| `pnpm --filter histoire story:build` | Build static storybook. |
+| `pnpm --filter histoire story:preview` | Preview built storybook. |
+
+## Rules
+- Stories are not tests; they are visual/interactive demos.
+- Keep stories self-contained; import from `@/` alias (resolves to `packages/core/src`).
+- Do not add business logic to stories; use `_*.vue` helper components for demos.
+- Stories should demonstrate default state + key variants.
+
+## Alias
+- `@/*` → `packages/core/src/*` (configured in Histoire Vite config).
+
+## Do-Not-Edit
+- `dist/` — build output.
+- `node_modules/` — dependencies.

AGENTS.md

@@ -0,0 +1,62 @@
+# Reka UI Monorepo
+
+## Repo Map
+| Path | Purpose |
+|---|---|
+| `packages/core` | Main component library (`reka-ui`). Vue 3 + TS, Vitest tests, Histoire stories. |
+| `packages/plugins` | Nuxt module, auto-import resolver, namespaced exports generator. |
+| `docs` | VitePress documentation site. API meta auto-generated. |
+| `.histoire` | Histoire (storybook) dev environment for components. |
+| `playground/*` | Vue 3 + Nuxt smoke-test apps. |
+
+## Canonical Commands
+Run from repo root. Use `pnpm --filter <workspace>` for scoped work.
+
+| Command | What |
+|---|---|
+| `pnpm lint` | Lint all workspaces (ESLint + @antfu config). |
+| `pnpm lint:fix` | Auto-fix lint. |
+| `pnpm --filter reka-ui test` | Run Vitest suite. |
+| `pnpm --filter reka-ui test-update` | Update snapshot tests. |
+| `pnpm --filter reka-ui build` | Type-check + build core. |
+| `pnpm --filter plugins build` | Build plugins. |
+| `pnpm --filter plugins generate` | Regenerate namespaced plugin index. |
+| `pnpm docs:gen` | Regenerate API meta markdown files. |
+| `pnpm docs:build` | Build docs site. |
+| `pnpm story:dev` | Start Histoire dev server. |
+
+## Change-Driven Verification Matrix
+| Touched Path | Must Run |
+|---|---|
+| `packages/core/src/**` | `pnpm --filter reka-ui test` → `pnpm --filter reka-ui build` → `pnpm lint` |
+| `packages/core/constant/**` | `pnpm --filter plugins generate` → `pnpm --filter plugins build` |
+| `packages/plugins/**` | `pnpm --filter plugins build` → `pnpm lint` |
+| `docs/content/**` or `docs/.vitepress/**` | `pnpm docs:gen` (if API changed) → `pnpm docs:build` |
+| Root `package.json` / `eslint.*` / `pnpm-workspace.yaml` | `pnpm lint` + relevant workspace build/test |
+
+## Cross-Package Sync Checklist
+When modifying **public API or adding a primitive**:
+1. Export from `packages/core/src/<Component>/index.ts`.
+2. Re-export from `packages/core/src/index.ts`.
+3. Add component names to `packages/core/constant/components.ts`.
+4. Update docs page `docs/content/docs/components/<component>.md` (anatomy, API includes).
+5. Run `pnpm docs:gen` to refresh `docs/content/meta/*.md`.
+6. Run `pnpm --filter plugins generate` to update namespaced exports.
+7. Run full verification matrix for touched paths.
+
+## PR / Commit Rules
+- Conventional commit titles required (enforced by commit-msg hook).
+- Link related issue in PR body.
+- Update documentation when API/behavior changes.
+- CI runs: build → test → lint on `packages/**` changes.
+
+## Generated / Do-Not-Edit Files
+- `docs/content/meta/*.md` — auto-generated by `docs:gen`.
+- `packages/plugins/src/namespaced/index.ts` — auto-generated by `plugins generate`.
+- `packages/core/dist/**` — build output; never hand-edit.
+
+## Tooling Notes
+- EditorConfig: 2-space indent, LF, trim trailing whitespace, final newline.
+- ESLint: `@antfu/eslint-config`, Vue/TS enabled, markdown overrides for docs.
+- Git hooks: lint-staged (pre-commit), commitlint (commit-msg).
+- Node: 22 in CI. pnpm 10.13.1.

docs/AGENTS.md

@@ -0,0 +1,70 @@
+# docs
+
+## Scope
+VitePress documentation site: pages, examples, meta generation, config.
+
+## Directory Structure
+- `content/docs/components/<name>.md` — component docs.
+- `content/docs/guides/` — guides (styling, dates, SSR, etc.).
+- `content/docs/utilities/` — utility docs (composables, helpers).
+- `content/meta/*.md` — auto-generated API tables (props, emits, slots, methods).
+- `content/examples/` — usage examples.
+- `.vitepress/config.ts` — sidebar/nav config.
+
+## Doc Page Anatomy
+```md
+---
+title: <Component Name>
+description: <One-line description>
+name: <kebab-case-name>
+---
+
+# <Component Name>
+
+<Badge>Alpha</Badge> <!-- if applicable -->
+
+<Description>
+<Repeat description>
+</Description>
+
+<ComponentPreview name="<Component>" />
+
+## Features
+<Highlights :features="[...]" />
+
+## Preface
+<!-- Temporal dependency note for date/time components -->
+
+## Installation
+<InstallationTabs value="reka-ui" />
+
+## Anatomy
+<!-- Import block + template structure -->
+
+## API Reference
+<!-- @include: @/meta/<ComponentPart>.md -->
+```
+
+## Generated Files Policy
+- `content/meta/*.md` — generated by `docs:gen`. **Do not hand-edit.**
+- Run `pnpm docs:gen` after any prop/event/slot/method signature change.
+- If a component is added/removed, `docs:gen` updates meta automatically.
+
+## When to Update Sidebar/Nav
+- Edit `.vitepress/config.ts` → `sidebar` array.
+- Group by: Form, Color, Dates, General, Utilities.
+- Add `<Badge>Alpha</Badge>` or `<Badge>New</Badge>` as needed.
+
+## Temporal Docs Consistency
+- All date/time component docs must mention `temporal-polyfill`.
+- Link to `docs/guides/dates` for Temporal usage patterns.
+- Use `Temporal.PlainDate`, `Temporal.PlainDateTime`, `Temporal.ZonedDateTime` in examples.
+
+## Verification Commands
+- `pnpm docs:gen` — regenerate API meta.
+- `pnpm docs:build` — build docs site (catches broken links/includes).
+- `pnpm docs:dev` — local dev server (manual check).
+
+## Do-Not-Edit
+- `content/meta/*.md` — auto-generated.
+- `node_modules/**` — dependencies.

docs/components/demo/Calendar/tailwind/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { CalendarRootProps } from 'reka-ui'
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 
-const date = new CalendarDate(2024, 10, 3)
+const date = Temporal.PlainDate.from({ year: 2024, month: 10, day: 3 })
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18

docs/components/demo/CalendarSelect/css/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, Label, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import { computed, ref } from 'vue'
 
 const preferences = [
@@ -47,7 +47,7 @@ function updateLocale(newLocale: string) {
   locale.value = newLocale
   calendar.value = pref.value!.ordering.split(' ')[0]
 }
-const value = computed(() => toCalendar(today(getLocalTimeZone()), createCalendar(calendar.value)))
+const value = computed(() => Temporal.Now.plainDateISO(Temporal.Now.timeZoneId()).withCalendar(calendar.value))
 </script>
 
 <template>

docs/components/demo/CalendarSelect/tailwind/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, Label, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import { computed, ref } from 'vue'
 
 const preferences = [
@@ -47,7 +47,7 @@ function updateLocale(newLocale: string) {
   locale.value = newLocale
   calendar.value = pref.value!.ordering.split(' ')[0]
 }
-const value = computed(() => toCalendar(today(getLocalTimeZone()), createCalendar(calendar.value)))
+const value = computed(() => Temporal.Now.plainDateISO(Temporal.Now.timeZoneId()).withCalendar(calendar.value))
 </script>
 
 <template>

docs/components/demo/CalendarSwipe/css/index.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { usePointerSwipe } from '@vueuse/core'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import { onMounted, ref, useTemplateRef } from 'vue'
 import './styles.css'
 
 const calendarRef = useTemplateRef('calendarRef')
-const date = ref(new CalendarDate(2023, 1, 1))
+const date = ref(Temporal.PlainDate.from({ year: 2023, month: 1, day: 1 }))
 
 function nextPage() {
-  date.value = date.value.add({ months: 1 }).copy()
+  date.value = date.value.add({ months: 1 })
 }
 
 function prevPage() {
-  date.value = date.value.subtract({ months: 1 }).copy()
+  date.value = date.value.subtract({ months: 1 })
 }
 
 onMounted(() => {

docs/components/demo/CalendarSwipe/tailwind/index.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { usePointerSwipe } from '@vueuse/core'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import { onMounted, ref, useTemplateRef } from 'vue'
 
 const calendarRef = useTemplateRef('calendarRef')
-const date = ref(new CalendarDate(2023, 1, 1))
+const date = ref(Temporal.PlainDate.from({ year: 2023, month: 1, day: 1 }))
 
 function nextPage() {
-  date.value = date.value.add({ months: 1 }).copy()
+  date.value = date.value.add({ months: 1 })
 }
 
 function prevPage() {
-  date.value = date.value.subtract({ months: 1 }).copy()
+  date.value = date.value.subtract({ months: 1 })
 }
 
 onMounted(() => {

docs/components/demo/CalendarYearIncrement/css/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { DateValue } from '@internationalized/date'
-import type { CalendarRootProps } from 'reka-ui'
+import type { CalendarRootProps, TemporalDate } from 'reka-ui'
 import { Icon } from '@iconify/vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'reka-ui'
 import './styles.css'
@@ -9,7 +8,7 @@ const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18
 }
 
-function pagingFunc(date: DateValue, sign: -1 | 1) {
+function pagingFunc(date: TemporalDate, sign: -1 | 1) {
   if (sign === -1)
     return date.subtract({ years: 1 })
   return date.add({ years: 1 })
@@ -26,7 +25,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
     <CalendarHeader class="CalendarHeader">
       <CalendarPrev
         class="CalendarNavButton"
-        :prev-page="(date: DateValue) => pagingFunc(date, -1)"
+        :prev-page="(date: TemporalDate) => pagingFunc(date, -1)"
       >
         <Icon
           icon="radix-icons:double-arrow-left"
@@ -53,7 +52,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
 
       <CalendarNext
         class="CalendarNavButton"
-        :next-page="(date: DateValue) => pagingFunc(date, 1)"
+        :next-page="(date: TemporalDate) => pagingFunc(date, 1)"
       >
         <Icon
           icon="radix-icons:double-arrow-right"

docs/components/demo/CalendarYearIncrement/tailwind/index.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { DateValue } from '@internationalized/date'
-import type { CalendarRootProps } from 'reka-ui'
+import type { CalendarRootProps, TemporalDate } from 'reka-ui'
 import { Icon } from '@iconify/vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'reka-ui'
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18
 }
 
-function pagingFunc(date: DateValue, sign: -1 | 1) {
+function pagingFunc(date: TemporalDate, sign: -1 | 1) {
   if (sign === -1)
     return date.subtract({ years: 1 })
   return date.add({ years: 1 })
@@ -25,7 +24,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
     <CalendarHeader class="flex items-center justify-between">
       <CalendarPrev
         class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
-        :prev-page="(date: DateValue) => pagingFunc(date, -1)"
+        :prev-page="(date: TemporalDate) => pagingFunc(date, -1)"
       >
         <Icon
           icon="radix-icons:double-arrow-left"
@@ -53,7 +52,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
 
       <CalendarNext
         class="inline-flex items-center cursor-pointer justify-center text-black rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
-        :next-page="(date: DateValue) => pagingFunc(date, 1)"
+        :next-page="(date: TemporalDate) => pagingFunc(date, 1)"
       >
         <Icon
           icon="radix-icons:double-arrow-right"

docs/components/demo/MonthPicker/css/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerHeader, MonthPickerHeading, MonthPickerNext, MonthPickerPrev, MonthPickerRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import './styles.css'
 
-const date = new CalendarDate(2024, 10, 1)
+const date = Temporal.PlainDate.from({ year: 2024, month: 10, day: 1 })
 </script>
 
 <template>

docs/components/demo/MonthPicker/tailwind/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerHeader, MonthPickerHeading, MonthPickerNext, MonthPickerPrev, MonthPickerRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 
-const date = new CalendarDate(2024, 10, 1)
+const date = Temporal.PlainDate.from({ year: 2024, month: 10, day: 1 })
 </script>
 
 <template>

docs/components/demo/MonthRangePicker/css/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { MonthRangePickerCell, MonthRangePickerCellTrigger, MonthRangePickerGrid, MonthRangePickerGridBody, MonthRangePickerGridRow, MonthRangePickerHeader, MonthRangePickerHeading, MonthRangePickerNext, MonthRangePickerPrev, MonthRangePickerRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 import './styles.css'
 
 const defaultValue = {
-  start: new CalendarDate(2024, 3, 1),
-  end: new CalendarDate(2024, 6, 1),
+  start: Temporal.PlainDate.from({ year: 2024, month: 3, day: 1 }),
+  end: Temporal.PlainDate.from({ year: 2024, month: 6, day: 1 }),
 }
 </script>
 

docs/components/demo/MonthRangePicker/tailwind/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { CalendarDate } from '@internationalized/date'
 import { MonthRangePickerCell, MonthRangePickerCellTrigger, MonthRangePickerGrid, MonthRangePickerGridBody, MonthRangePickerGridRow, MonthRangePickerHeader, MonthRangePickerHeading, MonthRangePickerNext, MonthRangePickerPrev, MonthRangePickerRoot } from 'reka-ui'
+import { Temporal } from 'temporal-polyfill'
 
 const defaultValue = {
-  start: new CalendarDate(2024, 3, 1),
-  end: new CalendarDate(2024, 6, 1),
+  start: Temporal.PlainDate.from({ year: 2024, month: 3, day: 1 }),
+  end: Temporal.PlainDate.from({ year: 2024, month: 6, day: 1 }),
 }
 </script>