@bitrix24/b24ui-nuxt 0.4.9 → 0.4.11

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.CH0xlXgy.cjs');
+const templates = require('./shared/b24ui-nuxt.CltBJi1M.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.D6rkGFKm.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CJqO7fYv.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Collapsible.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/collapsible'
+import { tv } from '../utils/tv'
+
+const appConfigCollapsible = _appConfig as AppConfig & { b24ui: { collapsible: Partial<typeof theme> } }
+
+const collapsible = tv({ extend: tv(theme), ...(appConfigCollapsible.b24ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<CollapsibleProps>(), {
+  unmountOnHide: true
+})
+const emits = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = collapsible()
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="b24ui.content({ class: props.b24ui?.content })">
+      <slot name="content" />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

package/dist/runtime/components/DropdownMenu.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui'
@@ -99,6 +100,7 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

package/dist/runtime/components/Navbar.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar'
+import { tv } from '../utils/tv'
+
+const appConfigNavbar = _appConfig as AppConfig & { b24ui: { navbar: Partial<typeof theme> } }
+
+const navbar = tv({ extend: tv(theme), ...(appConfigNavbar.b24ui?.navbar || {}) })
+
+export interface NavbarProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'nav'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbar.slots>
+}
+
+export interface NavbarSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarProps>(), {
+  as: 'nav'
+})
+defineSlots<NavbarSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = navbar()
+</script>
+
+<template>
+  <!-- Navbar -->
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarDivider.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-divider'
+import { tv } from '../utils/tv'
+
+const appConfigNavbarDivider = _appConfig as AppConfig & { b24ui: { navbarDivider: Partial<typeof theme> } }
+
+const navbarDivider = tv({ extend: tv(theme), ...(appConfigNavbarDivider.b24ui?.navbarDivider || {}) })
+
+export interface NavbarDividerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarDivider.slots>
+}
+
+export interface NavbarDividerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarDividerProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarDividerSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = navbarDivider()
+</script>
+
+<template>
+  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarSection.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-section'
+import { tv } from '../utils/tv'
+
+const appConfigNavSection = _appConfig as AppConfig & { b24ui: { navbarSection: Partial<typeof theme> } }
+
+const navbarSection = tv({ extend: tv(theme), ...(appConfigNavSection.b24ui?.navbarSection || {}) })
+
+export interface NavbarSectionProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarSection.slots>
+}
+
+export interface NavbarSectionSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarSectionProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarSectionSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = navbarSection()
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    data-slot="section"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarSpacer.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-spacer'
+import { tv } from '../utils/tv'
+
+const appConfigNavbarSpacer = _appConfig as AppConfig & { b24ui: { navbarSpacer: Partial<typeof theme> } }
+
+const navbarSpacer = tv({ extend: tv(theme), ...(appConfigNavbarSpacer.b24ui?.navbarSpacer || {}) })
+
+export interface NavbarSpacerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarSpacer.slots>
+}
+
+export interface NavbarSpacerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarSpacerProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarSpacerSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = navbarSpacer()
+</script>
+
+<template>
+  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavigationMenu.vue

