@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.6

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from "reka-ui"
+import { useFormField } from "./useFormField"
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

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

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('tw:text-muted-foreground tw:text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('tw:grid tw:gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from '@/components/ui/label'
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'tw:data-[error=true]:text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('tw:text-destructive tw:text-sm', props.class)"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot
+    v-slot="slotProps"
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </HoverCardRoot>
+</template>

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

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

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from "reka-ui"
+import { HoverCardTrigger } from "reka-ui"
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </HoverCardTrigger>
+</template>

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(
-      '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',
+      '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',
       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(
-      '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',
+      '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',
 
       // Variants based on alignment.
-      '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',
+      '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',
 
       // Focus state.
-      '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]',
+      '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]',
 
       // Error state.
-      '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',
+      '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',
 
       props.class,
     )"

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

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import type { InputGroupButtonProps } from "."
+import type { HTMLAttributes } from "vue"
+import type { InputGroupButtonVariants } from "."
+import type { ButtonVariants } from '@/components/ui/button'
 import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
 import { inputGroupButtonVariants } from "."
 
+interface InputGroupButtonProps {
+  variant?: ButtonVariants["variant"]
+  size?: InputGroupButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
 const props = withDefaults(defineProps<InputGroupButtonProps>(), {
   size: "xs",
   variant: "ghost",

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

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

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

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     :class="cn(
-      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      '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',
       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(
-      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+      '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',
       props.class,
     )"
   />

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

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

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('tw:flex tw:items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { MinusIcon } from "lucide-vue-next"
+import { useForwardProps } from "reka-ui"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    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)"
+  >
+    {{ 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>
+  </div>
+</template>

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

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 <template>
   <Primitive
     data-slot="item"
+    :data-variant="variant"
+    :data-size="size"
     :as="as"
     :as-child="asChild"
     :class="cn(itemVariants({ variant, size }), props.class)"

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>