Breadcrumb

<!-- Presentational: обычный HTML nav, Radix-примитива нет. -->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="cn('cn-breadcrumb', props.class)">
    <slot />
  </nav>
</template>

<!--
  Оригинал рендерит иконку через `IconPlaceholder`, заменена инлайновым
  `<svg>` (путь lucide "more-horizontal"/"ellipsis" — совпадают).
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

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

<template>
  <span
    data-slot="breadcrumb-ellipsis"
    role="presentation"
    aria-hidden="true"
    :class="cn('cn-breadcrumb-ellipsis flex items-center justify-center', props.class)"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    ><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>
    <span class="sr-only">More</span>
  </span>
</template>

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

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

<template>
  <li data-slot="breadcrumb-item" :class="cn('cn-breadcrumb-item inline-flex items-center', props.class)">
    <slot />
  </li>
</template>

<!-- Radix `Slot`/`<a>` (asChild) → Reka UI `Primitive` с `as-child`. -->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { Primitive } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    asChild?: boolean
  }>(),
  {
    asChild: false,
  }
)
</script>

<template>
  <Primitive
    data-slot="breadcrumb-link"
    as="a"
    :as-child="props.asChild"
    :class="cn('cn-breadcrumb-link', props.class)"
  >
    <slot />
  </Primitive>
</template>

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

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

<template>
  <ol data-slot="breadcrumb-list" :class="cn('cn-breadcrumb-list flex flex-wrap items-center wrap-break-word', props.class)">
    <slot />
  </ol>
</template>

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

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

<template>
  <span
    data-slot="breadcrumb-page"
    role="link"
    aria-disabled="true"
    aria-current="page"
    :class="cn('cn-breadcrumb-page', props.class)"
  >
    <slot />
  </span>
</template>

<!--
  Оригинал (registry/bases/radix/ui/breadcrumb.tsx) рендерит иконку через
  `IconPlaceholder` (dev-обвязка сайта ReUI). Здесь и в кейсе — тот же
  инлайновый `<svg>` (путь lucide "chevron-right"), чтобы диф сравнивал
  сам компонент, а не выбор библиотеки иконок.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

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

<template>
  <li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    :class="cn('cn-breadcrumb-separator', props.class)"
  >
    <slot>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="cn-rtl-flip"
      ><path d="m9 18 6-6-6-6" /></svg>
    </slot>
  </li>
</template>

export { default as Breadcrumb } from "./Breadcrumb.vue"
export { default as BreadcrumbList } from "./BreadcrumbList.vue"
export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"