@geniusdynamics/ns8-ui-lib 1.0.5 → 1.0.7

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>

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

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <NavigationMenuItem
     data-slot="navigation-menu-item"
     v-bind="delegatedProps"
-    :class="cn('tw:relative', props.class)"
+    :class="cn('relative', props.class)"
   >
     <slot />
   </NavigationMenuItem>

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

@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <NavigationMenuLink
     data-slot="navigation-menu-link"
     v-bind="forwarded"
-    :class="cn('tw:data-active:focus:bg-accent tw:data-active:hover:bg-accent tw:data-active:bg-accent/50 tw:data-active:text-accent-foreground tw:hover:bg-accent tw:hover:text-accent-foreground tw:focus:bg-accent tw:focus:text-accent-foreground tw:ring-ring/10 tw:dark:ring-ring/20 tw:dark:outline-ring/40 tw:outline-ring/50 tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground tw:flex tw:flex-col tw:gap-1 tw:rounded-sm tw:p-2 tw:text-sm tw:transition-[color,box-shadow] tw:focus-visible:ring-4 tw:focus-visible:outline-1 tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </NavigationMenuLink>

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

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'tw:group tw:flex tw:flex-1 tw:list-none tw:items-center tw:justify-center tw:gap-1',
+        'group flex flex-1 list-none items-center justify-center gap-1',
         props.class,
       )
     "

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

@@ -21,11 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps)
   <NavigationMenuTrigger
     data-slot="navigation-menu-trigger"
     v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'tw:group', props.class)"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
   >
     <slot />
     <ChevronDown
-      class=""tw:relative tw:top-[1px] tw:ml-1 tw:size-3 tw:transition tw:duration-300 tw:group-data-[state=open]:rotate-180""
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>

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

@@ -16,13 +16,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <div class=""tw:absolute tw:top-full tw:left-0 tw:isolate tw:z-50 tw:flex tw:justify-center"">
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
     <NavigationMenuViewport
       data-slot="navigation-menu-viewport"
       v-bind="forwardedProps"
       :class="
         cn(
-          'tw:origin-top-center tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-90 tw:relative tw:mt-1.5 tw:h-[var(--reka-navigation-menu-viewport-height)] tw:w-full tw:overflow-hidden tw:rounded-md tw:border tw:shadow tw:md:w-[var(--reka-navigation-menu-viewport-width)] tw:left-[var(--reka-navigation-menu-viewport-left)]',
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
           props.class,
         )
       "

package/src/components/ui/number-field/NumberField.vue

@@ -14,7 +14,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <NumberFieldRoot v-slot="slotProps" v-bind="forwarded" :class="cn('tw:grid tw:gap-1.5', props.class)">
+  <NumberFieldRoot v-slot="slotProps" v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
     <slot v-bind="slotProps" />
   </NumberFieldRoot>
 </template>

