@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

package/dist/runtime/components/NavigationMenu.vue

@@ -4,7 +4,7 @@ import theme from "#build/b24ui/navigation-menu";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -18,28 +18,23 @@ import B24Avatar from "./Avatar.vue";
 import B24Badge from "./Badge.vue";
 import B24Popover from "./Popover.vue";
 import B24Tooltip from "./Tooltip.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   trailingIcon: { type: [Function, Object], required: false },
   externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
   items: { type: null, required: false },
-  color: { type: null, required: false },
-  variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   collapsed: { type: Boolean, required: false },
   tooltip: { type: [Boolean, Object], required: false },
   popover: { type: [Boolean, Object], required: false },
-  highlight: { type: Boolean, required: false },
-  highlightColor: { type: null, required: false },
   content: { type: Object, required: false },
-  contentOrientation: { type: null, required: false, default: "vertical" },
-  arrow: { type: Boolean, required: false },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   modelValue: { type: String, required: false },
   defaultValue: { type: String, required: false },
-  delayDuration: { type: Number, required: false, default: 0 },
+  delayDuration: { type: Number, required: false, default: 200 },
   disableClickTrigger: { type: Boolean, required: false },
   disableHoverTrigger: { type: Boolean, required: false },
   skipDelayDuration: { type: Number, required: false },
@@ -67,7 +62,7 @@ const rootProps = useForwardPropsEmits(computed(() => ({
 const accordionProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
 const contentProps = toRef(() => props.content);
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
-const popoverProps = toRef(() => defu(typeof props.popover === "boolean" ? {} : props.popover, { mode: "hover", content: { side: "right", align: "start", alignOffset: 2 } }));
+const popoverProps = toRef(() => defu(typeof props.popover === "boolean" ? {} : props.popover, { arrow: true, mode: "hover", content: { side: "right", align: "center", alignOffset: 2 } }));
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -85,12 +80,7 @@ const getLabel = (item) => {
 };
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navigationMenu || {} })({
   orientation: props.orientation,
-  contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
-  collapsed: props.collapsed,
-  color: props.color,
-  variant: props.variant,
-  highlight: props.highlight,
-  highlightColor: props.highlightColor || props.color
+  collapsed: props.collapsed
 }));
 const lists = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -110,13 +100,33 @@ function getAccordionDefaultValue(list, level = 0) {
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index">
       <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
-        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-          <Component
-            :is="item.icon"
-            v-if="item.icon"
-            :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
+        <slot
+          :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+          :item="item"
+          :active="active"
+          :index="index"
+        >
+          <template v-if="orientation === 'vertical' && item.type !== 'label'">
+            <Component
+              :is="item.icon"
+              v-if="item.icon"
+              :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
+            />
+            <B24Avatar v-else-if="item.avatar" :size="item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+          </template>
+          <div
+            v-if="item.hint && item.type !== 'label' && orientation === 'horizontal'"
+            :class="b24ui.linkLeadingHint({ class: [props.b24ui?.linkLeadingHint, item.b24ui?.linkLeadingHint] })"
+          >
+            {{ item.hint }}
+          </div>
+          <B24Badge
+            v-if="item.badge !== void 0 && item.type !== 'label'"
+            color="air-primary-alert"
+            :size="item.b24ui?.linkLeadingBadgeSize || props.b24ui?.linkLeadingBadgeSize || b24ui.linkLeadingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            :class="b24ui.linkLeadingBadge({ class: [props.b24ui?.linkLeadingBadge, item.b24ui?.linkLeadingBadge] })"
           />
-          <B24Avatar v-else-if="item.avatar" :size="item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
         </slot>
 
         <span
@@ -126,17 +136,16 @@ function getAccordionDefaultValue(list, level = 0) {
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ getLabel(item) }}
           </slot>
-
-          <Component
-            :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
-            v-if="item.target === '_blank' && externalIcon !== false"
-            :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, item.b24ui?.linkLabelExternalIcon], active })"
-          />
         </span>
+        <Component
+          :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
+          v-if="item.target === '_blank' && externalIcon !== false"
+          :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, item.b24ui?.linkLabelExternalIcon], active })"
+        />
       </span>
       <component
         :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : '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'])"
