@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Carousel.vue

@@ -1,14 +1,15 @@
 <script>
-
+import theme from "#build/ui/carousel";
 </script>
 
 <script setup>
-import { computedAsync, reactivePick } from "@vueuse/core";
+import { reactivePick } from "@vueuse/core";
 import useEmblaCarousel from "embla-carousel-vue";
 import { Primitive, useForwardProps } from "reka-ui";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -25,9 +26,9 @@ const props = defineProps({
   autoHeight: { type: [Boolean, Object], required: false, default: false },
   classNames: { type: [Boolean, Object], required: false, default: false },
   fade: { type: [Boolean, Object], required: false, default: false },
-  wheelGestures: { type: Boolean, required: false, skipCheck: true, default: false },
-  class: { type: null, required: false },
+  wheelGestures: { type: [Boolean, Object], required: false, default: false },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   align: { type: [String, Function], required: false, default: "center" },
   containScroll: { type: [Boolean, String], required: false, default: "trimSnaps" },
   slidesToScroll: { type: [String, Number], required: false, default: 1 },
@@ -45,63 +46,98 @@ const props = defineProps({
   active: { type: Boolean, required: false, default: true },
   breakpoints: { type: Object, required: false, default: () => ({}) }
 });
+const emit = defineEmits(["select"]);
 defineSlots();
-const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
 const { t, dir } = useLocale();
-const { theme, generateStyle } = useTheme();
-const style = computed(() => generateStyle("carousel", props));
-const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft));
-const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.carousel));
+  return styler(props);
+});
+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,
   axis: props.orientation === "horizontal" ? "x" : "y",
   direction: dir.value === "rtl" ? "rtl" : "ltr"
 }));
-const plugins = computedAsync(async () => {
-  const plugins2 = [];
+const plugins = ref([]);
+async function loadPlugins() {
+  const emblaPlugins = [];
   if (props.autoplay) {
     const AutoplayPlugin = await import("embla-carousel-autoplay").then((r) => r.default);
-    plugins2.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
+    emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
   }
   if (props.autoScroll) {
     const AutoScrollPlugin = await import("embla-carousel-auto-scroll").then((r) => r.default);
-    plugins2.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
+    emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
   }
   if (props.autoHeight) {
     const AutoHeightPlugin = await import("embla-carousel-auto-height").then((r) => r.default);
-    plugins2.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
+    emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
   }
   if (props.classNames) {
     const ClassNamesPlugin = await import("embla-carousel-class-names").then((r) => r.default);
-    plugins2.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
+    emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
   }
   if (props.fade) {
     const FadePlugin = await import("embla-carousel-fade").then((r) => r.default);
-    plugins2.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
+    emblaPlugins.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
   }
   if (props.wheelGestures) {
     const { WheelGesturesPlugin } = await import("embla-carousel-wheel-gestures");
-    plugins2.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
+    emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
   }
-  return plugins2;
-});
-const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
-watch([options, plugins], () => {
+  plugins.value = emblaPlugins;
+}
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], async () => {
+  await loadPlugins();
   emblaApi.value?.reInit(options.value, plugins.value);
-});
+}, { immediate: true });
+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) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  let prevKey;
+  let nextKey;
+  if (props.orientation === "horizontal") {
+    prevKey = dir.value === "ltr" ? "ArrowLeft" : "ArrowRight";
+    nextKey = dir.value === "ltr" ? "ArrowRight" : "ArrowLeft";
+  } else {
+    prevKey = "ArrowUp";
+    nextKey = "ArrowDown";
+  }
   if (event.key === prevKey) {
     event.preventDefault();
     scrollPrev();
@@ -123,15 +159,28 @@ function onSelect(api) {
   canScrollNext.value = api?.canScrollNext() || false;
   canScrollPrev.value = api?.canScrollPrev() || false;
   selectedIndex.value = api?.selectedScrollSnap() || 0;
+  emit("select", selectedIndex.value);
+}
+function isCarouselItem(item) {
+  return typeof item === "object" && item !== null;
 }
 onMounted(() => {
   if (!emblaApi.value)
     return;
-  emblaApi.value?.on("init", onInit);
-  emblaApi.value?.on("init", onSelect);
-  emblaApi.value?.on("reInit", onInit);
-  emblaApi.value?.on("reInit", onSelect);
-  emblaApi.value?.on("select", onSelect);
+  emblaApi.value.on("init", onInit);
+  emblaApi.value.on("init", onSelect);
+  emblaApi.value.on("reInit", onInit);
+  emblaApi.value.on("reInit", onSelect);
+  emblaApi.value.on("select", onSelect);
+});
+onBeforeMount(() => {
+  if (!emblaApi.value)
+    return;
+  emblaApi.value.off("init", onInit);
+  emblaApi.value.off("init", onSelect);
+  emblaApi.value.off("reInit", onInit);
+  emblaApi.value.off("reInit", onSelect);
+  emblaApi.value.off("select", onSelect);
 });
 defineExpose({
   emblaRef,
@@ -143,20 +192,20 @@ defineExpose({
   <Primitive
     :as="props.as"
     role="region"
-    aria-roledescription="carousel"
     tabindex="0"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :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="style.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <div :class="style.container({ class: props.ui?.container })" data-part="container">
+    <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"
-          role="group"
-          aria-roledescription="slide"
-          :class="style.item({ class: props.ui?.item })"
+          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>
@@ -164,38 +213,42 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="props.arrows || props.dots" :class="style.controls({ class: props.ui?.controls })" data-part="controls">
-      <div v-if="props.arrows" :class="style.arrows({ class: props.ui?.arrows })" data-part="arrows">
+    <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"
-          size="md"
+          color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
           v-bind="typeof props.prev === 'object' ? props.prev : void 0"
-          :class="style.prev({ class: props.ui?.prev })"
+          :class="ui.prev({ class: props.ui?.prev })"
           data-part="prev"
           @click="scrollPrev"
         />
         <Button
           :disabled="!canScrollNext"
           :icon="nextIcon"
-          size="md"
+          color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
           v-bind="typeof props.next === 'object' ? props.next : void 0"
-          :class="style.next({ class: props.ui?.next })"
+          :class="ui.next({ class: props.ui?.next })"
           data-part="next"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })" data-part="dots">
+      <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 })"
-            :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :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>

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

@@ -6,18 +6,18 @@ import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
 import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
-import type { AcceptableValue, PrimitiveProps } from 'reka-ui';
-import type { carousel } from '../theme/index.js';
-import type { ButtonProps, ComponentAttrs } from '../types/index.js';
-export type CarouselItem = AcceptableValue;
-export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
-    default?: (props: {
-        item: T;
-        index: number;
-    }) => any;
-}
-type CarouselVariants = VariantProps<typeof carousel>;
-export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/carousel';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps } from '../types';
+import type { AcceptableValue, StaticSlot } from '../types/utils';
+export type CarouselValue = AcceptableValue;
+export type CarouselItem = AcceptableValue | {
+    class?: ComponentBaseProps['class'];
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item'>;
+    [key: string]: any;
+};
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentBaseProps, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -53,52 +53,73 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Co
      * @default false
      */
     dots?: boolean;
-    orientation?: CarouselVariants['orientation'];
+    /**
+     * The orientation of the carousel.
+     * @default "horizontal"
+     */
+    orientation?: ThemeVariants['orientation'];
     items?: T[];
     /**
      * Enable Autoplay plugin
-     * @link https://www.embla-carousel.com/plugins/autoplay/
+     * @see https://www.embla-carousel.com/plugins/autoplay/
      */
     autoplay?: boolean | AutoplayOptionsType;
     /**
      * Enable Auto Scroll plugin
-     * @link https://www.embla-carousel.com/plugins/auto-scroll/
+     * @see https://www.embla-carousel.com/plugins/auto-scroll/
      */
     autoScroll?: boolean | AutoScrollOptionsType;
     /**
      * Enable Auto Height plugin
-     * @link https://www.embla-carousel.com/plugins/auto-height/
+     * @see https://www.embla-carousel.com/plugins/auto-height/
      */
     autoHeight?: boolean | AutoHeightOptionsType;
     /**
      * Enable Class Names plugin
-     * @link https://www.embla-carousel.com/plugins/class-names/
+     * @see https://www.embla-carousel.com/plugins/class-names/
      */
     classNames?: boolean | ClassNamesOptionsType;
     /**
      * Enable Fade plugin
-     * @link https://www.embla-carousel.com/plugins/fade/
+     * @see https://www.embla-carousel.com/plugins/fade/
      */
     fade?: boolean | FadeOptionsType;
     /**
      * Enable Wheel Gestures plugin
-     * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+     * @see https://www.embla-carousel.com/plugins/wheel-gestures/
      */
     wheelGestures?: boolean | WheelGesturesPluginOptions;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CarouselEmits {
+    /**
+     * Emitted when the selected slide changes
+     * @param selectedIndex The index of the selected slide
+     */
+    select: [selectedIndex: number];
+}
+export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
+    default: StaticSlot<{
+        item: T;
+        index: number;
+    }>;
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & CarouselProps<T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+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> & {
+        onSelect?: ((selectedIndex: number) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: CarouselSlots<T>;
-    emit: {};
+    emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Checkbox.vue

@@ -1,22 +1,29 @@
 <script>
-
+import theme from "#build/ui/checkbox";
 </script>
 
 <script setup>
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, useVModel } from "@vueuse/core";
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from "reka-ui";
 import { computed, useId } from "vue";
-import { useFormItem } from "../composables/useFormItem";
-import { useTheme } from "../composables/useTheme";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
+  variant: { type: null, required: false },
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  icon: { type: String, required: false },
-  indeterminateIcon: { type: String, required: false },
-  class: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  indeterminateIcon: { type: [String, Object], required: false },
+  modelValue: { type: [Boolean, String], required: false },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false, default: false },
   required: { type: Boolean, required: false, default: false },
   name: { type: String, required: false },
@@ -24,18 +31,21 @@ const props = defineProps({
   id: { type: String, required: false },
   defaultValue: { type: [Boolean, String], required: false }
 });
-const emit = defineEmits(["change"]);
+const emit = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();
-const innerValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
+const modelValue = useVModel(props, "modelValue", emit);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
-const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem(props);
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
 const id = _id.value ?? useId();
-const { theme, generateStyle } = useTheme();
-const style = computed(() => generateStyle("checkbox", {
-  ...props,
-  size: size.value,
-  disabled: disabled.value
-}));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.checkbox));
+  return styler({
+    ...props,
+    size: size.value,
+    disabled: disabled.value
+  });
+});
 function onUpdate(value) {
   const event = new Event("change", { target: value });
   emit("change", event);
@@ -45,31 +55,46 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <div :class="style.container({ class: props.ui?.container })" data-part="container">
+  <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-slot="{ modelValue }"
-        v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
-        v-model="innerValue"
-        :class="style.base({ class: props.ui?.base })"
+        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"
       >
-        <CheckboxIndicator as-child force-mount>
-          <span
-            v-if="modelValue === 'indeterminate'"
-            :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
-            data-part="icon"
-          ></span>
-          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })" data-part="icon"></span>
-        </CheckboxIndicator>
+        <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="style.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })" data-part="label">
-        <slot name="label" :label="props.label">{{ props.label }}</slot>
-      </Label>
-      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })" data-part="description">
+    <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>

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

@@ -1,20 +1,10 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
-import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui';
-import type { checkbox } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface CheckboxEmits {
-    change: [payload: Event];
-}
-export interface CheckboxSlots {
-    label?: (props: {
-        label?: string;
-    }) => any;
-    description?: (props: {
-        description?: string;
-    }) => any;
-}
-type CheckboxVariants = VariantProps<typeof checkbox>;
-export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+import type { CheckboxRootEmits, CheckboxRootProps, PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/checkbox';
+import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -22,32 +12,49 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
     as?: PrimitiveProps['as'];
     label?: string;
     description?: string;
-    size?: CheckboxVariants['size'];
+    /** @default "list" */
+    variant?: ThemeVariants['variant'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "start" */
+    indicator?: ThemeVariants['indicator'];
     /**
      * The icon displayed when checked.
      * @default app.icons.check
      */
-    icon?: string;
+    icon?: IconProps['name'];
     /**
      * The icon displayed when the checkbox is indeterminate.
-     * @default app.icons.indeterminate
+     * @default app.icons.minus
      */
-    indeterminateIcon?: string;
+    indeterminateIcon?: IconProps['name'];
+    modelValue?: boolean | 'indeterminate';
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type CheckboxEmits = CheckboxRootEmits & {
+    change: [event: Event];
+};
+export interface CheckboxSlots {
+    label: StaticSlot<{
+        label?: string;
+    }>;
+    description: StaticSlot<{
+        description?: string;
+    }>;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (payload: Event) => any;
+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;
-}, string, import("vue").PublicProps, Readonly<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}> & Readonly<{
-    onChange?: ((payload: Event) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
 }>, {
     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 (): {