@salesforce/templates 66.17.0-beta.3 → 66.17.0

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuContentEmits,
+  DropdownMenuContentProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import DropdownMenuPortal from './DropdownMenuPortal.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  }
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'reka-ui';
+import { DropdownMenuGroup } from 'reka-ui';
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes['class'];
+      inset?: boolean;
+      variant?: 'default' | 'destructive';
+    }
+  >(),
+  {
+    variant: 'default',
+  }
+);
+
+const delegatedProps = computed(() => {
+  const { class: _class, inset: _inset, variant: _variant, ...rest } = props;
+  return rest;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        `relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props;
+  return rest;
+});
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)
+    "
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

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

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

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
+} from 'reka-ui';
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { CircleIcon } from '@lucide/vue';
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-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">
+          <CircleIcon class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuSeparator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class'];
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+<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="dropdown-menu-shortcut"
+    :class="
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
+    "
+  >
+    <slot />
+  </span>
+</template>

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

@@ -0,0 +1,19 @@
+<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-slot="slotProps"
+    data-slot="dropdown-menu-sub"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronRightIcon } from '@lucide/vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  DropdownMenuSubTriggerProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props;
+  return rest;
+});
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
+    :class="
+      cn(
+        `relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground`,
+        props.class
+      )
+    "
+  >
+    <slot />
+    <ChevronRightIcon class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui';
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,15 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownMenuPortal } from './DropdownMenuPortal.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.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 DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/Field.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { FieldVariants } from '.';
+import { cn } from '@/lib/utils';
+import { fieldVariants } from '.';
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    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/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldContent.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="field-content"
+    :class="
+      cn(
+        'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldDescription.vue

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldError.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  errors?: Array<{ message?: string } | undefined>;
+}>();
+
+const content = computed(() => {
+  if (!props.errors?.length) {
+    return null;
+  }
+
+  const uniqueErrors = [
+    ...new Map(props.errors.map(error => [error?.message, error])).values(),
+  ];
+
+  if (uniqueErrors.length === 1) {
+    return uniqueErrors[0]?.message;
+  }
+
+  return uniqueErrors;
+});
+</script>
+
+<template>
+  <div
+    v-if="$slots.default || content"
+    role="alert"
+    data-slot="field-error"
+    :class="cn('text-destructive text-sm font-normal', props.class)"
+  >
+    <slot v-if="$slots.default" />
+    <template v-else-if="typeof content === 'string'">
+      {{ content }}
+    </template>
+    <ul
+      v-else-if="Array.isArray(content)"
+      class="ml-4 flex list-disc flex-col gap-1"
+    >
+      <li v-for="(error, index) in content" :key="index">
+        <template v-if="error?.message">{{ error.message }}</template>
+      </li>
+    </ul>
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldGroup.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="field-group"
+    :class="
+      cn(
+        'gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <Label
+    data-slot="field-label"
+    v-bind="props"
+    :class="
+      cn(
+        'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldLegend.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'];
+    variant?: 'legend' | 'label';
+  }>(),
+  {
+    variant: 'legend',
+  }
+);
+</script>
+
+<template>
+  <legend
+    data-slot="field-legend"
+    :data-variant="variant"
+    :class="
+      cn(
+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </legend>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldSeparator.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="field-separator"
+    :data-content="!!$slots.default"
+    :class="
+      cn(
+        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',
+        props.class
+      )
+    "
+  >
+    <Separator class="absolute inset-0 top-1/2" />
+    <span
+      v-if="$slots.default"
+      class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+      data-slot="field-separator-content"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldSet.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>
+  <fieldset
+    data-slot="field-set"
+    :class="
+      cn(
+        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </fieldset>
+</template>