+        v-if="(!collapsed || orientation !== 'vertical') && (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, item.b24ui?.linkTrailing] })"
       >
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
@@ -152,16 +161,6 @@ function getAccordionDefaultValue(list, level = 0) {
             v-else-if="item.trailingIcon"
             :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
           />
-
-          <B24Badge
-            v-if="item.badge"
-            color="danger"
-            depth="dark"
-            :use-fill="true"
-            :size="item.b24ui?.linkTrailingBadgeSize || props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
-            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="b24ui.linkTrailingBadge({ class: [props.b24ui?.linkTrailingBadge, item.b24ui?.linkTrailingBadge] })"
-          />
         </slot>
       </component>
     </slot>
@@ -210,43 +209,50 @@ function getAccordionDefaultValue(list, level = 0) {
             </B24LinkBase>
 
             <template #content>
-              <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
-                <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
-                  <li :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
-                    {{ getLabel(item) }}
-                  </li>
-                  <li
-                    v-for="(childItem, childIndex) in item.children"
-                    :key="childIndex"
-                    :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.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, item.b24ui?.childLink, childItem.class], active: childActive })"
-                        >
-                          <Component
-                            :is="childItem.icon"
-                            v-if="childItem.icon"
-                            :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
-                          />
-
-                          <span :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
-                            {{ getLabel(childItem) }}
+              <div :class="b24ui.popoverWrapper({ class: props.b24ui?.popoverWrapper })">
+                <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
+                  <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
+                    <li :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
+                      {{ getLabel(item) }}
+                    </li>
+                    <li
+                      v-for="(childItem, childIndex) in item.children"
+                      :key="childIndex"
+                      :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.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, item.b24ui?.childLink, childItem.class], active: childActive })"
+                          >
+                            <Component
+                              :is="childItem.icon"
+                              v-if="childItem.icon"
+                              :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
+                            />
+                            <div
+                              v-if="childItem.hint"
+                              :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
+                            >
+                              {{ childItem.hint }}
+                            </div>
 
+                            <span :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
+                              {{ getLabel(childItem) }}
+                            </span>
                             <Component
-                              :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
+                              :is="typeof externalIcon === 'boolean' ? icons.external : externalIcon"
                               v-if="childItem.target === '_blank' && externalIcon !== false"
                               :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                             />
-                          </span>
-                        </B24LinkBase>
-                      </NavigationMenuLink>
-                    </B24Link>
-                  </li>
-                </ul>
-              </slot>
+                          </B24LinkBase>
+                        </NavigationMenuLink>
+                      </B24Link>
+                    </li>
+                  </ul>
+                </slot>
+              </div>
             </template>
           </B24Popover>
           <B24Tooltip
