@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.7

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

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="field-group"
     :class="cn(
-      'tw:group/field-group tw:@container/field-group tw:flex tw:w-full tw:flex-col tw:gap-7 tw:data-[slot=checkbox-group]:gap-3 tw:[&>[data-slot=field-group]]:gap-4',
+      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
       props.class,
     )"
   >

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

@@ -12,9 +12,9 @@ const props = defineProps<{
   <Label
     data-slot="field-label"
     :class="cn(
-      'tw:group/field-label tw:peer/field-label tw:flex tw:w-fit tw:gap-2 tw:leading-snug tw:group-data-[disabled=true]/field:opacity-50',
-      'tw:has-[>[data-slot=field]]:w-full tw:has-[>[data-slot=field]]:flex-col tw:has-[>[data-slot=field]]:rounded-md tw:has-[>[data-slot=field]]:border tw:[&>*]:data-[slot=field]:p-4',
-      'tw:has-data-[state=checked]:bg-primary/5 tw:has-data-[state=checked]:border-primary tw:dark:has-data-[state=checked]:bg-primary/10',
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+      'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
       props.class,
     )"
   >

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

@@ -13,9 +13,9 @@ const props = defineProps<{
     data-slot="field-legend"
     :data-variant="variant"
     :class="cn(
-      'tw:mb-3 tw:font-medium',
-      'tw:data-[variant=legend]:text-base',
-      'tw:data-[variant=label]:text-sm',
+      'mb-3 font-medium',
+      'data-[variant=legend]:text-base',
+      'data-[variant=label]:text-sm',
       props.class,
     )"
   >

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

@@ -13,14 +13,14 @@ const props = defineProps<{
     data-slot="field-separator"
     :data-content="!!$slots.default"
     :class="cn(
-      'tw:relative tw:-my-2 tw:h-5 tw:text-sm tw:group-data-[variant=outline]/field-group:-mb-2',
+      'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
       props.class,
     )"
   >
-    <Separator class=""tw:absolute tw:inset-0 tw:top-1/2"" />
+    <Separator class="absolute inset-0 top-1/2" />
     <span
       v-if="$slots.default"
-      class=""tw:bg-background tw:text-muted-foreground tw:relative tw:mx-auto tw:block tw:w-fit tw:px-2""
+      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
       data-slot="field-separator-content"
     >
       <slot />

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

@@ -11,8 +11,8 @@ const props = defineProps<{
   <fieldset
     data-slot="field-set"
     :class="cn(
-      'tw:flex tw:flex-col tw:gap-6',
-      'tw:has-[>[data-slot=checkbox-group]]:gap-3 tw:has-[>[data-slot=radio-group]]:gap-3',
+      'flex flex-col gap-6',
+      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
       props.class,
     )"
   >

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

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="field-label"
     :class="cn(
-      'tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium tw:group-data-[disabled=true]/field:opacity-50',
+      'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
       props.class,
     )"
   >

package/src/components/ui/form/FormDescription.vue

@@ -14,7 +14,7 @@ const { formDescriptionId } = useFormField()
   <p
     :id="formDescriptionId"
     data-slot="form-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/form/FormItem.vue

@@ -16,7 +16,7 @@ provide(FORM_ITEM_INJECTION_KEY, id)
 <template>
   <div
     data-slot="form-item"
-    :class="cn('tw:grid tw:gap-2', props.class)"
+    :class="cn('grid gap-2', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/form/FormLabel.vue

@@ -15,7 +15,7 @@ const { error, formItemId } = useFormField()
     data-slot="form-label"
     :data-error="!!error"
     :class="cn(
-      'tw:data-[error=true]:text-destructive',
+      'data-[error=true]:text-destructive',
       props.class,
     )"
     :for="formItemId"

package/src/components/ui/form/FormMessage.vue

@@ -18,6 +18,6 @@ const { name, formMessageId } = useFormField()
     data-slot="form-message"
     as="p"
     :name="toValue(name)"
-    :class="cn('tw:text-destructive tw:text-sm', props.class)"
+    :class="cn('text-destructive text-sm', props.class)"
   />
 </template>

package/src/components/ui/hover-card/HoverCardContent.vue

@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="{ ...$attrs, ...forwardedProps }"
       :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:w-64 tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:outline-hidden',
+          '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 w-64 rounded-md border p-4 shadow-md outline-hidden',
           props.class,
         )
       "

package/src/components/ui/input/Input.vue

@@ -24,9 +24,9 @@ const modelValue = useVModel(props, "modelValue", emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'tw:file:text-foreground tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-input tw:h-9 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm',
-      'tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]',
-      'tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive',
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,
     )"
   >

