Empty

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/empty.tsx, MIT).
 * Презентационная композиция — без внешнего примитива.
 */
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="empty"
    :class="
      cn(
        'cn-empty flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="empty-content"
    :class="
      cn(
        'cn-empty-content flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="empty-description"
    :class="
      cn(
        'cn-empty-description text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="empty-header"
    :class="cn('cn-empty-header flex max-w-sm flex-col items-center', props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"
import { emptyMediaVariants, type EmptyMediaVariants } from "./variants"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    variant?: EmptyMediaVariants["variant"]
  }>(),
  {
    variant: "default",
  }
)
</script>

<template>
  <div
    data-slot="empty-icon"
    :data-variant="props.variant"
    :class="cn(emptyMediaVariants({ variant: props.variant, class: props.class }))"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div data-slot="empty-title" :class="cn('cn-empty-title cn-font-heading', props.class)">
    <slot />
  </div>
</template>

export { default as Empty } from "./Empty.vue"
export { default as EmptyContent } from "./EmptyContent.vue"
export { default as EmptyDescription } from "./EmptyDescription.vue"
export { default as EmptyHeader } from "./EmptyHeader.vue"
export { default as EmptyMedia } from "./EmptyMedia.vue"
export { default as EmptyTitle } from "./EmptyTitle.vue"
export { emptyMediaVariants, type EmptyMediaVariants } from "./variants"

import { cva, type VariantProps } from "class-variance-authority"

/**
 * Перенесено дословно из registry/bases/radix/ui/empty.tsx (MIT).
 */
export const emptyMediaVariants = cva(
  "cn-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "cn-empty-media-default",
        icon: "cn-empty-media-icon",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>