@soft-stech/bootsman-ui-shadcn 1.0.5-beta.3 → 1.0.5-beta.5

package/src/components/ui/calendar/BuiCalendar.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import type { Calendar } from 'v-calendar'
+import { DatePicker } from 'v-calendar'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | Date | DatePickerModel
+    modelModifiers?: object
+    columns?: number
+    type?: 'single' | 'range'
+  }>(),
+  {
+    type: 'single',
+    columns: 1
+  }
+)
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value) return
+
+  if (direction === 'prev') calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter((name) => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div class="absolute top-3 z-[1] flex w-full justify-between px-4">
+      <button
+        :class="
+          cn(
+            buttonVariants({ variant: 'outline' }),
+            'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+          )
+        "
+        @click="handleNav('prev')"
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </button>
+      <button
+        :class="
+          cn(
+            buttonVariants({ variant: 'outline' }),
+            'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+          )
+        "
+        @click="handleNav('next')"
+      >
+        <ChevronRight class="h-4 w-4" />
+      </button>
+    </div>
+
+    <DatePicker
+      ref="datePicker"
+      v-model="modelValue"
+      v-bind="$attrs"
+      :model-modifiers="modelModifiers"
+      class="calendar"
+      trim-weeks
+      :transition="'none'"
+      :columns="columns"
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </DatePicker>
+  </div>
+</template>
+
+<style lang="postcss">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4;
+}
+.calendar .vc-title {
+  @apply pointer-events-none text-sm font-medium;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply flex;
+}
+.calendar .vc-weekday {
+  @apply w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground;
+}
+.calendar .vc-weeks {
+  @apply flex w-full flex-col space-y-2 [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply overflow-hidden bg-accent first:rounded-l-md last:rounded-r-md;
+}
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
+  @apply rounded-md bg-secondary;
+}
+.calendar .vc-day:has(.vc-highlight-base-start) {
+  @apply rounded-l-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-end) {
+  @apply rounded-r-md;
+}
+.calendar
+  .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(
+    :has(.vc-highlight-base-end)
+  ) {
+  @apply rounded-md;
+}
+.calendar .vc-day-content {
+  @apply relative inline-flex h-9 w-9 select-none items-center justify-center p-0 text-center text-sm font-normal ring-offset-background focus-within:relative focus-within:z-20 hover:bg-accent/[0.08] hover:text-accent-foreground hover:transition-colors focus-visible:outline-none focus-visible:ring-2  focus-visible:ring-ring focus-visible:ring-offset-2 aria-selected:opacity-100;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar
+  .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(
+    :has(.vc-highlight-content-light)
+  ):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid,
+.calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent/[0.08] text-accent-foreground;
+}
+.calendar .vc-pane-container.in-transition {
+  @apply overflow-hidden;
+}
+.calendar .vc-pane-container {
+  @apply relative w-full;
+}
+:root {
+  --vc-slide-translate: 22px;
+  --vc-slide-duration: 0.15s;
+  --vc-slide-timing: ease;
+}
+.calendar .vc-fade-enter-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-enter-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+  transition:
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  pointer-events: none;
+}
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+  position: absolute !important;
+  width: 100%;
+}
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.calendar .vc-slide-fade-leave-to {
+  opacity: 0;
+}
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-left,
+.calendar .vc-slide-fade-leave-to.direction-left {
+  -webkit-transform: translateX(var(--vc-slide-translate));
+  transform: translateX(var(--vc-slide-translate));
+}
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-right,
+.calendar .vc-slide-fade-leave-to.direction-right {
+  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+  transform: translateX(calc(-1 * var(--vc-slide-translate)));
+}
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-top,
+.calendar .vc-slide-fade-leave-to.direction-top {
+  -webkit-transform: translateY(var(--vc-slide-translate));
+  transform: translateY(var(--vc-slide-translate));
+}
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-bottom,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+  transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply mt-2 border-t border-solid border-secondary;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply mt-1 flex items-center px-1 text-sm font-semibold uppercase leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center rounded-md border border-solid border-secondary bg-background px-1 text-foreground;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 stroke-primary text-primary;
+}
+.vc-time-select-group select {
+  @apply appearance-none bg-background p-1 text-center text-foreground outline-none;
+}
+.vc-time-weekday {
+  @apply tracking-wide text-muted-foreground;
+}
+.vc-time-month {
+  @apply ml-2 text-primary;
+}
+.vc-time-day {
+  @apply ml-1 text-primary;
+}
+.vc-time-year {
+  @apply ml-2 text-muted-foreground;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
+</style>

package/src/components/ui/calendar/index.ts

@@ -0,0 +1,22 @@
+export { default as BuiCalendar } from './BuiCalendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header'
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}