package/src/components/ui/input-group/InputGroup.vue

@@ -12,20 +12,20 @@ const props = defineProps<{
     data-slot="input-group"
     role="group"
     :class="cn(
-      'tw:group/input-group tw:border-input tw:dark:bg-input/30 tw:relative tw:flex tw:w-full tw:items-center tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none',
-      'tw:h-9 tw:min-w-0 tw:has-[>textarea]:h-auto',
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
 
       // Variants based on alignment.
-      'tw:has-[>[data-align=inline-start]]:[&>input]:pl-2',
-      'tw:has-[>[data-align=inline-end]]:[&>input]:pr-2',
-      'tw:has-[>[data-align=block-start]]:h-auto tw:has-[>[data-align=block-start]]:flex-col tw:has-[>[data-align=block-start]]:[&>input]:pb-3',
-      'tw:has-[>[data-align=block-end]]:h-auto tw:has-[>[data-align=block-end]]:flex-col tw:has-[>[data-align=block-end]]:[&>input]:pt-3',
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
       // Focus state.
-      'tw:has-[[data-slot=input-group-control]:focus-visible]:border-ring tw:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 tw:has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
 
       // Error state.
-      'tw:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 tw:has-[[data-slot][aria-invalid=true]]:border-destructive tw:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
 
       props.class,
     )"

package/src/components/ui/input-group/InputGroupInput.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <Input
     data-slot="input-group-control"
     :class="cn(
-      'tw:flex-1 tw:rounded-none tw:border-0 tw:bg-transparent tw:shadow-none tw:focus-visible:ring-0 tw:dark:bg-transparent',
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
       props.class,
     )"
   />

package/src/components/ui/input-group/InputGroupText.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     :class="cn(
-      'tw:text-muted-foreground tw:flex tw:items-center tw:gap-2 tw:text-sm tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*=\'size-\'])]:size-4',
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >

package/src/components/ui/input-group/InputGroupTextarea.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <Textarea
     data-slot="input-group-control"
     :class="cn(
-      'tw:flex-1 tw:resize-none tw:rounded-none tw:border-0 tw:bg-transparent tw:py-3 tw:shadow-none tw:focus-visible:ring-0 tw:dark:bg-transparent',
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
       props.class,
     )"
   />

package/src/components/ui/input-otp/InputOTP.vue

@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
     data-slot="input-otp"
-    class=""tw:disabled:cursor-not-allowed""
+    class="disabled:cursor-not-allowed"
   >
     <slot v-bind="slotProps" />
   </OTPInput>

package/src/components/ui/input-otp/InputOTPGroup.vue

@@ -15,7 +15,7 @@ const forwarded = useForwardProps(delegatedProps)
   <div
     data-slot="input-otp-group"
     v-bind="forwarded"
-    :class="cn('tw:flex tw:items-center', props.class)"
+    :class="cn('flex items-center', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/input-otp/InputOTPSlot.vue

@@ -22,11 +22,11 @@ const slot = computed(() => context?.value.slots[props.index])
     v-bind="forwarded"
     data-slot="input-otp-slot"
     :data-active="slot?.isActive"
-    :class="cn('tw:data-[active=true]:border-ring tw:data-[active=true]:ring-ring/50 tw:data-[active=true]:aria-invalid:ring-destructive/20 tw:dark:data-[active=true]:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:data-[active=true]:aria-invalid:border-destructive tw:dark:bg-input/30 tw:border-input tw:relative tw:flex tw:h-9 tw:w-9 tw:items-center tw:justify-center tw:border-y tw:border-r tw:text-sm tw:shadow-xs tw:transition-all tw:outline-none tw:first:rounded-l-md tw:first:border-l tw:last:rounded-r-md tw:data-[active=true]:z-10 tw:data-[active=true]:ring-[3px]', props.class)"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
   >
     {{ slot?.char }}
-    <div v-if="slot?.hasFakeCaret" class=""tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center"">
-      <div class=""tw:animate-caret-blink tw:bg-foreground tw:h-4 tw:w-px tw:duration-1000"" />
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
     </div>
   </div>
 </template>

package/src/components/ui/item/ItemActions.vue

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

package/src/components/ui/item/ItemContent.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-content"
-    :class="cn('tw:flex tw:flex-1 tw:flex-col tw:gap-1 tw:[&+[data-slot=item-content]]:flex-none', props.class)"
+    :class="cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/item/ItemDescription.vue

