@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.7

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

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ListboxContent
     data-slot="command-list"
     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)"
   >
     <div role="presentation">
       <slot />

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

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <Separator
     data-slot="command-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 />
   </Separator>

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     data-slot="command-shortcut"
-    :class="cn('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', props.class)"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
   >
     <slot />
   </span>

package/src/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -23,14 +23,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 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',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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,
     )"
   >
-    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class=""tw:size-4"" />
+          <Check class="size-4" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/src/components/ui/context-menu/ContextMenuContent.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="context-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
-        'tw:bg-popover tw:text-popover-foreground 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 tw:z-50 tw:max-h-(--reka-context-menu-content-available-height) tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md',
+        'bg-popover text-popover-foreground 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 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
         props.class,
       )"
     >

package/src/components/ui/context-menu/ContextMenuItem.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-variant="variant"
     v-bind="forwarded"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[variant=destructive]:text-destructive-foreground tw:data-[variant=destructive]:focus:bg-destructive/10 tw:dark:data-[variant=destructive]:focus:bg-destructive/40 tw:data-[variant=destructive]:focus:text-destructive-foreground tw:data-[variant=destructive]:*:[svg]:!text-destructive-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:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >

package/src/components/ui/context-menu/ContextMenuLabel.vue

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="context-menu-label"
     :data-inset="inset ? '' : undefined"
     v-bind="delegatedProps"
-    :class="cn('tw:text-foreground tw:px-2 tw:py-1.5 tw:text-sm tw:font-medium tw:data-[inset]:pl-8', props.class)"
+    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
   >
     <slot />
   </ContextMenuLabel>

package/src/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -23,14 +23,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="context-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 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',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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,
     )"
   >
-    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class=""tw:size-2 tw:fill-current"" />
+          <Circle class="size-2 fill-current" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/src/components/ui/context-menu/ContextMenuSeparator.vue

@@ -16,6 +16,6 @@ const delegatedProps = reactiveOmit(props, "class")
   <ContextMenuSeparator
     data-slot="context-menu-separator"
     v-bind="delegatedProps"
-    :class="cn('tw:bg-border tw:-mx-1 tw:my-1 tw:h-px', props.class)"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
   />
 </template>

package/src/components/ui/context-menu/ContextMenuShortcut.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     data-slot="context-menu-shortcut"
-    :class="cn('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', props.class)"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
   >
     <slot />
   </span>

package/src/components/ui/context-menu/ContextMenuSubContent.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'tw:bg-popover tw:text-popover-foreground 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 tw:z-50 tw:min-w-[8rem] tw:origin-(--reka-context-menu-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg',
+        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         props.class,
       )
     "

package/src/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -22,11 +22,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[state=open]:bg-accent tw:data-[state=open]:text-accent-foreground tw:flex tw:cursor-default tw:items-center tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class=""tw:ml-auto"" />
+    <ChevronRight class="ml-auto" />
   </ContextMenuSubTrigger>
 </template>

package/src/components/ui/dialog/DialogContent.vue

@@ -1,37 +1,29 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
 import {
   DialogClose,
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import DialogOverlay from "./DialogOverlay.vue";
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
 
 defineOptions({
   inheritAttrs: false,
-});
+})
 
-const props = withDefaults(
-  defineProps<
-    DialogContentProps & {
-      class?: HTMLAttributes["class"];
-      showCloseButton?: boolean;
-    }
-  >(),
-  {
-    showCloseButton: true,
-  },
-);
-const emits = defineEmits<DialogContentEmits>();
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -42,20 +34,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       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,
-        )
-      "
+        )"
     >
       <slot />
 
       <DialogClose
         v-if="showCloseButton"
         data-slot="dialog-close"
-        class="tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:top-4 tw:right-4 tw:rounded-xs tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:ring-2 tw:focus:ring-offset-2 tw:focus:outline-hidden tw:disabled:pointer-events-none tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
         <X />
-        <span class="tw:sr-only">Close</span>
+        <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>

package/src/components/ui/dialog/DialogDescription.vue

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

