Merge remote-tracking branch 'origin/dev' into charting

apps/www/__registry__/index.ts

@@ -437,6 +437,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerForm.vue"],
     },
+    "DatePickerWithIndependentMonths": {
+      name: "DatePickerWithIndependentMonths",
+      type: "components:example",
+      registryDependencies: ["range-calendar","button","popover","utils"],
+      component: () => import("../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue"],
+    },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
@@ -1698,6 +1705,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerForm.vue"],
     },
+    "DatePickerWithIndependentMonths": {
+      name: "DatePickerWithIndependentMonths",
+      type: "components:example",
+      registryDependencies: ["range-calendar","button","popover","utils"],
+      component: () => import("../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue"],
+    },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",

apps/www/package.json

@@ -19,29 +19,29 @@
     "@internationalized/date": "^3.5.2",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.15.3",
+    "@tanstack/vue-table": "^8.16.0",
     "@unovis/ts": "^1.4.0",
     "@unovis/vue": "^1.4.0",
     "@vee-validate/zod": "^4.12.6",
     "@vueuse/core": "^10.9.0",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^3.6.0",
     "embla-carousel": "^8.0.2",
     "embla-carousel-autoplay": "^8.0.2",
     "embla-carousel-vue": "^8.0.2",
     "lucide-vue-next": "^0.359.0",
-    "magic-string": "^0.30.9",
-    "radix-vue": "^1.7.0",
+    "magic-string": "^0.30.10",
+    "radix-vue": "^1.7.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.1.0",
     "vee-validate": "4.12.5",
-    "vue": "^3.4.21",
+    "vue": "^3.4.24",
     "vue-sonner": "^1.1.2",
     "vue-wrap-balancer": "^1.1.3",
-    "zod": "^3.22.4"
+    "zod": "^3.23.3"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.1.180",
@@ -50,27 +50,27 @@
     "@iconify-json/ri": "^1.1.18",
     "@iconify-json/simple-icons": "^1.1.94",
     "@iconify-json/tabler": "^1.1.106",
-    "@iconify/vue": "^4.1.1",
+    "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "^0.1.0",
     "@shikijs/transformers": "^1.3.0",
     "@types/lodash.template": "^4.5.3",
     "@types/node": "^20.12.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/compiler-core": "^3.4.21",
-    "@vue/compiler-dom": "^3.4.21",
+    "@vue/compiler-core": "^3.4.24",
+    "@vue/compiler-dom": "^3.4.24",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shiki": "^1.3.0",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "tsx": "^4.7.2",
-    "typescript": "^5.4.2",
+    "typescript": "^5.4.5",
     "unplugin-icons": "^0.18.5",
-    "vitepress": "^1.1.0",
-    "vue-tsc": "^2.0.12"
+    "vitepress": "^1.1.3",
+    "vue-tsc": "^2.0.14"
   }
 }

apps/www/src/content/docs/components/date-picker.md

