feat(MonthPicker,YearPicker): add month and year pickers

docs/.vitepress/config.ts

@@ -192,6 +192,22 @@ export default defineConfig({
                 text: `Time Field ${BadgeHTML('Alpha', true)}`,
                 link: '/docs/components/time-field',
               },
+              {
+                text: `Month Picker ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/month-picker',
+              },
+              {
+                text: `Month Range Picker ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/month-range-picker',
+              },
+              {
+                text: `Year Picker ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/year-picker',
+              },
+              {
+                text: `Year Range Picker ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/year-range-picker',
+              },
             ],
           },
           {
@@ -317,6 +333,10 @@ export default defineConfig({
                 text: 'Date Picker Selection',
                 link: '/examples/date-picker-selection',
               },
+              {
+                text: 'Date Picker View Switching',
+                link: '/examples/date-picker-view-switching',
+              },
             ],
           },
           {

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

@@ -0,0 +1,55 @@
+<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 './styles.css'
+
+const date = new CalendarDate(2024, 10, 1)
+</script>
+
+<template>
+  <MonthPickerRoot
+    v-slot="{ grid }"
+    :default-value="date"
+    class="MonthPicker"
+  >
+    <MonthPickerHeader class="MonthPickerHeader">
+      <MonthPickerPrev class="MonthPickerNavButton">
+        <Icon
+          icon="radix-icons:chevron-left"
+          class="Icon"
+        />
+      </MonthPickerPrev>
+      <MonthPickerHeading class="MonthPickerHeading" />
+      <MonthPickerNext class="MonthPickerNavButton">
+        <Icon
+          icon="radix-icons:chevron-right"
+          class="Icon"
+        />
+      </MonthPickerNext>
+    </MonthPickerHeader>
+    <div class="MonthPickerWrapper">
+      <MonthPickerGrid class="MonthPickerGrid">
+        <MonthPickerGridBody class="MonthPickerGridWrapper">
+          <MonthPickerGridRow
+            v-for="(months, index) in grid.rows"
+            :key="`month-${index}`"
+            class="MonthPickerGridRow"
+          >
+            <MonthPickerCell
+              v-for="month in months"
+              :key="month.toString()"
+              :date="month"
+              class="MonthPickerCell"
+            >
+              <MonthPickerCellTrigger
+                :month="month"
+                class="MonthPickerCellTrigger"
+              />
+            </MonthPickerCell>
+          </MonthPickerGridRow>
+        </MonthPickerGridBody>
+      </MonthPickerGrid>
+    </div>
+  </MonthPickerRoot>
+</template>

docs/components/demo/MonthPicker/css/styles.css

@@ -0,0 +1,134 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/grass.css';
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.MonthPicker {
+  margin-top: 1.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e5e5;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  padding: 1rem;
+}
+
+.MonthPickerHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.MonthPickerNavButton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  color: #000000;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 0.375rem;
+}
+
+.MonthPickerNavButton:hover {
+  background-color: #fafaf9;
+}
+
+.MonthPickerNavButton:focus {
+  box-shadow: 0 0 0 2px #000000;
+}
+
+.MonthPickerHeading {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #000000;
+}
+
+.MonthPickerWrapper {
+  padding-top: 1rem;
+}
+
+.MonthPickerGrid {
+  width: 100%;
+  user-select: none;
+}
+
+.MonthPickerGridWrapper {
+  display: grid;
+  gap: 0.25rem 0;
+}
+
+.MonthPickerGridRow {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.25rem;
+}
+
+.MonthPickerCell {
+  position: relative;
+  text-align: center;
+}
+
+.MonthPickerCellTrigger {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #000000;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  border: none;
+}
+
+.MonthPickerCellTrigger:hover {
+  background-color: var(--grass-5);
+}
+
+.MonthPickerCellTrigger:focus {
+  box-shadow: 0 0 0 2px #000000;
+}
+
+.MonthPickerCellTrigger[data-disabled] {
+  color: rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+.MonthPickerCellTrigger[data-selected] {
+  background-color: var(--grass-10);
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.MonthPickerCellTrigger[data-unavailable] {
+  color: rgba(0, 0, 0, 0.3);
+  text-decoration: line-through;
+  pointer-events: none;
+}
+
+.MonthPickerCellTrigger::before {
+  content: '';
+  position: absolute;
+  top: 0.25rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  display: none;
+}
+
+.MonthPickerCellTrigger[data-today]::before {
+  display: block;
+  background-color: var(--grass-9);
+}
+
+.MonthPickerCellTrigger[data-selected]::before {
+  background-color: #ffffff;
+}

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

@@ -0,0 +1,58 @@
+<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'
+
+const date = new CalendarDate(2024, 10, 1)
+</script>
+
+<template>
+  <MonthPickerRoot
+    v-slot="{ grid }"
+    :default-value="date"
+    class="mt-6 rounded-xl bg-white p-4 shadow-sm border"
+  >
+    <MonthPickerHeader class="flex items-center justify-between">
+      <MonthPickerPrev
+        class="inline-flex items-center cursor-pointer text-black justify-center rounded-md bg-transparent size-8 hover:bg-stone-50 active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-green10"
+      >
+        <Icon
+          icon="radix-icons:chevron-left"
+          class="size-4"
+        />
+      </MonthPickerPrev>
+      <MonthPickerHeading class="text-sm text-black font-medium" />
+      <MonthPickerNext
+        class="inline-flex items-center cursor-pointer justify-center text-black rounded-md bg-transparent size-8 hover:bg-stone-50 active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-green10"
+      >
+        <Icon
+          icon="radix-icons:chevron-right"
+          class="size-4"
+        />
+      </MonthPickerNext>
+    </MonthPickerHeader>
+    <div class="pt-4">
+      <MonthPickerGrid class="w-full border-collapse select-none">
+        <MonthPickerGridBody class="grid gap-y-1">
+          <MonthPickerGridRow
+            v-for="(months, index) in grid.rows"
+            :key="`month-${index}`"
+            class="grid grid-cols-4 gap-x-1"
+          >
+            <MonthPickerCell
+              v-for="month in months"
+              :key="month.toString()"
+              :date="month"
+              class="relative text-center text-sm"
+            >
+              <MonthPickerCellTrigger
+                :month="month"
+                class="relative flex items-center justify-center whitespace-nowrap text-sm font-normal text-black size-12 rounded-lg outline-none focus:shadow-[0_0_0_2px] focus:shadow-green10 data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-1 before:hidden before:rounded-full before:size-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9"
+              />
+            </MonthPickerCell>
+          </MonthPickerGridRow>
+        </MonthPickerGridBody>
+      </MonthPickerGrid>
+    </div>
+  </MonthPickerRoot>
+</template>

docs/components/demo/MonthPicker/tailwind/tailwind.config.js

@@ -0,0 +1,16 @@
+const { blackA, grass, green } = require('@radix-ui/colors')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {
+    extend: {
+      colors: {
+        ...blackA,
+        ...grass,
+        ...green,
+      },
+    },
+  },
+  plugins: [],
+}

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

@@ -0,0 +1,58 @@
+<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 './styles.css'
+
+const defaultValue = {
+  start: new CalendarDate(2024, 3, 1),
+  end: new CalendarDate(2024, 6, 1),
+}
+</script>
+
+<template>
+  <MonthRangePickerRoot
+    v-slot="{ grid }"
+    :default-value="defaultValue"
+    class="MonthRangePicker"
+  >
+    <MonthRangePickerHeader class="MonthRangePickerHeader">
+      <MonthRangePickerPrev class="MonthRangePickerNavButton">
+        <Icon
+          icon="radix-icons:chevron-left"
+          class="Icon"
+        />
+      </MonthRangePickerPrev>
+      <MonthRangePickerHeading class="MonthRangePickerHeading" />
+      <MonthRangePickerNext class="MonthRangePickerNavButton">
+        <Icon
+          icon="radix-icons:chevron-right"
+          class="Icon"
+        />
+      </MonthRangePickerNext>
+    </MonthRangePickerHeader>
+    <div class="MonthRangePickerWrapper">
+      <MonthRangePickerGrid class="MonthRangePickerGrid">
+        <MonthRangePickerGridBody class="MonthRangePickerGridWrapper">
+          <MonthRangePickerGridRow
+            v-for="(months, index) in grid.rows"
+            :key="`month-${index}`"
+            class="MonthRangePickerGridRow"
+          >
+            <MonthRangePickerCell
+              v-for="month in months"
+              :key="month.toString()"
+              :date="month"
+              class="MonthRangePickerCell"
+            >
+              <MonthRangePickerCellTrigger
+                :month="month"
+                class="MonthRangePickerCellTrigger"
+              />
+            </MonthRangePickerCell>
+          </MonthRangePickerGridRow>
+        </MonthRangePickerGridBody>
+      </MonthRangePickerGrid>
+    </div>
+  </MonthRangePickerRoot>
+</template>