@geniusdynamics/ns8-ui-lib 1.0.3 → 1.0.5

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-actions"
-    :class="cn('flex items-center gap-2', props.class)"
+    :class="cn('tw:flex tw:items-center tw: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('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)"
+    :class="cn('tw:flex tw:flex-1 tw:flex-col tw:gap-1 tw:[&+[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(
-      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+      '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',
       props.class,
     )"
   >

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-footer"
-    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
+    :class="cn('tw:flex tw:basis-full tw:items-center tw:justify-between tw: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('group/item-group flex flex-col', props.class)"
+    :class="cn('tw:group/item-group tw:flex tw: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('flex basis-full items-center justify-between gap-2', props.class)"
+    :class="cn('tw:flex tw:basis-full tw:items-center tw:justify-between tw: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('my-0', props.class)"
+    :class="cn('tw: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('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)"
+    :class="cn('tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium', props.class)"
   >
     <slot />
   </div>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<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',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('tw:inline-flex tw:items-center tw:gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>

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

@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="
       cn(
-        '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',
+        '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',
         props.class,
       )
     "

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

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

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  MenubarCheckboxItem,
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    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',
+      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"">
+      <MenubarItemIndicator>
+        <slot name="indicator-icon">
+          <Check class=""tw:size-4"" />
+        </slot>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarContent,
+  MenubarPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "start",
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      data-slot="menubar-content"
+      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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from "reka-ui"
+import { MenubarGroup } from "reka-ui"
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup
+    data-slot="menubar-group"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarGroup>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    data-slot="menubar-item"
+    :data-inset="inset ? '' : undefined"
+    :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',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>

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

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

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from "reka-ui"
+import { MenubarMenu } from "reka-ui"
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu
+    data-slot="menubar-menu"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarMenu>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "reka-ui"
+import {
+  MenubarRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<MenubarRadioGroupProps>()
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup
+    data-slot="menubar-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </MenubarRadioGroup>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    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',
+      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"">
+      <MenubarItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class=""tw:size-2 tw:fill-current"" />
+        </slot>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarSeparator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator
+    data-slot="menubar-separator"
+    :class=" cn('tw:bg-border tw:-mx-1 tw:my-1 tw:h-px', props.class)"
+    v-bind="forwardedProps"
+  />
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="menubar-shortcut"
+    :class="cn('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from "reka-ui"
+import { MenubarSub, useForwardPropsEmits } from "reka-ui"
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub
+    v-slot="slotProps"
+    data-slot="menubar-sub"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </MenubarSub>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      data-slot="menubar-sub-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--reka-menubar-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { MenubarSubTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    data-slot="menubar-sub-trigger"
+    :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',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class=""tw:ml-auto tw:size-4"" />
+  </MenubarSubTrigger>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    data-slot="menubar-trigger"
+    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',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { ChevronDownIcon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class=""tw:group/native-select tw:relative tw:w-fit tw:has-[select:disabled]:opacity-50""
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      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',
+        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""
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+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)">
+    <slot />
+  </optgroup>
+</template>

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

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+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)">
+    <slot />
+  </option>
+</template>