@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/Pagination.vue

@@ -50,51 +50,51 @@ const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConf
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <PaginationFirst v-if="props.showControls || !!slots.first" :class="ui.first({ class: props.ui?.first })" as-child data-part="first">
-        <slot name="first">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
-        </slot>
-      </PaginationFirst>
-      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="ui.prev({ class: props.ui?.prev })" as-child data-part="perv">
-        <slot name="prev">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : void 0" />
-        </slot>
-      </PaginationPrev>
-
-      <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" :value="item.value" :class="ui.item({ class: props.ui?.item })" as-child data-part="item">
-          <slot name="item" v-bind="{ item, index, page, pageCount }">
-            <Button
-              :color="props.page === item.value ? props.activeColor : props.color"
-              :variant="props.page === item.value ? props.activeVariant : props.variant"
-              :size="props.size"
-              :label="String(item.value)"
-              :to="props.to?.(item.value)"
-              :ui="{ label: ui.label({ class: props.ui?.label }) }"
-              square
-            />
-          </slot>
-        </PaginationListItem>
-
-        <PaginationEllipsis v-else :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child data-part="ellipsis">
-          <slot name="ellipsis" :ui="ui">
-            <Button as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
-          </slot>
-        </PaginationEllipsis>
-      </template>
-
-      <PaginationNext v-if="props.showControls || !!slots.next" :class="ui.next({ class: props.ui?.next })" as-child data-part="next">
-        <slot name="next">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : void 0" />
-        </slot>
-      </PaginationNext>
-      <PaginationLast v-if="props.showControls || !!slots.last" :class="ui.last({ class: props.ui?.last })" as-child data-part="last">
-        <slot name="last">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
-        </slot>
-      </PaginationLast>
-    </PaginationList>
-  </PaginationRoot>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })" data-part="list">
+      <PaginationFirst v-if="props.showControls || !!slots.first" :class="ui.first({ class: props.ui?.first })" as-child data-part="first">
+        <slot name="first">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="ui.prev({ class: props.ui?.prev })" as-child data-part="perv">
+        <slot name="prev">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : void 0" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationListItem v-if="item.type === 'page'" :value="item.value" :class="ui.item({ class: props.ui?.item })" as-child data-part="item">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <Button
+              :color="props.page === item.value ? props.activeColor : props.color"
+              :variant="props.page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
+              :label="String(item.value)"
+              :to="props.to?.(item.value)"
+              :ui="{ label: ui.label({ class: props.ui?.label }) }"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child data-part="ellipsis">
+          <slot name="ellipsis" :ui="ui">
+            <Button as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="props.showControls || !!slots.next" :class="ui.next({ class: props.ui?.next })" as-child data-part="next">
+        <slot name="next">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : void 0" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="props.showControls || !!slots.last" :class="ui.last({ class: props.ui?.last })" as-child data-part="last">
+        <slot name="last">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
 </template>

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