package/src/components/ui/dialog/DialogFooter.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{
 <template>
   <div
     data-slot="dialog-footer"
-    :class="cn('tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end', props.class)"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
   >
     <slot />
     <DialogClose v-if="showCloseButton" as-child>

package/src/components/ui/dialog/DialogHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="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/dialog/DialogOverlay.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('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', props.class)"
+    :class="cn('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', props.class)"
   >
     <slot />
   </DialogOverlay>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -27,12 +27,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class=""tw:fixed tw:inset-0 tw:z-50 tw:grid tw:place-items-center tw:overflow-y-auto tw:bg-black/80 tw: 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""
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="
           cn(
-            'tw:relative tw:z-50 tw:grid tw:w-full tw:max-w-lg tw:my-8 tw:gap-4 tw:border tw:border-border tw:bg-background tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:rounded-lg tw:md:w-full',
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
             props.class,
           )
         "
@@ -48,10 +48,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <slot />
 
         <DialogClose
-          class=""tw:absolute tw:top-4 tw:right-4 tw:p-0.5 tw:transition-colors tw:rounded-md tw:hover:bg-secondary""
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class=""tw:w-4 tw:h-4"" />
-          <span class=""tw:sr-only"">Close</span>
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
     </DialogOverlay>

package/src/components/ui/dialog/DialogTitle.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogTitle
     data-slot="dialog-title"
     v-bind="forwardedProps"
-    :class="cn('tw:text-lg tw:leading-none tw:font-semibold', props.class)"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
   >
     <slot />
   </DialogTitle>

package/src/components/ui/drawer/DrawerContent.vue

@@ -23,15 +23,15 @@ const forwarded = useForwardPropsEmits(props, emits)
       data-slot="drawer-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
-        'tw:group/drawer-content tw:bg-background tw:fixed tw:z-50 tw:flex tw:h-auto tw:flex-col',
-        'tw:data-[vaul-drawer-direction=top]:inset-x-0 tw:data-[vaul-drawer-direction=top]:top-0 tw:data-[vaul-drawer-direction=top]:mb-24 tw:data-[vaul-drawer-direction=top]:max-h-[80vh] tw:data-[vaul-drawer-direction=top]:rounded-b-lg',
-        'tw:data-[vaul-drawer-direction=bottom]:inset-x-0 tw:data-[vaul-drawer-direction=bottom]:bottom-0 tw:data-[vaul-drawer-direction=bottom]:mt-24 tw:data-[vaul-drawer-direction=bottom]:max-h-[80vh] tw:data-[vaul-drawer-direction=bottom]:rounded-t-lg',
-        'tw:data-[vaul-drawer-direction=right]:inset-y-0 tw:data-[vaul-drawer-direction=right]:right-0 tw:data-[vaul-drawer-direction=right]:w-3/4 tw:data-[vaul-drawer-direction=right]:sm:max-w-sm',
-        'tw:data-[vaul-drawer-direction=left]:inset-y-0 tw:data-[vaul-drawer-direction=left]:left-0 tw:data-[vaul-drawer-direction=left]:w-3/4 tw:data-[vaul-drawer-direction=left]:sm:max-w-sm',
+        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+        'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+        'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
         props.class,
       )"
     >
-      <div class=""tw:bg-muted tw:mx-auto tw:mt-4 tw:hidden tw:h-2 tw:w-[100px] tw:shrink-0 tw:rounded-full tw:group-data-[vaul-drawer-direction=bottom]/drawer-content:block"" />
+      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
       <slot />
     </DrawerContent>
   </DrawerPortal>

package/src/components/ui/drawer/DrawerDescription.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <DrawerDescription
     data-slot="drawer-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 />
   </DrawerDescription>

package/src/components/ui/drawer/DrawerFooter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="drawer-footer"
-    :class="cn('tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4', props.class)"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/drawer/DrawerHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="drawer-header"
-    :class="cn('tw:flex tw:flex-col tw:gap-1.5 tw:p-4', props.class)"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -14,6 +14,6 @@ const delegatedProps = reactiveOmit(props, "class")
   <DrawerOverlay
     data-slot="drawer-overlay"
     v-bind="delegatedProps"
-    :class="cn('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', props.class)"
+    :class="cn('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', props.class)"
   />
 </template>

package/src/components/ui/drawer/DrawerTitle.vue

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

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -23,14 +23,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
     :class=" cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 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',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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,
     )"
   >
-    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class=""tw:size-4"" />
+          <Check class="size-4" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('tw:bg-popover tw:text-popover-foreground 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 tw:z-50 tw:max-h-(--reka-dropdown-menu-content-available-height) tw:min-w-[8rem] tw:origin-(--reka-dropdown-menu-content-transform-origin) tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md', props.class)"
+      :class="cn('bg-popover text-popover-foreground 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 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
     >
       <slot />
     </DropdownMenuContent>

package/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn('tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[variant=destructive]:text-destructive tw:data-[variant=destructive]:focus:bg-destructive/10 tw:dark:data-[variant=destructive]:focus:bg-destructive/20 tw:data-[variant=destructive]:focus:text-destructive tw:data-[variant=destructive]:*:[svg]:!text-destructive 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:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </DropdownMenuItem>

package/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-label"
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn('tw:px-2 tw:py-1.5 tw:text-sm tw:font-medium tw:data-[inset]:pl-8', props.class)"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>

package/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -24,14 +24,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 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',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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,
     )"
   >