@@ -11,8 +11,8 @@ const props = defineProps<{
   <p
     data-slot="item-description"
     :class="cn(
-      'tw:text-muted-foreground tw:line-clamp-2 tw:text-sm tw:leading-normal tw:font-normal tw:text-balance',
-      'tw:[&>a:hover]:text-primary tw:[&>a]:underline tw:[&>a]:underline-offset-4',
+      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
       props.class,
     )"
   >

package/src/components/ui/item/ItemFooter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-footer"
-    :class="cn('tw:flex tw:basis-full tw:items-center tw:justify-between tw:gap-2', props.class)"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/item/ItemGroup.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     role="list"
     data-slot="item-group"
-    :class="cn('tw:group/item-group tw:flex tw:flex-col', props.class)"
+    :class="cn('group/item-group flex flex-col', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/item/ItemHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-header"
-    :class="cn('tw:flex tw:basis-full tw:items-center tw:justify-between tw:gap-2', props.class)"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/item/ItemSeparator.vue

@@ -13,6 +13,6 @@ const props = defineProps<
   <Separator
     data-slot="item-separator"
     orientation="horizontal"
-    :class="cn('tw:my-0', props.class)"
+    :class="cn('my-0', props.class)"
   />
 </template>

package/src/components/ui/item/ItemTitle.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-title"
-    :class="cn('tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium', props.class)"
+    :class="cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)"
   >
     <slot />
   </div>

package/src/components/ui/kbd/Kbd.vue

@@ -10,9 +10,9 @@ const props = defineProps<{
 <template>
   <kbd
     :class="cn(
-      'tw:bg-muted tw:text-muted-foreground tw:pointer-events-none tw:inline-flex tw:h-5 tw:w-fit tw:min-w-5 tw:items-center tw:justify-center tw:gap-1 tw:rounded-sm tw:px-1 tw:font-sans tw:text-xs tw:font-medium tw:select-none',
-      'tw:[&_svg:not([class*=\'size-\'])]:size-3',
-      'tw:[[data-slot=tooltip-content]_&]:bg-background/20 tw:[[data-slot=tooltip-content]_&]:text-background tw:dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
       props.class,
     )"
   >

package/src/components/ui/kbd/KbdGroup.vue

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

package/src/components/ui/label/Label.vue

@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="
       cn(
-        'tw:flex tw:items-center tw:gap-2 tw:text-sm tw:leading-none tw:font-medium tw:select-none tw:group-data-[disabled=true]:pointer-events-none tw:group-data-[disabled=true]:opacity-50 tw:peer-disabled:cursor-not-allowed tw:peer-disabled:opacity-50',
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         props.class,
       )
     "

package/src/components/ui/menubar/Menubar.vue

@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'tw:bg-background tw:flex tw:h-9 tw:items-center tw:gap-1 tw:rounded-md tw:border tw:p-1 tw:shadow-xs',
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
         props.class,
       )
     "

package/src/components/ui/menubar/MenubarCheckboxItem.vue

@@ -23,14 +23,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="menubar-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-xs 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-xs 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">
       <MenubarItemIndicator>
         <slot name="indicator-icon">
-          <Check class=""tw:size-4"" />
+          <Check class="size-4" />
         </slot>
       </MenubarItemIndicator>
     </span>

package/src/components/ui/menubar/MenubarContent.vue

@@ -34,7 +34,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="{ ...$attrs, ...forwardedProps }"
       :class="
         cn(
-          'tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in 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-[12rem] tw:origin-(--reka-menubar-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
           props.class,
         )
       "

package/src/components/ui/menubar/MenubarItem.vue

@@ -27,7 +27,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/menubar/MenubarLabel.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, "class", "inset")
   <MenubarLabel
     :data-inset="inset ? '' : undefined"
     v-bind="delegatedProps"
-    :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 />
   </MenubarLabel>

package/src/components/ui/menubar/MenubarRadioItem.vue

@@ -23,14 +23,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="menubar-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-xs 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-xs 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">
       <MenubarItemIndicator>
         <slot name="indicator-icon">
-          <Circle class=""tw:size-2 tw:fill-current"" />
+          <Circle class="size-2 fill-current" />
         </slot>
       </MenubarItemIndicator>
     </span>

package/src/components/ui/menubar/MenubarSeparator.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <MenubarSeparator
     data-slot="menubar-separator"
-    :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)"
     v-bind="forwardedProps"
   />
 </template>

package/src/components/ui/menubar/MenubarShortcut.vue

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

@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       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:min-w-[8rem] tw:origin-(--reka-menubar-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-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
           props.class,
         )
       "

package/src/components/ui/menubar/MenubarSubTrigger.vue