@@ -92,23 +92,23 @@ export interface PaginationSlots {
         index: number;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    activeColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    activeColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     itemsPerPage: number;
     showEdges: boolean;
     siblingCount: number;
     total: number;
     showControls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/PinInput.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   highlight: { type: Boolean, required: false },
   ui: { type: null, required: false },
   class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
-  defaultValue: { type: Array, required: false },
+  defaultValue: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
   mask: { type: Boolean, required: false },
@@ -71,26 +71,26 @@ defineExpose({
 </script>
 
 <template>
-  <PinInputRoot
-    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
-    :placeholder="props.placeholder"
-    :model-value="modelValue"
-    :default-value="props.defaultValue"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="emitFormInput"
-    @complete="onComplete"
-  >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => inputsRef[index] = el"
-      :index="index"
-      :disabled="disabled"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-  </PinInputRoot>
+  <PinInputRoot
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
+    :placeholder="props.placeholder"
+    :model-value="modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="emitFormInput"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :ref="(el) => inputsRef[index] = el"
+      :index="index"
+      :disabled="disabled"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+  </PinInputRoot>
 </template>

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

@@ -1,6 +1,6 @@
-import type { ComponentPublicInstance } from 'vue';
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { ComponentPublicInstance } from 'vue';
 import theme from '#build/ui/pin-input';
 import type { ComponentBaseProps, ComponentUIProps } from '../types';
 type PinInputType = 'text' | 'number';
@@ -31,24 +31,28 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
-declare const __VLS_export: <T extends PinInputType = "text" | "number">(__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<PinInputProps<T> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PinInputType = "text" | "number">(__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<PinInputProps<T> & {
         onBlur?: ((event: Event) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
         onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
+    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => 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/Popover.vue

@@ -54,26 +54,26 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Component.Root v-slot="{ open, close }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!props.reference" :reference="props.reference" as-child :class="props.class">
-      <slot :open="open"></slot>
-    </Component.Trigger>
-
-    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" v-bind="close ? { close } : {}"></slot>
-    </Component.Anchor>
-
-    <Component.Portal v-bind="portalProps">
-      <Component.Content
-        v-bind="contentProps"
-        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
-        data-part="content"
-        v-on="contentEvents"
-      >
-        <slot name="content" v-bind="close ? { close } : {}"></slot>
-
-        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
-      </Component.Content>
-    </Component.Portal>
-  </Component.Root>
+  <Component.Root v-slot="{ open, close }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default || !!props.reference" :reference="props.reference" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </Component.Trigger>
+
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" v-bind="close ? { close } : {}"></slot>
+    </Component.Anchor>
+
+    <Component.Portal v-bind="portalProps">
+      <Component.Content
+        v-bind="contentProps"
+        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
+        data-part="content"
+        v-on="contentEvents"
+      >
+        <slot name="content" v-bind="close ? { close } : {}"></slot>
+
+        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
 </template>

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

@@ -51,11 +51,15 @@ export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
         close: () => void;
     }>;
 }
-declare const __VLS_export: <M extends PopoverMode>(__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<PopoverProps<M> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends PopoverMode>(__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<PopoverProps<M> & {
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onClose-prevent"?: (() => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: PopoverSlots<M>;
@@ -63,8 +67,8 @@ declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awa
 }>) => 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/Progress.vue

@@ -87,29 +87,29 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation" data-part="root">
-    <div v-if="!isIndeterminate && (props.status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" data-part="status" :style="statusStyle">
-      <slot name="status" :percent="percent">
-        {{ percent }}%
-      </slot>
-    </div>
-
-    <ProgressRoot
-      v-bind="rootProps"
-      :max="realMax"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      style="transform: translateZ(0)"
-    >
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" :style="indicatorStyle" />
-    </ProgressRoot>
-
-    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })" data-part="steps">
-      <div v-for="(step, index) in props.max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })" data-part="step">
-        <slot :name="`step-${index}`" :step="step">
-          {{ step }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation" data-part="root">
+    <div v-if="!isIndeterminate && (props.status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" data-part="status" :style="statusStyle">
+      <slot name="status" :percent="percent">
+        {{ percent }}%
+      </slot>
+    </div>
+
+    <ProgressRoot
+      v-bind="rootProps"
+      :max="realMax"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      style="transform: translateZ(0)"
+    >
+      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" :style="indicatorStyle" />
+    </ProgressRoot>
+
+    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })" data-part="steps">
+      <div v-for="(step, index) in props.max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })" data-part="step">
+        <slot :name="`step-${index}`" :step="step">
+          {{ step }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

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

@@ -43,6 +43,8 @@ export type ProgressSlots = {
         step: string | number;
     }>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string[] | undefined) => any;
     "update:max": (value: number) => any;
@@ -54,8 +56,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Progre
     inverted: boolean;
     modelValue: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/RadioGroup.vue

@@ -96,54 +96,54 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <RadioGroupRoot
-    v-bind="{ id, ...rootProps, name, disabled }"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :orientation="props.orientation"
-    :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>
-      <component
-        :is="!props.variant || props.variant === 'list' ? 'div' : Label"
-        v-for="item in normalizedItems"
-        :key="item.value"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
-        data-part="item"
-      >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })" data-part="container">
-          <RekaRadioGroupItem
-            :id="item.id"
-            :value="item.value"
-            :disabled="item.disabled"
-            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
-            data-part="base"
-            :data-indicator="props.indicator"
-          >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" data-part="indicator" force-mount />
-          </RekaRadioGroupItem>
-        </div>
-
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })" data-part="wrapper">
-          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })" data-part="label">
-            <slot name="label" :item="item" :model-value="modelValue">
-              {{ item.label }}
-            </slot>
-          </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })" data-part="description">
-            <slot name="description" :item="item" :model-value="modelValue">
-              {{ item.description }}
-            </slot>
-          </p>
-        </div>
-      </component>
-    </fieldset>
-  </RadioGroupRoot>
+  <RadioGroupRoot
+    v-bind="{ id, ...rootProps, name, disabled }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :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>
+      <component
+        :is="!props.variant || props.variant === 'list' ? 'div' : Label"
+        v-for="item in normalizedItems"
+        :key="item.value"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
+        data-part="item"
+      >
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })" data-part="container">
+          <RekaRadioGroupItem
+            :id="item.id"
+            :value="item.value"
+            :disabled="item.disabled"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
+            data-part="base"
+            :data-indicator="props.indicator"
+          >
+            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" data-part="indicator" force-mount />
+          </RekaRadioGroupItem>
+        </div>
+
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })" data-part="wrapper">
+          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })" data-part="label">
+            <slot name="label" :item="item" :model-value="modelValue">
+              {{ item.label }}
+            </slot>
+          </component>
+          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })" data-part="description">
+            <slot name="description" :item="item" :model-value="modelValue">
+              {{ item.description }}
+            </slot>
+          </p>
+        </div>
+      </component>
+    </fieldset>
+  </RadioGroupRoot>
 </template>

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

@@ -77,11 +77,15 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T>;
     description: SlotProps<T>;
 }
-declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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<RadioGroupProps<T, VK> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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<RadioGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, NestedItem<T>>) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
@@ -89,8 +93,8 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
 }>) => 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/ScrollArea.vue

@@ -35,36 +35,36 @@ function scrollTopLeft() {
 </script>
 
 <template>
-  <ScrollAreaRoot
-    ref="rootRef"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    data-part="root"
-  >
-    <ScrollAreaViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <slot></slot>
-    </ScrollAreaViewport>
-
-    <ScrollAreaScrollbar
-      key="scrollbar-horizontal"
-      orientation="horizontal"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
-      data-part="scrollbar"
-    >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
-    </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar
-      key="scrollbar-vertical"
-      orientation="vertical"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
-      data-part="scrollbar"
-    >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
-    </ScrollAreaScrollbar>
-    <ScrollAreaCorner
-      key="corner"
-      :class="ui.corner({ class: props.ui?.corner })"
-      data-part="corner"
-    />
-  </ScrollAreaRoot>
+  <ScrollAreaRoot
+    ref="rootRef"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
+  >
+    <ScrollAreaViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <slot></slot>
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      key="scrollbar-horizontal"
+      orientation="horizontal"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
+      data-part="scrollbar"
+    >
+      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaScrollbar
+      key="scrollbar-vertical"
+      orientation="vertical"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
+      data-part="scrollbar"
+    >
+      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaCorner
+      key="corner"
+      :class="ui.corner({ class: props.ui?.corner })"
+      data-part="corner"
+    />
+  </ScrollAreaRoot>
 </template>

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

@@ -4,6 +4,8 @@ import type { ComponentBaseProps, ComponentUIProps } from '../types';
 export interface ScrollAreaProps extends ComponentBaseProps, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {
     ui?: ComponentUIProps<typeof theme>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaProps, {
     scrollTop: () => void;
     scrollTopLeft: () => void;
@@ -12,8 +14,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Scroll
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;