@dasidev/dasi-ui 1.0.0

package/src/components/tables/dropdown/DropdownTableDataKonektor.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Data Konektor')"
+          >Edit data konektor</DropdownMenuItem
+        >
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus data konektor</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableDataLabel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Data Label')">Edit data label
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus data label</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableDataSchema.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Data Schema')"
+          >Edit data schema</DropdownMenuItem
+        >
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus data schema</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableFabaPemanfaat.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2', 'openSheet3'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Grup')"
+          >Edit Pemanfaat</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus Pemanfaat</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableGroup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2', 'openSheet3'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Grup')"
+          >Edit akses grup</DropdownMenuItem
+        >
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Akses')"
+          >Sesuaikan akses</DropdownMenuItem
+        >
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet3('Sesuaikan Anggota Akses')"
+          >Tambah anggota akses</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus grup</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableHalaman.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Halaman')"
+          >Edit aktifitas</DropdownMenuItem
+        >
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Sesuaikan Akses')"
+          >Sesuaikan akses</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus halaman</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableLevel.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuShortcut } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import { EllipsisVertical, LucideEdit, LucideShieldCheck, LucideTrash2, LucideUsers, Star } from "lucide-vue-next";
+import { ref } from "vue";
+
+const confirmOpen = ref(false);
+
+defineProps(["row", "openSheet", "openSheet2", "openSheet3", "deleteItem"]);
+</script>
+
+<template>
+  <div class="flex items-center justify-end pr-1">
+    <BtnCircle>
+      <Star :stroke-width="1.6" :size="20"></Star>
+    </BtnCircle>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <BtnCircle>
+          <EllipsisVertical :size="22" />
+        </BtnCircle>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Level')">
+          <LucideEdit :size="18" :stroke-width="1" class="mr-2" />
+          <span>Edit akses level</span>
+          <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Akses')">
+          <LucideShieldCheck :size="18" :stroke-width="1.2" class="mr-2" />
+          <span>Sesuaikan akses</span>
+          <DropdownMenuShortcut>⇧⌘A</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet3('Sesuaikan Anggota Akses')">
+          <LucideUsers :size="18" :stroke-width="1.2" class="mr-2" />
+          <span>Tambah anggota</span>
+          <DropdownMenuShortcut>⇧⌘M</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer !text-red-500" @click="confirmOpen = true">
+          <LucideTrash2 :size="18" :stroke-width="1" class="mr-2" />
+          <span>Hapus akses</span>
+          <DropdownMenuShortcut>⇧⌘D</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+  <AlertDialog v-model:open="confirmOpen">
+    <AlertDialogContent class="w-96">
+      <AlertDialogHeader>
+        <AlertDialogTitle>Hapus Akses Level</AlertDialogTitle>
+        <AlertDialogDescription
+          >Apakah Anda yakin ingin menghapus <b>{{ row.original.name || "akses level" }}</b
+          >? Data terhapus akan dipindah ke dalam folder Deleted</AlertDialogDescription
+        >
+      </AlertDialogHeader>
+      <AlertDialogFooter class="pt-4">
+        <AlertDialogCancel class="hover:bg-primary_main_hover border-none text-primary_main shadow-none transition">Batal</AlertDialogCancel>
+        <AlertDialogAction v-on:click="deleteItem(row.index, row.original)" class="bg-red-500 pr-4 transition hover:bg-red-600"
+          ><LucideTrash2 :size="18" class="-ml-1 mr-2" /> Hapus Level</AlertDialogAction
+        >
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/src/components/tables/dropdown/DropdownTableOrganization.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import BtnCircle from '@/components/button/BtnCircle.vue';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { EllipsisVertical, LucideEdit, LucideShieldCheck, LucideStar, LucideTrash2 } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div class="flex items-center justify-end pr-1">
+    <BtnCircle>
+      <LucideStar :stroke-width="1.6" :size="20"/>
+    </BtnCircle>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <BtnCircle>
+          <EllipsisVertical :size="22"/>
+        </BtnCircle>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Level')">
+          <LucideEdit :size="18" :stroke-width="1" class="mr-2"/>
+          <span>Edit Organisasi</span>
+          <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Akses')">
+          <LucideShieldCheck :size="18" :stroke-width="1.2" class="mr-2"/>
+          <span>Sesuaikan Akses</span>
+          <DropdownMenuShortcut>⇧⌘A</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer !text-red-500">
+          <LucideTrash2 :size="18" :stroke-width="1" class="mr-2"/>
+          <span>Hapus Organisasi</span>
+          <DropdownMenuShortcut>⇧⌘D</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTablePengelola.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Pengelola')">Edit Pengelola</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus Pengelola</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableQueryLayer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Query Layer')">Edit query layer
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus query layer</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableSentral.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Sentral')"
+          >Edit sentral</DropdownMenuItem
+        >
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Akses')"
+          >Sesuaikan akses</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus sentral</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableWarehouse.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Gudang')"
+          >Edit Gudang</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus Gudang</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/TableDropdown.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+interface List {
+  title: string
+  trigger: () => void
+}
+
+defineProps({
+  dropdownListTop: {
+    type: Array as PropType<List[]>,
+    required: true
+  },
+  dropdownListBottom: Array as PropType<List[]>
+})
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem
+          v-for="(list, idx) in dropdownListTop"
+          :key="idx"
+          class="cursor-pointer"
+          @click="list.trigger"
+          >{{ list.title }}</DropdownMenuItem
+        >
+        <DropdownMenuSeparator v-if="dropdownListBottom" />
+        <DropdownMenuItem
+          v-for="(list, idx) in dropdownListBottom"
+          :key="idx"
+          @click="list.trigger"
+          class="cursor-pointer"
+          >{{ list?.title }}</DropdownMenuItem
+        >
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+	AccordionHeader,
+	AccordionTrigger,
+	type AccordionTriggerProps,
+} from "radix-vue";
+import { ChevronDownIcon } from "@radix-icons/vue";
+import { CircleChevronUp } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+	AccordionTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<AccordionHeader class="flex">
+		<AccordionTrigger
+			v-bind="delegatedProps"
+			:class="
+				cn(
+					'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+					props.class
+				)
+			"
+		>
+			<slot name="icon">
+				<CircleChevronUp
+					class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+				/>
+			</slot>
+			<slot />
+		</AccordionTrigger>
+	</AccordionHeader>
+</template>

package/src/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+    <slot />
+  </AlertDialogCancel>
+</template>