@@ -18,11 +18,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-none tw:select-none tw:data-[inset]:pl-8',
+      '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-none select-none data-[inset]:pl-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class=""tw:ml-auto tw:size-4"" />
+    <ChevronRight class="ml-auto size-4" />
   </MenubarSubTrigger>
 </template>

package/src/components/ui/menubar/MenubarTrigger.vue

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     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:items-center tw:rounded-sm tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:outline-hidden tw:select-none',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
         props.class,
       )
     "

package/src/components/ui/native-select/NativeSelect.vue

@@ -25,7 +25,7 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <div
-    class=""tw:group/native-select tw:relative tw:w-fit tw:has-[select:disabled]:opacity-50""
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
     data-slot="native-select-wrapper"
   >
     <select
@@ -33,16 +33,16 @@ const delegatedProps = reactiveOmit(props, "class")
       v-model="modelValue"
       data-slot="native-select"
       :class="cn(
-        'tw:border-input tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:h-9 tw:w-full tw:min-w-0 tw:appearance-none tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:pr-9 tw:text-sm tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed',
-        'tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]',
-        'tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive',
+        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         props.class,
       )"
     >
       <slot />
     </select>
     <ChevronDownIcon
-      class=""tw:text-muted-foreground tw:pointer-events-none tw:absolute tw:top-1/2 tw:right-3.5 tw:size-4 tw:-translate-y-1/2 tw:opacity-50 tw:select-none""
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
       aria-hidden="true"
       data-slot="native-select-icon"
     />

package/src/components/ui/native-select/NativeSelectOptGroup.vue

@@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('tw:bg-popover tw:text-popover-foreground', props.class)">
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
     <slot />
   </optgroup>
 </template>

package/src/components/ui/native-select/NativeSelectOption.vue

@@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
-  <option data-slot="native-select-option" :class="cn('tw:bg-popover tw:text-popover-foreground', props.class)">
+  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
     <slot />
   </option>
 </template>

package/src/components/ui/navigation-menu/NavigationMenu.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="navigation-menu"
     :data-viewport="viewport"
     v-bind="forwarded"
-    :class="cn('tw:group/navigation-menu tw:relative tw:flex tw:max-w-max tw:flex-1 tw:items-center tw:justify-center', props.class)"
+    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
   >
     <slot v-bind="slotProps" />
     <NavigationMenuViewport v-if="viewport" />

package/src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -21,8 +21,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="navigation-menu-content"
     v-bind="forwarded"
     :class="cn(
-      'tw:data-[motion^=from-]:animate-in tw:data-[motion^=to-]:animate-out tw:data-[motion^=from-]:fade-in tw:data-[motion^=to-]:fade-out tw:data-[motion=from-end]:slide-in-from-right-52 tw:data-[motion=from-start]:slide-in-from-left-52 tw:data-[motion=to-end]:slide-out-to-right-52 tw:data-[motion=to-start]:slide-out-to-left-52 tw:top-0 tw:left-0 tw:w-full tw:p-2 tw:pr-2.5 tw:md:absolute tw:md:w-auto',
-      'tw:group-data-[viewport=false]/navigation-menu:bg-popover tw:group-data-[viewport=false]/navigation-menu:text-popover-foreground tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 tw:group-data-[viewport=false]/navigation-menu:top-full tw:group-data-[viewport=false]/navigation-menu:mt-1.5 tw:group-data-[viewport=false]/navigation-menu:overflow-hidden tw:group-data-[viewport=false]/navigation-menu:rounded-md tw:group-data-[viewport=false]/navigation-menu:border tw:group-data-[viewport=false]/navigation-menu:shadow tw:group-data-[viewport=false]/navigation-menu:duration-200 tw:**:data-[slot=navigation-menu-link]:focus:ring-0 tw:**:data-[slot=navigation-menu-link]:focus:outline-none',
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
       props.class,
     )"
   >

package/src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -16,8 +16,8 @@ const forwardedProps = useForwardProps(delegatedProps)
   <NavigationMenuIndicator
     data-slot="navigation-menu-indicator"
     v-bind="forwardedProps"
-    :class="cn('tw:data-[state=visible]:animate-in tw:data-[state=hidden]:animate-out tw:data-[state=hidden]:fade-out tw:data-[state=visible]:fade-in tw:top-full tw:z-[1] tw:flex tw:h-1.5 tw:items-end tw:justify-center tw:overflow-hidden', props.class)"
+    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
   >
-    <div class=""tw:bg-border tw:relative tw:top-[60%] tw:h-2 tw:w-2 tw:rotate-45 tw:rounded-tl-sm tw:shadow-md"" />
+    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuIndicator>
 </template>