@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/month-grid/MonthGrid.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref, shallowRef, watch } from 'vue'
+  import { CalendarDays } from '@lucide/vue'
+  import { today as currentDate, type DateValue } from '@internationalized/date'
+  import { monthGridDates, parseMonth, shiftMonth } from '../../../../shared/src/lib/month-grid'
+  import { cn } from '../../lib/cn'
+  import { useDirection } from '../../lib/useDirection'
+  import { parseDateValue, formatDateValue } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import Popover from '../popover/Popover.vue'
+  import CalendarHeader from '../calendar/CalendarHeader.vue'
+  import CalendarLevels from '../calendar/CalendarLevels.vue'
+  import { calendarHeading, calendarRoot } from '../calendar/calendar.variants'
+  import type { CalendarLevel } from '../calendar/composables/useCalendarLevels'
+  import {
+    monthGrid,
+    monthGridHeader,
+    monthGridActions,
+    monthGridTable,
+    monthGridWeekday,
+    monthGridCell,
+    monthGridDay,
+    monthGridDayHeader,
+    monthGridDate,
+  } from './month-grid.variants'
+  import type {
+    MonthGridProps,
+    MonthGridDay,
+    MonthGridRange,
+    MonthGridHeader,
+    MonthGridWeekday,
+  } from './types'
+
+  defineOptions({ name: 'HnMonthGrid' })
+  const props = withDefaults(defineProps<Omit<MonthGridProps, 'month'>>(), {
+    timeZone: 'UTC',
+    weekdayFormat: 'short',
+    fixedWeeks: true,
+    showOutsideDays: true,
+    showToday: true,
+    showHeader: true,
+    size: 'md',
+  })
+  const model = defineModel<string>('month')
+  const emit = defineEmits<{ rangeChange: [range: MonthGridRange] }>()
+  defineSlots<{
+    default?(day: MonthGridDay): unknown
+    day?(day: MonthGridDay): unknown
+    date?(day: MonthGridDay): unknown
+    'day-trailing'?(day: MonthGridDay): unknown
+    header?(header: MonthGridHeader): unknown
+    'header-actions'?(header: MonthGridHeader): unknown
+    weekday?(weekday: MonthGridWeekday): unknown
+    footer?(range: MonthGridRange): unknown
+  }>()
+  const t = useUiLocale()
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const length = (value: number | string | undefined) =>
+    typeof value === 'number' ? `${Math.max(0, value)}px` : value
+  const layout = computed(() => ({
+    '--hn-month-grid-cell': length(props.dayMinHeight),
+    '--hn-month-grid-padding': length(props.dayPadding),
+  }))
+  function dayClass(value: MonthGridProps['cellClass'], day: MonthGridDay) {
+    return typeof value === 'function' ? value(day) : value
+  }
+  const today = computed(() =>
+    formatDateValue(parseDateValue(props.today) ?? currentDate(props.timeZone)),
+  )
+  const limits = computed(() => {
+    const min = parseDateValue(props.min)
+    const max = parseDateValue(props.max)
+    return min && max && min.compare(max) > 0 ? {} : { min, max }
+  })
+  const month = computed(() => {
+    let value = parseMonth(model.value) ? model.value! : today.value.slice(0, 7)
+    const min = limits.value.min?.toString().slice(0, 7)
+    const max = limits.value.max?.toString().slice(0, 7)
+    if (min && value < min) value = min
+    if (max && value > max) value = max
+    return value
+  })
+  const weekStartsOn = computed(() => props.weekStartsOn ?? t.value.calendar.weekStartsOn)
+  const dates = computed(() => monthGridDates(month.value, weekStartsOn.value, props.fixedWeeks))
+  const range = computed<MonthGridRange>(() => ({
+    month: month.value,
+    start: dates.value[0]![0]!,
+    end: dates.value.at(-1)!.at(-1)!,
+  }))
+  const dateFormatter = computed(
+    () =>
+      new Intl.DateTimeFormat(t.value.tag, {
+        dateStyle: 'full',
+        timeZone: 'UTC',
+        calendar: 'gregory',
+      }),
+  )
+  const numberFormatter = computed(() => new Intl.NumberFormat(t.value.tag, { useGrouping: false }))
+  const label = computed(() =>
+    new Intl.DateTimeFormat(t.value.tag, {
+      year: 'numeric',
+      month: 'long',
+      timeZone: 'UTC',
+      calendar: 'gregory',
+    }).format(new Date(`${month.value}-01T00:00:00Z`)),
+  )
+  const weeks = computed<MonthGridDay[][]>(() =>
+    dates.value.map(week =>
+      week.map(date => ({
+        date,
+        day: Number(date.slice(-2)),
+        dayLabel: numberFormatter.value.format(Number(date.slice(-2))),
+        weekday: new Date(`${date}T00:00:00Z`).getUTCDay() as MonthGridDay['weekday'],
+        label: dateFormatter.value.format(new Date(`${date}T00:00:00Z`)),
+        isToday: date === today.value,
+        isPast: date < today.value,
+        isFuture: date > today.value,
+        isOutside: date.slice(0, 7) !== month.value,
+        isDisabled:
+          !!props.disabled ||
+          !/^\d{4}-/.test(date) ||
+          date.startsWith('0000') ||
+          !!(limits.value.min && date < limits.value.min.toString()) ||
+          !!(limits.value.max && date > limits.value.max.toString()),
+      })),
+    ),
+  )
+  const weekdays = computed<MonthGridWeekday[]>(() => {
+    const short = new Intl.DateTimeFormat(t.value.tag, {
+      weekday: props.weekdayFormat,
+      timeZone: 'UTC',
+    })
+    const full = new Intl.DateTimeFormat(t.value.tag, { weekday: 'long', timeZone: 'UTC' })
+    return dates.value[0]!.map(date => {
+      const value = new Date(`${date}T00:00:00Z`)
+      return { day: value.getUTCDay(), label: short.format(value), fullLabel: full.format(value) }
+    })
+  })
+  function allowed(value: string) {
+    return (
+      !props.disabled &&
+      value !== month.value &&
+      (!limits.value.min || value >= limits.value.min.toString().slice(0, 7)) &&
+      (!limits.value.max || value <= limits.value.max.toString().slice(0, 7))
+    )
+  }
+  function navigate(value: string) {
+    if (parseMonth(value) && allowed(value)) model.value = value
+  }
+  const header = computed<MonthGridHeader>(() => ({
+    ...range.value,
+    label: label.value,
+    canPrev: allowed(shiftMonth(month.value, -1)),
+    canNext: allowed(shiftMonth(month.value, 1)),
+    canToday: allowed(today.value.slice(0, 7)),
+    prev: () => navigate(shiftMonth(month.value, -1)),
+    next: () => navigate(shiftMonth(month.value, 1)),
+    goToToday: () => navigate(today.value.slice(0, 7)),
+  }))
+  const pickerOpen = ref(false)
+  const level = ref<CalendarLevel>('month')
+  const pickerView = shallowRef<DateValue>(parseDateValue(`${month.value}-01`)!)
+  watch(pickerOpen, open => {
+    if (open) {
+      pickerView.value = parseDateValue(`${month.value}-01`)!
+      level.value = 'month'
+    }
+  })
+  watch(
+    () => [props.disabled, props.showHeader],
+    ([disabled, showHeader]) => {
+      if (disabled || !showHeader) pickerOpen.value = false
+    },
+  )
+  function pickMonth(value: DateValue | DateValue[] | undefined) {
+    const date = Array.isArray(value) ? value[0] : value
+    if (date) {
+      navigate(formatDateValue(date).slice(0, 7))
+      pickerOpen.value = false
+    }
+  }
+  function pickYear(value: DateValue | DateValue[] | undefined) {
+    const date = Array.isArray(value) ? value[0] : value
+    if (date) {
+      pickerView.value = pickerView.value.set({ year: date.year })
+      level.value = 'month'
+    }
+  }
+  function back() {
+    if (level.value === 'year') level.value = 'month'
+    else pickerOpen.value = false
+  }
+  let mounted = false
+  onMounted(() => {
+    mounted = true
+    emit('rangeChange', range.value)
+  })
+  watch(range, value => {
+    if (mounted) emit('rangeChange', value)
+  })
+  defineExpose({
+    range,
+    prev: () => header.value.prev(),
+    next: () => header.value.next(),
+    goToToday: () => header.value.goToToday(),
+  })
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-hn-month-grid
+    :dir="rootDirection"
+    :class="cn(monthGrid({ size: props.size }), props.class)"
+    :style="layout"
+  >
+    <div v-if="props.showHeader" data-hn-month-grid-header :class="monthGridHeader()">
+      <slot name="header" v-bind="header">
+        <div class="flex min-w-0 flex-1 items-center gap-2">
+          <CalendarHeader
+            class="min-w-0 flex-1"
+            :prev-label="t.calendar.prev"
+            :next-label="t.calendar.next"
+            :heading="label"
+            :prev-disabled="!header.canPrev"
+            :next-disabled="!header.canNext"
+            :disabled="props.disabled"
+            :size="props.size"
+            @prev="header.prev"
+            @next="header.next"
+          >
+            <template #heading>
+              <Popover v-model:open="pickerOpen" :aria-label="t.calendar.pickMonth">
+                <Button
+                  variant="ghost"
+                  tone="neutral"
+                  :size="props.size"
+                  :disabled="props.disabled"
+                  :class="calendarHeading()"
+                  :aria-label="`${t.calendar.pickMonth}: ${label}`"
+                >
+                  <span class="truncate">{{ label }}</span>
+                </Button>
+                <template #content>
+                  <div :dir="direction" :class="calendarRoot({ size: props.size })">
+                    <CalendarLevels
+                      v-model:level="level"
+                      :view="pickerView"
+                      :dir="direction"
+                      :size="props.size"
+                      :min-value="limits.min"
+                      :max-value="limits.max"
+                      :disabled="props.disabled"
+                      @pick-month="pickMonth"
+                      @pick-year="pickYear"
+                      @follow-year="pickerView = $event"
+                      @back="back"
+                    />
+                  </div>
+                </template>
+              </Popover>
+            </template>
+          </CalendarHeader>
+          <IconButton
+            v-if="props.showToday"
+            :label="t.monthGrid.today"
+            :size="props.size"
+            :disabled="!header.canToday"
+            @click="header.goToToday"
+          >
+            <CalendarDays />
+          </IconButton>
+        </div>
+        <div v-if="$slots['header-actions']" :class="monthGridActions()">
+          <slot name="header-actions" v-bind="header" />
+        </div>
+      </slot>
+    </div>
+    <table :class="monthGridTable()">
+      <caption class="sr-only">{{ props.label ?? t.calendar.label }} · {{ label }}</caption>
+      <thead>
+        <tr>
+          <th
+            v-for="weekday in weekdays"
+            :key="weekday.day"
+            scope="col"
+            :abbr="weekday.fullLabel"
+            :class="monthGridWeekday()"
+          >
+            <slot name="weekday" v-bind="weekday">{{ weekday.label }}</slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(week, index) in weeks" :key="week[0]!.date">
+          <td
+            v-for="day in week"
+            :key="day.date"
+            :data-date="day.date"
+            :data-outside="day.isOutside ? '' : undefined"
+            :data-today="day.isToday ? '' : undefined"
+            :data-disabled="day.isDisabled ? '' : undefined"
+            :class="
+              cn(
+                monthGridCell(),
+                index === weeks.length - 1 && 'border-b-0',
+                dayClass(props.cellClass, day),
+              )
+            "
+          >
+            <div data-hn-month-grid-day :class="cn(monthGridDay(), dayClass(props.dayClass, day))">
+              <template v-if="props.showOutsideDays || !day.isOutside">
+                <slot name="day" v-bind="day">
+                  <div :class="monthGridDayHeader()">
+                    <time
+                      :datetime="day.date"
+                      :aria-label="day.label"
+                      :aria-current="day.isToday ? 'date' : undefined"
+                      :data-today="day.isToday ? '' : undefined"
+                      :data-outside="day.isOutside ? '' : undefined"
+                      :data-disabled="day.isDisabled ? '' : undefined"
+                      :class="monthGridDate()"
+                    >
+                      <slot name="date" v-bind="day">{{ day.dayLabel }}</slot>
+                    </time>
+                    <div v-if="$slots['day-trailing']" class="min-w-0 text-end">
+                      <slot name="day-trailing" v-bind="day" />
+                    </div>
+                  </div>
+                  <slot v-bind="day" />
+                </slot>
+              </template>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="$slots.footer" class="border-line border-t p-3">
+      <slot name="footer" v-bind="range" />
+    </div>
+  </div>
+</template>