-    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class=""tw:size-2 tw:fill-current"" />
+          <Circle class="size-2 fill-current" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -18,6 +18,6 @@ const delegatedProps = reactiveOmit(props, "class")
   <DropdownMenuSeparator
     data-slot="dropdown-menu-separator"
     v-bind="delegatedProps"
-    :class="cn('tw:bg-border tw:-mx-1 tw:my-1 tw:h-px', props.class)"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
   />
 </template>

package/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     data-slot="dropdown-menu-shortcut"
-    :class="cn('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', props.class)"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
   >
     <slot />
   </span>

package/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuSubContent
     data-slot="dropdown-menu-sub-content"
     v-bind="forwarded"
-    :class="cn('tw:bg-popover tw:text-popover-foreground 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 tw:z-50 tw:min-w-[8rem] tw:origin-(--reka-dropdown-menu-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg', props.class)"
+    :class="cn('bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>

package/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -21,11 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :data-inset="inset ? '' : undefined"
     :class="cn(
-      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[state=open]:bg-accent tw:data-[state=open]:text-accent-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-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4 tw:data-[variant=destructive]:*:[svg]:!text-destructive tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class=""tw:ml-auto tw:size-4"" />
+    <ChevronRight class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>

package/src/components/ui/empty/Empty.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="empty"
     :class="cn(
-      'tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:items-center tw:justify-center tw:gap-6 tw:text-balance tw:rounded-lg tw:border-dashed tw:p-6 tw:text-center tw:md:p-12',
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
       props.class,
     )"
   >

package/src/components/ui/empty/EmptyContent.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="empty-content"
     :class="cn(
-      'tw:flex tw:w-full tw:min-w-0 tw:max-w-sm tw:flex-col tw:items-center tw:gap-4 tw:text-balance tw:text-sm',
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
       props.class,
     )"
   >

package/src/components/ui/empty/EmptyDescription.vue

@@ -11,8 +11,8 @@ defineProps<{
   <p
     data-slot="empty-description"
     :class="cn(
-      'tw:text-muted-foreground tw:[&>a:hover]:text-primary tw:text-sm/relaxed tw:[&>a]:underline tw:[&>a]:underline-offset-4',
-      $attrs.class ?? 'tw:',
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
     )"
   >
     <slot />

package/src/components/ui/empty/EmptyHeader.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="empty-header"
     :class="cn(
-      'tw:flex tw:max-w-sm tw:flex-col tw:items-center tw:gap-2 tw:text-center',
+      'flex max-w-sm flex-col items-center gap-2 text-center',
       props.class,
     )"
   >

package/src/components/ui/empty/EmptyTitle.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="empty-title"
-    :class="cn('tw:text-lg tw:font-medium tw:tracking-tight', props.class)"
+    :class="cn('text-lg font-medium tracking-tight', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/field/FieldContent.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="field-content"
     :class="cn(
-      'tw:group/field-content tw:flex tw:flex-1 tw:flex-col tw:gap-1.5 tw:leading-snug',
+      'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
       props.class,
     )"
   >

package/src/components/ui/field/FieldDescription.vue

@@ -11,9 +11,9 @@ const props = defineProps<{
   <p
     data-slot="field-description"
     :class="cn(
-      'tw:text-muted-foreground tw:text-sm tw:leading-normal tw:font-normal tw:group-has-[[data-orientation=horizontal]]/field:text-balance',
-      'tw:last:mt-0 tw:nth-last-2:-mt-1 tw:[[data-variant=legend]+&]:-mt-1.5',
-      'tw:[&>a:hover]:text-primary tw:[&>a]:underline tw:[&>a]:underline-offset-4',
+      'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
       props.class,
     )"
   >

package/src/components/ui/field/FieldError.vue

@@ -36,7 +36,7 @@ const content = computed(() => {
     v-if="$slots.default || content"
     role="alert"
     data-slot="field-error"
-    :class="cn('tw:text-destructive tw:text-sm tw:font-normal', props.class)"
+    :class="cn('text-destructive text-sm font-normal', props.class)"
   >
     <slot v-if="$slots.default" />
 
@@ -44,7 +44,7 @@ const content = computed(() => {
       {{ content }}
     </template>
 
-    <ul v-else-if="Array.isArray(content)" class=""tw:ml-4 tw:flex tw:list-disc tw:flex-col tw:gap-1"">
+    <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
       <li v-for="(error, index) in content" :key="index">
         {{ error }}
       </li>