@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.7

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

@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="breadcrumb-separator"
     role="presentation"
     aria-hidden="true"
-    :class="cn('tw:[&>svg]:size-3.5', props.class)"
+    :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
       <ChevronRight />

package/src/components/ui/button-group/ButtonGroupSeparator.vue

@@ -17,7 +17,7 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :orientation="props.orientation"
     :class="cn(
-      'tw:bg-input tw:relative tw:!m-0 tw:self-stretch tw:data-[orientation=vertical]:h-auto',
+      'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
       props.class,
     )"
   />

package/src/components/ui/button-group/ButtonGroupText.vue

@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     :data-orientation="props.orientation"
     :as="as"
     :as-child="asChild"
-    :class="cn('tw:bg-muted tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-4 tw:text-sm tw:font-medium tw:shadow-xs tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </Primitive>

package/src/components/ui/calendar/Calendar.vue

@@ -44,13 +44,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <DefineMonthTemplate v-slot="{ date }">
-    <div class=""tw:**:data-[slot=native-select-icon]:right-1"">
-      <div class=""tw:relative"">
-        <div class=""tw:absolute tw:inset-0 tw:flex tw:h-full tw:items-center tw:text-sm tw:pl-2 tw:pointer-events-none"">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
           {{ formatter.custom(toDate(date), { month: 'short' }) }}
         </div>
         <NativeSelect