package/src/components/month-grid/month-grid.variants.ts

@@ -0,0 +1,12 @@
+export {
+  monthGrid,
+  monthGridHeader,
+  monthGridActions,
+  monthGridTable,
+  monthGridWeekday,
+  monthGridCell,
+  monthGridDay,
+  monthGridDayHeader,
+  monthGridDate,
+  type MonthGridSize,
+} from '../../../../shared/src/variants/month-grid'

package/src/components/month-grid/types.ts

@@ -0,0 +1,66 @@
+import type { MonthGridSize } from './month-grid.variants'
+
+export interface MonthGridProps {
+  month?: string
+  dir?: 'ltr' | 'rtl'
+  min?: string
+  max?: string
+  today?: string
+  timeZone?: string
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  weekdayFormat?: 'narrow' | 'short' | 'long'
+  fixedWeeks?: boolean
+  showOutsideDays?: boolean
+  showToday?: boolean
+  showHeader?: boolean
+  disabled?: boolean
+  size?: MonthGridSize
+  dayMinHeight?: number | string
+  dayPadding?: number | string
+  cellClass?: string | ((day: MonthGridDay) => string | undefined)
+  dayClass?: string | ((day: MonthGridDay) => string | undefined)
+  label?: string
+  class?: string
+}
+
+export interface MonthGridDay {
+  date: string
+  day: number
+  dayLabel: string
+  weekday: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  label: string
+  isToday: boolean
+  isPast: boolean
+  isFuture: boolean
+  isOutside: boolean
+  isDisabled: boolean
+}
+
+export interface MonthGridRange {
+  month: string
+  start: string
+  end: string
+}
+
+export interface MonthGridHeader extends MonthGridRange {
+  label: string
+  canPrev: boolean
+  canNext: boolean
+  canToday: boolean
+  prev: () => void
+  next: () => void
+  goToToday: () => void
+}
+
+export interface MonthGridWeekday {
+  day: number
+  label: string
+  fullLabel: string
+}
+
+export interface MonthGridExpose {
+  range: MonthGridRange
+  prev: () => void
+  next: () => void
+  goToToday: () => void
+}