@@ -309,20 +315,29 @@ function getAccordionDefaultValue(list, level = 0) {
                         :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                       />
 
+                      <div
+                        v-if="childItem.hint"
+                        :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
+                      >
+                        {{ childItem.hint }}
+                      </div>
                       <div :class="b24ui.childLinkWrapper({ class: [props.b24ui?.childLinkWrapper, item.b24ui?.childLinkWrapper] })">
                         <p :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                           {{ getLabel(childItem) }}
-
-                          <Component
-                            :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
-                            v-if="childItem.target === '_blank' && externalIcon !== false"
-                            :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
-                          />
-                        </p>
-                        <p v-if="childItem.description" :class="b24ui.childLinkDescription({ class: [props.b24ui?.childLinkDescription, item.b24ui?.childLinkDescription], active: childActive })">
-                          {{ childItem.description }}
                         </p>
+                        <B24Badge
+                          v-if="childItem.badge"
+                          color="air-primary-alert"
+                          :size="item.b24ui?.childLinkBadgeSize || props.b24ui?.childLinkBadgeSize || b24ui.childLinkBadgeSize()"
+                          v-bind="typeof childItem.badge === 'string' || typeof childItem.badge === 'number' ? { label: childItem.badge } : childItem.badge"
+                          :class="b24ui.childLinkBadge({ class: [props.b24ui?.childLinkBadge, item.b24ui?.childLinkBadge] })"
+                        />
                       </div>
+                      <Component
+                        :is="typeof externalIcon === 'boolean' ? icons.external : externalIcon"
+                        v-if="childItem.target === '_blank' && externalIcon !== false"
+                        :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
+                      />
                     </B24LinkBase>
                   </NavigationMenuLink>
                 </B24Link>
@@ -358,7 +373,7 @@ function getAccordionDefaultValue(list, level = 0) {
   </DefineItemTemplate>
 
   <NavigationMenuRoot
-    v-bind="rootProps"
+    v-bind="{ ...rootProps, ...$attrs }"
     :data-collapsed="collapsed"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     data-slot="section"
@@ -390,10 +405,6 @@ function getAccordionDefaultValue(list, level = 0) {
     <slot name="list-trailing" />
 
     <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
         align="start"
         :class="b24ui.viewport({ class: props.b24ui?.viewport })"

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -4,23 +4,38 @@ import theme from '#build/b24ui/navigation-menu';
 import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps, IconComponent } from '../types';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'b24ui'> {
-    /** Description is only used when `orientation` is `horizontal`. */
-    description?: string;
+/**
+ * @memo not use
+ * - description
+ * - type
+ * - b24ui
+ * - avatar
+ * - children - only 1 level
+ */
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'b24ui' | 'avatar' | 'children'> {
     [key: string]: any;
 }
 export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
     /**
+     * Icon is only used when `orientation` is `vertical`
      * @IconComponent
      */
     icon?: IconComponent;
+    /**
+     * Avatar is only used when `orientation` is `vertical`
+     * @AvatarProps
+     */
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
-     * `{ size: 'sm', color: 'danger', depth: 'dark' }`{lang="ts"}
+     * `{ size: 'xs', color: 'air-primary-alert' }`{lang="ts"}
      */
     badge?: string | number | BadgeProps;
+    /**
+     * Display a hint on the item.
+     */
+    hint?: string;
     /**
      * Display a tooltip on the item when the menu is collapsed with the label of the item.
      * This has priority over the global `tooltip` prop.
@@ -38,7 +53,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     /**
      * The type of the item.
      * The `label` type is only displayed in `vertical` orientation.
-     * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation.
+     * The `trigger` type is used to force the item to be collapsible when it`s a link in `vertical` orientation.
      * @defaultValue 'link'
      */
     type?: 'label' | 'trigger' | 'link';
@@ -57,9 +72,17 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     open?: boolean;
     onSelect?(e: Event): void;
     class?: any;
-    b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
+    b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
     [key: string]: any;
 }
+/**
+ * @memo remove contentOrientation
+ * @memo remove highlight
+ * @memo remove highlightColor
+ * @memo remove arrow
+ * @memo remove color
+ * @memo remove variant (link) -> use variant.pill
+ */
 export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
     /**
      * The element or component this component should render as.
@@ -80,14 +103,6 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      */
     externalIcon?: boolean | IconComponent;
     items?: T;
-    /**
-     * @defaultValue 'primary'
-     */
-    color?: NavigationMenu['variants']['color'];
-    /**
-     * @defaultValue 'pill'
-     */
-    variant?: NavigationMenu['variants']['variant'];
     /**
      * The orientation of the menu.
      * @defaultValue 'horizontal'
@@ -107,31 +122,14 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     tooltip?: boolean | TooltipProps;
     /**
      * Display a popover on the items when the menu is collapsed with the children list.
-     * `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts"}
+     * `{ mode: 'hover', content: { side: 'right', align: 'center', alignOffset: 2 } }`{lang="ts"}
      * @defaultValue false
      */
     popover?: boolean | PopoverProps;
-    /** Display a line next to the active item. */
-    highlight?: boolean;
-    /**
-     * @defaultValue 'primary'
-     */
-    highlightColor?: NavigationMenu['variants']['highlightColor'];
     /**
      * The content of the menu.
      */
     content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>;
-    /**
-     * The orientation of the content.
-     * Only works when `orientation` is `horizontal`.
-     * @defaultValue 'vertical'
-     */
-    contentOrientation?: NavigationMenu['variants']['contentOrientation'];
-    /**
-     * Display an arrow alongside the menu.
-     * @defaultValue false
-     */
-    arrow?: boolean;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -172,5 +170,5 @@ declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_prop
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/OverlayProvider.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/Popover.vue

@@ -16,6 +16,7 @@ const props = defineProps({
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  reference: { type: null, required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
@@ -45,7 +46,7 @@ const contentEvents = computed(() => {
   }
   return {};
 });
-const arrowProps = toRef(() => props.arrow);
+const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.popover || {} })({
   side: contentProps.value.side
 }));
@@ -54,7 +55,12 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
 <template>
   <Component.Root v-slot="{ open }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+    <Component.Trigger
+      v-if="!!slots.default || !!reference"
+      as-child
+      :reference="reference"
+      :class="props.class"
+    >
       <slot :open="open" />
     </Component.Trigger>
 

package/dist/runtime/components/Popover.vue.d.ts

@@ -1,5 +1,5 @@
 import { Popover } from 'reka-ui/namespaced';
-import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui';
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps, HoverCardTriggerProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/popover';
 import type { EmitsToProps, ComponentConfig } from '../types/utils';
@@ -25,6 +25,12 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * The reference (or anchor) element that is being referred to for positioning.
+     *
+     * If not provided will use the current component as anchor.
+     */
+    reference?: HoverCardTriggerProps['reference'];
     /**
      * When `false`, the popover will not close when clicking outside or pressing escape.
      * @defaultValue true
@@ -43,7 +49,7 @@ export interface PopoverSlots {
     content(props?: {}): any;
     anchor(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
@@ -51,10 +57,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverPro
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     portal: boolean | string | HTMLElement;
-    mode: "click" | "hover";
     dismissible: boolean;
     openDelay: number;
     closeDelay: number;
+    mode: "click" | "hover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PopoverSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Progress.vue.d.ts

@@ -27,7 +27,7 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
      */
     size?: Progress['variants']['size'];
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Progress['variants']['color'];
     /**
@@ -53,16 +53,16 @@ export type ProgressSlots = {
         step: number;
     }) => any;
 };
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string[] | undefined) => any;
     "update:max": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
     "onUpdate:max"?: ((value: number) => any) | undefined;
 }>, {
+    inverted: boolean;
     orientation: Progress["variants"]["orientation"];
     modelValue: number | null;
-    inverted: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/RadioGroup.vue

@@ -54,7 +54,7 @@ function normalizeItem(item) {
       label: void 0
     };
   }
-  if (typeof item === "string" || typeof item === "number") {
+  if (typeof item === "string" || typeof item === "number" || typeof item === "bigint") {
     return {
       id: `${id}:${item}`,
       value: String(item),

package/dist/runtime/components/RadioGroup.vue.d.ts

@@ -45,7 +45,7 @@ export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> exte
      */
     variant?: RadioGroup['variants']['variant'];
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: RadioGroup['variants']['color'];
     /**
@@ -64,10 +64,11 @@ export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> exte
 export type RadioGroupEmits = RadioGroupRootEmits & {
     change: [payload: Event];
 };
+type NormalizeItem<T extends RadioGroupItem> = Exclude<T & {
+    id: string;
+}, RadioGroupValue>;
 type SlotProps<T extends RadioGroupItem> = (props: {
-    item: T & {
-        id: string;
-    };
+    item: NormalizeItem<T>;
     modelValue?: RadioGroupValue;
 }) => any;
 export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
@@ -89,5 +90,5 @@ declare const _default: <T extends RadioGroupItem>(__VLS_props: NonNullable<Awai
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Range.vue.d.ts

@@ -14,7 +14,7 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
      */
     size?: Range['variants']['size'];
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Range['variants']['color'];
     /**
@@ -30,24 +30,24 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
     b24ui?: Range['slots'];
 }
 export interface RangeEmits<T extends number | number[] = number | number[]> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'change', payload: Event): void;
+    'update:modelValue': [payload: T];
+    'change': [payload: Event];
 }
 declare const _default: <T extends number | number[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onChange?: ((payload: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (RangeProps & {
         modelValue?: T;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: RangeEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", payload: T) => void)) & ((evt: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};