@vestow/vue 0.1.0

package/src/components/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Circle } from '../../lib/icons'
+import { menuIndicatorItemClass, menuIndicatorSlotClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & ClassProps>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(menuIndicatorItemClass, props.class)"
+  >
+    <span :class="menuIndicatorSlotClass">
+      <DropdownMenuItemIndicator>
+        <Circle class="size-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

package/src/components/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuSeparator } from 'reka-ui'
+import { computed } from 'vue'
+import { menuSeparatorClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuSeparatorProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegated" :class="cn(menuSeparatorClass, props.class)" />
+</template>

package/src/components/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { menuShortcutClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <span :class="cn(menuShortcutClass, props.class)">
+    <slot />
+  </span>
+</template>

package/src/components/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

package/src/components/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuPortal, DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuSubContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & ClassProps>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuSubContent
+      v-bind="forwarded"
+      :class="cn(menuSubContentClass, props.class)"
+    >
+      <slot />
+    </DropdownMenuSubContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuSubTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronRight } from '../../lib/icons'
+import { menuInsetClass, menuSubTriggerClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="delegated"
+    :class="cn(menuSubTriggerClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+    <ChevronRight class="ml-auto text-muted-foreground" />
+  </DropdownMenuSubTrigger>
+</template>

package/src/components/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'

package/src/components/editable/Editable.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { EditableRootEmits, EditableRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<EditableRootProps & ClassProps>(),
+  { selectOnFocus: true, autoResize: true },
+)
+const emits = defineEmits<EditableRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    `selectOnFocus` bật sẵn, khác mặc định của reka: vào chế độ sửa thường là để
+    THAY hẳn giá trị cũ, không phải để thêm vào cuối. Bôi đen sẵn thì gõ đè được
+    ngay; không bôi thì người dùng phải tự xoá trước, mỗi lần.
+
+    `autoResize` cũng vậy — ô nhập rộng cố định giữa một dòng chữ làm cả hàng
+    nhảy chỗ ngay khoảnh khắc bấm vào.
+  -->
+  <EditableRoot
+    v-slot="scope"
+    v-bind="forwarded"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <!-- Chuyển tiếp cả scope: reka trả về `isEditing`, `isEmpty`, `modelValue`
+         và ba hàm `edit` / `submit` / `cancel`. Quên dòng này thì bên gọi mất
+         sạch chúng mà không có gì báo — `v-slot` chỉ đơn giản ra `undefined`. -->
+    <slot v-bind="scope" />
+  </EditableRoot>
+</template>

package/src/components/editable/EditableArea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { EditableAreaProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableArea } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditableAreaProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Chỉ MỘT trong hai con hiện tại một thời điểm; vùng này giữ chỗ cho cả hai
+       để chữ không nhảy khi đổi chế độ. -->
+  <EditableArea v-bind="delegated" :class="cn('relative inline-block', props.class)">
+    <slot />
+  </EditableArea>
+</template>

package/src/components/editable/EditableCancelTrigger.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { EditableCancelTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableCancelTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditableCancelTriggerProps & ClassProps & {
+  /** Nhãn trợ năng. Bỏ trống thì lấy chuỗi của thư viện. */
+  label?: string
+}>()
+
+const { t } = useI18n()
+
+const label = computed(() => props.label ?? t('ui.editable.cancel'))
+
+const delegated = computed(() => {
+  const { class: _class, label: _label, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <EditableCancelTrigger
+    v-bind="delegated"
+    :aria-label="label"
+    :class="cn(
+      'grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors',
+      'hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      props.class,
+    )"
+  >
+    <slot>
+      <X class="size-3.5" />
+    </slot>
+  </EditableCancelTrigger>
+</template>

package/src/components/editable/EditableEditTrigger.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { EditableEditTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableEditTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Pencil } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditableEditTriggerProps & ClassProps & {
+  /** Nhãn trợ năng. Bỏ trống thì lấy chuỗi của thư viện. */
+  label?: string
+}>()
+
+const { t } = useI18n()
+
+const label = computed(() => props.label ?? t('ui.editable.edit'))
+
+const delegated = computed(() => {
+  const { class: _class, label: _label, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <EditableEditTrigger
+    v-bind="delegated"
+    :aria-label="label"
+    :class="cn(
+      'grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors',
+      'hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      props.class,
+    )"
+  >
+    <slot>
+      <Pencil class="size-3.5" />
+    </slot>
+  </EditableEditTrigger>
+</template>

package/src/components/editable/EditableInput.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { EditableInputProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableInput } from 'reka-ui'
+import { computed } from 'vue'
+import { focusRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditableInputProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Khoảng đệm phải khớp `EditablePreview` từng pixel: hai cái thay chỗ nhau
+       tại chỗ, lệch một pixel là chữ nhảy mỗi lần bấm vào. -->
+  <EditableInput
+    v-bind="delegated"
+    :class="cn(
+      'w-full rounded-sm border border-input bg-background px-1 py-0.5 text-sm shadow-xs transition-colors',
+      focusRing,
+      props.class,
+    )"
+  />
+</template>

package/src/components/editable/EditablePreview.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { EditablePreviewProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditablePreview } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditablePreviewProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!--
+    Phải trông BẤM ĐƯỢC, không thì không ai biết chỗ này sửa được: viền đứt nét
+    hiện khi rê chuột là gợi ý rẻ nhất mà vẫn không làm chữ nhảy chỗ, vì viền
+    trong suốt đã chiếm sẵn chỗ từ đầu.
+  -->
+  <EditablePreview
+    v-bind="delegated"
+    :class="cn(
+      'cursor-text rounded-sm border border-dashed border-transparent px-1 py-0.5 text-sm transition-colors',
+      'hover:border-border hover:bg-accent/40',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'data-[placeholder-shown]:text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </EditablePreview>
+</template>

package/src/components/editable/EditableSubmitTrigger.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { EditableSubmitTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { EditableSubmitTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<EditableSubmitTriggerProps & ClassProps & {
+  /** Nhãn trợ năng. Bỏ trống thì lấy chuỗi của thư viện. */
+  label?: string
+}>()
+
+const { t } = useI18n()
+
+const label = computed(() => props.label ?? t('ui.editable.submit'))
+
+const delegated = computed(() => {
+  const { class: _class, label: _label, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <EditableSubmitTrigger
+    v-bind="delegated"
+    :aria-label="label"
+    :class="cn(
+      'grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors',
+      'hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      props.class,
+    )"
+  >
+    <slot>
+      <Check class="size-3.5" />
+    </slot>
+  </EditableSubmitTrigger>
+</template>

package/src/components/editable/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Bấm vào chữ để sửa tại chỗ — tiêu đề một bảng, tên một view đã lưu.
+ *
+ * PrimeVue gọi phần này là `Inplace`, nhưng `Inplace` bên đó rộng hơn: nó bung
+ * ra **nội dung bất kỳ** khi bấm, kể cả một cái bảng hay một tấm ảnh. Ở đây chỉ
+ * có nửa sửa-văn-bản, tức đúng thứ reka cung cấp — nửa còn lại vốn chỉ là một
+ * `Collapsible` hoặc một `v-if`, không cần component riêng. Giữ tên `Editable`
+ * cho đúng thứ nó làm.
+ */
+
+export { default as Editable } from './Editable.vue'
+export { default as EditableArea } from './EditableArea.vue'
+export { default as EditableCancelTrigger } from './EditableCancelTrigger.vue'
+export { default as EditableEditTrigger } from './EditableEditTrigger.vue'
+export { default as EditableInput } from './EditableInput.vue'
+export { default as EditablePreview } from './EditablePreview.vue'
+export { default as EditableSubmitTrigger } from './EditableSubmitTrigger.vue'

package/src/components/empty/Empty.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { EmptyVariants } from './index'
+import { cn } from '../../lib/utils'
+import { emptyVariants } from './index'
+
+const props = defineProps<ClassProps & {
+  variant?: EmptyVariants['variant']
+  size?: EmptyVariants['size']
+}>()
+</script>
+
+<template>
+  <div :class="cn(emptyVariants({ variant: props.variant, size: props.size }), props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/empty/EmptyActions.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <!-- `flex-wrap` chứ không `flex-row` cố định: trạng thái rỗng hay nằm trong
+       cột hẹp (thân bảng đã lọc, panel bên phải), hai nút cạnh nhau là tràn. -->
+  <div :class="cn('flex flex-wrap items-center justify-center gap-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/empty/EmptyDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <p :class="cn('max-w-sm text-sm leading-relaxed text-muted-foreground', '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', props.class)">
+    <slot />
+  </p>
+</template>

package/src/components/empty/EmptyMedia.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { EmptyMediaVariants } from './index'
+import { cn } from '../../lib/utils'
+import { emptyMediaVariants } from './index'
+
+const props = defineProps<ClassProps & {
+  variant?: EmptyMediaVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(emptyMediaVariants({ variant: props.variant }), props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/empty/EmptyTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+// `as` mặc định là <p>, KHÔNG phải <h3>: trạng thái rỗng hay nằm giữa trang,
+// chèn một heading vào đó sẽ phá dàn ý mà trình đọc màn hình dựng ra. Chỗ nào
+// nó thực sự mở đầu một vùng thì tự khai `as="h3"`.
+const props = withDefaults(defineProps<PrimitiveProps & ClassProps>(), { as: 'p' })
+</script>
+
+<template>
+  <Primitive :as="as" :as-child="asChild" :class="cn('text-sm font-medium tracking-tight', props.class)">
+    <slot />
+  </Primitive>
+</template>

package/src/components/empty/index.ts

@@ -0,0 +1,7 @@
+export { emptyMediaVariants, type EmptyMediaVariants, emptyVariants, type EmptyVariants } from '../../variants/components/empty'
+export { default as Empty } from './Empty.vue'
+export { default as EmptyActions } from './EmptyActions.vue'
+export { default as EmptyDescription } from './EmptyDescription.vue'
+export { default as EmptyMedia } from './EmptyMedia.vue'
+
+export { default as EmptyTitle } from './EmptyTitle.vue'

package/src/components/field/Field.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { FieldVariants } from './index'
+import { cn } from '../../lib/utils'
+import { fieldVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & { orientation?: FieldVariants['orientation'] }>(),
+  { orientation: 'vertical' },
+)
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="field"
+    :data-orientation="orientation"
+    :class="cn(fieldVariants({ orientation }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/field/FieldDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <p
+    data-slot="field-description"
+    :class="cn(
+      'text-sm font-normal leading-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance',
+      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+      '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>

package/src/components/field/FieldGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <!-- `@container/field-group`: `Field` kiểu `responsive` xếp ngang hay dọc theo
+       bề rộng CỦA NHÓM chứ không theo viewport — form đặt trong ngăn kéo hẹp
+       vẫn xuống hàng đúng. -->
+  <div
+    data-slot="field-group"
+    :class="cn(
+      'group/field-group @container/field-group flex w-full flex-col gap-7',
+      'data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/field/FieldLabel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import Label from '../label/Label.vue'
+
+const props = defineProps<LabelProps & ClassProps>()
+</script>
+
+<template>
+  <!-- Nhãn bọc luôn một `Field` bên trong thì nó trở thành cả thẻ chọn được:
+       viền, bo góc, và sáng lên theo `data-state=checked` của control bên trong. -->
+  <Label
+    :for="props.for"
+    :as="props.as"
+    :as-child="props.asChild"
+    data-slot="field-label"
+    :class="cn(
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+      'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </Label>
+</template>