package/src/components/ui/number-field/NumberFieldContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('tw:relative tw:[&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 tw:[&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
     <slot />
   </div>
 </template>

package/src/components/ui/number-field/NumberFieldDecrement.vue

@@ -14,9 +14,9 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('tw:absolute tw:top-1/2 tw:-translate-y-1/2 tw:left-0 tw:p-3 tw:disabled:cursor-not-allowed tw:disabled:opacity-20', props.class)">
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
     <slot>
-      <Minus class=""tw:h-4 tw:w-4"" />
+      <Minus class="h-4 w-4" />
     </slot>
   </NumberFieldDecrement>
 </template>

package/src/components/ui/number-field/NumberFieldIncrement.vue

@@ -14,9 +14,9 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('tw:absolute tw:top-1/2 tw:-translate-y-1/2 tw:right-0 tw:disabled:cursor-not-allowed tw:disabled:opacity-20 tw:p-3', props.class)">
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
     <slot>
-      <Plus class=""tw:h-4 tw:w-4"" />
+      <Plus class="h-4 w-4" />
     </slot>
   </NumberFieldIncrement>
 </template>

package/src/components/ui/number-field/NumberFieldInput.vue

@@ -11,6 +11,6 @@ const props = defineProps<{
 <template>
   <NumberFieldInput
     data-slot="input"
-    :class="cn('tw:flex tw:h-9 tw:w-full tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:py-1 tw:text-sm tw:text-center tw:shadow-sm tw:transition-colors tw:placeholder:text-muted-foreground tw:focus-visible:outline-none tw:focus-visible:ring-1 tw:focus-visible:ring-ring tw:disabled:cursor-not-allowed tw:disabled:opacity-50', props.class)"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
   />
 </template>

package/src/components/ui/pagination/Pagination.vue

@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-slot="slotProps"
     data-slot="pagination"
     v-bind="forwarded"
-    :class="cn('tw:mx-auto tw:flex tw:w-full tw:justify-center', props.class)"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
   >
     <slot v-bind="slotProps" />
   </PaginationRoot>

package/src/components/ui/pagination/PaginationContent.vue

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class")
     v-slot="slotProps"
     data-slot="pagination-content"
     v-bind="delegatedProps"
-    :class="cn('tw:flex tw:flex-row tw:items-center tw:gap-1', props.class)"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
   >
     <slot v-bind="slotProps" />
   </PaginationList>

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -15,11 +15,11 @@ const delegatedProps = reactiveOmit(props, "class")
   <PaginationEllipsis
     data-slot="pagination-ellipsis"
     v-bind="delegatedProps"
-    :class="cn('tw:flex tw:size-9 tw:items-center tw:justify-center', props.class)"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class=""tw:size-4"" />
-      <span class=""tw:sr-only"">More pages</span>
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
     </slot>
   </PaginationEllipsis>
 </template>

package/src/components/ui/pagination/PaginationFirst.vue

@@ -22,12 +22,12 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationFirst
     data-slot="pagination-first"
-    :class="cn(buttonVariants({ variant: 'ghost', size }), 'tw:gap-1 tw:px-2.5 tw:sm:pr-2.5', props.class)"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
     v-bind="forwarded"
   >
     <slot>
       <ChevronLeftIcon />
-      <span class=""tw:hidden tw:sm:block"">First</span>
+      <span class="hidden sm:block">First</span>
     </slot>
   </PaginationFirst>
 </template>

package/src/components/ui/pagination/PaginationLast.vue

@@ -22,11 +22,11 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationLast
     data-slot="pagination-last"
-    :class="cn(buttonVariants({ variant: 'ghost', size }), 'tw:gap-1 tw:px-2.5 tw:sm:pr-2.5', props.class)"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
     v-bind="forwarded"
   >
     <slot>
-      <span class=""tw:hidden tw:sm:block"">Last</span>
+      <span class="hidden sm:block">Last</span>
       <ChevronRightIcon />
     </slot>
   </PaginationLast>

package/src/components/ui/pagination/PaginationNext.vue

@@ -22,11 +22,11 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationNext
     data-slot="pagination-next"
-    :class="cn(buttonVariants({ variant: 'ghost', size }), 'tw:gap-1 tw:px-2.5 tw:sm:pr-2.5', props.class)"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
     v-bind="forwarded"
   >
     <slot>
-      <span class=""tw:hidden tw:sm:block"">Next</span>
+      <span class="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </slot>
   </PaginationNext>

package/src/components/ui/pagination/PaginationPrevious.vue

@@ -22,12 +22,12 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationPrev
     data-slot="pagination-previous"
-    :class="cn(buttonVariants({ variant: 'ghost', size }), 'tw:gap-1 tw:px-2.5 tw:sm:pr-2.5', props.class)"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
     v-bind="forwarded"
   >
     <slot>
       <ChevronLeftIcon />
-      <span class=""tw:hidden tw:sm:block"">Previous</span>
+      <span class="hidden sm:block">Previous</span>
     </slot>
   </PaginationPrev>
 </template>

package/src/components/ui/pin-input/PinInput.vue

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

package/src/components/ui/pin-input/PinInputGroup.vue

@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <Primitive
     data-slot="pin-input-group"
     v-bind="forwardedProps"
-    :class="cn('tw:flex tw:items-center', props.class)"
+    :class="cn('flex items-center', props.class)"
   >
     <slot />
   </Primitive>

package/src/components/ui/pin-input/PinInputSlot.vue

@@ -16,6 +16,6 @@ const forwardedProps = useForwardProps(delegatedProps)
   <PinInputInput
     data-slot="pin-input-slot"
     v-bind="forwardedProps"
-    :class="cn('tw:border-input tw:focus:border-ring tw:focus:ring-ring/50 tw:focus:aria-invalid:ring-destructive/20 tw:dark:bg-input/30 tw:dark:focus:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:focus:aria-invalid:border-destructive 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:text-center tw:first:rounded-l-md tw:first:border-l tw:last:rounded-r-md tw:focus:z-10 tw:focus:ring-[3px]', props.class)"
+    :class="cn('border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none text-center first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus:ring-[3px]', props.class)"
   />
 </template>

package/src/components/ui/popover/PopoverContent.vue

@@ -34,7 +34,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:w-72 tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:origin-(--reka-popover-content-transform-origin) 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-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
           props.class,
         )
       "

package/src/components/ui/progress/Progress.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import type { ProgressRootProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { ProgressIndicator, ProgressRoot } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
   {
     modelValue: 0,
   },
-);
+)
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
@@ -21,14 +24,14 @@ const delegatedProps = reactiveOmit(props, "class");
     v-bind="delegatedProps"
     :class="
       cn(
-        'tw:bg-primary/20 tw:relative tw:h-2 tw:w-full tw:overflow-hidden tw:rounded-full',
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
         props.class,
       )
     "
   >
     <ProgressIndicator
       data-slot="progress-indicator"