-          class=""tw:text-xs tw:h-8 tw:pr-6 tw:pl-2 tw:text-transparent tw:relative""
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           @change="(e: Event) => {
             placeholder = placeholder.set({
               month: Number((e?.target as any)?.value),
@@ -66,13 +66,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   </DefineMonthTemplate>
 
   <DefineYearTemplate v-slot="{ date }">
-    <div class=""tw:**:data-[slot=native-select-icon]:right-1"">
-      <div class=""tw:relative"">
-        <div class=""tw:absolute tw:inset-0 tw:flex tw:h-full tw:items-center tw:text-sm tw:pl-2 tw:pointer-events-none"">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
           {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
         </div>
         <NativeSelect
-          class=""tw:text-xs tw:h-8 tw:pr-6 tw:pl-2 tw:text-transparent tw:relative""
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           @change="(e: Event) => {
             placeholder = placeholder.set({
               year: Number((e?.target as any)?.value),
@@ -92,10 +92,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     v-model:placeholder="placeholder"
     data-slot="calendar"
-    :class="cn('tw:p-3', props.class)"
+    :class="cn('p-3', props.class)"
   >
-    <CalendarHeader class=""tw:pt-0"">
-      <nav class=""tw:flex tw:items-center tw:gap-1 tw:absolute tw:top-0 tw:inset-x-0 tw:justify-between"">
+    <CalendarHeader class="pt-0">
+      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
         <CalendarPrevButton>
           <slot name="calendar-prev-icon" />
         </CalendarPrevButton>
@@ -106,19 +106,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
       <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
         <template v-if="layout === 'month-and-year'">
-          <div class=""tw:flex tw:items-center tw:justify-center tw:gap-1"">
+          <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
             <ReuseYearTemplate :date="date" />
           </div>
         </template>
         <template v-else-if="layout === 'month-only'">
-          <div class=""tw:flex tw:items-center tw:justify-center tw:gap-1"">
+          <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
             {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
           </div>
         </template>
         <template v-else-if="layout === 'year-only'">
-          <div class=""tw:flex tw:items-center tw:justify-center tw:gap-1"">
+          <div class="flex items-center justify-center gap-1">
             {{ formatter.custom(toDate(date), { month: 'short' }) }}
             <ReuseYearTemplate :date="date" />
           </div>
@@ -129,7 +129,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       </slot>
     </CalendarHeader>
 
-    <div class=""tw:flex tw:flex-col tw:gap-y-4 tw:mt-4 tw:sm:flex-row tw:sm:gap-x-4 tw:sm:gap-y-0"">
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
       <CalendarGrid v-for="month in grid" :key="month.value.toString()">
         <CalendarGridHead>
           <CalendarGridRow>
@@ -141,7 +141,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody>
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class=""tw:mt-2 tw:w-full"">
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
             <CalendarCell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"

package/src/components/ui/calendar/CalendarCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <CalendarCell
     data-slot="calendar-cell"
-    :class="cn('tw:relative tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:flex-1 tw:[&:has([data-selected])]:rounded-md tw:[&:has([data-selected])]:bg-accent', props.class)"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -20,16 +20,16 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="calendar-cell-trigger"
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
-      'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100 tw:cursor-default',
-      'tw:[&[data-today]:not([data-selected])]:bg-accent tw:[&[data-today]:not([data-selected])]:text-accent-foreground',
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selected
-      'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:opacity-100 tw:data-[selected]:hover:bg-primary tw:data-[selected]:hover:text-primary-foreground tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground',
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
       // Disabled
-      'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50',
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
       // Unavailable
-      'tw:data-[unavailable]:text-destructive-foreground tw:data-[unavailable]:line-through',
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
       // Outside months
-      'tw:data-[outside-view]:text-muted-foreground',
+      'data-[outside-view]:text-muted-foreground',
       props.class,
     )"
     v-bind="forwardedProps"

package/src/components/ui/calendar/CalendarGrid.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <CalendarGrid
     data-slot="calendar-grid"
-    :class="cn('tw:w-full tw:border-collapse tw:space-x-1', props.class)"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/src/components/ui/calendar/CalendarGridRow.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <CalendarGridRow
     data-slot="calendar-grid-row"
-    :class="cn('tw:flex', props.class)" v-bind="forwardedProps"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
   >
     <slot />
   </CalendarGridRow>

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <CalendarHeadCell
     data-slot="calendar-head-cell"
-    :class="cn('tw:text-muted-foreground tw:rounded-md tw:flex-1 tw:font-normal tw:text-[0.8rem]', props.class)"
+    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/src/components/ui/calendar/CalendarHeader.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <CalendarHeader
     data-slot="calendar-header"
-    :class="cn('tw:flex tw:justify-center tw:pt-1 tw:relative tw:items-center tw:w-full tw:px-8', props.class)"
+    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/src/components/ui/calendar/CalendarHeading.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <CalendarHeading
     v-slot="{ headingValue }"
     data-slot="calendar-heading"
-    :class="cn('tw:text-sm tw:font-medium', props.class)"
+    :class="cn('text-sm font-medium', props.class)"
     v-bind="forwardedProps"
   >
     <slot :heading-value>

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -19,13 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="calendar-next-button"
     :class="cn(
       buttonVariants({ variant: 'outline' }),
-      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
       props.class,
     )"
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronRight class=""tw:size-4"" />
+      <ChevronRight class="size-4" />
     </slot>
   </CalendarNext>
 </template>

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -19,13 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="calendar-prev-button"
     :class="cn(
       buttonVariants({ variant: 'outline' }),
-      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
       props.class,
     )"
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronLeft class=""tw:size-4"" />
+      <ChevronLeft class="size-4" />
     </slot>
   </CalendarPrev>
 </template>

package/src/components/ui/card/Card.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="card"
     :class="
       cn(
-        'tw:bg-card tw:text-card-foreground tw:flex tw:flex-col tw:gap-6 tw:rounded-xl tw:border tw:py-6 tw:shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
         props.class,
       )
     "

package/src/components/ui/card/CardAction.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="card-action"
-    :class="cn('tw:col-start-2 tw:row-span-2 tw:row-start-1 tw:self-start tw:justify-self-end', props.class)"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/card/CardContent.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="card-content"
-    :class="cn('tw:px-6', props.class)"
+    :class="cn('px-6', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/card/CardDescription.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <p
     data-slot="card-description"
-    :class="cn('tw:text-muted-foreground tw:text-sm', props.class)"
+    :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
   </p>

package/src/components/ui/card/CardFooter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="card-footer"
-    :class="cn('tw:flex tw:items-center tw:px-6 tw:[.border-t]:pt-6', props.class)"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/card/CardHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="card-header"
-    :class="cn('tw:@container/card-header tw:grid tw:auto-rows-min tw:grid-rows-[auto_auto] tw:items-start tw:gap-1.5 tw:px-6 tw:has-data-[slot=card-action]:grid-cols-[1fr_auto] tw:[.border-b]:pb-6', props.class)"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/card/CardTitle.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <h3
     data-slot="card-title"
-    :class="cn('tw:leading-none tw:font-semibold', props.class)"
+    :class="cn('leading-none font-semibold', props.class)"
   >
     <slot />
   </h3>

package/src/components/ui/carousel/Carousel.vue

@@ -42,7 +42,7 @@ function onKeyDown(event: KeyboardEvent) {
 <template>
   <div
     data-slot="carousel"
-    :class="cn('tw:relative', props.class)"
+    :class="cn('relative', props.class)"
     role="region"
     aria-roledescription="carousel"
     tabindex="0"

package/src/components/ui/carousel/CarouselContent.vue

@@ -16,13 +16,13 @@ const { carouselRef, orientation } = useCarousel()
   <div
     ref="carouselRef"
     data-slot="carousel-content"
-    class=""tw:overflow-hidden""
+    class="overflow-hidden"
   >
     <div
       :class="
         cn(
-          'tw:flex',
-          orientation === 'horizontal' ? 'tw:-ml-4' : 'tw:-mt-4 tw:flex-col',
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           props.class,
         )"
       v-bind="$attrs"

package/src/components/ui/carousel/CarouselItem.vue

@@ -14,8 +14,8 @@ const { orientation } = useCarousel()
     role="group"
     aria-roledescription="slide"
     :class="cn(
-      'tw:min-w-0 tw:shrink-0 tw:grow-0 tw:basis-full',
-      orientation === 'horizontal' ? 'tw:pl-4' : 'tw:pt-4',
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
       props.class,
     )"
   >

package/src/components/ui/carousel/CarouselNext.vue

@@ -23,10 +23,10 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     data-slot="carousel-next"
     :disabled="!canScrollNext"
     :class="cn(
-      'tw:absolute tw:size-8 tw:rounded-full',
+      'absolute size-8 rounded-full',
       orientation === 'horizontal'
-        ? 'tw:top-1/2 tw:-right-12 tw:-translate-y-1/2'
-        : 'tw:-bottom-12 tw:left-1/2 tw:-translate-x-1/2 tw:rotate-90',
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     :variant="variant"
@@ -35,7 +35,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   >
     <slot>
       <ArrowRight />
-      <span class=""tw:sr-only"">Next Slide</span>
+      <span class="sr-only">Next Slide</span>
     </slot>
   </Button>
 </template>

package/src/components/ui/carousel/CarouselPrevious.vue

@@ -23,10 +23,10 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     data-slot="carousel-previous"
     :disabled="!canScrollPrev"
     :class="cn(
-      'tw:absolute tw:size-8 tw:rounded-full',
+      'absolute size-8 rounded-full',
       orientation === 'horizontal'
-        ? 'tw:top-1/2 tw:-left-12 tw:-translate-y-1/2'
-        : 'tw:-top-12 tw:left-1/2 tw:-translate-x-1/2 tw:rotate-90',
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     :variant="variant"
@@ -35,7 +35,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
   >
     <slot>
       <ArrowLeft />
-      <span class=""tw:sr-only"">Previous Slide</span>
+      <span class="sr-only">Previous Slide</span>
     </slot>
   </Button>
 </template>

package/src/components/ui/checkbox/Checkbox.vue

@@ -20,15 +20,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('tw:peer tw:border-input tw:data-[state=checked]:bg-primary tw:data-[state=checked]:text-primary-foreground tw:data-[state=checked]:border-primary tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:size-4 tw:shrink-0 tw:rounded-[4px] tw:border tw:shadow-xs tw:transition-shadow tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50',
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground 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.class)"
   >
     <CheckboxIndicator
       data-slot="checkbox-indicator"
-      class=""tw:grid tw:place-content-center tw:text-current tw:transition-none""
+      class="grid place-content-center text-current transition-none"
     >
       <slot v-bind="slotProps">
-        <Check class=""tw:size-3.5"" />
+        <Check class="size-3.5" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/src/components/ui/combobox/ComboboxAnchor.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ComboboxAnchor
     data-slot="combobox-anchor"
     v-bind="forwarded"
-    :class="cn('tw:w-[200px]', props.class)"
+    :class="cn('w-[200px]', props.class)"
   >
     <slot />
   </ComboboxAnchor>

package/src/components/ui/combobox/ComboboxEmpty.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <ComboboxEmpty
     data-slot="combobox-empty"
     v-bind="delegatedProps"
-    :class="cn('tw:py-6 tw:text-center tw:text-sm', props.class)"
+    :class="cn('py-6 text-center text-sm', props.class)"
   >
     <slot />
   </ComboboxEmpty>

package/src/components/ui/combobox/ComboboxGroup.vue

@@ -17,9 +17,9 @@ const delegatedProps = reactiveOmit(props, "class")
   <ComboboxGroup
     data-slot="combobox-group"
     v-bind="delegatedProps"
-    :class="cn('tw:overflow-hidden tw:p-1 tw:text-foreground', props.class)"
+    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
   >
-    <ComboboxLabel v-if="heading" class=""tw:px-2 tw:py-1.5 tw:text-xs tw:font-medium tw:text-muted-foreground"">
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
     </ComboboxLabel>
     <slot />

package/src/components/ui/combobox/ComboboxInput.vue

@@ -24,13 +24,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <div
     data-slot="command-input-wrapper"
-    class=""tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3""
+    class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <SearchIcon class=""tw:size-4 tw:shrink-0 tw:opacity-50"" />
+    <SearchIcon class="size-4 shrink-0 opacity-50" />
     <ComboboxInput
       data-slot="command-input"
       :class="cn(
-        'tw:placeholder:text-muted-foreground tw:flex tw:h-10 tw:w-full tw:rounded-md tw:bg-transparent tw:py-3 tw:text-sm tw:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:opacity-50',
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )"
 

package/src/components/ui/combobox/ComboboxItem.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ComboboxItem
     data-slot="combobox-item"
     v-bind="forwarded"
-    :class="cn('tw:data-[highlighted]:bg-accent tw:data-[highlighted]:text-accent-foreground tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </ComboboxItem>

package/src/components/ui/combobox/ComboboxItemIndicator.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ComboboxItemIndicator
     data-slot="combobox-item-indicator"
     v-bind="forwarded"
-    :class="cn('tw:ml-auto', props.class)"
+    :class="cn('ml-auto', props.class)"
   >
     <slot />
   </ComboboxItemIndicator>

package/src/components/ui/combobox/ComboboxList.vue

@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ComboboxContent
       data-slot="combobox-list"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('tw:z-50 tw:w-[200px] tw:rounded-md tw:border tw:bg-popover tw:text-popover-foreground tw:origin-(--reka-combobox-content-transform-origin) tw:overflow-hidden tw:shadow-md tw:outline-none 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:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
     >
       <slot />
     </ComboboxContent>

package/src/components/ui/combobox/ComboboxSeparator.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <ComboboxSeparator
     data-slot="combobox-separator"
     v-bind="delegatedProps"
-    :class="cn('tw:bg-border tw:-mx-1 tw:h-px', props.class)"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
   >
     <slot />
   </ComboboxSeparator>

package/src/components/ui/combobox/ComboboxTrigger.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ComboboxTrigger
     data-slot="combobox-trigger"
     v-bind="forwarded"
-    :class="cn('tw:', props.class)"
+    :class="cn('', props.class)"
     tabindex="0"
   >
     <slot />

package/src/components/ui/combobox/ComboboxViewport.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ComboboxViewport
     data-slot="combobox-viewport"
     v-bind="forwarded"
-    :class="cn('tw:max-h-[300px] tw:scroll-py-1 tw:overflow-x-hidden tw:overflow-y-auto', props.class)"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
   >
     <slot />
   </ComboboxViewport>

package/src/components/ui/command/Command.vue

@@ -80,7 +80,7 @@ provideCommandContext({
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
-    :class="cn('tw:bg-popover tw:text-popover-foreground tw:flex tw:h-full tw:w-full tw:flex-col tw:overflow-hidden tw:rounded-md', props.class)"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
   >
     <slot />
   </ListboxRoot>

package/src/components/ui/command/CommandDialog.vue

@@ -18,8 +18,8 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class=""tw:overflow-hidden tw:p-0 tw:"">
-      <DialogHeader class=""tw:sr-only"">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription>{{ description }}</DialogDescription>
       </DialogHeader>

package/src/components/ui/command/CommandEmpty.vue

@@ -20,7 +20,7 @@ const isRender = computed(() => !!filterState.search && filterState.filtered.cou
   <Primitive
     v-if="isRender"
     data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('tw:py-6 tw:text-center tw:text-sm', props.class)"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
   >
     <slot />
   </Primitive>

package/src/components/ui/command/CommandGroup.vue

@@ -34,10 +34,10 @@ onUnmounted(() => {
     v-bind="delegatedProps"
     :id="id"
     data-slot="command-group"
-    :class="cn('tw:text-foreground tw:overflow-hidden tw:p-1', props.class)"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class=""tw:px-2 tw:py-1.5 tw:text-xs tw:font-medium tw:text-muted-foreground"">
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
     </ListboxGroupLabel>
     <slot />

package/src/components/ui/command/CommandInput.vue

@@ -25,15 +25,15 @@ const { filterState } = useCommand()
 <template>
   <div
     data-slot="command-input-wrapper"
-    class=""tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3""
+    class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <Search class=""tw:size-4 tw:shrink-0 tw:opacity-50"" />
+    <Search class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       data-slot="command-input"
       auto-focus
-      :class="cn('tw:placeholder:text-muted-foreground tw:flex tw:h-10 tw:w-full tw:rounded-md tw:bg-transparent tw:py-3 tw:text-sm tw:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:opacity-50', props.class)"
+      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>

package/src/components/ui/command/CommandItem.vue

@@ -66,7 +66,7 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn('tw:data-[highlighted]:bg-accent tw:data-[highlighted]:text-accent-foreground tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
     @select="() => {
       filterState.search = ''
     }"