package/src/components/ui/card/BuiCard.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'shadow-card-shadow rounded border border-border/[0.16] bg-card text-card-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/BuiCardContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/BuiCardDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

package/src/components/ui/card/BuiCardFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/BuiCardHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/BuiCardTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tighter', props.class)">
+    <slot />
+  </h3>
+</template>

package/src/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as BuiCard } from './BuiCard.vue'
+export { default as BuiCardHeader } from './BuiCardHeader.vue'
+export { default as BuiCardTitle } from './BuiCardTitle.vue'
+export { default as BuiCardDescription } from './BuiCardDescription.vue'
+export { default as BuiCardContent } from './BuiCardContent.vue'
+export { default as BuiCardFooter } from './BuiCardFooter.vue'

package/src/components/ui/checkbox/BuiCheckbox.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { cva } from 'class-variance-authority'
+import { useAttrs } from 'vue'
+
+const props = defineProps<CheckboxRootProps>()
+const emits = defineEmits<CheckboxRootEmits>()
+const attrs = useAttrs()
+const forwarded = useForwardPropsEmits(props, emits)
+
+const checkboxClasses = cva([
+  /* base */ 'peer h-4 w-4 shrink-0 rounded-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 transition duration-200',
+  /* border */ 'border border-foreground/[0.24] data-[state=checked]:border-primary hover:data-[state=checked]:border-primary-hover',
+  /* background */ 'hover:bg-foreground/[0.04] data-[state=checked]:bg-primary hover:data-[state=checked]:bg-primary-hover',
+  /* focus */ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  /* text */ 'text-primary-foreground'
+])
+const classes = cn(checkboxClasses(), attrs.class as string)
+</script>
+
+<template>
+  <CheckboxRoot v-bind="forwarded" :class="classes">
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <Check class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as BuiCheckbox } from './BuiCheckbox.vue'

package/src/components/ui/command/BuiCommand.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :open="true"
+    :model-value="''"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md border border-muted bg-popover text-popover-foreground shadow-md',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

package/src/components/ui/command/BuiCommandDialog.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import Command from './BuiCommand.vue'
+import { BuiDialog, BuiDialogContent } from '@/components/ui/dialog'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <BuiDialog v-bind="{ ...props, ...emitsAsProps }">
+    <BuiDialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
+        <slot />
+      </Command>
+    </BuiDialogContent>
+  </BuiDialog>
+</template>

package/src/components/ui/command/BuiCommandEmpty.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { ComboboxEmpty } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxEmptyProps>()
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="props" :class="cn('py-6 text-center text-sm', $attrs.class ?? '')">
+    <slot />
+  </ComboboxEmpty>
+</template>

package/src/components/ui/command/BuiCommandGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<
+  ComboboxGroupProps & {
+    heading?: string
+  }
+>()
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="props"
+    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

package/src/components/ui/command/BuiCommandInput.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxInputProps>()
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<template>
+  <div class="flex items-center border-b border-muted px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...props, ...$attrs }"
+      auto-focus
+      :class="
+        cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          $attrs.class ?? ''
+        )
+      "
+    />
+  </div>
+</template>

package/src/components/ui/command/BuiCommandItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { ComboboxItem, useEmitAsProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemProps>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="{ ...props, ...emitsAsProps }"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent/[0.08] data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+        $attrs.class ?? ''
+      )
+    "
+    @select.prevent
+  >
+    <slot />
+  </ComboboxItem>
+</template>

package/src/components/ui/command/BuiCommandList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxContentProps>()
+const emits = defineEmits<ComboboxContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>

package/src/components/ui/command/BuiCommandSeparator.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { ComboboxSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxSeparatorProps>()
+</script>
+
+<template>
+  <ComboboxSeparator v-bind="props" :class="cn('-mx-1 h-px bg-muted', $attrs.class ?? '')">
+    <slot />
+  </ComboboxSeparator>
+</template>