-      class="tw:bg-primary tw:h-full tw:w-full tw:flex-1 tw:transition-all"
+      class="bg-primary h-full w-full flex-1 transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>

package/src/components/ui/radio-group/RadioGroup.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <RadioGroupRoot
     v-slot="slotProps"
     data-slot="radio-group"
-    :class="cn('tw:grid tw:gap-3', props.class)"
+    :class="cn('grid gap-3', props.class)"
     v-bind="forwarded"
   >
     <slot v-bind="slotProps" />

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { RadioGroupItemProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { CircleIcon } from "lucide-vue-next";
-import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { RadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CircleIcon } from "lucide-vue-next"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-  RadioGroupItemProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -21,19 +23,17 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'tw:border-input tw:text-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:dark:bg-input/30 tw:aspect-square tw:size-4 tw:shrink-0 tw:rounded-full tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50',
+        'border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
   >
     <RadioGroupIndicator
       data-slot="radio-group-indicator"
-      class="tw:relative tw:flex tw:items-center tw:justify-center"
+      class="relative flex items-center justify-center"
     >
       <slot>
-        <CircleIcon
-          class="tw:fill-primary tw:absolute tw:top-1/2 tw:left-1/2 tw:size-2 tw:-translate-x-1/2 tw:-translate-y-1/2"
-        />
+        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </slot>
     </RadioGroupIndicator>
   </RadioGroupItem>

package/src/components/ui/range-calendar/RangeCalendar.vue

@@ -19,19 +19,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <RangeCalendarRoot
     v-slot="{ grid, weekDays }"
     data-slot="range-calendar"
-    :class="cn('tw:p-3', props.class)"
+    :class="cn('p-3', props.class)"
     v-bind="forwarded"
   >
     <RangeCalendarHeader>
       <RangeCalendarHeading />
 
-      <div class=""tw:flex tw:items-center tw:gap-1"">
+      <div class="flex items-center gap-1">
         <RangeCalendarPrevButton />
         <RangeCalendarNextButton />
       </div>
     </RangeCalendarHeader>
 
-    <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">
       <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
         <RangeCalendarGridHead>
           <RangeCalendarGridRow>
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </RangeCalendarGridRow>
         </RangeCalendarGridHead>
         <RangeCalendarGridBody>
-          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class=""tw:mt-2 tw:w-full"">
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
             <RangeCalendarCell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"

package/src/components/ui/range-calendar/RangeCalendarCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <RangeCalendarCell
     data-slot="range-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:[&:has([data-selected])]:bg-accent tw:first:[&:has([data-selected])]:rounded-l-md tw:last:[&:has([data-selected])]:rounded-r-md tw:[&:has([data-selected][data-selection-end])]:rounded-r-md tw:[&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -20,18 +20,18 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="range-calendar-trigger"
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
-      'tw:h-8 tw:w-8 tw:p-0 tw:font-normal tw:data-[selected]:opacity-100',
-      'tw:[&[data-today]:not([data-selected])]:bg-accent tw:[&[data-today]:not([data-selected])]:text-accent-foreground',
+      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selection Start
-      'tw:data-[selection-start]:bg-primary tw:data-[selection-start]:text-primary-foreground tw:data-[selection-start]:hover:bg-primary tw:data-[selection-start]:hover:text-primary-foreground tw:data-[selection-start]:focus:bg-primary tw:data-[selection-start]:focus:text-primary-foreground',
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
       // Selection End
-      'tw:data-[selection-end]:bg-primary tw:data-[selection-end]:text-primary-foreground tw:data-[selection-end]:hover:bg-primary tw:data-[selection-end]:hover:text-primary-foreground tw:data-[selection-end]:focus:bg-primary tw:data-[selection-end]:focus:text-primary-foreground',
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
       // Outside months
-      'tw:data-[outside-view]:text-muted-foreground',
+      'data-[outside-view]:text-muted-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',
       props.class,
     )"
     v-bind="forwardedProps"

