create-nala 3.0.0

package/template/src/components/ui/date-picker/DatePicker.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { CalendarDays, ChevronLeft, ChevronRight } from '@lucide/vue'
+
+// ─── Mini Calendar State ──────────────────────────────────────────────────────
+const today = new Date()
+const viewYear = ref(today.getFullYear())
+const viewMonth = ref(today.getMonth()) // 0-based
+
+const selectedDate = ref<Date | null>(null)
+const selectedRange = ref<{ start: Date | null; end: Date | null }>({ start: null, end: null })
+
+const isOpen = ref(false)
+const isRangeOpen = ref(false)
+
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+]
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+interface CalDay { date: Date; inMonth: boolean }
+
+function buildCalendar(year: number, month: number): CalDay[] {
+  const first = new Date(year, month, 1)
+  const last  = new Date(year, month + 1, 0)
+  const days: CalDay[] = []
+
+  // Pad from Sunday
+  for (let i = 0; i < first.getDay(); i++) {
+    const d = new Date(year, month, -first.getDay() + i + 1)
+    days.push({ date: d, inMonth: false })
+  }
+  for (let d = 1; d <= last.getDate(); d++) {
+    days.push({ date: new Date(year, month, d), inMonth: true })
+  }
+  // Pad to complete row
+  const remaining = (7 - (days.length % 7)) % 7
+  for (let i = 1; i <= remaining; i++) {
+    days.push({ date: new Date(year, month + 1, i), inMonth: false })
+  }
+  return days
+}
+
+const calendarDays = computed(() => buildCalendar(viewYear.value, viewMonth.value))
+
+function prevMonth() {
+  if (viewMonth.value === 0) { viewYear.value--; viewMonth.value = 11 }
+  else viewMonth.value--
+}
+function nextMonth() {
+  if (viewMonth.value === 11) { viewYear.value++; viewMonth.value = 0 }
+  else viewMonth.value++
+}
+
+function isSameDay(a: Date, b: Date | null) {
+  return b && a.toDateString() === b.toDateString()
+}
+function isToday(d: Date) {
+  return d.toDateString() === today.toDateString()
+}
+
+function selectDate(d: Date) {
+  selectedDate.value = d
+  isOpen.value = false
+}
+
+function formatDate(d: Date | null) {
+  if (!d) return ''
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+// ─── Range Picker Logic ──────────────────────────────────────────────────────
+function selectRange(d: Date) {
+  const { start, end } = selectedRange.value
+  if (!start || (start && end)) {
+    selectedRange.value = { start: d, end: null }
+  } else {
+    const sorted = d < start ? { start: d, end: start } : { start, end: d }
+    selectedRange.value = sorted
+    isRangeOpen.value = false
+  }
+}
+
+function isInRange(d: Date) {
+  const { start, end } = selectedRange.value
+  return start && end && d > start && d < end
+}
+function isRangeStart(d: Date) { return isSameDay(d, selectedRange.value.start) }
+function isRangeEnd(d: Date)   { return isSameDay(d, selectedRange.value.end) }
+
+function formatRange() {
+  const { start, end } = selectedRange.value
+  if (!start) return 'Pick a date range'
+  if (!end) return `${formatDate(start)} → ...`
+  return `${formatDate(start)} → ${formatDate(end)}`
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+      <!-- ── Single Date Picker ──────────────────────────────────── -->
+      <div class="space-y-1.5">
+        <Label>Deployment Date</Label>
+        <Popover v-model:open="isOpen">
+          <PopoverTrigger as-child>
+            <button
+              class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
+              :class="{ 'text-muted-foreground': !selectedDate }"
+            >
+              <span>{{ selectedDate ? formatDate(selectedDate) : 'Pick a date' }}</span>
+              <CalendarDays class="h-4 w-4 text-muted-foreground shrink-0" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0 shadow-xl" align="start">
+            <div class="p-3 w-72">
+              <!-- Month Nav -->
+              <div class="flex items-center justify-between mb-3">
+                <button @click="prevMonth" class="p-1.5 rounded-md hover:bg-accent transition-colors cursor-pointer">
+                  <ChevronLeft class="h-4 w-4" />
+                </button>
+                <span class="text-sm font-semibold">{{ MONTH_NAMES[viewMonth] }} {{ viewYear }}</span>
+                <button @click="nextMonth" class="p-1.5 rounded-md hover:bg-accent transition-colors cursor-pointer">
+                  <ChevronRight class="h-4 w-4" />
+                </button>
+              </div>
+
+              <!-- Day Headers -->
+              <div class="grid grid-cols-7 mb-1">
+                <span
+                  v-for="d in DAYS" :key="d"
+                  class="text-center text-[11px] font-medium text-muted-foreground py-1"
+                >{{ d }}</span>
+              </div>
+
+              <!-- Day Grid -->
+              <div class="grid grid-cols-7 gap-y-0.5">
+                <button
+                  v-for="(day, i) in calendarDays" :key="i"
+                  @click="selectDate(day.date)"
+                  class="h-8 w-full flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer"
+                  :class="[
+                    !day.inMonth && 'text-muted-foreground/35 hover:bg-accent/50',
+                    day.inMonth && !isSameDay(day.date, selectedDate) && !isToday(day.date) && 'hover:bg-accent',
+                    isToday(day.date) && !isSameDay(day.date, selectedDate) && 'text-primary font-semibold bg-primary/10',
+                    isSameDay(day.date, selectedDate) && 'bg-primary text-primary-foreground font-semibold hover:bg-primary/90',
+                  ]"
+                >
+                  {{ day.date.getDate() }}
+                </button>
+              </div>
+
+              <!-- Footer -->
+              <div class="mt-2 pt-2 border-t border-border flex justify-between text-xs text-muted-foreground">
+                <span>{{ selectedDate ? formatDate(selectedDate) : 'No date selected' }}</span>
+                <button v-if="selectedDate" @click="selectedDate = null; isOpen = true" class="text-primary hover:underline cursor-pointer">
+                  Clear
+                </button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <p class="text-xs text-muted-foreground">Select the scheduled deployment date.</p>
+      </div>
+
+      <!-- ── Date Range Picker ───────────────────────────────────── -->
+      <div class="space-y-1.5">
+        <Label>Maintenance Window</Label>
+        <Popover v-model:open="isRangeOpen">
+          <PopoverTrigger as-child>
+            <button
+              class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors"
+              :class="{ 'text-muted-foreground': !selectedRange.start }"
+            >
+              <span class="truncate">{{ formatRange() }}</span>
+              <CalendarDays class="h-4 w-4 text-muted-foreground shrink-0 ml-2" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0 shadow-xl" align="start">
+            <div class="p-3 w-72">
+              <!-- Month Nav -->
+              <div class="flex items-center justify-between mb-3">
+                <button @click="prevMonth" class="p-1.5 rounded-md hover:bg-accent transition-colors cursor-pointer">
+                  <ChevronLeft class="h-4 w-4" />
+                </button>
+                <span class="text-sm font-semibold">{{ MONTH_NAMES[viewMonth] }} {{ viewYear }}</span>
+                <button @click="nextMonth" class="p-1.5 rounded-md hover:bg-accent transition-colors cursor-pointer">
+                  <ChevronRight class="h-4 w-4" />
+                </button>
+              </div>
+
+              <!-- Day Headers -->
+              <div class="grid grid-cols-7 mb-1">
+                <span v-for="d in DAYS" :key="d" class="text-center text-[11px] font-medium text-muted-foreground py-1">{{ d }}</span>
+              </div>
+
+              <!-- Day Grid with range highlight -->
+              <div class="grid grid-cols-7 gap-y-0.5">
+                <button
+                  v-for="(day, i) in calendarDays" :key="i"
+                  @click="selectRange(day.date)"
+                  class="h-8 w-full flex items-center justify-center text-sm transition-colors cursor-pointer relative"
+                  :class="[
+                    !day.inMonth && 'text-muted-foreground/35',
+                    isInRange(day.date) && 'bg-primary/15 rounded-none',
+                    isRangeStart(day.date) && 'bg-primary text-primary-foreground rounded-l-md font-semibold',
+                    isRangeEnd(day.date) && 'bg-primary text-primary-foreground rounded-r-md font-semibold',
+                    !isRangeStart(day.date) && !isRangeEnd(day.date) && !isInRange(day.date) && day.inMonth && 'rounded-md hover:bg-accent',
+                    isToday(day.date) && !isRangeStart(day.date) && !isRangeEnd(day.date) && 'text-primary font-semibold',
+                  ]"
+                >
+                  {{ day.date.getDate() }}
+                </button>
+              </div>
+
+              <!-- Range Footer -->
+              <div class="mt-2 pt-2 border-t border-border text-xs text-muted-foreground">
+                <template v-if="!selectedRange.start">Click a start date</template>
+                <template v-else-if="!selectedRange.end">Now click an end date</template>
+                <div v-else class="flex justify-between">
+                  <span>{{ formatDate(selectedRange.start) }} → {{ formatDate(selectedRange.end) }}</span>
+                  <button @click="selectedRange = { start: null, end: null }" class="text-primary hover:underline cursor-pointer">Clear</button>
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <p class="text-xs text-muted-foreground">Select a start and end date for the maintenance window.</p>
+      </div>
+    </div>
+  </div>
+</template>

package/template/src/components/ui/date-picker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.vue'

package/template/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/template/src/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

package/template/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/template/src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/template/src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { DialogClose } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  showCloseButton?: boolean
+}>(), {
+  showCloseButton: false,
+})
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+    <DialogClose v-if="showCloseButton" as-child>
+      <Button variant="outline">
+        Close
+      </Button>
+    </DialogClose>
+  </div>
+</template>

package/template/src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/template/src/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

package/template/src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/template/src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>

package/template/src/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"

package/template/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

package/template/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/template/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+    disableOutsidePointerEvents: false,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      :disable-outside-pointer-events="false"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/template/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>