@hina-ui/vue 1.7.12 → 1.7.14

package/src/components/dropdown-menu/DropdownMenuLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuLabel } from 'reka-ui'
+  import { DropdownMenuLabel } from '../../primitives/dropdown-menu'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnDropdownMenuLabel' })

package/src/components/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuRadioGroup } from 'reka-ui'
+  import { DropdownMenuRadioGroup } from '../../primitives/dropdown-menu'
 
   defineOptions({ name: 'HnDropdownMenuRadioGroup' })
 

package/src/components/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check } from '@lucide/vue'
-  import { DropdownMenuRadioItem, DropdownMenuItemIndicator } from 'reka-ui'
+  import { DropdownMenuRadioItem, DropdownMenuItemIndicator } from '../../primitives/dropdown-menu'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from './dropdown-menu.variants'
 

package/src/components/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuSeparator } from 'reka-ui'
+  import { DropdownMenuSeparator } from '../../primitives/dropdown-menu'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnDropdownMenuSeparator' })

package/src/components/dropdown-menu/DropdownMenuSub.vue

@@ -5,7 +5,7 @@
     DropdownMenuSubTrigger,
     DropdownMenuPortal,
     DropdownMenuSubContent,
-  } from 'reka-ui'
+  } from '../../primitives/dropdown-menu'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from './dropdown-menu.variants'

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
-  import { HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
+  import {
+    HoverCardContent,
+    HoverCardPortal,
+    HoverCardRoot,
+    HoverCardTrigger,
+  } from '../../primitives/hover-card'
   import { cn } from '../../lib/cn'
   import Card from '../card/Card.vue'
   import HoverCardAnchor from './HoverCardAnchor.vue'

package/src/components/hover-card/composables/useHoverCardAnchor.ts

@@ -1,6 +1,6 @@
 import { computed, onScopeDispose, watch, type ComponentPublicInstance } from 'vue'
 import { useEventListener, useRafFn } from '@vueuse/core'
-import { injectHoverCardRootContext } from 'reka-ui'
+import { injectHoverCardRootContext } from '../../../primitives/hover-card'
 import {
   overlayAnchorElement,
   useOverlayAnchor,

package/src/components/icon-button/IconButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { Passthrough } from '../../lib/passthrough'

package/src/components/image/Image.vue

@@ -5,7 +5,13 @@
   import Skeleton from '../skeleton/Skeleton.vue'
   import Lightbox from '../lightbox/Lightbox.vue'
   import type { LightboxItem } from '../lightbox/types'
-  import { image, imageRoot, type ImageVariants } from './image.variants'
+  import {
+    image,
+    imageFrame,
+    imagePlaceholder,
+    imageRoot,
+    type ImageVariants,
+  } from './image.variants'
   import { useImage } from './composables/useImage'
   import { useImageGroup } from './context'
   import { useImageResolver } from './resolver'
@@ -18,6 +24,7 @@
       src?: string
       alt?: string
       fallback?: string
+      thumbhash?: string
       fit?: ImageVariants['fit']
       ratio?: number
       lazy?: boolean
@@ -48,10 +55,38 @@
     error: []
   }>()
 
-  const { rootEl, imageEl, skeletonEl, src, revealed, failed, showImage, showSkeleton } = useImage(
-    props,
-    emit,
-  )
+  const {
+    rootEl,
+    imageEl,
+    skeletonEl,
+    src,
+    placeholder,
+    revealed,
+    failed,
+    showImage,
+    showSkeleton,
+  } = useImage(props, emit)
+
+  const framed = computed(() => !!placeholder.value && showImage.value)
+
+  const imageProps = computed(() => ({
+    style: props.imageStyle,
+    src: src.value,
+    alt: props.alt,
+    decoding: props.eager ? ('sync' as const) : ('async' as const),
+    fetchpriority: props.eager ? ('high' as const) : undefined,
+    draggable: props.draggable,
+    class: cn(
+      image({ fit: props.fit, lazy: props.lazy, placeholder: !!placeholder.value }),
+      props.lazy && !revealed.value && 'opacity-0',
+      props.lazy &&
+        revealed.value &&
+        placeholder.value &&
+        showSkeleton.value &&
+        'mix-blend-plus-lighter',
+      props.imageClass,
+    ),
+  }))
 
   useRequiredLabel('Image', () => !props.preview || !!props.alt, '替代文本')
 
@@ -101,29 +136,28 @@
     :style="[props.ratio ? { aspectRatio: String(props.ratio) } : undefined, props.style]"
     @click="openPreview"
   >
-    <img
-      v-if="showImage"
-      ref="imageEl"
-      v-bind="$attrs"
-      :style="props.imageStyle"
-      :src="src"
-      :alt="props.alt"
-      :decoding="props.eager ? 'sync' : 'async'"
-      :fetchpriority="props.eager ? 'high' : undefined"
-      :draggable="props.draggable"
-      :class="
-        cn(
-          image({ fit: props.fit, lazy: props.lazy }),
-          props.lazy && !revealed && 'opacity-0',
-          props.imageClass,
-        )
-      "
-    />
+    <span v-if="framed" :class="imageFrame()">
+      <img ref="imageEl" v-bind="{ ...$attrs, ...imageProps }" />
+      <span
+        v-if="showSkeleton"
+        ref="skeletonEl"
+        aria-hidden="true"
+        :class="
+          cn(
+            'pointer-events-none absolute inset-0',
+            imagePlaceholder({ fit: props.fit }),
+            revealed && 'will-change-transform',
+          )
+        "
+        :style="{ backgroundImage: `url(&quot;${placeholder}&quot;)` }"
+      />
+    </span>
+    <img v-else-if="showImage" ref="imageEl" v-bind="{ ...$attrs, ...imageProps }" />
     <slot v-else-if="failed" name="error" />
     <slot v-else name="empty" />
 
     <span
-      v-if="showSkeleton"
+      v-if="showSkeleton && !framed"
       ref="skeletonEl"
       aria-hidden="true"
       class="pointer-events-none absolute inset-0"

package/src/components/image/composables/useImage.ts

@@ -1,6 +1,7 @@
 import { computed, nextTick, onMounted, shallowRef, watch, type ComponentPublicInstance } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { cssTimeToMs } from '../../../../../shared/src/lib/css-time'
+import { thumbhashToDataUrl } from '../../../../../shared/src/lib/thumbhash'
 import { useImageResolver } from '../resolver'
 
 function ready(img: HTMLImageElement): Promise<void> {
@@ -18,6 +19,7 @@ export function useImage(
   props: {
     src?: string
     fallback?: string
+    thumbhash?: string
     lazy: boolean
     rootMargin: string
     skeleton: boolean
@@ -56,9 +58,13 @@ export function useImage(
 
   const resolved = computed(() => (usingFallback.value ? fallback.value : primary.value))
 
+  const placeholder = computed(() => (props.thumbhash ? thumbhashToDataUrl(props.thumbhash) : null))
+
   const src = computed(() => (entered.value ? resolved.value || undefined : undefined))
   const showImage = computed(() => Boolean(resolved.value) && !failed.value)
-  const showSkeleton = computed(() => props.skeleton && showImage.value && skeletonMounted.value)
+  const showSkeleton = computed(
+    () => (props.skeleton || !!placeholder.value) && showImage.value && skeletonMounted.value,
+  )
 
   watch(primary, () => {
     usingFallback.value = false
@@ -72,12 +78,12 @@ export function useImage(
     failed.value = false
   })
 
-  function play(el: HTMLElement, frames: Keyframe[]): Animation | null {
+  function play(el: HTMLElement, duration: string, easing: string): Animation | null {
     const style = getComputedStyle(el)
     try {
-      return el.animate(frames, {
-        duration: cssTimeToMs(style.getPropertyValue('--hn-duration-fast')),
-        easing: style.getPropertyValue('--hn-ease-enter').trim() || 'linear',
+      return el.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: cssTimeToMs(style.getPropertyValue(duration)),
+        easing: style.getPropertyValue(easing).trim() || 'linear',
         fill: 'forwards',
       })
     } catch {
@@ -89,22 +95,13 @@ export function useImage(
     return new Promise<void>(res => requestAnimationFrame(() => requestAnimationFrame(() => res())))
   }
 
-  async function reveal() {
-    if (!props.lazy) {
-      revealed.value = true
-      skeletonMounted.value = false
-      return
-    }
-
-    const img = imageEl.value
-    const at = src.value
-    await nextTick()
-    await afterPaint()
-    if (imageEl.value !== img || src.value !== at) return
-
-    revealed.value = true
+  function dropLayer() {
     const layer = skeletonEl.value
-    const anim = layer && play(layer, [{ opacity: 1 }, { opacity: 0 }])
+    const anim =
+      layer &&
+      (placeholder.value
+        ? play(layer, '--hn-duration-slow', '--hn-ease-move')
+        : play(layer, '--hn-duration-fast', '--hn-ease-enter'))
     if (!anim) {
       skeletonMounted.value = false
       return
@@ -119,6 +116,24 @@ export function useImage(
     )
   }
 
+  async function reveal() {
+    if (!props.lazy) {
+      revealed.value = true
+      if (placeholder.value) dropLayer()
+      else skeletonMounted.value = false
+      return
+    }
+
+    const img = imageEl.value
+    const at = src.value
+    await nextTick()
+    await afterPaint()
+    if (imageEl.value !== img || src.value !== at) return
+
+    revealed.value = true
+    dropLayer()
+  }
+
   function fail() {
     if (!usingFallback.value && fallback.value) {
       usingFallback.value = true
@@ -153,5 +168,15 @@ export function useImage(
     if (!isSupported.value) entered.value = true
   })
 
-  return { rootEl, imageEl, skeletonEl, src, revealed, failed, showImage, showSkeleton }
+  return {
+    rootEl,
+    imageEl,
+    skeletonEl,
+    src,
+    placeholder,
+    revealed,
+    failed,
+    showImage,
+    showSkeleton,
+  }
 }

package/src/components/lightbox/Lightbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed, onMounted, shallowRef, watch } from 'vue'
-  import { DialogRoot, DialogPortal, DialogContent, DialogTitle, useBodyScrollLock } from 'reka-ui'
+  import { DialogRoot, DialogPortal, DialogContent, DialogTitle } from '../../primitives/dialog'
+  import { useBodyScrollLock } from '../../primitives/utils/useBodyScrollLock'
   import { Motion } from 'motion-v'
   import { cn } from '../../lib/cn'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'

package/src/components/lightbox/LightboxChrome.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogClose } from 'reka-ui'
+  import { DialogClose } from '../../primitives/dialog'
   import { Motion, type MotionValue } from 'motion-v'
   import { ChevronLeft, ChevronRight } from '@lucide/vue'
   import { useUiLocale } from '../../locale'

package/src/components/listbox/Listbox.vue

@@ -5,7 +5,7 @@
     ListboxGroupLabel,
     ListboxItem,
     ListboxRoot,
-  } from 'reka-ui'
+  } from '../../primitives/listbox'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'

package/src/components/listbox/ListboxOptionContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
-  import { injectListboxItemContext, ListboxItemIndicator } from 'reka-ui'
+  import { injectListboxItemContext, ListboxItemIndicator } from '../../primitives/listbox'
   import type { SelectOption } from '../select/types'
 
   defineOptions({ name: 'HnListboxOptionContent', inheritAttrs: false })

package/src/components/menubar/Menubar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarRoot } from 'reka-ui'
+  import { MenubarRoot } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { menubarRoot } from './menubar.variants'
 

package/src/components/menubar/MenubarCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check } from '@lucide/vue'
-  import { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'
+  import { MenubarCheckboxItem, MenubarItemIndicator } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarGroup } from 'reka-ui'
+  import { MenubarGroup } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarGroup' })

package/src/components/menubar/MenubarItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarItem } from 'reka-ui'
+  import { MenubarItem } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem, type DropdownItemVariants } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarLabel } from 'reka-ui'
+  import { MenubarLabel } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarLabel' })

package/src/components/menubar/MenubarMenu.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
-  import { MenubarContent, MenubarMenu, MenubarPortal, MenubarTrigger } from 'reka-ui'
+  import {
+    MenubarContent,
+    MenubarMenu,
+    MenubarPortal,
+    MenubarTrigger,
+  } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import Card from '../card/Card.vue'
   import { menubarContent, menubarTrigger } from './menubar.variants'

package/src/components/menubar/MenubarRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarRadioGroup } from 'reka-ui'
+  import { MenubarRadioGroup } from '../../primitives/menubar'
 
   defineOptions({ name: 'HnMenubarRadioGroup' })
 

package/src/components/menubar/MenubarRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check } from '@lucide/vue'
-  import { MenubarItemIndicator, MenubarRadioItem } from 'reka-ui'
+  import { MenubarItemIndicator, MenubarRadioItem } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarSeparator } from 'reka-ui'
+  import { MenubarSeparator } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarSeparator' })

