Hover Card

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/hover-card.tsx, MIT).
 * Radix HoverCardPrimitive -> reka-ui HoverCard*, один в один (см.
 * packages/ui/src/ui/popover/Popover.vue — та же схема).
 */
import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from "reka-ui"

const props = defineProps<HoverCardRootProps>()
const emits = defineEmits<HoverCardRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <HoverCardRoot data-slot="hover-card" v-bind="forwarded">
    <slot />
  </HoverCardRoot>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { HoverCardContent, HoverCardPortal } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    align?: "start" | "center" | "end"
    sideOffset?: number
  }>(),
  {
    align: "center",
    sideOffset: 4,
  }
)
</script>

<template>
  <HoverCardPortal data-slot="hover-card-portal">
    <HoverCardContent
      data-slot="hover-card-content"
      :align="props.align"
      :side-offset="props.sideOffset"
      :class="
        cn(
          'cn-hover-card-content z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden',
          props.class
        )
      "
    >
      <slot />
    </HoverCardContent>
  </HoverCardPortal>
</template>

<script setup lang="ts">
import { HoverCardTrigger } from "reka-ui"
</script>

<template>
  <HoverCardTrigger data-slot="hover-card-trigger">
    <slot />
  </HoverCardTrigger>
</template>

export { default as HoverCard } from "./HoverCard.vue"
export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
export { default as HoverCardContent } from "./HoverCardContent.vue"