package/src/components/multi-combobox/MultiCombobox.vue

@@ -2,6 +2,7 @@
   import { computed } from 'vue'
   import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import { buttonIconBox } from '../button/button.variants'
@@ -33,6 +34,7 @@
   const props = withDefaults(
     defineProps<{
       options: SelectItems<T>
+      virtualize?: VirtualizeOptions
       selectedOptions?: T[]
       placeholder?: string
       ignoreFilter?: boolean
@@ -163,7 +165,7 @@
         </span>
       </div>
     </ComboboxAnchor>
-    <ComboboxList :options="props.options" :keyboard="keyboard">
+    <ComboboxList :options="props.options" :keyboard="keyboard" :virtualize="props.virtualize">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />
       </template>

package/src/components/multi-combobox/multi-combobox.variants.ts

@@ -1,14 +1 @@
-import { tv } from '../../lib/tv'
-
-export const multiComboboxHost = tv({
-  base: '',
-  variants: {
-    clearing: {
-      true: 'pe-[calc(2*var(--hn-input-h))]',
-    },
-  },
-})
-
-export const multiComboboxEnd = tv({
-  base: 'absolute inset-y-0 end-0 flex items-stretch',
-})
+export * from '../../../../shared/src/variants/multi-combobox'

package/src/components/multi-select/MultiSelect.vue

@@ -2,6 +2,7 @@
   import { computed, ref } from 'vue'
   import { SelectRoot, SelectTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import Chip from '../chip/Chip.vue'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
@@ -26,6 +27,7 @@
   const props = withDefaults(
     defineProps<{
       options: SelectItems<T>
+      virtualize?: VirtualizeOptions
       placeholder?: string
       name?: string
       required?: boolean
@@ -64,7 +66,9 @@
   const selected = computed(() =>
     flattenOptions(props.options).filter(option => model.value.includes(option.value)),
   )
-  const formOptions = computed(() => flattenOptions(props.options))
+  const formOptions = computed(() =>
+    props.virtualize ? selected.value : flattenOptions(props.options),
+  )
   const visible = computed(() => selected.value.slice(0, props.maxVisible))
   const overflow = computed(() => selected.value.length - visible.value.length)
   const chipSize = computed(() => (size.value === 'sm' ? 'sm' : 'md'))
@@ -178,7 +182,7 @@
         </option>
       </select>
     </VisuallyHidden>
-    <SelectList :options="props.options" :keyboard="keyboard">
+    <SelectList :options="props.options" :keyboard="keyboard" :virtualize="props.virtualize">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />
       </template>

package/src/components/multi-select/multi-select.variants.ts

@@ -1,13 +1 @@
-import { tv } from '../../lib/tv'
-
-export const multiSelectTrigger = tv({
-  base: [
-    'group/hn-disclosure cursor-pointer items-center ps-[var(--hn-input-px)] pe-0 text-start',
-    'data-placeholder:text-faint data-placeholder:font-normal',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-  ],
-})
-
-export const multiSelectChips = tv({
-  base: 'flex min-w-0 flex-1 items-center gap-1 overflow-hidden',
-})
+export * from '../../../../shared/src/variants/multi-select'

package/src/components/nav-link/nav-link.variants.ts

@@ -1,21 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const navLink = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-    'h-9 gap-[var(--hn-control-gap)] rounded-md ps-2.5 pe-2 text-sm select-none',
-    '[&_svg]:size-4 [&_svg]:shrink-0',
-  ],
-  variants: {
-    active: {
-      true: 'text-fg font-medium',
-      false: 'text-muted',
-    },
-  },
-  defaultVariants: { active: false },
-})
-
-export const navLinkLabel = tv({
-  base: 'hn-sidebar-label shrink-0 whitespace-nowrap',
-})
+export * from '../../../../shared/src/variants/nav-link'

package/src/components/navigation-menu/NavigationMenu.vue

@@ -2,6 +2,8 @@
   import { computed, toRef } from 'vue'
   import { NavigationMenuRoot, NavigationMenuList, NavigationMenuViewport } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import { rekaNavigationViewportStyle } from '../../lib/reka/styles'
+  import { useRekaNavigationViewport } from '../../lib/reka/navigation-viewport'
   import { useAccessibleName } from '../../lib/a11y'
   import { useDirection } from '../../lib/useDirection'
   import { provideNavigationMenu } from './context'
@@ -25,6 +27,7 @@
     unmountOnHide: true,
   })
   const model = defineModel<string>({ default: '' })
