@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.6

package/src/components/NS/modal/NSModal.vue

@@ -121,48 +121,47 @@ const handleClose = () => {
       <!-- Header -->
       <div 
         v-if="title || $slots.header || showCloseButton" 
-        :class="cn(
-          'flex items-center justify-between',
+        :class="cn( 'flex items-center justify-between',
           isFullscreen ? 'border-b p-6' : 'mb-4'
         )"
       >
         <!-- Title and description -->
-        <div class="space-y-1">
+        <div class="tw:space-y-1">
           <DialogTitle 
             v-if="title || $slots.title"
-            class="text-lg font-semibold leading-none tracking-tight"
+            class="tw:text-lg tw:font-semibold tw:leading-none tw:tracking-tight"
           >
             <slot name="title">{{ title }}</slot>
           </DialogTitle>
           <DialogDescription 
             v-if="description || $slots.description"
-            class="text-sm text-muted-foreground"
+            class="tw:text-sm tw:text-muted-foreground"
           >
             <slot name="description">{{ description }}</slot>
           </DialogDescription>
         </div>
 
         <!-- Close button -->
-        <div class="flex items-center gap-2">
+        <div class="tw:flex tw:items-center tw:gap-2">
           <!-- Fullscreen toggle -->
           <button
             v-if="!fullscreen"
             type="button"
-            class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            class="tw:rounded-sm tw:opacity-70 tw:ring-offset-background tw:transition-opacity hover:tw:opacity-100 focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-ring focus:tw:ring-offset-2 disabled:tw:pointer-events-none"
             :title="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
             @click="isFullscreen = !isFullscreen"
           >
-            <Maximize2 v-if="!isFullscreen" class="h-4 w-4" />
-            <Minimize2 v-else class="h-4 w-4" />
+            <Maximize2 v-if="!isFullscreen" class="tw:h-4 tw:w-4" />
+            <Minimize2 v-else class="tw:h-4 tw:w-4" />
           </button>
 
           <!-- Close button -->
           <DialogClose
             v-if="showCloseButton && !persistent"
-            class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            class="tw:rounded-sm tw:opacity-70 tw:ring-offset-background tw:transition-opacity hover:tw:opacity-100 focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-ring focus:tw:ring-offset-2 disabled:tw:pointer-events-none"
           >
-            <X class="h-4 w-4" />
-            <span class="sr-only">Close</span>
+            <X class="tw:h-4 tw:w-4" />
+            <span class="tw:sr-only">Close</span>
           </DialogClose>
         </div>
       </div>
@@ -181,8 +180,7 @@ const handleClose = () => {
       <!-- Default actions -->
       <div 
         v-if="$slots.actions" 
-        :class="cn(
-          'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        :class="cn( 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
           isFullscreen ? 'border-t p-6 mt-auto' : 'mt-6'
         )"
       >

package/src/components/NS/modal/NSModalTrigger.vue

@@ -59,7 +59,7 @@ const triggerRef = ref<HTMLElement>()
       v-if="!$slots.trigger"
       ref="triggerRef"
       @click="isOpen = !isOpen"
-      class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90"
+      class="tw:inline-flex tw:items-center tw:justify-center tw:rounded-md tw:text-sm tw:font-medium tw:transition-colors focus-visible:tw:outline-none focus-visible:tw:ring-2 focus-visible:tw:ring-ring focus-visible:tw:ring-offset-2 disabled:tw:pointer-events-none disabled:tw:opacity-50 tw:bg-primary tw:text-primary-foreground hover:tw:bg-primary/90"
     >
       Open Modal
     </button>

package/src/components/NS/pagination/NSPagination.vue

