@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.8

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="tw:text-sm tw:text-muted-foreground">
+    <div v-if="showTotal && totalItems" class="text-sm text-muted-foreground">
       Total: {{ totalItems }} items
     </div>
 
     <!-- Page size changer -->
-    <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>
+    <div v-if="showSizeChanger" class="flex items-center gap-2">
+      <span class="text-sm 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="tw:flex tw:items-center tw:gap-1">
+    <div class="flex items-center gap-1">
       <!-- Previous button -->
       <button
         :class="buttonClasses"
@@ -197,7 +197,7 @@ const handleJumperChange = (event: Event) => {
         @click="handlePrev"
         aria-label="Previous page"
       >
-        <ChevronLeft class="tw:h-4 tw:w-4" />
+        <ChevronLeft class="h-4 w-4" />
       </button>
 
       <!-- Page numbers -->
@@ -212,9 +212,9 @@ const handleJumperChange = (event: Event) => {
         </button>
         <span
           v-else
-          class="tw:flex tw:items-center tw:justify-center tw:h-8 tw:w-8 tw:text-sm tw:text-muted-foreground"
+          class="flex items-center justify-center h-8 w-8 text-sm text-muted-foreground"
         >
-          <MoreHorizontal class="tw:h-4 tw:w-4" />
+          <MoreHorizontal class="h-4 w-4" />
         </span>
       </template>
 
@@ -225,13 +225,13 @@ const handleJumperChange = (event: Event) => {
         @click="handleNext"
         aria-label="Next page"
       >
-        <ChevronRight class="tw:h-4 tw:w-4" />
+        <ChevronRight class="h-4 w-4" />
       </button>
     </div>
 
     <!-- Quick jumper -->
-    <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>
+    <div v-if="showQuickJumper" class="flex items-center gap-2">
+      <span class="text-sm 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="tw:space-y-2">
+  <div class="space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="flex items-center 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="tw:text-sm tw:text-muted-foreground">
+    <div v-if="$slots.value" class="text-sm 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="tw:space-y-2">
+  <div class="space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="flex items-center 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="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]"
+          class="h-full w-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_ease-in-out_infinite]"
         />
       </div>
     </div>
 
     <!-- Value display -->
-    <div v-if="$slots.value" class="tw:text-sm tw:text-muted-foreground">
+    <div v-if="$slots.value" class="text-sm 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="tw:flex tw:items-center tw:justify-between tw:mb-2"
+      class="flex items-center justify-between 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="tw:relative tw:mt-2 tw:flex tw:justify-between tw:text-xs tw:text-muted-foreground">
+    <div class="relative mt-2 flex justify-between text-xs 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="tw:mt-2">
+    <div v-if="$slots.value" class="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="tw:flex tw:items-center tw:justify-between tw:mb-2"
+      class="flex items-center justify-between 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="tw:mt-2">
+    <div v-if="$slots.value" class="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="tw:flex tw:items-center tw:justify-center">
+    <div v-if="icon && !isFilter" class="flex items-center justify-center">
       <component 
         v-if="typeof icon === 'object'" 
         :is="icon" 
-        class="tw:h-3 tw:w-3" 
+        class="h-3 w-3" 
       />
       <div 
         v-else-if="typeof icon === 'string'" 
         v-html="icon" 
-        class="tw:h-3 tw:w-3" 
+        class="h-3 w-3" 
       />
     </div>
 
     <!-- Label content -->
-    <span class="tw:truncate tw:max-w-[200px]">
+    <span class="truncate max-w-[200px]">
       <slot>{{ label }}</slot>
     </span>
 
@@ -132,7 +132,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       :title="clearAriaLabel"
       @click="handleRemove"
     >
-      <X class="tw:h-3 tw:w-3" />
+      <X class="h-3 w-3" />
     </button>
   </component>
 </template>

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

@@ -141,7 +141,7 @@ defineExpose({
       <slot name="label">{{ label }}</slot>
     </label>
 
-    <div class="tw:relative">
+    <div class="relative">
       <span
         v-if="prefix"
         :class="cn( 'absolute left-3 top-1/2 transform -translate-y-1/2 text-sm text-muted-foreground',
@@ -186,7 +186,7 @@ defineExpose({
 
       <div
         v-if="StatusIcon || (isPassword && showPasswordToggle)"
-        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"
+        class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center gap-1 pr-3"
       >
         <component
           v-if="StatusIcon"
@@ -210,8 +210,8 @@ defineExpose({
           @click="togglePasswordVisibility"
           :title="isPasswordVisible ? 'Hide password' : 'Show password'"
         >
-          <EyeOff v-if="isPasswordVisible" class="tw:h-4 tw:w-4" />
-          <Eye v-else class="tw:h-4 tw:w-4" />
+          <EyeOff v-if="isPasswordVisible" class="h-4 w-4" />
+          <Eye v-else class="h-4 w-4" />
         </button>
       </div>
     </div>
@@ -228,7 +228,7 @@ defineExpose({
       <component
         v-if="StatusIcon"
         :is="StatusIcon"
-        class="tw:h-4 tw:w-4 tw:mt-0.5 tw:flex-shrink-0"
+        class="h-4 w-4 mt-0.5 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="tw:h-5 tw:w-5 tw:shrink-0"
+        class="h-5 w-5 shrink-0"
       />
 
       <!-- Loading spinner -->
       <Loader2 
         v-if="loading"
-        class="tw:h-5 tw:w-5 tw:shrink-0 tw:animate-spin"
+        class="h-5 w-5 shrink-0 animate-spin"
       />
 
       <!-- Content -->
-      <div class="tw:grid tw:gap-1">
+      <div class="grid gap-1">
         <!-- Title -->
-        <div v-if="title || $slots.title" class="tw:text-sm tw:font-semibold">
+        <div v-if="title || $slots.title" class="text-sm font-semibold">
           <slot name="title">{{ title }}</slot>
         </div>
 
         <!-- Description -->
-        <div v-if="description || $slots.description" class="tw:text-sm tw:opacity-90">
+        <div v-if="description || $slots.description" class="text-sm opacity-90">
           <slot name="description">{{ description }}</slot>
         </div>
 
@@ -136,13 +136,13 @@ const positionClasses = computed(() => {
         )"
         @click="emit('close')"
       >
-        <X class="tw:h-4 tw:w-4" />
+        <X class="h-4 w-4" />
       </button>
 
       <!-- Progress bar for auto-dismiss -->
       <div 
         v-if="duration > 0"
-        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]"
+        class="absolute bottom-0 left-0 h-1 bg-black/20 dark:bg-white/20 animate-[shrink_x_var(--duration)_linear_forwards]"
         :style="{ '--duration': `${duration}ms` }"
       />
     </div>

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

@@ -94,7 +94,7 @@ const thumbClasses = computed(() => {
       <SwitchThumb :class="thumbClasses" />
     </SwitchRoot>
 
-    <div class="tw:grid tw:gap-1.5">
+    <div class="grid gap-1.5">
       <label
         v-if="label || $slots.label"
         :for="toggleId"
@@ -142,7 +142,7 @@ const thumbClasses = computed(() => {
 
       <p
         v-if="description"
-        class="tw:text-sm tw:text-muted-foreground"
+        class="text-sm 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="tw:mb-8">
-      <div class="tw:relative tw:h-2 tw:w-full tw:overflow-hidden tw:rounded-full tw:bg-secondary">
+    <div v-if="showProgressBar" class="mb-8">
+      <div class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
         <div 
-          class="tw:h-full tw:w-full tw:bg-primary tw:transition-all tw:duration-300 tw:ease-in-out"
+          class="h-full w-full bg-primary transition-all duration-300 ease-in-out"
           :style="{ width: `${progressPercentage}%` }"
         />
       </div>
-      <div class="tw:mt-2 tw:text-sm tw:text-muted-foreground">
+      <div class="mt-2 text-sm 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="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" />
+          <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" />
             <span v-else-if="showStepNumbers">{{ index + 1 }}</span>
           </div>
 
           <!-- Step info -->
-          <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">
+          <div class="text-left">
+            <div class="font-medium text-sm">{{ step.title }}</div>
+            <div v-if="step.description" class="text-xs text-muted-foreground">
               {{ step.description }}
             </div>
           </div>
@@ -323,13 +323,13 @@ watch(currentStep, (newStep, oldStep) => {
       <Separator 
         v-if="!vertical" 
         orientation="vertical" 
-        class="tw:hidden lg:tw:block" 
+        class="hidden lg:block" 
       />
 
       <!-- Content -->
       <div :class="contentClasses">
         <!-- Current step content -->
-        <div class="tw:space-y-6">
+        <div class="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="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">
+            <div class="space-y-4">
+              <h2 class="text-xl font-semibold">{{ currentStepData.title }}</h2>
+              <p v-if="currentStepData.description" class="text-muted-foreground">
                 {{ currentStepData.description }}
               </p>
-              <div class="tw:text-sm tw:text-muted-foreground">
+              <div class="text-sm 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="tw:flex tw:gap-2">
+          <div class="flex gap-2">
             <!-- Previous button -->
             <Button
               v-if="!hidePreviousOnFirst || !isFirstStep"
@@ -366,7 +366,7 @@ watch(currentStep, (newStep, oldStep) => {
               :disabled="!canGoPrevious"
               @click="handlePrevious"
             >
-              <ChevronLeft class="tw:h-4 tw:w-4" />
+              <ChevronLeft class="h-4 w-4" />
               {{ previousButtonText }}
             </Button>
 
@@ -381,15 +381,15 @@ watch(currentStep, (newStep, oldStep) => {
             </Button>
           </div>
 
-          <div class="tw:flex tw:gap-2">
+          <div class="flex gap-2">
             <!-- Next/Finish button -->
             <Button
               :disabled="!canGoNext"
               @click="handleNext"
             >
               {{ isLastStep ? finishButtonText : nextButtonText }}
-              <ChevronRight v-if="!isLastStep" class="tw:h-4 tw:w-4" />
-              <Check v-else class="tw:h-4 tw:w-4" />
+              <ChevronRight v-if="!isLastStep" class="h-4 w-4" />
+              <Check v-else class="h-4 w-4" />
             </Button>
           </div>
         </div>

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

@@ -14,9 +14,9 @@ const delegatedProps = reactiveOmit(props, "class")
   <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""
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
   >
-    <div :class="cn('tw:pt-0 tw:pb-4', props.class)">
+    <div :class="cn('pt-0 pb-4', props.class)">
       <slot />
     </div>
   </AccordionContent>

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

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-slot="slotProps"
     data-slot="accordion-item"
     v-bind="forwardedProps"
-    :class="cn('tw:border-b tw:last:border-b-0', props.class)"
+    :class="cn('border-b last:border-b-0', props.class)"
   >
     <slot v-bind="slotProps" />
   </AccordionItem>

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

@@ -15,13 +15,13 @@ const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
-  <AccordionHeader class=""tw:flex"">
+  <AccordionHeader class="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',
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
           props.class,
         )
       "
@@ -29,7 +29,7 @@ const delegatedProps = reactiveOmit(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""
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>
     </AccordionTrigger>

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <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)"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
   >
     <slot />
   </div>

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <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)"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
   >
     <slot />
   </div>

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

@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="cn(
       buttonVariants({ variant: 'outline' }),
-      'tw:mt-2 tw:sm:mt-0',
+      'mt-2 sm:mt-0',
       props.class,
     )"
   >

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

@@ -26,14 +26,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <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""
+      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/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',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )
       "

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

@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <AlertDialogDescription
     data-slot="alert-dialog-description"
     v-bind="delegatedProps"
-    :class="cn('tw:text-muted-foreground tw:text-sm', props.class)"
+    :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
   </AlertDialogDescription>

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

@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="alert-dialog-footer"
     :class="
       cn(
-        'tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end',
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
         props.class,
       )
     "

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <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)"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>

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

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <AlertDialogTitle
     data-slot="alert-dialog-title"
     v-bind="delegatedProps"
-    :class="cn('tw:text-lg tw:font-semibold', props.class)"
+    :class="cn('text-lg font-semibold', props.class)"
   >
     <slot />
   </AlertDialogTitle>

package/src/components/ui/avatar/Avatar.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <AvatarRoot
     data-slot="avatar"
-    :class="cn('tw:relative tw:flex tw:size-8 tw:shrink-0 tw:overflow-hidden tw:rounded-full', props.class)"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
   >
     <slot />
   </AvatarRoot>

package/src/components/ui/avatar/AvatarFallback.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <AvatarFallback
     data-slot="avatar-fallback"
     v-bind="delegatedProps"
-    :class="cn('tw:bg-muted tw:flex tw:size-full tw:items-center tw:justify-center tw:rounded-full', props.class)"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
   >
     <slot />
   </AvatarFallback>

package/src/components/ui/avatar/AvatarImage.vue

@@ -9,7 +9,7 @@ const props = defineProps<AvatarImageProps>()
   <AvatarImage
     data-slot="avatar-image"
     v-bind="props"
-    class=""tw:aspect-square tw:size-full""
+    class="aspect-square size-full"
   >
     <slot />
   </AvatarImage>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -13,11 +13,11 @@ const props = defineProps<{
     data-slot="breadcrumb-ellipsis"
     role="presentation"
     aria-hidden="true"
-    :class="cn('tw:flex tw:size-9 tw:items-center tw:justify-center', props.class)"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class=""tw:size-4"" />
+      <MoreHorizontal class="size-4" />
     </slot>
-    <span class=""tw:sr-only"">More</span>
+    <span class="sr-only">More</span>
   </span>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <li
     data-slot="breadcrumb-item"
-    :class="cn('tw:inline-flex tw:items-center tw:gap-1.5', props.class)"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
   >
     <slot />
   </li>

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
     data-slot="breadcrumb-link"
     :as="as"
     :as-child="asChild"
-    :class="cn('tw:hover:text-foreground tw:transition-colors', props.class)"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
   >
     <slot />
   </Primitive>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('tw:text-muted-foreground tw:flex tw:flex-wrap tw:items-center tw:gap-1.5 tw:text-sm tw:break-words tw:sm:gap-2.5', props.class)"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
   >
     <slot />
   </ol>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
     role="link"
     aria-disabled="true"
     aria-current="page"
-    :class="cn('tw:text-foreground tw:font-normal', props.class)"
+    :class="cn('text-foreground font-normal', props.class)"
   >
     <slot />
   </span>