@@ -0,0 +1,340 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navigation-menu'
+import { tv } from '../utils/tv'
+import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types'
+import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
+
+const appConfigNavigationMenu = _appConfig as AppConfig & { b24ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.b24ui?.navigationMenu || {}) })
+
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'children' | 'type'> {
+  /** Description is only used when `orientation` is `horizontal`. */
+  description?: string
+}
+
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+  label?: string
+  /**
+   * @IconComponent
+   */
+  icon?: IconComponent
+  avatar?: AvatarProps
+  /**
+   * Display a badge on the item.
+   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+   */
+  badge?: string | number | BadgeProps
+  /**
+   * @IconComponent
+   */
+  trailingIcon?: IconComponent
+  /**
+   * The type of the item.
+   * The `label` type only works on `vertical` orientation.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'link'
+  slot?: string
+  value?: string
+  children?: NavigationMenuChildItem[]
+  onSelect?(e: Event): void
+}
+
+type NavigationMenuVariants = VariantProps<typeof navigationMenu>
+
+export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue icons.chevronDown
+   * @IconComponent
+   */
+  trailingIcon?: IconComponent
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue icons.external
+   * @IconComponent
+   */
+  externalIcon?: boolean | IconComponent
+  items?: T
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: NavigationMenuVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
+  variant?: NavigationMenuVariants['variant']
+  /**
+   * The orientation of the menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: NavigationMenuRootProps['orientation']
+  /**
+   * Collapse the navigation menu to only show icons.
+   * Only works when `orientation` is `vertical`.
+   * @defaultValue false
+   */
+  collapsed?: boolean
+  /** Display a line next to the active item. */
+  highlight?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
+  highlightColor?: NavigationMenuVariants['highlightColor']
+  /** The content of the menu. */
+  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * The orientation of the content.
+   * Only works when `orientation` is `horizontal`.
+   * @defaultValue 'horizontal'
+   */
+  contentOrientation?: NavigationMenuVariants['contentOrientation']
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  class?: any
+  b24ui?: PartialString<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type NavigationMenuSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'item-content': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
+</script>
+
+<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">
+import { computed, toRef } from 'vue'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
+import { createReusableTemplate } from '@vueuse/core'
+import { get } from '../utils'
+import { pickLinkProps } from '../utils/link'
+import icons from '../dictionary/icons'
+import B24LinkBase from './LinkBase.vue'
+import B24Link from './Link.vue'
+import B24Avatar from './Avatar.vue'
+import B24Badge from './Badge.vue'
+import B24Collapsible from './Collapsible.vue'
+
+const props = withDefaults(defineProps<NavigationMenuProps<I>>(), {
+  orientation: 'horizontal',
+  contentOrientation: 'horizontal',
+  externalIcon: true,
+  delayDuration: 0,
+  unmountOnHide: true,
+  labelKey: 'label'
+})
+const emits = defineEmits<NavigationMenuEmits>()
+const slots = defineSlots<NavigationMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(computed(() => ({
+  as: props.as,
+  modelValue: props.modelValue,
+  defaultValue: props.defaultValue,
+  delayDuration: props.delayDuration,
+  skipDelayDuration: props.skipDelayDuration,
+  orientation: props.orientation,
+  disableClickTrigger: props.disableClickTrigger,
+  disableHoverTrigger: props.disableHoverTrigger,
+  disablePointerLeaveClose: props.disablePointerLeaveClose,
+  unmountOnHide: props.unmountOnHide
+})), emits)
+
+const contentProps = toRef(() => props.content)
+
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
+  props: {
+    item: Object,
+    index: Number,
+    level: Number
+  }
+})
+
+const b24ui = computed(() => navigationMenu({
+  orientation: props.orientation,
+  contentOrientation: props.contentOrientation,
+  collapsed: props.collapsed,
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}))
+
+const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <Component
+          :is="item.icon"
+          v-if="item.icon"
+          :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
+        />
+        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+      </slot>
+
+      <span
+        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+        :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel })"
+      >
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
+          {{ get(item, props.labelKey as string) }}
+        </slot>
+
+        <Component
+          :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
+          v-if="item.target === '_blank' && externalIcon !== false"
+          :class="b24ui.linkLabelExternalIcon({ class: props.b24ui?.linkLabelExternalIcon, active })"
+        />
+      </span>
+
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+          <B24Badge
+            v-if="item.badge"
+            color="default"
+            depth="normal"
+            :use-fill="false"
+            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
+          />
+
+          <Component
+            :is="item.trailingIcon || trailingIcon || icons.chevronDown"
+            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)"
+            :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
+          />
+          <Component
+            :is="item.trailingIcon"
+            v-else-if="item.trailingIcon"
+            :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
+          />
+        </slot>
+      </span>
+    </slot>
+  </DefineLinkTemplate>
+
+  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+    <component
+      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? B24Collapsible : NavigationMenuItem"
+      as="li"
+      :value="item.value || String(index)"
+      :default-open="item.defaultOpen"
+      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :open="item.open"
+    >
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
+        <ReuseLinkTemplate :item="(item as T)" :index="index" />
+      </div>
+      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+        <component
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
+          as-child
+          :active="active || item.active"
+          :disabled="item.disabled"
+          @select="item.onSelect"
+        >
+          <B24LinkBase v-bind="slotProps" :class="b24ui.link({ class: [props.b24ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+            <ReuseLinkTemplate :item="(item as T)" :active="active || item.active" :index="index" />
+          </B24LinkBase>
+        </component>
+
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="b24ui.content({ class: props.b24ui?.content })">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
+            <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
+                <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                  <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
+                    <B24LinkBase v-bind="childSlotProps" :class="b24ui.childLink({ class: [props.b24ui?.childLink, childItem.class], active: childActive })">
+                      <Component
+                        :is="childItem.icon"
+                        v-if="childItem.icon"
+                        :class="b24ui.childLinkIcon({ class: props.b24ui?.childLinkIcon, active: childActive })"
+                      />
+
+                      <div :class="b24ui.childLinkWrapper({ class: props.b24ui?.childLinkWrapper })">
+                        <p :class="b24ui.childLinkLabel({ class: props.b24ui?.childLinkLabel, active: childActive })">
+                          {{ get(childItem, props.labelKey as string) }}
+
+                          <Component
+                            :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
+                            v-if="childItem.target === '_blank' && externalIcon !== false"
+                            :class="b24ui.childLinkLabelExternalIcon({ class: props.b24ui?.childLinkLabelExternalIcon, active: childActive })"
+                          />
+                        </p>
+                        <p v-if="childItem.description" :class="b24ui.childLinkDescription({ class: props.b24ui?.childLinkDescription, active: childActive })">
+                          {{ childItem.description }}
+                        </p>
+                      </div>
+                    </B24LinkBase>
+                  </NavigationMenuLink>
+                </B24Link>
+              </li>
+            </ul>
+          </slot>
+        </NavigationMenuContent>
+      </B24Link>
+
+      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
+        <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
+          <ReuseItemTemplate
+            v-for="(childItem, childIndex) in item.children"
+            :key="childIndex"
+            :item="childItem"
+            :index="childIndex"
+            :level="level + 1"
+            :class="b24ui.childItem({ class: props.b24ui?.childItem })"
+          />
+        </ul>
+      </template>
+    </component>
+  </DefineItemTemplate>
+
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
+      <NavigationMenuList :class="b24ui.list({ class: props.b24ui?.list })">
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="b24ui.item({ class: props.b24ui?.item })" />
+      </NavigationMenuList>
+
+      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="b24ui.separator({ class: props.b24ui?.separator })" />
+    </template>
+
+    <div v-if="orientation === 'horizontal'" :class="b24ui.viewportWrapper({ class: props.b24ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="arrow" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+        <div :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      </NavigationMenuIndicator>
+
+      <NavigationMenuViewport :class="b24ui.viewport({ class: props.b24ui?.viewport })" />
+    </div>
+  </NavigationMenuRoot>
+</template>

package/dist/runtime/components/Sidebar.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar'
+import { tv } from '../utils/tv'
+
+const appConfigSidebar = _appConfig as AppConfig & { b24ui: { sidebar: Partial<typeof theme> } }
+
+const sidebar = tv({ extend: tv(theme), ...(appConfigSidebar.b24ui?.sidebar || {}) })
+
+export interface SidebarProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebar.slots>
+}
+
+export interface SidebarSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebar()
+</script>
+
+<template>
+  <!-- Sidebar -->
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>