package/src/components/ui/range-calendar/RangeCalendarGrid.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <RangeCalendarGrid
     data-slot="range-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/range-calendar/RangeCalendarGridRow.vue

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

package/src/components/ui/range-calendar/RangeCalendarHeadCell.vue

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

package/src/components/ui/range-calendar/RangeCalendarHeader.vue

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

package/src/components/ui/range-calendar/RangeCalendarHeading.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <RangeCalendarHeading
     v-slot="{ headingValue }"
     data-slot="range-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/range-calendar/RangeCalendarNextButton.vue

@@ -19,14 +19,14 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="range-calendar-next-button"
     :class="cn(
       buttonVariants({ variant: 'outline' }),
-      'tw:absolute tw:right-1',
-      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      'absolute right-1',
+      '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>
   </RangeCalendarNext>
 </template>

package/src/components/ui/range-calendar/RangeCalendarPrevButton.vue

@@ -19,14 +19,14 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="range-calendar-prev-button"
     :class="cn(
       buttonVariants({ variant: 'outline' }),
-      'tw:absolute tw:left-1',
-      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      'absolute left-1',
+      '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>
   </RangeCalendarPrev>
 </template>

package/src/components/ui/resizable/ResizableHandle.vue

@@ -17,12 +17,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SplitterResizeHandle
     data-slot="resizable-handle"
     v-bind="forwarded"
-    :class="cn('tw:bg-border tw:focus-visible:ring-ring tw:relative tw:flex tw:w-px tw:items-center tw:justify-center tw:after:absolute tw:after:inset-y-0 tw:after:left-1/2 tw:after:w-1 tw:after:-translate-x-1/2 tw:focus-visible:ring-1 tw:focus-visible:ring-offset-1 tw:focus-visible:outline-hidden tw:data-[orientation=vertical]:h-px tw:data-[orientation=vertical]:w-full tw:data-[orientation=vertical]:after:left-0 tw:data-[orientation=vertical]:after:h-1 tw:data-[orientation=vertical]:after:w-full tw:data-[orientation=vertical]:after:-translate-y-1/2 tw:data-[orientation=vertical]:after:translate-x-0 tw:[&[data-orientation=vertical]>div]:rotate-90', props.class)"
+    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
   >
     <template v-if="props.withHandle">
-      <div class=""tw:bg-border tw:z-10 tw:flex tw:h-4 tw:w-3 tw:items-center tw:justify-center tw:rounded-xs tw:border"">
+      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
         <slot>
-          <GripVertical class=""tw:size-2.5"" />
+          <GripVertical class="size-2.5" />
         </slot>
       </div>
     </template>

package/src/components/ui/resizable/ResizablePanelGroup.vue

@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-slot="slotProps"
     data-slot="resizable-panel-group"
     v-bind="forwarded"
-    :class="cn('tw:flex tw:h-full tw:w-full tw:data-[orientation=vertical]:flex-col', props.class)"
+    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
   >
     <slot v-bind="slotProps" />
   </SplitterGroup>