Accordion

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/accordion.tsx, MIT).
 * Radix AccordionPrimitive -> reka-ui Accordion*, один в один.
 */
import type { HTMLAttributes } from "vue"
import { AccordionRoot } from "reka-ui"
import { cn } from "@/lib/utils"

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

<template>
  <AccordionRoot
    data-slot="accordion"
    :class="cn('cn-accordion flex w-full flex-col', props.class)"
  >
    <slot />
  </AccordionRoot>
</template>

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

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

<template>
  <AccordionContent data-slot="accordion-content" class="cn-accordion-content overflow-hidden">
    <div
      :class="
        cn(
          'cn-accordion-content-inner h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
          props.class
        )
      "
    >
      <slot />
    </div>
  </AccordionContent>
</template>

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

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

<template>
  <AccordionItem
    data-slot="accordion-item"
    :value="props.value"
    :disabled="props.disabled"
    :class="cn('cn-accordion-item', props.class)"
  >
    <slot />
  </AccordionItem>
</template>

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

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

<template>
  <AccordionHeader class="flex">
    <AccordionTrigger
      data-slot="accordion-trigger"
      :class="
        cn(
          'cn-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
          props.class
        )
      "
    >
      <slot />
      <svg
        data-slot="accordion-trigger-icon"
        class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
        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"
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
      <svg
        data-slot="accordion-trigger-icon"
        class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
        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"
      >
        <path d="m18 15-6-6-6 6" />
      </svg>
    </AccordionTrigger>
  </AccordionHeader>
</template>

export { default as Accordion } from "./Accordion.vue"
export { default as AccordionContent } from "./AccordionContent.vue"
export { default as AccordionItem } from "./AccordionItem.vue"
export { default as AccordionTrigger } from "./AccordionTrigger.vue"