@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/Textarea.vue

@@ -7,6 +7,7 @@ import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
@@ -31,15 +32,16 @@ const props = defineProps({
   autoresizeDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   rows: { type: Number, required: false, default: 3 },
-  maxrows: { type: Number, required: false },
+  maxrows: { type: Number, required: false, default: 0 },
   tag: { type: String, required: false },
   tagColor: { type: null, required: false },
   highlight: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
+  fixed: { type: Boolean, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  modelModifiers: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
   loading: { type: Boolean, required: false },
@@ -50,6 +52,7 @@ const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("textarea", props);
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const isTag = computed(() => {
@@ -60,6 +63,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
   // size: size?.value,
   loading: props.loading,
   highlight: highlight.value,
+  fixed: props.fixed,
   autoresize: Boolean(props.autoresize),
   rounded: Boolean(props.rounded),
   noPadding: Boolean(props.noPadding),
@@ -70,7 +74,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
 }));
 const textareaRef = useTemplateRef("textareaRef");
 function updateInput(value) {
-  if (props.modelModifiers?.trim) {
+  if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;
   }
   if (props.modelModifiers?.number) {
@@ -79,7 +83,7 @@ function updateInput(value) {
   if (props.modelModifiers?.nullable) {
     value ||= null;
   }
-  if (props.modelModifiers?.optional) {
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
     value ||= void 0;
   }
   modelValue.value = value;
@@ -146,11 +150,11 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <B24Badge
       v-if="isTag"
       data-slot="tag"
-      :class="b24ui.tag({ class: props.b24ui?.tag })"
+      :class="b24ui.tag({ class: uiProp?.tag })"
       :color="props.tagColor"
       :label="props.tag"
       size="xs"
@@ -164,7 +168,7 @@ defineExpose({
       :rows="rows"
       :placeholder="placeholder"
       data-slot="base"
-      :class="b24ui.base({ class: props.b24ui?.base })"
+      :class="b24ui.base({ class: uiProp?.base })"
       :disabled="disabled"
       :required="required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -176,31 +180,31 @@ defineExpose({
 
     <slot :b24ui="b24ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
       <slot name="leading" :b24ui="b24ui">
         <Component
           :is="leadingIconName"
           v-if="isLeading && leadingIconName"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           data-slot="leadingAvatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
         />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: uiProp?.trailing })">
       <slot name="trailing" :b24ui="b24ui">
         <Component
           :is="trailingIconName"
           v-if="trailingIconName"
           data-slot="trailingIcon"
-          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+          :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
         />
       </slot>
     </span>

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

@@ -3,11 +3,11 @@ import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps } from '../types';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -59,14 +59,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     tagColor?: BadgeProps['color'];
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     b24ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -81,21 +83,67 @@ export interface TextareaSlots {
         b24ui: Textarea['b24ui'];
     }): any;
 }
-declare const __VLS_export: <T extends TextareaValue>(__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<TextareaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__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<TextareaProps<T, Mod> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: Readonly<import("vue").ShallowRef<any>>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => 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/Theme.d.vue.ts

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    b24ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Theme.vue

@@ -0,0 +1,17 @@
+<script>
+import { computed } from "vue";
+import { provideThemeContext } from "../composables/useComponentUI";
+</script>
+
+<script setup>
+const props = defineProps({
+  b24ui: { type: null, required: true }
+});
+provideThemeContext({
+  b24ui: computed(() => props.b24ui)
+});
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    b24ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/timeline';
 import type { AvatarProps, IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
 export interface TimelineItem {
@@ -36,6 +36,11 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
      * @defaultValue 'vertical'
      */
     orientation?: Timeline['variants']['orientation'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     defaultValue?: string | number;
     reverse?: boolean;
     class?: any;
@@ -44,29 +49,38 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
 type SlotProps<T extends TimelineItem> = (props: {
     item: T;
 }) => any;
+export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
+    select: [event: Event, item: T];
+}
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     indicator: SlotProps<T>;
+    wrapper: SlotProps<T>;
     date: SlotProps<T>;
     title: SlotProps<T>;
     description: SlotProps<T>;
-} & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
+} & DynamicSlots<T, 'indicator' | 'wrapper' | 'date' | 'title' | 'description', {
     item: T;
 }>;
-declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
         modelValue?: string | number;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | number | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onSelect?: ((event: Event, item: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
-    emit: (evt: "update:modelValue", value: string | number | undefined) => void;
+    emit: ((evt: "select", event: Event, item: T) => void) & ((event: "update:modelValue", value: string | number | undefined) => 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/Timeline.vue

@@ -6,7 +6,9 @@ import theme from "#build/b24ui/timeline";
 import { computed } from "vue";
 import { Primitive, Separator } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
+import { get } from "../utils";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,14 +16,17 @@ const props = defineProps({
   size: { type: null, required: false },
   color: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
+  valueKey: { type: null, required: false, default: "value" },
   defaultValue: { type: [String, Number], required: false },
   reverse: { type: Boolean, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
+const emits = defineEmits(["select"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("timeline", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.timeline || {} })({
   orientation: props.orientation,
   size: props.size,
@@ -31,7 +36,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.timelin
 const currentStepIndex = computed(() => {
   const value = modelValue.value ?? props.defaultValue;
   if (typeof value === "string") {
-    return props.items.findIndex((item) => item.value === value) ?? -1;
+    return props.items.findIndex((item) => get(item, props.valueKey) === value) ?? -1;
   }
   if (props.reverse) {
     return value != null ? props.items.length - 1 - value : -1;
@@ -48,24 +53,28 @@ function getItemState(index) {
     return index < currentStepIndex.value ? "completed" : void 0;
   }
 }
+function onSelect(event, item) {
+  emits("select", event, item);
+}
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <div
       v-for="(item, index) in items"
-      :key="item.value ?? index"
+      :key="index"
       data-slot="item"
-      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+      :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class] })"
       :data-state="getItemState(index)"
+      @click="onSelect($event, item)"
     >
-      <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+      <div data-slot="container" :class="b24ui.container({ class: [uiProp?.container, item.b24ui?.container] })">
         <B24Avatar
           :size="size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
-          :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })"
+          :class="b24ui.indicator({ class: [uiProp?.indicator, item.b24ui?.indicator] })"
           :b24ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
@@ -74,27 +83,29 @@ function getItemState(index) {
         <Separator
           v-if="index < items.length - 1"
           data-slot="separator"
-          :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
+          :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
-        <div v-if="item.date" data-slot="date" :class="b24ui.date({ class: [props.b24ui?.date, item.b24ui?.date] })">
-          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
-            {{ item.date }}
-          </slot>
-        </div>
-        <div v-if="item.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
-          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
-            {{ item.title }}
-          </slot>
-        </div>
-        <div v-if="item.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
-          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
-            {{ item.description }}
-          </slot>
-        </div>
+      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [uiProp?.wrapper, item.b24ui?.wrapper] })">
+        <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="b24ui.date({ class: [uiProp?.date, item.b24ui?.date] })">
+            <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
+              {{ item.date }}
+            </slot>
+          </div>
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="b24ui.title({ class: [uiProp?.title, item.b24ui?.title] })">
+            <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
+              {{ item.title }}
+            </slot>
+          </div>
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="b24ui.description({ class: [uiProp?.description, item.b24ui?.description] })">
+            <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
+              {{ item.description }}
+            </slot>
+          </div>
+        </slot>
       </div>
     </div>
   </Primitive>

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/timeline';
 import type { AvatarProps, IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
 export interface TimelineItem {
@@ -36,6 +36,11 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
      * @defaultValue 'vertical'
      */
     orientation?: Timeline['variants']['orientation'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     defaultValue?: string | number;
     reverse?: boolean;
     class?: any;
@@ -44,29 +49,38 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
 type SlotProps<T extends TimelineItem> = (props: {
     item: T;
 }) => any;
+export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
+    select: [event: Event, item: T];
+}
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     indicator: SlotProps<T>;
+    wrapper: SlotProps<T>;
     date: SlotProps<T>;
     title: SlotProps<T>;
     description: SlotProps<T>;
-} & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
+} & DynamicSlots<T, 'indicator' | 'wrapper' | 'date' | 'title' | 'description', {
     item: T;
 }>;
-declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
         modelValue?: string | number;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | number | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onSelect?: ((event: Event, item: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
-    emit: (evt: "update:modelValue", value: string | number | undefined) => void;
+    emit: ((evt: "select", event: Event, item: T) => void) & ((event: "update:modelValue", value: string | number | undefined) => 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/Toast.d.vue.ts

@@ -68,6 +68,8 @@ export interface ToastSlots {
         b24ui: Toast['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {
     height: import("vue").Ref<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -152,9 +154,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastP
             y: number;
         };
     }>, "currentTarget">) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    progress: boolean | Pick<ProgressProps, "color" | "b24ui">;
+    orientation: Toast["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;