@byyuurin/ui 0.1.0 → 0.3.0

package/dist/runtime/components/Card.vue

@@ -24,45 +24,45 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <slot name="content">
-      <div
-        v-if="slots.header || props.title || slots.title || props.description || slots.description"
-        :class="ui.header({ class: props.ui?.header })"
-        data-part="header"
-      >
-        <slot name="header">
-          <Primitive
-            v-if="props.title || slots.title"
-            :as="!!slots.title ? void 0 : 'h2'"
-            :class="ui.title({ class: props.ui?.title })"
-            data-part="title"
-          >
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </Primitive>
-          <Primitive
-            v-if="props.description || slots.description"
-            :as="!!slots.description ? void 0 : 'p'"
-            :as-child="!!slots.description"
-            :class="ui.description({ class: props.ui?.description })"
-            data-part="description"
-          >
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </Primitive>
-        </slot>
-      </div>
-
-      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
-        <slot></slot>
-      </div>
-
-      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
-        <slot name="footer"></slot>
-      </div>
-    </slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <slot name="content">
+      <div
+        v-if="slots.header || props.title || slots.title || props.description || slots.description"
+        :class="ui.header({ class: props.ui?.header })"
+        data-part="header"
+      >
+        <slot name="header">
+          <Primitive
+            v-if="props.title || slots.title"
+            :as="!!slots.title ? void 0 : 'h2'"
+            :class="ui.title({ class: props.ui?.title })"
+            data-part="title"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </Primitive>
+          <Primitive
+            v-if="props.description || slots.description"
+            :as="!!slots.description ? void 0 : 'p'"
+            :as-child="!!slots.description"
+            :class="ui.description({ class: props.ui?.description })"
+            data-part="description"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </Primitive>
+        </slot>
+      </div>
+
+      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
+        <slot></slot>
+      </div>
+
+      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+        <slot name="footer"></slot>
+      </div>
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Card.vue.d.ts

@@ -24,9 +24,9 @@ export interface CardSlots {
     description: StaticSlot;
     footer: StaticSlot;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Carousel.vue

@@ -57,6 +57,16 @@ const ui = computed(() => {
 const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
 const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const stopAutoplayOnInteraction = computed(() => {
+  if (typeof props.autoplay == "boolean")
+    return true;
+  return props.autoplay.stopOnInteraction ?? true;
+});
+const stopAutoScrollOnInteraction = computed(() => {
+  if (typeof props.autoScroll === "boolean")
+    return true;
+  return props.autoScroll.stopOnInteraction ?? true;
+});
 const options = computed(() => ({
   ...props.fade ? { align: "center", containScroll: false } : {},
   ...rootProps.value,
@@ -100,14 +110,23 @@ const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
 watch(options, () => {
   emblaApi.value?.reInit(options.value, plugins.value);
 }, { flush: "post" });
+function stopOnInteraction() {
+  if (stopAutoplayOnInteraction.value)
+    emblaApi.value?.plugins().autoplay?.stop();
+  if (stopAutoScrollOnInteraction.value)
+    emblaApi.value?.plugins().autoScroll?.stop();
+}
 function scrollPrev() {
   emblaApi.value?.scrollPrev();
+  stopOnInteraction();
 }
 function scrollNext() {
   emblaApi.value?.scrollNext();
+  stopOnInteraction();
 }
 function scrollTo(index) {
   emblaApi.value?.scrollTo(index);
+  stopOnInteraction();
 }
 function onKeyDown(event) {
   let prevKey;
@@ -170,70 +189,70 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    role="region"
-    tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    aria-roledescription="carousel"
-    :data-orientation="props.orientation"
-    data-part="root"
-    @keydown="onKeyDown"
-  >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-        <div
-          v-for="(item, index) in props.items"
-          :key="index"
-          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
-          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
-          data-part="item"
-        >
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
-      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
-        <Button
-          :disabled="!canScrollPrev"
-          :icon="prevIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.prev')"
-          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
-          :class="ui.prev({ class: props.ui?.prev })"
-          data-part="prev"
-          @click="scrollPrev"
-        />
-        <Button
-          :disabled="!canScrollNext"
-          :icon="nextIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.next')"
-          v-bind="typeof props.next === 'object' ? props.next : void 0"
-          :class="ui.next({ class: props.ui?.next })"
-          data-part="next"
-          @click="scrollNext"
-        />
-      </div>
-
-      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
-        <template v-for="(_, index) in scrollSnaps" :key="index">
-          <button
-            type="button"
-            role="tab"
-            :aria-label="t('carousel.goto', { page: index + 1 })"
-            :aria-selected="selectedIndex === index"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
-            data-part="dot"
-            :data-state="selectedIndex === index ? 'active' : void 0"
-            @click="scrollTo(index)"
-          ></button>
-        </template>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    role="region"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    aria-roledescription="carousel"
+    :data-orientation="props.orientation"
+    data-part="root"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+        <div
+          v-for="(item, index) in props.items"
+          :key="index"
+          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
+          data-part="item"
+        >
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
+      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
+        <Button
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
+          :class="ui.prev({ class: props.ui?.prev })"
+          data-part="prev"
+          @click="scrollPrev"
+        />
+        <Button
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof props.next === 'object' ? props.next : void 0"
+          :class="ui.next({ class: props.ui?.next })"
+          data-part="next"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            type="button"
+            role="tab"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
+            :aria-selected="selectedIndex === index"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            data-part="dot"
+            :data-state="selectedIndex === index ? 'active' : void 0"
+            @click="scrollTo(index)"
+          ></button>
+        </template>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Carousel.vue.d.ts

@@ -8,7 +8,7 @@ import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, ComponentBaseProps, ComponentUIProps } from '../types';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, LinkPropsKeys } from '../types';
 import type { AcceptableValue, StaticSlot } from '../types/utils';
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = AcceptableValue | {
@@ -27,7 +27,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Co
      * Configure the prev button when arrows are enabled.
      * @default { size: 'md', variant: 'link' }
      */
-    prev?: ButtonProps;
+    prev?: Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the prev button.
      * @default app.icons.chevronLeft
@@ -37,7 +37,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Co
      * Configure the next button when arrows are enabled.
      * @default { size: 'md', variant: 'link' }
      */
-    next?: ButtonProps;
+    next?: Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the next button.
      * @default app.icons.chevronRight
@@ -104,10 +104,14 @@ export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
         index: number;
     }>;
 }
-declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CarouselProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CarouselProps<T> & {
         onSelect?: ((selectedIndex: number) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
@@ -118,8 +122,8 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Checkbox.vue

@@ -55,50 +55,50 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-      <CheckboxRoot
-        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
-        v-model="modelValue"
-        :class="ui.base({ class: props.ui?.base })"
-        data-part="base"
-        @update:model-value="onUpdate"
-      >
-        <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
-            <Icon
-              v-if="modelValue === 'indeterminate'"
-              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-            <Icon
-              v-else
-              :name="props.icon || appConfig.ui.icons.check"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-          </CheckboxIndicator>
-        </template>
-      </CheckboxRoot>
-    </div>
-    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <component
-        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
-        v-if="props.label || !!slots.label"
-        :for="id"
-        :class="ui.label({ class: props.ui?.label })"
-        data-part="label"
-      >
-        <slot name="label" :label="props.label">
-          {{ props.label }}
-        </slot>
-      </component>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <CheckboxRoot
+        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
+        v-model="modelValue"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
+        @update:model-value="onUpdate"
+      >
+        <template #default="{ modelValue }">
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+            <Icon
+              v-if="modelValue === 'indeterminate'"
+              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+            <Icon
+              v-else
+              :name="props.icon || appConfig.ui.icons.check"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+          </CheckboxIndicator>
+        </template>
+      </CheckboxRoot>
+    </div>
+    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <component
+        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
+        v-if="props.label || !!slots.label"
+        :for="id"
+        :class="ui.label({ class: props.ui?.label })"
+        data-part="label"
+      >
+        <slot name="label" :label="props.label">
+          {{ props.label }}
+        </slot>
+      </component>
+      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Checkbox.vue.d.ts

@@ -2,9 +2,10 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { CheckboxRootEmits, CheckboxRootProps, PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/checkbox';
 import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
-export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'value' | 'name'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -44,6 +45,8 @@ export interface CheckboxSlots {
         description?: string;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (event: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
@@ -54,8 +57,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Checkb
     disabled: boolean;
     required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/CheckboxGroup.vue

@@ -0,0 +1,131 @@
+<script>
+import theme from "#build/ui/checkbox-group";
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { computed, useId } from "vue";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { get, omit } from "../utils";
+import { cv, merge } from "../utils/style";
+import Checkbox from "./Checkbox.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  legend: { type: String, required: false },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  size: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: [String, Object], required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emit);
+const checkboxProps = useForwardProps(reactivePick(props, "indicator", "icon"));
+const getProxySlots = () => omit(slots, ["legend"]);
+const { id: _id, name, color, size, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props, { bind: false });
+const id = _id.value ?? useId();
+function normalizeItem(item) {
+  const itemBase = {
+    disabled: disabled.value,
+    label: void 0,
+    description: void 0,
+    value: void 0,
+    ui: void 0,
+    class: void 0
+  };
+  if (typeof item === "object" && item === null) {
+    return {
+      ...itemBase,
+      id: `${id}:null`,
+      value: null
+    };
+  }
+  if (typeof item === "boolean" || typeof item === "string" || typeof item === "number" || typeof item === "bigint") {
+    return {
+      ...itemBase,
+      id: `${id}:${item}`,
+      label: String(item),
+      value: item
+    };
+  }
+  const value = get(item, props.valueKey);
+  const label = get(item, props.labelKey);
+  const description = get(item, props.descriptionKey);
+  return {
+    ...itemBase,
+    ...item,
+    value,
+    label,
+    description,
+    id: `${id}:${value}`
+  };
+}
+const normalizedItems = computed(() => {
+  if (!props.items)
+    return [];
+  return props.items.map(normalizeItem);
+});
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.checkboxGroup));
+  return styler({
+    ...props,
+    size: size.value,
+    color: color.value
+  });
+});
+</script>
+
+<template>
+  <CheckboxGroupRoot
+    v-bind="{ ...rootProps, id, name, disabled }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
+      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+
+      <Checkbox
+        v-for="item in normalizedItems"
+        :key="item.id"
+        v-bind="{ ...item, ...checkboxProps, color, size, name }"
+        :variant="props.variant"
+        :disabled="item.disabled || disabled"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-part="item"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]>
+          <slot :name="name" :item="item"></slot>
+        </template>
+      </Checkbox>
+    </fieldset>
+  </CheckboxGroupRoot>
+</template>