@salesforce/templates 66.17.0-beta.2 → 66.17.0

package/lib/templates/uiBundles/vuebasic/src/components/ui/button/index.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Button } from './Button.vue';
+
+export const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/Card.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    size?: 'default' | 'sm';
+  }>(),
+  {
+    size: 'default',
+  }
+);
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :data-size="size"
+    :class="
+      cn(
+        'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardAction.vue

@@ -0,0 +1,22 @@
+<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="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardContent.vue

@@ -0,0 +1,17 @@
+<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="card-content"
+    :class="cn('px-4 group-data-[size=sm]/card:px-3', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,17 @@
+<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="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,22 @@
+<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="card-footer"
+    :class="
+      cn(
+        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardHeader.vue

@@ -0,0 +1,22 @@
+<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="card-header"
+    :class="
+      cn(
+        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,22 @@
+<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="card-title"
+    :class="
+      cn(
+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardTitle } from './CardTitle.vue';
+export { default as CardAction } from './CardAction.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardContent } from './CardContent.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { CheckIcon } from '@lucide/vue';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  CheckboxRootProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <CheckIcon class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="slotProps"
+    data-slot="collapsible"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/collapsible/CollapsibleContent.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/collapsible/CollapsibleTrigger.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogClose.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { XIcon } from '@lucide/vue';
+import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import DialogPortal from './DialogPortal.vue';
+import DialogOverlay from './DialogOverlay.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    DialogContentProps & {
+      class?: HTMLAttributes['class'];
+      showCloseButton?: boolean;
+    }
+  >(),
+  {
+    showCloseButton: true,
+  }
+);
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, showCloseButton: _showCloseButton, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <DialogClose v-if="showCloseButton" data-slot="dialog-close" as-child>
+        <Button variant="ghost" class="absolute top-2 right-2" size="icon-sm">
+          <XIcon />
+          <span class="sr-only">Close</span>
+        </Button>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DialogDescriptionProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DialogClose } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
+  }>(),
+  {
+    showCloseButton: false,
+  }
+);
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="
+      cn(
+        'bg-muted/50 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <DialogClose v-if="showCloseButton" as-child>
+      <Button variant="outline">Close</Button>
+    </DialogClose>
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<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="dialog-header"
+    :class="cn('gap-2 flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DialogOverlay } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DialogOverlayProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogPortal.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DialogTitleProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-base leading-none font-medium', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/DialogTrigger.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogPortal } from './DialogPortal.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui';
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { CheckIcon } from '@lucide/vue';
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <CheckIcon class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>