@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.6

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

@@ -0,0 +1,40 @@
+<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";
+
+const props = defineProps<
+  RadioGroupItemProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    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',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="tw:relative tw:flex tw:items-center tw: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"
+        />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

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

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from "."
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    data-slot="range-calendar"
+    :class="cn('tw:p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class=""tw:flex tw:items-center tw: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"">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class=""tw:mt-2 tw:w-full"">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<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)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    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',
+      // 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',
+      // 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',
+      // Outside months
+      'tw:data-[outside-view]:text-muted-foreground',
+      // Disabled
+      'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50',
+      // Unavailable
+      'tw:data-[unavailable]:text-destructive-foreground tw:data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    data-slot="range-calendar-grid"
+    :class="cn('tw:w-full tw:border-collapse tw:space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>

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

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from "reka-ui"
+import { RangeCalendarGridBody } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody
+    data-slot="range-calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridBody>
+</template>

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

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from "reka-ui"
+import { RangeCalendarGridHead } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead
+    data-slot="range-calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridHead>
+</template>

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

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow
+    data-slot="range-calendar-grid-row"
+    :class="cn('tw:flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGridRow>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<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)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeadCell>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<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)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeader>
+</template>

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

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="range-calendar-heading"
+    :class="cn('tw:text-sm tw:font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { RangeCalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    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',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class=""tw:size-4"" />
+    </slot>
+  </RangeCalendarNext>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { RangeCalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    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',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class=""tw:size-4"" />
+    </slot>
+  </RangeCalendarPrev>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { GripVertical } from "lucide-vue-next"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "withHandle")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <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)"
+  >
+    <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"">
+        <slot>
+          <GripVertical class=""tw:size-2.5"" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SplitterPanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const { forwardRef } = useForwardExpose()
+</script>
+
+<template>
+  <SplitterPanel
+    :ref="forwardRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    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)"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterGroup>
+</template>

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -19,11 +19,11 @@ const delegatedProps = reactiveOmit(props, "class")
   <ScrollAreaRoot
     data-slot="scroll-area"
     v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
+    :class="cn('tw:relative', props.class)"
   >
     <ScrollAreaViewport
       data-slot="scroll-area-viewport"
-      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      class=""tw:focus-visible:ring-ring/50 tw:size-full tw:rounded-[inherit] tw:transition-[color,box-shadow] tw:outline-none tw:focus-visible:ring-[3px] tw:focus-visible:outline-1""
     >
       <slot />
     </ScrollAreaViewport>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
-})
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    orientation: "vertical",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
@@ -17,16 +20,19 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="scroll-area-scrollbar"
     v-bind="delegatedProps"
     :class="
-      cn('flex touch-none p-px transition-colors select-none',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
-         props.class)"
+      cn(
+        'tw:flex tw:touch-none tw:p-px tw:transition-colors tw:select-none',
+        orientation === 'vertical' &&
+          'tw:h-full tw:w-2.5 tw:border-l tw:border-l-transparent',
+        orientation === 'horizontal' &&
+          'tw:h-2.5 tw:flex-col tw:border-t tw:border-t-transparent',
+        props.class,
+      )
+    "
   >
     <ScrollAreaThumb
       data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
+      class="tw:bg-border tw:relative tw:flex-1 tw:rounded-full"
     />
   </ScrollAreaScrollbar>
 </template>

package/src/components/ui/select/SelectContent.vue

@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { SelectContentEmits, SelectContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
   SelectContent,
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { SelectScrollDownButton, SelectScrollUpButton } from "."
+} from "reka-ui";
+import { cn } from "@/lib/utils";
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     position: "popper",
   },
-)
-const emits = defineEmits<SelectContentEmits>()
+);
+const emits = defineEmits<SelectContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -33,16 +33,25 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SelectContent
       data-slot="select-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
+      :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:relative tw:z-50 tw:max-h-(--reka-select-content-available-height) tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:shadow-md',
+          position === 'popper' &&
+            'tw:data-[side=bottom]:translate-y-1 tw:data-[side=left]:-translate-x-1 tw:data-[side=right]:translate-x-1 tw:data-[side=top]:-translate-y-1',
+          props.class,
+        )
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+      <SelectViewport
+        :class="
+          cn(
+            'tw:p-1',
+            position === 'popper' &&
+              'tw:h-[var(--reka-select-trigger-height)] tw:w-full tw:min-w-[var(--reka-select-trigger-width)] tw:scroll-my-1',
+          )
+        "
+      >
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

package/src/components/ui/select/SelectItem.vue

@@ -24,15 +24,15 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        'tw:focus:bg-accent tw:focus:text-accent-foreground tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground tw:relative tw:flex tw:w-full tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-8 tw:pl-2 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 tw:*:[span]:last:flex tw:*:[span]:last:items-center tw:*:[span]:last:gap-2',
         props.class,
       )
     "
   >
-    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+    <span class=""tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
       <SelectItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Check class=""tw:size-4"" />
         </slot>
       </SelectItemIndicator>
     </span>

package/src/components/ui/select/SelectLabel.vue

@@ -10,7 +10,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }
 <template>
   <SelectLabel
     data-slot="select-label"
-    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+    :class="cn('tw:text-muted-foreground tw:px-2 tw:py-1.5 tw:text-xs', props.class)"
   >
     <slot />
   </SelectLabel>