+  const { viewport, ready } = useRekaNavigationViewport()
   const { root, direction, rootDirection } = useDirection(() => props.dir)
   const onKeydown = useNavigationMenuKeyboard(
     root,
@@ -72,13 +75,20 @@
         <slot :value="model" />
       </NavigationMenuList>
       <NavigationMenuViewport
+        as-child
         data-hn-navigation-viewport
         :align="align"
         :data-side="placement"
         :class="
           cn(navigationMenuViewport({ orientation: props.orientation, side }), props.viewportClass)
         "
-      />
+      >
+        <div
+          ref="viewport"
+          :data-hn-ready="ready ? '' : undefined"
+          :style="rekaNavigationViewportStyle"
+        />
+      </NavigationMenuViewport>
     </nav>
   </NavigationMenuRoot>
 </template>

package/src/components/navigation-menu/navigation-menu.variants.ts

@@ -1,82 +1 @@
-import { tv } from '../../lib/tv'
-
-export const navigationMenu = tv({
-  base: 'relative w-fit max-w-full',
-})
-
-export const navigationMenuList = tv({
-  base: 'm-0 flex list-none gap-1 p-0',
-  variants: {
-    orientation: {
-      horizontal: 'flex-wrap items-center',
-      vertical: 'flex-col items-stretch',
-    },
-  },
-})
-
-export const navigationMenuControl = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
-    'text-fg gap-(--hn-control-gap) rounded-md text-start font-medium no-underline outline-none select-none [&_svg]:shrink-0',
-    'data-[state=open]:bg-inset data-active:text-accent-text data-active:bg-accent-soft',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-  variants: {
-    size: {
-      sm: 'min-h-(--hn-control-h-sm) px-(--hn-control-px-sm) text-xs [&_svg]:size-3.5',
-      md: 'min-h-(--hn-control-h-md) px-(--hn-control-px-md) text-sm [&_svg]:size-4',
-      lg: 'min-h-(--hn-control-h-lg) px-(--hn-control-px-lg) text-base [&_svg]:size-[1.125rem]',
-    },
-    orientation: {
-      horizontal: '',
-      vertical: 'w-full',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const navigationMenuTrigger = tv({
-  base: 'group/hn-disclosure',
-})
-
-export const navigationMenuIcon = tv({
-  base: 'inline-flex shrink-0 items-center justify-center gap-1',
-})
-
-export const navigationMenuDisclosure = tv({
-  base: 'inline-flex shrink-0 text-muted',
-  variants: {
-    orientation: { horizontal: '', vertical: 'rtl:-scale-x-100' },
-  },
-})
-
-export const navigationMenuLink = tv({
-  base: 'py-2',
-})
-
-export const navigationMenuContent = tv({
-  base: 'hn-anim-navigation-content absolute start-0 top-0 w-80 max-w-[min(calc(100vw-2rem),var(--hn-navigation-max-width,100vw))] outline-none rtl:start-auto rtl:end-0',
-  variants: {
-    padded: { true: 'p-2', false: '' },
-  },
-  defaultVariants: { padded: true },
-})
-
-export const navigationMenuViewport = tv({
-  base: [
-    'hn-navigation-viewport bg-surface border-line absolute z-(--hn-z-overlay) overflow-hidden rounded-lg border shadow-md',
-    'h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width)',
-  ],
-  variants: {
-    orientation: {
-      horizontal:
-        'top-full mt-2 [left:clamp(var(--hn-navigation-min-x,0px),var(--reka-navigation-menu-viewport-left),calc(var(--hn-navigation-bound-end,100vw)-var(--reka-navigation-menu-viewport-width)-2px))]',
-      vertical: '[top:var(--reka-navigation-menu-viewport-top)]',
-    },
-    side: { start: '', end: '' },
-  },
-  compoundVariants: [
-    { orientation: 'vertical', side: 'end', class: 'start-full ms-2' },
-    { orientation: 'vertical', side: 'start', class: 'end-full me-2' },
-  ],
-})
+export * from '../../../../shared/src/variants/navigation-menu'