Checkbox

<!--
  Radix `Checkbox` → Reka UI `CheckboxRoot`/`CheckboxIndicator`, тот же примитив.

  Индикатор в оригинале — `IconPlaceholder` (dev-обвязка сайта ReUI). Здесь и
  в кейсе используется один и тот же инлайновый `<svg>` (путь lucide "check"),
  чтобы диф сравнивал сам компонент, а не выбор библиотеки иконок.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed } from "vue"
import { CheckboxIndicator, CheckboxRoot, type CheckboxRootEmits, type CheckboxRootProps, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"

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

const delegatedProps = computed(() => {
  const { class: _class, ...delegated } = props
  return delegated
})

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

<template>
  <CheckboxRoot
    data-slot="checkbox"
    v-bind="forwarded"
    :class="
      cn(
        'cn-checkbox peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
        props.class
      )
    "
  >
    <CheckboxIndicator
      data-slot="checkbox-indicator"
      class="cn-checkbox-indicator grid place-content-center text-current transition-none"
    >
      <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"
      ><path d="M20 6 9 17l-5-5" /></svg>
    </CheckboxIndicator>
  </CheckboxRoot>
</template>

export { default as Checkbox } from "./Checkbox.vue"