@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/category-breakdown-metric.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import Tooltip from './tooltip.vue'
+import TooltipContent from './tooltip-content.vue'
+import TooltipProvider from './tooltip-provider.vue'
+import TooltipTrigger from './tooltip-trigger.vue'
+
+type Category = {
+  name: string
+  label?: string
+  color: string
+}
+
+
+
+const props = defineProps({
+  title: String,
+  iconName: String,
+  categories: {
+    type: Array as () => Category[],
+    required: true
+  },
+  data: {
+    type: Object as () => Record<string, number>,
+    required: true
+  },
+  isLoading: Boolean
+})
+
+const nonZeroCategories = computed(() => props.categories?.filter(c => (props.data[c.name] ?? 0) > 0))
+const total = computed(() => nonZeroCategories.value?.reduce((sum, cat) => sum + (props.data[cat.name] || 0), 0))
+
+const categoryPositions = computed(() => {
+  let cumulativePercentage = 0
+  return nonZeroCategories.value?.map((category, index) => {
+    const value = props.data[category.name] || 0
+    const proportion = total.value > 0 ? value / total.value : 0
+    const percentage = proportion * 100
+    const boundaryPosition = cumulativePercentage
+    cumulativePercentage += percentage
+    return {
+      ...category,
+      value,
+      boundaryPosition,
+      percentage,
+      index
+    }
+  })
+})
+
+const MIN_LABEL_WIDTH_PCT = 24
+const showLabel = computed(() => {
+  const arr = categoryPositions.value?.map(() => true)
+  for (let i = 0; i < categoryPositions.value?.length - 1; i++) {
+    const cur = categoryPositions.value[i]
+    const next = categoryPositions.value[i + 1]
+    const segmentWidthPct = next.boundaryPosition - cur.boundaryPosition
+    if (segmentWidthPct < MIN_LABEL_WIDTH_PCT) {
+      arr[i] = false
+    }
+  }
+  if (categoryPositions.value?.length > 0) {
+    const last = categoryPositions.value[categoryPositions.value?.length - 1]
+    const lastWidthPct = 100 - last.boundaryPosition
+    if (lastWidthPct < MIN_LABEL_WIDTH_PCT) {
+      arr[categoryPositions.value?.length - 1] = false
+    }
+  }
+  return arr
+})
+
+const visibleCategories = computed(() => {
+  return categoryPositions.value?.map((category, index) => {
+    if (index === categoryPositions.value?.length - 1) {
+      return { ...category, isVisible: true }
+    }
+    const nextCategory = categoryPositions.value[index + 1]
+    const minSpacingNeeded = 15
+    const spaceAvailable = nextCategory.boundaryPosition - category.boundaryPosition
+    const isVisible = spaceAvailable >= minSpacingNeeded
+    return { ...category, isVisible }
+  })
+})
+
+const BAR_COUNT = 74
+const bars = computed(() => {
+  const arr: Array<{ color: string; position: number }> = []
+  let currentPosition = 0
+  props.categories?.forEach(category => {
+    const value = props.data[category.name] || 0
+    const isNonZero = nonZeroCategories.value.find(c => c.name === category.name)
+    const proportion = total.value > 0 ? (isNonZero ? value / total.value : 0) : 0
+    const barCount = Math.round(proportion * BAR_COUNT)
+    for (let i = 0; i < barCount; i++) {
+      arr.push({ color: category.color, position: currentPosition + i })
+    }
+    currentPosition += barCount
+  })
+  while (arr?.length < BAR_COUNT) {
+    let lastNonZero
+    if (nonZeroCategories.value) lastNonZero = nonZeroCategories.value[nonZeroCategories.value?.length - 1]
+    const fallback = lastNonZero?.color || (props.categories && props.categories[props.categories?.length - 1]?.color) || '#9ca3af'
+    arr.push({ color: fallback, position: arr?.length })
+  }
+  return arr
+})
+
+const isEmpty = computed(() => total.value === 0)
+</script>
+
+<template>
+  <div v-if="isEmpty" class="relative w-full h-[75px] flex items-center justify-center bg-gray-800 rounded-md">
+    <span class="text-gray-400 text-sm">No data available</span>
+  </div>
+  <TooltipProvider v-else>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <div class="relative w-full h-[75px] cursor-help select-none">
+          <!-- Labels -->
+          <template v-for="(category, index) in categoryPositions" :key="category.name">
+            <div v-if="showLabel[index]">
+              <div
+                v-if="index !== categoryPositions?.length - 1"
+                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px] items-start"
+                :style="{ left: category.boundaryPosition + '%', transform: 'translateX(8px)' }"
+              >
+                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
+                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
+              </div>
+              <div
+                v-else
+                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px]"
+                :style="{
+                  left: category.boundaryPosition + '%',
+                  transform: (100 - category.boundaryPosition < 6) ? 'translateX(calc(-100% - 8px))' : 'translateX(8px)',
+                  textAlign: (100 - category.boundaryPosition < 6) ? 'right' : 'left'
+                }"
+              >
+                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
+                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
+              </div>
+            </div>
+          </template>
+
+          <!-- Boundary separators -->
+          <template v-for="(category, index) in categoryPositions" :key="'line-' + index">
+            <div v-if="index !== 0" class="absolute flex h-[75px] items-center justify-center top-0 w-[0px] overflow-visible" :style="{ left: categoryPositions.slice(0, index).reduce((sum, cat) => sum + cat.percentage, 0) + '%' }">
+              <div class="flex-none" style="rotate: 90deg">
+                <div class="h-0 relative w-[75px]">
+                  <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
+                    <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
+                      <line :stroke="category.color" x2="75" y1="0.5" y2="0.5" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- Left edge vertical line -->
+          <div class="absolute flex h-[75px] items-center justify-center left-0 top-0 w-[0px]">
+            <div class="flex-none" style="rotate: 90deg">
+              <div class="h-0 relative w-[75px]">
+                <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
+                  <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
+                    <line :stroke="(visibleCategories && visibleCategories[0]?.color) || (nonZeroCategories && nonZeroCategories[0]?.color) || '#9ca3af'" x2="75" y1="0.5" y2="0.5" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bars -->
+          <div class="absolute box-border content-stretch flex items-center justify-between left-[0.33px] overflow-clip px-[2px] py-0 right-[0.33px] rounded-[2px] top-[51px]">
+            <div v-for="(bar, index) in bars" :key="index" class="flex items-center justify-center relative shrink-0">
+              <div class="flex-none rotate-[180deg] scale-y-[-100%]">
+                <div class="h-[24px] w-px" :style="{ backgroundColor: isEmpty ? '#9ca3af' : bar.color }" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent variant="outline">
+        <div class="space-y-2">
+          <p class="font-medium text-sm">Threat Breakdown</p>
+          <div class="space-y-1">
+            <div v-for="category in props.categories" :key="category.name" class="flex items-center justify-between gap-4">
+              <div class="flex items-center gap-2">
+                <div class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: category.color }" />
+                <span class="text-sm">{{ category.label || category.name }}</span>
+              </div>
+              <span class="text-sm font-mono" :style="{ color: category.color }">{{ props.data[category.name] || 0 }}</span>
+            </div>
+          </div>
+          <div class="border-t pt-2 mt-2">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium">Total</span>
+              <span class="text-sm font-mono font-medium">{{ props.categories.reduce((sum, c) => sum + (props.data[c.name] || 0), 0).toLocaleString() }}</span>
+            </div>
+          </div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/src/ui/checkbox.vue