package/src/components/menubar/MenubarSub.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { ChevronRight } from '@lucide/vue'
-  import { MenubarPortal, MenubarSub, MenubarSubContent, MenubarSubTrigger } from 'reka-ui'
+  import {
+    MenubarPortal,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+  } from '../../primitives/menubar'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'

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

@@ -1,6 +1,11 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed } from 'vue'
-  import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
+  import {
+    ComboboxAnchor,
+    ComboboxInput,
+    ComboboxRoot,
+    ComboboxTrigger,
+  } from '../../primitives/combobox'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useFieldControl } from '../form-field/context'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { SelectRoot, SelectTrigger } from '../../primitives/select'
   import { VisuallyHidden } from '../../primitives/visually-hidden'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'

package/src/components/nav-link/NavLink.vue

@@ -4,12 +4,17 @@
   import { Passthrough } from '../../lib/passthrough'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { useInSidebar, useSidebar } from '../sidebar/context'
-  import { navLink, navLinkLabel } from './nav-link.variants'
+  import { navLink, navLinkLabel, navLinkTrailing } from './nav-link.variants'
   import type { PrimitiveProps } from '../../primitives/primitive'
   import { Primitive } from '../../primitives/primitive'
   import NavLinkChild from './NavLinkChild'
 
   defineOptions({ name: 'HnNavLink', inheritAttrs: false })