@@ -170,13 +170,13 @@ const handleJumperChange = (event: Event) => {
 <template>
   <div :class="containerClasses">
     <!-- Total items display -->
-    <div v-if="showTotal && totalItems" class="text-sm text-muted-foreground">
+    <div v-if="showTotal && totalItems" class="tw:text-sm tw:text-muted-foreground">
       Total: {{ totalItems }} items
     </div>
 
     <!-- Page size changer -->
-    <div v-if="showSizeChanger" class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Items per page:</span>
+    <div v-if="showSizeChanger" class="tw:flex tw:items-center tw:gap-2">
+      <span class="tw:text-sm tw:text-muted-foreground">Items per page:</span>
       <select 
         v-model="itemsPerPageInternal"
         :disabled="disabled"
@@ -189,7 +189,7 @@ const handleJumperChange = (event: Event) => {
     </div>
 
     <!-- Pagination buttons -->
-    <div class="flex items-center gap-1">
+    <div class="tw:flex tw:items-center tw:gap-1">
       <!-- Previous button -->
       <button
         :class="buttonClasses"
@@ -197,7 +197,7 @@ const handleJumperChange = (event: Event) => {
         @click="handlePrev"
         aria-label="Previous page"
       >
-        <ChevronLeft class="h-4 w-4" />
+        <ChevronLeft class="tw:h-4 tw:w-4" />
       </button>
 
       <!-- Page numbers -->
@@ -212,9 +212,9 @@ const handleJumperChange = (event: Event) => {
         </button>
         <span
           v-else
-          class="flex items-center justify-center h-8 w-8 text-sm text-muted-foreground"
+          class="tw:flex tw:items-center tw:justify-center tw:h-8 tw:w-8 tw:text-sm tw:text-muted-foreground"
         >
-          <MoreHorizontal class="h-4 w-4" />
+          <MoreHorizontal class="tw:h-4 tw:w-4" />
         </span>
       </template>
 
@@ -225,13 +225,13 @@ const handleJumperChange = (event: Event) => {
         @click="handleNext"
         aria-label="Next page"
       >
-        <ChevronRight class="h-4 w-4" />
+        <ChevronRight class="tw:h-4 tw:w-4" />
       </button>
     </div>
 
     <!-- Quick jumper -->
-    <div v-if="showQuickJumper" class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Go to page:</span>
+    <div v-if="showQuickJumper" class="tw:flex tw:items-center tw:gap-2">
+      <span class="tw:text-sm tw:text-muted-foreground">Go to page:</span>
       <input
         type="number"
         :min="1"

package/src/components/NS/progress/NSProgress.vue

@@ -71,9 +71,9 @@ const labelClasses = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="tw:space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
       </div>
@@ -94,7 +94,7 @@ const labelClasses = computed(() => {
     </div>
 
     <!-- Value display -->
-    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+    <div v-if="$slots.value" class="tw:text-sm tw:text-muted-foreground">
       <slot name="value" :value="value" :percentage="percentage" />
     </div>
   </div>

package/src/components/NS/progress/NSProgressBar.vue

@@ -78,9 +78,9 @@ const labelClasses = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="tw:space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
       </div>
@@ -101,13 +101,13 @@ const labelClasses = computed(() => {
         <!-- Animated shimmer effect -->
         <div 
           v-if="animated && !indeterminate" 
-          class="h-full w-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_ease-in-out_infinite]"
+          class="tw:h-full tw:w-full tw:bg-gradient-to-r tw:from-transparent tw:via-white/20 tw:to-transparent tw:animate-[shimmer_2s_ease-in-out_infinite]"
         />
       </div>
     </div>
 
     <!-- Value display -->
-    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+    <div v-if="$slots.value" class="tw:text-sm tw:text-muted-foreground">
       <slot name="value" :value="value" :percentage="percentage" />
     </div>
   </div>

package/src/components/NS/slider/NSByteSlider.vue

@@ -105,7 +105,7 @@ const decimals = computed(() => {
     <!-- Label -->
     <div 
       v-if="showLabel && (label || $slots.label)" 
-      class="flex items-center justify-between mb-2"
+      class="tw:flex tw:items-center tw:justify-between tw:mb-2"
     >
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
@@ -131,13 +131,13 @@ const decimals = computed(() => {
     </SliderRoot>
 
     <!-- Scale markers for byte units -->
-    <div class="relative mt-2 flex justify-between text-xs text-muted-foreground">
+    <div class="tw:relative tw:mt-2 tw:flex tw:justify-between tw:text-xs tw:text-muted-foreground">
       <span v-if="showByteUnits">{{ formatBytes(min) }}</span>
       <span v-if="showByteUnits">{{ formatBytes(max) }}</span>
     </div>
 
     <!-- Custom value display -->
-    <div v-if="$slots.value" class="mt-2">
+    <div v-if="$slots.value" class="tw:mt-2">
       <slot name="value" :value="value" :display-value="displayValue" />
     </div>
   </div>

package/src/components/NS/slider/NSSlider.vue

@@ -104,7 +104,7 @@ const valueClasses = computed(() => {
     <!-- Label -->
     <div 
       v-if="showLabel && (label || $slots.label)" 
-      class="flex items-center justify-between mb-2"
+      class="tw:flex tw:items-center tw:justify-between tw:mb-2"
     >
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
@@ -135,7 +135,7 @@ const valueClasses = computed(() => {
     </SliderRoot>
 
     <!-- Custom value display -->
-    <div v-if="$slots.value" class="mt-2">
+    <div v-if="$slots.value" class="tw:mt-2">
       <slot name="value" :value="value" :display-value="displayValue" />
     </div>
   </div>

package/src/components/NS/tag/NSTag.vue

@@ -99,21 +99,21 @@ const handleKeydown = (event: KeyboardEvent) => {
     tabindex="0"
   >
     <!-- Icon slot/component -->
-    <div v-if="icon && !isFilter" class="flex items-center justify-center">
+    <div v-if="icon && !isFilter" class="tw:flex tw:items-center tw:justify-center">
       <component 
         v-if="typeof icon === 'object'" 
         :is="icon" 
-        class="h-3 w-3" 
+        class="tw:h-3 tw:w-3" 
       />
       <div 
         v-else-if="typeof icon === 'string'" 
         v-html="icon" 
-        class="h-3 w-3" 
+        class="tw:h-3 tw:w-3" 
       />
     </div>
 
     <!-- Label content -->
-    <span class="truncate max-w-[200px]">
+    <span class="tw:truncate tw:max-w-[200px]">
       <slot>{{ label }}</slot>
     </span>
 
@@ -121,8 +121,7 @@ const handleKeydown = (event: KeyboardEvent) => {
     <button
       v-if="isFilter"
       type="button"
-      :class="cn(
-        'flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors',
+      :class="cn( 'flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors',
         'ml-1 -mr-1 h-4 w-4 p-0',
         {
           'opacity-50 cursor-not-allowed': disabled,
@@ -133,7 +132,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       :title="clearAriaLabel"
       @click="handleRemove"
     >
-      <X class="h-3 w-3" />
+      <X class="tw:h-3 tw:w-3" />
     </button>
   </component>
 </template>

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>