@@ -0,0 +1,84 @@
+
+
+<template>
+  <div v-if="label" class="space-y-2">
+    <div class="flex items-center space-x-2">
+      <span class="relative flex items-center">
+        <input
+          id="with-label"
+          data-slot="checkbox"
+          type="checkbox"
+          :checked="modelValue"
+          :disabled="disabled"
+          :aria-invalid="validationState === 'error' ? 'true' : undefined"
+          :class="checkboxClass"
+          v-bind="$attrs"
+          @change="$emit('update:modelValue', $event.target.checked)"
+        />
+        <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
+          <CheckIcon class="h-3.5 w-3.5" />
+        </span>
+      </span>
+      <Label htmlFor="with-label">{{ label }}</Label>
+    </div>
+    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckIcon class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
+      {{ validationText }}
+    </p>
+  </div>
+  <div v-else class="space-y-2">
+    <span class="relative flex items-center">
+      <input
+        data-slot="checkbox"
+        type="checkbox"
+        :checked="modelValue"
+        :disabled="disabled"
+        :aria-invalid="validationState === 'error' ? 'true' : undefined"
+        :class="checkboxClass"
+        v-bind="$attrs"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+      <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
+        <CheckIcon class="h-3.5 w-3.5" />
+      </span>
+    </span>
+    <slot name="label" />
+    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckIcon class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
+      {{ validationText }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Label from './label.vue';
+import CheckIcon from './icons/Check.vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  validationState: { type: String, default: undefined }, // 'success' | 'error'
+  validationText: { type: String, default: '' },
+  id: { type: String, default: undefined },
+  class: { type: String, default: '' },
+});
+
+const computedId = computed(() => props.id || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
+
+const checkboxClass = computed(() => [
+  'peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+  props.validationState === 'error' ? 'border-red-500 data-[state=checked]:bg-red-500' : '',
+  props.validationState === 'success' ? 'border-green-500 data-[state=checked]:bg-green-500' : '',
+  props.class,
+]);
+</script>

package/src/ui/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/ui/dialog-body.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="dialog-body"
+    :class="['p-4 space-y-4', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-close.vue

@@ -0,0 +1,9 @@
+<template>
+  <DialogClose v-bind="$attrs">
+    <slot />
+  </DialogClose>
+</template>
+
+<script setup>
+import { DialogClose } from "reka-ui"
+</script>

package/src/ui/dialog-content.vue

@@ -0,0 +1,36 @@
+<template>
+  <DialogContent data-slot="dialog-content" :class="[
+    '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%] rounded-lg border shadow-lg duration-200 sm:max-w-lg',
+    dialogSizeVariants[size],
+    $attrs.class
+  ]" v-bind="$attrs">
+    <slot />
+    <DialogClose
+      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]:size-4">
+      <X />
+      <span class="sr-only">Close</span>
+    </DialogClose>
+  </DialogContent>
+</template>
+
+<script setup>
+import { DialogContent, DialogClose } from '@/shadcn/dialog';
+import { X } from 'lucide-vue-next';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'lg',
+  },
+});
+
+const dialogSizeVariants = {
+  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
+  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
+  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
+  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
+  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
+  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
+  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
+};
+</script>

package/src/ui/dialog-description.vue

@@ -0,0 +1,13 @@
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    :class="['text-muted-foreground text-sm', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<script setup>
+import { DialogDescription } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog-footer.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="['flex flex-col-reverse gap-2 sm:flex-row sm:justify-end border-t p-2', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-header.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-overlay.vue

@@ -0,0 +1,14 @@
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    :class="[
+      '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/50',
+      $attrs.class
+    ]"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup>
+import { DialogOverlay } from 'reka-ui'
+</script>

package/src/ui/dialog-portal.vue

@@ -0,0 +1,9 @@
+<template>
+  <DialogPortal v-bind="$attrs">
+    <slot />
+  </DialogPortal>
+</template>
+
+<script setup>
+import { DialogPortal } from "reka-ui"
+</script>

package/src/ui/dialog-title.vue

@@ -0,0 +1,13 @@
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    :class="['text-lg leading-none font-semibold', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </DialogTitle>
+</template>
+
+<script setup>
+import { DialogTitle } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog-trigger.vue

@@ -0,0 +1,9 @@
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>
+
+<script setup>
+import { DialogTrigger } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog.vue

@@ -0,0 +1,9 @@
+<template>
+  <Dialog v-bind="$attrs">
+    <slot />
+  </Dialog>
+</template>
+
+<script setup>
+import { Dialog } from '@/shadcn/dialog';
+</script>

package/src/ui/dismissible-badges-demo.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref } from 'vue';
+import Badge from './badge.vue';
+import Button from './button.vue';
+import { CheckCircle } from 'lucide-vue-next';
+
+const initialTags = [
+  { id: 1, label: 'React', variant: 'soft-primary', size: 'md' },
+  { id: 2, label: 'TypeScript', variant: 'soft-info', size: 'md' },
+  { id: 3, label: 'Design System', variant: 'soft-teal', size: 'md' },
+  { id: 4, label: 'UI/UX', variant: 'soft-pink', size: 'md' },
+  { id: 5, label: 'Accessibility', variant: 'soft-success', size: 'md' },
+  { id: 6, label: 'Performance', variant: 'soft-warning', size: 'md' },
+];
+
+const initialFilters = [
+  { id: 1, label: 'Active', variant: 'soft-success', size: 'md' },
+  { id: 2, label: 'Pending', variant: 'soft-warning', size: 'md' },
+  { id: 3, label: 'Draft', variant: 'soft-neutral', size: 'md' },
+];
+
+const tags = ref([...initialTags]);
+const filters = ref([...initialFilters]);
+
+function removeTag(id) {
+  tags.value = tags.value.filter(tag => tag.id !== id);
+}
+function removeFilter(id) {
+  filters.value = filters.value.filter(filter => filter.id !== id);
+}
+function resetTags() {
+  tags.value = [...initialTags];
+}
+function resetFilters() {
+  filters.value = [...initialFilters];
+}
+</script>
+
+<template>
+  <div class="space-y-6 p-6 border rounded-lg">
+    <div>
+      <div class="flex items-center justify-between mb-3">
+        <h4 class="font-medium">Project Tags</h4>
+        <Button variant="outline" size="sm" @click="resetTags" :disabled="tags.length === initialTags.length">
+          Reset Tags
+        </Button>
+      </div>
+      <div class="flex flex-wrap gap-2 min-h-[2rem]">
+        <template v-if="tags.length > 0">
+          <Badge
+            v-for="tag in tags"
+            :key="tag.id"
+            :variant="tag.variant"
+            :size="tag.size"
+            dismissible
+            @dismiss="removeTag(tag.id)"
+          >
+            {{ tag.label }}
+          </Badge>
+        </template>
+        <p v-else class="text-sm text-muted-foreground">No tags selected</p>
+      </div>
+    </div>
+
+    <div>
+      <div class="flex items-center justify-between mb-3">
+        <h4 class="font-medium">Applied Filters</h4>
+        <Button variant="outline" size="sm" @click="resetFilters" :disabled="filters.length === initialFilters.length">
+          Reset Filters
+        </Button>
+      </div>
+      <div class="flex flex-wrap gap-2 min-h-[2rem]">
+        <template v-if="filters.length > 0">
+          <Badge
+            v-for="filter in filters"
+            :key="filter.id"
+            :variant="filter.variant"
+            :size="filter.size"
+            dismissible
+            @dismiss="removeFilter(filter.id)"
+          >
+            <CheckCircle />
+            {{ filter.label }}
+          </Badge>
+        </template>
+        <p v-else class="text-sm text-muted-foreground">No filters applied</p>
+      </div>
+    </div>
+
+    <div class="text-sm text-muted-foreground">
+      <p>Click the × button on any badge to remove it</p>
+    </div>
+  </div>
+</template>

package/src/ui/drawer-content.vue

@@ -0,0 +1,53 @@
+<script setup>
+// DrawerContent.vue - Vue migration of DrawerContent from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+  direction: {
+    type: String,
+    default: 'right',
+  },
+  class: String,
+});
+
+const drawerSizeVariants = {
+  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
+  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
+  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
+  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
+  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
+  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
+  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
+};
+
+const contentClass = computed(() => {
+  return [
+    'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+    drawerSizeVariants[props.size],
+    props.class,
+  ].join(' ');
+});
+</script>
+
+<template>
+  <DrawerPortal data-slot="drawer-portal">
+    <DrawerOverlay data-slot="drawer-overlay" />
+    <DrawerContent
+      v-bind="$attrs"
+      :class="contentClass"
+      data-slot="drawer-content"
+    >
+      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer content and variants here */
+</style>

package/src/ui/drawer-description.vue

@@ -0,0 +1,23 @@
+<script setup>
+// DrawerDescription.vue - Vue migration of DrawerDescription from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
+import { computed } from 'vue';
+
+defineProps({
+  class: String,
+});
+
+const descClass = computed(() => {
+  return ['text-muted-foreground text-sm', $props.class].join(' ');
+});
+</script>
+
+<template>
+  <VaulDrawerDescription v-bind="$attrs" :class="descClass" data-slot="drawer-description">
+    <slot />
+  </VaulDrawerDescription>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer description here */
+</style>

package/src/ui/drawer-footer.vue

@@ -0,0 +1,22 @@
+<script setup>
+// DrawerFooter.vue - Vue migration of DrawerFooter from drawer.tsx
+import { computed } from 'vue';
+
+defineProps({
+  class: String,
+});
+
+const footerClass = computed(() => {
+  return ['mt-auto flex flex-col gap-2 p-4', $props.class].join(' ');
+});
+</script>
+
+<template>
+  <div :class="footerClass" data-slot="drawer-footer">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer footer here */
+</style>