+  defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    trailing?(): unknown
+  }>()
 
   const props = withDefaults(
     defineProps<
@@ -38,13 +43,22 @@
     class: cn(navLink({ active: props.active }), props.class),
   }))
 
-  const labelProps = computed(() => ({
+  const collapsedProps = computed(() => ({
     'aria-hidden': rail.value ? ('true' as const) : undefined,
     inert: rail.value,
     'data-collapsed': rail.value ? '' : undefined,
+  }))
+
+  const labelProps = computed(() => ({
+    ...collapsedProps.value,
     'data-hn-label': '',
     class: navLinkLabel(),
   }))
+
+  const trailingProps = computed(() => ({
+    ...collapsedProps.value,
+    class: navLinkTrailing(),
+  }))
 </script>
 
 <template>
@@ -54,8 +68,10 @@
       v-bind="{ ...$attrs, ...linkProps }"
       :as="props.as"
       :label-props="labelProps"
+      :trailing-props="trailingProps"
     >
       <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <template v-if="$slots.trailing" #trailing><slot name="trailing" /></template>
       <slot />
     </NavLinkChild>
     <Primitive
@@ -80,6 +96,9 @@
       >
         <slot />
       </span>
+      <span v-if="$slots.trailing" v-bind="trailingProps">
+        <slot name="trailing" />
+      </span>
     </Primitive>
   </Wrapper>
 </template>

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

@@ -22,11 +22,13 @@ export default defineComponent({
   props: {
     as: { type: [String, Object] as PropType<PrimitiveProps['as']>, default: 'a' },
     labelProps: { type: Object as PropType<Record<string, unknown>>, required: true },
+    trailingProps: { type: Object as PropType<Record<string, unknown>>, required: true },
   },
   setup(props, { attrs, slots }) {
     const inner = (content: Content) => [
       ...(slots.icon?.() ?? []),
       h('span', props.labelProps, content ?? undefined),
+      ...(slots.trailing ? [h('span', props.trailingProps, slots.trailing())] : []),
     ]
 
     return () => {

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

@@ -1,6 +1,10 @@
 <script setup lang="ts">
   import { computed, toRef } from 'vue'
-  import { NavigationMenuRoot, NavigationMenuList, NavigationMenuViewport } from 'reka-ui'
+  import {
+    NavigationMenuRoot,
+    NavigationMenuList,
+    NavigationMenuViewport,
+  } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import { rekaNavigationViewportStyle } from '../../lib/reka/styles'
   import { useRekaNavigationViewport } from '../../lib/reka/navigation-viewport'

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
   import {
     NavigationMenuContent as RekaNavigationMenuContent,
-    useForwardPropsEmits,
     type NavigationMenuContentEmits,
-  } from 'reka-ui'
+  } from '../../primitives/navigation-menu'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
   import { navigationMenuContent } from './navigation-menu.variants'
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { NavigationMenuItem as RekaNavigationMenuItem } from 'reka-ui'
+  import { NavigationMenuItem as RekaNavigationMenuItem } from '../../primitives/navigation-menu'
 
   defineOptions({ name: 'HnNavigationMenuItem' })
   const props = defineProps<{ value?: string }>()

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

@@ -2,7 +2,7 @@
   import {
     NavigationMenuLink as RekaNavigationMenuLink,
     type NavigationMenuLinkEmits,
-  } from 'reka-ui'
+  } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import { useNavigationMenu } from './context'
   import {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from 'reka-ui'
+  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import { useNavigationMenu } from './context'

package/src/components/number-input/NumberInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ChevronDown, ChevronUp } from '@lucide/vue'
-  import { useForwardPropsEmits } from 'reka-ui'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import {
     NumberFieldDecrement,
     NumberFieldIncrement,

package/src/components/overlay-branch/OverlayBranch.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { DismissableLayerBranch } from '../../primitives/dismissable-layer'
+
+  defineOptions({ name: 'HnOverlayBranch' })
+
+  const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'div' })
+</script>
+
+<template>
+  <DismissableLayerBranch :as="props.as" :as-child="props.asChild">
+    <slot />
+  </DismissableLayerBranch>
+</template>

package/src/components/pagination/PaginationPopup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { type ComponentPublicInstance } from 'vue'
-  import { PopoverRoot, PopoverPortal } from 'reka-ui'
+  import { PopoverRoot, PopoverPortal } from '../../primitives/popover'
   import PopoverContent from '../popover/PopoverContent.vue'
   import Card from '../card/Card.vue'
   import Button from '../button/Button.vue'

package/src/components/popconfirm/Popconfirm.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { computed, ref, useId } from 'vue'
-  import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+  import {
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+  } from '../../primitives/popover'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Button from '../button/Button.vue'