@geniusdynamics/ns8-ui-lib 1.0.3 → 1.0.5

package/src/components/NS/text-input/NSTextInput.vue

@@ -129,8 +129,7 @@ defineExpose({
     <label
       v-if="label || $slots.label"
       :for="inputId"
-      :class="cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      :class="cn( 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         {
           'text-destructive': errorMessage,
           'text-orange-600': warningMessage,
@@ -142,11 +141,10 @@ defineExpose({
       <slot name="label">{{ label }}</slot>
     </label>
 
-    <div class="relative">
+    <div class="tw:relative">
       <span
         v-if="prefix"
-        :class="cn(
-          'absolute left-3 top-1/2 transform -translate-y-1/2 text-sm text-muted-foreground',
+        :class="cn( 'absolute left-3 top-1/2 transform -translate-y-1/2 text-sm text-muted-foreground',
           {
             'text-destructive': errorMessage,
             'text-orange-600': warningMessage,
@@ -161,8 +159,7 @@ defineExpose({
         :id="inputId"
         ref="inputRef"
         :type="actualType"
-        :class="cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        :class="cn( 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
           {
             'pl-8': prefix,
             'pr-16': (isPassword && showPasswordToggle) || StatusIcon,
@@ -189,7 +186,7 @@ defineExpose({
 
       <div
         v-if="StatusIcon || (isPassword && showPasswordToggle)"
-        class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center gap-1 pr-3"
+        class="tw:absolute tw:right-0 tw:top-1/2 tw:transform tw:-translate-y-1/2 tw:flex tw:items-center tw:gap-1 tw:pr-3"
       >
         <component
           v-if="StatusIcon"
@@ -204,8 +201,7 @@ defineExpose({
         <button
           v-if="isPassword && showPasswordToggle"
           type="button"
-          :class="cn(
-            'text-muted-foreground hover:text-foreground transition-colors',
+          :class="cn( 'text-muted-foreground hover:text-foreground transition-colors',
             {
               'pointer-events-none': disabled
             }
@@ -214,8 +210,8 @@ defineExpose({
           @click="togglePasswordVisibility"
           :title="isPasswordVisible ? 'Hide password' : 'Show password'"
         >
-          <EyeOff v-if="isPasswordVisible" class="h-4 w-4" />
-          <Eye v-else class="h-4 w-4" />
+          <EyeOff v-if="isPasswordVisible" class="tw:h-4 tw:w-4" />
+          <Eye v-else class="tw:h-4 tw:w-4" />
         </button>
       </div>
     </div>
@@ -232,7 +228,7 @@ defineExpose({
       <component
         v-if="StatusIcon"
         :is="StatusIcon"
-        class="h-4 w-4 mt-0.5 flex-shrink-0"
+        class="tw:h-4 tw:w-4 tw:mt-0.5 tw:flex-shrink-0"
       />
       <span>{{ displayMessage }}</span>
     </p>

package/src/components/NS/toast-notification/NSToastNotification.vue

@@ -85,24 +85,24 @@ const positionClasses = computed(() => {
       <!-- Icon -->
       <component
         :is="NotificationIcon"
-        class="h-5 w-5 shrink-0"
+        class="tw:h-5 tw:w-5 tw:shrink-0"
       />
 
       <!-- Loading spinner -->
       <Loader2 
         v-if="loading"
-        class="h-5 w-5 shrink-0 animate-spin"
+        class="tw:h-5 tw:w-5 tw:shrink-0 tw:animate-spin"
       />
 
       <!-- Content -->
-      <div class="grid gap-1">
+      <div class="tw:grid tw:gap-1">
         <!-- Title -->
-        <div v-if="title || $slots.title" class="text-sm font-semibold">
+        <div v-if="title || $slots.title" class="tw:text-sm tw:font-semibold">
           <slot name="title">{{ title }}</slot>
         </div>
 
         <!-- Description -->
-        <div v-if="description || $slots.description" class="text-sm opacity-90">
+        <div v-if="description || $slots.description" class="tw:text-sm tw:opacity-90">
           <slot name="description">{{ description }}</slot>
         </div>
 
@@ -110,8 +110,7 @@ const positionClasses = computed(() => {
         <button
           v-if="actionLabel"
           type="button"
-          :class="cn(
-            'inline-flex items-center text-sm font-medium underline underline-offset-2 hover:no-underline',
+          :class="cn( 'inline-flex items-center text-sm font-medium underline underline-offset-2 hover:no-underline',
             {
               'text-destructive-foreground': variant === 'destructive',
               'text-white': ['warning', 'success', 'info'].includes(variant),
@@ -129,8 +128,7 @@ const positionClasses = computed(() => {
         v-if="showCloseButton"
         type="button"
         :aria-label="closeAriaLabel"
-        :class="cn(
-          'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+        :class="cn( 'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
           {
             'text-destructive-foreground/50 hover:text-destructive-foreground': variant === 'destructive',
             'text-white/50 hover:text-white': ['warning', 'success', 'info'].includes(variant)
@@ -138,13 +136,13 @@ const positionClasses = computed(() => {
         )"
         @click="emit('close')"
       >
-        <X class="h-4 w-4" />
+        <X class="tw:h-4 tw:w-4" />
       </button>
 
       <!-- Progress bar for auto-dismiss -->
       <div 
         v-if="duration > 0"
-        class="absolute bottom-0 left-0 h-1 bg-black/20 dark:bg-white/20 animate-[shrink_x_var(--duration)_linear_forwards]"
+        class="tw:absolute tw:bottom-0 tw:left-0 tw:h-1 tw:bg-black/20 dark:tw:bg-white/20 tw:animate-[shrink_x_var(--duration)_linear_forwards]"
         :style="{ '--duration': `${duration}ms` }"
       />
     </div>

package/src/components/NS/toggle/NSToggle.vue

@@ -94,12 +94,11 @@ const thumbClasses = computed(() => {
       <SwitchThumb :class="thumbClasses" />
     </SwitchRoot>
 
-    <div class="grid gap-1.5">
+    <div class="tw:grid tw:gap-1.5">
       <label
         v-if="label || $slots.label"
         :for="toggleId"
-        :class="cn(
-          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
+        :class="cn( 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
           {
             'sr-only': hideLabel,
             'cursor-not-allowed': disabled,
@@ -115,8 +114,7 @@ const thumbClasses = computed(() => {
 
       <div
         v-if="!hideLabel && (leftText || rightText || $slots['left-text'] || $slots['right-text'])"
-        :class="cn(
-          'flex items-center gap-2 text-xs font-medium',
+        :class="cn( 'flex items-center gap-2 text-xs font-medium',
           {
             'text-muted-foreground': !isChecked,
             'text-primary': isChecked,
@@ -130,8 +128,7 @@ const thumbClasses = computed(() => {
           <slot name="left-text">{{ leftText }}</slot>
         </span>
         
-        <div :class="cn(
-          'w-8 h-px bg-current',
+        <div :class="cn( 'w-8 h-px bg-current',
           {
             'opacity-20': !isChecked,
             'opacity-100': isChecked
@@ -145,7 +142,7 @@ const thumbClasses = computed(() => {
 
       <p
         v-if="description"
-        class="text-sm text-muted-foreground"
+        class="tw:text-sm tw:text-muted-foreground"
       >
         {{ description }}
       </p>

package/src/components/NS/wizard/NSWizard.vue

@@ -281,14 +281,14 @@ watch(currentStep, (newStep, oldStep) => {
 <template>
   <div :class="containerClasses">
     <!-- Progress bar -->
-    <div v-if="showProgressBar" class="mb-8">
-      <div class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
+    <div v-if="showProgressBar" class="tw:mb-8">
+      <div class="tw:relative tw:h-2 tw:w-full tw:overflow-hidden tw:rounded-full tw:bg-secondary">
         <div 
-          class="h-full w-full bg-primary transition-all duration-300 ease-in-out"
+          class="tw:h-full tw:w-full tw:bg-primary tw:transition-all tw:duration-300 tw:ease-in-out"
           :style="{ width: `${progressPercentage}%` }"
         />
       </div>
-      <div class="mt-2 text-sm text-muted-foreground">
+      <div class="tw:mt-2 tw:text-sm tw:text-muted-foreground">
         Step {{ currentStep + 1 }} of {{ steps.length }}
       </div>
     </div>
@@ -303,16 +303,16 @@ watch(currentStep, (newStep, oldStep) => {
           @click="goToStep(index)"
         >
           <!-- Step indicator -->
-          <div :class="getStepClasses(index)" class="w-8 h-8 text-sm font-medium">
-            <Check v-if="getStepState(index) === 'completed'" class="h-4 w-4" />
-            <component v-else-if="showStepIcons && step.icon" :is="step.icon" class="h-4 w-4" />
+          <div :class="getStepClasses(index)" class="tw:w-8 tw:h-8 tw:text-sm tw:font-medium">
+            <Check v-if="getStepState(index) === 'completed'" class="tw:h-4 tw:w-4" />
+            <component v-else-if="showStepIcons && step.icon" :is="step.icon" class="tw:h-4 tw:w-4" />
             <span v-else-if="showStepNumbers">{{ index + 1 }}</span>
           </div>
 
           <!-- Step info -->
-          <div class="text-left">
-            <div class="font-medium text-sm">{{ step.title }}</div>
-            <div v-if="step.description" class="text-xs text-muted-foreground">
+          <div class="tw:text-left">
+            <div class="tw:font-medium tw:text-sm">{{ step.title }}</div>
+            <div v-if="step.description" class="tw:text-xs tw:text-muted-foreground">
               {{ step.description }}
             </div>
           </div>
@@ -323,13 +323,13 @@ watch(currentStep, (newStep, oldStep) => {
       <Separator 
         v-if="!vertical" 
         orientation="vertical" 
-        class="hidden lg:block" 
+        class="tw:hidden lg:tw:block" 
       />
 
       <!-- Content -->
       <div :class="contentClasses">
         <!-- Current step content -->
-        <div class="space-y-6">
+        <div class="tw:space-y-6">
           <slot 
             :name="`step-${currentStepData.id}`" 
             :step="currentStepData"
@@ -344,12 +344,12 @@ watch(currentStep, (newStep, oldStep) => {
             :canSkip="canSkip"
           >
             <!-- Default step content -->
-            <div class="space-y-4">
-              <h2 class="text-xl font-semibold">{{ currentStepData.title }}</h2>
-              <p v-if="currentStepData.description" class="text-muted-foreground">
+            <div class="tw:space-y-4">
+              <h2 class="tw:text-xl tw:font-semibold">{{ currentStepData.title }}</h2>
+              <p v-if="currentStepData.description" class="tw:text-muted-foreground">
                 {{ currentStepData.description }}
               </p>
-              <div class="text-sm text-muted-foreground">
+              <div class="tw:text-sm tw:text-muted-foreground">
                 Step {{ currentStep + 1 }} of {{ steps.length }}
               </div>
             </div>
@@ -358,7 +358,7 @@ watch(currentStep, (newStep, oldStep) => {
 
         <!-- Navigation buttons -->
         <div v-if="showNavigation" :class="navigationClasses">
-          <div class="flex gap-2">
+          <div class="tw:flex tw:gap-2">
             <!-- Previous button -->
             <Button
               v-if="!hidePreviousOnFirst || !isFirstStep"
@@ -366,7 +366,7 @@ watch(currentStep, (newStep, oldStep) => {
               :disabled="!canGoPrevious"
               @click="handlePrevious"
             >
-              <ChevronLeft class="h-4 w-4" />
+              <ChevronLeft class="tw:h-4 tw:w-4" />
               {{ previousButtonText }}
             </Button>
 
@@ -381,15 +381,15 @@ watch(currentStep, (newStep, oldStep) => {
             </Button>
           </div>
 
-          <div class="flex gap-2">
+          <div class="tw:flex tw:gap-2">
             <!-- Next/Finish button -->
             <Button
               :disabled="!canGoNext"
               @click="handleNext"
             >
               {{ isLastStep ? finishButtonText : nextButtonText }}
-              <ChevronRight v-if="!isLastStep" class="h-4 w-4" />
-              <Check v-else class="h-4 w-4" />
+              <ChevronRight v-if="!isLastStep" class="tw:h-4 tw:w-4" />
+              <Check v-else class="tw:h-4 tw:w-4" />
             </Button>
           </div>
         </div>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import {
+  AccordionRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

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

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

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('tw:border-b tw:last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  AccordionHeader,
+  AccordionTrigger,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionHeader class=""tw:flex"">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:flex-1 tw:items-start tw:justify-between tw:gap-4 tw:rounded-md tw:py-4 tw:text-left tw:text-sm tw:font-medium tw:transition-all tw:outline-none tw:hover:underline tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:[&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class=""tw:text-muted-foreground tw:pointer-events-none tw:size-4 tw:shrink-0 tw:translate-y-0.5 tw:transition-transform tw:duration-200""
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertDescription.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="alert-description"
+    :class="cn('tw:text-muted-foreground tw:col-start-2 tw:grid tw:justify-items-start tw:gap-1 tw:text-sm tw:[&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertTitle.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="alert-title"
+    :class="cn('tw:col-start-2 tw:line-clamp-1 tw:min-h-4 tw:font-medium tw:tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</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,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'tw:mt-2 tw:sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class=""tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/80""
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-[50%] tw:left-[50%] tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:translate-x-[-50%] tw:translate-y-[-50%] tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

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

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

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

@@ -0,0 +1,22 @@
+<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="alert-dialog-footer"
+    :class="
+      cn(
+        'tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.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="alert-dialog-header"
+    :class="cn('tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

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