@@ -29,6 +29,10 @@ See installations instructions for the [Popover](/docs/components/popover), [Cal
 
 <ComponentPreview name="DatePickerWithRange" />
 
+### Date Range Picker with Independent Months
+
+<ComponentPreview name="DatePickerWithIndependentMonths" />
+
 ### With Presets
 
 <ComponentPreview name="DatePickerWithPresets" />

apps/www/src/content/docs/components/range-calendar.md

@@ -9,7 +9,7 @@ primitive: https://www.radix-vue.com/components/range-calendar.html
 
 ## About
 
-The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.bits-ui.com/docs/components/range-calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.radix-vue.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 ## Installation
 

apps/www/src/content/docs/installation/nuxt.md

@@ -23,7 +23,7 @@ npm install -D typescript
 ### Install TailwindCSS module
 
 ```bash
-npm install -D @nuxtjs/tailwindcss
+npx nuxi@latest module add @nuxtjs/tailwindcss
 ```
 
 ### Add `Nuxt` module
@@ -36,7 +36,7 @@ npm install -D @nuxtjs/tailwindcss
   Install the package below.
 
   ```bash
-  npm install -D shadcn-nuxt
+ npx nuxi@latest module add shadcn-nuxt
   ```
 
   </TabMarkdown>

apps/www/src/content/docs/installation/vite.md

@@ -9,6 +9,12 @@ description: Install and configure Vite.
 
 Start by creating a new Vue project using `vite`:
 
+<Callout>
+
+  If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors.
+
+</Callout>
+
 ```bash
 # npm 6.x
 npm create vite@latest my-vue-app --template vue-ts
@@ -24,12 +30,18 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 <TabsMarkdown>
   <TabMarkdown title="vite.config">
 
-  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
+  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#89) dependency so you don't have to install it again in your package.json
 
   ```bash
   npm install -D tailwindcss autoprefixer
   ```
 
+  <Callout>
+
+  If you're utilizing `postcss.config.js`, these changes will be inconsequential.
+
+  </Callout>
+
   #### `vite.config`
 
   ```typescript {5,6,9-13}
@@ -77,9 +89,9 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
   </TabMarkdown>
 </TabsMarkdown>
 
-### Edit tsconfig.json
+### Edit tsconfig/jsconfig.json
 
-Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
+Add the code below to the compilerOptions of your `tsconfig.json` or `jsconfig.json` so your app can resolve paths without error
 
 ```json {4-7}
 {
@@ -126,6 +138,10 @@ export default defineConfig({
 })
 ```
 
+### Delete default Vite styles
+
+Delete the default Vite stylesheet `./src/style.css`
+
 ### Run the CLI
 
 Run the `shadcn-vue` init command to setup your project:
@@ -150,6 +166,19 @@ Configure the import alias for components: › @/components
 Configure the import alias for utils: › @/lib/utils
 ```
 
+### Update main.ts
+
+Remove import for style.css and add tailwind style import `import './assets/index.css'`
+
+```diff typescript {2,4}
+import { createApp } from 'vue'
+- import './style.css'
+import App from './App.vue'
++ import './assets/index.css'
+
+createApp(App).mount('#app')
+```
+
 ### That's it
 
 You can now start adding components to your project.

apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { type Ref, ref, watch } from 'vue'
+
+import {
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-vue-next'
+import {
+  CalendarDate,
+  type DateValue,
+  isEqualMonth,
+} from '@internationalized/date'
+
+import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
+import { type Grid, createMonth, toDate } from 'radix-vue/date'
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+} from '@/lib/registry/default/ui/range-calendar'
+import { Button, buttonVariants } from '@/lib/registry/default/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { cn } from '@/lib/utils'
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+const locale = ref('en-US')
+const formatter = useDateFormatter(locale.value)
+
+const placeholder = ref(value.value.start) as Ref<DateValue>
+const secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>
+
+const firstMonth = ref(
+  createMonth({
+    dateObj: placeholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+const secondMonth = ref(
+  createMonth({
+    dateObj: secondMonthPlaceholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+
+function updateMonth(reference: 'first' | 'second', months: number) {
+  if (reference === 'first') {
+    placeholder.value = placeholder.value.add({ months })
+  }
+  else {
+    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({
+      months,
+    })
+  }
+}
+
+watch(placeholder, (_placeholder) => {
+  firstMonth.value = createMonth({
+    dateObj: _placeholder,
+    weekStartsOn: 0,
+    fixedWeeks: false,
+    locale: locale.value,
+  })
+  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {
+    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({
+      months: 1,
+    })
+  }
+})
+
+watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
+  secondMonth.value = createMonth({
+    dateObj: _secondMonthPlaceholder,
+    weekStartsOn: 0,
+    fixedWeeks: false,
+    locale: locale.value,
+  })
+  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))
+    placeholder.value = placeholder.value.subtract({ months: 1 })
+})
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="
+          cn(
+            'w-[280px] justify-start text-left font-normal',
+            !value && 'text-muted-foreground',
+          )
+        "
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{
+              formatter.custom(toDate(value.start), {
+                dateStyle: "medium",
+              })
+            }}
+            -
+            {{
+              formatter.custom(toDate(value.end), {
+                dateStyle: "medium",
+              })
+            }}
+          </template>
+
+          <template v-else>
+            {{
+              formatter.custom(toDate(value.start), {
+                dateStyle: "medium",
+              })
+            }}
+          </template>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendarRoot v-slot="{ weekDays }" v-model="value" v-model:placeholder="placeholder" class="p-3">
+        <div
+          class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0"
+        >
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('first', -1)"
+              >
+                <ChevronLeft class="h-4 w-4" />
+              </button>
+              <div
+                :class="cn('text-sm font-medium')"
+              >
+                {{
+                  formatter.fullMonthAndYear(
+                    toDate(firstMonth.value),
+                  )
+                }}
+              </div>
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('first', 1)"
+              >
+                <ChevronRight class="h-4 w-4" />
+              </button>
+            </div>
+            <RangeCalendarGrid>
+              <RangeCalendarGridHead>
+                <RangeCalendarGridRow>
+                  <RangeCalendarHeadCell
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="w-full"
+                  >
+                    {{ day }}
+                  </RangeCalendarHeadCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridHead>
+              <RangeCalendarGridBody>
+                <RangeCalendarGridRow
+                  v-for="(
+                    weekDates, index
+                  ) in firstMonth.rows"
+                  :key="`weekDate-${index}`"
+                  class="mt-2 w-full"
+                >
+                  <RangeCalendarCell
+                    v-for="weekDate in weekDates"
+                    :key="weekDate.toString()"
+                    :date="weekDate"
+                  >
+                    <RangeCalendarCellTrigger
+                      :day="weekDate"
+                      :month="firstMonth.value"
+                    />
+                  </RangeCalendarCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+          </div>
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('second', -1)"
+              >
+                <ChevronLeft class="h-4 w-4" />
+              </button>
+              <div
+                :class="cn('text-sm font-medium')"
+              >
+                {{
+                  formatter.fullMonthAndYear(
+                    toDate(secondMonth.value),
+                  )
+                }}
+              </div>
+
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('second', 1)"
+              >
+                <ChevronRight class="h-4 w-4" />
+              </button>
+            </div>
+            <RangeCalendarGrid>
+              <RangeCalendarGridHead>
+                <RangeCalendarGridRow>
+                  <RangeCalendarHeadCell
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="w-full"
+                  >
+                    {{ day }}
+                  </RangeCalendarHeadCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridHead>
+              <RangeCalendarGridBody>
+                <RangeCalendarGridRow
+                  v-for="(
+                    weekDates, index
+                  ) in secondMonth.rows"
+                  :key="`weekDate-${index}`"
+                  class="mt-2 w-full"
+                >
+                  <RangeCalendarCell
+                    v-for="weekDate in weekDates"
+                    :key="weekDate.toString()"
+                    :date="weekDate"
+                  >
+                    <RangeCalendarCellTrigger
+                      :day="weekDate"
+                      :month="secondMonth.value"
+                    />
+                  </RangeCalendarCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+          </div>
+        </div>
+      </RangeCalendarRoot>
+    </PopoverContent>
+  </Popover>
+</template>

apps/www/src/lib/registry/default/example/DatePickerWithRange.vue

@@ -49,7 +49,7 @@ const value = ref({
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" @update:start-value="(startDate) => value.start = startDate" />
     </PopoverContent>
   </Popover>
 </template>

apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { type Ref, ref, watch } from 'vue'
+
+import {
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-vue-next'
+import {
+  CalendarDate,
+  type DateValue,
+  isEqualMonth,
+} from '@internationalized/date'
+
+import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
+import { type Grid, createMonth, toDate } from 'radix-vue/date'
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+} from '@/lib/registry/new-york/ui/range-calendar'
+import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+import { cn } from '@/lib/utils'
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+const locale = ref('en-US')
+const formatter = useDateFormatter(locale.value)
+
+const placeholder = ref(value.value.start) as Ref<DateValue>
+const secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>
+
+const firstMonth = ref(
+  createMonth({
+    dateObj: placeholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+const secondMonth = ref(
+  createMonth({
+    dateObj: secondMonthPlaceholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+
+function updateMonth(reference: 'first' | 'second', months: number) {
+  if (reference === 'first') {
+    placeholder.value = placeholder.value.add({ months })
+  }
+  else {
+    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({
+      months,
+    })
+  }
+}
+
+watch(placeholder, (_placeholder) => {
+  firstMonth.value = createMonth({
+    dateObj: _placeholder,
+    weekStartsOn: 0,
+    fixedWeeks: false,
+    locale: locale.value,
+  })
+  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {
+    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({
+      months: 1,
+    })
+  }
+})
+
+watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
+  secondMonth.value = createMonth({
+    dateObj: _secondMonthPlaceholder,
+    weekStartsOn: 0,
+    fixedWeeks: false,
+    locale: locale.value,
+  })
+  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))
+    placeholder.value = placeholder.value.subtract({ months: 1 })
+})
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="
+          cn(
+            'w-[280px] justify-start text-left font-normal',
+            !value && 'text-muted-foreground',
+          )
+        "
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{
+              formatter.custom(toDate(value.start), {
+                dateStyle: "medium",
+              })
+            }}
+            -
+            {{
+              formatter.custom(toDate(value.end), {
+                dateStyle: "medium",
+              })
+            }}
+          </template>
+
+          <template v-else>
+            {{
+              formatter.custom(toDate(value.start), {
+                dateStyle: "medium",
+              })
+            }}
+          </template>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendarRoot v-slot="{ weekDays }" v-model="value" v-model:placeholder="placeholder" class="p-3">
+        <div
+          class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0"
+        >
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('first', -1)"
+              >
+                <ChevronLeft class="h-4 w-4" />
+              </button>
+              <div :class="cn('text-sm font-medium')">
+                {{
+                  formatter.fullMonthAndYear(
+                    toDate(firstMonth.value),
+                  )
+                }}
+              </div>
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('first', 1)"
+              >
+                <ChevronRight class="h-4 w-4" />
+              </button>
+            </div>
+            <RangeCalendarGrid>
+              <RangeCalendarGridHead>
+                <RangeCalendarGridRow>
+                  <RangeCalendarHeadCell
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="w-full"
+                  >
+                    {{ day }}
+                  </RangeCalendarHeadCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridHead>
+              <RangeCalendarGridBody>
+                <RangeCalendarGridRow
+                  v-for="(
+                    weekDates, index
+                  ) in firstMonth.rows"
+                  :key="`weekDate-${index}`"
+                  class="mt-2 w-full"
+                >
+                  <RangeCalendarCell
+                    v-for="weekDate in weekDates"
+                    :key="weekDate.toString()"
+                    :date="weekDate"
+                  >
+                    <RangeCalendarCellTrigger
+                      :day="weekDate"
+                      :month="firstMonth.value"
+                    />
+                  </RangeCalendarCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+          </div>
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('second', -1)"
+              >
+                <ChevronLeft class="h-4 w-4" />
+              </button>
+              <div :class="cn('text-sm font-medium')">
+                {{
+                  formatter.fullMonthAndYear(
+                    toDate(secondMonth.value),
+                  )
+                }}
+              </div>
+
+              <button
+                :class="
+                  cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                  )
+                "
+                @click="updateMonth('second', 1)"
+              >
+                <ChevronRight class="h-4 w-4" />
+              </button>
+            </div>
+            <RangeCalendarGrid>
+              <RangeCalendarGridHead>
+                <RangeCalendarGridRow>
+                  <RangeCalendarHeadCell
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="w-full"
+                  >
+                    {{ day }}
+                  </RangeCalendarHeadCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridHead>
+              <RangeCalendarGridBody>
+                <RangeCalendarGridRow
+                  v-for="(
+                    weekDates, index
+                  ) in secondMonth.rows"
+                  :key="`weekDate-${index}`"
+                  class="mt-2 w-full"
+                >
+                  <RangeCalendarCell
+                    v-for="weekDate in weekDates"
+                    :key="weekDate.toString()"
+                    :date="weekDate"
+                  >
+                    <RangeCalendarCellTrigger
+                      :day="weekDate"
+                      :month="secondMonth.value"
+                    />
+                  </RangeCalendarCell>
+                </RangeCalendarGridRow>
+              </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+          </div>
+        </div>
+      </RangeCalendarRoot>
+    </PopoverContent>
+  </Popover>
+</template>

apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue

@@ -49,7 +49,7 @@ const value = ref({
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" @update:start-value="(startDate) => value.start = startDate" />
     </PopoverContent>
   </Popover>
 </template>

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.10.3",
   "private": true,
-  "packageManager": "pnpm@8.15.6",
+  "packageManager": "pnpm@9.0.5",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -27,15 +27,15 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.13.3",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@antfu/eslint-config": "^2.15.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "bumpp": "^9.4.0",
-    "eslint": "^9.0.0",
+    "eslint": "^9.1.1",
     "lint-staged": "^15.2.2",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.13.3",
-    "typescript": "^5.4.2",
+    "taze": "^0.13.6",
+    "typescript": "^5.4.5",
     "vitest": "^0.34.6"
   },
   "commitlint": {

packages/cli/package.json

@@ -56,28 +56,28 @@
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.4",
     "lodash.template": "^4.5.0",
-    "magic-string": "^0.30.9",
+    "magic-string": "^0.30.10",
     "nypm": "^0.3.8",
     "ofetch": "^1.3.4",
     "ora": "^8.0.1",
     "pathe": "^1.1.2",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.7.0",
+    "radix-vue": "^1.7.2",
     "ts-morph": "^22.0.0",
     "tsconfig-paths": "^4.2.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.3"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "@types/diff": "^5.0.9",
+    "@types/diff": "^5.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash.template": "^4.5.3",
     "@types/node": "^20.11.30",
     "@types/prompts": "^2.4.9",
     "@vitest/ui": "^0.34.4",
     "tsup": "^8.0.2",
-    "type-fest": "^4.15.0",
-    "typescript": "^5.4.2",
+    "type-fest": "^4.16.0",
+    "typescript": "^5.4.5",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }