@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

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

@@ -5,12 +5,13 @@ import theme from '#build/ui/popover';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Popover = ComponentConfig<typeof theme, AppConfig, 'popover'>;
-export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+type PopoverMode = 'click' | 'hover';
+export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
     /**
      * The display mode of the popover.
      * @defaultValue 'click'
      */
-    mode?: 'click' | 'hover';
+    mode?: M;
     /**
      * The content of the popover.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
@@ -43,29 +44,27 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
 export interface PopoverEmits extends PopoverRootEmits {
     'close:prevent': [];
 }
-export interface PopoverSlots {
+type SlotProps<M extends PopoverMode = PopoverMode> = [M] extends ['hover'] ? {} : {
+    close: () => void;
+};
+export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
     default(props: {
         open: boolean;
     }): any;
-    content(props?: {}): any;
-    anchor(props?: {}): any;
+    content(props: SlotProps<M>): any;
+    anchor(props: SlotProps<M>): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
-    "close:prevent": () => any;
-}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onClose:prevent"?: (() => any) | undefined;
-}>, {
-    mode: "click" | "hover";
-    portal: boolean | string | HTMLElement;
-    dismissible: boolean;
-    openDelay: number;
-    closeDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PopoverSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+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> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PopoverSlots<M>;
+    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => 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 as K]: T[K];
+} & {};

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

@@ -87,23 +87,30 @@ export interface PricingPlanProps {
     ui?: PricingPlan['slots'];
 }
 export interface PricingPlanSlots {
-    badge(props?: {}): any;
+    badge(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     price(props?: {}): any;
     discount(props?: {}): any;
-    billing(props?: {}): any;
+    billing(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     features(props?: {}): any;
-    button(props?: {}): any;
+    button(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     header(props?: {}): any;
     body(props?: {}): any;
     footer(props?: {}): any;
     tagline(props?: {}): any;
     terms(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
     orientation: PricingPlan["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/PricingPlan.vue

@@ -60,7 +60,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
       </div>
 
       <div v-if="billingCycle || billingPeriod || !!slots.billing" :class="ui.billing({ class: props.ui?.billing })">
-        <slot name="billing">
+        <slot name="billing" :ui="ui">
           <span :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
             {{ billingPeriod || "\xA0" }}
           </span>
@@ -87,7 +87,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
             </slot>
           </div>
 
-          <slot name="badge">
+          <slot name="badge" :ui="ui">
             <UBadge v-if="badge" color="primary" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
           </slot>
         </div>
@@ -122,7 +122,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
 
         <ReusePriceTemplate v-if="orientation === 'horizontal'" />
 
-        <slot name="button">
+        <slot name="button" :ui="ui">
           <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" :class="ui.button({ class: props.ui?.button })" @click="button?.onClick" />
         </slot>
 

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

@@ -87,23 +87,30 @@ export interface PricingPlanProps {
     ui?: PricingPlan['slots'];
 }
 export interface PricingPlanSlots {
-    badge(props?: {}): any;
+    badge(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     price(props?: {}): any;
     discount(props?: {}): any;
-    billing(props?: {}): any;
+    billing(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     features(props?: {}): any;
-    button(props?: {}): any;
+    button(props: {
+        ui: PricingPlan['ui'];
+    }): any;
     header(props?: {}): any;
     body(props?: {}): any;
     footer(props?: {}): any;
     tagline(props?: {}): any;
     terms(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
     orientation: PricingPlan["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -28,17 +28,25 @@ export interface PricingPlansProps {
     scale?: boolean;
     class?: any;
 }
-export interface PricingPlansSlots {
+type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
+    plan: T;
+}) => any : PricingPlanSlots[K];
+export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
+    [K in keyof PricingPlanSlots]: ExtendSlotWithPlan<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PricingPlansProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlansProps> & Readonly<{}>, {
-    orientation: PricingPlans["variants"]["orientation"];
-    scale: boolean;
-    compact: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlansSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
 };
+declare const __VLS_export: <T extends PricingPlanProps>(__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<PricingPlansProps> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PricingPlansSlots<T>;
+    emit: {};
+}>) => 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 as K]: T[K];
+} & {};

package/dist/runtime/components/PricingPlans.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/pricing-plans";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UPricingPlan from "./PricingPlan.vue";
 const props = defineProps({
@@ -17,6 +18,7 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const slots = defineSlots();
+const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlans || {} }));
 const count = computed(() => props.plans?.length || slots.default?.()?.flatMap(mapSlot).filter(Boolean)?.length || 3);
@@ -39,7 +41,11 @@ function mapSlot(slot) {
         :key="index"
         :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="plan"
-      />
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" :plan="plan" />
+        </template>
+      </UPricingPlan>
     </slot>
   </Primitive>
 </template>

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -28,17 +28,25 @@ export interface PricingPlansProps {
     scale?: boolean;
     class?: any;
 }
-export interface PricingPlansSlots {
+type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
+    plan: T;
+}) => any : PricingPlanSlots[K];
+export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
+    [K in keyof PricingPlanSlots]: ExtendSlotWithPlan<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PricingPlansProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlansProps> & Readonly<{}>, {
-    orientation: PricingPlans["variants"]["orientation"];
-    scale: boolean;
-    compact: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlansSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
 };
+declare const __VLS_export: <T extends PricingPlanProps>(__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<PricingPlansProps> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PricingPlansSlots<T>;
+    emit: {};
+}>) => 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 as K]: T[K];
+} & {};

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

@@ -90,15 +90,16 @@ export type PricingTableSlots<T extends PricingTableTier = PricingTableTier> = {
         section: PricingTableSection<T>;
     }) => any;
 } & DynamicSlots<T, 'title' | 'description' | 'badge' | 'button' | 'billing' | 'discount' | 'price'> & FeatureDynamicSlots<PricingTableSectionFeature<T>, 'title' | 'value'> & SectionDynamicSlots<PricingTableSection<T>, 'title'>;
-declare const _default: <T extends PricingTableTier>(__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> & PricingTableProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends PricingTableTier>(__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<PricingTableProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => 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 as K]: T[K];

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

@@ -90,15 +90,16 @@ export type PricingTableSlots<T extends PricingTableTier = PricingTableTier> = {
         section: PricingTableSection<T>;
     }) => any;
 } & DynamicSlots<T, 'title' | 'description' | 'badge' | 'button' | 'billing' | 'discount' | 'price'> & FeatureDynamicSlots<PricingTableSectionFeature<T>, 'title' | 'value'> & SectionDynamicSlots<PricingTableSection<T>, 'title'>;
-declare const _default: <T extends PricingTableTier>(__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> & PricingTableProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends PricingTableTier>(__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<PricingTableProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => 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 as K]: T[K];

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

@@ -47,7 +47,7 @@ export type ProgressSlots = {
         step: number;
     }) => any;
 };
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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;
 }, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{
@@ -58,6 +58,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressPr
     modelValue: number | null;
     inverted: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Progress.vue

@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%

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

@@ -47,7 +47,7 @@ export type ProgressSlots = {
         step: number;
     }) => any;
 };
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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;
 }, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{
@@ -58,6 +58,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressPr
     modelValue: number | null;
     inverted: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -81,18 +81,16 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & RadioGroupProps<T, VK> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+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> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => 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 as K]: T[K];

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

@@ -81,18 +81,16 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & RadioGroupProps<T, VK> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+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> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => 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 as K]: T[K];

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

@@ -9,6 +9,7 @@ type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 export type SelectValue = AcceptableValue;
 export type SelectItem = SelectValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -22,9 +23,9 @@ export type SelectItem = SelectValue | {
     type?: 'label' | 'separator' | 'item';
     value?: SelectValue;
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
@@ -80,6 +81,11 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -102,42 +108,41 @@ export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemK
 type SlotProps<T extends SelectItem> = (props: {
     item: T;
     index: number;
+    ui: Select['ui'];
 }) => any;
 export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'default'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
+        ui: Select['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Select['ui'];
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
 }
-declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
-        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue"> & SelectProps<T, VK, M> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<SelectProps<T, VK, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggerRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
             $data: {};
@@ -241,13 +246,14 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
                 default?: (props: {}) => any;
             };
         }) | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: SelectSlots<T, VK, M, NestedItem<T>>;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => 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 as K]: T[K];

package/dist/runtime/components/Select.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   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 },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -155,7 +156,7 @@ defineExpose({
         </slot>
       </span>
 
-      <slot :model-value="modelValue" :open="open">
+      <slot :model-value="modelValue" :open="open" :ui="ui">
         <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
           <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
@@ -193,8 +194,8 @@ defineExpose({
                 :value="isSelectItem(item) ? get(item, props.valueKey) : item"
                 @select="isSelectItem(item) && item.onSelect?.($event)"
               >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
+                <slot name="item" :item="item" :index="index" :ui="ui">
+                  <slot name="item-leading" :item="item" :index="index" :ui="ui">
                     <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
                     <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                     <UChip
@@ -207,14 +208,22 @@ defineExpose({
                     />
                   </slot>
 
-                  <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </SelectItemText>
+                  <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                    <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+                      <slot name="item-label" :item="item" :index="index">
+                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                      </slot>
+                    </SelectItemText>
+
+                    <span v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+                      <slot name="item-description" :item="item" :index="index">
+                        {{ get(item, props.descriptionKey) }}
+                      </slot>
+                    </span>
+                  </span>
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
+                    <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
 
                     <SelectItemIndicator as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />